/* ═══════════════════════════════════════════════════════════════
   COMPONENTS: CARDS, AVATARS, BADGES, DROPDOWNS, TABS, TOASTS, MODALS, TOOLTIPS
   INCLUDES: Intelligence layer components (Signal, Urgency, Identity, Trust)
   ═══════════════════════════════════════════════════════════════ */
/* ═══════════════════════════════════════════════════════════════
   COMPONENT: CARDS
   ═══════════════════════════════════════════════════════════════ */
.card {
  background: var(--bg-2); border: 1px solid rgba(0,196,114,.08);
  border-radius: 12px; transition: border-color .2s ease;
}
.card:hover { border-color: rgba(0,196,114,.15); }
.card-pad { padding: 16px; }
.card-pad-lg { padding: 22px; }

/* ═══════════════════════════════════════════════════════════════
   COMPONENT: AVATAR
   ═══════════════════════════════════════════════════════════════ */
.avatar {
  width: 36px; height: 36px; border-radius: 50%; display: flex;
  align-items: center; justify-content: center; font-weight: 700;
  font-size: 14px; flex-shrink: 0; position: relative; overflow: hidden;
  text-transform: uppercase;
}
.avatar-xs { width: 24px; height: 24px; font-size: 10px; }
.avatar-sm { width: 30px; height: 30px; font-size: 12px; }
.avatar-lg { width: 48px; height: 48px; font-size: 18px; }
.avatar-xl { width: 64px; height: 64px; font-size: 24px; }
.avatar-xxl { width: 96px; height: 96px; font-size: 36px; border-radius: 50%; }
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.avatar-status {
  position: absolute; bottom: 0; right: 0; width: 10px; height: 10px;
  border-radius: 50%; border: 2px solid var(--bg-2); background: var(--accent);
}
.avatar-badge {
  position: absolute; bottom: -2px; right: -2px; width: 18px; height: 18px;
  border-radius: 50%; background: var(--accent); color: #000;
  font-size: 9px; display: flex; align-items: center; justify-content: center;
  font-weight: 800; border: 2px solid var(--bg-2);
}

/* ═══════════════════════════════════════════════════════════════
   COMPONENT: BADGE & TAG
   ═══════════════════════════════════════════════════════════════ */
.badge {
  display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px;
  border-radius: 4px; font-size: 11px; font-weight: 600;
}
.badge-green { background: var(--accent-dim); color: var(--accent); }
.badge-red { background: var(--red-dim); color: var(--red); }
.badge-blue { background: var(--blue-dim); color: var(--blue); }
.badge-purple { background: var(--purple-dim); color: var(--purple); }
.badge-gold { background: rgba(191,162,78,.1); color: var(--gold); }
.tag {
  display: inline-block; background: var(--bg-3); color: var(--text-3);
  padding: 4px 12px; border-radius: var(--radius-s); font-size: 12px;
  font-weight: 500; transition: all var(--transition); cursor: pointer;
  border: 1px solid transparent;
}
.tag:hover { background: var(--accent-dim); color: var(--accent); border-color: var(--accent-border); }
.tag-active { background: var(--accent-dim); color: var(--accent); border-color: var(--accent-border); }

/* ═══════════════════════════════════════════════════════════════
   COMPONENT: DROPDOWN & MENU
   ═══════════════════════════════════════════════════════════════ */
.dropdown { position: relative; }
.dropdown-menu {
  position: absolute; top: calc(100% + 8px); right: 0; min-width: 220px;
  background: var(--bg-2); border: 1px solid rgba(0,196,114,.12);
  border-radius: 12px; padding: 6px; z-index: 500;
  box-shadow: 0 8px 32px rgba(0,0,0,.4), 0 0 0 1px rgba(0,196,114,.05);
  animation: fadeDown .15s ease; display: none;
}
.dropdown-menu.open { display: block; }
/* P65.225 — when there isn't enough viewport space below the kebab,
   _toggleAndFlipDropdown / _toggleCommentKebab adds `.dropdown-up`
   so the menu opens UPWARD from the trigger instead of downward.
   Catches the "last item in a list" case (kebab near the bottom of
   the viewport — menu would otherwise extend below the fold). */
.dropdown-menu.dropdown-up {
  top: auto;
  bottom: calc(100% + 8px);
  animation: fadeUp .15s ease;
}
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.dropdown-item {
  display: flex; align-items: center; gap: 10px; padding: 9px 12px;
  border-radius: 8px; font-size: 12px; color: var(--text-2);
  transition: all .15s; cursor: pointer; width: 100%;
  text-align: left; font-weight: 500;
}
.dropdown-item:hover { background: rgba(0,196,114,.05); color: var(--text-0); }
.dropdown-item svg { flex-shrink: 0; opacity: .4; }
.dropdown-item:hover svg { opacity: .7; color: var(--accent); }
.dropdown-sep { height: 1px; background: rgba(0,196,114,.06); margin: 4px 8px; }
.dropdown-item-danger { color: var(--red); }
.dropdown-item-danger:hover { background: rgba(196,64,64,.06); }
.dropdown-item-danger:hover svg { color: var(--red); }

/* ═══════════════════════════════════════════════════════════════
   COMPONENT: TABS
   ═══════════════════════════════════════════════════════════════ */
.tabs { display: flex; gap: 0; position: relative; background: var(--bg-2); border: 1px solid rgba(0,196,114,.08); border-radius: 10px; padding: 3px; }
.tabs::after { display: none; }
.tab {
  padding: 8px 18px; font-size: 12px; font-weight: 600; color: var(--text-4);
  border-radius: 8px; transition: all .2s; position: relative; letter-spacing: .02em;
}
.tab:hover { color: var(--text-2); background: rgba(255,255,255,.02); }
.tab-active {
  background: rgba(0,196,114,.08); color: var(--accent); font-weight: 700;
}
.tab-active::after { display: none; }
.tabs-underline { border-bottom: 1px solid var(--border); gap: 0; }
.tabs-underline .tab {
  border-radius: 0; padding: 10px 16px; border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}
.tabs-underline .tab-active { background: transparent; color: var(--accent); border-bottom-color: var(--accent); }

/* ═══════════════════════════════════════════════════════════════
   COMPONENT: TOAST / NOTIFICATION
   ═══════════════════════════════════════════════════════════════ */
.toast-container { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%); z-index: 10000; display: flex; flex-direction: column; gap: 8px; pointer-events: none; align-items: center; }
.toast {
  background: var(--bg-2); border: 1px solid rgba(0,196,114,.15);
  border-radius: 10px; padding: 10px 16px; font-size: 12px;
  color: var(--text-0); box-shadow: 0 8px 30px rgba(0,0,0,.4), 0 0 0 1px rgba(0,196,114,.05);
  display: flex; align-items: center; gap: 10px; animation: toastIn .3s cubic-bezier(.4,0,.2,1);
  pointer-events: auto; max-width: 380px; min-width: 200px; font-weight: 500;
}
.toast-exit { animation: toastOut .25s ease forwards; }
.toast-icon { width: 18px; height: 18px; border-radius: 6px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 10px; font-weight: 800; }
.toast-success .toast-icon { background: rgba(0,196,114,.1); color: var(--accent); }
.toast-success { border-color: rgba(0,196,114,.2); }
.toast-error .toast-icon { background: rgba(196,64,64,.1); color: var(--red); }
.toast-error { border-color: rgba(196,64,64,.15); }
.toast-info .toast-icon { background: rgba(61,127,196,.1); color: var(--blue); }
.toast-info { border-color: rgba(61,127,196,.15); }
.toast-msg { flex: 1; font-size: 12px; }
.toast-close { opacity: .25; cursor: pointer; padding: 2px; flex-shrink: 0; transition: opacity .15s; }
.toast-close:hover { opacity: .6; }

/* ═══════════════════════════════════════════════════════════════
   COMPONENT: MODAL
   ═══════════════════════════════════════════════════════════════ */
.modal-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,.75);
  z-index: 2000; display: none; align-items: center; justify-content: center;
  padding: 24px 16px; backdrop-filter: blur(6px);
}
.modal-overlay.open { display: flex; }
.modal {
  background: var(--bg-2); border: 1px solid rgba(0,196,114,.15);
  border-radius: var(--radius-l); width: 100%; max-width: 520px;
  position: relative;
  /* P65.29 — slightly longer entry + spring-out easing for a more
     pro feel. The old `.25s ease` was crisp but ungrounded; the
     spring tail (cubic-bezier with overshoot) gives the modal a
     subtle "settle" at the end. */
  animation: modalIn .32s cubic-bezier(.16, 1, .3, 1);
  box-shadow: 0 0 40px rgba(0,0,0,.5), 0 0 0 1px rgba(0,196,114,.06);
  /* Center column, scroll its body when taller than viewport */
  max-height: calc(100vh - 48px);
  display: flex;
  flex-direction: column;
  overflow: hidden;      /* body handles its own overflow */
}
.modal-lg { max-width: 620px; }
.modal-sm { max-width: 400px; }
.modal-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 20px; border-bottom: 1px solid rgba(0,196,114,.08);
  flex-shrink: 0;        /* pinned — don't compress when body is tall */
}
.modal-title { font-size: 14px; font-weight: 700; color: var(--text-0); letter-spacing: .02em; }
/* P65.67 — modal close button.
   Was previously unpositioned, so it landed in document flow at the
   very top-left of the modal — overlapping the border and looking
   detached from the card. Now absolute-positioned in the top-right
   corner, with a subtle bordered surface and a 90° rotation on hover
   for a polished touch. */
.modal-close {
  position: absolute;
  top: 12px; right: 12px;
  width: 32px; height: 32px;
  border-radius: 50%;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  color: var(--text-3);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  z-index: 5;
  transition: background var(--transition),
              border-color var(--transition),
              color var(--transition),
              transform .18s cubic-bezier(.16, 1, .3, 1);
}
.modal-close:hover {
  background: rgba(255,80,80,.10);
  border-color: rgba(255,80,80,.35);
  color: #ff8a8a;
  transform: rotate(90deg);
}
.modal-close:active { transform: rotate(90deg) scale(.94); }
.modal-close svg { width: 16px; height: 16px; pointer-events: none; }
.modal-body {
  padding: 16px 20px;
  overflow-y: auto;      /* only the body scrolls */
  flex: 1 1 auto;
  min-height: 0;         /* required for flex + overflow to cooperate */
}
.modal-footer {
  padding: 12px 20px; border-top: 1px solid rgba(0,196,114,.08);
  display: flex; gap: 10px; justify-content: flex-end;
  flex-shrink: 0;        /* pinned footer */
}

/* X-style post detail */
.xpost-header { display:flex; align-items:center; padding:12px 16px; position:sticky; top:0; z-index:10; background:var(--bg-2); border-bottom:1px solid var(--border); }
.xpost-back { width:34px; height:34px; border-radius:50%; display:flex; align-items:center; justify-content:center; cursor:pointer; color:var(--text-0); transition:background .15s; flex-shrink:0; }
.xpost-back:hover { background:rgba(255,255,255,.08); }
.xpost-header-title { font-size:18px; font-weight:800; color:var(--text-0); margin-left:24px; letter-spacing:-.02em; }
.xpost-user { display:flex; gap:10px; padding:16px; align-items:flex-start; }
.xpost-avatar { width:44px; height:44px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:16px; font-weight:700; flex-shrink:0; cursor:pointer; transition:opacity .15s; overflow:hidden; }
.xpost-avatar img { width:100%; height:100%; object-fit:cover; display:block; }
.xpost-avatar:hover { opacity:.85; }
.xpost-name { font-size:15px; font-weight:700; color:var(--text-0); display:flex; align-items:center; gap:4px; cursor:pointer; }
.xpost-name:hover { text-decoration:underline; }
.xpost-handle { font-size:13px; color:var(--text-3); }
.xpost-content { padding:0 16px 12px; }
.xpost-text { font-size:17px; color:var(--text-0); line-height:1.45; margin-bottom:10px; font-weight:500; }
.xpost-body { font-size:15px; color:var(--text-2); line-height:1.55; margin-bottom:12px; }
.xpost-media { border-radius:12px; overflow:hidden; border:1px solid var(--border); margin-bottom:14px; }
.xpost-media .post-media { border-radius:0; max-height:360px; }
.xpost-time { font-size:13px; color:var(--text-3); padding:12px 0; border-bottom:1px solid var(--border); display:flex; align-items:center; gap:4px; }
.xpost-metrics { display:flex; gap:0; padding:12px 0; border-bottom:1px solid var(--border); flex-wrap:wrap; }
.xpost-metric { padding:0 16px 0 0; font-size:13px; color:var(--text-3); display:flex; align-items:center; gap:4px; }
.xpost-metric strong { color:var(--text-0); font-weight:700; font-family:var(--mono); }
.xpost-actions { display:flex; justify-content:space-around; padding:4px 0; border-bottom:1px solid var(--border); }
.xpost-action { flex:1; display:flex; align-items:center; justify-content:center; gap:6px; padding:10px 0; cursor:pointer; color:var(--text-3); font-size:13px; transition:all .15s; border-radius:0; }
.xpost-action:hover { background:rgba(255,255,255,.03); }
.xpost-action.active { color:var(--accent); }
.xpost-action.active-red { color:var(--red); }
.xpost-action svg { width:18px; height:18px; }
.xpost-action .count { font-family:var(--mono); font-size:12px; }
.xpost-token { margin:12px 0; padding:12px 14px; background:var(--bg-3); border:1px solid var(--border); border-radius:10px; display:flex; align-items:center; gap:12px; cursor:pointer; transition:all .15s; }
.xpost-token:hover { border-color:rgba(0,196,114,.2); background:rgba(0,196,114,.02); }
.xpost-token-ticker { font-size:16px; font-weight:800; color:var(--text-0); font-family:var(--mono); }
.xpost-token-price { font-size:13px; font-weight:600; color:var(--text-2); font-family:var(--mono); }
.xpost-token-meta { font-size:11px; color:var(--text-4); display:flex; gap:10px; }
.xpost-reply-box { display:flex; gap:10px; padding:14px 16px; align-items:flex-start; border-bottom:1px solid var(--border); }
.xpost-reply-connector { width:2px; background:var(--border); margin:4px auto 0; flex-shrink:0; min-height:20px; }
.xpost-comment { display:flex; gap:10px; padding:14px 16px; transition:background .1s; cursor:pointer; border-bottom:1px solid rgba(255,255,255,.03); }
.xpost-comment:hover { background:rgba(255,255,255,.02); }
.xpost-comment-actions { display:flex; gap:0; margin-top:6px; }
.xpost-comment-action { display:flex; align-items:center; gap:4px; color:var(--text-4); font-size:12px; cursor:pointer; padding:4px 12px 4px 0; transition:color .15s; }
.xpost-comment-action:hover { color:var(--accent); }

/* ═══════════════════════════════════════════════════════════════
   COMPONENT: TOOLTIP
   ═══════════════════════════════════════════════════════════════ */
[data-tooltip] { position: relative; }
[data-tooltip]::after {
  content: attr(data-tooltip); position: absolute; bottom: calc(100% + 8px);
  left: 50%; transform: translateX(-50%); background: var(--bg-4);
  border: 1px solid var(--border-hover); color: var(--text-1);
  padding: 4px 10px; border-radius: var(--radius-s); font-size: 11px;
  white-space: nowrap; pointer-events: none; opacity: 0;
  transition: opacity .15s; z-index: 100;
}
[data-tooltip]:hover::after { opacity: 1; }

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

/* ═══════════════════════════════════════════════════════════════
   INTELLIGENCE LAYER — Signal, Urgency, Identity, Trust
   ═══════════════════════════════════════════════════════════════ */
.signal-bar {
  display:flex;gap:8px;padding:10px 14px;background:rgba(255,255,255,.015);border:1px solid rgba(0,196,114,.06);
  border-radius:var(--radius);margin-bottom:10px;font-size:11px;flex-wrap:wrap;align-items:center;
}
.signal-item { display:flex;align-items:center;gap:4px;color:var(--text-3);font-family:var(--mono); }
.signal-item strong { color:var(--text-0); }
.signal-score {
  display:inline-flex;align-items:center;gap:5px;padding:3px 10px;border-radius:12px;font-size:11px;
  font-weight:700;font-family:var(--mono);letter-spacing:.02em;
}
.signal-score-high { background:rgba(0,196,114,.12);color:#00C472;border:1px solid rgba(0,196,114,.2); }
.signal-score-mid { background:rgba(191,162,78,.1);color:#BFA24E;border:1px solid rgba(191,162,78,.18); }
.signal-score-low { background:rgba(196,64,64,.1);color:#C44040;border:1px solid rgba(196,64,64,.18); }
.signal-tag {
  padding:2px 8px;border-radius:3px;font-size:10px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
}
.signal-early { background:rgba(0,196,114,.15);color:#00C472; }
.signal-mid { background:rgba(191,162,78,.12);color:#BFA24E; }
.signal-late { background:rgba(196,64,64,.12);color:#C44040; }
.signal-dead { background:rgba(255,255,255,.05);color:var(--text-4); }

/* Urgency indicators */
.urgency-strip {
  display:flex;gap:6px;margin-bottom:8px;flex-wrap:wrap;
}
.urgency-tag {
  display:inline-flex;align-items:center;gap:4px;padding:3px 8px;border-radius:4px;
  font-size:10px;font-weight:600;letter-spacing:.03em;animation:fadeUp .3s ease;
}
.urgency-launch { background:rgba(0,196,114,.1);color:#00C472; }
.urgency-whale { background:rgba(61,127,196,.1);color:#5090D0; }
.urgency-velocity { background:rgba(196,125,42,.1);color:#C47D2A; }
.urgency-pump { background:rgba(107,92,174,.1);color:#8070B8; }
@keyframes blink { 0%,100%{opacity:1}50%{opacity:.3} }
.blink-dot { width:6px;height:6px;border-radius:50%;animation:blink 1.2s infinite; }
.blink-green { background:#00C472; }
.blink-blue { background:#5090D0; }
.blink-orange { background:#C47D2A; }
.blink-purple { background:#8070B8; }

/* Identity badges */
.user-tier {
  display:inline-flex;align-items:center;gap:3px;padding:1px 6px;border-radius:3px;
  font-size:9px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;margin-left:4px;
}
.tier-whale { background:rgba(61,127,196,.12);color:#5090D0; }
.tier-alpha { background:rgba(0,196,114,.12);color:#00C472; }
.tier-sniper { background:rgba(196,125,42,.12);color:#C47D2A; }
.tier-degen { background:rgba(107,92,174,.12);color:#8070B8; }
.tier-top { background:rgba(191,162,78,.12);color:#BFA24E; }

/* Trust indicators */
.trust-badge {
  display:inline-flex;align-items:center;gap:3px;padding:2px 7px;border-radius:3px;
  font-size:10px;font-weight:600;
}
.trust-safe { background:rgba(0,196,114,.1);color:#00C472; }
.trust-risky { background:rgba(191,162,78,.1);color:#BFA24E; }
.trust-danger { background:rgba(196,64,64,.1);color:#C44040; }

/* Smart Money indicator */
.smart-money { display:flex;align-items:center;gap:4px;font-size:10px;color:var(--accent);font-weight:600; }
.smart-money-dot { width:5px;height:5px;border-radius:50%;background:#00C472;animation:blink 1.5s infinite; }

/* Why-this-matters panel */
.insight-box {
  background:rgba(0,196,114,.03);border:1px solid rgba(0,196,114,.08);border-left:3px solid var(--accent);
  border-radius:0 var(--radius-s) var(--radius-s) 0;padding:8px 12px;margin-bottom:10px;
  font-size:12px;color:var(--text-2);line-height:1.5;
}
.insight-label { font-size:9px;font-weight:700;color:var(--accent);letter-spacing:.08em;margin-bottom:3px;text-transform:uppercase; }

/* Live pulse on right sidebar */
.live-pulse { display:inline-flex;align-items:center;gap:5px; }
.live-dot { width:7px;height:7px;border-radius:50%;background:#00C472;animation:blink 1.4s infinite; }
.live-text { font-size:10px;font-weight:600;color:var(--accent);letter-spacing:.05em; }

/* Composite score meter */
.score-meter { width:100%;height:4px;background:var(--bg-4);border-radius:2px;overflow:hidden;margin-top:4px; }
.score-meter-fill { height:100%;border-radius:2px;transition:width .5s ease; }

/* XP / Level system */
.xp-bar { width:100%;height:3px;background:var(--bg-4);border-radius:2px;overflow:hidden; }
.xp-fill { height:100%;background:var(--accent);border-radius:2px;transition:width .3s; }
.level-badge {
  display:inline-flex;align-items:center;gap:4px;padding:2px 8px;border-radius:10px;
  font-size:10px;font-weight:700;background:var(--accent-dim);color:var(--accent);border:1px solid var(--accent-border);
}

/* ═══════════════════════════════════════════════════════════════
   REELS SYSTEM — TikTok-style snap-scroll (P26)
   ═══════════════════════════════════════════════════════════════

   Layout:
   - .reels-viewport is the snap-scroll container. Each .reel-slide
     is one full viewport height and snaps into place.
   - Videos autoplay when ≥60% visible (IntersectionObserver).
   - Custom controls overlay — tap center to play/pause, actions on right.
   - Bottom-left: author + caption. Comment sheet slides up as overlay.
*/

.reels-viewport {
  position: fixed;
  /* Account for the app header + the top price ticker. Main content
     usually starts below both, and reels should feel immersive — we
     overlay the entire main area from directly under the ticker. */
  inset: 0;
  top: var(--top-offset, 88px);
  background: #000;
  overflow-y: scroll;
  scroll-snap-type: y mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  z-index: 5;
}
/* When reels page is active, hide body scroll so only the viewport scrolls */
body.reels-active { overflow: hidden; }

.reel-slide {
  position: relative;
  width: 100%;
  height: 100%;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  background: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Each slide is exactly the viewport height minus the header. */
  min-height: calc(100vh - var(--header-h, 56px));
}
/* P65.40b — breathing room above and below the framed reel on
   desktop only, so the box-shadow can render and the comment-sheet
   composer doesn't end up flush against the viewport bottom.
   Mobile keeps full-bleed so it feels TikTok-native.
   P65.244 — tightened from 16/32 to 6/14 so the reel reclaims the
   ~30px of vertical space the breathing room was eating. */
@media (min-width: 768px) {
  .reel-slide {
    padding: 6px 0 14px;
  }
}

.reel-media-container {
  position: relative;
  width: 100%;
  height: 100%;
  margin: 0 auto;
  background: #000;
  overflow: hidden;
  /* Mobile default = full bleed, no decoration. The desktop media
     query below adds the framed phone-screen treatment. */
}
/* P65.40c — desktop reel sizing.
   Earlier attempts used aspect-ratio + width:auto/height:auto, which
   collapses to 0×0 because the container has no intrinsic content
   (the video is absolutely positioned). Lesson: aspect-ratio without
   an anchored dimension on a contentless element renders nothing.
   Instead we keep base width:100%/height:100% from the rule above
   and just cap both with max-* values. The slide still flex-centers
   the result, so the container ends up as a properly framed panel
   with viewport padding around it.
     • max-width 420px ≈ phone width on desktop
     • max-height 760px so even on a tall display we stay contained
     • the second query clamps further on short viewports so the
       composer never gets pinned against the viewport bottom
     • framing decoration (rounded corners, border, shadow) lives
       here too — mobile keeps a clean edge-to-edge bleed. */
@media (min-width: 768px) {
  .reel-media-container {
    /* P65.244 — taller reel.
       Old approach hard-capped at max-width:420px / max-height:760px,
       which on a 1080p display left ~300px of unused vertical space.
       New approach derives height from the viewport (header 56px +
       slide padding 20px = 76px subtracted) and width from the
       aspect ratio.  Ergonomic max-width caps keep the reel from
       growing comically wide on 4K monitors.
       P65.245 — aspect ratio relaxed from 9:16 → 10:16 (+11% width
       at the same height) and max-width bumped 560 → 640.  Most
       user-uploaded reels aren't strict 9:16 portrait anyway (they
       letterbox via object-fit:contain), so the slightly wider
       frame just gives the video more horizontal room without
       eating any extra vertical space.
       P65.246 — relaxed further to 11:16 (~10% wider than 10:16)
       and max-width bumped 640 → 720.  Lots of user-uploaded reels
       are landscape (Discord screenshots, gameplay clips) and the
       wider frame trims the letterbox top/bottom further. */
    height: calc(100vh - 76px);
    max-height: 1000px;
    aspect-ratio: 11 / 16;
    width: auto;
    max-width: 720px;
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    box-shadow: 0 24px 48px rgba(0, 0, 0, 0.5);
  }
}
.reel-media-container video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;   /* Preserve aspect — letterbox if needed */
  background: #000;
  cursor: pointer;
}

/* Bottom gradient for text legibility.
   P65.40 — moved from .reel-slide to .reel-media-container so the
   gradient stays inside the framed reel column on desktop. Otherwise
   it darkened the empty black space outside the frame, which looked
   like a half-rendered drop shadow. */
.reel-media-container::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 38%;
  background: linear-gradient(180deg, transparent 0%, rgba(0,0,0,0.78) 100%);
  pointer-events: none;
  z-index: 2;
  border-radius: inherit;
}

/* Tap-to-play overlay — appears when paused. Center of slide. */
.reel-play-overlay {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 72px; height: 72px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  display: flex; align-items: center; justify-content: center;
  pointer-events: none;
  opacity: 0;
  transition: opacity .2s ease;
  z-index: 3;
}
.reel-slide.is-paused .reel-play-overlay { opacity: 1; }

/* P63c: Mute toggle on the reel video frame itself.
   P65.43 — moved up to top:14px now that the desktop frame (P65.40)
   constrains the container to a 9:16 phone shape with rounded corners.
   The previous 80px offset was a workaround for landscape letterboxing
   pushing the top of the container into dead black space — that no
   longer applies inside the framed reel, where the top is the actual
   top of the visible card. Sits comfortably under the rounded corner
   without overlapping the rest of the UI. */
.reel-mute-toggle {
  position: absolute;
  top: 14px; right: 14px;
  width: 36px; height: 36px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: none;
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  z-index: 4;
  transition: background .15s;
}
.reel-mute-toggle:hover { background: rgba(0, 0, 0, 0.75); }

/* Progress bar — bottom edge, thin, shows video position.
   P65.246 — slimmed from 2px → 1px and the fill swapped from
   bright green (var(--accent)) to soft white at 65% opacity.
   The bar is a passive position indicator, not a CTA — it shouldn't
   compete with the rail icons or the action button below for the
   eye.  TikTok / IG Reels both use a white progress line for the
   same reason. */
.reel-progress {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: rgba(255, 255, 255, 0.10);
  z-index: 3;
  pointer-events: none;
}
.reel-progress-fill {
  height: 100%;
  background: rgba(255, 255, 255, 0.65);
  width: 0%;
  transition: width .1s linear;
}

/* Caption + user — bottom-left, above the action rail */
.reel-caption {
  position: absolute;
  left: 16px;
  bottom: 24px;
  max-width: calc(100% - 100px);   /* leave room for action rail */
  z-index: 4;
  color: #fff;
}
.reel-caption-user {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 6px;
  cursor: pointer;
}
.reel-caption-user-name {
  font-size: 14px; font-weight: 700; color: #fff;
  text-shadow: 0 1px 3px rgba(0,0,0,.5);
}
.reel-caption-time {
  font-size: 11px; color: rgba(255,255,255,.6); font-family: var(--mono);
}
.reel-caption-title {
  font-size: 14px; line-height: 1.4; color: #fff;
  text-shadow: 0 1px 3px rgba(0,0,0,.5);
  font-weight: 500;
  max-height: 60px; overflow: hidden;
  text-overflow: ellipsis; display: -webkit-box;
  -webkit-line-clamp: 3; -webkit-box-orient: vertical;
}

/* Right action rail — vertical, TikTok-style */
/* P65.407 / P65.417 — kebab dropdown on the reel rail.
   Anchored to the LEFT of the kebab button (right:100% + margin)
   instead of arbitrary pixel offsets, so the dropdown sits exactly
   beside the button regardless of rail width. Very high z-index
   escapes the rail's stacking context. Backdrop-filter + solid bg
   give a polished iOS-style dark glass look. */
.reel-rail-kebab {
  position: relative;
}
.reel-rail-kebab .dropdown-menu {
  display: none;
}
.reel-rail-kebab.open .dropdown-menu.reel-rail-dropdown {
  display: block;
  /* Anchor: align the menu's RIGHT edge to 100% from the wrapper's
     left edge, with an 8px gap so it sits just LEFT of the button.
     bottom:0 keeps it bottom-aligned with the kebab; the menu opens
     upward from there. */
  position: absolute;
  right: calc(100% + 8px);
  bottom: 0;
  top: auto;
  left: auto;
  min-width: 180px;
  z-index: 1000;             /* above .reel-rail (z:4) and slide layers */
  background: #1a1d22;        /* solid — no transparent fallthrough */
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 12px;
  padding: 6px;
  box-shadow:
    0 16px 40px -8px rgba(0,0,0,0.7),
    0 0 0 1px rgba(0,0,0,0.4);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  animation: reelKebabIn .15s cubic-bezier(.2,.8,.2,1);
}
@keyframes reelKebabIn {
  from { opacity: 0; transform: translateX(6px) scale(0.96); }
  to   { opacity: 1; transform: none; }
}
.reel-rail-dropdown .dropdown-item {
  padding: 10px 12px;
  font-size: 13px;
  color: #e5e7eb;
  border-radius: 8px;
}
.reel-rail-dropdown .dropdown-item:hover {
  background: rgba(255,255,255,0.06);
  color: #ffffff;
}
.reel-rail-dropdown .dropdown-item svg {
  width: 16px; height: 16px;
  opacity: 0.7;
}
.reel-rail-dropdown .dropdown-item:hover svg { opacity: 1; }
.reel-rail-dropdown .dropdown-item-danger {
  color: #fca5a5;
}
.reel-rail-dropdown .dropdown-item-danger:hover {
  background: rgba(255,95,95,0.10);
  color: #fff;
}
/* Small downward-pointing tail on the right side that visually
   connects the menu to the kebab button. */
.reel-rail-dropdown::after {
  content: '';
  position: absolute;
  right: -5px; bottom: 14px;
  width: 10px; height: 10px;
  background: #1a1d22;
  border-right: 1px solid rgba(255,255,255,0.12);
  border-top:   1px solid rgba(255,255,255,0.12);
  transform: rotate(45deg);
  z-index: -1;
}

.reel-rail {
  position: absolute;
  right: 12px;
  bottom: 24px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  align-items: center;
  z-index: 4;
}
.reel-rail-btn {
  background: transparent;
  border: none;
  color: rgba(255,255,255,.95);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  cursor: pointer;
  padding: 4px;
  font-size: 11px;
  font-family: var(--mono);
  transition: transform .15s;
}
.reel-rail-btn:hover { transform: scale(1.08); }
.reel-rail-btn svg {
  filter: drop-shadow(0 1px 3px rgba(0,0,0,.6));
}
.reel-rail-btn.active { color: var(--accent); }
.reel-rail-btn.active svg { fill: var(--accent); stroke: var(--accent); }
.reel-rail-count {
  font-size: 11px; font-weight: 600;
  text-shadow: 0 1px 2px rgba(0,0,0,.6);
  font-family: var(--mono);
}
.reel-rail-avatar {
  width: 40px; height: 40px; border-radius: 50%;
  /* P65.40 — was rgba(255,255,255,.6) which alpha-blends with whatever
     colors the video is showing behind the avatar. On bright/colored
     backgrounds (like a Telegram emoji-grid frame) the 40% transparent
     white reads as pink/red. Solid white sidesteps the bleed; a darker
     rim ring underneath gives separation against light backgrounds. */
  border: 2px solid #fff;
  outline: 1px solid rgba(0, 0, 0, 0.45);
  outline-offset: -3px;
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; font-weight: 700; color: #fff;
  cursor: pointer;
  margin-bottom: 6px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.55);
  overflow: hidden;
}

/* In-reel comment sheet — slides up, overlays the reel */
.reel-comment-sheet {
  position: absolute;
  left: 0; right: 0;
  bottom: 0;
  height: 60%;
  background: var(--bg-1);
  border-top: 1px solid var(--border);
  border-radius: 14px 14px 0 0;
  transform: translateY(100%);
  transition: transform .25s cubic-bezier(.2,.7,.2,1);
  z-index: 20;
  display: flex;
  flex-direction: column;
}
.reel-comment-sheet.open { transform: translateY(0); }
.reel-comment-sheet-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
}
.reel-comment-sheet-title {
  font-size: 14px; font-weight: 700; color: var(--text-0);
}
.reel-comment-sheet-close {
  background: transparent; border: none;
  color: var(--text-3); cursor: pointer;
  width: 28px; height: 28px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
}
.reel-comment-sheet-close:hover { background: var(--bg-2); color: var(--text-0); }
.reel-comment-sheet-body {
  flex: 1;
  overflow-y: auto;
  padding: 8px 16px;
}
.reel-comment-sheet-composer {
  padding: 10px 12px;
  border-top: 1px solid var(--border);
  display: flex; gap: 8px;
}
.reel-comment-sheet-composer input {
  flex: 1;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 8px 14px;
  font-size: 13px;
  color: var(--text-0);
  font-family: inherit;
}
.reel-comment-sheet-composer input:focus {
  outline: none; border-color: var(--accent);
}

/* ═══════════════════════════════════════════════════════════════
   P65.240 — Reels page redesign.
   Five layers of polish:
   1. Page chrome hide — left nav, right sidebar, ticker all gone
      so the reel owns the entire viewport.  Top app header stays
      so users can still search/notify/wallet without leaving.
   2. Skeleton loader — phone-shaped frame with shimmer sweep,
      pulsing rail pips and caption lines, centered spinner.
      Renders synchronously alongside the viewport so the user
      sees a beautiful placeholder from frame 1, never a black
      void during the async hydrator's RPC await.
   3. Entry animation — viewport slides up + fades in on enter.
   4. Active-reel polish — the slide observed at ≥60% visible
      gets .is-active and a subtle scale-in feel.
   5. Action rail frosting — backdrop-blur on the right buttons
      so they read as floating glass over the video.
   ═══════════════════════════════════════════════════════════════ */

/* 1. Hide every other surface when the user is on /reels.  Uses
   page-reels (set BEFORE hydration runs) instead of reels-active
   (set INSIDE the async hydrator) so the chrome never flashes.
   P65.241 — also hide the floating compose + marketplace FABs;
   they don't belong in immersive video mode.
   P65.242 — also hide the .feed-header which renders a "Reels"
   label at the top of every page (shipped from renderFeedHeader's
   labels map).  The page is its own visual identity — the label
   is redundant and was flashing during navigation. */
body.page-reels #sidebarLeft,
body.page-reels #sidebarRight,
body.page-reels #trendTicker,
body.page-reels .sidebar-left,
body.page-reels .sidebar-right,
body.page-reels .trend-ticker,
body.page-reels #fabCompose,
body.page-reels #fabMarket,
body.page-reels .fab-create,
body.page-reels .fab-market,
body.page-reels .feed-header {
  display: none !important;
}
body.page-reels #mainContent,
body.page-reels .main-feed {
  max-width: none !important;
  padding: 0 !important;
  margin: 0 !important;
  width: 100% !important;
  background: #000 !important;
  /* P65.247 — kill the .main-feed's own overflow:auto scroll.
     The base layout.css gives .main-feed { overflow-y:auto } with a
     6px scrollbar (transparent by default, dim on hover).  When the
     user navigates from a tall page like Feed to Reels, that
     scrollbar is briefly visible during the transition because the
     OLD feed content is still in the DOM for one frame.  Pinning
     overflow:hidden on the reels page stops it dead, AND we also
     zero the webkit scrollbar parts so even if a system pref forces
     "always show scrollbars" we don't paint a track. */
  overflow: hidden !important;
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
}
body.page-reels #mainContent::-webkit-scrollbar,
body.page-reels .main-feed::-webkit-scrollbar {
  width: 0 !important;
  height: 0 !important;
  display: none !important;
}
/* P65.242 — pin .app-body to exactly viewport height so it can't
   contribute to a body-level scrollbar.  The default rule is
   `min-height: calc(100vh - var(--top-offset))` + `padding-top:
   var(--top-offset)`, which with --top-offset:56px on reels gives
   the box room to grow past 100vh during the layout transition.
   Forcing height + padding:0 + overflow:hidden caps it. */
body.page-reels .app-body {
  height: 100vh !important;
  min-height: 100vh !important;
  max-height: 100vh !important;
  padding: 0 !important;
  overflow: hidden !important;
}
/* Ticker is hidden so the viewport can claim the space directly
   below the header (56px) instead of leaving an 88px gap. */
body.page-reels {
  --top-offset: 56px;
  /* P65.241 — kill body scroll on the reels page.
     The previous behavior was to set body.reels-active { overflow:hidden }
     INSIDE the async hydrator, but that left a window where body scroll
     was still active (page rendered → reel viewport position:fixed
     overlays main content → body still has the previous page's natural
     height → scrollbars flicker on the right edge for 1-2 frames).
     Pinning overflow:hidden on page-reels (synchronous, set before
     paint) eliminates the scrollbar glitch entirely. */
  overflow: hidden !important;
  height: 100vh !important;
}
/* P65.242 / P65.243 — also pin <html>.  body { overflow: hidden }
   prevents the body from being a scroll container but doesn't force
   the html element off — and on some browsers a tall #appBody
   (during the navigation paint) can still trigger an html-level
   scrollbar.  We mirror the page class to <html> in renderApp()
   (P65.243) so this works without :has() support, and we explicitly
   nuke any scrollbar UI in case the system preference is "always
   show scrollbars" (which can override scrollbar-width: none in
   some Windows setups). */
html.page-reels {
  overflow: hidden !important;
  height: 100vh !important;
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
}
html.page-reels::-webkit-scrollbar {
  width: 0 !important;
  height: 0 !important;
  display: none !important;
}
/* Same belt-and-suspenders on body. */
body.page-reels::-webkit-scrollbar {
  width: 0 !important;
  height: 0 !important;
  display: none !important;
}
/* Bump z-index well above any sidebar/ticker that ignored the
   display:none above (defensive against 3rd-party overrides). */
body.page-reels .reels-viewport {
  z-index: 50;
}
/* P65.242 — hide the reels-viewport's own scrollbar.  The viewport
   has overflow-y: scroll for snap-pagination between reels — we
   need the scroll mechanic but NOT the visible track.  All three
   vendor properties so it stays hidden across browsers. */
.reels-viewport {
  scrollbar-width: none;          /* Firefox */
  -ms-overflow-style: none;       /* IE / old Edge */
}
.reels-viewport::-webkit-scrollbar {
  width: 0;
  height: 0;
  display: none;                  /* WebKit / Chromium / Safari */
}

/* 3. Entry animation — viewport slides up + fades in. */
body.page-reels .reels-viewport {
  animation: reelsViewportEnter .42s cubic-bezier(.22, 1, .36, 1);
}
@keyframes reelsViewportEnter {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* 4. Active-reel polish — subtle scale-in when slide enters viewport.
   The .is-active class is added by the IntersectionObserver at ≥60%
   visibility.  Animation runs once per entry; CSS transition smooths
   the resting state so re-enters feel responsive. */
.reel-slide .reel-media-container {
  transition: transform .42s cubic-bezier(.22, 1, .36, 1),
              box-shadow .42s ease;
}
.reel-slide.is-active .reel-media-container {
  animation: reelActiveIn .5s cubic-bezier(.22, 1, .36, 1);
}
@keyframes reelActiveIn {
  from { transform: scale(.965); opacity: .82; }
  to   { transform: scale(1);    opacity: 1;   }
}
@media (min-width: 768px) {
  /* On desktop only, the active reel gets a stronger shadow ring
     so it visually pops out of the surrounding black backdrop. */
  .reel-slide.is-active .reel-media-container {
    box-shadow:
      0 24px 48px rgba(0, 0, 0, .55),
      0 0 0 1px rgba(255, 255, 255, .08),
      0 0 80px rgba(0, 196, 114, .08);
  }
}

/* 5. Action rail — clean SVG icons floating over the video, no frosted
   backdrop.  P65.240 originally added a backdrop-filter blur for a
   "frosted glass" look, but with background:transparent on the button
   the blur created a visible blurred disk behind each icon (the
   "transparent thing" the user pointed at).  Drop the filter; rely
   on the existing drop-shadow on the SVGs (.reel-rail-btn svg) for
   legibility against the video. */

/* ─── 2. Skeleton loader ─────────────────────────────────────── */
.reels-skeleton {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #000;
  z-index: 2;
  pointer-events: none;
  /* Subtle ambient glow behind the frame so it doesn't read as
     pure black flatness on big monitors. */
  background:
    radial-gradient(circle at 50% 45%, rgba(0, 196, 114, .04) 0%, transparent 55%),
    #000;
}
.reels-skeleton-frame {
  position: relative;
  width: min(100%, 420px);
  aspect-ratio: 9 / 16;
  max-height: calc(100vh - var(--top-offset, 88px) - 64px);
  border-radius: 14px;
  overflow: hidden;
  background: linear-gradient(
    135deg,
    #0c0e10 0%,
    #14171a 45%,
    #0c0e10 100%);
  border: 1px solid rgba(255, 255, 255, .04);
}
@media (max-width: 767px) {
  .reels-skeleton-frame {
    width: 100%;
    height: 100%;
    max-height: none;
    border-radius: 0;
    border: none;
  }
}
/* Shimmer sweep — diagonal light bar that traverses the frame. */
.reels-skeleton-shimmer {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    115deg,
    transparent 35%,
    rgba(255, 255, 255, .035) 50%,
    transparent 65%);
  background-size: 220% 100%;
  animation: reelsSkelSweep 2.4s cubic-bezier(.4, 0, .6, 1) infinite;
}
@keyframes reelsSkelSweep {
  0%   { background-position: 220% 0%; }
  100% { background-position: -120% 0%; }
}
/* Centered spinner + label.  z-index above the shimmer so it stays
   crisp; the shimmer reads as ambient atmosphere behind it. */
.reels-skeleton-loader {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 10.5px;
  color: rgba(255, 255, 255, .55);
  letter-spacing: .14em;
  text-transform: uppercase;
  font-weight: 700;
  font-family: var(--mono, ui-monospace, monospace);
  z-index: 3;
}
.reels-skeleton-loader-label {
  /* Subtle color cycle so the text feels alive even while waiting. */
  animation: reelsSkelLabelPulse 2s ease-in-out infinite;
}
@keyframes reelsSkelLabelPulse {
  0%, 100% { opacity: .55; }
  50%      { opacity: .85; }
}
.reels-skeleton-spinner {
  width: 18px; height: 18px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, .12);
  border-top-color: #00d484;
  animation: reelsSkelSpin .8s linear infinite;
}
@keyframes reelsSkelSpin {
  to { transform: rotate(360deg); }
}
/* Right-side rail placeholder — mirrors the real action rail layout
   so when real reels arrive the eye doesn't jump.  5 pips: avatar +
   like + comment + save + share. */
.reels-skeleton-rail {
  position: absolute;
  right: 14px;
  bottom: 80px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  z-index: 2;
}
.reels-skeleton-rail-pip {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .055);
  animation: reelsSkelPipPulse 1.6s ease-in-out infinite;
}
.reels-skeleton-rail-avatar {
  background: linear-gradient(135deg, rgba(0, 196, 114, .14), rgba(0, 196, 114, .04));
  border: 1px solid rgba(0, 196, 114, .18);
}
.reels-skeleton-rail-pip:nth-child(2) { animation-delay: .12s; }
.reels-skeleton-rail-pip:nth-child(3) { animation-delay: .24s; }
.reels-skeleton-rail-pip:nth-child(4) { animation-delay: .36s; }
.reels-skeleton-rail-pip:nth-child(5) { animation-delay: .48s; }
@keyframes reelsSkelPipPulse {
  0%, 100% { opacity: .5; transform: scale(1); }
  50%      { opacity: .9; transform: scale(1.04); }
}
/* Bottom-left caption placeholder — mirrors the real .reel-caption. */
.reels-skeleton-caption {
  position: absolute;
  left: 18px;
  bottom: 28px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  z-index: 2;
  max-width: calc(100% - 90px);
}
.reels-skeleton-caption-handle {
  width: 90px;
  height: 14px;
  border-radius: 4px;
  background: rgba(255, 255, 255, .08);
  animation: reelsSkelPipPulse 1.6s ease-in-out infinite;
}
.reels-skeleton-caption-line {
  width: 220px;
  height: 11px;
  border-radius: 4px;
  background: rgba(255, 255, 255, .06);
  animation: reelsSkelPipPulse 1.6s ease-in-out infinite;
  animation-delay: .15s;
}
.reels-skeleton-caption-line-short {
  width: 140px;
  animation-delay: .3s;
}

/* Empty reels state */
.reels-empty {
  display: flex; align-items: center; justify-content: center;
  flex-direction: column;
  min-height: calc(100vh - var(--header-h, 56px));
  color: rgba(255,255,255,.7);
  text-align: center;
  padding: 40px 20px;
}
.reels-empty-title {
  font-size: 18px; font-weight: 700; color: #fff;
  margin-bottom: 8px;
}
.reels-empty-desc {
  font-size: 13px; color: rgba(255,255,255,.5);
  margin-bottom: 20px; max-width: 280px; line-height: 1.5;
}

/* P61.7: fallback banner shown when no formal reels exist but there
   ARE recent video posts. Mirrors the Trending → Top fallback pattern.
   Sits above the first slide, semi-transparent so the video peeks
   through, with a clear "be first to post a reel" CTA. */
.reels-fallback-banner {
  position: fixed;
  top: calc(var(--header-h, 56px) + 12px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 5;
  width: min(420px, calc(100vw - 32px));
  padding: 12px 16px;
  background: rgba(0, 0, 0, .72);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 12px;
  text-align: center;
  pointer-events: auto;
}
.reels-fallback-banner-title {
  font-size: 13px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 2px;
}
.reels-fallback-banner-desc {
  font-size: 11px;
  color: rgba(255, 255, 255, .65);
  margin-bottom: 10px;
  line-height: 1.4;
}
.reels-fallback-banner .btn {
  font-size: 11px;
  padding: 6px 12px;
}

/* ═══════════════════════════════════════════════════════════════
   P65.2 — Anonymous reels sign-up gate.
   Rendered as a full snap-stop slide *after* the last preview reel,
   so guests swipe up expecting another reel and instead land on a
   fullscreen wall. Geometry mirrors .reel-slide so the snap-scroll
   rhythm doesn't break. NO video, NO observer hook — the wireup
   skips this slide because it queries .reel-slide.
   ═══════════════════════════════════════════════════════════════ */
.reel-gate-slide {
  position: relative;
  width: 100%;
  height: 100%;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  min-height: calc(100vh - var(--header-h, 56px));
  display: flex;
  align-items: center;
  justify-content: center;
  /* Subtle radial green glow to anchor the eye on the card and break
     up the otherwise-flat black, without competing with it visually. */
  background:
    radial-gradient(ellipse at center, rgba(0, 196, 114, 0.10) 0%, rgba(0, 196, 114, 0.03) 35%, #000 75%),
    #000;
  padding: 24px;
  box-sizing: border-box;
}
.reel-gate-card {
  position: relative;
  text-align: center;
  background: linear-gradient(180deg, rgba(20, 22, 26, .96), rgba(15, 17, 21, .98));
  border: 1px solid rgba(0, 196, 114, .22);
  border-radius: 16px;
  padding: 32px 30px 28px;
  max-width: 380px;
  width: 100%;
  box-shadow:
    0 30px 70px -28px rgba(0, 0, 0, .9),
    0 0 0 1px rgba(255, 255, 255, .02) inset,
    0 0 60px -12px rgba(0, 196, 114, .18);
  animation: reelGateIn .55s cubic-bezier(.2, .7, .2, 1);
}
@keyframes reelGateIn {
  from { opacity: 0; transform: translateY(14px) scale(.98); }
  to   { opacity: 1; transform: translateY(0)    scale(1); }
}
.reel-gate-icon {
  width: 46px; height: 46px;
  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 16px;
}
.reel-gate-eyebrow {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--accent);
  font-family: var(--mono);
  margin-bottom: 10px;
  opacity: .85;
}
.reel-gate-title {
  font-size: 24px;
  font-weight: 800;
  color: var(--text-0);
  letter-spacing: -.02em;
  line-height: 1.18;
  margin-bottom: 10px;
}
.reel-gate-body {
  font-size: 14px;
  color: var(--text-2);
  line-height: 1.55;
  margin-bottom: 22px;
}
.reel-gate-cta {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 14px;
}
.reel-gate-cta .btn-lg {
  width: 100%;
  padding: 12px 22px;
  font-size: 13px;
}
.reel-gate-hint {
  font-size: 11px;
  color: var(--text-4);
  font-family: var(--mono);
  letter-spacing: .04em;
  margin-bottom: 18px;
}
.reel-gate-back {
  background: none;
  border: none;
  color: var(--text-3);
  font-size: 12px;
  cursor: pointer;
  padding: 6px 10px;
  border-radius: 6px;
  transition: color .15s, background .15s;
}
.reel-gate-back:hover { color: var(--text-1); background: rgba(255, 255, 255, .04); }

/* Side-by-side CTAs on wider screens — stacked feels cramped on
   tablet+. Flip back to row when the slide can comfortably hold it. */
@media (min-width: 480px) {
  .reel-gate-cta { flex-direction: row; justify-content: center; }
  .reel-gate-cta .btn-lg { width: auto; }
}

/* Post format tabs in create modal */
.post-format-tabs { display:flex;gap:2px;margin-bottom:16px;background:var(--bg-3);border-radius:var(--radius);padding:3px; }
.post-format-tab {
  flex:1;padding:8px;border-radius:calc(var(--radius) - 2px);font-size:12px;font-weight:600;
  color:var(--text-3);text-align:center;transition:all .15s;cursor:pointer;
  display:flex;align-items:center;justify-content:center;gap:5px;
}
.post-format-tab:hover { color:var(--text-1); }
.post-format-tab.active { background:var(--bg-2);color:var(--accent);box-shadow:var(--shadow-sm); }

/* Post intent tags */
.intent-tag {
  display:inline-flex;align-items:center;gap:3px;padding:3px 8px;border-radius:4px;
  font-size:10px;font-weight:700;letter-spacing:.04em;cursor:pointer;transition:all .15s;
}
.intent-buy { background:rgba(0,196,114,.1);color:#00C472;border:1px solid rgba(0,196,114,.15); }
.intent-watch { background:rgba(61,127,196,.1);color:#5090D0;border:1px solid rgba(61,127,196,.15); }
.intent-avoid { background:rgba(196,64,64,.1);color:#C44040;border:1px solid rgba(196,64,64,.15); }

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

/* ═══════════════════════════════════════════════════════════
   FAB — X-style floating compose button (mobile-first)
   ═══════════════════════════════════════════════════════════ */
/* P65.250 — FAB cluster repositioned as a vertically-centered
   selector group on the right edge.  Both buttons are 46×46 with
   shared corners (marketplace = rounded top, compose = rounded
   bottom) so they read as one connected pill control instead of
   two orphan circles.  Touching with 1px gap creates a clean
   divider line between them. */
.fab-create {
  position: fixed;
  right: 20px;
  /* P65.251 — pair shifted down ~60px so the cluster sits in the
     lower-middle band of the viewport (closer to where the eye
     usually rests) instead of the strict center.
     Stack = 46+1+46 = 93px.  Original center = 50%-47px / 50%+1px;
     shifted = +60px on both. */
  top: calc(50% + 61px);
  width: 46px;
  height: 46px;
  border-radius: 0 0 12px 12px;       /* shared bottom corners */
  background: linear-gradient(180deg, var(--accent) 0%, #00b067 100%);
  color: #001a0f;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow:
    0 6px 16px rgba(0, 196, 114, 0.30),
    0 1px 0 rgba(0, 0, 0, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.18);
  cursor: pointer;
  z-index: 500;
  transition: transform .14s ease,
              box-shadow .14s ease,
              filter .14s ease;
  border: none;
}
.fab-create:hover {
  /* Group hover lift — translateX so the whole pill "bumps out"
     to the left, hinting at its presence. */
  transform: translateX(-2px);
  filter: brightness(1.08);
  box-shadow:
    0 8px 22px rgba(0, 196, 114, 0.45),
    0 1px 0 rgba(0, 0, 0, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.22);
}
.fab-create:active { transform: translateX(0) scale(.97); }
.fab-create svg { width: 22px; height: 22px; }

@media (min-width: 768px) {
  /* Desktop: same right edge as marketplace so they align. */
  .fab-create { right: 28px; }
}

/* ═══════════════════════════════════════════════════════════════════
   P65.152 — Post-edit settings hub (modal rows + toggles)
   ─────────────────────────────────────────────────────────────────
   Each row = icon + title/sub stacked + right-side control. Control
   is either a `.post-edit-toggle` (boolean) or an arrow glyph (opens
   a sub-modal). Hover lifts the row's bg slightly.
   ═══════════════════════════════════════════════════════════════════ */
.post-edit-rows {
  display: flex;
  flex-direction: column;
  padding: 4px 8px;
}
.post-edit-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 14px;
  padding: 12px 14px;
  border-radius: 10px;
  cursor: pointer;
  transition: background .14s ease;
}
.post-edit-row:hover { background: rgba(255,255,255,0.03); }
.post-edit-row.is-disabled { cursor: default; opacity: 0.6; }
.post-edit-row.is-disabled:hover { background: transparent; }

.post-edit-row-icon {
  width: 32px; height: 32px;
  display: inline-flex;
  align-items: center; justify-content: center;
  border-radius: 8px;
  background: rgba(0,196,114,0.10);
  color: var(--accent);
  flex-shrink: 0;
}
.post-edit-row-text { min-width: 0; }
.post-edit-row-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-0);
  letter-spacing: -.005em;
}
.post-edit-row-sub {
  font-size: 11px;
  color: var(--text-3);
  line-height: 1.45;
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 320px;
}
.post-edit-row-control {
  display: flex; align-items: center; flex-shrink: 0;
}
.post-edit-row-arrow {
  color: var(--text-4);
  transition: color .12s ease, transform .12s ease;
}
.post-edit-row:hover .post-edit-row-arrow {
  color: var(--text-2);
  transform: translateX(2px);
}

/* Toggle switch — same proportions as Settings page toggles. */
.post-edit-toggle {
  appearance: none;
  width: 38px; height: 22px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 999px;
  position: relative;
  cursor: pointer;
  padding: 0;
  transition: background .15s ease, border-color .15s ease;
}
.post-edit-toggle-knob {
  position: absolute;
  top: 2px; left: 2px;
  width: 16px; height: 16px;
  background: #d4d4d4;
  border-radius: 50%;
  transition: transform .18s cubic-bezier(.22,1,.36,1), background .15s ease;
}
.post-edit-toggle.is-on {
  background: rgba(0,196,114,0.40);
  border-color: rgba(0,196,114,0.55);
}
.post-edit-toggle.is-on .post-edit-toggle-knob {
  transform: translateX(16px);
  background: var(--accent);
}
.post-edit-toggle:hover { border-color: rgba(0,196,114,0.45); }

/* Audience sub-picker — full-width radio-like buttons */
.post-edit-aud-list {
  display: flex; flex-direction: column;
  gap: 8px;
}
.post-edit-aud-opt {
  appearance: none;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 14px;
  padding: 12px 14px;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: 10px;
  cursor: pointer;
  text-align: left;
  font: inherit;
  transition: border-color .14s ease, background .14s ease;
}
.post-edit-aud-opt:hover { border-color: rgba(0,196,114,0.30); }
.post-edit-aud-opt.is-active {
  border-color: rgba(0,196,114,0.45);
  background: rgba(0,196,114,0.06);
}
.post-edit-aud-opt-icon {
  width: 30px; height: 30px;
  display: inline-flex;
  align-items: center; justify-content: center;
  border-radius: 8px;
  background: rgba(0,196,114,0.10);
  color: var(--accent);
}
.post-edit-aud-opt-text { min-width: 0; }
.post-edit-aud-opt-title {
  font-size: 13px; font-weight: 700; color: var(--text-0);
  letter-spacing: -.005em;
}
.post-edit-aud-opt-sub {
  font-size: 11px; color: var(--text-3); margin-top: 2px;
  line-height: 1.4;
}

/* Modal-header back button (used by Edit-text + Audience sub-modals) */
.modal-back {
  appearance: none;
  border: 1px solid rgba(255,255,255,0.08);
  background: transparent;
  color: var(--text-3);
  width: 28px; height: 28px;
  border-radius: 7px;
  cursor: pointer;
  display: inline-flex;
  align-items: center; justify-content: center;
  margin-right: 10px;
  transition: background .12s ease, color .12s ease;
}
.modal-back:hover { background: rgba(255,255,255,0.06); color: var(--text-0); }

/* ═══════════════════════════════════════════════════════════════════
   P65.249 — Market FAB redesign (institutional / refined).
   ─────────────────────────────────────────────────────────────────
   Old design was a 56px green-glowing circle that competed with the
   primary compose FAB for attention.  New design reads as an
   institutional terminal control: smaller (46px), squared (12px
   radius), dark glass, neutral icon at rest, accent-green only on
   hover.  Position dropped from bottom:160 → bottom:96 on desktop
   so it sits a tight 12px above the compose FAB (was a 76px gap
   that visually orphaned it).  Mobile geometry preserved.
   ═══════════════════════════════════════════════════════════════════ */
.fab-market {
  position: fixed;
  right: 20px;
  /* P65.250 / P65.251 — sits 1px ABOVE the compose FAB to form a
     connected pill.  Marketplace is the upper half (rounded top
     corners); compose is the lower half (rounded bottom corners).
     Pair shifted +60px from strict center (P65.251). */
  top: calc(50% + 13px);              /* compose-top (61) - 47 + 0 */
  width: 46px;
  height: 46px;
  border-radius: 12px 12px 0 0;       /* shared top corners */
  background:
    linear-gradient(180deg,
      rgba(22, 26, 30, 0.96) 0%,
      rgba(14, 16, 20, 0.96) 100%);
  color: var(--text-2);               /* neutral at rest; greens on hover */
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow:
    0 6px 16px rgba(0, 0, 0, 0.55),
    0 -1px 0 rgba(0, 0, 0, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(14px) saturate(1.2);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  cursor: pointer;
  z-index: 500;
  transition: transform .14s ease,
              color .14s ease,
              border-color .14s ease,
              box-shadow .14s ease;
}
.fab-market:hover {
  /* Match the compose FAB's hover translate — both buttons "bump
     out" to the left in unison so the pair reads as one selector. */
  transform: translateX(-2px);
  color: var(--accent);
  border-color: rgba(0, 196, 114, 0.42);
  box-shadow:
    0 10px 22px rgba(0, 0, 0, 0.6),
    0 0 0 3px rgba(0, 196, 114, 0.07),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
.fab-market:active { transform: translateX(0) scale(.97); }
/* P65.250 follow-up — icon size matches .fab-create (22px) so the
   marketplace and compose buttons read as visually equal weight
   inside the connected pill.  Stroke width also bumped on the
   marketplace SVG (inline) so its line weight matches the bolder
   + icon. */
.fab-market svg {
  width: 22px;
  height: 22px;
  stroke-width: 2.4;
  transition: transform .14s ease;
}
.fab-market:hover svg { transform: scale(1.06); }

/* Cart-count pill — when an inventory load reveals owned items, a
   small accent dot can light up. Reserved class for future use. */
.fab-market-dot {
  position: absolute;
  top: 5px; right: 5px;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 6px rgba(0, 196, 114, 0.7);
}

@media (min-width: 768px) {
  /* Desktop: same right edge as compose so the pill aligns. */
  .fab-market { right: 28px; }
}

/* ═══════════════════════════════════════════════════════════════════
   P65.150 v2 — Premium Marketplace
   ─────────────────────────────────────────────────────────────────
   Side-drawer with a featured hero card, tone-coded item cards
   (each tone — accent / gold / aurora / sunset / cyber / prism /
   void / forest — drives art gradient + glow color via CSS vars),
   refined typography (mono for prices, large display for names),
   subtle motion (hover lift + shine sweep on art panels), and
   rarity ribbons (RARE / EPIC / LEGENDARY).
   ═══════════════════════════════════════════════════════════════════ */

/* ── Backdrop ────────────────────────────────────────────────────── */
.market-backdrop {
  position: fixed; inset: 0;
  background: rgba(0,0,0,.55);
  z-index: 590;
  opacity: 0;
  pointer-events: none;
  transition: opacity .28s ease;
  backdrop-filter: blur(4px) saturate(120%);
  -webkit-backdrop-filter: blur(4px) saturate(120%);
}
.market-backdrop.open { opacity: 1; pointer-events: auto; }

/* ── Panel shell ────────────────────────────────────────────────── */
.market-panel {
  position: fixed;
  top: 0; right: 0;
  width: 540px; max-width: calc(100vw - 24px);
  height: 100vh;
  background:
    radial-gradient(120% 80% at 100% 0%, rgba(0,196,114,0.06), transparent 55%),
    radial-gradient(80% 60% at 0% 100%, rgba(125,95,255,0.05), transparent 55%),
    var(--bg-1);
  border-left: 1px solid rgba(0,196,114,.18);
  z-index: 600;
  transform: translateX(110%);
  transition: transform .42s cubic-bezier(.22,1,.36,1);
  display: flex; flex-direction: column;
  box-shadow:
    -16px 0 60px rgba(0,0,0,.65),
    -1px 0 0 rgba(0,196,114,.08),
    inset 1px 0 0 rgba(255,255,255,.02);
  overflow: hidden;
}
.market-panel.open { transform: translateX(0); }

/* Top noise/grain overlay — adds material depth */
.market-panel::before {
  content: '';
  position: absolute; inset: 0;
  pointer-events: none;
  opacity: .35;
  background-image:
    radial-gradient(1px 1px at 25% 20%, rgba(255,255,255,0.04), transparent 50%),
    radial-gradient(1px 1px at 70% 60%, rgba(255,255,255,0.03), transparent 50%),
    radial-gradient(1px 1px at 40% 85%, rgba(255,255,255,0.04), transparent 50%);
}

/* ── Header ─────────────────────────────────────────────────────── */
.market-header {
  position: relative;
  padding: 22px 22px 18px;
  border-bottom: 1px solid rgba(255,255,255,.05);
  display: flex; align-items: center; justify-content: space-between;
  background: linear-gradient(180deg, rgba(0,196,114,.05) 0%, transparent 100%);
  flex-shrink: 0;
}
.market-header-left {
  display: flex; flex-direction: column; gap: 6px;
  min-width: 0;
}
.market-header-eyebrow {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 10px; font-weight: 800; letter-spacing: .18em;
  text-transform: uppercase; color: var(--accent);
}
.market-header-eyebrow-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 12px rgba(0,196,114,.8);
  animation: market-pulse 2.4s ease-in-out infinite;
}
@keyframes market-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: .55; transform: scale(.85); }
}
.market-header-title {
  font-size: 22px;
  font-weight: 900;
  color: var(--text-0);
  letter-spacing: -.025em;
  line-height: 1;
}
.market-header-title-accent {
  background: linear-gradient(135deg, #00c472 0%, #5eead4 50%, #00c472 100%);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: market-grad-shift 6s linear infinite;
}
@keyframes market-grad-shift {
  to { background-position: 200% 0; }
}
.market-header-right {
  display: flex; align-items: center; gap: 10px;
}

/* P65.177 — Balance pill with gold star + top-up plus button */
.market-header-balance {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 5px 5px 11px;
  background:
    linear-gradient(180deg, rgba(247,217,121,.12), rgba(247,217,121,.04)),
    rgba(0,0,0,.30);
  border: 1px solid rgba(247,217,121,.35);
  border-radius: 999px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.06),
    0 4px 14px rgba(247,217,121,.10);
}
.market-header-balance-star {
  width: 14px; height: 14px;
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.market-header-balance-star svg { width: 14px; height: 14px; display: block; }
.market-header-balance-num {
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 800;
  color: var(--text-0);
  font-variant-numeric: tabular-nums;
  letter-spacing: -.01em;
}
.market-header-balance-unit {
  font-size: 10px; font-weight: 800;
  color: #f7d979;
  letter-spacing: .08em;
}
/* "+" top-up button — circular accent-green sibling that mirrors
   the .profile-token-topup style on the profile Tokens stat. */
.market-header-balance-topup {
  appearance: none;
  border: none;
  margin-left: 2px;
  width: 22px; height: 22px;
  display: inline-flex;
  align-items: center; justify-content: center;
  background: var(--accent);
  color: #0a0e0c;
  border-radius: 50%;
  cursor: pointer;
  flex-shrink: 0;
  box-shadow:
    0 2px 8px rgba(0,196,114,.45),
    inset 0 1px 0 rgba(255,255,255,.20);
  transition: transform .14s ease, box-shadow .14s ease, background .14s ease;
}
.market-header-balance-topup:hover {
  transform: scale(1.08);
  background: #11d27a;
  box-shadow:
    0 4px 14px rgba(0,196,114,.55),
    inset 0 1px 0 rgba(255,255,255,.28);
}
.market-header-balance-topup:active { transform: scale(.95); }
.market-header-balance-topup svg { width: 11px; height: 11px; }

.market-close {
  appearance: none;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(0,0,0,.20);
  color: var(--text-3);
  width: 34px; height: 34px;
  border-radius: 10px;
  cursor: pointer;
  display: inline-flex;
  align-items: center; justify-content: center;
  transition: background .14s ease, color .14s ease, transform .14s ease;
}
.market-close:hover {
  background: rgba(255,255,255,.06);
  color: var(--text-0);
  transform: rotate(90deg);
}
.market-close svg { width: 14px; height: 14px; }

/* ── Tabs ───────────────────────────────────────────────────────── */
.market-tabs {
  display: flex; gap: 2px;
  padding: 8px 18px 0;
  border-bottom: 1px solid rgba(255,255,255,.05);
  flex-shrink: 0;
  position: relative;
}
.market-tab {
  appearance: none;
  border: none;
  background: transparent;
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .03em;
  color: var(--text-4);
  padding: 11px 14px;
  cursor: pointer;
  position: relative;
  transition: color .15s ease;
}
.market-tab:hover { color: var(--text-2); }
.market-tab-count {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 18px; height: 18px;
  padding: 0 5px;
  font-size: 9.5px; font-weight: 800;
  font-family: var(--mono);
  color: var(--text-4);
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 999px;
  font-variant-numeric: tabular-nums;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.market-tab.is-active { color: var(--text-0); }
.market-tab.is-active .market-tab-count {
  color: var(--accent);
  background: rgba(0,196,114,.12);
  border-color: rgba(0,196,114,.32);
}
.market-tab.is-active::after {
  content: '';
  position: absolute;
  left: 12px; right: 12px; bottom: -1px;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  border-radius: 2px;
  box-shadow: 0 0 8px rgba(0,196,114,.6);
}

/* ── Body ───────────────────────────────────────────────────────── */
.market-body {
  flex: 1;
  overflow-y: auto;
  padding: 18px 18px 36px;
  scrollbar-width: thin;
  scrollbar-color: rgba(0,196,114,.15) transparent;
}
.market-body::-webkit-scrollbar { width: 5px; }
.market-body::-webkit-scrollbar-track { background: transparent; }
.market-body::-webkit-scrollbar-thumb { background: rgba(0,196,114,.18); border-radius: 4px; }
.market-body::-webkit-scrollbar-thumb:hover { background: rgba(0,196,114,.32); }

/* ── Featured Hero card (top of "All" tab) ────────────────────── */
.market-hero {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 130px;
  gap: 18px;
  padding: 22px;
  margin-bottom: 26px;
  border-radius: 18px;
  overflow: hidden;
  isolation: isolate;
  /* P65.175 — toned-down tone wash:  background gradient at lower
     alpha, thinner border, smaller halo shadow.  The original
     values made the gold Pro hero read like a sun-flare blob.
     P65.238 — further reduced (border 18%→7%, shadow 55%→14%,
     blur radius 28px→16px).  The card now reads as a refined
     premium tile rather than a glowing beacon. */
  background:
    linear-gradient(135deg,
      color-mix(in srgb, var(--tone-from) 10%, transparent) 0%,
      color-mix(in srgb, var(--tone-to)    6%, transparent) 100%),
    var(--bg-2);
  border: 1px solid color-mix(in srgb, var(--tone-from) 7%, transparent);
  box-shadow:
    0 6px 16px color-mix(in srgb, var(--tone-glow) 14%, transparent),
    inset 0 1px 0 rgba(255,255,255,.04);
  transition: transform .25s cubic-bezier(.22,1,.36,1), box-shadow .25s ease;
}
.market-hero:hover {
  transform: translateY(-2px);
  /* P65.238 — hover boost trimmed in lockstep with the base styles
     (border 28%→12%, shadow 70%→22%) so the hover state stays
     proportional to the calmer resting state. */
  border-color: color-mix(in srgb, var(--tone-from) 12%, transparent);
  box-shadow:
    0 8px 22px color-mix(in srgb, var(--tone-glow) 22%, transparent),
    inset 0 1px 0 rgba(255,255,255,.05);
}
.market-hero-bg {
  position: absolute; inset: -2px;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
}
.market-hero-shine {
  position: absolute;
  top: -50%; left: -10%;
  width: 50%; height: 200%;
  background: linear-gradient(115deg, transparent 35%, rgba(255,255,255,.08) 50%, transparent 65%);
  transform: translateX(-200%) rotate(8deg);
  animation: market-hero-shine 6s ease-in-out infinite;
  animation-delay: 1s;
}
@keyframes market-hero-shine {
  0%, 60%, 100% { transform: translateX(-200%) rotate(8deg); opacity: 0; }
  20%           { opacity: 1; }
  40%           { transform: translateX(420%) rotate(8deg); opacity: 0; }
}
.market-hero-orb {
  position: absolute;
  top: -40%; right: -10%;
  width: 280px; height: 280px;
  background: radial-gradient(circle, var(--tone-from) 0%, transparent 60%);
  /* P65.175 — orb opacity dropped from .35 → .20 to reduce the
     gold halo bleeding past the card edges.
     P65.238 — further dropped to .10 — the orb now reads as a
     subtle warm tint behind the crown icon rather than a glow. */
  opacity: .10;
  filter: blur(40px);
}

.market-hero-body {
  display: flex; flex-direction: column;
  gap: 10px;
  min-width: 0;
  position: relative;
  z-index: 1;
}
.market-hero-badges {
  display: flex; gap: 6px; flex-wrap: wrap;
}
.market-hero-badge {
  font-size: 9.5px;
  font-weight: 900;
  letter-spacing: .14em;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(0,0,0,.30);
  border: 1px solid rgba(255,255,255,.10);
  color: var(--text-2);
}
.market-hero-badge-feat {
  background: linear-gradient(135deg, var(--tone-from), var(--tone-to));
  color: var(--tone-txt);
  border-color: transparent;
  box-shadow: 0 4px 12px var(--tone-glow);
}
.market-hero-title {
  font-size: 26px;
  font-weight: 900;
  color: var(--text-0);
  letter-spacing: -.025em;
  line-height: 1.05;
}
.market-hero-title-sub {
  font-weight: 600;
  color: var(--text-3);
  font-size: 16px;
  letter-spacing: -.005em;
}
.market-hero-desc {
  font-size: 12.5px;
  color: var(--text-2);
  line-height: 1.55;
  max-width: 320px;
}
.market-hero-foot {
  display: flex; align-items: center; gap: 14px;
  margin-top: 6px;
}
.market-hero-price-block {
  display: flex; align-items: baseline; gap: 5px;
}
.market-hero-price-num {
  font-family: var(--mono);
  font-size: 24px;
  font-weight: 900;
  color: var(--text-0);
  letter-spacing: -.025em;
  font-variant-numeric: tabular-nums;
}
.market-hero-price-unit {
  font-size: 11px;
  font-weight: 800;
  color: var(--accent);
  letter-spacing: .08em;
}
.market-hero-buy {
  appearance: none;
  border: none;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 18px;
  background: linear-gradient(135deg, var(--tone-from), var(--tone-to));
  color: var(--tone-txt);
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: .03em;
  border-radius: 10px;
  cursor: pointer;
  box-shadow: 0 6px 20px var(--tone-glow), inset 0 1px 0 rgba(255,255,255,.18);
  transition: transform .14s ease, box-shadow .14s ease;
}
.market-hero-buy:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 26px var(--tone-glow), inset 0 1px 0 rgba(255,255,255,.24);
}
.market-hero-buy:active { transform: translateY(0); }
.market-hero-buy:disabled {
  cursor: not-allowed;
  opacity: .55;
  transform: none;
  box-shadow: none;
}

.market-hero-art {
  position: relative;
  width: 130px; height: 130px;
  align-self: center;
  display: flex; align-items: center; justify-content: center;
}
.market-hero-art-icon {
  position: relative;
  z-index: 4;
  width: 56px; height: 56px;
  display: flex; align-items: center; justify-content: center;
  color: var(--text-0);
  filter: drop-shadow(0 4px 18px var(--tone-glow));
}
.market-hero-art-icon svg { width: 100%; height: 100%; }
.market-hero-art-ring {
  position: absolute; inset: 0;
  border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--tone-from) 50%, transparent);
  animation: market-hero-ring 6s ease-in-out infinite;
}
.market-hero-art-ring-1 { inset: 0;  animation-delay: 0s;   }
.market-hero-art-ring-2 { inset: 14px; animation-delay: 1.5s; }
.market-hero-art-ring-3 { inset: 28px; animation-delay: 3s;   }
@keyframes market-hero-ring {
  0%, 100% { transform: scale(1);   opacity: .35; }
  50%      { transform: scale(1.06); opacity: .8;  }
}

/* ── Section headers ────────────────────────────────────────────── */
.market-section { margin-bottom: 26px; }
.market-section:last-child { margin-bottom: 0; }
.market-section-head {
  display: flex; align-items: center; gap: 10px;
  margin: 0 4px 12px;
}
.market-section-title {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-1);
}
.market-section-count {
  display: inline-flex;
  font-size: 10px;
  font-family: var(--mono);
  font-weight: 800;
  color: var(--text-4);
  font-variant-numeric: tabular-nums;
}
.market-section-rule {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, rgba(255,255,255,.06), transparent);
}

/* ── Item grid ──────────────────────────────────────────────────── */
.market-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
@media (max-width: 600px) {
  .market-grid { grid-template-columns: 1fr; }
}

/* ── Item card ──────────────────────────────────────────────────── */
.market-card {
  position: relative;
  display: flex; flex-direction: column;
  background:
    linear-gradient(180deg, rgba(255,255,255,.025) 0%, transparent 30%),
    var(--bg-2);
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 16px;
  overflow: hidden;
  isolation: isolate;
  transition:
    transform .22s cubic-bezier(.22,1,.36,1),
    border-color .22s ease,
    box-shadow .22s ease;
}
.market-card:hover {
  transform: translateY(-3px);
  border-color: color-mix(in srgb, var(--tone-from) 45%, transparent);
  box-shadow:
    0 14px 36px rgba(0,0,0,.45),
    0 0 0 1px color-mix(in srgb, var(--tone-from) 18%, transparent),
    0 0 24px var(--tone-glow);
}

/* Art panel */
.market-card-art {
  position: relative;
  height: 110px;
  overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  border-bottom: 1px solid rgba(0,0,0,.30);
}
.market-card-art::before {
  /* darken bottom for icon legibility on bright gradients */
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(circle at 50% 40%, transparent 30%, rgba(0,0,0,.25) 100%),
    linear-gradient(180deg, transparent 60%, rgba(0,0,0,.15) 100%);
  pointer-events: none;
}
.market-card-art-shine {
  position: absolute;
  top: 0; left: -60%;
  width: 50%; height: 100%;
  background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,.20) 50%, transparent 70%);
  transform: translateX(-50%) skewX(-12deg);
  transition: transform .8s cubic-bezier(.22,1,.36,1);
  pointer-events: none;
  z-index: 2;
}
.market-card:hover .market-card-art-shine { transform: translateX(360%) skewX(-12deg); }

.market-card-art-icon {
  position: relative;
  z-index: 1;
  width: 52px; height: 52px;
  display: flex; align-items: center; justify-content: center;
  color: #fff;
  filter: drop-shadow(0 4px 14px rgba(0,0,0,.45));
}
.market-card-art-icon svg { width: 100%; height: 100%; }

/* Tone-specific icon color tweaks (keep gold readable on warm gradients) */
.market-card-gold .market-card-art-icon { color: #1a1304; }

/* Rarity ribbon — top-left chip */
.market-card-ribbon {
  position: absolute;
  top: 10px; left: 10px;
  z-index: 3;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .14em;
  padding: 3px 8px;
  border-radius: 4px;
  background: rgba(0,0,0,.55);
  color: #fff;
  border: 1px solid rgba(255,255,255,.10);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.market-card-ribbon-rare      { color: #5eead4;   border-color: rgba(94,234,212,.35); }
.market-card-ribbon-epic      { color: #c4b5fd;   border-color: rgba(196,181,253,.40); }
.market-card-ribbon-legendary {
  background: linear-gradient(135deg, #fff3ad, #d4a72c);
  color: #1a1304;
  border-color: rgba(247,217,121,.55);
  box-shadow: 0 2px 8px rgba(247,217,121,.30);
}

/* Owned indicator — small chip top-right */
.market-card-owned-dot {
  position: absolute;
  top: 10px; right: 10px;
  z-index: 3;
  font-size: 10px;
  font-weight: 800;
  font-family: var(--mono);
  min-width: 22px; height: 22px;
  padding: 0 7px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 999px;
  background: rgba(0,196,114,.95);
  color: #0a0e0c;
  box-shadow: 0 2px 8px rgba(0,196,114,.55);
}

/* Body */
.market-card-body {
  display: flex; flex-direction: column;
  flex: 1;
  padding: 14px 14px 14px;
}
.market-card-head {
  display: flex; align-items: baseline; gap: 6px;
  margin-bottom: 6px;
  flex-wrap: wrap;
}
.market-card-name {
  font-size: 14.5px;
  font-weight: 800;
  color: var(--text-0);
  letter-spacing: -.015em;
  line-height: 1.15;
  margin: 0;
}
.market-card-tagline {
  font-size: 10.5px;
  font-weight: 600;
  color: var(--text-4);
  letter-spacing: .02em;
}
.market-card-desc {
  font-size: 11.5px;
  color: var(--text-3);
  line-height: 1.5;
  margin: 0 0 14px;
  flex: 1;
}

.market-card-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding-top: 10px;
  border-top: 1px solid rgba(255,255,255,.04);
}
.market-card-price-block {
  display: flex; align-items: baseline; gap: 4px;
}
.market-card-price-num {
  font-family: var(--mono);
  font-size: 17px;
  font-weight: 800;
  color: var(--text-0);
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.market-card-price-unit {
  font-size: 9.5px;
  font-weight: 800;
  color: var(--accent);
  letter-spacing: .10em;
}

.market-card-buy {
  appearance: none;
  border: none;
  display: inline-flex; align-items: center; gap: 5px;
  background: linear-gradient(135deg, var(--tone-from), var(--tone-to));
  color: var(--tone-txt);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  padding: 7px 12px;
  border-radius: 8px;
  cursor: pointer;
  box-shadow:
    0 4px 14px var(--tone-glow),
    inset 0 1px 0 rgba(255,255,255,.18);
  transition: transform .12s ease, box-shadow .12s ease, opacity .12s ease;
}
.market-card-buy:hover {
  transform: translateY(-1px);
  box-shadow:
    0 8px 22px var(--tone-glow),
    inset 0 1px 0 rgba(255,255,255,.26);
}
.market-card-buy:active { transform: translateY(0); }
.market-card-buy:disabled {
  background: rgba(255,255,255,.06);
  color: var(--text-4);
  cursor: not-allowed;
  box-shadow: none;
  text-shadow: none;
}
.market-card-buy svg { flex-shrink: 0; }

/* Owned variant — show check, dim slightly */
.market-card.is-owned .market-card-buy {
  background: rgba(0,196,114,.08);
  color: var(--accent);
  border: 1px solid rgba(0,196,114,.30);
  box-shadow: none;
}

/* ─── P65.153 — Scarcity bar + sold-out treatment ──────────────── */
.market-card-stock {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin: 0 0 12px;
  padding: 8px 10px;
  background: rgba(255,255,255,.025);
  border: 1px solid rgba(255,255,255,.04);
  border-radius: 8px;
}
.market-card-stock-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}
.market-card-stock-num {
  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--text-2);
  font-variant-numeric: tabular-nums;
  letter-spacing: -.01em;
}
.market-card-stock-num strong {
  color: var(--text-0);
  font-weight: 800;
  font-size: 12.5px;
}
.market-card-stock-sep {
  margin: 0 3px;
  color: var(--text-4);
  opacity: .7;
}
.market-card-stock-cap {
  color: var(--text-3);
  font-weight: 600;
}
.market-card-stock-lbl {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-4);
}
.market-card-stock-bar {
  position: relative;
  height: 4px;
  border-radius: 999px;
  background: rgba(255,255,255,.05);
  overflow: hidden;
}
.market-card-stock-bar-fill {
  position: absolute; inset: 0;
  width: 0%;
  background: linear-gradient(90deg, var(--tone-from), var(--tone-to));
  border-radius: inherit;
  transition: width .6s cubic-bezier(.22,1,.36,1);
  box-shadow: 0 0 8px var(--tone-glow);
}
/* When >80% minted, glow the bar amber for urgency. */
.market-card-stock.is-low .market-card-stock-bar-fill {
  background: linear-gradient(90deg, #fbbf24, #f97316);
  box-shadow: 0 0 8px rgba(251,191,36,.55);
}
.market-card-stock.is-low .market-card-stock-num strong {
  color: #fbbf24;
}
/* Sold out — red bar, no glow. */
.market-card-stock.is-soldout .market-card-stock-bar-fill {
  background: linear-gradient(90deg, #ef4444, #b91c1c);
  box-shadow: none;
}
.market-card-stock.is-soldout .market-card-stock-num strong { color: #ef4444; }
.market-card-stock.is-soldout .market-card-stock-lbl {
  color: #ef4444;
}

/* Sold-out RIBBON — replaces rarity ribbon when stock is empty. */
.market-card-ribbon-soldout {
  background: linear-gradient(135deg, #ef4444, #991b1b);
  color: #fff;
  border-color: rgba(239,68,68,.55);
  box-shadow: 0 2px 10px rgba(239,68,68,.40);
  letter-spacing: .16em;
}

/* Whole card dims slightly when sold out + the art panel desaturates. */
.market-card.is-soldout .market-card-art {
  filter: grayscale(.55) brightness(.7);
}
.market-card.is-soldout:hover {
  transform: none;
  box-shadow: 0 14px 36px rgba(0,0,0,.45);
  border-color: rgba(255,255,255,.06);
}
.market-card.is-soldout .market-card-buy {
  background: rgba(239,68,68,.10);
  color: #ef4444;
  border: 1px solid rgba(239,68,68,.30);
  box-shadow: none;
}

/* ─── P65.154 — Coming-soon teaser cards (blurred, locked) ──────── */
.market-card.is-coming-soon .market-card-art {
  /* The gradient stays beneath, but blurred + dimmed.  An inner
     pseudo darkens the bottom so the lock icon overlay reads
     cleanly against bright cosmetics like the Diamond banner. */
  filter: blur(10px) saturate(.7) brightness(.55);
  transform: scale(1.08);  /* hide blur edge bleed at the corners */
}
.market-card.is-coming-soon .market-card-art-icon,
.market-card.is-coming-soon .market-card-art-shine {
  display: none;
}
.market-card-lock {
  position: absolute;
  inset: 0;
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
.market-card-lock svg {
  width: 38px; height: 38px;
  color: rgba(255,255,255,.85);
  filter: drop-shadow(0 4px 14px rgba(0,0,0,.55));
}
.market-card-lock::after {
  /* faint frosted disc behind the lock — keeps it readable on any
     gradient color.  Sits behind the icon via z-index trick. */
  content: '';
  position: absolute;
  width: 64px; height: 64px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0,0,0,.35) 0%, transparent 70%);
  z-index: -1;
}

/* Coming-soon RIBBON — pulses slightly to draw the eye. */
.market-card-ribbon-coming {
  background: linear-gradient(135deg, rgba(0,0,0,.65), rgba(0,0,0,.45));
  color: #fff;
  border-color: rgba(255,255,255,.18);
  letter-spacing: .14em;
  animation: market-coming-pulse 2.6s ease-in-out infinite;
}
@keyframes market-coming-pulse {
  0%, 100% { opacity: .9;  box-shadow: 0 2px 8px rgba(0,0,0,.30); }
  50%      { opacity: 1;   box-shadow: 0 2px 14px rgba(255,255,255,.18); }
}

/* "Limited to N on launch" teaser line — sits where the stock bar
   would normally live. Italic, muted, leading dot. */
.market-card-teaser-cap {
  font-size: 11px;
  color: var(--text-3);
  font-style: italic;
  margin: 0 0 12px;
  padding: 6px 10px;
  background: rgba(255,255,255,.025);
  border: 1px dashed rgba(255,255,255,.10);
  border-radius: 8px;
  text-align: center;
  letter-spacing: .02em;
}
.market-card-teaser-cap strong {
  font-style: normal;
  font-family: var(--mono);
  color: var(--text-1);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

/* Coming-soon: dim the body text, dim the price, give the buy button
   a muted neutral look (NOT the tone color — these aren't live yet). */
.market-card.is-coming-soon .market-card-name,
.market-card.is-coming-soon .market-card-desc {
  opacity: .85;
}
.market-card.is-coming-soon .market-card-price-num {
  color: var(--text-3);
}
.market-card.is-coming-soon .market-card-price-unit {
  color: var(--text-4);
}
.market-card.is-coming-soon .market-card-buy {
  background: rgba(255,255,255,.06);
  color: var(--text-3);
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: none;
  cursor: not-allowed;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: 10.5px;
}
.market-card.is-coming-soon:hover {
  /* still subtle lift but no tone-glow shadow */
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(0,0,0,.45);
  border-color: rgba(255,255,255,.10);
}

/* ─── P65.237 — Pro-only locked cards (Posts + Profile categories) ─
   Visually similar to coming-soon (lock overlay + dimmed art) but
   with a gold accent so the user reads "this exists, upgrade to
   unlock" rather than "wait for launch".  Click routes to the Pro
   tab in the same marketplace panel. */
.market-card.is-pro-locked .market-card-art {
  filter: blur(8px) saturate(.8) brightness(.6);
  transform: scale(1.08);
}
.market-card.is-pro-locked .market-card-art-icon,
.market-card.is-pro-locked .market-card-art-shine {
  display: none;
}
.market-card.is-pro-locked .market-card-lock svg {
  /* Gold lock instead of white — reinforces the Pro framing. */
  color: rgba(247, 217, 121, .92);
  filter: drop-shadow(0 4px 14px rgba(0,0,0,.55))
          drop-shadow(0 0 8px rgba(247, 217, 121, .35));
}
.market-card-ribbon-pro {
  background: linear-gradient(135deg, rgba(247, 217, 121, .92), rgba(191, 162, 78, .85));
  color: #1a1308;
  border-color: rgba(247, 217, 121, .6);
  letter-spacing: .14em;
  font-weight: 800;
  text-shadow: 0 1px 0 rgba(255,255,255,.18);
  box-shadow: 0 2px 8px rgba(247, 217, 121, .25);
}
/* Pro-locked cards keep their headline + description readable so the
   user can see what they'd be unlocking — only the buy CTA changes. */
.market-card.is-pro-locked .market-card-name,
.market-card.is-pro-locked .market-card-desc {
  opacity: .95;
}
.market-card.is-pro-locked .market-card-buy.market-card-buy-pro-locked {
  background: linear-gradient(135deg,
    rgba(247, 217, 121, .18) 0%,
    rgba(191, 162, 78, .14) 100%);
  color: rgba(247, 217, 121, .98);
  border: 1px solid rgba(247, 217, 121, .42);
  box-shadow: 0 4px 14px rgba(247, 217, 121, .12);
  cursor: pointer;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: 10.5px;
  font-weight: 800;
}
.market-card.is-pro-locked .market-card-buy.market-card-buy-pro-locked:hover:not(:disabled) {
  background: linear-gradient(135deg,
    rgba(247, 217, 121, .28) 0%,
    rgba(191, 162, 78, .22) 100%);
  border-color: rgba(247, 217, 121, .65);
  box-shadow: 0 6px 18px rgba(247, 217, 121, .22);
  transform: translateY(-1px);
}
.market-card.is-pro-locked .market-card-buy.market-card-buy-pro-locked svg {
  filter: drop-shadow(0 0 4px rgba(247, 217, 121, .5));
}
.market-card.is-pro-locked:hover {
  /* gold-tinted lift, distinct from coming-soon's neutral hover */
  transform: translateY(-2px);
  box-shadow: 0 12px 32px rgba(247, 217, 121, .12),
              0 6px 18px rgba(0, 0, 0, .42);
  border-color: rgba(247, 217, 121, .28);
}

/* ═══════════════════════════════════════════════════════════════════
   P65.174 — Confirm-purchase modal (replaces native confirm())
   ─────────────────────────────────────────────────────────────────
   Card-style modal that mirrors the marketplace card's tone palette
   via CSS vars (--tone-from / --tone-to / --tone-glow / --tone-txt
   set inline by the renderer).  Layout: art panel on top → name →
   description → price/balance/after rows → Cancel + Acquire buttons.
   ═══════════════════════════════════════════════════════════════════ */
.modal.modal-confirmBuy {
  width: min(420px, calc(100vw - 32px));
  padding: 0;
  background: transparent;
  box-shadow: none;
  border: none;
}
.confirm-buy-modal {
  position: relative;
  border-radius: 18px;
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(255,255,255,.025) 0%, transparent 30%),
    var(--bg-2);
  border: 1px solid rgba(255,255,255,.08);
  box-shadow:
    0 24px 60px rgba(0,0,0,.55),
    0 0 0 1px var(--tone-from, rgba(0,196,114,.18));
  isolation: isolate;
  animation: confirm-buy-pop-in .26s cubic-bezier(.22,1,.36,1);
}
@keyframes confirm-buy-pop-in {
  from { opacity: 0; transform: scale(.94) translateY(8px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}
.confirm-buy-close {
  position: absolute;
  top: 12px; right: 12px;
  z-index: 5;
  width: 30px; height: 30px;
  display: inline-flex;
  align-items: center; justify-content: center;
  background: rgba(0,0,0,.45);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 50%;
  color: rgba(255,255,255,.85);
  cursor: pointer;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: background .12s ease, transform .12s ease;
}
.confirm-buy-close:hover {
  background: rgba(0,0,0,.65);
  transform: rotate(90deg);
}

.confirm-buy-art {
  position: relative;
  height: 130px;
  display: flex;
  align-items: center; justify-content: center;
  border-bottom: 1px solid rgba(0,0,0,.30);
  overflow: hidden;
}
.confirm-buy-art::before {
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(circle at 50% 40%, transparent 30%, rgba(0,0,0,.30) 100%),
    linear-gradient(180deg, transparent 60%, rgba(0,0,0,.20) 100%);
  pointer-events: none;
}
.confirm-buy-art-shine {
  position: absolute;
  top: 0; left: -60%;
  width: 50%; height: 100%;
  background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,.18) 50%, transparent 70%);
  transform: skewX(-12deg);
  animation: confirm-buy-shine 4s ease-in-out 0.5s infinite;
  pointer-events: none;
  z-index: 2;
}
@keyframes confirm-buy-shine {
  0%, 70%, 100% { left: -60%; opacity: 0; }
  20%           { opacity: 1; }
  50%           { left: 130%; opacity: 0; }
}
.confirm-buy-art-icon {
  position: relative;
  z-index: 1;
  width: 60px; height: 60px;
  display: flex; align-items: center; justify-content: center;
  color: #fff;
  filter: drop-shadow(0 4px 14px rgba(0,0,0,.45));
}
.confirm-buy-art-icon svg { width: 100%; height: 100%; }

.confirm-buy-body {
  padding: 18px 20px 20px;
}
.confirm-buy-eyebrow {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 8px;
}
.confirm-buy-name {
  font-size: 19px;
  font-weight: 800;
  color: var(--text-0);
  letter-spacing: -.02em;
  line-height: 1.15;
  margin-bottom: 8px;
}
.confirm-buy-tagline {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-4);
  letter-spacing: 0;
}
.confirm-buy-desc {
  font-size: 12.5px;
  color: var(--text-3);
  line-height: 1.55;
  margin-bottom: 16px;
}

/* P65.189 — Quantity stepper inside the confirm-buy modal.
   Three columns: minus button | mono digit | plus button. Sits
   above the price/balance/after rows when the item is stackable.
   P65.236 follow-up — centered horizontally inside the modal body
   (was left-aligned, which read as visually unbalanced next to the
   centered icon + headline above). */
.confirm-buy-qty {
  display: flex;
  align-items: center;
  gap: 0;
  background: var(--bg-1);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 4px;
  width: fit-content;
  margin: 0 auto 14px;
}
.confirm-buy-qty-btn {
  appearance: none;
  width: 28px; height: 28px;
  border: none;
  background: transparent;
  color: var(--text-2);
  display: inline-flex;
  align-items: center; justify-content: center;
  border-radius: 50%;
  cursor: pointer;
  transition: background .14s ease, color .14s ease, transform .12s ease;
}
.confirm-buy-qty-btn:hover:not(:disabled) {
  background: rgba(0, 196, 114, .12);
  color: var(--accent);
  transform: scale(1.06);
}
.confirm-buy-qty-btn:disabled {
  opacity: .35;
  cursor: not-allowed;
}
.confirm-buy-qty-num {
  font-family: var(--mono);
  font-size: 15px;
  font-weight: 800;
  color: var(--text-0);
  letter-spacing: -.01em;
  font-variant-numeric: tabular-nums;
  min-width: 28px;
  text-align: center;
  padding: 0 4px;
}
.confirm-buy-qty-mult {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--text-4);
  font-weight: 700;
  letter-spacing: .02em;
  margin-right: 6px;
}
.confirm-buy-qty-eq {
  margin: 0 4px;
  color: var(--text-4);
  opacity: .6;
}

.confirm-buy-rows {
  display: flex;
  flex-direction: column;
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: 18px;
}
.confirm-buy-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: 10px 12px;
  background: var(--bg-1);
}
.confirm-buy-row-label {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .10em;
  text-transform: uppercase;
  color: var(--text-4);
}
.confirm-buy-row-val {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
}
.confirm-buy-num {
  font-family: var(--mono);
  font-size: 14px;
  font-weight: 800;
  color: var(--text-0);
  letter-spacing: -.01em;
  font-variant-numeric: tabular-nums;
}
.confirm-buy-num-muted { color: var(--text-2); }
.confirm-buy-unit {
  font-size: 9.5px;
  font-weight: 800;
  color: var(--accent);
  letter-spacing: .10em;
}
.confirm-buy-row-price .confirm-buy-num {
  font-size: 17px;
  background: linear-gradient(135deg, var(--tone-from), var(--tone-to));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.confirm-buy-row-after {
  background: rgba(0,196,114,.04);
}
.confirm-buy-row-after .confirm-buy-row-label {
  color: var(--accent);
}

.confirm-buy-actions {
  display: flex;
  gap: 8px;
}
.confirm-buy-cancel {
  flex: 1;
}
.confirm-buy-acquire {
  appearance: none;
  flex: 2;
  display: inline-flex;
  align-items: center; justify-content: center;
  gap: 8px;
  padding: 11px 16px;
  border: none;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--tone-from), var(--tone-to));
  color: var(--tone-txt, #0a0e0c);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow:
    0 6px 20px var(--tone-glow, rgba(0,196,114,.40)),
    inset 0 1px 0 rgba(255,255,255,.20);
  transition: transform .14s ease, box-shadow .14s ease;
}
.confirm-buy-acquire:hover {
  transform: translateY(-1px);
  box-shadow:
    0 10px 26px var(--tone-glow, rgba(0,196,114,.50)),
    inset 0 1px 0 rgba(255,255,255,.28);
}
.confirm-buy-acquire:active { transform: translateY(0); }

/* ═══════════════════════════════════════════════════════════════════
   P65.155 — Storage tab (profile) — flip cards
   ─────────────────────────────────────────────────────────────────
   Each card has two faces (front: art + status, back: actions). The
   wrap div sets perspective; the inner card rotates on the Y axis
   when .is-flipped is toggled. Faces use backface-visibility:hidden
   so the back doesn't bleed through during the spin.
   ═══════════════════════════════════════════════════════════════════ */

/* Empty state */
.storage-empty {
  text-align: center;
  padding: 48px 20px 40px;
  max-width: 440px;
  margin: 0 auto;
}
.storage-empty-icon {
  width: 64px; height: 64px;
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(0,196,114,.12), rgba(0,196,114,.04));
  border: 1px solid rgba(0,196,114,.20);
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 18px;
  color: var(--accent);
}
.storage-empty-title {
  font-size: 16px;
  font-weight: 800;
  color: var(--text-0);
  letter-spacing: -.01em;
  margin-bottom: 6px;
}
.storage-empty-sub {
  font-size: 13px;
  color: var(--text-3);
  line-height: 1.55;
}

/* Grid */
.storage-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 14px;
  padding: 8px 0 24px;
}

/* Wrap sets the 3D perspective for the flip. */
.storage-card-wrap {
  perspective: 1200px;
}
.storage-card {
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 4;          /* portrait-ish, like a trading card */
  cursor: pointer;
  transform-style: preserve-3d;
  transition: transform .65s cubic-bezier(.22,1,.36,1);
  border-radius: 14px;
}
.storage-card.is-flipped { transform: rotateY(180deg); }
.storage-card-wrap:hover .storage-card:not(.is-flipped) {
  transform: translateY(-2px);
}

/* Faces — both absolute, both hidden when not facing the camera. */
.storage-card-face {
  position: absolute; inset: 0;
  border-radius: 14px;
  background: var(--bg-2);
  border: 1px solid rgba(255,255,255,.06);
  overflow: hidden;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  display: flex;
  flex-direction: column;
}
.storage-card-face-front {
  /* default — face the camera */
}
.storage-card-face-back {
  transform: rotateY(180deg);
  background:
    linear-gradient(180deg, rgba(255,255,255,.025), transparent 55%),
    var(--bg-2);
  padding: 16px 14px 12px;
  justify-content: space-between;
}

/* ── FRONT: art panel + body ─────────────────────────────────── */
.storage-card-art {
  position: relative;
  height: 60%;                    /* art takes the upper 60% of the card */
  display: flex; align-items: center; justify-content: center;
  border-bottom: 1px solid rgba(0,0,0,.30);
  overflow: hidden;
}
.storage-card-art::before {
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(circle at 50% 40%, transparent 30%, rgba(0,0,0,.30) 100%),
    linear-gradient(180deg, transparent 60%, rgba(0,0,0,.20) 100%);
  pointer-events: none;
}
.storage-card-art-icon {
  position: relative;
  z-index: 1;
  width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  color: #fff;
  filter: drop-shadow(0 4px 12px rgba(0,0,0,.45));
}
.storage-card-art-icon svg { width: 100%; height: 100%; }

/* Status pill (top-right) */
.storage-card-status {
  position: absolute;
  top: 8px; left: 8px;
  z-index: 2;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .14em;
  padding: 3px 7px;
  border-radius: 4px;
  background: rgba(0,0,0,.55);
  color: #fff;
  border: 1px solid rgba(255,255,255,.12);
  backdrop-filter: blur(6px);
}
.storage-card-status.is-equipped {
  background: linear-gradient(135deg, var(--accent), #5eead4);
  color: #0a0e0c;
  border-color: transparent;
  box-shadow: 0 2px 8px rgba(0,196,114,.40);
}
.storage-card-status.is-stored  { color: var(--text-2); }
.storage-card-status.is-timed   { color: #fbbf24; border-color: rgba(251,191,36,.35); }
.storage-card-status.is-expired { color: #ef4444; border-color: rgba(239,68,68,.35); }

/* qty multiplier (top-right) */
.storage-card-qty {
  position: absolute;
  top: 8px; right: 8px;
  z-index: 2;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 800;
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(0,0,0,.55);
  color: #fff;
  border: 1px solid rgba(255,255,255,.12);
  backdrop-filter: blur(6px);
}

.storage-card-body {
  flex: 1;
  padding: 10px 12px 11px;
  display: flex; flex-direction: column;
  justify-content: space-between;
}
.storage-card-name {
  font-size: 12.5px;
  font-weight: 800;
  color: var(--text-0);
  letter-spacing: -.01em;
  line-height: 1.2;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.storage-card-meta {
  font-size: 10px;
  color: var(--text-4);
  letter-spacing: .04em;
  margin-top: 3px;
}
.storage-card-flip-hint {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--accent);
  margin-top: 8px;
  opacity: .75;
}
.storage-card-flip-hint svg { transform: rotate(45deg); }

/* ── BACK: actions ─────────────────────────────────────────── */
.storage-back-head {
  text-align: center;
  padding: 6px 4px 10px;
  border-bottom: 1px dashed rgba(255,255,255,.08);
}
.storage-back-name {
  font-size: 13px;
  font-weight: 800;
  color: var(--text-0);
  letter-spacing: -.01em;
  margin-bottom: 3px;
}
.storage-back-sub {
  font-size: 10px;
  color: var(--text-4);
  letter-spacing: .04em;
}

.storage-back-actions {
  display: flex; flex-direction: column;
  gap: 6px;
  padding: 14px 0 8px;
}
.storage-act {
  appearance: none;
  display: inline-flex;
  align-items: center; gap: 8px;
  padding: 9px 12px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.06);
  color: var(--text-1);
  font-size: 11.5px;
  font-weight: 700;
  border-radius: 9px;
  cursor: pointer;
  transition: background .14s ease, border-color .14s ease, color .14s ease, transform .14s ease;
  text-align: left;
}
.storage-act svg { color: var(--text-3); flex-shrink: 0; }
.storage-act:hover {
  background: rgba(0,196,114,.08);
  border-color: rgba(0,196,114,.28);
  color: var(--text-0);
  transform: translateX(1px);
}
.storage-act:hover svg { color: var(--accent); }
.storage-act.is-on {
  background: rgba(0,196,114,.10);
  border-color: rgba(0,196,114,.40);
  color: var(--accent);
}
.storage-act.is-on svg { color: var(--accent); }
.storage-act.is-locked {
  cursor: not-allowed;
  opacity: .55;
}
.storage-act.is-danger { color: var(--text-2); }
.storage-act.is-danger:hover {
  background: rgba(239,68,68,.10);
  border-color: rgba(239,68,68,.40);
  color: #fecaca;
}
.storage-act.is-danger:hover svg { color: #ef4444; }

.storage-back-close {
  appearance: none;
  display: inline-flex; align-items: center; gap: 6px;
  align-self: center;
  margin: 0 auto;
  padding: 5px 12px 5px 8px;
  background: transparent;
  border: 1px solid rgba(255,255,255,.08);
  color: var(--text-3);
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background .12s ease, color .12s ease, border-color .12s ease;
}
.storage-back-close:hover {
  background: rgba(255,255,255,.06);
  color: var(--text-0);
  border-color: rgba(255,255,255,.16);
}

/* Honor reduced-motion: disable the spin, just toggle visibility. */
@media (prefers-reduced-motion: reduce) {
  .storage-card { transition: none; }
  .storage-card.is-flipped .storage-card-face-front { display: none; }
  .storage-card .storage-card-face-back { transform: none; }
  .storage-card:not(.is-flipped) .storage-card-face-back { display: none; }
}

/* ═══════════════════════════════════════════════════════════════════
   P65.161 — Post theme overlay
   ─────────────────────────────────────────────────────────────────
   When a post's author has equipped a `theme_*` cosmetic, the gradient
   from the catalog is plumbed through as a CSS variable on the
   <article class="post post-themed"> wrapper.  We layer it as a
   low-opacity chromatic backdrop behind the post content + add a
   subtle accent strip on the left edge so the theme reads at a
   glance without overwhelming the readability of the post body.
   ═══════════════════════════════════════════════════════════════════ */
.post.post-themed {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-radius: 14px;
}
.post.post-themed::before {
  /* The chromatic gradient at low opacity, layered between the card
     bg and the content.  Pointer-events:none so it never intercepts
     clicks on chart pills, action buttons, etc. */
  content: '';
  position: absolute;
  inset: 0;
  background: var(--post-theme, transparent);
  opacity: .12;
  pointer-events: none;
  z-index: 0;
  transition: opacity .25s ease;
}
.post.post-themed:hover::before { opacity: .18; }
.post.post-themed::after {
  /* Left accent strip — same gradient, full saturation, narrow. */
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--post-theme, transparent);
  pointer-events: none;
  z-index: 1;
  box-shadow: 0 0 14px rgba(0, 196, 114, .15);
}
.post.post-themed > .post-inner {
  position: relative;
  z-index: 2;
}

/* ═══════════════════════════════════════════════════════════════════
   P65.181 — Pin Call select-mode UI
   ─────────────────────────────────────────────────────────────────
   Banner sits above the Calls list while the user is choosing which
   call to pin. Each unpinned call row gets a `call-row-pin-target`
   class that brightens its border + cursor to signal "click me".
   Pinned rows wear a small gold push-pin glyph next to the ticker
   and an inline "unpin" link that opens the unpin-confirm modal.
   ═══════════════════════════════════════════════════════════════════ */
.pin-select-banner {
  display: grid;
  grid-template-columns: 32px 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 12px 14px;
  margin-bottom: 12px;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(247,217,121,.12), rgba(247,217,121,.04));
  border: 1px solid rgba(247,217,121,.32);
  box-shadow: 0 4px 14px rgba(247,217,121,.10);
}
.pin-select-banner-icon {
  width: 32px; height: 32px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 8px;
  background: radial-gradient(120% 120% at 30% 20%, #fff3ad, #d4a72c 80%);
  color: #1a1304;
}
.pin-select-banner-text {
  display: flex; flex-direction: column; gap: 2px;
}
.pin-select-banner-text strong {
  font-size: 13px;
  font-weight: 800;
  color: var(--text-0);
  letter-spacing: -.005em;
}
.pin-select-banner-text span {
  font-size: 11.5px;
  color: var(--text-3);
  line-height: 1.4;
}
.pin-select-banner-cancel {
  appearance: none;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.30);
  color: var(--text-2);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .04em;
  padding: 6px 12px;
  border-radius: 8px;
  cursor: pointer;
  transition: background .14s ease, color .14s ease;
}
.pin-select-banner-cancel:hover {
  background: rgba(255,255,255,.06);
  color: var(--text-0);
}

/* Target rows in select mode — accent border + cursor + lift on hover */
.call-row.call-row-pin-target {
  outline: 1px dashed rgba(247,217,121,.30);
  outline-offset: -1px;
  border-radius: 10px;
  transition: outline-color .15s ease, background .15s ease, transform .15s ease;
}
.call-row.call-row-pin-target:hover {
  outline-color: rgba(247,217,121,.65);
  background: rgba(247,217,121,.05);
  transform: translateX(2px);
}

/* P65.184 — Pin marker on a call row.  Just the gold pin glyph,
   no circle background, no clipping.  Vertically centered on the
   row so it reads against both the ticker line and the entry line.
   Pinned rows get a slight left-padding boost (`padding-left: 30px`)
   so the marker lives in its own dedicated lane and doesn't crowd
   the $TICKER text. */
.call-row {
  position: relative;
}
.call-row.call-row-pinned {
  padding-left: 30px;
}
.call-row-pin-corner {
  position: absolute;
  top: 50%;
  left: 8px;
  z-index: 4;
  width: 14px; height: 14px;
  display: inline-flex;
  align-items: center; justify-content: center;
  color: #f7d979;
  filter: drop-shadow(0 0 4px rgba(247, 217, 121, .55));
  pointer-events: auto;
  cursor: help;
  transform: translateY(-50%) rotate(-12deg);
  transition: transform .18s cubic-bezier(.22, 1, .36, 1);
}
.call-row-pin-corner:hover {
  transform: translateY(-50%) rotate(-12deg) scale(1.18);
}
.call-row-pin-corner svg {
  width: 12px; height: 12px;
}

/* Pinned row card — soft gold tint band on the left edge */
.call-row.call-row-pinned {
  background: linear-gradient(90deg, rgba(247,217,121,.06) 0%, transparent 24%);
}
.call-row.call-row-pinned::before {
  content: '';
  position: absolute;
  left: 0; top: 8px; bottom: 8px;
  width: 2px;
  background: linear-gradient(180deg, transparent, #f7d979, transparent);
  border-radius: 2px;
}

/* P65.185 — Calls list pagination footer */
.calls-list-pager {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px 12px;
  border-top: 1px solid var(--border);
  margin-top: 4px;
}
.calls-list-pager-btn {
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 7px 12px;
  background: var(--bg-2);
  border: 1px solid var(--border);
  color: var(--text-2);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .04em;
  border-radius: 8px;
  cursor: pointer;
  transition: border-color .14s ease, background .14s ease, color .14s ease, transform .14s ease;
}
.calls-list-pager-btn:hover:not(:disabled) {
  border-color: rgba(0,196,114,.35);
  background: rgba(0,196,114,.06);
  color: var(--accent);
  transform: translateY(-1px);
}
.calls-list-pager-btn:disabled {
  opacity: .35;
  cursor: not-allowed;
}
.calls-list-pager-btn svg { flex-shrink: 0; }
.calls-list-pager-info {
  font-size: 11px;
  color: var(--text-3);
  font-family: var(--mono);
  letter-spacing: .02em;
  font-variant-numeric: tabular-nums;
}
.calls-list-pager-info strong {
  color: var(--text-0);
  font-weight: 800;
  font-size: 13px;
}
.calls-list-pager-sep {
  margin: 0 4px;
  color: var(--text-4);
  opacity: .6;
}
.calls-list-pager-count {
  margin-left: 8px;
  color: var(--text-4);
  font-size: 10.5px;
}
@media (max-width: 480px) {
  .calls-list-pager-count { display: none; }
}

/* P65.181 / P65.191 — Inline "unpin" link.
   Default state now reads as a soft-red chip so the user spots it
   instantly against the row's dark background.  Hover deepens the
   red glow.  The earlier neutral-gray default was almost invisible
   on a dark theme. */
.call-row-unpin {
  appearance: none;
  border: 1px solid rgba(239, 68, 68, .35);
  background: rgba(239, 68, 68, .10);
  color: #fecaca;
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: .10em;
  text-transform: uppercase;
  padding: 3px 9px;
  border-radius: 6px;
  margin-left: auto;
  cursor: pointer;
  transition: background .14s ease, color .14s ease, border-color .14s ease, box-shadow .14s ease, transform .14s ease;
  box-shadow: 0 0 0 0 rgba(239, 68, 68, .0);
}
.call-row-unpin:hover {
  background: rgba(239, 68, 68, .20);
  color: #fff;
  border-color: rgba(239, 68, 68, .65);
  box-shadow: 0 0 12px rgba(239, 68, 68, .30);
  transform: translateY(-1px);
}
.call-row-unpin:active { transform: translateY(0); }

/* ═══════════════════════════════════════════════════════════════════
   P65.160 — Pinned-post corner badge
   ─────────────────────────────────────────────────────────────────
   Replaces the earlier eyebrow chip (P65.158) with a small floating
   pin glyph anchored to the top-left corner of the hoisted card.
   Sits half outside the card edge so it reads as a sticker-style
   marker, not as an in-flow header.  Hover / SR users still get
   the "Pinned to your profile" affordance via the title attribute.
   ═══════════════════════════════════════════════════════════════════ */
.profile-pinned-wrap {
  position: relative;
  margin-bottom: 16px;
}
/* Subtle accent border halo on the pinned card so it reads as
   distinguished from ordinary timeline cards below it. */
.profile-pinned-wrap > div:first-of-type {
  box-shadow:
    0 0 0 1px rgba(0, 196, 114, 0.16),
    0 8px 24px rgba(0, 196, 114, 0.05);
  border-radius: 14px;
}
.profile-pinned-corner {
  position: absolute;
  top: -10px;
  left: -10px;
  z-index: 6;
  width: 30px; height: 30px;
  display: inline-flex;
  align-items: center; justify-content: center;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), #5eead4);
  color: #0a0e0c;
  box-shadow:
    0 4px 14px rgba(0, 196, 114, 0.45),
    0 0 0 3px var(--bg-1),
    inset 0 1px 0 rgba(255, 255, 255, 0.30);
  pointer-events: auto;
  cursor: help;
  /* tilt the pin glyph slightly for a "pinned in" feel */
  transform: rotate(-12deg);
  transition: transform .18s cubic-bezier(.22, 1, .36, 1);
}
.profile-pinned-corner:hover {
  transform: rotate(-12deg) scale(1.08);
}
.profile-pinned-corner svg {
  width: 14px; height: 14px;
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.20));
}

/* Empty / loading */
.market-empty {
  text-align: center;
  padding: 60px 20px;
  font-size: 12px;
  color: var(--text-3);
  letter-spacing: .03em;
}

@media (max-width: 600px) {
  .market-panel { width: 100vw; max-width: 100vw; }
  .market-hero { grid-template-columns: 1fr; }
  .market-hero-art {
    width: 100%; height: 100px;
    order: -1;
  }
  .market-header-title { font-size: 19px; }
}

/* P65.142 — Layer side-panels ABOVE the FAB. Keep the +-button
   visible at all times; just make sure the notifications panel and
   $NMX token panel render on top of it instead of underneath.
   FAB sits at z-index:500 (line 880); panels live at z-index:300
   by default. The actual z-index bumps live next to each panel's
   own rule so they're discoverable — see .notif-panel (pages.css)
   and .nmx-panel (this file). The earlier P65.141 hide rule is
   gone — user wants the FAB to keep showing. */

/* Upload dropzone — shown in create modal when file not yet chosen */
.upload-dropzone {
  border: 2px dashed var(--border);
  border-radius: var(--radius);
  padding: 24px;
  text-align: center;
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease;
  position: relative;
}
.upload-dropzone:hover,
.upload-dropzone.dragging {
  border-color: var(--accent);
  background: rgba(0,196,114,.04);
}
.upload-preview {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--bg-3);
  border: 1px solid var(--border);
}
.upload-preview img,
.upload-preview video {
  display: block;
  width: 100%;
  max-height: 320px;
  object-fit: contain;
  background: #000;
}
.upload-preview-clear {
  position: absolute;
  top: 8px; right: 8px;
  width: 30px; height: 30px;
  border-radius: 50%;
  background: rgba(0,0,0,.7);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  border: none;
  font-size: 16px;
  line-height: 1;
  transition: background .15s ease;
}
.upload-preview-clear:hover { background: rgba(0,0,0,.9); }
.upload-progress {
  height: 3px;
  background: rgba(255,255,255,.08);
  border-radius: 2px;
  overflow: hidden;
  margin-top: 8px;
}
.upload-progress-bar {
  height: 100%;
  background: var(--accent);
  width: 0%;
  transition: width .2s ease;
}

/* ═══════════════════════════════════════════════════════════════
   WEEKLY PRIZE POOL — COMPACT 3-TIER (P55e)
   Sits inside the Weekly Top 3 right-rail card, between the title
   row and the ranked list. Three thin tiles mirror the 1/2/3
   leaderboard rows below: gold $500, silver $300, bronze $200.
   ═══════════════════════════════════════════════════════════════ */
.wt3-prize {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 6px 0 8px;
  padding: 8px 8px 7px;
  border-radius: 6px;
  background:
    radial-gradient(80% 120% at 0% 0%, rgba(191,162,78,.07) 0%, rgba(191,162,78,0) 60%),
    var(--bg-3);
  border: 1px solid rgba(191,162,78,.22);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.025),
    0 2px 12px -8px rgba(191,162,78,.3);
  cursor: pointer;
  overflow: hidden;
  transition: border-color .18s ease, box-shadow .18s ease;
  isolation: isolate;
}
.wt3-prize:hover {
  border-color: rgba(191,162,78,.4);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.04),
    0 4px 16px -8px rgba(191,162,78,.45);
}

/* Faint top hairline */
.wt3-prize::before {
  content: '';
  position: absolute; left: 0; right: 0; top: 0;
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(255,225,140,.0) 10%,
    rgba(255,225,140,.45) 50%,
    rgba(255,225,140,.0) 90%,
    transparent 100%);
  pointer-events: none;
  z-index: 1;
}

/* ── Header row: label + total + pulse ── */
.wt3-prize-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  font-family: var(--mono);
  line-height: 1;
  z-index: 2;
}
.wt3-prize-head-label {
  font-size: 8.5px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-2);
  display: flex; align-items: center; gap: 5px;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.wt3-prize-pulse {
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--gold);
  flex-shrink: 0;
  box-shadow: 0 0 0 0 rgba(191,162,78,.55);
  animation: wt3-prize-pulse 2.2s ease-in-out infinite;
}
@keyframes wt3-prize-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(191,162,78,.55); }
  70%  { box-shadow: 0 0 0 5px rgba(191,162,78,0); }
  100% { box-shadow: 0 0 0 0 rgba(191,162,78,0); }
}
.wt3-prize-head-total {
  font-size: 10px;
  font-weight: 700;
  color: var(--gold);
  letter-spacing: .02em;
  white-space: nowrap;
  flex-shrink: 0;
}

/* ── Three tiles row ── */
.wt3-prize-tiles {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 4px;
  z-index: 2;
}
.wt3-tile {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 5px 4px;
  border-radius: 4px;
  background: rgba(255,255,255,.015);
  border: 1px solid rgba(255,255,255,.04);
  font-family: var(--mono);
  line-height: 1;
  overflow: hidden;
  transition: transform .15s ease, border-color .15s ease;
}
.wt3-prize:hover .wt3-tile { transform: translateY(-.5px); }
.wt3-tile-rank {
  font-size: 9px;
  font-weight: 700;
  width: 11px; height: 11px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  letter-spacing: 0;
}
.wt3-tile-amount {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: -.01em;
}

/* ── Gold tile (rank 1, $500) ── */
.wt3-tile-gold {
  background: linear-gradient(180deg, rgba(191,162,78,.14) 0%, rgba(191,162,78,.06) 100%);
  border-color: rgba(191,162,78,.35);
}
.wt3-tile-gold .wt3-tile-rank {
  background: var(--gold);
  color: #1A1408;
  box-shadow: 0 0 0 1px rgba(255,225,140,.3), 0 0 6px rgba(191,162,78,.4);
}
.wt3-tile-gold .wt3-tile-amount { color: var(--gold); }
/* Sheen — gold tile only, doesn't compete with silver/bronze */
.wt3-tile-gold::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(115deg,
    transparent 0%, transparent 40%,
    rgba(255,232,160,.22) 50%,
    transparent 60%, transparent 100%);
  background-size: 250% 100%;
  background-position: 200% 0;
  animation: wt3-tile-sheen 5.5s ease-in-out infinite;
  pointer-events: none;
  mix-blend-mode: screen;
}
@keyframes wt3-tile-sheen {
  0%   { background-position: 200% 0; }
  60%  { background-position: -100% 0; }
  100% { background-position: -100% 0; }
}

/* ── Silver tile (rank 2, $300) ── */
.wt3-tile-silver {
  background: linear-gradient(180deg, rgba(138,145,154,.10) 0%, rgba(138,145,154,.04) 100%);
  border-color: rgba(138,145,154,.28);
}
.wt3-tile-silver .wt3-tile-rank {
  background: var(--silver);
  color: #14181C;
  box-shadow: 0 0 0 1px rgba(190,196,204,.25);
}
.wt3-tile-silver .wt3-tile-amount { color: var(--silver); }

/* ── Bronze tile (rank 3, $200) ── */
.wt3-tile-bronze {
  background: linear-gradient(180deg, rgba(142,106,58,.12) 0%, rgba(142,106,58,.05) 100%);
  border-color: rgba(142,106,58,.30);
}
.wt3-tile-bronze .wt3-tile-rank {
  background: var(--bronze);
  color: #1A1108;
  box-shadow: 0 0 0 1px rgba(190,150,90,.25);
}
.wt3-tile-bronze .wt3-tile-amount { color: var(--bronze); }

/* P61.4a: Empty state below the prize tiles when no one has scored
   this week yet. The card+prize pool always renders so the program
   is visible; only the leaderboard rows are conditional. */
.wt3-empty {
  margin-top: 8px;
  padding: 12px 10px;
  border-top: 1px dashed rgba(255,255,255,.06);
  text-align: center;
}
.wt3-empty-title {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-2);
  letter-spacing: .02em;
  margin-bottom: 4px;
}
.wt3-empty-desc {
  font-size: 10.5px;
  color: var(--text-4);
  line-height: 1.5;
}
.wt3-empty-desc a {
  display: inline-block;
  margin-top: 2px;
  text-decoration: none;
}
.wt3-empty-desc a:hover {
  text-decoration: underline;
}

/* P61.7/.8: 'Your standings' footer row when the signed-in user
   isn't in the visible top 3.
   Three states:
     - default (loading): plain text + arrow → leaderboard
     - active: real rank + score pill (clickable for breakdown)
     - empty: 0 weekly score → "Why? →" link */
.wt3-self-row {
  margin-top: 8px;
  padding: 8px 10px;
  border-top: 1px dashed rgba(255,255,255,.06);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  cursor: pointer;
  font-size: 11px;
  color: var(--text-3);
  transition: color .12s ease, background .12s ease;
}
.wt3-self-row:hover {
  color: var(--text-1);
  background: rgba(255,255,255,.02);
}
.wt3-self-row-text {
  font-weight: 500;
}
.wt3-self-row-cta {
  color: var(--gold);
  font-weight: 700;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .04em;
}

/* Active variant: real rank + score */
.wt3-self-row-active {
  cursor: default;
  background: linear-gradient(90deg,
    rgba(0,196,114,.04) 0%,
    rgba(0,196,114,.01) 100%);
  border-top-color: rgba(0,196,114,.18);
}
.wt3-self-row-active:hover { background: rgba(0,196,114,.06); }
.wt3-self-row-rank {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 1;
  min-width: 0;
}
.wt3-self-rank-num {
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 800;
  color: var(--accent);
  letter-spacing: .02em;
  background: rgba(0,196,114,.10);
  border: 1px solid rgba(0,196,114,.22);
  padding: 1px 6px;
  border-radius: 4px;
  white-space: nowrap;
}
.wt3-self-row-active .wt3-self-row-text {
  color: var(--text-2);
  font-weight: 600;
}
.weekly-score-pill-self {
  background: rgba(0,196,114,.06);
  border-color: rgba(0,196,114,.22);
  color: var(--accent);
}
.weekly-score-pill-self:hover {
  background: rgba(0,196,114,.14);
  border-color: rgba(0,196,114,.35);
}
.weekly-score-pill-self .cred-info-glyph {
  border-color: rgba(0,196,114,.35);
  color: rgba(0,196,114,.8);
}

/* Empty variant: 0 score */
.wt3-self-row-empty {
  background: transparent;
}
.wt3-self-row-empty .wt3-self-row-text {
  color: var(--text-4);
  font-style: italic;
}

/* Light theme calibration */
[data-theme="white"] .wt3-prize {
  background:
    radial-gradient(80% 120% at 0% 0%, rgba(191,162,78,.10) 0%, rgba(191,162,78,0) 60%),
    var(--bg-2);
  border-color: rgba(191,162,78,.30);
}
[data-theme="white"] .wt3-prize-head-label { color: var(--text-3); }
[data-theme="white"] .wt3-tile {
  background: rgba(0,0,0,.015);
  border-color: rgba(0,20,10,.05);
}

/* ═══════════════════════════════════════════════════════════════
   TROPHY POPUP (P56) — first-session achievement celebration
   Center-stage popup that holds for ~1.6s then flies to the
   header avatar. Tier-colored ring, gold rays, mono points award.
   ═══════════════════════════════════════════════════════════════ */
.trophy-popup-root {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
.trophy-popup-backdrop {
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at center,
    rgba(0,0,0,.45) 0%,
    rgba(0,0,0,.25) 40%,
    rgba(0,0,0,0) 75%);
  opacity: 0;
  transition: opacity .35s ease;
}
.trophy-popup-root.is-entering .trophy-popup-backdrop { opacity: 1; }
.trophy-popup-root.is-flying    .trophy-popup-backdrop { opacity: 0; transition: opacity .25s ease; }

.trophy-popup-card {
  position: relative;
  width: 220px;
  padding: 20px 22px 18px;
  border-radius: 14px;
  background:
    radial-gradient(120% 100% at 50% 0%, rgba(255,255,255,.04) 0%, rgba(255,255,255,0) 60%),
    linear-gradient(180deg, var(--bg-3) 0%, var(--bg-2) 100%);
  border: 1px solid rgba(255,255,255,.06);
  box-shadow:
    0 0 0 1px var(--t-glow),
    0 20px 60px -10px rgba(0,0,0,.6),
    0 0 80px var(--t-glow);
  text-align: center;
  transform: scale(.6) translateY(8px);
  opacity: 0;
  transition: transform .42s cubic-bezier(.2,1.3,.5,1), opacity .35s ease;
  isolation: isolate;
}
.trophy-popup-root.is-entering .trophy-popup-card {
  transform: scale(1) translateY(0);
  opacity: 1;
}
.trophy-popup-root.is-flying .trophy-popup-card {
  /* Card shrinks/fades but its medal child has been portaled out
     to the flyer — the card just disappears quietly. */
  opacity: 0;
  transform: scale(.94) translateY(-4px);
  transition: transform .3s ease, opacity .25s ease;
}

/* ── Rays — six thin gold beams sweep outward behind the medal ── */
.trophy-popup-rays {
  position: absolute;
  left: 50%; top: 56px;     /* aligned with medal center */
  width: 0; height: 0;
  pointer-events: none;
  z-index: 0;
}
.trophy-popup-rays span {
  position: absolute;
  left: 0; top: 0;
  width: 2px; height: 80px;
  background: linear-gradient(180deg, var(--t-rim) 0%, transparent 100%);
  transform-origin: 50% 0;
  opacity: 0;
  border-radius: 2px;
  filter: blur(.4px);
}
.trophy-popup-rays span:nth-child(1) { transform: translate(-50%,0) rotate(0deg); }
.trophy-popup-rays span:nth-child(2) { transform: translate(-50%,0) rotate(60deg); }
.trophy-popup-rays span:nth-child(3) { transform: translate(-50%,0) rotate(120deg); }
.trophy-popup-rays span:nth-child(4) { transform: translate(-50%,0) rotate(180deg); }
.trophy-popup-rays span:nth-child(5) { transform: translate(-50%,0) rotate(240deg); }
.trophy-popup-rays span:nth-child(6) { transform: translate(-50%,0) rotate(300deg); }
.trophy-popup-root.is-entering .trophy-popup-rays span {
  animation: trophyRay 1.2s cubic-bezier(.2,.8,.4,1) forwards;
}
.trophy-popup-root.is-entering .trophy-popup-rays span:nth-child(2) { animation-delay: .04s; }
.trophy-popup-root.is-entering .trophy-popup-rays span:nth-child(3) { animation-delay: .08s; }
.trophy-popup-root.is-entering .trophy-popup-rays span:nth-child(4) { animation-delay: .12s; }
.trophy-popup-root.is-entering .trophy-popup-rays span:nth-child(5) { animation-delay: .16s; }
.trophy-popup-root.is-entering .trophy-popup-rays span:nth-child(6) { animation-delay: .20s; }
@keyframes trophyRay {
  0%   { opacity: 0; height: 0; }
  20%  { opacity: .85; height: 60px; }
  100% { opacity: 0; height: 110px; }
}

/* ── Medal ── */
.trophy-popup-medal {
  position: relative;
  width: 100px; height: 100px;
  margin: 0 auto 10px;
  z-index: 2;
  animation: trophyBob 1.6s ease-in-out infinite;
  filter: drop-shadow(0 6px 14px var(--t-glow));
}
.trophy-popup-medal svg { width: 100%; height: 100%; display: block; }
@keyframes trophyBob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-3px); }
}

.trophy-popup-eyebrow {
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-3);
  margin-bottom: 5px;
  position: relative; z-index: 2;
}
.trophy-popup-label {
  font-size: 16px;
  font-weight: 700;
  color: var(--text-0);
  letter-spacing: .01em;
  margin-bottom: 8px;
  position: relative; z-index: 2;
}
.trophy-popup-points {
  display: inline-block;
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .02em;
  color: var(--gold);
  background: rgba(191,162,78,.10);
  border: 1px solid rgba(191,162,78,.28);
  border-radius: 12px;
  padding: 3px 10px;
  position: relative; z-index: 2;
  text-shadow: 0 0 8px rgba(191,162,78,.3);
}

/* ── Flyer (the medal that detaches and animates to the avatar) ── */
.trophy-flyer {
  position: fixed;
  z-index: 10000;
  pointer-events: none;
  filter: drop-shadow(0 4px 12px rgba(191,162,78,.5));
  will-change: transform, opacity;
}
.trophy-flyer svg { width: 100%; height: 100%; display: block; }

/* ── Header avatar arrival pulse ── */
@keyframes avatarRewardPulse {
  0%   { box-shadow: 0 0 0 0 rgba(191,162,78,.7), 0 0 0 0 rgba(191,162,78,.5); }
  60%  { box-shadow: 0 0 0 8px rgba(191,162,78,0),  0 0 18px rgba(191,162,78,.6); }
  100% { box-shadow: 0 0 0 12px rgba(191,162,78,0), 0 0 0 rgba(191,162,78,0); }
}
.header-profile-avatar.avatar-reward-pulse {
  animation: avatarRewardPulse .8s ease-out;
  border-color: var(--gold) !important;
}

/* Reduced motion — keep the popup informative but skip the flight */
@media (prefers-reduced-motion: reduce) {
  .trophy-popup-medal { animation: none; }
  .trophy-popup-rays span { animation: none; opacity: 0; }
  .trophy-flyer { transition: opacity .3s ease !important; transform: none !important; }
}

/* ═══════════════════════════════════════════════════════════════
   $NMX HEADER BUY CTA + PANEL (P57)
   ═══════════════════════════════════════════════════════════════ */

/* ── Header CTA button ── */
.header-buy-nmx {
  display: flex; align-items: center; gap: 7px;
  padding: 5px 10px 5px 8px;
  height: 32px;
  border-radius: 8px;
  background:
    radial-gradient(80% 120% at 0% 50%, rgba(0,196,114,.10) 0%, rgba(0,196,114,0) 60%),
    linear-gradient(180deg, rgba(0,196,114,.045) 0%, rgba(0,196,114,.02) 100%),
    var(--bg-3);
  border: 1px solid rgba(0,196,114,.28);
  cursor: pointer;
  transition: border-color .18s ease, box-shadow .18s ease, transform .15s ease, background .18s ease;
  position: relative;
  font-family: var(--mono);
  line-height: 1;
  isolation: isolate;
  overflow: hidden;
  /* Subtle border breathing — slow, calm, signals "live" without
     screaming "ad". 3.6s cycle is below conscious notice. */
  animation: hbnBreathe 3.6s ease-in-out infinite;
}
@keyframes hbnBreathe {
  0%, 100% { box-shadow: 0 0 0 0 rgba(0,196,114,.0), inset 0 0 0 0 rgba(0,196,114,0); border-color: rgba(0,196,114,.22); }
  50%      { box-shadow: 0 0 14px -4px rgba(0,196,114,.25), inset 0 0 0 0 rgba(0,196,114,0); border-color: rgba(0,196,114,.40); }
}
.header-buy-nmx:hover {
  animation: none;
  border-color: rgba(0,196,114,.55);
  background:
    radial-gradient(80% 120% at 0% 50%, rgba(0,196,114,.18) 0%, rgba(0,196,114,0) 60%),
    linear-gradient(180deg, rgba(0,196,114,.07) 0%, rgba(0,196,114,.03) 100%),
    var(--bg-3);
  transform: translateY(-1px);
  box-shadow: 0 4px 16px -4px rgba(0,196,114,.45);
}
.header-buy-nmx:active { transform: translateY(0); }

/* Live-data dot — breathing pulse on the leading icon area */
.hbn-mark {
  width: 14px; height: 14px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  z-index: 2;
  position: relative;
}
.hbn-mark::before {
  content: '';
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 0 rgba(0,196,114,.55);
  animation: hbnDot 2.2s ease-in-out infinite;
}
@keyframes hbnDot {
  0%   { box-shadow: 0 0 0 0 rgba(0,196,114,.55); }
  60%  { box-shadow: 0 0 0 5px rgba(0,196,114,0); }
  100% { box-shadow: 0 0 0 0 rgba(0,196,114,0); }
}

.hbn-text {
  display: flex; align-items: baseline; gap: 4px;
  z-index: 2;
}
.hbn-buy {
  font-size: 10px;
  font-weight: 600;
  color: var(--text-2);
  letter-spacing: .08em;
  text-transform: uppercase;
}
.hbn-ticker {
  font-size: 12px;
  font-weight: 700;
  color: var(--accent);
  letter-spacing: -.01em;
  text-shadow: 0 0 8px rgba(0,196,114,.25);
}
.hbn-price {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-1);
  margin-left: 2px;
  padding-left: 8px;
  border-left: 1px solid rgba(255,255,255,.08);
  z-index: 2;
  font-variant-numeric: tabular-nums;
  transition: color .35s ease, text-shadow .35s ease;
}
/* Subscript zero count for sub-cent prices — tiny tabular numerals */
.hbn-price .nmx-price-sub,
.nmx-price-main .nmx-price-sub {
  font-size: .55em;
  font-weight: 600;
  vertical-align: baseline;
  position: relative;
  bottom: -.18em;
  margin: 0 .04em;
  color: var(--text-2);
  font-variant-numeric: tabular-nums;
}
/* Brief flash when the price updates — signals real-time tick */
.hbn-price-flash {
  animation: hbnPriceFlash .55s ease-out;
}
@keyframes hbnPriceFlash {
  0%   { color: var(--accent); text-shadow: 0 0 10px rgba(0,196,114,.6); }
  60%  { color: var(--accent); }
  100% { color: var(--text-1); text-shadow: none; }
}
.hbn-change {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: -.01em;
  z-index: 2;
  font-variant-numeric: tabular-nums;
}
.hbn-change-up   { color: var(--accent); }
.hbn-change-down { color: var(--red); }

/* On mobile / narrow screens, hide the price+change to save space */
@media (max-width: 1080px) {
  .hbn-price, .hbn-change { display: none; }
}
@media (max-width: 720px) {
  .hbn-buy { display: none; }
  .header-buy-nmx { padding: 5px 8px; }
}

/* ── Panel backdrop ── */
.nmx-panel-backdrop {
  position: fixed; inset: 0;
  background: rgba(0,0,0,.45);
  /* P65.142 — was 290; bumped above FAB (500) so the dim layer
     covers the +-button instead of leaving it bright behind it. */
  z-index: 590;
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s ease;
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}
.nmx-panel-backdrop.open {
  opacity: 1;
  pointer-events: auto;
}

/* ── Panel itself ── */
.nmx-panel {
  position: fixed;
  top: 0; right: 0;
  width: 420px; max-width: calc(100vw - 24px);
  height: 100vh;
  background: var(--bg-1);
  border-left: 1px solid rgba(0,196,114,.15);
  /* P65.142 — was 300; bumped above the FAB (500) so the panel
     slides over the +-button rather than under it. */
  z-index: 600;
  transform: translateX(110%);
  transition: transform .35s cubic-bezier(.4,0,.2,1);
  display: flex; flex-direction: column;
  box-shadow: -8px 0 40px rgba(0,0,0,.5), -1px 0 0 rgba(0,196,114,.06);
  overflow: hidden;
}
.nmx-panel.open { transform: translateX(0); }
.nmx-panel-inner {
  flex: 1;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(0,196,114,.15) transparent;
}
.nmx-panel-inner::-webkit-scrollbar { width: 4px; }
.nmx-panel-inner::-webkit-scrollbar-track { background: transparent; }
.nmx-panel-inner::-webkit-scrollbar-thumb { background: rgba(0,196,114,.15); border-radius: 4px; }
.nmx-panel-inner::-webkit-scrollbar-thumb:hover { background: rgba(0,196,114,.3); }

/* ── Header strip with token mark + close ── */
.nmx-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 18px 14px;
  border-bottom: 1px solid rgba(255,255,255,.04);
  background: linear-gradient(180deg, rgba(0,196,114,.04) 0%, transparent 100%);
}
.nmx-header-left {
  display: flex; align-items: center; gap: 12px;
}
.nmx-token-mark {
  width: 36px; height: 36px;
  flex-shrink: 0;
  filter: drop-shadow(0 2px 6px rgba(191,162,78,.3));
}
.nmx-token-mark svg { width: 100%; height: 100%; display: block; }
.nmx-token-name {
  font-family: var(--mono);
  font-size: 16px;
  font-weight: 700;
  color: var(--accent);
  letter-spacing: -.005em;
  line-height: 1.1;
}
.nmx-token-suffix {
  font-size: 12px;
  font-weight: 500;
  color: var(--text-3);
  margin-left: 4px;
}
.nmx-token-chain {
  font-family: var(--mono);
  font-size: 9.5px;
  font-weight: 500;
  color: var(--text-3);
  letter-spacing: .08em;
  text-transform: uppercase;
  margin-top: 3px;
}
.nmx-close {
  width: 30px; height: 30px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 8px;
  background: transparent;
  color: var(--text-3);
  cursor: pointer;
  transition: all .15s ease;
  flex-shrink: 0;
  border: 1px solid transparent;
}
.nmx-close:hover {
  background: var(--bg-3);
  color: var(--text-0);
  border-color: var(--border);
}

/* ── Price strip below header ── */
.nmx-price-strip {
  padding: 14px 18px 12px;
  display: flex; align-items: baseline; gap: 10px;
  border-bottom: 1px solid rgba(255,255,255,.04);
}
.nmx-price-main {
  font-family: var(--mono);
  font-size: 28px;
  font-weight: 700;
  color: var(--text-0);
  letter-spacing: -.02em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  transition: color .35s ease, text-shadow .35s ease;
}
.nmx-price-flash {
  animation: nmxPriceFlash .6s ease-out;
}
@keyframes nmxPriceFlash {
  0%   { color: var(--accent); text-shadow: 0 0 14px rgba(0,196,114,.55); }
  60%  { color: var(--accent); }
  100% { color: var(--text-0); text-shadow: none; }
}
.nmx-price-change {
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: -.01em;
}
.nmx-price-change.hbn-change-up { color: var(--accent); }
.nmx-price-change.hbn-change-down { color: var(--red); }
.nmx-price-window {
  font-size: 9px;
  font-weight: 500;
  color: var(--text-3);
  letter-spacing: .12em;
  text-transform: uppercase;
  margin-left: 3px;
}

/* ── Embedded chart ── */
.nmx-chart-wrap {
  height: 240px;
  border-bottom: 1px solid rgba(255,255,255,.04);
  background: var(--bg-2);
  position: relative;
}
.nmx-chart-frame {
  width: 100%; height: 100%;
  border: none;
  display: block;
}

/* ── Stat strip — 4 metric cards ── */
.nmx-stat-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: rgba(255,255,255,.04);
  border-bottom: 1px solid rgba(255,255,255,.04);
}
.nmx-stat {
  background: var(--bg-1);
  padding: 12px 8px;
  text-align: center;
  font-family: var(--mono);
}
.nmx-stat-label {
  font-size: 8.5px;
  font-weight: 600;
  color: var(--text-3);
  letter-spacing: .12em;
  text-transform: uppercase;
  margin-bottom: 4px;
}
.nmx-stat-val {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-0);
  letter-spacing: -.01em;
  line-height: 1;
}

/* ── Section wrapper ── */
.nmx-section {
  padding: 16px 18px 14px;
  border-bottom: 1px solid rgba(255,255,255,.04);
}
.nmx-section-title {
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 600;
  color: var(--text-3);
  letter-spacing: .14em;
  text-transform: uppercase;
  margin-bottom: 10px;
}

/* ── Trust signals list ── */
.nmx-trust-list {
  display: flex; flex-direction: column; gap: 6px;
}
.nmx-trust-row {
  display: flex; align-items: center; gap: 10px;
  padding: 7px 10px;
  border-radius: 6px;
  background: var(--bg-3);
  border: 1px solid rgba(255,255,255,.04);
  font-size: 12px;
}
.nmx-trust-glyph {
  width: 16px; height: 16px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.nmx-trust-glyph svg { width: 14px; height: 14px; }
.nmx-trust-row.ok .nmx-trust-glyph { color: var(--accent); }
.nmx-trust-row.ok {
  border-color: rgba(0,196,114,.18);
  background: rgba(0,196,114,.04);
}
.nmx-trust-row.warn .nmx-trust-glyph { color: var(--orange); }
.nmx-trust-row.warn {
  border-color: rgba(196,125,42,.22);
  background: rgba(196,125,42,.05);
}
.nmx-trust-label {
  flex: 1;
  font-weight: 600;
  color: var(--text-0);
}
.nmx-trust-detail {
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 500;
  color: var(--text-2);
  letter-spacing: .01em;
}

/* ── Contract address row ── */
.nmx-ca-row {
  display: flex; align-items: center; gap: 6px;
  padding: 8px 10px;
  border-radius: 6px;
  background: var(--bg-3);
  border: 1px solid var(--border);
}
.nmx-ca-mono {
  flex: 1;
  font-family: var(--mono);
  font-size: 11.5px;
  font-weight: 600;
  color: var(--text-1);
  letter-spacing: .01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.nmx-ca-btn {
  display: flex; align-items: center; gap: 4px;
  height: 26px;
  padding: 0 8px;
  border-radius: 5px;
  background: var(--bg-4);
  border: 1px solid var(--border);
  cursor: pointer;
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 600;
  color: var(--text-1);
  text-decoration: none;
  transition: all .15s ease;
  flex-shrink: 0;
}
.nmx-ca-btn:hover {
  background: var(--bg-5);
  color: var(--text-0);
  border-color: var(--border-hover);
}
.nmx-ca-btn.is-copied {
  background: rgba(0,196,114,.10);
  border-color: rgba(0,196,114,.3);
  color: var(--accent);
}
.nmx-ca-btn-link {
  width: 26px;
  padding: 0;
  justify-content: center;
}

/* ── Buy buttons grid ──
   P65.252 — 3-col layout for the primary DEX buttons (Raydium /
   Pump.fun / Jupiter), with Dexscreener spanning all 3 cols on
   its own row.  The 3 primary buttons drop their trailing arrow
   to fit the narrower column width; the full-width Dexscreener
   row keeps the arrow since it has horizontal room. */
.nmx-buy-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 8px;
}
.nmx-buy-btn {
  display: flex; align-items: center; gap: 8px;
  padding: 9px 10px;
  border-radius: 7px;
  background: var(--bg-3);
  border: 1px solid var(--border);
  cursor: pointer;
  text-decoration: none;
  font-family: var(--font);
  transition: all .15s ease;
  position: relative;
  min-width: 0;                /* allow shrink in tight columns */
}
/* P65.252 — compact mode: hide the arrow so the icon + name fit
   inside the narrower 3-col cell.  Applied to all .nmx-buy-btn
   that aren't the full-width secondary (Dexscreener). */
.nmx-buy-btn:not(.nmx-buy-secondary) {
  padding: 8px 9px;
  gap: 7px;
}
.nmx-buy-btn:not(.nmx-buy-secondary) .nmx-buy-arrow {
  display: none;
}
.nmx-buy-btn:not(.nmx-buy-secondary) .nmx-buy-name {
  font-size: 11.5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.nmx-buy-btn:hover {
  background: var(--bg-4);
  border-color: var(--border-hover);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px -6px rgba(0,0,0,.5);
}
.nmx-buy-btn:active { transform: translateY(0); }
.nmx-buy-logo {
  width: 28px; height: 28px;
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  border-radius: 6px;
  overflow: hidden;
}
.nmx-buy-logo svg { width: 28px; height: 28px; display: block; }
.nmx-buy-name {
  flex: 1;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--text-0);
}
.nmx-buy-arrow {
  font-size: 14px;
  color: var(--text-3);
  transition: transform .15s ease, color .15s ease;
  font-family: var(--mono);
}
.nmx-buy-btn:hover .nmx-buy-arrow {
  color: var(--text-1);
  transform: translateX(2px);
}
/* Primary buy button — Raydium gets prominence as the primary
   on-chain DEX once the token TGEs */
.nmx-buy-primary {
  background: linear-gradient(180deg, rgba(0,196,114,.10) 0%, rgba(0,196,114,.04) 100%);
  border-color: rgba(0,196,114,.28);
}
.nmx-buy-primary:hover {
  background: linear-gradient(180deg, rgba(0,196,114,.14) 0%, rgba(0,196,114,.06) 100%);
  border-color: rgba(0,196,114,.4);
  box-shadow: 0 4px 14px -6px rgba(0,196,114,.4);
}
.nmx-buy-primary .nmx-buy-name { color: var(--accent); }
.nmx-buy-secondary {
  /* P65.252 — Dexscreener spans the full 3-column row beneath
     the primary trio so it reads as a "view-only" companion to
     the buy actions above. */
  grid-column: span 3;
  background: var(--bg-2);
}
.nmx-buy-secondary .nmx-buy-name { color: var(--text-1); font-weight: 600; }

/* ── Project link rows ── */
.nmx-link-list {
  display: flex; flex-direction: column; gap: 4px;
}
.nmx-link-row {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 10px;
  border-radius: 6px;
  background: transparent;
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  font-family: var(--font);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-1);
  transition: all .15s ease;
  width: 100%;
  text-align: left;
}
.nmx-link-row:hover {
  background: var(--bg-3);
  border-color: var(--border);
  color: var(--text-0);
}
.nmx-link-row svg { color: var(--text-3); flex-shrink: 0; }
.nmx-link-row:hover svg { color: var(--gold); }
.nmx-link-name { flex: 1; }
.nmx-link-arrow {
  font-family: var(--mono);
  font-size: 13px;
  color: var(--text-4);
}
.nmx-link-row:hover .nmx-link-arrow { color: var(--text-2); }

/* ── Disclaimer ── */
.nmx-disclaimer {
  padding: 14px 18px 22px;
  font-size: 10.5px;
  color: var(--text-3);
  text-align: center;
  font-style: italic;
  line-height: 1.5;
}

/* ── Light theme ── */
[data-theme="white"] .header-buy-nmx {
  background:
    radial-gradient(80% 120% at 0% 50%, rgba(0,196,114,.14) 0%, rgba(0,196,114,0) 60%),
    var(--bg-2);
  border-color: rgba(0,196,114,.32);
}
[data-theme="white"] .hbn-ticker { text-shadow: none; }
[data-theme="white"] .nmx-panel { background: var(--bg-2); }
[data-theme="white"] .nmx-token-name { text-shadow: none; }

/* ── Mobile ── */
@media (max-width: 720px) {
  .nmx-panel { width: 100vw; max-width: 100vw; }
  /* P65.252 — keep the 3-col layout on mobile too; the panel is
     ~340px+ which fits three 100px buttons comfortably.  Falls
     back to single-column only on truly narrow screens. */
  .nmx-buy-grid { grid-template-columns: 1fr 1fr 1fr; }
  .nmx-buy-secondary { grid-column: span 3; }
}
@media (max-width: 380px) {
  .nmx-buy-grid { grid-template-columns: 1fr; }
  .nmx-buy-secondary { grid-column: span 1; }
  .nmx-stat-strip { grid-template-columns: repeat(2, 1fr); }
  .nmx-stat-strip .nmx-stat:nth-child(2) { border-right: none; }
}

/* ═══════════════════════════════════════════════════════════════
   POST TRANSLATION FOOTER (P58)
   Tiny "Translated from English · See original" toggle that sits
   under translated post content. Subtle by default, faintly
   highlighted on hover. The Facebook/Twitter pattern.
   ═══════════════════════════════════════════════════════════════ */
.post-tr-footer {
  display: inline-block;
  font-size: 11.5px;
  color: var(--text-3);
  margin: 4px 0 8px;
  cursor: pointer;
  user-select: none;
  letter-spacing: .005em;
  transition: color .15s ease;
  font-family: var(--font);
}
.post-tr-footer:hover {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
}

/* ═══════════════════════════════════════════════════════════════
   COMMENT TRANSLATE BUTTON + FOOTER (P65.384)
   Comments don't auto-translate (unlike posts). When the detected
   source language differs from the viewer's, a small pill button
   appears under the comment text — clicking it triggers translation
   and swaps the pill for a "Translated from X · See original" link
   that matches the post-tr-footer pattern.
   ═══════════════════════════════════════════════════════════════ */
/* P65.385 — comment text wraps long unbroken tokens inside the row
   rather than blowing out the post-detail card horizontally. Same
   typography as the previous inline style; just adds the wrap rules. */
.comment-body-text {
  font-size: 14px;
  color: var(--text-1);
  line-height: 1.45;
  margin-top: 3px;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  word-wrap: break-word;
}

.comment-tr-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 5px;
  padding: 3px 9px;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--text-3);
  font: inherit;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .005em;
  cursor: pointer;
  transition: color .15s ease, border-color .15s ease, background .15s ease;
}
.comment-tr-btn:hover {
  color: var(--accent);
  border-color: color-mix(in srgb, var(--accent) 60%, transparent);
  background: color-mix(in srgb, var(--accent) 8%, transparent);
}
.comment-tr-btn svg { flex-shrink: 0; }
.comment-tr-btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.comment-tr-footer {
  display: inline-block;
  font-size: 11.5px;
  color: var(--text-3);
  margin-top: 5px;
  cursor: pointer;
  user-select: none;
  letter-spacing: .005em;
  transition: color .15s ease;
  font-family: var(--font);
}
.comment-tr-footer:hover {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
}
/* Loading state — disabled-looking, non-interactive while the
   provider is fetching. */
.comment-tr-footer.comment-tr-loading {
  cursor: default;
  opacity: .7;
  font-style: italic;
}
.comment-tr-footer.comment-tr-loading:hover {
  color: var(--text-3);
  text-decoration: none;
}

/* ═══════════════════════════════════════════════════════════════
   CALL SYSTEM (P59) — buttons, conviction strip, performance
   card, and reputation dashboard.
   ═══════════════════════════════════════════════════════════════ */

/* ── Call action button in post action row ── */
.post-action-call {
  position: relative;
}
.post-action-call-cta {
  color: var(--accent);
  border: 1px solid rgba(0,196,114,.20);
  background: rgba(0,196,114,.06);
  border-radius: 6px;
  padding-left: 8px;
  padding-right: 8px;
  animation: callCtaPulse 2.4s ease-in-out infinite;
}
@keyframes callCtaPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(0,196,114,0); }
  50%      { box-shadow: 0 0 10px -2px rgba(0,196,114,.45); }
}
.post-action-call-cta:hover {
  animation: none;
  background: rgba(0,196,114,.12);
  border-color: rgba(0,196,114,.40);
  color: var(--accent);
}
.post-action-call-up   { color: var(--accent) !important; }
.post-action-call-down { color: var(--red, #ef4444) !important; }
.post-action-call-up .post-action-count,
.post-action-call-down .post-action-count {
  letter-spacing: -.005em;
}

/* ─── P65.105 — Settled-call action-row treatment ────────────────
   Once the call has settled, the percentage stops following live
   price and freezes on the locked-in ROI. Visual cue: a small lock
   icon appears next to the number AND the icon-svg is slightly
   desaturated, so the user immediately reads it as "this is the
   final result, not a live ticker." Color tone (green/red) stays
   to indicate winner/loser at a glance. */
.post-action-call.post-action-call-settled {
  position: relative;
}
.post-action-call.post-action-call-settled > svg:first-child {
  opacity: 0.7;
}
.post-action-call-lock {
  margin-left: 3px;
  opacity: 0.85;
  flex-shrink: 0;
}
.post-action-call.post-action-call-settled.post-action-call-up   .post-action-call-lock { color: var(--accent); }
.post-action-call.post-action-call-settled.post-action-call-down .post-action-call-lock { color: var(--red, #ef4444); }

/* ═══════════════════════════════════════════════════════════════════
   P65.109 — Post promotion (pin-to-Global with stars)
   • Action-row promote button (own posts only)
   • PROMOTED pill in the header badge row
   • Promoted post outer ring glow
   • Modal tier chips (1min / 2min / 3min)
   ═══════════════════════════════════════════════════════════════════ */

/* Action-row "boost" button — gold-tinted to distinguish from upvote
   (which is green). Double-chevron icon reads as "lift / promote". */
.post-action-promote {
  color: var(--text-3);
  transition: color 0.15s ease, transform 0.18s cubic-bezier(0.22, 1, 0.36, 1);
}
.post-action-promote:hover {
  color: #f7d979;
  transform: translateY(-1px);
}
.post-action-promote:active {
  transform: translateY(0) scale(0.94);
}
.post-action-promote svg {
  transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}
.post-action-promote:hover svg {
  transform: translateY(-2px);
  filter: drop-shadow(0 0 4px rgba(247, 217, 121, 0.55));
}
.post-action-promote-active {
  color: #f7d979 !important;
  cursor: default;
}
.post-action-promote-active svg {
  animation: promoteBtnPulse 1.6s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
@keyframes promoteBtnPulse {
  0%, 100% { transform: translateY(0);    filter: drop-shadow(0 0 0 rgba(247, 217, 121, 0)); }
  50%      { transform: translateY(-2px); filter: drop-shadow(0 0 5px rgba(247, 217, 121, 0.8)); }
}
/* P65.112 — Queued state. Owner has paid for a slot but it isn't
   live yet (someone else's promotion is currently active). Subtle
   amber tint + clock icon + slow rotation animation so the user
   sees their pending slot at a glance. */
.post-action-promote-queued {
  color: #c8a456 !important;
  cursor: default;
}
.post-action-promote-queued svg {
  opacity: 0.85;
  animation: promoteBtnQueueSpin 6s linear infinite;
}
@keyframes promoteBtnQueueSpin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
.post-action-promote-count {
  font-family: var(--mono);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: -0.005em;
}

/* PROMOTED pill in the post header — sits next to AGING/HOT/TRENDING.
   Distinct gold gradient + animated dot so it can't be mistaken
   for an organic-ranking signal. */
.vel-pill.vel-promoted {
  background: linear-gradient(135deg,
    rgba(255, 243, 173, 0.16) 0%,
    rgba(247, 217, 121, 0.22) 50%,
    rgba(212, 167, 44, 0.16) 100%);
  border: 1px solid rgba(247, 217, 121, 0.45);
  color: #f7d979;
  letter-spacing: 0.06em;
  font-weight: 800;
  box-shadow:
    0 0 12px rgba(247, 217, 121, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
  animation: velPromotedShimmer 3.4s linear infinite;
}
.vel-pill.vel-promoted .vel-icon {
  animation: velPromotedIconPulse 1.6s ease-in-out infinite;
}
.vel-promoted-secs {
  margin-left: 4px;
  font-family: var(--mono);
  font-weight: 600;
  font-size: 10px;
  opacity: 0.85;
  letter-spacing: 0;
  text-transform: none;
}
@keyframes velPromotedShimmer {
  0%   { background-position: 0% 50%; }
  100% { background-position: 200% 50%; }
}
@keyframes velPromotedIconPulse {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-1.5px); }
}

/* Outer-ring glow on promoted post cards. Subtle — the user should
   feel "this post is paying for the slot" without it screaming. */
.post.post-is-promoted {
  position: relative;
  border-color: rgba(247, 217, 121, 0.22);
  box-shadow:
    0 0 0 1px rgba(247, 217, 121, 0.18),
    0 8px 24px -10px rgba(247, 217, 121, 0.18);
}
.post.post-is-promoted::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(135deg,
    rgba(247, 217, 121, 0.10) 0%,
    transparent 30%,
    transparent 70%,
    rgba(247, 217, 121, 0.10) 100%);
  opacity: 0.7;
  z-index: 0;
}

/* Modal tier picker — three side-by-side chips. */
.modal.modal-promotePost .modal-body {
  min-height: 460px;
  display: flex;
  flex-direction: column;
}
.modal.modal-promotePost {
  max-width: 560px;
  width: 560px;
}
@media (max-width: 600px) {
  .modal.modal-promotePost { width: 100%; max-width: 100%; }
}

.promote-tiers {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.promote-tier {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 14px 8px;
  border-radius: 12px;
  background: var(--bg-1);
  border: 1px solid var(--border);
  cursor: pointer;
  transition: background 0.14s ease, border-color 0.14s ease,
              transform 0.16s cubic-bezier(0.16, 1, 0.30, 1);
  font-family: inherit;
  text-align: center;
  position: relative;
}
.promote-tier:hover:not(:disabled) {
  background: rgba(247, 217, 121, 0.06);
  border-color: rgba(247, 217, 121, 0.32);
  transform: translateY(-1px);
}
.promote-tier:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.promote-tier.is-active {
  background: linear-gradient(180deg,
    rgba(247, 217, 121, 0.20),
    rgba(247, 217, 121, 0.06));
  border-color: rgba(247, 217, 121, 0.65);
  box-shadow:
    0 0 0 1px rgba(247, 217, 121, 0.22),
    0 4px 16px rgba(247, 217, 121, 0.10);
}
.promote-tier-time {
  font-size: 13px;
  font-weight: 800;
  color: var(--text-0);
  letter-spacing: -0.01em;
}
.promote-tier.is-active .promote-tier-time {
  color: #f7d979;
}
.promote-tier-price {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-family: var(--mono);
  font-weight: 700;
  font-size: 13px;
  color: var(--text-1);
}
.promote-tier.is-active .promote-tier-price {
  color: #fff3ad;
}
.promote-tier-disc {
  font-size: 9px;
  letter-spacing: 0.04em;
  color: var(--text-4);
  text-transform: uppercase;
}
.promote-tier.is-active .promote-tier-disc {
  color: rgba(247, 217, 121, 0.7);
}

/* Summary block at the bottom of the promote modal. */
.promote-summary {
  margin-top: 18px;
  padding: 14px 16px;
  background: rgba(247, 217, 121, 0.04);
  border: 1px solid rgba(247, 217, 121, 0.18);
  border-radius: 12px;
}
.promote-summary-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
  font-size: 13px;
}
.promote-summary-row span {
  color: var(--text-4);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 700;
}
.promote-summary-row strong {
  color: var(--text-0);
  font-family: var(--mono);
  font-weight: 700;
}
.promote-summary-foot {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid rgba(247, 217, 121, 0.14);
  font-size: 11px;
  color: var(--text-4);
  line-height: 1.45;
}

/* P65.112 — Queue row in the summary. When someone is already
   promoting and the user would have to wait, this row shows the
   estimated wait + how many slots ahead. Distinct visual treatment
   so the user notices it before paying. */
.promote-summary-row.promote-summary-row-queue {
  margin-top: 4px;
  padding-top: 6px;
  border-top: 1px dashed rgba(247, 217, 121, 0.16);
}
.promote-summary-row.promote-summary-row-queue strong {
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 700;
  color: #fff3ad;
}

/* Promote modal icon variant — same shape as the topup icon but
   with the boost SVG inside. */
.topup-icon.promote-icon {
  /* inherits .topup-icon — gold square 36px */
}

/* ═══════════════════════════════════════════════════════════════════
   P65.131 — Wallet chain-balance breakdown
   ─────────────────────────────────────────────────────────────────
   Per-chain rows underneath the wallet tier card showing the user
   how their total balance is distributed across Ethereum / BSC /
   Polygon / Arbitrum / Base / Optimism / Avalanche / Solana. Drives
   the "your tier comes from these holdings" transparency. Each row
   is a 3-col grid: chain label · native amount · USD value.
   ═══════════════════════════════════════════════════════════════════ */
.wallet-chain-breakdown {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px dashed rgba(255, 255, 255, 0.06);
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.wcb-row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 10px;
  align-items: center;
  padding: 4px 6px;
  border-radius: 4px;
  font-size: 10.5px;
  font-family: var(--mono);
  transition: background 0.12s ease;
}
.wcb-row:hover {
  background: rgba(255, 255, 255, 0.03);
}
.wcb-chain {
  color: var(--text-2);
  font-weight: 600;
  font-family: inherit;
  letter-spacing: 0.02em;
}
.wcb-native {
  color: var(--text-4);
  font-size: 10px;
}
.wcb-usd {
  color: var(--text-1);
  font-weight: 700;
  min-width: 56px;
  text-align: right;
}

/* ═══════════════════════════════════════════════════════════════════
   P65.132 — Active sessions list (Settings → Security)
   ─────────────────────────────────────────────────────────────────
   One row per logged-in device with location + last-active time +
   a "Sign out" button (hidden on the current device row, replaced
   by an "Active" pill). Same visual language as the rest of the
   Settings page (subtle cards, mono numbers, soft separators).
   ═══════════════════════════════════════════════════════════════════ */
.sessions-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.session-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 12px 14px;
  background: var(--bg-1);
  border: 1px solid var(--border);
  border-radius: 10px;
  transition: border-color 0.12s ease, background 0.12s ease;
}
.session-row:hover {
  background: var(--bg-2);
}
.session-row-current {
  background: linear-gradient(180deg,
    rgba(0, 196, 114, 0.05) 0%,
    rgba(0, 196, 114, 0.015) 100%);
  border-color: rgba(0, 196, 114, 0.30);
}
.session-icon {
  display: grid;
  place-items: center;
  width: 36px; height: 36px;
  border-radius: 8px;
  background: var(--bg-3);
  color: var(--text-3);
  flex-shrink: 0;
}
.session-row-current .session-icon {
  color: var(--accent);
  background: rgba(0, 196, 114, 0.10);
}
.session-meta {
  min-width: 0;
}
.session-label {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-0);
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.session-current-pill {
  display: inline-flex;
  align-items: center;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent);
  background: rgba(0, 196, 114, 0.12);
  border: 1px solid rgba(0, 196, 114, 0.30);
  border-radius: 4px;
  padding: 2px 6px;
}
.session-sub {
  font-size: 11px;
  color: var(--text-4);
  margin-top: 2px;
  line-height: 1.4;
}

/* ═══════════════════════════════════════════════════════════════════
   P65.135 — Security Score card (redesigned)
   ─────────────────────────────────────────────────────────────────
   Big radial-progress ring + headline tier label + sub-message,
   then a divider and a 2×2 grid of factor rows. Each factor shows
   its weight (+points) and a one-click CTA when missing. Color
   adapts to the score via the `--sec-color` CSS variable set on
   the root element from JS.
   ═══════════════════════════════════════════════════════════════════ */
.sec-score-card {
  position: relative;
  margin-bottom: 16px;
  padding: 20px 22px;
  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--sec-color) 6%, transparent) 0%,
      transparent 60%),
    var(--bg-2);
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
}
/* Soft halo behind the card edge — picks up the score color. */
.sec-score-glow {
  position: absolute;
  top: -50%; right: -10%;
  width: 60%; height: 200%;
  background: radial-gradient(circle, color-mix(in srgb, var(--sec-color) 12%, transparent) 0%, transparent 60%);
  pointer-events: none;
  filter: blur(28px);
  opacity: 0.6;
}

.sec-score-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
  position: relative;
}
.sec-score-head-left {
  flex: 1;
  min-width: 200px;
}
.sec-score-eyebrow {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--text-4);
  margin-bottom: 4px;
}
.sec-score-headline {
  font-size: 24px;
  font-weight: 900;
  letter-spacing: -0.015em;
  color: var(--sec-color);
  line-height: 1.1;
  margin-bottom: 6px;
}
.sec-score-sub {
  font-size: 12.5px;
  color: var(--text-2);
  line-height: 1.5;
  max-width: 360px;
}

/* Radial-progress ring — 104px outer, ring stroke 6px. The center
   text overlays via absolute positioning so the SVG can scale
   without forcing a fixed font-size on the digits. */
.sec-score-ring-wrap {
  position: relative;
  width: 104px;
  height: 104px;
  flex-shrink: 0;
}
.sec-score-ring {
  display: block;
}
.sec-score-ring-progress {
  transition: stroke-dashoffset 1.0s cubic-bezier(0.22, 1, 0.36, 1);
  filter: drop-shadow(0 0 6px color-mix(in srgb, var(--sec-color) 32%, transparent));
}
.sec-score-ring-center {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  pointer-events: none;
}
.sec-score-num {
  font-family: var(--mono);
  font-weight: 900;
  font-size: 28px;
  line-height: 1;
  letter-spacing: -0.02em;
}
.sec-score-denom {
  font-size: 9.5px;
  font-weight: 700;
  color: var(--text-4);
  letter-spacing: 0.10em;
  margin-top: 2px;
}

.sec-score-divider {
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.06) 50%,
    transparent 100%);
  margin: 18px 0 14px;
}

/* Factor grid — 2 columns by default, collapses to 1 on narrow. */
.sec-factor-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  position: relative;
}
@media (max-width: 580px) {
  .sec-factor-grid { grid-template-columns: 1fr; }
}

.sec-factor {
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: var(--bg-1);
  border: 1px solid var(--border);
  border-radius: 10px;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.sec-factor:hover {
  background: var(--bg-3);
}
.sec-factor-on {
  border-color: rgba(0, 196, 114, 0.22);
}
.sec-factor-on:hover {
  border-color: rgba(0, 196, 114, 0.40);
}
.sec-factor-off {
  border-color: rgba(255, 255, 255, 0.05);
  opacity: 0.85;
}

.sec-factor-icon {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  flex-shrink: 0;
  transition: transform 0.18s cubic-bezier(0.22, 1, 0.36, 1);
}
.sec-factor-on .sec-factor-icon {
  background: var(--accent);
  color: #0a0e0c;
}
.sec-factor-off .sec-factor-icon {
  background: rgba(255, 255, 255, 0.04);
  color: var(--text-4);
}
.sec-factor:hover .sec-factor-icon {
  transform: scale(1.08);
}
.sec-factor-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-1);
  letter-spacing: -0.005em;
}
.sec-factor-off .sec-factor-label {
  color: var(--text-3);
}
.sec-factor-weight {
  font-family: var(--mono);
  font-weight: 700;
  font-size: 10.5px;
  color: var(--accent);
  background: rgba(0, 196, 114, 0.10);
  border: 1px solid rgba(0, 196, 114, 0.20);
  padding: 2px 7px;
  border-radius: 6px;
  letter-spacing: -0.01em;
}
.sec-factor-off .sec-factor-weight {
  color: var(--text-4);
  background: rgba(255, 255, 255, 0.03);
  border-color: rgba(255, 255, 255, 0.08);
}
.sec-factor-cta {
  font-size: 10.5px;
  font-weight: 700;
  color: var(--accent);
  background: rgba(0, 196, 114, 0.10);
  border: 1px solid rgba(0, 196, 114, 0.30);
  padding: 4px 10px;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.12s ease, border-color 0.12s ease;
  letter-spacing: 0.01em;
}
.sec-factor-cta:hover {
  background: rgba(0, 196, 114, 0.18);
  border-color: rgba(0, 196, 114, 0.50);
}

/* ═══════════════════════════════════════════════════════════════════
   P65.145 — Caller-rep card (lifetime score, redesigned to match
   the Security Score card)
   ─────────────────────────────────────────────────────────────────
   Big radial-progress ring on the right showing % to next tier.
   Tier eyebrow, hero score, and ETA subline on the left, with a
   pending-today pill and an optional streak chip. Below: a 4-stat
   strip (Today / 30d / Avg per day / Streak) and the tier ladder.
   ═══════════════════════════════════════════════════════════════════ */
.caller-rep-card {
  position: relative;
  margin-bottom: 16px;
  padding: 20px 22px;
  background:
    linear-gradient(180deg, rgba(0, 196, 114, 0.06) 0%, transparent 60%),
    var(--bg-2);
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
}
.caller-rep-card.is-gold {
  background:
    linear-gradient(180deg, rgba(247, 217, 121, 0.10) 0%, transparent 60%),
    var(--bg-2);
  border-color: rgba(247, 217, 121, 0.28);
  box-shadow: 0 8px 32px rgba(247, 217, 121, 0.05);
}
.caller-rep-glow {
  position: absolute;
  top: -50%; right: -10%;
  width: 60%; height: 200%;
  background: radial-gradient(circle, rgba(0, 196, 114, 0.10) 0%, transparent 60%);
  pointer-events: none;
  filter: blur(28px);
  opacity: 0.6;
}
.caller-rep-card.is-gold .caller-rep-glow {
  background: radial-gradient(circle, rgba(247, 217, 121, 0.16) 0%, transparent 60%);
}

.caller-rep-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
  position: relative;
}
.caller-rep-head-left {
  flex: 1;
  min-width: 200px;
}
.caller-rep-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}
.caller-rep-eyebrow-mark {
  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.10);
  font-size: 13px;
  line-height: 1;
}
.caller-rep-card.is-gold .caller-rep-eyebrow-mark {
  background: radial-gradient(120% 120% at 30% 20%, #fff3ad, #d4a72c 75%);
  border-color: rgba(247, 217, 121, 0.5);
  color: #1a1304;
}
.caller-rep-eyebrow-text {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--text-3);
}
.caller-rep-card.is-gold .caller-rep-eyebrow-text {
  color: #f7d979;
}

.caller-rep-headline {
  font-family: var(--mono);
  font-size: 42px;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--text-0);
  line-height: 1.0;
  margin-bottom: 6px;
}
.caller-rep-headline-units {
  font-family: var(--sans, inherit);
  font-size: 13px;
  color: var(--text-4);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-left: 2px;
}
.caller-rep-card.is-gold .caller-rep-headline {
  background: linear-gradient(180deg, #fff3ad, #f7d979 60%, #d4a72c);
  -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-sub {
  font-size: 12.5px;
  color: var(--text-2);
  line-height: 1.5;
  max-width: 320px;
}
.caller-rep-sub b {
  color: var(--text-0);
  font-weight: 700;
}
.caller-rep-sub .caller-rep-next-label {
  color: var(--accent);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Pending-today pill — unchanged from prior design. */
@keyframes caller-rep-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);
  animation: caller-rep-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); }

/* Streak chip in the eyebrow. */
.caller-rep-streak {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 10.5px;
  font-family: var(--mono);
  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; }

/* Radial-progress ring — same dimensions as Security Score. */
.caller-rep-ring-wrap {
  position: relative;
  width: 104px;
  height: 104px;
  flex-shrink: 0;
}
.caller-rep-ring { display: block; }
.caller-rep-ring-progress {
  transition: stroke-dashoffset 1.0s cubic-bezier(0.22, 1, 0.36, 1);
  filter: drop-shadow(0 0 6px rgba(0, 196, 114, 0.32));
}
.caller-rep-card.is-gold .caller-rep-ring-progress {
  filter: drop-shadow(0 0 8px rgba(247, 217, 121, 0.40));
}
.caller-rep-ring-pending {
  animation: caller-rep-ring-pending-pulse 2s ease-in-out infinite;
}
@keyframes caller-rep-ring-pending-pulse {
  0%, 100% { opacity: 0.55; }
  50%      { opacity: 0.95; }
}
.caller-rep-ring-center {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
.caller-rep-ring-num {
  font-family: var(--mono);
  font-weight: 800;
  font-size: 26px;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--text-0);
}
.caller-rep-ring-pct {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-3);
  margin-left: 1px;
}
.caller-rep-ring-denom {
  font-size: 8.5px;
  font-weight: 700;
  color: var(--text-4);
  letter-spacing: 0.10em;
  margin-top: 4px;
  text-transform: uppercase;
}

.caller-rep-divider {
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.06) 50%,
    transparent 100%);
  margin: 18px 0 14px;
}

/* P65.147 — every rule below is scoped under `.caller-rep-card` so
   the older pages.css rules with the same class names (the V2 design
   used `.caller-rep-stats` / `.caller-rep-ladder` / `.caller-rep-rung`
   for the empty-state panel) can't override them. pages.css loads
   AFTER components.css, so unscoped styles here lost specificity wars
   and the user kept seeing the old thin-bar ladder + plain text stats
   instead of the boxed strip + pill rungs this design intends. */

/* 4-stat strip below the divider. */
.caller-rep-card .caller-rep-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-bottom: 14px;
  /* Reset legacy V2 properties from pages.css so this strip can stand
     on its own without the dashed top-border or top-padding. */
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}
.caller-rep-card .caller-rep-stat {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 10px 12px;
  background: var(--bg-1);
  border: 1px solid var(--border);
  border-radius: 10px;
}
.caller-rep-card .caller-rep-stat + .caller-rep-stat {
  /* Drop legacy left-divider — each stat is now a self-contained box. */
  border-left: 1px solid var(--border);
}
.caller-rep-card .caller-rep-stat-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-4);
}
.caller-rep-card .caller-rep-stat-value {
  font-family: var(--mono);
  font-size: 16px;
  font-weight: 700;
  color: var(--text-1);
  letter-spacing: -0.01em;
}
.caller-rep-card .caller-rep-stat-value.is-positive { color: var(--accent); }

/* Tier ladder — pill rungs with the tier name visible. */
.caller-rep-card .caller-rep-ladder {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
  /* Reset legacy ladder layout (was: flex with thin bars + absolute labels). */
  margin-top: 0;
  padding-top: 0;
  padding-bottom: 0;
  border-top: none;
  align-items: stretch;
}
.caller-rep-card .caller-rep-rung {
  /* Reset the legacy `.caller-rep-rung` thin-bar styling so we render
     a labeled pill at full height. */
  flex: initial;
  height: auto;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-align: center;
  padding: 6px 4px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid rgba(255, 255, 255, 0.04);
  color: var(--text-4);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  position: static;
  box-shadow: none;
  display: flex;
  align-items: center;
  justify-content: center;
}
.caller-rep-card .caller-rep-rung-label {
  /* Bring back the rung label from absolute-positioned to in-flow. */
  position: static;
  transform: none;
  font-size: 9px;
  letter-spacing: 0.06em;
  color: inherit;
  font-weight: 700;
}
.caller-rep-card .caller-rep-rung.is-cleared {
  background: rgba(0, 196, 114, 0.08);
  border-color: rgba(0, 196, 114, 0.22);
  color: var(--text-2);
}
.caller-rep-card .caller-rep-rung.is-current {
  background: rgba(0, 196, 114, 0.16);
  border-color: rgba(0, 196, 114, 0.45);
  color: var(--accent);
  box-shadow: 0 0 0 1px rgba(0, 196, 114, 0.25),
              0 0 18px rgba(0, 196, 114, 0.12);
}
.caller-rep-card .caller-rep-rung.is-cleared .caller-rep-rung-label { color: var(--text-2); }
.caller-rep-card .caller-rep-rung.is-current .caller-rep-rung-label { color: var(--accent); }
.caller-rep-card.is-gold .caller-rep-rung.is-cleared {
  background: rgba(247, 217, 121, 0.10);
  border-color: rgba(247, 217, 121, 0.30);
  color: #f7d979;
}
.caller-rep-card.is-gold .caller-rep-rung.is-current {
  background: rgba(247, 217, 121, 0.20);
  border-color: rgba(247, 217, 121, 0.55);
  color: #fff3ad;
  box-shadow: 0 0 0 1px rgba(247, 217, 121, 0.28),
              0 0 18px rgba(247, 217, 121, 0.18);
}
.caller-rep-card.is-gold .caller-rep-rung.is-cleared .caller-rep-rung-label,
.caller-rep-card.is-gold .caller-rep-rung.is-current .caller-rep-rung-label {
  color: inherit;
}
/* Cancel the legacy gold gradient bar fill on the new pill rungs. */
.caller-rep-card .caller-rep-rung[data-tier="gold"].is-cleared,
.caller-rep-card .caller-rep-rung[data-tier="legendary"].is-cleared {
  background: rgba(247, 217, 121, 0.10);
  box-shadow: none;
}

@media (max-width: 580px) {
  .caller-rep-card .caller-rep-stats { grid-template-columns: repeat(2, 1fr); }
  .caller-rep-card .caller-rep-ladder {
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: auto;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   P65.115 — Compact mutual-followers line (legacy, kept for fallback)
   ═══════════════════════════════════════════════════════════════════ */
.profile-mutual-line {
  font-size: 10.5px;
  color: var(--text-4);
  line-height: 1.4;
  margin-top: 4px;
  padding: 0;
  letter-spacing: 0.005em;
}
.profile-mutual-line strong {
  font-weight: 600;
  color: var(--text-2);
}

/* ═══════════════════════════════════════════════════════════════════
   P65.116 — Mutual-followers avatar stack
   ─────────────────────────────────────────────────────────────────
   Up to 3 small overlapping avatars + a "+N" badge on overflow.
   Sits in the top-right of the bio row on other users' profiles.
   Click → opens the followers list. Replaces the wordy text line.
   ═══════════════════════════════════════════════════════════════════ */
.profile-mutual-stack {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  cursor: pointer;
  padding: 4px 6px 4px 10px;
  border-radius: 10px;
  flex-shrink: 0;
  transition: background 0.15s ease;
}
.profile-mutual-stack:hover {
  background: rgba(255, 255, 255, 0.03);
}
.profile-mutual-stack-inner {
  display: inline-flex;
  align-items: center;
}
.profile-mutual-avatar {
  display: inline-block;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 2px solid var(--bg-2);
  margin-left: -8px;
  position: relative;
  overflow: hidden;
  background: var(--bg-3);
  flex-shrink: 0;
  transition: transform 0.15s ease;
}
.profile-mutual-avatar:first-child {
  margin-left: 0;
}
.profile-mutual-stack:hover .profile-mutual-avatar {
  transform: translateX(-2px);
}
.profile-mutual-stack:hover .profile-mutual-avatar:first-child {
  transform: translateX(0);
}
.profile-mutual-avatar .avatar {
  width: 100%;
  height: 100%;
  border-radius: 0;
  border: none;
  font-size: 9px;
}
.profile-mutual-extra {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 24px;
  min-width: 24px;
  padding: 0 6px;
  margin-left: -8px;
  border-radius: 12px;
  border: 2px solid var(--bg-2);
  background: var(--bg-3);
  color: var(--text-2);
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 700;
  flex-shrink: 0;
}
.profile-mutual-stack-label {
  font-size: 9.5px;
  color: var(--text-4);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  font-weight: 600;
}
.profile-mutual-stack:hover .profile-mutual-stack-label {
  color: var(--text-2);
}

/* ═══════════════════════════════════════════════════════════════════
   P65.114 — Stars economy + Promotion history sections in Analytics
   ─────────────────────────────────────────────────────────────────
   Layout: grid of stat cards + donut chart + per-promo table. Same
   visual language as the existing analytics-section blocks (subtle
   cards, mono numbers, eyebrow-style labels) so the new sections
   feel native to the page.
   ═══════════════════════════════════════════════════════════════════ */

.econ-stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 10px;
  margin: 12px 0 16px;
}
.econ-stat {
  padding: 12px 14px;
  background: var(--bg-1);
  border: 1px solid var(--border);
  border-radius: 10px;
}
.econ-stat-label {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--text-4);
  text-transform: uppercase;
  margin-bottom: 6px;
}
.econ-stat-val {
  font-family: var(--mono);
  font-weight: 800;
  font-size: 18px;
  color: var(--text-0);
  letter-spacing: -0.01em;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.econ-stat-val-gold   { color: #f7d979; }
.econ-stat-val-accent { color: var(--accent); }
.econ-stat-sub {
  font-size: 10px;
  color: var(--text-4);
  margin-top: 4px;
  letter-spacing: 0.02em;
}

.econ-donut-wrap {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 24px;
  padding: 14px;
  background: var(--bg-1);
  border: 1px solid var(--border);
  border-radius: 12px;
  margin-top: 8px;
}
@media (max-width: 540px) {
  .econ-donut-wrap { grid-template-columns: 1fr; justify-items: center; gap: 12px; }
}
.econ-donut { display: flex; align-items: center; justify-content: center; }
.econ-legend { width: 100%; }
.econ-legend-head {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--text-4);
  text-transform: uppercase;
  margin-bottom: 8px;
}
.econ-legend-row {
  display: grid;
  grid-template-columns: 12px 1fr auto auto;
  align-items: center;
  gap: 10px;
  padding: 6px 0;
  font-size: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.04);
}
.econ-legend-row:first-of-type { border-top: none; }
.econ-legend-dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}
.econ-legend-label { color: var(--text-1); }
.econ-legend-val   { font-family: var(--mono); font-weight: 700; color: var(--text-0); }
.econ-legend-pct   { font-family: var(--mono); color: var(--text-4); font-size: 11px; min-width: 32px; text-align: right; }

.econ-empty {
  padding: 24px;
  text-align: center;
  font-size: 12px;
  color: var(--text-4);
  background: var(--bg-1);
  border: 1px dashed var(--border);
  border-radius: 10px;
  margin-top: 8px;
}

/* Promotion history table — denser than the recent-posts table to
   fit 9 columns. Row hover highlights gold to match the promote
   feature's visual language. */
.promo-history-table {
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--bg-1);
  overflow: hidden;
  margin-top: 8px;
}
.promo-history-head,
.promo-history-row {
  display: grid;
  grid-template-columns: 1.6fr 0.8fr 0.7fr 0.5fr 0.5fr 0.5fr 0.5fr 0.6fr 0.7fr;
  gap: 8px;
  padding: 9px 12px;
  font-size: 11px;
  align-items: center;
}
.promo-history-head {
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-4);
  font-size: 9.5px;
  background: rgba(255, 255, 255, 0.02);
  border-bottom: 1px solid var(--border);
}
.promo-history-row {
  border-top: 1px solid rgba(255, 255, 255, 0.03);
  cursor: pointer;
  transition: background 0.12s ease;
}
.promo-history-row:hover {
  background: rgba(247, 217, 121, 0.04);
}
.promo-history-row:first-of-type { border-top: none; }
.phc-post {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--text-1);
  /* P65.120 — same grid-1fr-min-width fix as the analytics table. */
  min-width: 0;
}
.phc-num {
  font-family: var(--mono);
  text-align: right;
  color: var(--text-2);
}
.phc-num-gold   { color: #f7d979; }
.phc-num-strong { color: var(--text-0); font-weight: 700; }
.phc-status {
  text-align: center;
  font-weight: 700;
  font-size: 9.5px;
  letter-spacing: 0.06em;
  padding: 3px 6px;
  border-radius: 6px;
  white-space: nowrap;
}
.phc-status-live   { background: rgba(247, 217, 121, 0.15); color: #f7d979; }
.phc-status-queued { background: rgba(255, 255, 255, 0.05); color: var(--text-3); }
.phc-status-done   { background: rgba(0, 196, 114, 0.10);   color: var(--accent); }

.promo-history-foot {
  margin-top: 8px;
  padding: 0 4px;
  font-size: 10.5px;
  color: var(--text-4);
  line-height: 1.45;
}

@media (max-width: 720px) {
  /* Collapse to 4 cols + ellipsis post on narrow viewports */
  .promo-history-head,
  .promo-history-row {
    grid-template-columns: 1.4fr 0.7fr 0.6fr 0.6fr;
  }
  .promo-history-head > :nth-child(n+5),
  .promo-history-row  > :nth-child(n+5) {
    display: none;
  }
}

/* ─── P65.110 — Insufficient-balance CTA + topup↔promote jump ────
   When the user hits Promote without enough stars, we replace the
   plain error text with an inline CTA that jumps directly to the
   topup modal (same modal frame, just swapped content). After the
   topup completes, the back link returns them here automatically.
   This keeps the user inside one continuous flow instead of forcing
   them to open / close / re-find the promote button. */
.promote-insufficient {
  margin-top: 12px;
  padding: 10px 14px;
  border-radius: 10px;
  background: rgba(239, 68, 68, 0.06);
  border: 1px solid rgba(239, 68, 68, 0.22);
}
.promote-insufficient-msg {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: #fca5a5;
}
.promote-insufficient-msg strong {
  color: #fff;
  font-family: var(--mono);
  font-weight: 700;
}

/* "Top up stars" footer button — gold gradient to match the topup
   modal it links to. SVG icon (plus) sits before the label. */
.btn.promote-topup-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: linear-gradient(135deg,
    #fff3ad 0%,
    #f7d979 50%,
    #d4a72c 100%) !important;
  color: #2a1a00 !important;
  border: none !important;
  font-weight: 800;
  letter-spacing: -0.005em;
  box-shadow:
    0 4px 14px rgba(247, 217, 121, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.45);
  transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease;
}
.btn.promote-topup-cta:hover {
  transform: translateY(-1px);
  filter: brightness(1.05);
  box-shadow:
    0 6px 18px rgba(247, 217, 121, 0.36),
    inset 0 1px 0 rgba(255, 255, 255, 0.55);
}
.btn.promote-topup-cta:active {
  transform: translateY(0) scale(0.98);
}
.btn.promote-topup-cta svg {
  flex-shrink: 0;
}

/* "← Back to promote" link variant inside the topup modal header.
   Same styling as `.topup-mode-link` but with a left-pointing chevron
   feel via reduced underline + slightly muted color, so it reads as
   a "go back" navigation rather than a "switch mode" toggle. */
.topup-mode-link.topup-mode-link-back {
  text-decoration-color: rgba(247, 217, 121, 0.28);
  font-weight: 700;
}
.topup-mode-link.topup-mode-link-back:hover {
  text-decoration-color: rgba(247, 217, 121, 0.85);
  color: #fff3ad;
}

/* ── Conviction strip above post title ── */
.conviction-strip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 10px 5px 9px;
  margin: 0 0 8px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 500;
  background: var(--bg-3);
  border: 1px solid var(--border);
  color: var(--text-2);
  letter-spacing: .005em;
  font-family: var(--font);
  transition: border-color .15s ease, background .15s ease;
}
.conviction-strip strong {
  font-family: var(--mono);
  font-weight: 700;
  color: var(--text-0);
}
.conviction-ticker {
  font-family: var(--mono);
  font-weight: 700;
  color: var(--text-1);
  letter-spacing: .01em;
}
.conviction-sep { margin: 0 5px; color: var(--text-4); }
.conviction-roi { font-family: var(--mono); font-weight: 700; }
.conviction-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--text-3);
  flex-shrink: 0;
  box-shadow: 0 0 0 0 currentColor;
  animation: convictionDotPulse 2.5s ease-in-out infinite;
}
@keyframes convictionDotPulse {
  0%, 100% { box-shadow: 0 0 0 0 currentColor; opacity: .9; }
  50%      { box-shadow: 0 0 0 4px transparent; opacity: 1; }
}
.conviction-positive {
  background: rgba(0,196,114,.05);
  border-color: rgba(0,196,114,.22);
}
.conviction-positive .conviction-dot { background: var(--accent); color: rgba(0,196,114,.5); }
.conviction-positive .conviction-roi { color: var(--accent); }
.conviction-negative {
  background: rgba(196,64,64,.05);
  border-color: rgba(196,64,64,.22);
}
.conviction-negative .conviction-dot { background: var(--red, #ef4444); color: rgba(196,64,64,.5); }
.conviction-negative .conviction-roi { color: var(--red, #ef4444); }
.conviction-neutral .conviction-dot { background: var(--text-3); color: rgba(150,150,150,.4); }

/* ── Performance card on post detail ── */
.call-card {
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.call-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}
.call-card-token {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  min-width: 0;
}
.call-card-ticker {
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 700;
  color: var(--text-0);
  letter-spacing: .04em;
}
.call-card-status {
  font-family: var(--mono);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .12em;
  padding: 2px 7px;
  border-radius: 3px;
  text-transform: uppercase;
}
.call-card-speed {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--accent);
  font-weight: 600;
  background: rgba(0,196,114,.08);
  padding: 2px 6px;
  border-radius: 3px;
  letter-spacing: .02em;
}
.call-card-tagline {
  font-size: 9.5px;
  color: var(--text-4);
  text-transform: uppercase;
  letter-spacing: .08em;
  margin-top: 2px;
  flex-shrink: 0;
}
.call-card-row {
  display: grid;
  grid-template-columns: 1fr 1fr 1.6fr;
  gap: 1px;
  background: rgba(255,255,255,.04);
  border-radius: 6px;
  overflow: hidden;
}
.call-card-metric {
  background: var(--bg-3);
  padding: 10px 12px;
  font-family: var(--mono);
}
.call-card-metric-label {
  font-size: 8.5px;
  font-weight: 600;
  color: var(--text-3);
  letter-spacing: .12em;
  text-transform: uppercase;
  margin-bottom: 4px;
}
.call-card-metric-val {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -.01em;
  font-variant-numeric: tabular-nums;
}
.call-card-metric-prices { min-width: 0; }
.call-card-metric-pricerow {
  font-size: 11.5px;
  color: var(--text-1);
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.call-card-price {
  font-variant-numeric: tabular-nums;
}
.call-card-arrow { color: var(--text-4); }

/* ── Status pill tones (shared with call rows) ── */
.call-status-gold {
  background: rgba(191,162,78,.14);
  color: var(--gold);
  border: 1px solid rgba(191,162,78,.30);
}
.call-status-green {
  background: rgba(0,196,114,.10);
  color: var(--accent);
  border: 1px solid rgba(0,196,114,.28);
}
.call-status-amber {
  background: rgba(196,125,42,.10);
  color: var(--orange, #C47D2A);
  border: 1px solid rgba(196,125,42,.28);
}
.call-status-red {
  background: rgba(196,64,64,.10);
  color: var(--red, #ef4444);
  border: 1px solid rgba(196,64,64,.28);
}
.call-status-neutral {
  background: var(--bg-3);
  color: var(--text-2);
  border: 1px solid var(--border);
}

/* ═══ REPUTATION DASHBOARD on profile calls tab ═══ */
.rep-dashboard {
  margin-bottom: 18px;
  padding: 18px;
  background: linear-gradient(180deg, var(--bg-2) 0%, var(--bg-1) 100%);
  border: 1px solid var(--border);
  border-radius: 12px;
}

.rep-hero {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 16px;
}
.rep-hero-left {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}
.rep-tier-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 14px;
  font-family: var(--mono);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .14em;
  width: fit-content;
}
.rep-tier-glyph {
  width: 5px; height: 5px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 0 0 currentColor;
  animation: repPulseDot 2.4s ease-in-out infinite;
}
@keyframes repPulseDot {
  0%, 100% { box-shadow: 0 0 0 0 currentColor; opacity: 1; }
  50%      { box-shadow: 0 0 0 4px transparent; opacity: .85; }
}
.rep-tier-gold {
  background: rgba(191,162,78,.14);
  color: var(--gold);
  border: 1px solid rgba(191,162,78,.32);
  text-shadow: 0 0 10px rgba(191,162,78,.3);
}
.rep-tier-green {
  background: rgba(0,196,114,.10);
  color: var(--accent);
  border: 1px solid rgba(0,196,114,.30);
}
.rep-tier-neutral {
  background: var(--bg-3);
  color: var(--text-1);
  border: 1px solid var(--border);
}
.rep-tier-muted {
  background: var(--bg-3);
  color: var(--text-3);
  border: 1px solid var(--border);
}
.rep-composite {
  display: flex;
  align-items: baseline;
  gap: 4px;
  font-family: var(--mono);
  line-height: 1;
}
.rep-composite-num {
  font-size: 38px;
  font-weight: 700;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
}
.rep-composite-suffix {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-3);
}
.rep-confidence {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--text-3);
  letter-spacing: .03em;
}
.rep-hero-right {
  flex-shrink: 0;
}
.rep-streak {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 9px;
  border-radius: 14px;
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 700;
  background: rgba(191,162,78,.10);
  border: 1px solid rgba(191,162,78,.30);
  color: var(--gold);
}
.rep-streak strong {
  font-weight: 700;
  font-size: 12px;
}

/* ── Stat strip ── */
.rep-stat-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: rgba(255,255,255,.04);
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 16px;
}
.rep-stat {
  background: var(--bg-1);
  padding: 12px 14px;
  font-family: var(--mono);
}
.rep-stat-label {
  font-size: 8.5px;
  font-weight: 600;
  color: var(--text-3);
  letter-spacing: .12em;
  text-transform: uppercase;
  margin-bottom: 5px;
}
.rep-stat-val {
  font-size: 18px;
  font-weight: 700;
  color: var(--text-0);
  letter-spacing: -.01em;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.rep-stat-unit {
  font-size: 12px;
  color: var(--text-3);
  font-weight: 600;
  margin-left: 1px;
}
.rep-stat-sub {
  font-size: 9.5px;
  color: var(--text-4);
  margin-top: 4px;
  letter-spacing: .01em;
}

/* ── Component bars ── */
.rep-components {
  background: var(--bg-3);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px 14px;
}
.rep-components-title {
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 600;
  color: var(--text-3);
  letter-spacing: .14em;
  text-transform: uppercase;
  margin-bottom: 10px;
}
.rep-comp-row {
  display: grid;
  grid-template-columns: 90px 1fr 84px;
  align-items: center;
  gap: 10px;
  padding: 5px 0;
  font-family: var(--mono);
  font-size: 11px;
}
.rep-comp-label {
  color: var(--text-1);
  font-weight: 500;
}

/* P61.9: Inline info glyph for tooltips. Sits next to any metric
   label in the calls dashboard. Native HTML title attribute fires
   the explanation on hover/focus — no JS popover needed.
   The "i" glyph is small, monospace, lives in a circle, and only
   gains color on hover so it doesn't compete with the metric value
   for attention. tabindex=0 makes it keyboard-focusable so the
   tooltip is accessible. */
.metric-info {
  /* P65.146 — was <span>, now a real <button>. Reset button defaults
     so the existing visual treatment is preserved. */
  appearance: none;
  -webkit-appearance: none;
  padding: 0;
  font: inherit;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  margin-left: 4px;
  border: 1px solid var(--text-4);
  border-radius: 50%;
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 700;
  font-style: italic;
  color: var(--text-4);
  background: transparent;
  cursor: pointer;
  vertical-align: middle;
  flex-shrink: 0;
  transition: color .12s ease, border-color .12s ease, background .12s ease, transform .12s ease;
}
.metric-info:hover,
.metric-info:focus {
  color: var(--accent);
  border-color: var(--accent);
  background: rgba(0, 196, 114, .12);
  outline: none;
  transform: scale(1.12);
}
.metric-info:active { transform: scale(0.95); }

/* P65.146 — Glossary popover. Anchored to the (i) icon by JS.
   Two variants — `.is-above` (pointing down at the icon) and
   `.is-below` (pointing up). The arrow is a CSS triangle pinned
   along the bottom/top edge. */
.call-gloss-pop {
  position: fixed;
  z-index: 10000;
  max-width: 320px;
  min-width: 180px;
  background: var(--bg-2);
  border: 1px solid rgba(0, 196, 114, 0.30);
  border-radius: 12px;
  padding: 12px 14px 12px 14px;
  font-size: 12px;
  line-height: 1.55;
  color: var(--text-1);
  box-shadow:
    0 12px 36px rgba(0, 0, 0, 0.45),
    0 0 0 1px rgba(0, 196, 114, 0.04),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);
  pointer-events: auto;
  animation: gloss-pop-in 180ms cubic-bezier(0.22, 1, 0.36, 1);
}
@keyframes gloss-pop-in {
  from { opacity: 0; transform: scale(0.94) translateY(2px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}
.call-gloss-pop-body {
  padding-right: 18px;
  color: var(--text-1);
}
.call-gloss-pop-close {
  position: absolute;
  top: 6px; right: 6px;
  width: 20px; height: 20px;
  display: inline-flex;
  align-items: center; justify-content: center;
  background: transparent;
  border: none;
  border-radius: 6px;
  color: var(--text-4);
  cursor: pointer;
  font-size: 12px;
  line-height: 1;
  transition: color .12s ease, background .12s ease;
}
.call-gloss-pop-close:hover {
  color: var(--text-1);
  background: rgba(255, 255, 255, 0.06);
}
.call-gloss-pop-close svg {
  width: 11px;
  height: 11px;
}

/* P61.9: dashboard + list skeletons (shown while server stats / call
   rows fetch in the background). Same shimmer animation used on the
   feed-card skeletons elsewhere in the app — the style sits in the
   feed.css file but the keyframes are defined globally so we can
   reference them here. */
.calls-rep-slot-skeleton,
.calls-list-slot-skeleton {
  padding: 12px 0;
}
.calls-skel-bar,
.calls-skel-row {
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, .03) 0%,
    rgba(255, 255, 255, .07) 50%,
    rgba(255, 255, 255, .03) 100%
  );
  background-size: 200% 100%;
  border-radius: 8px;
  animation: callSkelShimmer 1.4s ease-in-out infinite;
}
.calls-skel-bar-tier {
  height: 60px;
  margin-bottom: 12px;
}
.calls-skel-bar-stat {
  height: 80px;
  margin-bottom: 12px;
}
.calls-skel-row {
  height: 56px;
  margin-bottom: 8px;
}
@keyframes callSkelShimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
.rep-comp-bar {
  height: 5px;
  background: var(--bg-1);
  border-radius: 3px;
  overflow: hidden;
}
.rep-comp-bar-fill {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--accent) 0%, rgba(0,196,114,.6) 100%);
  border-radius: 3px;
  transition: width .5s cubic-bezier(.2,.8,.4,1);
}
/* P61.3: new "earned / possible" display. Replaces the old separate
   .rep-comp-pct + .rep-comp-weight that read confusingly as "53 / 15%". */
.rep-comp-points {
  text-align: right;
  font-variant-numeric: tabular-nums;
  color: var(--text-3);
  font-size: 11px;
}
.rep-comp-points strong {
  color: var(--text-0);
  font-weight: 700;
}
.rep-comp-points-sep {
  color: var(--text-4);
  margin: 0 2px;
}

/* P61.3: confidence note inside the components title */
.rep-components-conf {
  font-weight: 400;
  color: var(--text-4);
  text-transform: none;
  letter-spacing: .02em;
  font-size: 10px;
  margin-left: 8px;
}

/* P61.3 / P65.46 — "Next milestone" coaching line.
   Sits between the hero and the stat strip — actionable advice +
   the actual reward the user pockets when they land it.
   3-column grid: arrow · content (label + action stacked) · rewards
   (chips + composite delta stacked). On narrow screens it wraps the
   rewards block under the content cleanly. */
.rep-milestone {
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  align-items: center;
  gap: 4px 14px;
  padding: 12px 16px;
  margin: 14px 0 0;
  background: linear-gradient(90deg, rgba(0,196,114,.06) 0%, rgba(0,196,114,.02) 100%);
  border: 1px solid rgba(0,196,114,.18);
  border-radius: 12px;
  font-size: 12px;
  font-family: var(--mono);
}
.rep-milestone-arrow {
  color: var(--accent);
  font-weight: 700;
  font-size: 18px;
  line-height: 1;
  align-self: center;
}
.rep-milestone-content {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.rep-milestone-label {
  color: var(--text-3);
  font-size: 9.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .12em;
  line-height: 1;
}
.rep-milestone-action {
  color: var(--text-0);
  font-weight: 700;
  font-size: 13px;
  line-height: 1.25;
  letter-spacing: -0.005em;
}
.rep-milestone-delta {
  /* Legacy class kept for any caller still using it — same visual */
  color: var(--accent);
  font-weight: 800;
  background: rgba(0,196,114,.12);
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 11px;
  border: 1px solid rgba(0,196,114,.25);
}

/* Rewards cluster — vertical stack: chip row on top, composite
   delta beneath. Right-aligned so it reads as the outcome of the
   action label. */
.rep-milestone-rewards {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 5px;
  min-width: 0;
}
.rep-milestone-reward-row {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.rep-milestone-reward {
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
  padding: 4px 10px;
  border-radius: 999px;
  font-family: var(--mono, ui-monospace);
  background: rgba(0, 196, 114, 0.10);
  border: 1px solid rgba(0, 196, 114, 0.28);
  white-space: nowrap;
}
.rep-milestone-reward .rmr-num {
  font-size: 12.5px;
  font-weight: 800;
  color: var(--accent);
  letter-spacing: -0.01em;
}
.rep-milestone-reward .rmr-lbl {
  font-size: 9px;
  color: var(--text-3);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 700;
}
/* Lifetime rewards get a subtle gold tint so the user reads them
   as the more aspirational currency (they accumulate toward the
   50,000-point gold-name unlock). */
.rep-milestone-reward-life {
  background: rgba(247, 217, 121, 0.08);
  border-color: rgba(247, 217, 121, 0.30);
}
.rep-milestone-reward-life .rmr-num { color: #f7d979; }

.rep-milestone-delta-small {
  font-size: 9.5px;
  color: var(--text-4);
  font-family: var(--mono, ui-monospace);
  letter-spacing: 0.04em;
  white-space: nowrap;
  font-weight: 600;
}

/* Narrow profiles — wrap the rewards block under the content. */
@media (max-width: 720px) {
  .rep-milestone {
    grid-template-columns: auto 1fr auto;
    grid-template-rows: auto auto;
  }
  .rep-milestone-arrow {
    grid-row: 1 / span 2;
    align-self: start;
    padding-top: 2px;
  }
  .rep-milestone-content { grid-column: 2 / span 2; grid-row: 1; }
  .rep-milestone-rewards {
    grid-column: 2 / span 2;
    grid-row: 2;
    align-items: flex-start;
  }
  .rep-milestone-reward-row { justify-content: flex-start; }
}

/* P61.3: unobserved-calls warning chip in the hero-right column */
.rep-unobserved {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 9px;
  border-radius: 6px;
  background: rgba(245, 158, 11, .08);
  border: 1px solid rgba(245, 158, 11, .22);
  color: rgba(245, 158, 11, .95);
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .02em;
  margin-top: 6px;
  cursor: help;
}
.rep-unobserved strong {
  font-weight: 800;
  color: rgba(245, 158, 11, 1);
}

/* P61.3: speed badge in recent-call rows ("2× in 4.2h") */
.call-row-speed {
  font-family: var(--mono);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .04em;
  padding: 2px 6px;
  border-radius: 3px;
  background: rgba(0,196,114,.10);
  color: var(--accent);
  border: 1px solid rgba(0,196,114,.22);
}

/* ═══ Calls list ═══ */
.calls-list {
  background: var(--bg-1);
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
}
.calls-list-header {
  font-family: var(--mono);
  font-size: 9.5px;
  font-weight: 600;
  color: var(--text-3);
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: 11px 16px;
  background: var(--bg-2);
  border-bottom: 1px solid var(--border);
}
.call-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  transition: background .15s ease;
}
.call-row:last-child { border-bottom: none; }
.call-row:hover { background: var(--bg-2); }
.call-row-main { flex: 1; min-width: 0; }
.call-row-headline {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
  flex-wrap: wrap;
}
.call-row-ticker {
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 700;
  color: var(--text-0);
  letter-spacing: .03em;
}
.call-row-status {
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .12em;
  padding: 2px 6px;
  border-radius: 3px;
  text-transform: uppercase;
}
.call-row-first {
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .12em;
  padding: 2px 6px;
  border-radius: 3px;
  background: rgba(191,162,78,.10);
  color: var(--gold);
  border: 1px solid rgba(191,162,78,.28);
}
.call-row-ago {
  font-size: 10px;
  color: var(--text-4);
  font-family: var(--mono);
  margin-left: auto;
}
.call-row-prices {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--text-3);
  font-variant-numeric: tabular-nums;
}
.call-row-arrow { color: var(--text-4); margin: 0 2px; }
.call-row-metrics {
  display: flex;
  gap: 14px;
  flex-shrink: 0;
}
.call-row-metric {
  font-family: var(--mono);
  text-align: right;
  min-width: 60px;
}
.call-row-metric-label {
  font-size: 8.5px;
  font-weight: 600;
  color: var(--text-4);
  letter-spacing: .10em;
  text-transform: uppercase;
}
.call-row-metric-val {
  font-size: 14px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  margin-top: 2px;
}

/* ── Mobile ── */
@media (max-width: 720px) {
  .rep-stat-strip { grid-template-columns: repeat(2, 1fr); }
  .rep-stat-strip .rep-stat:nth-child(2) { border-right: none; }
  .rep-comp-row { grid-template-columns: 80px 1fr 70px; gap: 8px; }
  .call-row-metrics { gap: 10px; }
  .call-card-row { grid-template-columns: 1fr 1fr; }
  .call-card-metric-prices { grid-column: span 2; }
  .conviction-strip { font-size: 10.5px; padding: 4px 9px; }
}

/* ═══════════════════════════════════════════════════════════════
   COMPOSER TOKEN PREVIEW (P60)
   Live address-resolution card that appears below the composer
   body when the user pastes a contract address from any chain.
   ═══════════════════════════════════════════════════════════════ */
.composer-token-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border-radius: 8px;
  background: rgba(0,196,114,.04);
  border: 1px solid rgba(0,196,114,.14);
  font-size: 12px;
  line-height: 1.4;
  transition: background .2s ease, border-color .2s ease;
}
.composer-token-glyph {
  flex-shrink: 0;
  width: 22px; height: 22px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.composer-token-check {
  background: var(--accent);
  color: #001a0e;
}
.composer-token-text,
.composer-token-main {
  flex: 1;
  min-width: 0;
}
.composer-token-line1 {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--text-0);
  font-weight: 600;
  margin-bottom: 3px;
  flex-wrap: wrap;
}
.composer-token-line2 {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--text-3);
  font-size: 11px;
  flex-wrap: wrap;
}
.composer-token-symbol {
  font-family: var(--mono);
  font-weight: 700;
  color: var(--text-0);
  letter-spacing: .03em;
}
.composer-token-name {
  color: var(--text-1);
  font-weight: 500;
  font-size: 12px;
}
.composer-token-chain {
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: 2px 6px;
  border-radius: 3px;
  background: rgba(255,255,255,.05);
  color: var(--text-2);
  border: 1px solid var(--border);
}
.composer-token-mono {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .02em;
}
.composer-token-price {
  font-family: var(--mono);
  font-weight: 700;
  color: var(--text-0);
  font-variant-numeric: tabular-nums;
}
.composer-token-change {
  font-family: var(--mono);
  font-weight: 700;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}
.composer-token-up   { color: var(--accent); }
.composer-token-down { color: var(--red, #ef4444); }
.composer-token-stat {
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--text-3);
}
.composer-token-stat strong {
  color: var(--text-1);
  font-weight: 700;
}

/* Loading state — subtle spinner */
.composer-token-loading {
  background: var(--bg-3);
  border-color: var(--border);
}
.composer-token-spinner {
  width: 16px; height: 16px;
  border: 2px solid var(--text-4);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: composerTokenSpin 0.7s linear infinite;
  flex-shrink: 0;
}
@keyframes composerTokenSpin {
  to { transform: rotate(360deg); }
}

/* Miss state — couldn't resolve */
.composer-token-miss {
  background: rgba(196,125,42,.05);
  border-color: rgba(196,125,42,.20);
}
.composer-token-miss .composer-token-glyph {
  background: rgba(196,125,42,.12);
  color: var(--orange, #C47D2A);
}

/* ═══ CALL CARD: token name + chain pill (P60) ═══ */
.call-card-name {
  font-size: 12px;
  font-weight: 500;
  color: var(--text-2);
  letter-spacing: .005em;
}
.call-card-chain {
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: 2px 6px;
  border-radius: 3px;
  background: rgba(255,255,255,.04);
  color: var(--text-3);
  border: 1px solid var(--border);
}

/* ═══════════════════════════════════════════════════════════════
   CALL CARD — LOADING SKELETON (P60.3)
   ═══════════════════════════════════════════════════════════════ */
.call-card-skeleton {
  position: relative;
}
.call-card-skeleton .call-card-skel-pill {
  display: inline-block;
  width: 48px;
  height: 16px;
  border-radius: 3px;
  background: linear-gradient(90deg,
    rgba(255,255,255,.04) 0%,
    rgba(255,255,255,.08) 50%,
    rgba(255,255,255,.04) 100%);
  background-size: 200% 100%;
  animation: callSkelShimmer 1.4s ease-in-out infinite;
}
/* ═══════════════════════════════════════════════════════════════════
   P65.24 — Message button on profile + Messages "Coming soon" page
   The button is a sibling of the bell + Following button. Same shape
   as the bell so the cluster reads as a coherent action group.
   ─────────────────────────────────────────────────────────────────── */
.profile-message-btn {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--bg-2);
  color: var(--text-2);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all .15s;
  flex-shrink: 0;
  padding: 0;
}
.profile-message-btn:hover {
  border-color: rgba(0, 196, 114, 0.45);
  background: rgba(0, 196, 114, 0.08);
  color: var(--accent);
  transform: scale(1.05);
}

/* ═══════════════════════════════════════════════════════════════════
   P65.103 — Send-a-gift shortcut on other-user profiles
   Sibling of .profile-bell / .profile-message-btn. Same shape (32px
   circle) so the cluster stays visually coherent. Gold-tinted hover
   so it reads as the "stars / gift" action — distinct from the
   green message hover.
   ─────────────────────────────────────────────────────────────────── */
.profile-gift-btn {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--bg-2);
  color: var(--text-2);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all .15s ease;
  flex-shrink: 0;
  padding: 0;
  position: relative;
}
.profile-gift-btn:hover {
  border-color: rgba(247, 217, 121, 0.55);
  background: linear-gradient(135deg,
    rgba(255, 243, 173, 0.10) 0%,
    rgba(247, 217, 121, 0.18) 100%);
  color: #f7d979;
  transform: scale(1.06);
  box-shadow:
    0 4px 12px rgba(247, 217, 121, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
.profile-gift-btn:active {
  transform: scale(0.96);
}
.profile-gift-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px rgba(247, 217, 121, 0.45);
}
/* Subtle star-twinkle on hover — single rotation, settles back. */
.profile-gift-btn svg {
  transition: transform .35s cubic-bezier(0.22, 1, 0.36, 1);
}
.profile-gift-btn:hover svg {
  transform: rotate(72deg) scale(1.08);
  filter: drop-shadow(0 0 4px rgba(247, 217, 121, 0.55));
}

/* Messages page — Coming-soon placeholder */
.messages-coming-soon {
  max-width: 460px;
  margin: 40px auto;
  padding: 36px 28px;
  text-align: center;
  border-radius: 16px;
  background: linear-gradient(180deg,
    rgba(0, 196, 114, 0.06),
    rgba(0, 196, 114, 0.015) 60%,
    transparent 100%);
  border: 1px solid rgba(0, 196, 114, 0.18);
}
.messages-icon {
  width: 70px;
  height: 70px;
  margin: 0 auto 16px;
  border-radius: 50%;
  background: rgba(0, 196, 114, 0.10);
  color: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  filter: drop-shadow(0 0 16px rgba(0, 196, 114, 0.20));
}
.messages-eyebrow {
  font-family: var(--mono);
  font-weight: 700;
  font-size: 10px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 8px;
  display: inline-block;
  padding: 3px 10px;
  background: rgba(0, 196, 114, 0.10);
  border: 1px solid rgba(0, 196, 114, 0.24);
  border-radius: 999px;
}
.messages-title {
  font-size: 24px;
  font-weight: 800;
  color: var(--text-0);
  letter-spacing: -.02em;
  margin: 14px 0 8px;
  line-height: 1.15;
}
.messages-sub {
  font-size: 13px;
  color: var(--text-3);
  line-height: 1.6;
  max-width: 380px;
  margin: 0 auto 22px;
}
.messages-sub strong {
  color: var(--text-1);
  font-weight: 700;
}
.messages-coming-list {
  list-style: none;
  margin: 0 0 22px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  text-align: left;
  max-width: 340px;
  margin-left: auto;
  margin-right: auto;
}
.messages-coming-list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 12.5px;
  color: var(--text-2);
  line-height: 1.5;
}
.messages-coming-tick {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: rgba(0, 196, 114, 0.18);
  color: var(--accent);
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  margin-top: 1px;
}

/* ═══════════════════════════════════════════════════════════════════
   P65.23 — Per-follow notification bell
   Sits next to the "Following" button on a user's profile. Two
   visual states: hollow bell (off, default) and filled green bell
   (on — you'll get a notification on every post from this user).
   ─────────────────────────────────────────────────────────────────── */
.profile-bell {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--bg-2);
  color: var(--text-2);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all .15s;
  flex-shrink: 0;
  padding: 0;
}
.profile-bell:hover {
  border-color: rgba(0, 196, 114, 0.45);
  background: rgba(0, 196, 114, 0.08);
  color: var(--accent);
  transform: scale(1.05);
}
.profile-bell-on {
  background: rgba(0, 196, 114, 0.15);
  border-color: var(--accent);
  color: var(--accent);
  box-shadow: 0 0 14px rgba(0, 196, 114, 0.30);
}
.profile-bell-on:hover {
  background: rgba(0, 196, 114, 0.22);
}
@keyframes profile-bell-ring {
  0%, 100% { transform: rotate(0); }
  20%, 60% { transform: rotate(-12deg); }
  40%, 80% { transform: rotate(12deg); }
}
.profile-bell-on:hover svg {
  animation: profile-bell-ring .55s ease-in-out;
  transform-origin: 50% 18%;
}

/* ═══════════════════════════════════════════════════════════════════
   P65.20 — "Click Home twice" pull-to-refresh pill
   Shows briefly at the top of the page when Home is clicked while
   already at the top of the feed. Reports either how many new posts
   landed, or "Up to date" when nothing changed. Auto-dismisses.
   ─────────────────────────────────────────────────────────────────── */
/* P65.41 — Spinner-only refresh indicator.
   Replaces the old "✓ Up to date" pill with a clean rotating ring,
   matching how Stripe / Linear / X / GitHub indicate background work.
   Quiet success: when the fetch returns nothing new, the ring just
   fades out — no celebratory toast. If new posts did arrive, the
   ring morphs into a compact "N new posts" chip for ~1.4s. */

.home-refresh-spinner-only {
  position: fixed;
  top: 18px;
  left: 50%;
  transform: translate(-50%, 0);
  z-index: 4000;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border: 1px solid rgba(255, 255, 255, 0.06);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
  animation: home-spinner-enter .25s cubic-bezier(.22, 1, .36, 1);
  transition: width 220ms cubic-bezier(.22, 1, .36, 1),
              padding 220ms cubic-bezier(.22, 1, .36, 1),
              border-radius 220ms cubic-bezier(.22, 1, .36, 1);
}

@keyframes home-spinner-enter {
  from { transform: translate(-50%, -10px); opacity: 0; }
  to   { transform: translate(-50%, 0);     opacity: 1; }
}

.home-refresh-ring {
  width: 16px;
  height: 16px;
  border: 2px solid rgba(0, 196, 114, 0.18);
  border-top-color: var(--accent);
  border-right-color: var(--accent);
  border-radius: 50%;
  animation: home-ring-spin .7s linear infinite;
  /* Subtle inner glow so the ring reads as "alive" against the dim
     glass background — gives it the depth pro platforms have. */
  box-shadow: 0 0 12px rgba(0, 196, 114, 0.18);
}

@keyframes home-ring-spin {
  to { transform: rotate(360deg); }
}

/* New-posts pill state: ring container morphs into a wider chip
   showing "N new posts". Smooth shape transition via the
   `transition` declared on the parent. */
.home-refresh-spinner-only.home-refresh-result {
  width: auto;
  padding: 8px 14px;
  border-radius: 999px;
  border-color: rgba(0, 196, 114, 0.45);
  background: rgba(0, 196, 114, 0.12);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.55),
              0 0 18px rgba(0, 196, 114, 0.18);
}

.home-refresh-result-text {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--accent);
  white-space: nowrap;
}

/* Error variant — the morphed pill goes red instead of green. */
.home-refresh-spinner-only.home-refresh-error {
  border-color: rgba(239, 68, 68, 0.45);
  background: rgba(239, 68, 68, 0.12);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.55),
              0 0 18px rgba(239, 68, 68, 0.18);
}
.home-refresh-spinner-only.home-refresh-error .home-refresh-result-text {
  color: #ef4444;
}

.home-refresh-leave {
  animation: home-spinner-leave .35s ease forwards;
  pointer-events: none;
}
@keyframes home-spinner-leave {
  to { transform: translate(-50%, -8px); opacity: 0; }
}

/* ═══════════════════════════════════════════════════════════════════
   P65.19 — Notification panel — smart grouping + time sections
   • Stacked avatars when multiple actors are grouped on one notification
   • Section headers (Today / Yesterday / Earlier this week / Older)
   • Group counter pill
   • Quick "Follow back" CTA on follow notifs
   ─────────────────────────────────────────────────────────────────── */
.notif-section + .notif-section {
  margin-top: 6px;
}
.notif-section-header {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-4);
  /* P65.28 — Notifications were appearing partially visible above the
     sticky filter bar (the "decalage" the user reported). Root cause
     was the .notif-list scroll container had padding:6px, which lets
     content scroll *through* a 6px strip at the top before the sticky
     filter bar can clip it. We removed that padding and pushed it to
     the inner elements; section headers and filter bar can now span
     edge-to-edge with no gap and fully cover scrolling content. */
  padding: 12px 14px 8px;
  position: sticky;
  top: 48px;            /* matches the filter bar height */
  background: var(--bg-2);
  /* Subtle fade-in on the bottom edge so the header reads as a
     deliberate divider rather than a flat box; helps the eye parse
     where the section starts even on solid backgrounds. */
  box-shadow: 0 6px 8px -6px rgba(0, 0, 0, 0.6);
  z-index: 5;
}

/* Stacked avatars — primary on top, up to 2 overlapping behind */
.notif-avatar-stack {
  position: relative;
  flex-shrink: 0;
  width: 56px;
  height: 40px;
}
.notif-avatar-stack .notif-stack-primary {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 3;
}
.notif-avatar-stack .notif-stack-primary .avatar.avatar-md {
  width: 40px;
  height: 40px;
  border: 2px solid var(--bg-1);
}
.notif-avatar-stack .notif-stack-extra {
  position: absolute;
  top: 6px;
  z-index: 1;
}
.notif-avatar-stack .notif-stack-extra-1 {
  left: 14px;
  z-index: 2;
  opacity: .9;
}
.notif-avatar-stack .notif-stack-extra-2 {
  left: 26px;
  z-index: 1;
  opacity: .75;
}
.notif-avatar-stack .notif-stack-extra .avatar.avatar-sm {
  width: 30px;
  height: 30px;
  border: 2px solid var(--bg-1);
}
.notif-avatar-stack .notif-action-overlay {
  z-index: 4;
  bottom: -2px;
  left: 22px;
}

/* Group counter (e.g. "5 upvoted") inside the time row */
.notif-group-count {
  color: var(--accent);
  font-weight: 700;
}

/* Quick action button (e.g. "Follow back") on the right of a notif row */
.notif-quick-action {
  flex-shrink: 0;
  font-family: inherit;
  font-size: 11px;
  font-weight: 700;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid var(--accent);
  background: rgba(0, 196, 114, 0.10);
  color: var(--accent);
  cursor: pointer;
  letter-spacing: -.005em;
  align-self: center;
  transition: all .15s;
}
.notif-quick-action:hover {
  background: var(--accent);
  color: #0a0a0a;
}
.notif-quick-action-done {
  background: rgba(255, 255, 255, 0.04) !important;
  color: var(--text-3) !important;
  border-color: var(--border) !important;
  cursor: default !important;
}
.notif-quick-action-done:hover {
  background: rgba(255, 255, 255, 0.04) !important;
  color: var(--text-3) !important;
}

/* ═══════════════════════════════════════════════════════════════════
   P65.18 — Notifications panel — full upgrade
   • Filter tabs (All / Mentions) with badge counts
   • Real actor avatars (avatar-md) with action-type icon overlay
   • Post-snippet preview for post-related notifications
   • Unread accent dot + accent-tinted background for unread rows
   • Click-to-navigate (whole row clickable)
   • Fresh-notif slide-in animation
   • Polished empty state per filter
   ─────────────────────────────────────────────────────────────────── */

/* Filter tabs at top of panel */
.notif-filters {
  display: flex;
  gap: 4px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  /* P65.28 — match the panel's background (--bg-2) instead of --bg-1
     so the sticky bar doesn't show a darker strip relative to the
     notif rows scrolling under it. z-index above the section header
     so this stays the topmost sticky layer. */
  background: var(--bg-2);
  z-index: 6;
}
.notif-filter {
  flex: 1;
  padding: 8px 12px;
  border-radius: 8px;
  background: transparent;
  border: 1px solid transparent;
  color: var(--text-3);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: -.005em;
  cursor: pointer;
  transition: all .15s;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.notif-filter:hover {
  color: var(--text-1);
  background: rgba(255, 255, 255, 0.03);
}
.notif-filter.active {
  color: var(--accent);
  background: rgba(0, 196, 114, 0.08);
  border-color: rgba(0, 196, 114, 0.20);
}
.notif-filter-count {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  color: var(--text-2);
  letter-spacing: .04em;
}
.notif-filter.active .notif-filter-count {
  background: rgba(0, 196, 114, 0.15);
  color: var(--accent);
}

/* List body */
/* P65.28 — top padding 0 because the sticky filter bar provides its
   own visual buffer; bottom padding for the last item to breathe;
   horizontal padding for the cards to inset from the panel edges. */
.notif-list-body {
  padding: 0 4px 8px;
}

/* Notification row */
.notif-item {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px;
  border-radius: 10px;
  cursor: pointer;
  transition: background .15s;
  border: 1px solid transparent;
}
.notif-item:hover {
  background: rgba(255, 255, 255, 0.03);
}
.notif-item-unread {
  background: linear-gradient(180deg,
    rgba(0, 196, 114, 0.05),
    rgba(0, 196, 114, 0.015));
  border-color: rgba(0, 196, 114, 0.18);
}
.notif-item-unread:hover {
  background: rgba(0, 196, 114, 0.08);
}
@keyframes notif-fresh-slide {
  from { transform: translateX(-6px); opacity: 0; }
  to   { transform: translateX(0);    opacity: 1; }
}
.notif-item-fresh {
  animation: notif-fresh-slide .35s cubic-bezier(.4, 0, .2, 1);
}

/* Avatar with action-type icon overlay (bottom-right corner) */
.notif-avatar-wrap {
  position: relative;
  flex-shrink: 0;
}
.notif-avatar-wrap .avatar.avatar-md {
  width: 40px;
  height: 40px;
  font-size: 14px;
}
.notif-action-overlay {
  position: absolute;
  bottom: -2px;
  right: -4px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--bg-1);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}
.notif-action-overlay svg {
  width: 9px;
  height: 9px;
}
.notif-action-overlay-accent { background: var(--accent); color: #0a0a0a; }
.notif-action-overlay-blue   { background: #3b8efe;     color: #fff; }
.notif-action-overlay-purple { background: #a78bfa;     color: #fff; }
.notif-action-overlay-gold   { background: var(--gold); color: #0a0a0a; }
.notif-action-overlay-muted  { background: var(--text-3); color: var(--bg-1); }
/* P65.76 — danger tone for spam/bot-lock notifications */
.notif-action-overlay-danger {
  background: #ef4444;
  color: #fff;
  box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.45), 0 1px 3px rgba(0, 0, 0, 0.5);
}
/* P65.204 — Voice Boost tone: emerald disc with a pulsing green ring
   so it visually pops against the regular gold milestone overlay. */
.notif-action-overlay-vboost {
  background: linear-gradient(135deg, var(--accent), #00d484);
  color: #0a1d12;
  box-shadow:
    0 0 0 2px rgba(0, 196, 114, 0.40),
    0 0 12px rgba(0, 196, 114, 0.55);
  animation: vbNotifOverlayPulse 2.6s ease-in-out infinite;
}
@keyframes vbNotifOverlayPulse {
  0%, 100% { box-shadow: 0 0 0 2px rgba(0, 196, 114, 0.40), 0 0 8px rgba(0, 196, 114, 0.45); }
  50%      { box-shadow: 0 0 0 3px rgba(0, 196, 114, 0.55), 0 0 18px rgba(0, 196, 114, 0.75); }
}

/* Danger row — red-tinted background + red left rail. Sits over even
   the unread treatment because a sanction notification is more urgent
   than a fresh follow / like. */
.notif-item.notif-item-danger {
  background: linear-gradient(180deg,
    rgba(239, 68, 68, 0.10),
    rgba(239, 68, 68, 0.03)) !important;
  border-color: rgba(239, 68, 68, 0.40) !important;
  box-shadow: inset 3px 0 0 #ef4444;
}
.notif-item.notif-item-danger:hover {
  background: linear-gradient(180deg,
    rgba(239, 68, 68, 0.14),
    rgba(239, 68, 68, 0.05)) !important;
}
.notif-item.notif-item-danger .notif-text strong {
  color: #ff8a8a;
}

/* Body text */
.notif-body {
  flex: 1;
  min-width: 0;
}
.notif-text {
  font-size: 13px;
  color: var(--text-1);
  line-height: 1.45;
  margin-bottom: 4px;
  word-wrap: break-word;
}
.notif-text strong {
  color: var(--text-0);
  font-weight: 700;
}
.notif-snippet {
  font-size: 12px;
  color: var(--text-3);
  line-height: 1.5;
  font-style: italic;
  padding: 6px 10px;
  border-left: 2px solid var(--border);
  background: rgba(255, 255, 255, 0.02);
  border-radius: 0 6px 6px 0;
  margin: 4px 0 6px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.notif-time {
  font-size: 10px;
  color: var(--text-4);
  font-family: var(--mono);
  letter-spacing: .04em;
  text-transform: uppercase;
}

/* ═══════════════════════════════════════════════════════════════ */
/* P65.204 — Voice Boost notification body                          */
/* ─────────────────────────────────────────────────────────────── */
/* Rich layout for voice_boost_received rows — replaces the plain   */
/* "🔊 X boosted a comment ..." string with a 3-line layout:        */
/*   1. Big gradient amount (+14★) + "X boosted a comment · 1h"    */
/*   2. Italic green-tinted quote of the boosted comment            */
/*   3. Small-caps CTA hinting tap-to-view                          */
/* The overlay icon (megaphone, .notif-action-overlay-vboost)       */
/* completes the visual identity.                                   */
/* ═══════════════════════════════════════════════════════════════ */

/* P65.206 — compact, single-line headline.  No CTA below — the row
   is clickable and an explicit "Tap to view" was redundant. */
.vb-notif-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 3px;
  min-width: 0;
}
.vb-notif-amount {
  font-family: var(--mono, ui-monospace, monospace);
  font-weight: 800;
  font-size: 15px;
  letter-spacing: -0.02em;
  background: linear-gradient(135deg, #b6f3d3 0%, #00c472 60%, #00a060 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 0 12px rgba(0, 196, 114, 0.40);
  display: inline-flex;
  align-items: baseline;
  flex-shrink: 0;
  line-height: 1;
}
.vb-notif-star {
  font-size: 12px;
  margin-left: 1px;
  background: none;
  -webkit-background-clip: initial;
  background-clip: initial;
  -webkit-text-fill-color: #f7d979;
  color: #f7d979;
  text-shadow: 0 0 8px rgba(247, 217, 121, 0.55);
}
.vb-notif-meta {
  font-size: 12.5px;
  color: var(--text-2);
  line-height: 1.4;
  flex: 1;
  min-width: 0;
  /* Single-line headline; ellipsis on overflow keeps the row tight */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.vb-notif-meta strong {
  color: var(--text-0);
  font-weight: 700;
}
.vb-notif-dur {
  font-family: var(--mono, ui-monospace, monospace);
  font-weight: 700;
  color: var(--accent);
  letter-spacing: 0.02em;
  font-size: 11.5px;
}
/* Slim emerald quote — single line clamp keeps the row to ~3 lines
   total (avatar height) instead of the previous 5–6 lines. */
.vb-notif-quote {
  font-size: 11.5px;
  color: var(--text-3);
  line-height: 1.4;
  font-style: italic;
  padding: 4px 8px;
  margin: 0;
  background: linear-gradient(90deg,
    rgba(0, 196, 114, 0.07) 0%,
    rgba(0, 196, 114, 0.02) 100%);
  border-left: 2px solid rgba(0, 196, 114, 0.45);
  border-radius: 0 6px 6px 0;
  word-wrap: break-word;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.vb-notif-quote::before {
  content: '\201C';
  margin-right: 1px;
  color: var(--accent);
  opacity: 0.7;
}
.vb-notif-quote::after {
  content: '\201D';
  margin-left: 1px;
  color: var(--accent);
  opacity: 0.7;
}

/* P65.205 — booster's self-notification pill (LIVE / QUEUED) sits in
   the same slot as the +14★ amount on the recipient notif, but uses
   a discrete pill style instead of the gradient text amount.  Two
   variants:
     .vb-notif-pill-live   — emerald pill with a pulsing dot
     .vb-notif-pill-queued — amber pill with a clock icon */
.vb-notif-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 7px 2px 6px;
  border-radius: 999px;
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  font-family: inherit;
  flex-shrink: 0;
  white-space: nowrap;
  line-height: 1;
}
.vb-notif-pill-live {
  background: linear-gradient(135deg, rgba(0, 196, 114, 0.28), rgba(0, 196, 114, 0.10));
  border: 1px solid rgba(0, 196, 114, 0.55);
  color: #b6f3d3;
  text-shadow: 0 0 8px rgba(0, 196, 114, 0.45);
  animation: vbPillPulse 2.4s ease-in-out infinite;
}
.vb-notif-pill-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #00ff8c;
  box-shadow: 0 0 0 0 rgba(0, 255, 140, 0.55);
  animation: vbPillDotPulse 1.4s ease-in-out infinite;
  flex-shrink: 0;
}
@keyframes vbPillPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(0, 196, 114, 0.0); }
  50%      { box-shadow: 0 0 12px 1px rgba(0, 196, 114, 0.35); }
}
@keyframes vbPillDotPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(0, 255, 140, 0.55), 0 0 8px rgba(0, 255, 140, 0.55); }
  50%      { box-shadow: 0 0 0 4px rgba(0, 255, 140, 0.0),  0 0 12px rgba(0, 255, 140, 0.85); }
}
.vb-notif-pill-queued {
  background: linear-gradient(135deg, rgba(247, 217, 121, 0.20), rgba(247, 217, 121, 0.08));
  border: 1px solid rgba(247, 217, 121, 0.50);
  color: #ffe79b;
  text-shadow: 0 0 8px rgba(247, 217, 121, 0.40);
}
.vb-notif-pill-queued svg {
  stroke: #ffe79b;
  flex-shrink: 0;
}

/* Reduced-motion: disable pill animations */
@media (prefers-reduced-motion: reduce) {
  .vb-notif-pill-live,
  .vb-notif-pill-dot,
  .notif-action-overlay-vboost {
    animation: none !important;
  }
}

/* Unread accent dot at the top-right */
.notif-unread-dot {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 10px rgba(0, 196, 114, 0.55);
  flex-shrink: 0;
}

/* Empty state */
.notif-empty {
  padding: 50px 24px;
  text-align: center;
}
.notif-empty-icon {
  font-size: 40px;
  opacity: .35;
  margin-bottom: 14px;
  filter: grayscale(.4);
}
.notif-empty-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-1);
  margin-bottom: 6px;
}
.notif-empty-sub {
  font-size: 12px;
  color: var(--text-4);
  line-height: 1.55;
  max-width: 280px;
  margin: 0 auto;
}

/* ═══════════════════════════════════════════════════════════════════
   P65.17 — Seasons + reward claims
   • Season strip (pill + countdown + prize info) above the podium
   • Claim banner shown at top when the user has a pending reward
   • Reward claim modal styles
   ─────────────────────────────────────────────────────────────────── */

/* SEASON STRIP — sits above the page title in The Tree header */
.lb-season-strip {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 8px 14px;
  margin-bottom: 16px;
  border-radius: 999px;
  background: linear-gradient(180deg,
    rgba(212, 175, 55, 0.10),
    rgba(212, 175, 55, 0.03));
  border: 1px solid rgba(212, 175, 55, 0.28);
  flex-wrap: wrap;
  justify-content: center;
}
.lb-season-pill {
  font-family: var(--mono);
  font-weight: 800;
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--gold);
  padding: 3px 10px;
  border-radius: 999px;
  background: rgba(212, 175, 55, 0.16);
  border: 1px solid rgba(212, 175, 55, 0.34);
}
.lb-season-countdown {
  font-family: var(--mono);
  font-weight: 700;
  font-size: 13px;
  color: var(--text-0);
  letter-spacing: .04em;
  min-width: 96px;
  text-align: center;
}
.lb-season-countdown-urgent {
  color: #ff6b6b;
  animation: lb-pulse-urgent 1.2s ease-in-out infinite;
}
@keyframes lb-pulse-urgent {
  0%, 100% { opacity: 1; }
  50%      { opacity: .55; }
}
.lb-season-pool {
  font-size: 11px;
  color: var(--text-3);
  font-weight: 500;
  letter-spacing: .02em;
}
.lb-season-pool strong {
  color: var(--gold);
  font-family: var(--mono);
  font-weight: 800;
}

/* CLAIM BANNER — shown above the leaderboard when user has a pending reward */
.lb-claim-banner {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0 auto 20px;
  max-width: 640px;
  padding: 14px 18px;
  border-radius: 14px;
  background: linear-gradient(135deg,
    rgba(212, 175, 55, 0.18) 0%,
    rgba(212, 175, 55, 0.06) 100%);
  border: 1px solid rgba(212, 175, 55, 0.42);
  cursor: pointer;
  box-shadow: 0 0 26px rgba(212, 175, 55, 0.18);
  animation: lb-claim-glow 2.5s ease-in-out infinite;
}
@keyframes lb-claim-glow {
  0%, 100% { box-shadow: 0 0 22px rgba(212, 175, 55, 0.16); }
  50%      { box-shadow: 0 0 38px rgba(212, 175, 55, 0.32); }
}
.lb-claim-banner:hover {
  border-color: rgba(212, 175, 55, 0.65);
}
.lb-claim-banner-icon {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(212, 175, 55, 0.22);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  flex-shrink: 0;
}
.lb-claim-banner-text {
  flex: 1;
  min-width: 0;
}
.lb-claim-banner-title {
  font-size: 14px;
  font-weight: 800;
  color: var(--text-0);
  letter-spacing: -.01em;
  margin-bottom: 2px;
}
.lb-claim-banner-sub {
  font-size: 12px;
  color: var(--text-3);
  line-height: 1.4;
}

/* CLAIM MODAL */
.claim-modal-body {
  padding: 20px 22px 6px;
}
.claim-trophy {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: radial-gradient(circle,
    rgba(212, 175, 55, 0.22) 0%,
    rgba(212, 175, 55, 0.04) 70%,
    transparent 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 36px;
  margin: 0 auto 14px;
  filter: drop-shadow(0 0 18px rgba(212, 175, 55, 0.40));
}
.claim-headline {
  text-align: center;
  margin-bottom: 16px;
}
.claim-rank {
  font-family: var(--mono);
  font-weight: 800;
  font-size: 13px;
  color: var(--gold);
  letter-spacing: .12em;
  text-transform: uppercase;
  margin-bottom: 6px;
}
.claim-prize {
  font-size: 32px;
  font-weight: 800;
  color: var(--text-0);
  font-family: var(--mono);
  letter-spacing: -.02em;
  text-shadow: 0 0 18px rgba(212, 175, 55, 0.30);
}
.claim-blurb {
  font-size: 12px;
  color: var(--text-3);
  line-height: 1.55;
  text-align: center;
  padding: 0 6px;
}

/* Two-line prize header: season label + total on top, countdown below.
   Splits the season info onto its own line so long countdowns
   ("7d 00:00:00") never get truncated. */
.wt3-prize-head-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 10px;
}
.wt3-prize-countdown {
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  font-size: 10px;
  color: var(--text-3);
  letter-spacing: .04em;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.wt3-prize-countdown #wt3-countdown {
  font-family: var(--mono);
  font-weight: 700;
  color: var(--text-1);
  font-size: 11px;
  letter-spacing: .06em;
}
.wt3-prize-countdown #wt3-countdown.lb-season-countdown-urgent {
  color: #ff6b6b;
}

/* ═══════════════════════════════════════════════════════════════════
   P65.16 — "The Tree" leaderboard
   A single-ranking, three-tier visual hierarchy:
     • CROWN  — gilded podium with #1 elevated (gold), #2 silver, #3 bronze
     • ELITE  — accent-tinted cards for ranks 4–10
     • RISING — compact rows for ranks 11+
   ─────────────────────────────────────────────────────────────────── */

/* HEADER */
.lb-tree-head {
  text-align: center;
  margin-bottom: 28px;
  padding: 0 16px;
}
.lb-tree-eyebrow {
  font-family: var(--mono);
  font-weight: 700;
  font-size: 10px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 8px;
  display: inline-block;
  padding: 4px 12px;
  background: rgba(0, 196, 114, 0.08);
  border: 1px solid rgba(0, 196, 114, 0.22);
  border-radius: 999px;
}
.lb-tree-title {
  font-size: 26px;
  font-weight: 800;
  color: var(--text-0);
  letter-spacing: -.02em;
  margin-bottom: 8px;
  line-height: 1.15;
}
.lb-tree-sub {
  font-size: 12px;
  color: var(--text-4);
  line-height: 1.6;
  max-width: 560px;
  margin: 0 auto;
}

/* CROWN PODIUM */
.lb-crown {
  position: relative;
  margin: 0 auto 28px;
  max-width: 640px;
  padding: 28px 12px 0;
  background:
    radial-gradient(ellipse at center top,
      rgba(212, 175, 55, 0.10),
      transparent 60%),
    linear-gradient(180deg,
      rgba(212, 175, 55, 0.04) 0%,
      transparent 80%);
  border-radius: 18px;
}
.lb-crown-icon {
  position: absolute;
  top: -16px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 36px;
  filter: drop-shadow(0 0 18px rgba(255, 215, 0, 0.55))
          drop-shadow(0 4px 8px rgba(0, 0, 0, 0.6));
  animation: lb-crown-float 3s ease-in-out infinite;
  z-index: 2;
}
@keyframes lb-crown-float {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50%      { transform: translateX(-50%) translateY(-4px); }
}

.lb-podium-grid {
  display: grid;
  grid-template-columns: 1fr 1.25fr 1fr;
  gap: 10px;
  align-items: end;
}

.lb-podium-slot {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  cursor: pointer;
  transition: transform .25s cubic-bezier(.4,0,.2,1);
  min-width: 0;
}
.lb-podium-slot:hover {
  transform: translateY(-4px);
}
.lb-podium-slot-empty {
  cursor: default;
  opacity: .45;
}
.lb-podium-slot-empty:hover {
  transform: none;
}
.lb-podium-empty-text {
  font-size: 11px;
  color: var(--text-4);
  font-style: italic;
  margin-bottom: 8px;
  padding: 20px 0;
}

/* Avatar rings (gold/silver/bronze) */
.lb-avatar-wrap {
  border-radius: 50%;
  padding: 3px;
  margin-bottom: 14px;
  position: relative;
  flex-shrink: 0;
}
.lb-slot-1 .lb-avatar-wrap { width: 92px; height: 92px; }
.lb-slot-2 .lb-avatar-wrap,
.lb-slot-3 .lb-avatar-wrap { width: 70px; height: 70px; }

.lb-avatar-wrap-gold {
  background: linear-gradient(135deg, #fde082 0%, #d4af37 50%, #b8941f 100%);
  box-shadow: 0 0 26px rgba(212, 175, 55, 0.55),
              0 4px 12px rgba(0, 0, 0, 0.6),
              inset 0 0 12px rgba(255, 255, 255, 0.18);
}
.lb-avatar-wrap-silver {
  background: linear-gradient(135deg, #f0f0f0 0%, #b8b8b8 50%, #909090 100%);
  box-shadow: 0 0 18px rgba(192, 192, 192, 0.40),
              0 3px 10px rgba(0, 0, 0, 0.55);
}
.lb-avatar-wrap-bronze {
  background: linear-gradient(135deg, #e0a978 0%, #aa6e3c 50%, #7a4f29 100%);
  box-shadow: 0 0 18px rgba(205, 148, 98, 0.40),
              0 3px 10px rgba(0, 0, 0, 0.55);
}

/* The avatar itself fills the ring */
.lb-avatar-wrap .avatar.lb-podium-avatar {
  width: 100% !important;
  height: 100% !important;
  border-radius: 50%;
  border: 2px solid #0a0a0a;
  font-size: 22px;
  font-weight: 800;
}
.lb-slot-1 .lb-avatar-wrap .avatar.lb-podium-avatar {
  font-size: 28px;
}

/* Rank tag (CHAMPION / 2nd / 3rd) */
.lb-rank-tag {
  font-family: var(--mono);
  font-weight: 800;
  font-size: 9.5px;
  letter-spacing: .14em;
  padding: 4px 10px;
  border-radius: 4px;
  text-transform: uppercase;
  margin-bottom: 10px;
  white-space: nowrap;
}
.lb-rank-tag-gold {
  background: linear-gradient(135deg, #f4d35e, #d4af37);
  color: #1a1a0a;
  box-shadow: 0 2px 10px rgba(212, 175, 55, 0.4);
}
.lb-rank-tag-silver {
  background: linear-gradient(135deg, #e0e0e0, #b8b8b8);
  color: #1a1a1a;
}
.lb-rank-tag-bronze {
  background: linear-gradient(135deg, #d99668, #aa6e3c);
  color: #1a0e08;
}

/* Name + handle + score */
.lb-name {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-0);
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  letter-spacing: -.005em;
  padding: 0 4px;
}
.lb-slot-1 .lb-name {
  font-size: 16px;
}
.lb-handle {
  font-size: 11px;
  color: var(--text-4);
  font-family: var(--mono);
  margin-top: 2px;
  margin-bottom: 10px;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.lb-score {
  font-size: 22px;
  font-weight: 800;
  color: var(--accent);
  font-family: var(--mono);
  margin-bottom: 14px;
  line-height: 1;
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
}
.lb-score-unit {
  font-size: 9px;
  font-weight: 600;
  color: var(--text-4);
  letter-spacing: .08em;
  text-transform: uppercase;
}
.lb-score-gold {
  color: var(--gold);
  font-size: 30px;
  text-shadow: 0 0 18px rgba(212, 175, 55, 0.45);
}
.lb-score-silver {
  color: #d0d0d0;
}
.lb-score-bronze {
  color: #d99668;
}

/* Pillar (visual podium block) */
.lb-pillar {
  width: 100%;
  border-radius: 8px 8px 0 0;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.lb-pillar-gold {
  height: 64px;
  background: linear-gradient(180deg, rgba(212, 175, 55, 0.20), rgba(212, 175, 55, 0.04));
  border: 1px solid rgba(212, 175, 55, 0.30);
  border-bottom: none;
  box-shadow: inset 0 1px 0 rgba(255, 215, 0, 0.20);
}
.lb-pillar-silver {
  height: 42px;
  background: linear-gradient(180deg, rgba(192, 192, 192, 0.14), rgba(192, 192, 192, 0.02));
  border: 1px solid rgba(192, 192, 192, 0.22);
  border-bottom: none;
}
.lb-pillar-bronze {
  height: 28px;
  background: linear-gradient(180deg, rgba(205, 127, 50, 0.16), rgba(205, 127, 50, 0.02));
  border: 1px solid rgba(205, 127, 50, 0.26);
  border-bottom: none;
}
.lb-pillar-numeral {
  font-family: var(--mono);
  font-weight: 800;
  font-size: 22px;
  color: rgba(255, 255, 255, 0.10);
  letter-spacing: -.02em;
  user-select: none;
}
.lb-pillar-gold .lb-pillar-numeral {
  font-size: 30px;
  color: rgba(212, 175, 55, 0.22);
}

/* TIER SECTIONS */
.lb-tier {
  margin: 0 auto 22px;
  max-width: 640px;
  padding: 0 12px;
}
.lb-tier-header {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 14px 6px 10px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 10px;
}
.lb-tier-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
  position: relative;
  top: -1px;
}
.lb-tier-dot-elite {
  background: var(--accent);
  box-shadow: 0 0 8px rgba(0, 196, 114, 0.55);
}
.lb-tier-dot-rising {
  background: var(--text-3);
}
.lb-tier-label {
  font-size: 13px;
  font-weight: 800;
  color: var(--text-0);
  letter-spacing: .06em;
  text-transform: uppercase;
}
.lb-tier-elite .lb-tier-label { color: var(--accent); }
.lb-tier-rising .lb-tier-label { color: var(--text-2); }
.lb-tier-range {
  font-size: 10px;
  color: var(--text-4);
  font-family: var(--mono);
  letter-spacing: .04em;
  margin-left: auto;
}
.lb-tier-body {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* ROW (Elite + Rising) */
.lb-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border-radius: 10px;
  background: var(--bg-1);
  border: 1px solid var(--border);
  cursor: pointer;
  transition: border-color .15s, transform .15s, background .15s;
}
.lb-row:hover {
  border-color: rgba(0, 196, 114, 0.30);
  background: rgba(0, 196, 114, 0.02);
  transform: translateX(2px);
}
.lb-row-elite {
  background: linear-gradient(180deg, rgba(0, 196, 114, 0.04), rgba(0, 196, 114, 0.01));
  border-color: rgba(0, 196, 114, 0.16);
}
.lb-row-rank {
  font-family: var(--mono);
  font-weight: 800;
  font-size: 16px;
  color: var(--text-3);
  width: 32px;
  text-align: center;
  flex-shrink: 0;
}
.lb-row-elite .lb-row-rank { color: var(--accent); }
.lb-row-info {
  flex: 1;
  min-width: 0;
}
.lb-row-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-0);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.lb-row-meta {
  font-size: 11px;
  color: var(--text-3);
  margin-top: 2px;
  font-family: var(--mono);
}
.lb-row-score {
  text-align: right;
  flex-shrink: 0;
  min-width: 56px;
}
.lb-row-score-num {
  font-size: 16px;
  font-weight: 800;
  color: var(--accent);
  font-family: var(--mono);
  line-height: 1;
}
.lb-row-score-label {
  font-size: 9px;
  color: var(--text-4);
  letter-spacing: .08em;
  text-transform: uppercase;
  margin-top: 3px;
}

/* FOOTER NOTE */
.lb-tree-foot {
  max-width: 640px;
  margin: 24px auto 0;
  padding: 14px 16px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--border);
  font-size: 12px;
  color: var(--text-3);
  line-height: 1.6;
  text-align: center;
}

/* MOBILE BREAKPOINT */
@media (max-width: 600px) {
  .lb-tree-title { font-size: 22px; }
  .lb-podium-grid { gap: 6px; }
  .lb-slot-1 .lb-avatar-wrap { width: 76px; height: 76px; }
  .lb-slot-2 .lb-avatar-wrap,
  .lb-slot-3 .lb-avatar-wrap { width: 56px; height: 56px; }
  .lb-name { font-size: 12px; }
  .lb-slot-1 .lb-name { font-size: 14px; }
  .lb-handle { font-size: 10px; }
  .lb-score { font-size: 18px; }
  .lb-score-gold { font-size: 22px; }
  .lb-rank-tag { font-size: 8px; padding: 3px 8px; }
  .lb-pillar-gold { height: 48px; }
  .lb-pillar-silver { height: 32px; }
  .lb-pillar-bronze { height: 22px; }
  .lb-pillar-gold .lb-pillar-numeral { font-size: 22px; }
  .lb-pillar-numeral { font-size: 16px; }
}

/* ───────────────────────────────────────────────────────────────────
   P65.14 — "+N rewards" pill on the Profile Cred Score card
   The bonus is rendered as a clearly-separate gold pill (not added
   into the cred number) so the user's Cred Score on their profile
   exactly matches the number on the Leaderboard / Weekly Top 3.
   ─────────────────────────────────────────────────────────────────── */
.cred-bonus-pill {
  display: inline-block;
  margin-top: 4px;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(191, 162, 78, 0.10);
  border: 1px solid rgba(191, 162, 78, 0.30);
  color: var(--gold);
  font-family: var(--mono);
  font-weight: 700;
  font-size: 9px;
  letter-spacing: .04em;
  cursor: help;
}

/* ───────────────────────────────────────────────────────────────────
   P65.12 — Sidebar widget title row + per-tab leaderboard blurb
   The right-rail cards (Hot Creators, Weekly Top 3) need a small
   contextual subtitle next to the title so the user instantly knows
   the time window. Same idea on the Leaderboard page.
   ─────────────────────────────────────────────────────────────────── */
.rc-title-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}
.rc-title-sub {
  font-size: 9px;
  color: var(--text-4);
  font-weight: 500;
  letter-spacing: .04em;
  text-transform: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  cursor: help;
  white-space: nowrap;
}
.rc-title-sub:hover { color: var(--text-3); }

/* Per-tab disambiguation strip on the Leaderboard. */
.leaderboard-blurb {
  margin: 0 0 16px;
  padding: 12px 14px;
  border-radius: 10px;
  background: linear-gradient(180deg,
    rgba(0, 196, 114, 0.05),
    rgba(0, 196, 114, 0.015));
  border: 1px solid rgba(0, 196, 114, 0.14);
}
.leaderboard-blurb-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 6px;
}
.leaderboard-blurb-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-0);
  letter-spacing: -.005em;
}
.leaderboard-blurb-window {
  font-size: 10px;
  color: var(--accent);
  font-family: var(--mono);
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.leaderboard-blurb-formula {
  font-size: 12px;
  color: var(--text-2);
  line-height: 1.55;
  margin-bottom: 4px;
}
.leaderboard-blurb-climb {
  font-size: 11px;
  color: var(--text-4);
  line-height: 1.5;
  font-style: italic;
}

/* ───────────────────────────────────────────────────────────────────
   P65.11 — Settings → Blocked list
   Each row mirrors the visual rhythm of the followers/following list:
   avatar · name+handle · action button. Empty / loading states share
   the same wrapper so layout doesn't shift.
   ─────────────────────────────────────────────────────────────────── */
.blocked-list {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--border);
}
.blocked-list-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 4px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}
.blocked-list-info { flex: 1; min-width: 0; }
.blocked-list-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-0);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.blocked-list-handle {
  font-size: 11px;
  color: var(--text-4);
  font-family: var(--mono);
  margin-top: 2px;
}
.blocked-list-when {
  color: var(--text-4);
  font-family: inherit;
}
.blocked-list-empty {
  padding: 36px 18px;
  text-align: center;
}
.blocked-list-empty-icon {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(239, 68, 68, 0.10);
  color: #ef4444;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 10px;
}
.blocked-list-empty-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-1);
  margin-bottom: 4px;
}
.blocked-list-empty-desc {
  font-size: 12px;
  color: var(--text-4);
  line-height: 1.55;
  max-width: 360px;
  margin: 0 auto;
}
/* Reusable: clickable settings rows (used by the Privacy → Blocked
   link that navigates to the new tab). */
.settings-row-clickable {
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 12px;
  transition: background .15s;
}
.settings-row-clickable:hover {
  background: rgba(255, 255, 255, 0.02);
}

/* ───────────────────────────────────────────────────────────────────
   P65.11 — Blocked profile card
   Rendered in place of a user-profile page when the viewer has
   blocked that user. Single-purpose: confirm + offer Unblock.
   ─────────────────────────────────────────────────────────────────── */
.blocked-profile-card {
  margin: 24px 16px;
  padding: 32px 22px;
  border-radius: 14px;
  background: linear-gradient(180deg,
    rgba(239, 68, 68, 0.06),
    rgba(0, 0, 0, 0));
  border: 1px solid rgba(239, 68, 68, 0.22);
  text-align: center;
}
.blocked-profile-icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: rgba(239, 68, 68, 0.12);
  color: #ef4444;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 14px;
}
.blocked-profile-title {
  font-size: 17px;
  font-weight: 800;
  color: var(--text-0);
  letter-spacing: -.01em;
  margin-bottom: 6px;
}
.blocked-profile-desc {
  font-size: 13px;
  color: var(--text-3);
  line-height: 1.55;
  max-width: 440px;
  margin: 0 auto 18px;
}
.blocked-profile-actions {
  display: inline-flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
}

/* ───────────────────────────────────────────────────────────────────
   P65.8 — Call attribution strip
   Sits above the per-viewer call card. Compact, two-line, accent-tinted.
   ─────────────────────────────────────────────────────────────────── */
.call-attr {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 12px 0 0;
  padding: 10px 12px;
  border-radius: 10px;
  background: linear-gradient(180deg,
    rgba(0, 196, 114, 0.08),
    rgba(0, 196, 114, 0.03));
  border: 1px solid rgba(0, 196, 114, 0.18);
}
.call-attr-icon {
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 196, 114, 0.14);
  color: var(--accent);
}
.call-attr-text { flex: 1 1 auto; min-width: 0; }
.call-attr-head {
  font-size: 13px;
  line-height: 1.45;
  color: var(--text-1);
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.call-attr-creator-link {
  color: var(--text-0);
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
}
.call-attr-creator-link:hover { color: var(--accent); }
.call-attr-token {
  font-family: var(--mono);
  font-weight: 700;
  color: var(--accent);
  letter-spacing: -.01em;
}
.call-attr-entry {
  font-family: var(--mono);
  color: var(--text-1);
  font-weight: 600;
}
.call-attr-when {
  font-size: 11px;
  color: var(--text-4);
  font-family: var(--mono);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 1px 8px;
  letter-spacing: .02em;
}
.call-attr-sub {
  margin-top: 3px;
  font-size: 11px;
  color: var(--text-3);
  line-height: 1.4;
}
.call-attr-count-num {
  color: var(--accent);
  font-family: var(--mono);
  font-weight: 700;
}

.call-card-row-loading {
  position: relative;
  min-height: 64px;
}
.call-card-skel-overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: linear-gradient(180deg, rgba(8,10,10,.85) 0%, rgba(8,10,10,.75) 100%);
  border-radius: 6px;
  pointer-events: none;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  color: var(--text-2);
  letter-spacing: .04em;
}
.call-card-skel-spinner {
  width: 14px; height: 14px;
  border: 2px solid var(--text-4);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: callSkelSpin .7s linear infinite;
}
@keyframes callSkelSpin { to { transform: rotate(360deg); } }
.call-card-skel-text {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  color: var(--text-2);
  letter-spacing: .04em;
}
.call-card-skel-line {
  display: inline-block;
  height: 14px;
  width: 60px;
  border-radius: 3px;
  background: linear-gradient(90deg,
    rgba(255,255,255,.04) 0%,
    rgba(255,255,255,.08) 50%,
    rgba(255,255,255,.04) 100%);
  background-size: 200% 100%;
  animation: callSkelShimmer 1.4s ease-in-out infinite;
  vertical-align: middle;
}
@keyframes callSkelShimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -100% 0; }
}

/* Optimistic-pending state (after click, before server confirms) */
.call-card-pending {
  border-color: rgba(0,196,114,.18);
  background: linear-gradient(180deg, rgba(0,196,114,.04) 0%, var(--bg-2) 100%);
}
.call-card-pending .call-card-status {
  animation: callPendingPulse 1.4s ease-in-out infinite;
}
@keyframes callPendingPulse {
  0%, 100% { opacity: .7; }
  50%      { opacity: 1; }
}

/* ═══════════════════════════════════════════════════════════════
   POST ACTION BUTTON — TRACKING STATE (P60.4)
   Shown when a call exists but no snapshot has landed yet.
   Subtle pulse dot + label so it's clear the call is alive and
   waiting for the first price tick.
   ═══════════════════════════════════════════════════════════════ */
.post-action-call-tracking {
  color: var(--text-2);
  border: 1px solid var(--border);
  background: var(--bg-3);
  border-radius: 6px;
  padding: 4px 9px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.post-action-call-tracking:hover {
  background: var(--bg-4);
  color: var(--text-1);
  border-color: rgba(255,255,255,.10);
}
.post-action-call-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--accent);
  flex-shrink: 0;
  box-shadow: 0 0 0 0 rgba(0,196,114,.55);
  animation: postCallTrackingDot 2.0s ease-in-out infinite;
}
@keyframes postCallTrackingDot {
  0%   { box-shadow: 0 0 0 0 rgba(0,196,114,.55); opacity: 1; }
  60%  { box-shadow: 0 0 0 4px rgba(0,196,114,0); opacity: .7; }
  100% { box-shadow: 0 0 0 0 rgba(0,196,114,0); opacity: 1; }
}

/* P61: Untrackable pill — shown after repeated refresh failures.
   Amber tone (warning, not error) since the call still exists, the
   price feed just couldn't be locked in. Mostly affects legacy
   ticker-only entries whose ticker doesn't strict-match a Dexscreener
   pair. New calls go through resolve+freeze so they shouldn't land here. */
.post-action-call-untrackable {
  color: rgba(245, 158, 11, .85);
  border: 1px solid rgba(245, 158, 11, .25);
  background: rgba(245, 158, 11, .06);
  border-radius: 6px;
  padding: 4px 9px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.post-action-call-untrackable:hover {
  background: rgba(245, 158, 11, .10);
  color: rgba(245, 158, 11, 1);
  border-color: rgba(245, 158, 11, .40);
}
.post-action-call-untrackable svg {
  opacity: .8;
}

/* ═══════════════════════════════════════════════════════════════
   REPORT MODAL (P60.5)
   ═══════════════════════════════════════════════════════════════ */
.report-icon {
  width: 36px; height: 36px; border-radius: 8px;
  background: rgba(196,64,64,.10); border: 1px solid rgba(196,64,64,.22);
  color: #ef4444;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.report-subtitle {
  font-size: 11px; color: var(--text-3); line-height: 1.4;
  margin-top: 2px; max-width: 340px;
}
.report-preview {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; border-radius: 8px;
  background: var(--bg-3); border: 1px solid var(--border);
  margin-bottom: 14px;
}
.report-preview-text { flex: 1; min-width: 0; }
.report-preview-title {
  font-size: 12.5px; font-weight: 600; color: var(--text-1);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.report-preview-meta {
  font-family: var(--mono); font-size: 10.5px;
  color: var(--text-3); margin-top: 2px;
}

.report-anon-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 10px;
  background: rgba(0,196,114,.06); border: 1px solid rgba(0,196,114,.18);
  border-radius: 14px;
  font-size: 11px; color: var(--text-1); font-weight: 500;
  margin-bottom: 16px;
}
.report-anon-pill svg {
  color: var(--accent); flex-shrink: 0;
}

.report-section-label {
  font-family: var(--mono); font-size: 10px; font-weight: 600;
  color: var(--text-3); letter-spacing: .12em; text-transform: uppercase;
  margin-bottom: 8px;
  display: flex; align-items: center; gap: 8px;
}
.report-section-label-optional {
  font-family: var(--mono); font-size: 9.5px; font-weight: 500;
  color: var(--text-4); letter-spacing: .04em; text-transform: none;
}

.report-reasons {
  display: flex; flex-direction: column; gap: 6px;
}
.report-reason {
  display: flex; align-items: flex-start; gap: 11px;
  padding: 11px 14px; border-radius: 8px;
  background: var(--bg-3); border: 1px solid var(--border);
  cursor: pointer; transition: background .15s ease, border-color .15s ease;
  position: relative;
}
.report-reason:hover {
  background: var(--bg-4); border-color: rgba(255,255,255,.10);
}
.report-reason-selected {
  background: rgba(196,64,64,.05);
  border-color: rgba(196,64,64,.30) !important;
}
.report-reason-radio {
  position: absolute; opacity: 0; pointer-events: none;
}
.report-reason-icon {
  flex-shrink: 0; color: var(--text-3); margin-top: 1px;
  display: flex; align-items: center; justify-content: center;
  width: 18px; height: 18px;
}
.report-reason-selected .report-reason-icon { color: #ef4444; }
.report-reason-content { flex: 1; min-width: 0; }
.report-reason-label {
  font-size: 13px; font-weight: 600; color: var(--text-0);
  margin-bottom: 2px;
}
.report-reason-desc {
  font-size: 11.5px; color: var(--text-3); line-height: 1.45;
}
.report-reason-check {
  flex-shrink: 0; width: 20px; height: 20px;
  border: 1.5px solid var(--text-4); border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: transparent;
  transition: all .15s ease;
  align-self: center;
}
.report-reason-selected .report-reason-check {
  background: #ef4444;
  border-color: #ef4444;
  color: #fff;
}

.report-detail-input {
  width: 100%; min-height: 88px;
  padding: 10px 12px;
  background: var(--bg-3); border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text-0); font-family: var(--font); font-size: 13px;
  line-height: 1.55;
  resize: vertical;
  outline: none;
  transition: border-color .15s ease;
}
.report-detail-input:focus {
  border-color: rgba(196,64,64,.40);
}
.report-detail-input::placeholder {
  color: var(--text-4);
}
.report-detail-counter {
  font-family: var(--mono); font-size: 10px;
  color: var(--text-4); text-align: right; margin-top: 4px;
}

.report-next {
  margin-top: 16px;
  padding: 11px 14px; border-radius: 8px;
  background: rgba(255,255,255,.02);
  border: 1px dashed rgba(255,255,255,.08);
}
.report-next-title {
  font-family: var(--mono); font-size: 9.5px; font-weight: 600;
  color: var(--text-3); letter-spacing: .12em; text-transform: uppercase;
  margin-bottom: 6px;
}
.report-next-list {
  margin: 0; padding-left: 16px;
  font-size: 11.5px; color: var(--text-2); line-height: 1.55;
}
.report-next-list li { margin-bottom: 2px; }

/* Submit button gets red tint to differentiate from the green primaries
   used elsewhere — reporting is a serious, distinct action. */
.report-submit-btn {
  background: #ef4444 !important;
  border-color: #ef4444 !important;
  color: #fff !important;
}
.report-submit-btn:hover:not(:disabled) {
  background: #dc2626 !important;
  border-color: #dc2626 !important;
}
.report-submit-btn:disabled {
  background: rgba(196,64,64,.20) !important;
  border-color: rgba(196,64,64,.20) !important;
  color: rgba(255,255,255,.45) !important;
  cursor: not-allowed;
}

/* ─── Success state inside the same modal ─── */
.report-success {
  display: flex; flex-direction: column; align-items: center;
  text-align: center; padding: 12px 8px;
}
.report-success-glyph {
  width: 56px; height: 56px; border-radius: 50%;
  background: rgba(0,196,114,.12); border: 1px solid rgba(0,196,114,.30);
  color: var(--accent);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 14px;
  animation: reportSuccessPop .35s cubic-bezier(.34,1.56,.64,1);
}
@keyframes reportSuccessPop {
  0%   { transform: scale(.5); opacity: 0; }
  100% { transform: scale(1);   opacity: 1; }
}
.report-success-title {
  font-size: 17px; font-weight: 700; color: var(--text-0);
  margin-bottom: 8px;
}
.report-success-body {
  font-size: 13px; color: var(--text-2); line-height: 1.55;
  max-width: 380px; margin-bottom: 18px;
}
.report-success-block-hint {
  margin-top: 12px; padding-top: 12px;
  border-top: 1px solid var(--border);
  font-size: 12px; color: var(--text-3);
}
.report-success-block-hint strong {
  color: var(--text-1); font-weight: 600;
}
.report-success-actions {
  display: flex; gap: 10px; justify-content: center;
  flex-wrap: wrap;
}

/* ═══════════════════════════════════════════════════════════════
   PROFILE COVER MENU (P60.6) — three-dot dropdown on the cover
   banner of OTHER users' profiles. Block / report / share actions.
   ═══════════════════════════════════════════════════════════════ */
.profile-cover-menu-btn {
  position: absolute;
  top: 10px; right: 10px;
  width: 36px; height: 36px;
  border-radius: 50%;
  background: rgba(0,0,0,.55);
  border: 1px solid rgba(255,255,255,.10);
  color: var(--text-0);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: background .15s ease, border-color .15s ease, transform .12s ease;
  z-index: 5;
}
.profile-cover-menu-btn:hover {
  background: rgba(0,0,0,.75);
  border-color: rgba(255,255,255,.20);
  transform: scale(1.04);
}
.profile-cover-menu-btn:active {
  transform: scale(.96);
}

/* ─── P65.341 — In-profile search affordance ─────────────────────
   X-style.  Closed: a circular search icon that lives next to the
   3-dot menu on the cover.  Click expands it into an inline input
   that slides in from the right.  Esc or the × button closes and
   clears the query, which is the same flow Twitter/X uses on its
   profile search bar.
   Position rules:
     • Own profile (no cover menu): icon sits at right: 10px
     • Other profile (has menu):    icon sits at right: 54px (left
       of the menu) — `.has-cover-menu` selector handles this. */
.profile-cover-search {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 6;
  display: flex;
  align-items: center;
}
.profile-cover-search.has-cover-menu {
  right: 54px;  /* leave 44px for the 36px menu button + 8px gap */
}
.profile-cover-search-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(0,0,0,.55);
  border: 1px solid rgba(255,255,255,.10);
  color: var(--text-0);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: background .15s ease, border-color .15s ease, transform .12s ease, color .12s ease;
  padding: 0;
}
.profile-cover-search-btn:hover {
  background: rgba(0,0,0,.75);
  border-color: rgba(0,196,114,.45);
  color: var(--accent);
  transform: scale(1.04);
}
.profile-cover-search-btn:active { transform: scale(.96); }

/* Open state — the icon swaps for an inline input + close button.
   The whole wrapper widens; we animate it in via a small slide-in
   keyframe so it feels deliberate instead of a hard pop. */
.profile-cover-search.is-open {
  background: rgba(12, 14, 18, 0.78);
  border: 1px solid rgba(0, 196, 114, 0.35);
  border-radius: 999px;
  padding: 0 6px 0 12px;
  height: 36px;
  min-width: 240px;
  box-shadow: 0 4px 18px rgba(0,0,0,.40), 0 0 0 1px rgba(0,196,114,.10);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  animation: profileCoverSearchIn .26s cubic-bezier(.34, 1.12, .64, 1) both;
}
.profile-cover-search-input {
  flex: 1;
  height: 100%;
  background: transparent;
  border: none;
  outline: none;
  color: var(--text-0);
  font: inherit;
  font-size: 13px;
  letter-spacing: 0.01em;
  min-width: 0;
  padding: 0;
}
.profile-cover-search-input::placeholder {
  color: var(--text-4);
  font-size: 12.5px;
}
.profile-cover-search-close {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: none;
  background: rgba(255,255,255,.06);
  color: var(--text-2);
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: background .12s ease, color .12s ease, transform .1s ease;
  padding: 0;
  margin-left: 6px;
}
.profile-cover-search-close:hover {
  background: rgba(255,255,255,.10);
  color: var(--text-0);
}
.profile-cover-search-close:active { transform: scale(.92); }

@keyframes profileCoverSearchIn {
  0%   { transform: translateX(8px) scale(.94); opacity: 0; }
  100% { transform: translateX(0)    scale(1);   opacity: 1; }
}

/* Banners are sometimes narrow on mobile; collapse the open input
   to roughly the available cover width so it doesn't overflow. */
@media (max-width: 480px) {
  .profile-cover-search.is-open {
    min-width: 0;
    width: calc(100% - 80px);     /* leave room for menu + edges */
    right: 10px;
  }
  .profile-cover-search.has-cover-menu.is-open {
    width: calc(100% - 124px);
  }
}

/* Result-count header shown on the Posts tab while a search query
   is active.  Sits above the filtered post list. */
.profile-search-results-head {
  margin: 0 4px 12px;
  padding: 8px 12px;
  background: rgba(0, 196, 114, 0.04);
  border: 1px solid rgba(0, 196, 114, 0.18);
  border-radius: 8px;
  font-size: 12px;
  color: var(--text-2);
  letter-spacing: 0.01em;
}

.profile-cover-menu {
  position: absolute;
  top: 52px; right: 10px;
  z-index: 10;
  min-width: 220px;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0,0,0,.55), 0 0 0 1px rgba(0,196,114,.05);
  padding: 6px;
  display: flex; flex-direction: column; gap: 1px;
  animation: profileCoverMenuIn .14s ease-out;
}
@keyframes profileCoverMenuIn {
  from { opacity: 0; transform: translateY(-4px) scale(.98); }
  to   { opacity: 1; transform: translateY(0)    scale(1); }
}
.profile-cover-menu-item {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 12px;
  background: transparent; border: 0;
  border-radius: 6px;
  color: var(--text-1);
  font-family: var(--font);
  font-size: 13px; font-weight: 500;
  cursor: pointer; text-align: left;
  transition: background .12s ease, color .12s ease;
}
.profile-cover-menu-item:hover {
  background: var(--bg-3);
  color: var(--text-0);
}
.profile-cover-menu-item svg {
  flex-shrink: 0;
  color: var(--text-3);
  transition: color .12s ease;
}
.profile-cover-menu-item:hover svg {
  color: var(--text-1);
}
.profile-cover-menu-item-danger {
  color: var(--red, #ef4444);
}
.profile-cover-menu-item-danger:hover {
  background: rgba(196,64,64,.10);
  color: var(--red, #ef4444);
}
.profile-cover-menu-item-danger svg {
  color: var(--red, #ef4444);
}
.profile-cover-menu-item-danger:hover svg {
  color: var(--red, #ef4444);
}
.profile-cover-menu-divider {
  height: 1px;
  background: var(--border);
  margin: 4px 6px;
}

/* ═══════════════════════════════════════════════════════════════════
   UNIFIED SCORE BREAKDOWN POPOVERS (P61.4)
   ─────────────────────────────────────────────────────────────────
   Tap-to-reveal popover that shows how a Cred / Weekly / Influence
   score is composed. Same shape used in three places (profile cred
   card, influence strip, weekly top sidebar) for consistency.
   ═══════════════════════════════════════════════════════════════════ */

.cred-score-card,
.influence-strip,
.weekly-row {
  position: relative;
}

.cred-score-card { cursor: pointer; }
.cred-score-card:hover { background: rgba(255,255,255,.02); }

.cred-info-glyph {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 13px;
  height: 13px;
  margin-left: 4px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.18);
  font-size: 9px;
  font-weight: 700;
  font-family: var(--mono);
  color: var(--text-3);
  font-style: italic;
  line-height: 1;
  vertical-align: middle;
  cursor: help;
  user-select: none;
}
.cred-info-glyph-sm {
  width: 11px; height: 11px; font-size: 8px;
  margin-left: 3px;
}
.cred-score-card:hover .cred-info-glyph,
.influence-strip:hover .cred-info-glyph,
.weekly-score-pill:hover .cred-info-glyph {
  border-color: rgba(255,255,255,.32);
  color: var(--text-1);
}

.cred-breakdown {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 50;
  min-width: 320px;
  max-width: 380px;
  padding: 10px 12px;
  background: var(--bg-1);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 10px 32px rgba(0,0,0,.45);
  font-family: var(--mono);
  font-size: 11px;
  color: var(--text-1);
  line-height: 1.5;
  cursor: default;
  text-align: left;
}
.cred-breakdown[hidden] { display: none; }
@media (max-width: 600px) {
  .cred-breakdown {
    right: auto;
    left: 0;
    min-width: min(320px, calc(100vw - 32px));
    max-width: calc(100vw - 32px);
  }
}

.score-bd-head {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-3);
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.score-bd-source {
  font-size: 8px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--accent);
  background: rgba(0,196,114,.10);
  border: 1px solid rgba(0,196,114,.20);
  padding: 1px 5px;
  border-radius: 3px;
}
.score-bd-source-local {
  color: var(--text-3);
  background: var(--bg-3);
  border-color: var(--border);
}

.score-bd-row {
  display: grid;
  grid-template-columns: 70px 1fr auto;
  gap: 8px;
  padding: 4px 0;
  border-top: 1px dashed rgba(255,255,255,.05);
  align-items: baseline;
}
.score-bd-row:first-of-type { border-top: none; }

.score-bd-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-2);
}
.score-bd-detail {
  font-size: 10px;
  color: var(--text-4);
  font-family: var(--mono);
  word-break: break-word;
}
.score-bd-pts {
  font-size: 11px;
  font-weight: 700;
  font-family: var(--mono);
  color: var(--accent);
  white-space: nowrap;
}
.score-bd-pts.is-neg { color: var(--red, #ef4444); }

.score-bd-formula .score-bd-pts { color: #3b8efe; }

.score-bd-total {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 0 4px;
  margin-top: 4px;
  border-top: 1px solid rgba(255,255,255,.10);
  font-size: 12px;
  font-weight: 800;
  font-family: var(--mono);
  color: var(--text-0);
}
.score-bd-foot {
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px dashed rgba(255,255,255,.05);
  font-size: 10px;
  color: var(--text-4);
  font-family: var(--font-sans, system-ui);
  font-style: italic;
  line-height: 1.4;
}

/* Weekly-top score pill becomes its own clickable target */
.weekly-score-pill {
  display: inline-flex;
  align-items: center;
  font-size: 10px;
  color: var(--gold);
  font-weight: 700;
  font-family: var(--mono);
  padding: 2px 6px;
  border-radius: 4px;
  background: rgba(191,162,78,.06);
  border: 1px solid rgba(191,162,78,.18);
  cursor: pointer;
  transition: background .12s ease, border-color .12s ease;
}
.weekly-score-pill:hover {
  background: rgba(191,162,78,.14);
  border-color: rgba(191,162,78,.35);
}
.weekly-score-pill .cred-info-glyph {
  border-color: rgba(191,162,78,.35);
  color: rgba(191,162,78,.8);
}

.weekly-row .weekly-row-inner {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 1;
  min-width: 0;
  cursor: pointer;
}


/* P62: AI Studio daily quota pill (10/day free, unlimited Pro) */
.ai-quota-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 10px;
  background: var(--bg-1);
  border: 1px solid var(--border);
  border-radius: 6px;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--text-3);
  white-space: nowrap;
}
.ai-quota-num {
  color: var(--text-1);
  font-weight: 700;
}
.ai-quota-sep {
  color: var(--text-4);
  margin: 0 1px;
}
.ai-quota-limit {
  color: var(--text-3);
}
.ai-quota-label {
  color: var(--text-4);
  font-family: inherit;
  font-size: 10px;
  margin-left: 4px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.ai-quota-low {
  color: var(--gold);
  border-color: rgba(191, 162, 78, 0.30);
  background: rgba(191, 162, 78, 0.06);
}
.ai-quota-low .ai-quota-num {
  color: var(--gold);
}
.ai-quota-out {
  color: var(--red, #ef4444);
  border-color: rgba(239, 68, 68, 0.30);
  background: rgba(239, 68, 68, 0.05);
}
.ai-quota-out .ai-quota-num,
.ai-quota-out .ai-quota-limit {
  color: var(--red, #ef4444);
}
.ai-quota-pro {
  color: var(--accent);
  border-color: rgba(0, 196, 114, 0.30);
  background: rgba(0, 196, 114, 0.06);
  font-weight: 600;
}
.ai-quota-upgrade {
  margin-left: 6px;
  color: var(--gold);
  font-weight: 700;
  font-family: inherit;
  font-size: 10px;
  cursor: pointer;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.ai-quota-upgrade:hover { text-decoration: underline; }


/* P62: Vote-weight badge ("×2") shown on Pro users' vote buttons */
.vt-vote-weight {
  display: inline-flex;
  align-items: center;
  margin-left: 6px;
  padding: 2px 6px;
  background: rgba(0, 196, 114, 0.14);
  border: 1px solid rgba(0, 196, 114, 0.35);
  border-radius: 4px;
  color: var(--accent);
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.04em;
}
/* P65.416 — Support message notification styling */
.notif-support-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}
.notif-support-tag {
  display: inline-block;
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: rgba(255, 95, 95, 0.18);
  color: #fca5a5;
  padding: 2px 7px;
  border-radius: 4px;
  flex-shrink: 0;
}
.notif-support-headline {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-0);
}
.notif-support-preview {
  font-size: 12.5px;
  color: var(--text-2);
  line-height: 1.45;
  overflow-wrap: anywhere;
}
.notif-support-more {
  color: var(--accent);
  font-weight: 600;
  font-size: 11px;
  margin-left: 4px;
  cursor: pointer;
}

/* P65.416 — Support message modal */
.support-modal-backdrop {
  position: fixed; inset: 0;
  background: rgba(0, 0, 0, 0.75);
  z-index: 99999;
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
  animation: supportFadeIn 0.18s ease;
}
@keyframes supportFadeIn { from { opacity: 0; } to { opacity: 1; } }
.support-modal {
  background: var(--bg-1, #121417);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 16px;
  max-width: 520px;
  width: 100%;
  max-height: 80vh;
  display: flex; flex-direction: column;
  overflow: hidden;
  box-shadow: 0 24px 60px -16px rgba(0,0,0,0.7);
  animation: supportSlideIn 0.22s cubic-bezier(.2,.8,.2,1);
}
@keyframes supportSlideIn {
  from { opacity: 0; transform: translateY(12px) scale(0.98); }
  to   { opacity: 1; transform: none; }
}
.support-modal-head {
  padding: 18px 22px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  background: linear-gradient(180deg, rgba(255,255,255,0.02) 0%, transparent 100%);
}
.support-modal-tag {
  display: inline-block;
  font-size: 10px; font-weight: 800; letter-spacing: 0.1em;
  padding: 3px 9px;
  border-radius: 4px;
  margin-bottom: 8px;
}
.support-modal-headline {
  font-size: 18px; font-weight: 800;
  color: var(--text-0); letter-spacing: -0.01em;
  line-height: 1.3;
}
.support-modal-when {
  font-size: 11.5px;
  color: var(--text-3);
  font-family: var(--mono, monospace);
  margin-top: 6px;
}
.support-modal-body {
  padding: 18px 22px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-1);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  overflow-y: auto;
  flex: 1;
}
.support-modal-foot {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
  padding: 14px 22px;
  border-top: 1px solid rgba(255,255,255,0.06);
}
.support-modal-meta {
  font-size: 11.5px;
  color: var(--text-3);
}