/* ==========================================================================
   PAPERTRADERS.XYZ — REFINED DESIGN SYSTEM
   Clean, Elegant, Tactile Parchment Paper Aesthetic
   ========================================================================== */

:root {
  /* ========================================================================
     TOP BAR ONLY: Authentic papertrade.xyz Tactile Parchment Palette
     ======================================================================== */
  --tape-bg: #f4ecd8;
  --tape-border: rgba(88, 84, 74, 0.18);
  --tape-badge-bg: #efe4ca;
  --tape-text: #2a2520;
  
  --nav-bg: #faf6ed;
  --nav-border: rgba(88, 84, 74, 0.14);
  --nav-pill-bg: #f2ebd9;
  --nav-pill-hover: #ffffff;
  
  /* ========================================================================
     MAIN APPLICATION: Clean, Modern, Ultra-Professional White / Slate Theme
     ======================================================================== */
  --bg-app: #f8fafc; /* Crisp slate-50 background */
  --cream: #ffffff;  /* Pure clean white */
  --cream-2: #f8fafc; /* Subtle contrast panels */
  --cream-card: #ffffff;
  --cream-card-elevated: #ffffff;
  
  --ink: #0f172a; /* Slate 900 - high contrast, professional typography */
  --ink-secondary: #334155; /* Slate 700 */
  --ink-soft: #64748b; /* Slate 500 */
  
  /* Brand Accents */
  --crimson: #9e2a2b; /* Authentic brand crimson */
  --crimson-soft: rgba(158, 42, 43, 0.08);
  --crimson-border: rgba(158, 42, 43, 0.22);
  --gain-green: #15803d; /* Crisp profit green */
  --gain-soft: rgba(21, 128, 61, 0.08);
  --gain-border: rgba(21, 128, 61, 0.22);
  --loss-red: #9e2a2b;
  --gold-seal: #b45309;
  --gold-soft: rgba(180, 83, 9, 0.08);
  
  --font-sans: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'JetBrains Mono', monospace;
  
  --border-paper: 1px solid #e2e8f0; /* Crisp slate-200 border */
  --border-paper-strong: 1px solid #cbd5e1; /* Crisp slate-300 border */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  
  --shadow-paper: 0 1px 3px 0 rgba(0, 0, 0, 0.04), 0 1px 2px -1px rgba(0, 0, 0, 0.02);
  --shadow-hover: 0 6px 16px -2px rgba(15, 23, 42, 0.06), 0 2px 4px -2px rgba(15, 23, 42, 0.03);
  --transition: 0.18s cubic-bezier(0.16, 1, 0.3, 1);
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  min-height: 100%;
  overflow-x: hidden;
  max-width: 100vw;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  min-height: 100%;
  overflow-x: hidden;
  max-width: 100vw;
  width: 100%;
  background-color: var(--bg-app);
  background-image: none;
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.5;
  position: relative;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

#asciiBackground {
  display: none !important;
}

.app-wrapper {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

a {
  color: inherit;
  text-decoration: none;
}

/* ==========================================================================
   TICKER TAPE (BBO Oracle)
   ========================================================================== */
.ticker-tape {
  border-bottom: 1px solid var(--tape-border);
  background: var(--tape-bg);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  height: 34px;
  display: flex;
  align-items: center;
  overflow: hidden;
  position: sticky;
  top: 0;
  z-index: 100;
}

.tape-badge {
  background: var(--cream-2);
  border-right: 1px solid var(--tape-border);
  height: 100%;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 14px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-secondary);
  white-space: nowrap;
}

.tape-dot {
  width: 5px;
  height: 5px;
  background-color: var(--crimson);
  border-radius: 50%;
  animation: pulseDot 1.8s infinite;
}

@keyframes pulseDot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.3; transform: scale(0.8); }
}

.tape-viewport {
  overflow: hidden;
  white-space: nowrap;
  width: 100%;
}

.tape-track {
  display: inline-flex;
  gap: 28px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-secondary);
  animation: tickerSlide 45s linear infinite;
  padding-left: 16px;
}

.tape-track:hover {
  animation-play-state: paused;
}

@keyframes tickerSlide {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

.tape-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
}

.tape-sym { font-weight: 700; color: var(--ink); }
.tape-price { font-family: var(--font-mono); }
.tape-change.up { color: var(--gain-green); font-weight: 600; }
.tape-change.down { color: var(--loss-red); font-weight: 600; }

/* ==========================================================================
   CLEAN NAVBAR
   ========================================================================== */
.navbar {
  border-bottom: 1px solid var(--tape-border);
  background: rgba(244, 236, 216, 0.94);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  position: sticky;
  top: 34px;
  z-index: 90;
  box-shadow: 0 1px 4px rgba(42, 37, 32, 0.04);
}

.nav-container {
  max-width: 1620px;
  margin: 0 auto;
  padding: 10px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.brand-logo {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.wordmark-text {
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: -0.04em;
  color: var(--ink);
}

.wordmark-cursor {
  color: var(--crimson);
  opacity: 0.9;
  transition: opacity 0.5s ease;
  animation: 2.4s ease-in-out infinite wordmark-breathe;
}

@keyframes wordmark-breathe {
  0%, 100% { opacity: 0.95; }
  50% { opacity: 0.35; }
}

.brand-tag {
  font-size: 9.5px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--crimson);
  background: var(--crimson-soft);
  border: 1px solid var(--crimson-border);
  padding: 1px 6px;
  border-radius: 4px;
  font-weight: 700;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 3px;
  background: var(--tape-badge-bg);
  padding: 3px 4px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--tape-border);
}

.nav-tab-btn {
  background: transparent;
  border: none;
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--tape-text);
  padding: 6px 14px;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.16s ease;
  white-space: nowrap;
}

.nav-tab-btn:hover {
  color: #0f172a;
  background: rgba(42, 37, 32, 0.06);
}

.nav-tab-btn.active {
  background: #ffffff;
  color: #0f172a;
  font-weight: 700;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.nav-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.admin-nav-btn {
  background: rgba(225, 29, 72, 0.06) !important;
  border: 1px solid rgba(225, 29, 72, 0.25) !important;
  color: var(--crimson) !important;
  font-weight: 700 !important;
  box-shadow: 0 1px 4px rgba(225, 29, 72, 0.08);
}

.admin-nav-btn:hover {
  background: var(--crimson) !important;
  color: #fff !important;
  border-color: var(--crimson) !important;
  transform: translateY(-1px);
}

.admin-nav-btn .admin-shield {
  font-size: 13px;
}

/* Strict 36px Unified Pill Component for Navbar */
.nav-action-pill {
  height: 36px;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 0 12px;
  border-radius: var(--radius-sm);
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  border: 1px solid var(--tape-border);
  background: var(--tape-badge-bg);
  color: var(--tape-text);
  transition: all var(--transition);
  white-space: nowrap;
}

.nav-action-pill:hover {
  color: #0f172a;
  border-color: rgba(88, 84, 74, 0.35);
  background: #ffffff;
  transform: translateY(-1px);
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.06);
}

/* Notification Bell Button */
.notif-bell-container {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.notif-btn {
  width: 36px;
  height: 36px;
  padding: 0;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.notif-bell-icon {
  font-size: 14px;
}

.notif-badge-count {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 17px;
  height: 17px;
  line-height: 17px;
  padding: 0 4px;
  border-radius: 9px;
  background: var(--crimson);
  color: #fff;
  font-size: 9.5px;
  font-weight: 700;
  font-family: var(--font-mono);
  text-align: center;
  box-shadow: 0 2px 5px rgba(158, 42, 43, 0.4);
}

/* Streak Pill */
.streak-pill {
  border-color: var(--crimson-border);
  color: var(--crimson);
}

.streak-tag-badge {
  background: var(--crimson-soft);
  color: var(--crimson);
  font-size: 9px;
  font-weight: 700;
  padding: 2px 5px;
  border-radius: 3px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

/* Points Pill */
.points-pill {
  background: var(--cream-card);
  border: var(--border-paper);
  font-family: var(--font-mono);
  color: var(--ink);
  cursor: pointer;
}

.pts-spark { color: var(--gold-seal); }
.pts-number { font-weight: 700; color: var(--ink); font-size: 12.5px; }
.pts-lbl { color: var(--crimson); font-size: 11px; font-weight: 700; }
.pts-verified-badge {
  color: var(--gain-green);
  font-weight: 800;
  font-size: 11px;
  margin-left: 2px;
}

/* Share Trade Pill */
.btn-share-pill {
  background: var(--ink);
  color: var(--cream);
  border-color: var(--ink);
}

.btn-share-pill:hover {
  background: #1e293b;
  border-color: #1e293b;
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.15);
}

/* Wallet / Profile Pill */
.btn-wallet-pill {
  background: #ffffff;
  border: var(--border-paper);
  font-family: var(--font-sans);
  color: var(--ink);
  font-size: 12.5px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: var(--transition);
  overflow: visible !important;
  padding: 0 12px !important;
}

.btn-wallet-pill:hover {
  border-color: var(--border-paper-strong);
  background: var(--cream-2);
  transform: translateY(-1px);
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.04);
}

#walletAddressLabel {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  overflow: visible !important;
}

.nav-handle-text {
  max-width: 140px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 700;
}

.wallet-status-dot {
  display: none !important;
}

/* Notification Dropdown Popover */
.notif-dropdown-popover {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: 340px;
  max-width: 90vw;
  background: var(--cream-card);
  border: var(--border-paper-strong);
  border-radius: var(--radius-md);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.16);
  z-index: 1050;
  overflow: hidden;
  animation: notifDropIn 0.18s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes notifDropIn {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: translateY(0); }
}

.notif-dropdown-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  background: var(--cream-2);
  border-bottom: var(--border-paper);
}

.notif-head-title-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.notif-head-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.notif-sound-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--cream-1, #fbf7ee);
  border: 1px solid var(--border-paper, #e2d9cd);
  border-radius: var(--radius-xs, 4px);
  padding: 2px 7px;
  font-size: 11px;
  font-weight: 600;
  color: var(--ink-secondary);
  cursor: pointer;
  transition: all 0.16s ease;
  line-height: 1.2;
}

.notif-sound-btn:hover {
  border-color: var(--crimson);
  color: var(--crimson);
  background: #ffffff;
}

.notif-sound-btn.sound-muted {
  color: var(--ink-soft);
  opacity: 0.8;
  background: transparent;
}

.notif-sound-btn.sound-muted:hover {
  opacity: 1;
  color: var(--crimson);
}

/* Bell rocking animation on new notification */
@keyframes bellRing {
  0% { transform: rotate(0); }
  15% { transform: rotate(14deg) scale(1.1); }
  30% { transform: rotate(-14deg) scale(1.1); }
  45% { transform: rotate(10deg); }
  60% { transform: rotate(-10deg); }
  75% { transform: rotate(4deg); }
  85% { transform: rotate(-4deg); }
  100% { transform: rotate(0) scale(1); }
}

.notif-btn.bell-ringing .notif-bell-icon {
  display: inline-block;
  animation: bellRing 0.85s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
  transform-origin: top center;
  color: var(--crimson);
}

.notif-head-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
}

.notif-unread-tag {
  font-size: 10px;
  font-weight: 700;
  background: var(--crimson);
  color: #fff;
  padding: 1px 6px;
  border-radius: 10px;
}

.notif-clear-btn {
  background: none;
  border: none;
  font-size: 11px;
  font-weight: 600;
  color: var(--ink-soft);
  cursor: pointer;
  padding: 0;
  transition: color var(--transition);
}

.notif-clear-btn:hover {
  color: var(--crimson);
  text-decoration: underline;
}

/* Notification Filter Tabs */
.notif-filter-tabs {
  display: flex;
  background: var(--cream-2);
  padding: 6px 10px;
  gap: 4px;
  border-bottom: var(--border-paper);
  overflow-x: auto;
}

.notif-filter-tab {
  background: transparent;
  border: 1px solid transparent;
  border-radius: 12px;
  font-size: 10.5px;
  font-weight: 600;
  color: var(--ink-secondary);
  padding: 3px 8px;
  cursor: pointer;
  transition: all var(--transition);
  white-space: nowrap;
}

.notif-filter-tab:hover {
  color: var(--ink);
  background: var(--cream-card);
}

.notif-filter-tab.active {
  background: var(--ink);
  color: var(--cream);
  font-weight: 700;
}

.notif-list-body {
  max-height: 380px;
  overflow-y: auto;
}

.notif-empty-state {
  padding: 28px 16px;
  text-align: center;
  font-size: 12px;
  color: var(--ink-soft);
  line-height: 1.5;
}

.notif-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  border-bottom: var(--border-paper);
  cursor: pointer;
  transition: background var(--transition);
  position: relative;
}

.notif-item:hover {
  background: var(--cream-2);
}

.notif-item.unread {
  background: rgba(158, 42, 43, 0.05);
}

.notif-item-icon {
  font-size: 16px;
  flex-shrink: 0;
  margin-top: 1px;
}

.notif-item-content {
  flex: 1;
  min-width: 0;
}

.notif-item-title {
  font-size: 12px;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 2px;
}

.notif-item-msg {
  font-size: 11.5px;
  color: var(--ink-secondary);
  line-height: 1.4;
  word-break: break-word;
}

.notif-item-time {
  font-size: 10px;
  color: var(--ink-soft);
  font-family: var(--font-mono);
  margin-top: 4px;
}

.notif-item-side {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  margin-left: 6px;
}

.notif-unread-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--crimson);
}

.notif-item-read-btn {
  opacity: 0;
  background: var(--cream-card);
  border: 1px solid var(--tape-border);
  border-radius: 50%;
  width: 20px;
  height: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  color: var(--ink-soft);
  cursor: pointer;
  transition: all 0.15s ease;
}

.notif-item:hover .notif-item-read-btn {
  opacity: 1;
}

.notif-item-read-btn:hover {
  background: var(--gain-green);
  color: #fff;
  border-color: var(--gain-green);
}

/* ==========================================================================
   NOTIFICATION ACTIVITY MODAL (POPUP ON CLICK)
   ========================================================================== */
.notif-modal-container {
  max-width: 560px !important;
  width: 100% !important;
  border-radius: var(--radius-md);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
}

.notif-modal-header-info {
  display: flex;
  align-items: center;
  gap: 12px;
}

.notif-type-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: 14px;
  font-size: 11px;
  font-weight: 700;
  background: var(--crimson-soft);
  color: var(--crimson);
  border: 1px solid var(--crimson-border);
}

.notif-modal-body {
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* Actor Interaction Card */
.nam-actor-card {
  background: var(--cream-2);
  border: var(--border-paper);
  border-radius: var(--radius-sm);
  padding: 14px;
}

.nam-actor-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}

.nam-actor-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--cream-card);
  border: 1px solid var(--tape-border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  flex-shrink: 0;
}

.nam-actor-name {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--ink);
}

.nam-actor-action-desc {
  font-size: 11px;
  color: var(--ink-soft);
}

.nam-message-quote {
  background: var(--cream-card);
  border-left: 3px solid var(--crimson);
  border-radius: 0 4px 4px 0;
  padding: 10px 14px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink);
  word-break: break-word;
}

/* Referenced Post Card */
.nam-post-card {
  background: var(--cream-card);
  border: 1px solid var(--tape-border);
  border-radius: var(--radius-sm);
  padding: 14px;
  transition: all var(--transition);
}

.nam-post-card.clickable {
  cursor: pointer;
}

.nam-post-card.clickable:hover {
  border-color: var(--crimson);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06);
}

.nam-post-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.nam-post-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 4px;
  line-height: 1.35;
}

.nam-post-meta {
  font-size: 11px;
  color: var(--ink-soft);
  margin-bottom: 8px;
}

.nam-post-snippet {
  font-size: 12.5px;
  color: var(--ink-secondary);
  line-height: 1.5;
  background: var(--cream-2);
  padding: 8px 10px;
  border-radius: 4px;
  margin-top: 8px;
}

.nam-setup-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  background: var(--cream-2);
  padding: 6px 10px;
  border-radius: 4px;
  margin-top: 6px;
}

.nam-archived-card {
  background: var(--cream-2);
  border: 1px dashed var(--tape-border);
  border-radius: var(--radius-sm);
  padding: 14px;
  font-size: 12px;
  color: var(--ink-secondary);
  line-height: 1.5;
}

/* Quick Reply Box inside Modal */
.nam-quick-reply-box {
  background: var(--cream-2);
  border: var(--border-paper);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
}

.nam-quick-reply-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--ink-secondary);
  margin-bottom: 6px;
  display: block;
}

.nam-reply-row {
  display: flex;
  gap: 8px;
  align-items: center;
}

.nam-reply-input {
  flex: 1;
  background: var(--cream-card);
  border: var(--border-paper);
  border-radius: var(--radius-sm);
  padding: 8px 12px;
  font-size: 12.5px;
  color: var(--ink);
  outline: none;
}

.nam-reply-input:focus {
  border-color: var(--crimson);
}

.notif-modal-footer {
  padding: 14px 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: var(--border-paper);
  background: var(--cream-2);
}

.notif-footer-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Glowing Highlight Pulse for Scrolled Post */
@keyframes postGlowPulse {
  0% {
    box-shadow: 0 0 0 0 rgba(225, 29, 72, 0.55);
    border-color: var(--crimson);
  }
  35% {
    box-shadow: 0 0 25px 6px rgba(225, 29, 72, 0.45);
    border-color: var(--crimson);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(225, 29, 72, 0);
  }
}

.post-highlight-pulse {
  animation: postGlowPulse 2.8s cubic-bezier(0.2, 0.8, 0.2, 1) !important;
  border-color: var(--crimson) !important;
}

/* Clickable Author Links */
.author-link {
  cursor: pointer;
  transition: all var(--transition);
}

.author-link:hover {
  color: var(--crimson) !important;
  text-decoration: underline;
}

.post-author-name.author-link:hover {
  text-decoration-thickness: 1.5px;
}

/* Trader Profile Modal Styling */
.trader-profile-container {
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.tp-banner-card {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px;
  background: var(--cream-2);
  border: var(--border-paper);
  border-radius: var(--radius-md);
  margin-bottom: 16px;
}

.tp-avatar-wrap {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: transparent;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.tp-avatar-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

.tp-user-info {
  flex: 1;
  min-width: 0;
}

.tp-handle-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.tp-handle {
  font-size: 16px;
  font-weight: 700;
  color: var(--ink);
  margin: 0;
}

.tp-tier-pill {
  font-size: 10px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 12px;
  background: var(--gain-soft);
  color: var(--gain-green);
  border: 1px solid rgba(29, 115, 68, 0.3);
}

.tp-tier-pill.unverified {
  background: var(--crimson-soft);
  color: var(--crimson);
  border-color: var(--crimson-border);
}

.tp-bio-text {
  font-size: 12.5px;
  color: var(--ink-secondary);
  margin: 6px 0 8px;
  line-height: 1.4;
}

.tp-submeta {
  display: flex;
  gap: 12px;
  font-size: 11px;
  color: var(--ink-soft);
}

.tp-stats-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-bottom: 18px;
}

.tp-stat-box {
  background: var(--cream-card);
  border: var(--border-paper);
  border-radius: var(--radius-sm);
  padding: 12px 10px;
  text-align: center;
}

.tp-stat-val {
  display: block;
  font-size: 16px;
  font-weight: 700;
  font-family: var(--font-mono);
  color: var(--ink);
}

.tp-stat-lbl {
  display: block;
  font-size: 10px;
  font-weight: 600;
  color: var(--ink-soft);
  margin-top: 3px;
  text-transform: uppercase;
}

.tp-setups-section {
  border-top: var(--border-paper);
  padding-top: 14px;
}

.tp-section-heading {
  font-size: 12px;
  font-weight: 700;
  color: var(--ink-soft);
  text-transform: uppercase;
  letter-spacing: 0.4px;
  margin-bottom: 10px;
}

.tp-setups-list {
  max-height: 220px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.tp-setup-item {
  padding: 10px 12px;
  background: var(--cream-2);
  border: var(--border-paper);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all var(--transition);
}

.tp-setup-item:hover {
  border-color: var(--crimson);
  background: var(--cream-card);
}

.tp-setup-item-title {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 4px;
}

.tp-setup-item-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  color: var(--ink-soft);
}

/* Trader Verification Card in Loyalty */
.trader-verification-card {
  margin-bottom: 18px;
  border-left: 4px solid var(--crimson);
}

.tvc-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
}

.tvc-left {
  flex: 1;
  min-width: 280px;
}

.tvc-desc {
  font-size: 12px;
  color: var(--ink-secondary);
  line-height: 1.5;
  margin: 6px 0 10px;
}

.tvc-status-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.tvc-pill {
  font-size: 11px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 4px;
}

.tvc-pill.unverified {
  background: var(--crimson-soft);
  color: var(--crimson);
  border: 1px solid var(--crimson-border);
}

.tvc-pill.verified {
  background: var(--gain-soft);
  color: var(--gain-green);
  border: 1px solid rgba(29, 115, 68, 0.3);
}

.tvc-allocation-hint {
  font-size: 11.5px;
  color: var(--ink-soft);
}

/* Common Buttons for Rest of App */
.btn {
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 600;
  padding: 7px 14px;
  border-radius: var(--radius-sm);
  border: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: all var(--transition);
  text-decoration: none;
}

.btn-primary {
  background: var(--ink);
  color: var(--cream);
  border: 1px solid var(--ink);
}

.btn-primary:hover {
  background: #1e293b;
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.15);
}

.btn-primary:active, .btn-outline:active {
  transform: scale(0.98);
}

.btn-outline {
  background: transparent;
  border: var(--border-paper-strong);
  color: var(--ink);
}

.btn-outline:hover {
  background: var(--cream-2);
  transform: translateY(-1px);
}

.btn-wallet {
  background: var(--cream-2);
  border: 1px solid rgba(29, 115, 68, 0.35);
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 12px;
}

.btn-wallet:hover {
  border-color: var(--gain-green);
  background: var(--gain-soft);
}

.btn-sm {
  padding: 4px 10px;
  font-size: 11.5px;
}

.btn-xs {
  padding: 3px 8px;
  font-size: 11px;
}

.pill-btn {
  background: var(--cream-2);
  border: var(--border-paper);
  padding: 6px 10px;
  border-radius: var(--radius-sm);
  font-size: 11.5px;
  font-weight: 600;
  color: var(--ink-secondary);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all var(--transition);
}

.pill-btn:hover {
  color: var(--ink);
  border-color: var(--border-paper-strong);
  background: #ffffff;
}

/* ==========================================================================
   LAYOUT STRUCTURE (DYNAMIC TAB MODES & SCREEN UTILIZATION)
   ========================================================================== */
.main-layout {
  max-width: 1620px;
  margin: 20px auto 40px;
  padding: 0 24px;
  width: 100%;
  box-sizing: border-box;
  align-items: start;
  transition: all 0.2s ease;
}

/* 1. Feed Tab: Balanced 3-Column Community Layout */
.main-layout.tab-mode-feed,
.main-layout:not([class*="tab-mode-"]) {
  display: grid;
  grid-template-columns: 310px minmax(0, 1fr) 320px;
  gap: 24px;
}

/* 2. Leaderboards Tab: Full Screen Width (Maximum Real Estate for Podium & Tables) */
.main-layout.tab-mode-leaderboard {
  display: block;
}

.main-layout.tab-mode-leaderboard .col-left,
.main-layout.tab-mode-leaderboard .col-right {
  display: none !important;
}

.main-layout.tab-mode-leaderboard .col-center {
  max-width: 1560px;
  margin: 0 auto;
  width: 100%;
}

/* 3. Loyalty & Quests Tab: Centered VIP Rewards Dashboard */
.main-layout.tab-mode-rewards {
  display: block;
}

.main-layout.tab-mode-rewards .col-left,
.main-layout.tab-mode-rewards .col-right {
  display: none !important;
}

.main-layout.tab-mode-rewards .col-center {
  max-width: 1180px;
  margin: 0 auto;
  width: 100%;
}

/* 4. Advance Feature Tab: Centered High-Tech Copy-Trading Terminal */
.main-layout.tab-mode-monetize {
  display: block;
}

.main-layout.tab-mode-monetize .col-left,
.main-layout.tab-mode-monetize .col-right {
  display: none !important;
}

.main-layout.tab-mode-monetize .col-center {
  max-width: 1240px;
  margin: 0 auto;
  width: 100%;
}

/* 5. About Tab: Centered Protocol Ecosystem & Community Hub */
.main-layout.tab-mode-about {
  display: block;
}

.main-layout.tab-mode-about .col-left,
.main-layout.tab-mode-about .col-right {
  display: none !important;
}

.main-layout.tab-mode-about .col-center {
  max-width: 1240px;
  margin: 0 auto;
  width: 100%;
}

.paper-card {
  background: var(--cream-card);
  border: var(--border-paper);
  border-radius: var(--radius-md);
  padding: 18px;
  box-shadow: var(--shadow-paper);
  transition: all var(--transition);
}

.paper-card:hover {
  border-color: var(--border-paper-strong);
  box-shadow: var(--shadow-hover);
  transform: translateY(-1px);
}

.card-eyebrow {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 8px;
  display: block;
}

.card-eyebrow.crimson-label { color: var(--crimson); }
.card-title { font-size: 1.1rem; font-weight: 700; color: var(--ink); margin-bottom: 6px; }
.card-desc { font-size: 12.5px; color: var(--ink-secondary); line-height: 1.45; margin-bottom: 14px; }

.text-green { color: var(--gain-green) !important; }
.text-crimson { color: var(--crimson) !important; }
.w-full { width: 100%; }

/* ==========================================================================
   LEFT SIDEBAR
   ========================================================================== */
.col-left {
  display: flex;
  flex-direction: column;
  gap: 18px;
  position: sticky;
  top: 96px;
}

/* Community Overview Card Middle Alignment */
.community-overview-card {
  text-align: center;
}

.community-overview-card .co-header {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  margin-bottom: 12px;
}

.community-overview-card .card-eyebrow {
  text-align: center;
  margin: 0 auto;
}

.community-overview-card .card-title {
  text-align: center;
  margin-bottom: 8px;
}

.community-overview-card .card-desc {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.5;
  margin-bottom: 14px;
  max-width: 95%;
}

.metric-tiles {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 14px;
}

.m-tile {
  background: var(--cream-2);
  border: var(--border-paper);
  border-radius: var(--radius-sm);
  padding: 8px 10px;
  display: flex;
  flex-direction: column;
}

.community-overview-card .m-tile {
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 10px 8px;
}

.mt-val { font-family: var(--font-mono); font-size: 13px; font-weight: 700; color: var(--ink); }
.mt-lbl { font-size: 9.5px; text-transform: uppercase; color: var(--ink-soft); }

.community-overview-card .mt-val {
  text-align: center;
  width: 100%;
}

.community-overview-card .mt-lbl {
  text-align: center;
  width: 100%;
  margin-top: 2px;
}

.quick-links-stack {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.link-action-btn {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--cream-2);
  border: var(--border-paper);
  border-radius: var(--radius-sm);
  padding: 7px 10px;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--ink-secondary);
}

.link-action-btn:hover {
  background: var(--cream-card-elevated);
  color: var(--ink);
}

/* Profile Card */
.profile-card { border-left: 3px solid var(--gain-green); }
.trader-profile-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}

.trader-avatar-box {
  width: 48px;
  height: 48px;
  background: transparent;
  border: none;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.trader-info-block h4 {
  font-size: 13px;
  font-family: var(--font-mono);
  font-weight: 700;
  color: var(--ink);
}

.trader-sub-status { font-size: 10.5px; color: var(--ink-soft); }

.profile-stats-strip {
  display: flex;
  justify-content: space-between;
  background: var(--cream-2);
  border: var(--border-paper);
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  margin-bottom: 12px;
  font-size: 11.5px;
}

.ps-item { display: flex; flex-direction: column; }
.ps-label { font-size: 9.5px; color: var(--ink-soft); text-transform: uppercase; }

/* Topic Pills */
.topic-pills {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.topic-btn {
  background: var(--cream-2);
  border: var(--border-paper);
  border-radius: var(--radius-sm);
  padding: 8px 12px;
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-secondary);
  text-align: left;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: all var(--transition);
}

.topic-btn:hover {
  color: var(--ink);
  background: #ffffff;
  transform: translateX(2px);
  border-color: var(--border-paper-strong);
}

.topic-btn.active {
  background: var(--ink);
  color: var(--cream);
  border-color: var(--ink);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
}

/* ==========================================================================
   CENTER MAIN CONTENT
   ========================================================================== */
.col-center {
  min-width: 0;
}

.tab-page { display: none; }
.tab-page.active { display: block; }

/* Quick Share Trigger */
.create-post-trigger-card {
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  padding: 10px 14px;
  margin-bottom: 16px;
}

.avatar-sm {
  width: 30px;
  height: 30px;
  background: var(--cream-2);
  border: var(--border-paper);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10.5px;
  font-weight: 700;
}

#feedShareTriggerAvatar {
  width: auto !important;
  height: auto !important;
  min-width: 34px;
  min-height: 34px;
  background: transparent !important;
  border: none !important;
  overflow: visible !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 2px 4px;
}

.create-trigger-text {
  flex-grow: 1;
  background: var(--cream-2);
  border: var(--border-paper);
  border-radius: var(--radius-sm);
  padding: 7px 12px;
  font-size: 12px;
  color: var(--ink-soft);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

/* Feed Filter Bar */
.feed-filter-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: var(--cream-card);
  border: var(--border-paper);
  border-radius: var(--radius-md);
  padding: 8px 12px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}

.filter-tabs-group {
  display: flex;
  align-items: center;
  gap: 5px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  max-width: 100%;
}

.filter-tabs-group::-webkit-scrollbar {
  display: none;
}

.sort-tab {
  background: transparent;
  border: none;
  font-family: var(--font-sans);
  font-size: 11.5px;
  font-weight: 600;
  color: var(--ink-secondary);
  padding: 5px 10px;
  border-radius: 4px;
  cursor: pointer;
  flex-shrink: 0;
  white-space: nowrap;
}

.sort-tab:hover { background: var(--cream-2); color: var(--ink); }
.sort-tab.active {
  background: var(--cream-2);
  color: var(--crimson);
  font-weight: 700;
}

.feed-search-wrap {
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--cream-2);
  border: var(--border-paper);
  border-radius: var(--radius-sm);
  padding: 4px 10px;
  min-width: 220px;
}

.feed-search-wrap input {
  background: transparent;
  border: none;
  outline: none;
  font-size: 11.5px;
  color: var(--ink);
  width: 100%;
}

/* Post Cards Stream */
.posts-stream {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.community-post-card {
  background: var(--cream-card);
  border: var(--border-paper);
  border-radius: var(--radius-md);
  padding: 16px 18px;
  box-shadow: var(--shadow-paper);
  transition: all var(--transition);
}

.community-post-card:hover {
  border-color: var(--border-paper-strong);
  box-shadow: var(--shadow-hover);
  transform: translateY(-1.5px);
}

.post-top-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 11px;
  color: var(--ink-soft);
  margin-bottom: 8px;
  width: 100%;
}

.post-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 22px;
  padding: 0 10px 0 8px;
  border-radius: 999px;
  font-family: var(--font-sans, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif);
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.01em;
  text-transform: none;
  white-space: nowrap;
  user-select: none;
  cursor: pointer;
  transition: all 0.16s cubic-bezier(0.16, 1, 0.3, 1);
  box-sizing: border-box;
}

.post-tag:hover {
  transform: translateY(-0.5px);
  filter: brightness(0.96);
}

.post-tag-dot {
  width: 5.5px;
  height: 5.5px;
  border-radius: 50%;
  flex-shrink: 0;
  display: inline-block;
  background-color: currentColor;
  opacity: 0.85;
}

.post-tag-label {
  display: inline-block;
  line-height: 1;
}

.tag-setup { background: rgba(184, 51, 42, 0.06); color: #991b1b; border: 1px solid rgba(184, 51, 42, 0.18); }
.tag-setup .post-tag-dot { background-color: #b8332a; box-shadow: 0 0 5px rgba(184, 51, 42, 0.4); }

.tag-gain { background: rgba(16, 185, 129, 0.07); color: #047857; border: 1px solid rgba(16, 185, 129, 0.18); }
.tag-gain .post-tag-dot { background-color: #10b981; box-shadow: 0 0 5px rgba(16, 185, 129, 0.4); }

.tag-general, .tag-martingaler, .tag-market { background: rgba(100, 116, 139, 0.07); color: #475569; border: 1px solid rgba(100, 116, 139, 0.18); }
.tag-general .post-tag-dot, .tag-martingaler .post-tag-dot, .tag-market .post-tag-dot { background-color: #64748b; }

.tag-paper { background: rgba(217, 119, 6, 0.07); color: #b45309; border: 1px solid rgba(217, 119, 6, 0.2); }
.tag-paper .post-tag-dot { background-color: #d97706; box-shadow: 0 0 5px rgba(217, 119, 6, 0.4); }

.tag-alpha { background: rgba(124, 58, 237, 0.06); color: #6d28d9; border: 1px solid rgba(124, 58, 237, 0.18); }
.tag-alpha .post-tag-dot { background-color: #7c3aed; box-shadow: 0 0 5px rgba(124, 58, 237, 0.4); }

.tag-complains { background: rgba(239, 68, 68, 0.07); color: #b91c1c; border: 1px solid rgba(239, 68, 68, 0.2); }
.tag-complains .post-tag-dot { background-color: #ef4444; box-shadow: 0 0 5px rgba(239, 68, 68, 0.4); }

.post-author-name { font-weight: 700; color: var(--ink); }

.post-headline {
  font-size: 1.02rem;
  font-weight: 700;
  line-height: 1.35;
  color: var(--ink);
  margin-bottom: 6px;
  cursor: pointer;
  letter-spacing: -0.01em;
  transition: color var(--transition);
}

.post-headline:hover {
  color: var(--crimson);
}

.post-body-text {
  font-size: 13px;
  color: var(--ink);
  line-height: 1.52;
  margin-bottom: 10px;
  white-space: normal;
  word-break: break-word;
}

.post-body-text p {
  margin: 0 0 10px;
}
.post-body-text p:last-child {
  margin-bottom: 0;
}

.post-body-text strong,
.post-body-text b {
  font-weight: 700;
  color: var(--ink);
}

.post-body-text em,
.post-body-text i {
  font-style: italic;
}

.post-body-text u {
  text-decoration: underline;
  text-underline-offset: 2px;
}

.post-body-text del,
.post-body-text s {
  text-decoration: line-through;
  opacity: 0.75;
}

.post-body-text .post-heading-1 {
  font-size: 17px;
  font-weight: 800;
  margin: 12px 0 6px;
  color: var(--ink);
  letter-spacing: -0.2px;
}

.post-body-text .post-heading-2 {
  font-size: 15px;
  font-weight: 700;
  margin: 10px 0 5px;
  color: var(--ink);
}

.post-body-text .post-heading-3 {
  font-size: 14px;
  font-weight: 700;
  margin: 8px 0 4px;
  color: var(--ink-secondary);
}

.post-body-text blockquote.post-blockquote {
  border-left: 3px solid var(--crimson);
  margin: 10px 0;
  padding: 6px 14px;
  background: var(--cream-2);
  color: var(--ink-secondary);
  font-style: italic;
  border-radius: 0 4px 4px 0;
}

.post-body-text code.post-inline-code {
  background: var(--cream-2);
  border: 1px solid var(--tape-border);
  border-radius: 3px;
  padding: 1px 6px;
  font-family: var(--font-mono, monospace);
  font-size: 12px;
  color: var(--crimson);
}

.post-body-text pre.post-code-block {
  background: #1e1e24;
  color: #f3f3f3;
  padding: 12px 14px;
  border-radius: 6px;
  overflow-x: auto;
  font-family: var(--font-mono, monospace);
  font-size: 12px;
  line-height: 1.5;
  margin: 10px 0;
  white-space: pre;
}

.post-body-text ul.post-bullet-list {
  margin: 8px 0 8px 22px;
  padding-left: 0;
  list-style-type: disc;
}

.post-body-text ul.post-bullet-list li {
  margin-bottom: 4px;
}

.post-body-text ol.post-ordered-list {
  margin: 8px 0 8px 22px;
  padding-left: 0;
  list-style-type: decimal;
}

.post-body-text ol.post-ordered-list li {
  margin-bottom: 4px;
}

.post-body-text a.post-link {
  color: var(--crimson);
  text-decoration: underline;
  font-weight: 600;
}

/* ==========================================================================
   ELEGANT FINANCIAL TYPOGRAPHY (TICKERS & NUMBERS - UNBLOCKED & REFINED)
   ========================================================================== */

/* 1. Crypto Cashtags & Asset Tickers ($BTC, $ETH, BTC-PERP, etc.) */
.post-body-text .content-cashtag,
.post-body-text .cashtag-pill,
.comment-text-body .content-cashtag,
.comment-text-body .cashtag-pill,
.content-cashtag,
.cashtag-pill {
  display: inline;
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-weight: 700;
  font-size: 0.95em;
  letter-spacing: 0.01em;
  color: var(--crimson, #b8332a);
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 0 1px !important;
  margin: 0 !important;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  vertical-align: baseline;
  transition: color 0.15s ease, text-decoration 0.15s ease;
}

.post-body-text .content-cashtag:hover,
.post-body-text .cashtag-pill:hover,
.comment-text-body .content-cashtag:hover,
.comment-text-body .cashtag-pill:hover,
.content-cashtag:hover,
.cashtag-pill:hover {
  color: #881e17;
  text-decoration: underline;
  text-underline-offset: 2.5px;
}

[data-theme="dark"] .post-body-text .content-cashtag,
[data-theme="dark"] .post-body-text .cashtag-pill,
[data-theme="dark"] .comment-text-body .content-cashtag,
[data-theme="dark"] .comment-text-body .cashtag-pill,
[data-theme="dark"] .content-cashtag,
[data-theme="dark"] .cashtag-pill {
  color: #fb7185;
}

[data-theme="dark"] .post-body-text .content-cashtag:hover,
[data-theme="dark"] .post-body-text .cashtag-pill:hover,
[data-theme="dark"] .comment-text-body .content-cashtag:hover,
[data-theme="dark"] .comment-text-body .cashtag-pill:hover,
[data-theme="dark"] .content-cashtag:hover,
[data-theme="dark"] .cashtag-pill:hover {
  color: #fda4af;
}

/* 2. Financial Numbers, Prices & Monetary Values ($83,800, $82,720, etc.) */
.post-body-text .content-price,
.post-body-text .price-pill,
.comment-text-body .content-price,
.comment-text-body .price-pill,
.content-price,
.price-pill {
  display: inline;
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  font-size: 0.95em;
  letter-spacing: -0.01em;
  color: var(--ink, #1c1917);
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  white-space: nowrap;
  vertical-align: baseline;
  transition: color 0.15s ease;
}

.post-body-text .content-price:hover,
.post-body-text .price-pill:hover,
.comment-text-body .content-price:hover,
.comment-text-body .price-pill:hover,
.content-price:hover,
.price-pill:hover {
  color: var(--crimson, #b8332a);
}

[data-theme="dark"] .post-body-text .content-price,
[data-theme="dark"] .post-body-text .price-pill,
[data-theme="dark"] .comment-text-body .content-price,
[data-theme="dark"] .comment-text-body .price-pill,
[data-theme="dark"] .content-price,
[data-theme="dark"] .price-pill {
  color: #f1f5f9;
}

[data-theme="dark"] .post-body-text .content-price:hover,
[data-theme="dark"] .post-body-text .price-pill:hover,
[data-theme="dark"] .comment-text-body .content-price:hover,
[data-theme="dark"] .comment-text-body .price-pill:hover,
[data-theme="dark"] .content-price:hover,
[data-theme="dark"] .price-pill:hover {
  color: #fb7185;
}

.comment-text {
  white-space: pre-wrap;
  word-break: break-word;
}

/* Dedicated Setup Data Strip */
.post-setup-strip {
  background: var(--cream-2);
  border: var(--border-paper);
  border-radius: var(--radius-sm);
  padding: 10px 14px 11px 14px;
  margin-bottom: 12px;
  transition: border-color var(--transition), background var(--transition);
}

[data-theme="dark"] .post-setup-strip {
  background: rgba(255, 255, 255, 0.025);
  border-color: rgba(255, 255, 255, 0.08);
}

.setup-strip-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 9px;
}

.setup-asset-name { 
  font-family: var(--font-mono); 
  font-weight: 700; 
  font-size: 12.5px; 
  letter-spacing: 0.02em;
}

.setup-dir-pill {
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 800;
  padding: 2.5px 7px;
  border-radius: 3px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.setup-dir-pill.long { background: var(--gain-soft); color: var(--gain-green); border: 1px solid var(--gain-border); }
.setup-dir-pill.short { background: var(--crimson-soft); color: var(--crimson); border: 1px solid var(--crimson-border); }

.setup-stats-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px 12px;
  align-items: baseline;
}

.ss-col { 
  display: flex; 
  flex-direction: column; 
  min-width: 0;
}

.ss-lbl { 
  font-size: 9.5px; 
  font-weight: 700; 
  text-transform: uppercase; 
  letter-spacing: 0.04em; 
  color: var(--ink-soft); 
  margin-bottom: 3px; 
  display: flex;
  align-items: center;
  line-height: 1.2;
  white-space: nowrap;
}

.ss-val { 
  font-family: var(--font-mono); 
  font-size: 12.5px; 
  font-weight: 700; 
  line-height: 1.25;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: inline-flex;
  align-items: center;
}

.ss-val.outcome-val {
  min-height: 16px;
  position: relative;
}

.ss-live-dot {
  display: inline-block;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--gain-green);
  box-shadow: 0 0 5px rgba(16, 185, 129, 0.6);
  margin-right: 4px;
  animation: pulseLiveDot 2s infinite ease-in-out;
  flex-shrink: 0;
}

@keyframes pulseLiveDot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.35; transform: scale(0.85); }
}

/* Perfectly Aligned Post Footer Actions */
.post-bottom-actions, .post-footer-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  border-top: 1px dashed var(--tape-border);
  padding-top: 10px;
  margin-top: 10px;
  flex-wrap: wrap;
}

.upvote-pill, .upvote-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--cream-2);
  border: var(--border-paper);
  border-radius: var(--radius-sm);
  padding: 4px 10px;
  font-size: 12px;
  font-weight: 700;
  color: var(--ink);
  cursor: pointer;
  transition: all var(--transition);
}

.upvote-pill:hover, .upvote-chip:hover {
  background: var(--cream-card);
  border-color: var(--crimson);
  color: var(--crimson);
}

.upvote-pill.voted, .upvote-chip.voted {
  background: var(--crimson-soft);
  border-color: var(--crimson);
  color: var(--crimson);
}

.action-btn, .action-chip-btn {
  background: var(--cream-card);
  border: var(--border-paper);
  border-radius: var(--radius-sm);
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-secondary);
  padding: 4px 10px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  transition: all var(--transition);
}

.action-btn:hover, .action-chip-btn:hover {
  background: var(--cream-2);
  color: var(--ink);
  border-color: var(--border-paper-strong);
  transform: translateY(-1px);
}

.action-btn:active, .action-chip-btn:active, .upvote-pill:active {
  transform: scale(0.96);
}

.views-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  color: var(--ink-soft);
  font-weight: 500;
  padding: 4px 8px;
  background: transparent;
}

.views-chip .icon {
  opacity: 0.8;
}

.direct-trade-link {
  font-size: 11px;
  font-weight: 700;
  color: var(--crimson);
  letter-spacing: 0.04em;
  text-decoration: none;
  padding: 3px 6px;
  border-radius: 4px;
}

.direct-trade-link:hover {
  background: var(--crimson-soft);
  text-decoration: underline;
}

/* ==========================================================================
   PAPERTRADERS.XYZ — PREMIUM DISCUSSION & COMMENTS ENGINE
   Clean, Modern, Tactile Threaded Comments Architecture
   ========================================================================== */

/* Drawer Container */
.comments-drawer {
  display: none;
  background: var(--cream-2);
  border-top: 1px solid var(--tape-border);
  border-radius: 0 0 var(--radius-md) var(--radius-md);
  margin: 12px -18px -16px;
  padding: 16px 18px 20px;
  animation: commentsSlideFadeIn 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.comments-drawer.open {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

@keyframes commentsSlideFadeIn {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Discussion Drawer Header */
.comments-drawer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 10px;
  border-bottom: 1px dashed var(--tape-border);
}

.cdh-left {
  display: flex;
  align-items: center;
  gap: 8px;
}

.cdh-title {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.01em;
}

.cdh-title svg {
  color: var(--crimson);
}

.cdh-count {
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-soft);
}

.cdh-right {
  display: flex;
  align-items: center;
  gap: 8px;
}

.cdh-reward-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--gold-soft);
  color: var(--gold-seal);
  border: 1px solid rgba(217, 119, 6, 0.28);
  padding: 3px 8px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.cdh-collapse-btn {
  background: transparent;
  border: 1px solid var(--tape-border);
  color: var(--ink-soft);
  width: 26px;
  height: 26px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: var(--transition);
}

.cdh-collapse-btn:hover {
  background: var(--cream-card);
  color: var(--crimson);
  border-color: var(--crimson-border);
}

/* Main Comment Composer */
.comment-composer-card {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  margin-bottom: 2px;
}

.composer-user-avatar {
  flex-shrink: 0;
  margin-top: 2px;
}

.composer-body {
  flex: 1;
  min-width: 0;
  background: var(--cream-card);
  border: var(--border-paper);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-paper);
  transition: border-color var(--transition), box-shadow var(--transition);
  overflow: hidden;
}

.composer-body:focus-within {
  border-color: var(--crimson);
  box-shadow: 0 0 0 3px var(--crimson-soft);
}

.composer-input-wrap {
  padding: 10px 12px 6px;
}

.comment-textarea {
  width: 100%;
  min-height: 48px;
  max-height: 220px;
  background: transparent;
  border: none;
  outline: none;
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 13px;
  line-height: 1.55;
  resize: none;
  box-sizing: border-box;
}

.comment-textarea::placeholder {
  color: var(--ink-soft);
  opacity: 0.85;
}

.composer-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 10px;
  background: rgba(0, 0, 0, 0.015);
  border-top: 1px solid var(--tape-border);
  gap: 8px;
}


.composer-formatting-hints {
  display: flex;
  align-items: center;
  gap: 3px;
}

.fmt-btn {
  background: transparent;
  border: 1px solid transparent;
  color: var(--ink-soft);
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  transition: var(--transition);
}

.fmt-btn:hover {
  background: var(--cream-2);
  color: var(--ink);
  border-color: var(--tape-border);
}

.composer-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.composer-shortcut-hint {
  font-size: 10.5px;
  color: var(--ink-soft);
  display: none;
}

@media (min-width: 640px) {
  .composer-shortcut-hint {
    display: inline;
  }
}

.comment-submit-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  font-weight: 700;
  padding: 5px 12px;
}

/* Guest Composer Banner */
.composer-guest-banner {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: var(--cream-card);
  border: 1px dashed var(--tape-border);
  border-radius: var(--radius-md);
  padding: 12px 16px;
}

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

.cgb-icon {
  font-size: 20px;
}

.cgb-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
}

.cgb-sub {
  font-size: 11.5px;
  color: var(--ink-soft);
}

/* Empty Discussion State */
.comments-empty-state {
  text-align: center;
  padding: 24px 16px;
  background: var(--cream-card);
  border: 1px dashed var(--tape-border);
  border-radius: var(--radius-md);
}

.empty-icon {
  font-size: 26px;
  margin-bottom: 6px;
}

.empty-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 2px;
}

.empty-sub {
  font-size: 12px;
  color: var(--ink-soft);
}

/* Comments List Container */
.comments-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* Individual Comment Thread Item */
.comment-thread-item {
  position: relative;
}

.comment-thread-inner {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}

.comment-avatar-column {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 42px;
  flex-shrink: 0;
  overflow: visible !important;
  position: relative;
  padding-top: 2px;
}

.comment-avatar-ring {
  cursor: pointer;
  transition: transform var(--transition);
  overflow: visible !important;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}

.comment-avatar-ring:hover {
  transform: scale(1.05);
}

/* Comment Avatar Wrap Safety & Containment: Keep prestige frames snug inside column */
.comment-avatar-ring .decorated-avatar-wrap,
.composer-user-avatar .decorated-avatar-wrap {
  margin: 0 !important;
}

.comment-avatar-ring .dav-ornament-tl {
  font-size: 7.5px !important;
  padding: 1px 4.5px !important;
  top: -4px !important;
  left: -4px !important;
  border-radius: 4px !important;
  line-height: 1.1 !important;
  max-width: 65px;
  overflow: hidden;
  text-overflow: ellipsis;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4) !important;
}

.comment-avatar-ring .dav-ornament-br {
  font-size: 14px !important;
  bottom: -3px !important;
  right: -3px !important;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.45)) !important;
}

.comment-thread-rail {
  width: 2px;
  flex: 1;
  background: var(--tape-border);
  border-radius: 2px;
  margin-top: 6px;
  margin-bottom: 4px;
  transition: background var(--transition);
  min-height: 16px;
}

.comment-thread-item:hover > .comment-thread-inner > .comment-avatar-column > .comment-thread-rail {
  background: rgba(225, 29, 72, 0.35);
}

.comment-content-column {
  flex: 1;
  min-width: 0;
}

/* Avatar Styling */
.comment-avatar {
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  user-select: none;
  flex-shrink: 0;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.comment-avatar.founder-avatar {
  background: linear-gradient(135deg, #f59e0b, #e11d48);
  color: #ffffff;
  border: 1.5px solid #fef08a;
  box-shadow: 0 0 10px rgba(245, 158, 11, 0.45);
}

.comment-avatar.wallet-avatar {
  border: 1px solid rgba(255, 255, 255, 0.2);
  letter-spacing: 0.02em;
}

.comment-avatar.letter-avatar {
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.comment-avatar.user-avatar {
  background: var(--cream-card-elevated);
  border: var(--border-paper);
}

/* Comment Bubble */
.comment-bubble {
  background: var(--cream-2, #f8fafc);
  border: 1px solid var(--tape-border, #e2e8f0);
  border-radius: var(--radius-md, 10px);
  padding: 11px 15px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03);
  position: relative;
  z-index: 1;
  transition: border-color var(--transition), box-shadow var(--transition), background var(--transition);
}

.comment-bubble:hover {
  background: var(--cream-card, #ffffff);
  border-color: var(--crimson-border, rgba(225, 29, 72, 0.35));
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

[data-theme="dark"] .comment-bubble {
  background: rgba(255, 255, 255, 0.025);
  border-color: rgba(255, 255, 255, 0.08);
}

[data-theme="dark"] .comment-bubble:hover {
  background: rgba(255, 255, 255, 0.045);
  border-color: rgba(225, 29, 72, 0.45);
}

/* Meta Bar */
.comment-meta-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 6px;
}

.comment-author-info {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}

.comment-author-name {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--ink);
  cursor: pointer;
  letter-spacing: -0.01em;
  transition: color var(--transition);
}

.comment-author-name:hover {
  color: var(--crimson);
  text-decoration: underline;
}

.comment-badge {
  font-size: 9.5px;
  font-weight: 800;
  padding: 1px 5px;
  border-radius: 4px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  line-height: 1.2;
}

.comment-badge.op-badge {
  background: var(--crimson);
  color: #ffffff;
  box-shadow: 0 1px 3px rgba(225, 29, 72, 0.25);
}

.comment-badge.founder-badge {
  background: rgba(217, 119, 6, 0.12);
  color: var(--gold-seal);
  border: 1px solid rgba(217, 119, 6, 0.28);
}

.comment-time-ago {
  font-size: 11px;
  color: var(--ink-soft);
  font-weight: 500;
}

.comment-delete-pill {
  background: transparent;
  border: none;
  color: var(--ink-soft);
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 2px 6px;
  border-radius: 4px;
  opacity: 0.6;
  transition: opacity var(--transition), color var(--transition), background var(--transition);
}

.comment-delete-pill:hover {
  opacity: 1;
  color: var(--crimson);
  background: var(--crimson-soft);
}

.comment-delete-pill.admin-delete-pill {
  color: var(--crimson);
}

/* Comment Body Text */
.comment-text-body {
  font-size: 13px;
  line-height: 1.55;
  color: var(--ink);
  word-break: break-word;
}

.comment-text-body p {
  margin: 0 0 6px;
}

.comment-text-body p:last-child {
  margin-bottom: 0;
}

/* Actions Bar */
.comment-actions-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 5px;
  padding-left: 2px;
}

.comment-reply-btn {
  background: transparent;
  border: none;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--ink-soft);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  border-radius: 4px;
  transition: var(--transition);
}

.comment-reply-btn:hover {
  color: var(--crimson);
  background: var(--crimson-soft);
}

.comment-replies-indicator {
  font-size: 11px;
  font-weight: 600;
  color: var(--ink-soft);
}

/* Inline Reply Composer */
.inline-reply-composer {
  margin-top: 10px;
  background: var(--cream-card-elevated);
  border: 1px solid var(--tape-border);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  box-shadow: var(--shadow-paper);
  animation: commentsSlideFadeIn 0.16s ease-out;
}

.inline-reply-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
  font-size: 11.5px;
  color: var(--ink-soft);
}

.inline-reply-target strong {
  color: var(--ink);
}

.inline-reply-close {
  background: transparent;
  border: none;
  color: var(--ink-soft);
  cursor: pointer;
  font-size: 12px;
  padding: 0 4px;
}

.inline-reply-close:hover {
  color: var(--crimson);
}

.inline-reply-textarea {
  width: 100%;
  min-height: 42px;
  max-height: 180px;
  background: var(--cream-2);
  border: var(--border-paper);
  border-radius: 4px;
  padding: 6px 10px;
  font-family: var(--font-sans);
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--ink);
  resize: none;
  outline: none;
  box-sizing: border-box;
  transition: border-color var(--transition);
}

.inline-reply-textarea:focus {
  border-color: var(--crimson);
}

.inline-reply-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 8px;
}

.inline-reply-hint {
  font-size: 10.5px;
  color: var(--ink-soft);
}

.inline-reply-btns {
  display: flex;
  align-items: center;
  gap: 6px;
}

/* Nested Replies List with Thread Guide Line */
.nested-replies-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 10px;
  padding-left: 12px;
  border-left: 2px solid var(--tape-border, #e2e8f0);
  margin-left: 8px;
  transition: border-color var(--transition);
}

.nested-replies-list:hover {
  border-left-color: rgba(225, 29, 72, 0.35);
}

.comment-thread-item.is-nested .comment-avatar-column {
  width: 34px;
}

.comment-thread-item.is-nested .comment-avatar-ring .dav-ornament-tl {
  font-size: 6.5px !important;
  padding: 1px 3px !important;
  top: -3px !important;
  left: -3px !important;
}

.comment-thread-item.is-nested .comment-avatar-ring .dav-ornament-br {
  font-size: 11px !important;
  bottom: -2px !important;
  right: -2px !important;
}

.comment-thread-item.is-nested .comment-bubble {
  background: rgba(0, 0, 0, 0.02);
  border: 1px solid var(--tape-border, #e2e8f0);
}

[data-theme="dark"] .comment-thread-item.is-nested .comment-bubble {
  background: rgba(255, 255, 255, 0.015);
  border-color: rgba(255, 255, 255, 0.06);
}


/* ==========================================================================
   LEADERBOARDS TAB
   ========================================================================== */
.tab-header-row {
  margin-bottom: 20px;
}

.section-heading {
  font-size: 1.6rem;
  font-weight: 700;
  letter-spacing: -0.03em;
  margin-bottom: 4px;
}

.section-subheading {
  font-size: 13px;
  color: var(--ink-secondary);
  max-width: 680px;
  margin-bottom: 16px;
}

.leaderboard-tabs-toggle {
  display: inline-flex;
  background: var(--cream-2);
  padding: 3px;
  border-radius: var(--radius-sm);
  border: var(--border-paper);
  gap: 4px;
}

.toggle-tab-btn {
  background: transparent;
  border: none;
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-secondary);
  padding: 7px 16px;
  border-radius: 4px;
  cursor: pointer;
}

.toggle-tab-btn.active {
  background: var(--cream-card);
  color: var(--ink);
  font-weight: 700;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
}

.banner-notice {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 18px;
  font-size: 12px;
  padding: 12px 16px;
}

.notice-info { display: flex; align-items: center; gap: 8px; }
.live-dot {
  width: 6px;
  height: 6px;
  background: var(--gain-green);
  border-radius: 50%;
  animation: pulseDot 1.5s infinite;
}

.podium-grid {
  display: grid;
  grid-template-columns: 1fr 1.15fr 1fr;
  gap: 14px;
  align-items: end;
  margin-bottom: 22px;
}

.podium-card {
  background: var(--cream-card);
  border: var(--border-paper);
  border-radius: var(--radius-md);
  padding: 18px 14px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.podium-card.rank-gold {
  border-color: var(--gold-seal);
  background: linear-gradient(180deg, var(--gold-soft) 0%, var(--cream-card) 60%);
  transform: translateY(-6px);
}

.podium-tag {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.1em;
  color: var(--crimson);
  margin-bottom: 8px;
}

.podium-avatar {
  width: auto;
  min-width: 60px;
  height: auto;
  min-height: 60px;
  background: transparent;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 8px;
  overflow: visible !important;
}

.podium-avatar.gold-avatar {
  min-width: 72px;
  min-height: 72px;
  border: none;
}

.podium-name { font-family: var(--font-mono); font-size: 12.5px; font-weight: 700; margin-bottom: 4px; }
.podium-roi { font-family: var(--font-mono); font-size: 1.2rem; font-weight: 700; margin-bottom: 4px; }
.podium-stats { font-size: 11px; color: var(--ink-soft); }

.gold-badge {
  margin-top: 8px;
  font-size: 9.5px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--gold-seal);
  font-weight: 700;
}

.table-card { padding: 0; overflow-x: auto; }
.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12.5px;
  text-align: left;
}

.data-table th {
  background: var(--cream-2);
  padding: 10px 14px;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-soft);
  border-bottom: var(--border-paper);
}

.data-table td {
  padding: 12px 14px;
  border-bottom: var(--border-paper);
  font-family: var(--font-mono);
}

.data-table tr:hover td { background: var(--cream-2); }

/* ==========================================================================
   EXCHANGE LEADERBOARD CONTROLS & TABLE (MATCHING EXCHANGE.PAPERTRADE.XYZ)
   ========================================================================== */
.exchange-header-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: var(--cream-card);
  border: var(--border-paper);
  border-radius: var(--radius-md);
  padding: 10px 14px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}

.exchange-subnav {
  display: flex;
  gap: 4px;
  background: var(--cream-2);
  padding: 3px;
  border-radius: var(--radius-sm);
  border: var(--border-paper);
}

.subnav-btn {
  background: transparent;
  border: none;
  font-family: var(--font-sans);
  font-size: 11.5px;
  font-weight: 600;
  color: var(--ink-secondary);
  padding: 6px 12px;
  border-radius: 4px;
  cursor: pointer;
  transition: all var(--transition);
}

.subnav-btn:hover {
  color: var(--ink);
}

.subnav-btn.active {
  background: var(--cream-card);
  color: var(--ink);
  font-weight: 700;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.filter-time-group {
  display: flex;
  gap: 4px;
  background: var(--cream-2);
  padding: 3px;
  border-radius: var(--radius-sm);
  border: var(--border-paper);
}

.time-btn {
  background: transparent;
  border: none;
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 600;
  color: var(--ink-secondary);
  padding: 5px 10px;
  border-radius: 4px;
  cursor: pointer;
  transition: all var(--transition);
}

.time-btn:hover {
  color: var(--ink);
}

.time-btn.active {
  background: var(--ink);
  color: var(--cream);
  font-weight: 700;
}

.search-trader-box {
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--cream-2);
  border: var(--border-paper);
  border-radius: var(--radius-sm);
  padding: 5px 10px;
  flex: 1;
  max-width: 250px;
}

.search-trader-box input {
  background: transparent;
  border: none;
  outline: none;
  font-size: 11.5px;
  color: var(--ink);
  width: 100%;
}

.exchange-user-claim {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11.5px;
  color: var(--ink-secondary);
}

.username-tag strong {
  color: var(--ink);
}

.claim-btn {
  background: var(--cream-2);
  border: var(--border-paper);
  border-radius: var(--radius-sm);
  padding: 5px 10px;
  font-size: 11px;
  font-weight: 600;
  color: var(--ink);
  text-decoration: none;
  transition: all var(--transition);
}

.claim-btn:hover {
  background: var(--ink);
  color: var(--cream);
}

/* Exchange Table Rows & Ribbons */
.exchange-table {
  width: 100%;
  border-collapse: collapse;
}

.exchange-table th {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-soft);
  padding: 10px 12px;
  border-bottom: var(--border-paper);
  background: var(--cream-2);
  text-align: left;
}

.exchange-table th.th-num { text-align: center; width: 44px; }
.exchange-table th.th-right { text-align: right; }

.exchange-table td {
  padding: 10px 12px;
  border-bottom: var(--border-paper);
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--ink);
  vertical-align: middle;
}

.exchange-table td.td-num {
  text-align: center;
  font-weight: 700;
}

.exchange-table td.td-right {
  text-align: right;
}

.medal-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  font-size: 11px;
  font-weight: 800;
}

.medal-gold {
  background: linear-gradient(135deg, #f7d070, #d49819);
  color: #3d2400;
  border: 1px solid #ffd983;
  box-shadow: 0 1px 3px rgba(212, 152, 25, 0.4);
}

.medal-silver {
  background: linear-gradient(135deg, #e3ecf5, #9ab2c7);
  color: #1a2a38;
  border: 1px solid #f0f6fc;
  box-shadow: 0 1px 3px rgba(154, 178, 199, 0.3);
}

.medal-bronze {
  background: linear-gradient(135deg, #e4a77d, #a86230);
  color: #3b1700;
  border: 1px solid #f3c29f;
  box-shadow: 0 1px 3px rgba(168, 98, 48, 0.3);
}

/* Row 1 Gold Ribbon from exchange.papertrade.xyz */
.row-gold {
  background: linear-gradient(90deg, rgba(230, 195, 115, 0.28) 0%, rgba(245, 220, 145, 0.16) 30%, transparent 80%) !important;
  font-weight: 600;
}

/* Row 2 Silver Ribbon */
.row-silver {
  background: linear-gradient(90deg, rgba(205, 220, 240, 0.35) 0%, rgba(225, 235, 248, 0.18) 30%, transparent 80%) !important;
  font-weight: 600;
}

/* Row 3 Bronze Ribbon */
.row-bronze {
  background: linear-gradient(90deg, rgba(225, 175, 130, 0.28) 0%, rgba(240, 200, 165, 0.15) 30%, transparent 80%) !important;
  font-weight: 600;
}

.exchange-asset-cell {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
}

.asset-icon-eth, .asset-icon-btc {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  font-size: 10px;
  font-weight: 800;
}

.asset-icon-eth {
  background: rgba(98, 126, 234, 0.18);
  color: #4b68d9;
}

.asset-icon-btc {
  background: rgba(247, 147, 26, 0.18);
  color: #c97100;
}

.asset-dir-tag {
  font-size: 10.5px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 3px;
}

.asset-dir-tag.long {
  color: var(--gain-green);
  background: rgba(30, 134, 76, 0.12);
}

.asset-dir-tag.short {
  color: var(--crimson);
  background: rgba(139, 32, 32, 0.12);
}

/* ==========================================================================
   LOYALTY & REWARDS TAB
   ========================================================================== */
.hero-rewards-card { margin-bottom: 20px; padding: 24px; }
.rewards-tiles-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-top: 16px;
}

.r-tile {
  background: var(--cream-2);
  border: var(--border-paper);
  border-radius: var(--radius-sm);
  padding: 12px 16px;
  display: flex;
  flex-direction: column;
}

.rt-lbl { font-size: 10px; text-transform: uppercase; color: var(--ink-soft); }
.rt-val { font-family: var(--font-mono); font-size: 1.4rem; font-weight: 700; color: var(--ink); margin: 2px 0; }
.rt-badge { font-size: 11px; font-weight: 600; }

.r-tile-streak {
  position: relative;
  background: linear-gradient(180deg, var(--cream-2) 0%, rgba(139, 32, 32, 0.04) 100%);
  border-color: rgba(139, 32, 32, 0.28) !important;
}

.rt-tile-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.rt-flame-icon {
  font-size: 14px;
  line-height: 1;
}

.streak-tile-btn-wrap {
  margin: 6px 0 4px;
}

.btn-loyalty-streak {
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 6px 12px;
  background: var(--crimson);
  color: #ffffff;
  border: 1px solid var(--crimson);
  border-radius: var(--radius-sm);
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.03em;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 2px 6px rgba(139, 32, 32, 0.25);
}

.btn-loyalty-streak:hover:not(:disabled) {
  background: #a82424;
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(139, 32, 32, 0.35);
}

.btn-loyalty-streak.is-claimed {
  background: var(--gain-soft);
  color: var(--gain-green);
  border-color: var(--gain-border);
  box-shadow: none;
  cursor: default;
}

.btn-loyalty-streak.is-claimed:hover {
  transform: none;
}

/* 7-Day Consistency Streak Hub */
.streak-hub-banner {
  margin-top: 18px;
  padding: 16px 18px;
  background: var(--cream-2);
  border: var(--border-paper);
  border-radius: var(--radius-md);
  position: relative;
}

.shb-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}

.shb-left {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.shb-flame {
  font-size: 26px;
  line-height: 1;
  filter: drop-shadow(0 2px 6px rgba(255, 107, 0, 0.35));
}

.shb-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
  margin: 0;
}

.shb-sub {
  font-size: 12px;
  color: var(--ink-secondary);
  margin: 3px 0 0 0;
  line-height: 1.4;
}

.shb-status-pill {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  padding: 4px 11px;
  background: var(--cream-card);
  border: var(--border-paper);
  border-radius: 20px;
  color: var(--ink);
}

.streak-journey-track {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 8px;
}

.sjt-day-card {
  background: var(--paper);
  border: 1px solid var(--border-paper);
  border-radius: var(--radius-sm);
  padding: 10px 6px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  transition: all 0.2s ease;
  position: relative;
}

.sjt-day-card.completed {
  background: rgba(34, 197, 94, 0.08);
  border-color: rgba(34, 197, 94, 0.35);
}

.sjt-day-card.ready {
  background: rgba(139, 32, 32, 0.08);
  border-color: var(--crimson);
  box-shadow: 0 0 0 1.5px var(--crimson), 0 3px 8px rgba(139, 32, 32, 0.15);
  animation: streakPulse 2s infinite ease-in-out;
  cursor: pointer;
}

@keyframes streakPulse {
  0% { box-shadow: 0 0 0 1.5px var(--crimson), 0 0 0 rgba(139, 32, 32, 0.4); }
  50% { box-shadow: 0 0 0 2px var(--crimson), 0 0 10px rgba(139, 32, 32, 0.3); }
  100% { box-shadow: 0 0 0 1.5px var(--crimson), 0 0 0 rgba(139, 32, 32, 0); }
}

.sjt-day-lbl {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  color: var(--ink-secondary);
}

.sjt-day-icon {
  font-size: 18px;
  line-height: 1;
}

.sjt-day-reward {
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 700;
  color: var(--crimson);
}

.sjt-day-card.completed .sjt-day-reward {
  color: var(--gain-green);
}

.sjt-day-status {
  font-size: 9.5px;
  font-weight: 700;
  font-family: var(--font-mono);
  text-transform: uppercase;
  color: var(--ink-soft);
}

.sjt-day-card.completed .sjt-day-status {
  color: var(--gain-green);
}

.sjt-day-card.ready .sjt-day-status {
  color: var(--crimson);
}

@media (max-width: 680px) {
  .streak-journey-track {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* ==========================================================================
   GAMIFIED LOYALTY, REPUTATION & MARKETPLACE ENGINE (UNIFIED & ALIGNED)
   ========================================================================== */

/* Card header flex with title and status pill */
.card-header-row-flex {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
  flex-wrap: wrap;
  gap: 8px;
}

.q-completion-chip {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  padding: 4px 10px;
  background: rgba(46, 125, 50, 0.08);
  color: var(--gain-green);
  border: 1px solid rgba(46, 125, 50, 0.25);
  border-radius: 12px;
  letter-spacing: 0.3px;
}

.q-completion-chip.all-done {
  background: var(--gain-green);
  color: #fff;
  border-color: var(--gain-green);
  box-shadow: 0 2px 8px rgba(46, 125, 50, 0.25);
}

.market-balance-chip {
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--ink-secondary);
  padding: 4px 10px;
  background: var(--cream-2);
  border: 1px solid var(--border-paper);
  border-radius: 12px;
}

.market-balance-chip strong {
  color: var(--crimson);
}

/* UNIFIED ACTIVITY QUESTS & HOW TO EARN SECTION */
.unified-quests-card {
  display: flex;
  flex-direction: column;
}

.quest-header-badges {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.quest-progress-summary-strip {
  background: var(--cream-2);
  border: 1px solid var(--border-paper);
  border-radius: var(--radius-sm, 8px);
  padding: 11px 14px;
  margin-bottom: 14px;
  box-sizing: border-box;
}

.qps-top-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  color: var(--ink-secondary);
  margin-bottom: 7px;
  font-weight: 500;
}

.qps-top-row strong {
  font-family: var(--font-mono);
}

.quest-progress-summary-strip .quest-progress-meter {
  width: 100%;
  height: 8px;
  background: var(--cream-card, rgba(0, 0, 0, 0.05));
  border: 1px solid var(--border-paper);
  border-radius: 4px;
  overflow: hidden;
  margin: 0;
}

.qps-bottom-hint {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 11px;
  color: var(--ink-soft);
  margin-top: 7px;
}

.quest-group-divider {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 6px 4px 6px;
  margin-top: 6px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.6px;
  color: var(--ink-soft);
  text-transform: uppercase;
  border-bottom: 1px solid var(--border-paper);
  list-style: none;
}

.quest-group-divider:first-child {
  margin-top: 0;
  padding-top: 0;
}

.qgd-sub {
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-weight: 600;
  color: var(--ink-secondary);
  text-transform: none;
  letter-spacing: normal;
}

/* BOTTOM SECTION: 2-COLUMN LAYOUT */
.rewards-two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

/* LEFT COLUMN: HOW TO EARN $PTS (STRICT 3-COLUMN CSS GRID FOR FLAWLESS ALIGNMENT) */
.quest-items-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0;
  padding: 0;
}

.quest-items-list .quest-row {
  display: grid;
  grid-template-columns: 1fr 108px 100px;
  align-items: center;
  gap: 12px;
  background: var(--cream-2);
  border: 1px solid var(--border-paper);
  border-radius: var(--radius-sm, 8px);
  padding: 10px 14px;
  box-sizing: border-box;
  transition: all 0.2s ease;
}

.quest-items-list .quest-row:hover {
  border-color: rgba(139, 32, 32, 0.25);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.03);
}

.quest-items-list .quest-row.is-done {
  background: rgba(46, 125, 50, 0.035);
  border-color: rgba(46, 125, 50, 0.24);
}

/* Column 1: Info (Icon + Titles + Subtitle) */
.quest-item-left {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.quest-item-icon-box {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: var(--cream-card, rgba(0,0,0,0.03));
  border: 1px solid var(--border-paper);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
  flex-shrink: 0;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03);
}

.quest-row.is-done .quest-item-icon-box {
  background: rgba(46, 125, 50, 0.1);
  border-color: rgba(46, 125, 50, 0.25);
}

.quest-item-meta {
  min-width: 0;
  flex: 1;
}

.quest-item-header {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.quest-item-header strong {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.3;
}

.quest-row.is-done .quest-item-header strong {
  color: var(--gain-green);
}

.quest-badge-tag {
  font-size: 8px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  padding: 1px 5px;
  border-radius: 3px;
  background: rgba(139, 32, 32, 0.08);
  color: var(--crimson);
  font-family: var(--font-mono);
}

.quest-row.is-done .quest-badge-tag {
  background: rgba(46, 125, 50, 0.1);
  color: var(--gain-green);
}

.quest-item-meta p {
  margin: 2px 0 0 0;
  font-size: 11px;
  color: var(--ink-secondary);
  line-height: 1.35;
  white-space: normal;
}

/* Column 2: Fixed-width Points Chip */
.q-reward-slot {
  display: flex;
  justify-content: center;
}

.q-reward-chip {
  width: 108px;
  box-sizing: border-box;
  padding: 5px 8px;
  background: rgba(139, 32, 32, 0.06);
  border: 1px solid rgba(139, 32, 32, 0.16);
  border-radius: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 11.5px;
  color: var(--crimson);
  text-align: center;
  white-space: nowrap;
  letter-spacing: 0.2px;
}

.quest-row.is-done .q-reward-chip {
  background: rgba(46, 125, 50, 0.08);
  border-color: rgba(46, 125, 50, 0.25);
  color: var(--gain-green);
}

/* Column 3: Fixed-width Action Buttons & Status Badges */
.quest-action-slot {
  width: 100px;
  display: flex;
  justify-content: flex-end;
}

.quest-action-btn {
  width: 100px;
  height: 32px;
  box-sizing: border-box;
  padding: 0 8px;
  font-size: 11.5px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  border-radius: var(--radius-sm, 6px);
  white-space: nowrap;
  transition: all 0.2s ease;
}

.quest-status-badge {
  width: 100px;
  height: 32px;
  box-sizing: border-box;
  padding: 0 6px;
  background: rgba(46, 125, 50, 0.09);
  border: 1px solid rgba(46, 125, 50, 0.28);
  color: var(--gain-green);
  border-radius: var(--radius-sm, 6px);
  font-size: 11.5px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  white-space: nowrap;
  box-shadow: 0 1px 3px rgba(46, 125, 50, 0.04);
}

.quest-status-badge .badge-icon {
  font-size: 12px;
  line-height: 1;
}

/* RIGHT COLUMN: MARKETPLACE ITEMS GRID & CARDS */
.market-items-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.market-item {
  background: var(--cream-2);
  border: 1px solid var(--border-paper);
  border-radius: var(--radius-sm, 8px);
  padding: 14px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 200px;
  box-sizing: border-box;
  transition: all 0.2s ease;
  position: relative;
}

.market-item:hover {
  transform: translateY(-2px);
  border-color: rgba(139, 32, 32, 0.3);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.05);
}

.market-item.mi-verified {
  border-top: 3px solid #d4af37;
}

.market-item.mi-booster {
  border-top: 3px solid #10b981;
}

.market-item.mi-pinned {
  border-top: 3px solid #8b2020;
}

.market-item.mi-cup {
  border-top: 3px solid #8b5cf6;
}

.market-item.is-active {
  background: rgba(46, 125, 50, 0.035);
  border-color: rgba(46, 125, 50, 0.35);
  box-shadow: 0 2px 10px rgba(46, 125, 50, 0.08);
}

.mi-tag {
  font-size: 8.5px;
  text-transform: uppercase;
  font-weight: 800;
  letter-spacing: 0.4px;
  margin-bottom: 4px;
  display: inline-block;
  font-family: var(--font-mono);
}

.tag-gold { color: #b8860b; }
.tag-boost { color: #059669; }
.tag-spotlight { color: var(--crimson); }
.tag-cup { color: #7c3aed; }

.market-item h4 {
  font-size: 13px;
  font-weight: 700;
  margin: 2px 0 6px 0;
  color: var(--ink);
  line-height: 1.3;
}

.market-item p {
  font-size: 11px;
  color: var(--ink-secondary);
  margin-bottom: 12px;
  line-height: 1.35;
}

.mi-price-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 12px;
  padding: 4px 8px;
  border-radius: 6px;
  background: rgba(139, 32, 32, 0.06);
  border: 1px solid rgba(139, 32, 32, 0.16);
  color: var(--crimson);
  margin-bottom: 10px;
  width: fit-content;
}

.mi-price-chip.free {
  background: rgba(46, 125, 50, 0.08);
  border-color: rgba(46, 125, 50, 0.25);
  color: var(--gain-green);
}

.mi-price-chip.info {
  background: rgba(124, 58, 237, 0.08);
  border-color: rgba(124, 58, 237, 0.25);
  color: #7c3aed;
}

.market-item .btn {
  width: 100%;
  height: 33px;
  box-sizing: border-box;
  font-size: 11.5px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.is-perk-active {
  cursor: default !important;
  pointer-events: none;
}

/* ==========================================================================
   OFFICIAL EXCHANGE BANNER & COMMUNITY POINTS LEADERBOARD
   ========================================================================== */
.official-exchange-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  background: linear-gradient(135deg, var(--cream-card-elevated) 0%, var(--cream-card) 100%);
  border: 1.5px solid var(--crimson-soft);
  box-shadow: 0 4px 14px rgba(139, 32, 32, 0.08);
  padding: 18px 20px;
  margin-bottom: 20px;
  border-radius: var(--radius-md);
  flex-wrap: wrap;
}

.oeb-content { max-width: 620px; }

.oeb-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: var(--crimson);
  margin-bottom: 6px;
}

.oeb-title {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 4px;
}

.oeb-desc {
  font-size: 12.5px;
  color: var(--ink-secondary);
  line-height: 1.45;
}

.oeb-btn {
  white-space: nowrap;
  padding: 10px 18px;
  font-size: 12.5px;
  font-weight: 700;
}

.points-controls-cluster {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.points-table th.th-right, .points-table td.td-right {
  text-align: right;
}

/* ==========================================================================
   ACTIVE PERKS INVENTORY
   ========================================================================== */
.active-perks-card {
  margin-bottom: 20px;
  background: var(--cream-card);
}

.active-perks-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 10px;
}

.active-perk-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--cream-2);
  border: var(--border-paper);
  border-radius: var(--radius-sm);
  padding: 6px 12px;
  font-size: 11.5px;
}

.active-perk-pill.active {
  background: var(--gold-soft);
  border-color: var(--gold-seal);
  color: var(--ink);
  font-weight: 600;
}

.active-perk-pill.boost-active {
  background: var(--gain-soft);
  border-color: var(--gain-green);
  color: var(--gain-green);
  font-weight: 700;
}

.active-perk-pill.gold-active {
  background: rgba(212, 175, 55, 0.12);
  border-color: rgba(212, 175, 55, 0.45);
  color: var(--ink);
  font-weight: 700;
}

.sponsor-tag {
  background: rgba(139, 32, 32, 0.12);
  color: var(--crimson);
  padding: 2px 6px;
  border-radius: 3px;
  font-size: 8.5px;
  font-weight: 800;
}

/* ==========================================================================
   VIP ALPHA & LIVE COPY-TRADING ENGINE
   ========================================================================== */
.vip-hero-banner {
  padding: 24px;
  margin-bottom: 20px;
  background: linear-gradient(135deg, var(--cream-card) 0%, var(--gold-soft) 100%);
  border: 1.5px solid var(--gold-seal);
}

.vip-status-strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--cream-card);
  border: var(--border-paper);
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  margin-top: 14px;
  flex-wrap: wrap;
  gap: 10px;
}

.vip-badge-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--gold-soft);
  border: 1px solid var(--gold-seal);
  color: #5c3800;
  padding: 4px 10px;
  border-radius: var(--radius-sm);
  font-size: 11.5px;
  font-weight: 700;
}

.vip-plans-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-top: 14px;
}

.vip-plan-card {
  background: var(--cream-2);
  border: var(--border-paper);
  border-radius: var(--radius-md);
  padding: 20px 16px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: all var(--transition);
}

.vip-plan-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-hover);
  border-color: var(--border-paper-strong);
}

.vip-plan-card.featured-plan {
  background: var(--cream-card-elevated);
  border: 2px solid var(--crimson);
  box-shadow: 0 4px 16px rgba(139, 32, 32, 0.12);
}

.vp-tag {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 6px;
}

.vp-tag.highlight { color: var(--crimson); }

.vp-title { font-size: 1.15rem; font-weight: 700; margin-bottom: 6px; }

.vp-price {
  font-family: var(--font-mono);
  font-size: 1.8rem;
  font-weight: 800;
  color: var(--ink);
  margin-bottom: 8px;
}

.vp-price small { font-size: 12px; font-weight: 500; color: var(--ink-soft); }

.vp-desc { font-size: 11.5px; color: var(--ink-secondary); margin-bottom: 14px; line-height: 1.4; }

.vp-features {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 11.5px;
  color: var(--ink);
  margin-bottom: 18px;
}

/* Contact Pill Cards for Sponsor Channels */
.contact-pill-card {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--cream-card);
  border: var(--border-paper);
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  transition: all var(--transition);
  text-decoration: none;
}

.contact-pill-card:hover {
  background: var(--cream-card-elevated);
  border-color: var(--crimson);
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
}


.contact-pill-card .icon {
  font-size: 20px;
  flex-shrink: 0;
}

.copy-engine-badge {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: var(--ink-secondary);
  font-family: var(--font-mono);
}

/* ==========================================================================
   LIVE $PAPER TOKEN & STAKING MINT ENGINE
   ========================================================================== */
.paper-mint-actions-top {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.live-status-pill {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--gain-green);
  background: var(--gain-soft);
  border: 1px solid var(--gain-border);
  padding: 3px 8px;
  border-radius: 4px;
  font-weight: 700;
}

.paper-mint-metrics-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 16px;
}

.pm-metric-box {
  background: var(--cream-2);
  border: var(--border-paper);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  transition: all var(--transition);
}

.pm-metric-box:hover {
  background: var(--cream-card-elevated);
  border-color: var(--border-paper-strong);
  transform: translateY(-1px);
}

.pm-lbl {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-soft);
  margin-bottom: 4px;
}

.pm-val {
  font-family: var(--font-mono);
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--ink);
  line-height: 1.2;
}

.pm-val small {
  font-size: 11px;
  font-weight: 600;
  color: var(--crimson);
}

.pm-sub {
  font-size: 11px;
  color: var(--ink-soft);
  margin-top: 4px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.pm-sub code {
  font-family: var(--font-mono);
  font-size: 10.5px;
  background: rgba(0, 0, 0, 0.04);
  padding: 1px 4px;
  border-radius: 3px;
}

.btn-copy-mini {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  font-size: 11px;
  opacity: 0.7;
  transition: opacity 0.15s;
}

.btn-copy-mini:hover {
  opacity: 1;
}

.paper-mint-links-row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  border-top: 1px dashed var(--tape-border);
  padding-top: 12px;
}

.paper-reserves-mini {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 11.5px;
  color: var(--ink-secondary);
  margin-left: auto;
}

/* Mint Curve & Stakers Educational Explainer Banner */
.mint-curve-banner {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: var(--radius-sm);
  padding: 14px 16px;
  display: flex;
  align-items: stretch;
  gap: 18px;
  margin-top: 14px;
}

@media (max-width: 768px) {
  .mint-curve-banner {
    flex-direction: column;
    gap: 14px;
  }
  .mcb-divider {
    display: none;
  }
}

.mcb-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.mcb-divider {
  width: 1px;
  background: #e2e8f0;
  margin: 0 4px;
}

.mcb-head {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--ink);
}

.mcb-icon {
  font-size: 15px;
}

.mcb-text {
  font-size: 11.5px;
  color: var(--ink-secondary);
  line-height: 1.5;
  margin: 0;
}

.mcb-text strong {
  color: var(--ink);
}

.mcb-text code {
  font-family: var(--font-mono);
  font-size: 11px;
  background: #edf2f7;
  padding: 1px 4px;
  border-radius: 3px;
  color: #0f172a;
}

.mcb-link {
  font-size: 11px;
  font-weight: 600;
  color: var(--crimson);
  text-decoration: underline;
  margin-top: auto;
  padding-top: 4px;
  display: inline-flex;
  align-items: center;
  gap: 3px;
}

.mcb-link:hover {
  color: #be123c;
}

.curve-badge {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 4px;
  display: inline-block;
}

.curve-badge.flat {
  background: rgba(21, 128, 61, 0.1);
  color: #15803d;
  border: 1px solid rgba(21, 128, 61, 0.25);
}

.curve-badge.ratchet {
  background: rgba(225, 29, 72, 0.1);
  color: #e11d48;
  border: 1px solid rgba(225, 29, 72, 0.25);
  letter-spacing: 0.2px;
}

.pm-sub-secondary {
  display: block;
  font-size: 11px;
  color: var(--ink-soft);
  margin-top: 4px;
  font-family: var(--font-mono);
  letter-spacing: -0.2px;
}

/* ==========================================================================
   SLIDING COUNTDOWN & ROLLER TRANSITION ENGINE (Zero Blink / Flash)
   ========================================================================== */
.slide-countdown-container {
  display: inline-flex;
  position: relative;
  overflow: hidden;
  vertical-align: baseline;
  line-height: inherit;
  height: 1.25em;
  mask-image: linear-gradient(to bottom, transparent 0%, black 15%, black 85%, transparent 100%);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 15%, black 85%, transparent 100%);
}

.slide-countdown-item {
  display: inline-block;
  white-space: nowrap;
  line-height: inherit;
  will-change: transform, opacity;
}

/* Sliding Countdown Animations (Digits roll down like a mechanical countdown reel) */
@keyframes slideCountdownDownOut {
  0% {
    transform: translateY(0);
    opacity: 1;
  }
  100% {
    transform: translateY(100%);
    opacity: 0;
  }
}

@keyframes slideCountdownDownIn {
  0% {
    transform: translateY(-100%);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes slideCountdownUpOut {
  0% {
    transform: translateY(0);
    opacity: 1;
  }
  100% {
    transform: translateY(-100%);
    opacity: 0;
  }
}

@keyframes slideCountdownUpIn {
  0% {
    transform: translateY(100%);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}

.slide-item-out-down {
  animation: slideCountdownDownOut 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
}

.slide-item-in-down {
  animation: slideCountdownDownIn 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  display: inline-block;
}

.slide-item-out-up {
  animation: slideCountdownUpOut 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
}

.slide-item-in-up {
  animation: slideCountdownUpIn 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  display: inline-block;
}

/* Smooth Soft Transition for Values */
.pm-val, .pm-sub-secondary, .pnl-val, #dailyResetTimerDisplay {
  transition: color 0.35s ease;
}

/* Digital Countdown Pill styling */
.countdown-digit-block {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.05);
  border-radius: 4px;
  padding: 1px 4px;
  font-family: var(--font-mono);
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.2px;
}

/* Smooth Position Card Entrance & Exit Transitions (Zero Blink / Flash) */
.position-card {
  transition: transform 0.25s ease, box-shadow 0.25s ease, opacity 0.35s ease;
  will-change: transform, opacity;
}

.position-card.card-enter {
  animation: cardSlideDownIn 0.35s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.position-card.position-closing,
.position-card.card-exit {
  animation: cardSlideUpOut 0.32s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  pointer-events: none;
}

@keyframes cardSlideDownIn {
  0% {
    opacity: 0;
    transform: translateY(-8px) scale(0.99);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes cardSlideUpOut {
  0% {
    opacity: 1;
    transform: translateY(0) scale(1);
    max-height: 400px;
  }
  100% {
    opacity: 0;
    transform: translateY(-10px) scale(0.97);
    max-height: 0;
    margin-bottom: -16px;
    padding-top: 0;
    padding-bottom: 0;
    border-width: 0;
    overflow: hidden;
  }
}

/* ==========================================================================
   OFFICIAL PORTFOLIO & POSITION INSPECTOR WITH CREATIVE POSITION CARDS
   ========================================================================== */
.inspector-alert-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--cream-2);
  border: var(--border-paper);
  border-radius: var(--radius-sm);
  padding: 5px 10px;
  cursor: pointer;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--ink-secondary);
  transition: all var(--transition);
}

.inspector-alert-toggle:hover {
  background: var(--cream-card-elevated);
  border-color: var(--crimson);
  color: var(--ink);
}

.inspector-alert-toggle input {
  cursor: pointer;
  accent-color: var(--crimson);
}

.inspector-input-row {
  display: flex;
  gap: 8px;
  margin-bottom: 8px;
}

.inspector-input-row input {
  flex: 1;
  font-family: var(--font-mono);
  font-size: 12.5px;
}

.quick-whales-pills {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.qwp-title {
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-soft);
}

.whale-pill-btn {
  background: var(--cream-2);
  border: var(--border-paper);
  border-radius: var(--radius-sm);
  padding: 5px 8px 5px 10px;
  font-size: 11px;
  font-weight: 600;
  color: var(--ink-secondary);
  cursor: pointer;
  transition: all var(--transition);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.whale-pill-btn:hover {
  color: var(--ink);
  background: var(--cream-card-elevated);
  border-color: var(--border-paper-strong);
  transform: translateY(-1px);
}

.whale-pill-btn.active {
  background: var(--ink);
  color: #ffffff;
  border-color: var(--ink);
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.12);
}

.chip-remove-btn {
  background: transparent;
  border: none;
  font-size: 10.5px;
  line-height: 1;
  color: var(--ink-soft);
  cursor: pointer;
  padding: 2px 5px;
  border-radius: 3px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s ease;
  margin-left: 2px;
}

.chip-remove-btn:hover {
  background: rgba(225, 29, 72, 0.12);
  color: var(--crimson);
}

.whale-pill-btn.active .chip-remove-btn {
  color: rgba(255, 255, 255, 0.65);
}

.whale-pill-btn.active .chip-remove-btn:hover {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.22);
}

.inspector-positions-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  background: var(--cream-2);
  border: var(--border-paper);
  border-radius: var(--radius-sm);
  margin-bottom: 14px;
}

.iph-left {
  display: flex;
  align-items: center;
  gap: 8px;
}

.iph-title {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--ink);
}

.iph-title code {
  font-family: var(--font-mono);
  color: var(--crimson);
}

.iph-count-pill {
  font-size: 10.5px;
  font-weight: 700;
  background: var(--gain-soft);
  color: var(--gain-green);
  border: 1px solid var(--gain-border);
  padding: 2px 7px;
  border-radius: 12px;
}

/* Creative Position Cards Grid (Max 4 per page) */
.inspector-cards-deck {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
  margin-bottom: 16px;
}

@media (max-width: 820px) {
  .inspector-cards-deck {
    grid-template-columns: 1fr;
  }
}

.position-card {
  background: var(--cream-card-elevated);
  border: var(--border-paper);
  border-radius: var(--radius-md);
  padding: 14px 16px;
  box-shadow: var(--shadow-paper);
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: all var(--transition);
  animation: posCardEnter 0.28s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
  overflow: hidden;
}

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

.position-card.position-closing {
  opacity: 0;
  transform: translateY(-8px) scale(0.95);
  transition: all 0.25s ease;
}

.position-card:hover {
  border-color: var(--border-paper-strong);
  box-shadow: var(--shadow-hover);
  transform: translateY(-1.5px);
}

.position-card.is-queued {
  border-left: 3.5px solid var(--gold-seal);
}

.position-card.is-active-long {
  border-left: 3.5px solid var(--gain-green);
}

.position-card.is-active-short {
  border-left: 3.5px solid var(--crimson);
}

.position-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.pct-left {
  display: flex;
  align-items: center;
  gap: 8px;
}

.pct-asset-pill {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 800;
  padding: 3px 8px;
  border-radius: 4px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.pct-asset-pill.long {
  background: var(--gain-soft);
  color: var(--gain-green);
  border: 1px solid var(--gain-border);
}

.pct-asset-pill.short {
  background: var(--crimson-soft);
  color: var(--crimson);
  border: 1px solid var(--crimson-border);
}

.pct-time-ago {
  font-size: 10.5px;
  color: var(--ink-soft);
  font-family: var(--font-mono);
}

.pct-trader-badge {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  color: var(--ink-secondary);
  background: var(--cream-2);
  padding: 2px 7px;
  border-radius: 4px;
}

/* PnL Strip inside Position Card */
.position-pnl-strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  background: var(--cream-2);
  border: var(--border-paper);
  margin: 10px 0;
}

.position-pnl-strip.profit {
  background: rgba(16, 185, 129, 0.08);
  border-color: rgba(16, 185, 129, 0.25);
}

.position-pnl-strip.loss {
  background: rgba(225, 29, 72, 0.08);
  border-color: rgba(225, 29, 72, 0.25);
}

.pnl-strip-left {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.pnl-strip-right {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: var(--ink-soft);
  font-family: var(--font-mono);
}

.pnl-lbl {
  font-size: 11px;
  font-weight: 600;
  color: var(--ink-secondary);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.pnl-val {
  font-family: var(--font-mono);
  font-size: 13.5px;
  font-weight: 800;
}

/* Metrics Grid inside Position Card */
.position-metrics-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px 12px;
  background: var(--cream-2);
  border: var(--border-paper);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  margin-bottom: 12px;
}

.pmg-cell,
.pmg-item {
  display: flex;
  flex-direction: column;
}

.pmg-lbl {
  font-size: 9.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ink-soft);
  margin-bottom: 2px;
}

.pmg-val {
  font-family: var(--font-mono);
  font-size: 12.5px;
  font-weight: 700;
  color: var(--ink);
}

.pmg-val.pnl-gain {
  color: var(--gain-green);
}

.pmg-val.pnl-loss {
  color: var(--loss-red);
}

.position-card-footer,
.position-actions-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding-top: 4px;
}

.btn-copy-position {
  flex: 1;
  background: var(--ink);
  color: #ffffff;
  border: 1px solid var(--ink);
  padding: 6px 12px;
  border-radius: var(--radius-sm);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: all var(--transition);
}

.btn-copy-position:hover {
  background: #1e293b;
  border-color: #1e293b;
  transform: translateY(-1px);
  box-shadow: 0 3px 10px rgba(42, 37, 32, 0.18);
}

.btn-copy-position:active {
  transform: scale(0.98);
}

.btn-view-official,
.btn-view-exchange {
  background: transparent;
  border: var(--border-paper-strong);
  color: var(--ink-secondary);
  padding: 6px 10px;
  border-radius: var(--radius-sm);
  font-size: 11.5px;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: all var(--transition);
}

.btn-view-official:hover,
.btn-view-exchange:hover {
  background: var(--cream-2);
  color: var(--ink);
  border-color: var(--crimson);
}

.btn-close-sim {
  background: transparent;
  border: 1px solid rgba(158, 42, 43, 0.25);
  color: var(--crimson);
  padding: 6px 8px;
  border-radius: var(--radius-sm);
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--transition);
}

.btn-close-sim:hover {
  background: var(--crimson-soft);
}

/* Pagination Bar for Position Cards */
.inspector-pagination-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 8px 12px;
  background: var(--cream-2);
  border: var(--border-paper);
  border-radius: var(--radius-sm);
}

.inspector-pagination-bar span {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--ink-secondary);
  font-family: var(--font-mono);
}

.inspector-page-pill {
  width: auto;
  min-width: 90px;
  height: 28px;
  padding: 4px 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  font-size: 11.5px;
  font-weight: 700;
  font-family: var(--font-mono);
  background: var(--cream-card-elevated);
  border: var(--border-paper);
  color: var(--ink);
  white-space: nowrap;
  transition: all 0.15s ease;
}

.inspector-page-pill:hover {
  background: var(--cream-2);
  color: var(--ink);
}

.inspector-page-pill.active {
  background: var(--ink);
  color: #ffffff;
  border-color: var(--ink);
}

.inspector-empty-state {
  grid-column: 1 / -1;
  text-align: center;
  padding: 32px 16px;
  background: var(--cream-2);
  border: 1px dashed var(--tape-border);
  border-radius: var(--radius-sm);
  color: var(--ink-soft);
  font-size: 12.5px;
}

/* ==========================================================================
   COPIED TRADES SIMULATION ENGINE BANNER & COPY MODAL
   ========================================================================== */
.copy-engine-banner {
  display: flex;
  align-items: center;
  gap: 12px;
  background: rgba(158, 42, 43, 0.05);
  border: 1px dashed rgba(158, 42, 43, 0.3);
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  margin-bottom: 14px;
}

.ceb-badge {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  background: var(--crimson);
  color: #ffffff;
  padding: 3px 8px;
  border-radius: 4px;
  white-space: nowrap;
}

.ceb-text {
  font-size: 11.5px;
  color: var(--ink-secondary);
  line-height: 1.45;
}

.engine-pill-subtle {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  background: var(--cream-2);
  border: var(--border-paper);
  color: var(--ink-secondary);
  padding: 3px 10px;
  border-radius: 20px;
}

/* 1-Click Copy Modal Styling */
.copy-modal-container {
  max-width: 520px;
}

.engine-badge-sim {
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: 700;
  color: var(--crimson);
  background: var(--crimson-soft);
  border: 1px solid var(--crimson-border);
  padding: 2.5px 8px;
  border-radius: 4px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  display: inline-block;
  margin-bottom: 4px;
}

.engine-badge-real {
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: 700;
  color: #0284c7;
  background: rgba(2, 132, 199, 0.08);
  border: 1px solid rgba(2, 132, 199, 0.25);
  padding: 2.5px 8px;
  border-radius: 4px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  display: inline-block;
  margin-bottom: 4px;
}

.badge-status-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #94a3b8;
  margin-right: 4px;
  vertical-align: middle;
}

.badge-status-dot.active {
  background: #10b981;
  box-shadow: 0 0 6px rgba(16, 185, 129, 0.6);
}

.copy-target-card {
  background: var(--cream-2);
  border: var(--border-paper);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
}

.ctc-top {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}

.ctc-asset-pill {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 12px;
  background: var(--ink);
  color: #ffffff;
  padding: 3px 8px;
  border-radius: 4px;
  letter-spacing: 0.02em;
}

.ctc-trader {
  margin-left: auto;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 12px;
  color: var(--ink-soft);
}

.ctc-prices-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 10px;
}

.ctc-prices-grid.has-tp-sl {
  grid-template-columns: repeat(2, 1fr);
  gap: 8px 10px;
}

.ctc-col {
  background: var(--cream-card-elevated);
  border: var(--border-paper);
  border-radius: var(--radius-sm);
  padding: 8px 10px;
  display: flex;
  flex-direction: column;
}

.ctc-col.highlight {
  border-color: rgba(21, 128, 61, 0.4);
  background: rgba(21, 128, 61, 0.06);
}

.ctc-lbl {
  font-size: 9.5px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 3px;
  display: flex;
  align-items: center;
  gap: 4px;
  letter-spacing: 0.03em;
}

.ctc-val {
  font-family: var(--font-sans);
  font-size: 14.5px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.01em;
}

.margin-label-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
}

.margin-field-label {
  font-size: 12px;
  font-weight: 700;
  color: var(--ink);
}

.margin-display-val {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 13.5px;
  color: var(--ink);
}

.margin-preset-pills {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 6px;
  margin-bottom: 4px;
}

.btn-preset-margin {
  flex: 1;
  min-width: 58px;
  background: var(--cream-2);
  border: var(--border-paper);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 12.5px;
  font-weight: 600;
  padding: 7px 10px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all var(--transition);
  text-align: center;
}

.btn-preset-margin:hover {
  background: var(--cream-card-elevated);
  border-color: var(--ink-soft);
}

.btn-preset-margin.active {
  background: var(--ink);
  color: #ffffff;
  border-color: var(--ink);
  box-shadow: 0 1px 4px rgba(15, 23, 42, 0.2);
}

[data-theme="dark"] .btn-preset-margin.active {
  background: var(--cream-card-elevated);
  color: var(--ink);
  border-color: var(--border-paper-strong);
}

.custom-margin-wrap {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  margin-top: 8px;
}

.custom-margin-wrap .currency-prefix {
  position: absolute;
  left: 14px;
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 15px;
  color: var(--ink-soft);
  pointer-events: none;
  z-index: 3;
  line-height: 1;
}

.custom-margin-wrap .currency-suffix {
  position: absolute;
  right: 14px;
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 11.5px;
  color: var(--ink-soft);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  pointer-events: none;
  z-index: 3;
}

.form-group .custom-margin-wrap input.paper-input,
.custom-margin-wrap input {
  width: 100% !important;
  padding: 10px 48px 10px 32px !important;
  font-family: var(--font-sans) !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  color: var(--ink) !important;
  background: var(--cream-card) !important;
  border: var(--border-paper) !important;
  border-radius: var(--radius-sm) !important;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.03) !important;
  outline: none !important;
  transition: all var(--transition) !important;
  appearance: textfield !important;
  -moz-appearance: textfield !important;
}

.custom-margin-wrap input::-webkit-outer-spin-button,
.custom-margin-wrap input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.form-group .custom-margin-wrap input:focus,
.custom-margin-wrap input:focus {
  border-color: var(--crimson) !important;
  box-shadow: 0 0 0 3px rgba(158, 42, 43, 0.12), inset 0 1px 2px rgba(0, 0, 0, 0.02) !important;
}

.copy-metrics-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  background: var(--cream-2);
  border: var(--border-paper);
  border-radius: var(--radius-sm);
  padding: 11px 12px 10px 12px;
  margin-top: 14px;
}

.cms-item {
  display: flex;
  flex-direction: column;
}

.cms-lbl {
  font-size: 9.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ink-soft);
  margin-bottom: 3px;
  white-space: nowrap;
}

.cms-val {
  font-family: var(--font-sans);
  font-size: 13.5px;
  font-weight: 700;
  color: var(--ink);
  white-space: nowrap;
}

.copy-protocol-notice {
  background: rgba(42, 37, 32, 0.03);
  border-left: 3px solid var(--gold-seal);
  border-radius: 4px;
  padding: 10px 12px;
  margin-top: 14px;
}

.cpn-head {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  margin-bottom: 4px;
  color: var(--ink);
}

.copy-protocol-notice p {
  font-size: 11px;
  color: var(--ink-secondary);
  line-height: 1.45;
  margin: 0;
}

/* ==========================================================================
   COMPLETE COPY TRADING TERMINAL (DEMO & REAL HYPEREVM ENGINE)
   ========================================================================== */
.copy-terminal-card {
  padding: 22px 24px;
}

.copy-terminal-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}

.ct-header-left {
  flex: 1;
  min-width: 260px;
}

.ct-subtitle {
  font-size: 12.5px;
  color: var(--ink-secondary);
  margin-top: 4px;
  line-height: 1.4;
}

.copy-mode-switcher {
  display: inline-flex;
  background: var(--cream-2);
  border: 1px solid var(--border-paper);
  border-radius: 10px;
  padding: 4px;
  gap: 4px;
}

.cms-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  background: transparent;
  border: none;
  border-radius: 7px;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-secondary);
  cursor: pointer;
  transition: all 0.15s ease;
}

.cms-btn:hover {
  color: var(--ink);
  background: rgba(0, 0, 0, 0.04);
}

.cms-btn.active {
  background: var(--ink);
  color: #ffffff;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}

[data-theme="dark"] .cms-btn.active {
  background: var(--cream-card-elevated);
  color: var(--ink);
  border: 1px solid var(--border-paper-strong);
}

.cms-badge {
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.2);
  color: inherit;
}

.cms-btn:not(.active) .cms-badge {
  background: var(--cream-card-elevated);
  border: 1px solid var(--border-paper);
  color: var(--ink-soft);
}

.cms-badge.real {
  background: var(--gain-green);
  color: #ffffff;
}

.copy-controls-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding: 10px 14px;
  background: var(--cream-2);
  border: 1px solid var(--border-paper);
  border-radius: var(--radius-sm);
  margin-bottom: 16px;
}

.ccb-left, .ccb-right {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.ccb-submode-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 20px;
  background: var(--cream-card-elevated);
  border: 1px solid var(--border-paper);
  color: var(--ink);
}

.ccb-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--gain-green);
}

.ccb-dot.live {
  box-shadow: 0 0 6px rgba(34, 197, 94, 0.8);
  animation: pulse 2s infinite;
}

.auto-copy-status-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.04);
  border: 1px dashed var(--border-paper-strong);
  color: var(--ink);
  cursor: pointer;
  transition: all 0.15s ease;
}

.auto-copy-status-chip:hover {
  background: var(--cream-card-elevated);
  border-color: var(--crimson);
}

.auto-copy-status-chip.active {
  background: rgba(34, 197, 94, 0.1);
  border: 1px solid rgba(34, 197, 94, 0.4);
  color: var(--gain-green);
}

.copy-stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 16px;
}

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

.cs-metric-box {
  background: var(--cream-2);
  border: 1px solid var(--border-paper);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
}

.csm-lbl {
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--ink-soft);
  letter-spacing: 0.04em;
  margin-bottom: 4px;
}

.csm-val {
  font-family: var(--font-body);
  font-size: 18px;
  font-weight: 800;
  color: var(--ink);
  letter-spacing: -0.02em;
}

.csm-sub {
  font-size: 10.5px;
  color: var(--ink-secondary);
  margin-top: 3px;
}

.copy-security-guarantee-strip {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  background: rgba(15, 23, 42, 0.03);
  border: 1px solid var(--border-paper);
  border-radius: var(--radius-sm);
  padding: 11px 14px;
  margin-bottom: 16px;
}

[data-theme="dark"] .copy-security-guarantee-strip {
  background: rgba(255, 255, 255, 0.02);
}

.csg-icon {
  font-size: 20px;
  line-height: 1;
  flex-shrink: 0;
  margin-top: 2px;
}

.csg-content {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.csg-content strong {
  font-size: 12px;
  color: var(--ink);
}

.csg-content span {
  font-size: 11px;
  color: var(--ink-secondary);
  line-height: 1.4;
}

.copy-table-filter-tabs {
  display: flex;
  gap: 8px;
  border-bottom: 1px solid var(--border-paper);
  padding-bottom: 8px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}

.ctf-tab {
  background: transparent;
  border: none;
  font-family: var(--font-body);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink-soft);
  padding: 6px 12px;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.ctf-tab:hover {
  color: var(--ink);
  background: var(--cream-2);
}

.ctf-tab.active {
  color: var(--crimson);
  background: var(--crimson-soft);
  font-weight: 700;
}

.copy-badge {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 800;
  padding: 2.5px 7px;
  border-radius: 4px;
  display: inline-block;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.copy-badge.demo {
  background: rgba(59, 130, 246, 0.1);
  color: #2563eb;
  border: 1px solid rgba(59, 130, 246, 0.3);
}

.copy-badge.real-auto {
  background: rgba(16, 185, 129, 0.1);
  color: #059669;
  border: 1px solid rgba(16, 185, 129, 0.3);
}

.copy-badge.real-manual {
  background: rgba(225, 29, 72, 0.1);
  color: #e11d48;
  border: 1px solid rgba(225, 29, 72, 0.3);
}

/* Auto-Copy Settings Modal */
.auto-copy-toggle-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  background: var(--cream-2);
  border: 1px solid var(--border-paper);
  border-radius: var(--radius-sm);
}

.actb-info {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.actb-info strong {
  font-size: 13.5px;
  color: var(--ink);
}

.actb-info span {
  font-size: 11px;
  color: var(--ink-secondary);
}

.copy-mode-switcher-small {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.copy-mode-switcher-small .cms-btn {
  justify-content: center;
  padding: 10px 12px;
  border: 1px solid var(--border-paper);
}

.auto-copy-option-row {
  padding: 10px 12px;
  background: var(--cream-2);
  border: 1px solid var(--border-paper);
  border-radius: var(--radius-sm);
}

.whitelist-wallets-list {
  max-height: 160px;
  overflow-y: auto;
  border: 1px solid var(--border-paper);
  border-radius: var(--radius-sm);
  background: var(--cream-card-elevated);
}

.whitelist-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  border-bottom: 1px solid var(--border-paper);
  font-family: var(--font-mono);
  font-size: 11.5px;
}

.whitelist-item:last-child {
  border-bottom: none;
}

.copy-security-note-box {
  background: rgba(225, 29, 72, 0.05);
  border: 1px dashed rgba(225, 29, 72, 0.3);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  font-size: 11.5px;
  color: var(--ink-secondary);
  line-height: 1.4;
}

.btn-start-copy-cta {
  background: var(--crimson) !important;
  color: #ffffff !important;
  font-weight: 700 !important;
  border: 1px solid var(--crimson) !important;
  box-shadow: 0 2px 8px rgba(225, 29, 72, 0.25);
  transition: all 0.2s ease;
}

.btn-start-copy-cta:hover {
  background: #be123c !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(225, 29, 72, 0.38);
}

.empty-whitelist-banner {
  background: rgba(245, 158, 11, 0.08);
  border: 1px solid rgba(245, 158, 11, 0.3);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  font-size: 11.5px;
  color: #92400e;
  line-height: 1.4;
  margin-bottom: 8px;
}

.input-error-pulse {
  border-color: var(--crimson) !important;
  box-shadow: 0 0 10px rgba(225, 29, 72, 0.5) !important;
  animation: pulseInput 0.6s ease;
}

@keyframes pulseInput {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.02); }
}

.quick-add-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 7px 10px;
  background: var(--cream-2);
  border: 1px solid var(--border-paper);
  border-radius: 6px;
  font-size: 11.5px;
  cursor: pointer;
  transition: all 0.15s ease;
  text-align: left;
}

.quick-add-btn:hover {
  background: var(--cream-card-elevated);
  border-color: var(--crimson-border);
}

.copy-modal-seg-switch {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  background: var(--cream-2);
  border: 1px solid var(--border-paper);
  border-radius: 8px;
  padding: 3px;
  margin-bottom: 12px;
}

.cm-seg-btn {
  padding: 8px 12px;
  border: none;
  background: transparent;
  border-radius: 6px;
  font-family: var(--font-body);
  font-size: 12.5px;
  font-weight: 700;
  color: var(--ink-secondary);
  cursor: pointer;
  transition: all 0.15s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.cm-seg-btn.active {
  background: var(--ink);
  color: #ffffff;
}

[data-theme="dark"] .cm-seg-btn.active {
  background: var(--cream-card-elevated);
  color: var(--ink);
  border: 1px solid var(--border-paper-strong);
}

/* ==========================================================================
   ADAPTIVE MEDIA GALLERY & IMAGE UPLOAD
   ========================================================================== */
.post-media-grid {
  margin-top: 12px;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid rgba(0, 0, 0, 0.08);
  background: #000000;
}

.post-media-item-wrap {
  position: relative;
  overflow: hidden;
  cursor: pointer;
  background: #0f1419;
}

.post-media-item-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.25s ease, filter 0.2s ease;
}

.post-media-item-wrap:hover img {
  filter: brightness(0.92);
  transform: scale(1.015);
}

/* 1 Image: Full width responsive single image */
.post-media-grid.media-count-1 {
  display: block;
  max-height: 440px;
}
.post-media-grid.media-count-1 .post-media-item-wrap {
  max-height: 440px;
}
.post-media-grid.media-count-1 img {
  max-height: 440px;
  object-fit: contain;
  background: rgba(0, 0, 0, 0.03);
}

/* 2 Images: 1st image highlighted (1.55fr vs 1fr) */
.post-media-grid.media-count-2 {
  display: grid;
  grid-template-columns: 1.55fr 1fr;
  gap: 3px;
  height: 330px;
}

/* 3 Images: 1st image highlighted taking full left height (span 2), 2 & 3 stacked right */
.post-media-grid.media-count-3 {
  display: grid;
  grid-template-columns: 1.55fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 3px;
  height: 360px;
}
.post-media-grid.media-count-3 .post-media-item-wrap:first-child {
  grid-row: span 2;
}

/* 4 Images: 1st image highlighted taking left column (span 3 rows) */
.post-media-grid.media-count-4 {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  grid-template-rows: repeat(3, 1fr);
  gap: 3px;
  height: 380px;
}
.post-media-grid.media-count-4 .post-media-item-wrap:first-child {
  grid-row: span 3;
}

/* Image Upload Dropzone in Create Post Modal */
.image-upload-dropzone {
  border: 1.5px dashed var(--border-paper-strong);
  border-radius: var(--radius-sm);
  background: var(--cream-2);
  padding: 18px 14px;
  text-align: center;
  cursor: pointer;
  transition: all 0.2s ease;
  margin-top: 6px;
}

.image-upload-dropzone:hover,
.image-upload-dropzone.drag-over {
  border-color: var(--ink);
  background: var(--cream-card-elevated);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.upload-dropzone-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.upload-icon {
  font-size: 24px;
}

.upload-text {
  font-size: 12.5px;
  color: var(--ink);
}

.upload-subtext {
  font-size: 11px;
  color: var(--ink-soft);
}

.img-hint-text {
  font-size: 10.5px;
  color: var(--ink-soft);
  font-family: var(--font-mono);
}

/* Thumbnail preview cards in composer */
.post-upload-preview-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-top: 10px;
}

.preview-thumb-card {
  position: relative;
  border-radius: 6px;
  overflow: hidden;
  height: 80px;
  background: #111;
  border: 1px solid var(--border-paper);
}

.preview-thumb-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.preview-hero-badge {
  position: absolute;
  top: 4px;
  left: 4px;
  background: var(--gold-seal);
  color: #ffffff;
  font-size: 8.5px;
  font-weight: 800;
  text-transform: uppercase;
  padding: 1px 5px;
  border-radius: 3px;
  letter-spacing: 0.03em;
}

.btn-remove-thumb {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.7);
  color: #ffffff;
  border: none;
  font-size: 11px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s ease;
}

.btn-remove-thumb:hover {
  background: var(--crimson);
}

/* Lightbox Modal */
.image-lightbox-backdrop {
  background: rgba(0, 0, 0, 0.92);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  padding: 20px;
}

.image-lightbox-backdrop.open {
  display: flex;
}

.lightbox-content-wrap {
  position: relative;
  max-width: 90vw;
  max-height: 90vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.lightbox-img {
  max-width: 90vw;
  max-height: 88vh;
  object-fit: contain;
  border-radius: 8px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.8);
}

.lightbox-close-btn {
  position: absolute;
  top: -36px;
  right: -10px;
  background: rgba(255, 255, 255, 0.2);
  border: none;
  color: #ffffff;
  font-size: 28px;
  line-height: 1;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

.lightbox-close-btn:hover {
  background: rgba(255, 255, 255, 0.4);
}

/* ==========================================================================
   GAMIFIED BOOST (UPVOTE) & FLOATING ANIMATION
   ========================================================================== */
.boost-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--cream-2);
  border: var(--border-paper);
  border-radius: 20px;
  padding: 5px 12px;
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  color: var(--ink);
  position: relative;
  user-select: none;
  transition: all 0.18s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.boost-pill:hover {
  background: var(--cream-card-elevated);
  border-color: var(--ink);
  transform: translateY(-1px);
}

.boost-pill:active {
  transform: scale(0.95);
}

.boost-icon {
  font-size: 13px;
  transition: transform 0.2s ease;
}

.boost-pill:hover .boost-icon {
  transform: scale(1.15);
}

.boost-label {
  font-size: 11.5px;
  font-weight: 700;
}

.boost-cost-tag {
  font-size: 9px;
  font-weight: 600;
  opacity: 0.65;
  margin-left: -2px;
}

/* Comment Boost Button */
.comment-boost-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: transparent;
  border: 1px solid transparent;
  color: var(--ink-soft);
  font-size: 11px;
  font-weight: 600;
  font-family: var(--font-mono);
  padding: 3px 8px;
  border-radius: 12px;
  cursor: pointer;
  position: relative;
  transition: all 0.15s ease;
}

.comment-boost-btn:hover {
  background: var(--cream-2);
  color: var(--ink);
  border-color: var(--border-paper);
}

.comment-boost-btn.boosted {
  color: #ca8a04;
  background: rgba(234, 179, 8, 0.1);
  border-color: rgba(202, 138, 4, 0.3);
}

/* Floating Rising Particle (+1 $PTS) */
.boost-float-particle {
  position: fixed;
  pointer-events: none;
  z-index: 100000;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 800;
  color: #ca8a04;
  background: #ffffff;
  border: 1.5px solid #eab308;
  padding: 3px 8px;
  border-radius: 20px;
  box-shadow: 0 4px 14px rgba(234, 179, 8, 0.35);
  animation: boostFloatUp 0.85s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  display: flex;
  align-items: center;
  gap: 4px;
}

@keyframes boostFloatUp {
  0% {
    opacity: 0;
    transform: translateY(0) scale(0.65);
  }
  20% {
    opacity: 1;
    transform: translateY(-14px) scale(1.15);
  }
  70% {
    opacity: 1;
    transform: translateY(-38px) scale(1);
  }
  100% {
    opacity: 0;
    transform: translateY(-60px) scale(0.8);
  }
}

/* Modals Checkout & Execution */
.checkout-plan-card {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--cream-2);
  border: 1.5px solid var(--crimson);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
}

.checkout-plan-price {
  font-family: var(--font-mono);
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--crimson);
}

.payment-method-switch {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.pay-method-btn {
  background: var(--cream-2);
  border: var(--border-paper);
  border-radius: var(--radius-sm);
  padding: 9px 12px;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--ink-secondary);
  cursor: pointer;
  text-align: center;
}

.pay-method-btn.active {
  background: var(--cream-card);
  border-color: var(--crimson);
  color: var(--crimson);
  font-weight: 700;
}

.pay-details-box {
  background: var(--cream-2);
  border: var(--border-paper);
  border-radius: var(--radius-sm);
  padding: 12px;
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.pay-detail-row {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
}

.checkout-guarantee-note {
  font-size: 11px;
  color: var(--ink-soft);
  text-align: center;
  margin-top: 12px;
}

.margin-presets-row {
  display: flex;
  gap: 6px;
}

.preset-btn {
  background: var(--cream-2);
  border: var(--border-paper);
  border-radius: var(--radius-sm);
  padding: 6px 12px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  color: var(--ink);
}

.preset-btn.active {
  background: var(--ink);
  color: var(--cream);
  border-color: var(--ink);
}

.copy-whale-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* ==========================================================================
   RIGHT SIDEBAR
   ========================================================================== */
.col-right {
  display: flex;
  flex-direction: column;
  gap: 18px;
  position: sticky;
  top: 96px;
}

.co-header,
.protocol-status-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
  gap: 8px;
}

.status-indicator-live {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 10.5px;
  font-weight: 700;
  font-family: var(--font-mono, monospace);
  color: #059669;
  background: rgba(16, 185, 129, 0.12);
  border: 1px solid rgba(16, 185, 129, 0.28);
  padding: 2px 7px;
  border-radius: 999px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  flex-shrink: 0;
  line-height: 1.2;
}

.status-indicator-live::before {
  content: '';
  display: inline-block;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #10b981;
  box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.25);
  animation: pulseDotLive 1.8s infinite;
}

@keyframes pulseDotLive {
  0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7); }
  70% { transform: scale(1.1); box-shadow: 0 0 0 5px rgba(16, 185, 129, 0); }
  100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); }
}

.protocol-status-card {
  padding: 16px;
}

.status-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 0;
  border-bottom: 1px dashed var(--tape-border, #e7dfd3);
  font-size: 11px;
  gap: 8px;
  white-space: nowrap;
}

.status-row:last-of-type { border-bottom: none; margin-bottom: 8px; }

.status-row.highlight-house-funds {
  background: rgba(16, 185, 129, 0.06);
  margin: 0 -6px 4px -6px;
  padding: 6px 8px;
  border-radius: 6px;
  border: 1px solid rgba(16, 185, 129, 0.22);
}

.status-row.highlight-house-funds .sr-lbl {
  font-weight: 700;
  color: var(--ink);
  display: flex;
  align-items: center;
  gap: 5px;
}

.status-row.highlight-house-funds .sr-val {
  font-size: 12.5px;
  letter-spacing: -0.01em;
}

.sr-lbl {
  color: var(--ink-soft);
  white-space: nowrap;
  flex-shrink: 0;
  font-size: 11px;
}
.sr-val {
  font-family: var(--font-mono, monospace);
  font-weight: 700;
  white-space: nowrap;
  text-align: right;
  flex-shrink: 0;
  font-size: 11px;
}

.countdown-strip {
  display: flex;
  justify-content: space-between;
  background: var(--cream-2);
  padding: 6px 10px;
  border-radius: var(--radius-sm);
  font-size: 11.5px;
  margin-bottom: 8px;
}

.tourney-leader-line { font-size: 11.5px; margin-bottom: 10px; }

.market-pairs-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.market-pair-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--cream-2);
  padding: 6px 10px;
  border-radius: var(--radius-sm);
  font-size: 11.5px;
  cursor: pointer;
}

.market-pair-row:hover { background: var(--cream-card-elevated); }
.mp-sym { font-weight: 700; }
.mp-vol { font-size: 9.5px; color: var(--ink-soft); }

.activity-feed-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.act-row {
  display: flex;
  gap: 6px;
  font-size: 11.5px;
  color: var(--ink-secondary);
}

.act-bullet { color: var(--crimson); font-weight: 700; }

/* ==========================================================================
   MODALS
   ========================================================================== */
.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.45);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 1000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
  animation: modalBackdropFade 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.modal-backdrop.open { display: flex; }

.modal-container {
  background: #ffffff;
  border: 1px solid var(--border-paper);
  border-radius: var(--radius-lg, 16px);
  max-width: 620px;
  width: 100%;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  overflow: hidden; /* Clips header and footer to container's rounded corners */
  box-sizing: border-box !important;
  box-shadow: 0 24px 50px -12px rgba(15, 23, 42, 0.25), 0 0 1px rgba(15, 23, 42, 0.2);
  animation: modalScaleIn 0.22s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
}

@keyframes modalBackdropFade {
  from { opacity: 0; }
  to { opacity: 1; }
}

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

.modal-header {
  flex-shrink: 0;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border-paper);
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #ffffff;
  border-top-left-radius: inherit;
  border-top-right-radius: inherit;
  z-index: 2;
}

.modal-title { font-size: 1.15rem; font-weight: 700; color: var(--ink); }
.modal-subtitle { font-size: 11.5px; color: var(--ink-soft); }

.modal-close-btn {
  background: transparent;
  border: none;
  font-size: 1.5rem;
  color: var(--ink-soft);
  cursor: pointer;
  line-height: 1;
}

.modal-close-btn:hover { color: var(--crimson); }

.modal-type-switcher {
  display: flex;
  border-bottom: var(--border-paper);
}

.type-switch-btn {
  flex: 1;
  background: var(--cream-2);
  border: none;
  padding: 10px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  color: var(--ink-secondary);
}

.type-switch-btn.active {
  background: var(--cream-card);
  color: var(--crimson);
  font-weight: 700;
  border-bottom: 2px solid var(--crimson);
}

.modal-body {
  flex: 1 1 auto;
  padding: 18px 20px 20px 20px;
  overflow-y: auto;
  overflow-x: hidden !important;
  box-sizing: border-box !important;
  width: 100% !important;
  max-width: 100% !important;
  min-height: 0;
  -webkit-overflow-scrolling: touch;
}

.form-group {
  margin-bottom: 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.form-group label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--ink-secondary);
}

.form-group input, .form-group select, .form-group textarea {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
  background: var(--cream-2);
  border: var(--border-paper);
  border-radius: var(--radius-sm);
  padding: 8px 10px;
  font-size: 12.5px;
  color: var(--ink);
  outline: none;
  font-family: var(--font-sans);
}

.form-group input:focus, .form-group select:focus, .form-group textarea:focus {
  border-color: var(--crimson);
}

.setup-builder-card {
  background: var(--cream-2);
  border: var(--border-paper);
  border-radius: var(--radius-sm);
  padding: 12px;
  margin-bottom: 12px;
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
}

.form-row.two-col {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap: 10px;
  width: 100%;
  box-sizing: border-box;
}

.form-row.three-col {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  width: 100%;
  box-sizing: border-box;
}

.form-row.two-col .form-group,
.form-row.three-col .form-group {
  min-width: 0;
  width: 100%;
  box-sizing: border-box;
}

.form-row.three-col input[type="number"] {
  width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
  -moz-appearance: textfield;
}

.form-row.three-col input[type="number"]::-webkit-inner-spin-button,
.form-row.three-col input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.setup-live-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 9.5px;
  font-weight: 700;
  color: var(--gain-green, #16a34a);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.setup-live-badge .pulse-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--gain-green, #16a34a);
  box-shadow: 0 0 0 0 rgba(22, 163, 74, 0.7);
  animation: pulse-green 2s infinite;
}

@keyframes pulse-green {
  0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(22, 163, 74, 0.7); }
  70% { transform: scale(1); box-shadow: 0 0 0 6px rgba(22, 163, 74, 0); }
  100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(22, 163, 74, 0); }
}

.btn-sync-live-price {
  background: none;
  border: none;
  padding: 0;
  font-size: 10px;
  font-weight: 700;
  color: var(--crimson);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 2px;
  transition: opacity 0.15s ease;
}

.btn-sync-live-price:hover {
  text-decoration: underline;
  opacity: 0.8;
}

.direction-switch {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}

.direction-switch input[type="radio"] { display: none; }

.dir-btn {
  padding: 7px;
  text-align: center;
  border-radius: var(--radius-sm);
  font-size: 11.5px;
  font-weight: 700;
  cursor: pointer;
  border: var(--border-paper);
  background: var(--cream-card);
  color: var(--ink-soft);
}

#setupDirLong:checked + .long-btn {
  background: var(--gain-soft);
  border-color: var(--gain-green);
  color: var(--gain-green);
}

#setupDirShort:checked + .short-btn {
  background: var(--crimson-soft);
  border-color: var(--crimson);
  color: var(--crimson);
}

.slider-header-row {
  display: flex;
  justify-content: space-between;
}

.leverage-badge {
  font-family: var(--font-mono);
  font-weight: 700;
  color: var(--crimson);
}

.paper-range-slider {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 8px;
  border-radius: 999px;
  background: #d8cebf;
  padding: 0 !important;
  margin: 14px 0 8px 0 !important;
  border: none !important;
  outline: none !important;
  cursor: pointer;
  box-sizing: border-box;
  display: block;
}

.paper-range-slider::-webkit-slider-runnable-track {
  width: 100%;
  height: 8px;
  border-radius: 999px;
  background: inherit;
  border: none;
  cursor: pointer;
}

.paper-range-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 22px;
  height: 22px;
  margin-top: -7px;
  border-radius: 50%;
  background: #ffffff;
  border: 3px solid var(--crimson, #b8132d);
  box-shadow: 0 2px 8px rgba(184, 19, 45, 0.4);
  cursor: pointer;
  position: relative;
  z-index: 2;
  transition: transform 0.1s ease, box-shadow 0.1s ease;
}

.paper-range-slider::-webkit-slider-thumb:hover {
  transform: scale(1.15);
  box-shadow: 0 4px 14px rgba(184, 19, 45, 0.55);
}

.paper-range-slider::-moz-range-thumb {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #ffffff;
  border: 3px solid var(--crimson, #b8132d);
  box-shadow: 0 2px 8px rgba(184, 19, 45, 0.4);
  cursor: pointer;
}

.paper-range-slider::-moz-range-track {
  width: 100%;
  height: 8px;
  border-radius: 999px;
  background: #d8cebf;
  border: none;
}

.paper-range-slider::-moz-range-progress {
  background-color: var(--crimson, #b8132d);
  height: 8px;
  border-radius: 999px;
}

.slider-ticks-row {
  display: flex;
  justify-content: space-between;
  font-size: 9px;
  color: var(--ink-soft);
}

.calc-strip {
  background: var(--cream-card);
  border: 1px dashed var(--tape-border);
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  display: flex;
  justify-content: space-between;
  font-size: 11.5px;
  margin-top: 10px;
}

.modal-footer {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  padding: 14px 20px 16px 20px;
  background: var(--cream-2, #faf8f5);
  border-top: 1px solid var(--border-paper);
  border-bottom-left-radius: inherit;
  border-bottom-right-radius: inherit;
  box-sizing: border-box !important;
  width: 100%;
  z-index: 2;
}

/* Modals where footer is nested directly inside modal-body or a form */
.modal-body > .modal-footer,
form.modal-body > .modal-footer,
.modal-body form > .modal-footer {
  margin: 18px -20px -20px -20px;
  padding: 14px 20px 16px 20px;
  background: var(--cream-2, #faf8f5);
  border-top: 1px solid var(--border-paper);
  border-bottom-left-radius: inherit;
  border-bottom-right-radius: inherit;
}

/* Footer Hint & Left-hand Informational Metadata */
.modal-footer .footer-hint,
.modal-footer .footer-note,
.modal-footer .footer-left,
.modal-footer .footer-meta {
  margin-right: auto;
  font-size: 11.5px;
  color: var(--ink-soft);
  font-weight: 500;
  line-height: 1.35;
}

.footer-hint strong {
  color: var(--crimson);
}

.footer-btn-cluster {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Explicit Space-Between Split Layout */
.modal-footer.space-between,
.modal-footer.modal-footer-split {
  justify-content: space-between;
}

/* Ensure buttons in modal footer have comfortable touch target and typography */
.modal-footer .btn {
  padding: 8px 18px;
  font-size: 12px;
  font-weight: 600;
  border-radius: var(--radius-sm, 6px);
  white-space: nowrap;
}

.modal-footer .btn-sm {
  padding: 6px 14px;
  font-size: 11.5px;
}

.modal-footer .btn-xs {
  padding: 4px 10px;
  font-size: 11px;
}

.modal-footer .btn-outline {
  background: #ffffff;
  border: 1px solid var(--border-paper-strong, #cbd5e1);
  color: var(--ink);
}

.modal-footer .btn-outline:hover {
  background: var(--cream-2, #f8fafc);
  border-color: var(--ink);
}

.modal-footer .btn-primary {
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.12);
}

.modal-footer .btn-primary:hover {
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.18);
}

/* VIP Modal */
.vip-container { max-width: 500px; }
.vip-perks-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: 12.5px;
  margin-bottom: 18px;
}

.vip-checkout-box {
  background: var(--cream-2);
  border: var(--border-paper);
  padding: 16px;
  border-radius: var(--radius-sm);
  text-align: center;
}

.vip-price-tag {
  font-family: var(--font-mono);
  font-size: 1.8rem;
  font-weight: 700;
  margin-bottom: 4px;
}

.vip-subnote { font-size: 11px; color: var(--ink-soft); margin-bottom: 12px; }

/* ==========================================================================
   RICH TEXT POST EDITOR & TOOLBAR
   ========================================================================== */
.post-editor-group {
  position: relative;
}

.editor-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
}

.editor-mode-tabs {
  display: inline-flex;
  background: var(--cream-2);
  border: 1px solid var(--tape-border);
  border-radius: 4px;
  padding: 2px;
  gap: 2px;
}

.editor-tab {
  background: none;
  border: none;
  padding: 3px 10px;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--ink-secondary);
  border-radius: 3px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.editor-tab:hover {
  color: var(--ink);
}

.editor-tab.active {
  background: var(--ink);
  color: var(--cream);
}

.post-editor-group {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

.editor-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  padding: 6px 8px;
  background: var(--cream-2);
  border: 1px solid var(--tape-border);
  border-bottom: none;
  border-radius: 6px 6px 0 0;
  box-sizing: border-box !important;
  width: 100% !important;
  max-width: 100% !important;
}

.tool-btn {
  background: var(--cream);
  border: 1px solid var(--tape-border);
  border-radius: 4px;
  padding: 4px 8px;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--ink);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s ease;
  line-height: 1;
  user-select: none;
}

.tool-btn:hover {
  background: var(--crimson);
  color: #fff;
  border-color: var(--crimson);
}

.tool-btn:active {
  transform: translateY(1px);
}

.tool-separator {
  width: 1px;
  height: 16px;
  background: var(--tape-border);
  margin: 0 4px;
}

#postBodyInput,
#editPostContentInput,
.post-editor-group textarea {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 100% !important;
  box-sizing: border-box !important;
  resize: vertical !important; /* CRITICAL: prevents dragging horizontally outside the modal bounds */
  min-height: 160px;
  max-height: 520px;
  border-top-left-radius: 0 !important;
  border-top-right-radius: 0 !important;
  font-family: inherit;
  font-size: 13.5px;
  line-height: 1.6;
  padding: 12px 14px;
  background: var(--cream-card);
  color: var(--ink);
}

.editor-preview-pane {
  background: var(--cream-card);
  border: 1px solid var(--tape-border);
  border-radius: 0 0 6px 6px;
  padding: 14px 16px;
  min-height: 160px;
  max-height: 520px;
  overflow-y: auto;
  overflow-x: hidden;
  box-sizing: border-box !important;
  width: 100% !important;
  max-width: 100% !important;
  font-family: inherit;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--ink);
  word-break: break-word;
}

.editor-status-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 2px 2px;
  font-size: 11px;
  color: var(--ink-soft);
  box-sizing: border-box;
}

.editor-status-count {
  font-weight: 600;
  color: var(--ink-secondary);
}

.editor-status-hint {
  font-size: 10.5px;
  color: var(--ink-soft);
}

/* ==========================================================================
   SETTINGS EMAIL NOTIFICATION CARD & TOGGLE SWITCH
   ========================================================================== */
.settings-email-sub-card {
  margin-top: 14px;
  padding: 14px;
  background: var(--cream-2);
  border-radius: var(--radius-sm);
  border: var(--border-paper);
}

.ses-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.ses-title-wrap {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.ses-icon {
  font-size: 18px;
  flex-shrink: 0;
  margin-top: 1px;
}

.ses-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
}

.ses-desc {
  font-size: 11px;
  color: var(--ink-secondary);
  line-height: 1.4;
  margin-top: 2px;
}

.toggle-switch {
  position: relative;
  display: inline-block;
  width: 40px;
  height: 22px;
  flex-shrink: 0;
}

.toggle-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.toggle-slider {
  position: absolute;
  cursor: pointer;
  top: 0; left: 0; right: 0; bottom: 0;
  background-color: #c9c7be;
  transition: 0.25s;
  border-radius: 22px;
}

.toggle-slider:before {
  position: absolute;
  content: "";
  height: 16px;
  width: 16px;
  left: 3px;
  bottom: 3px;
  background-color: white;
  transition: 0.25s;
  border-radius: 50%;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
}

.toggle-switch input:checked + .toggle-slider {
  background-color: var(--gain-green, #2ca02c);
}

.toggle-switch input:checked + .toggle-slider:before {
  transform: translateX(18px);
}

/* ==========================================================================
   TOAST NOTIFICATION HUB
   ========================================================================== */
.toast-hub {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 2000;
  display: flex;
  flex-direction: column;
  gap: 10px;
  pointer-events: none;
}

.toast {
  pointer-events: auto;
  position: relative;
  background: var(--ink);
  color: var(--cream);
  padding: 10px 14px;
  border-radius: 6px;
  font-size: 12.5px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.28);
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 260px;
  max-width: 420px;
  transition: opacity 0.25s ease, transform 0.25s ease;
  border-left: 4px solid var(--crimson);
}

.toast.success {
  border-left-color: var(--gain-green);
}

.toast.info {
  border-left-color: #2b70c9;
}

.toast.error {
  border-left-color: #d32f2f;
}

.toast-icon {
  font-size: 15px;
  flex-shrink: 0;
}

.toast-msg {
  flex: 1;
  line-height: 1.45;
  word-break: break-word;
}

.toast-close {
  background: none;
  border: none;
  color: var(--cream);
  opacity: 0.65;
  font-size: 17px;
  cursor: pointer;
  padding: 0 4px;
  line-height: 1;
  transition: opacity 0.15s;
  flex-shrink: 0;
}

.toast-close:hover {
  opacity: 1;
  color: #fff;
}

/* Footer */
.app-footer {
  border-top: 1px solid var(--tape-border);
  background: var(--cream-2);
  margin-top: auto;
  padding: 34px 24px 22px;
}

.footer-inner {
  max-width: 1140px;
  margin: 0 auto;
}

.footer-top-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 56px;
  margin-bottom: 22px;
}

.footer-col-main {
  max-width: 480px;
}

.footer-wordmark {
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: -0.04em;
  margin-bottom: 8px;
}

.footer-desc { 
  font-size: 12px; 
  color: var(--ink-secondary); 
  margin-bottom: 8px; 
  max-width: 440px; 
  line-height: 1.5; 
}

.footer-disclaimer { 
  font-size: 10.5px; 
  color: var(--ink-soft); 
  display: block; 
  max-width: 440px; 
  line-height: 1.45; 
}

.footer-nav-groups {
  display: flex;
  gap: 56px;
  flex-shrink: 0;
}

.f-group h5 {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ink);
  margin-bottom: 10px;
  font-weight: 700;
}

.f-group a {
  display: block;
  font-size: 12px;
  color: var(--ink-secondary);
  margin-bottom: 7px;
  text-decoration: none;
  transition: color 0.15s ease;
  white-space: nowrap;
}

.f-group a:hover { color: var(--crimson); }

/* Sponsor & Contact Section - Realigned Horizontal Strip */
.footer-contact-section {
  padding-top: 18px;
  margin-bottom: 22px;
  border-top: 1px solid var(--border-paper);
}

.f-contact-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.f-contact-head h5 {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ink);
  font-weight: 700;
  margin: 0;
}

.f-contact-subline {
  font-size: 11px;
  color: var(--ink-soft);
}

.footer-bottom-bar {
  max-width: 1140px;
  margin: 0 auto;
  border-top: 1px solid var(--border-paper);
  padding-top: 18px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 12px;
  color: var(--ink-soft);
  flex-wrap: wrap;
  gap: 12px;
  text-align: center;
}

.footer-bottom-actions {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.footer-donate-btn {
  background: var(--cream-2);
  border: 1px solid var(--border-paper-strong);
  color: var(--crimson);
  font-size: 12px;
  font-weight: 600;
  padding: 6px 14px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all 0.18s ease;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  box-shadow: var(--shadow-paper);
}

.footer-donate-btn:hover {
  background: var(--crimson);
  color: #fff;
  border-color: var(--crimson);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(225, 29, 72, 0.25);
}

.footer-official-pill,
.footer-creator-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: var(--cream-2);
  border: var(--border-paper);
  padding: 5px 12px;
  border-radius: var(--radius-sm);
  font-size: 12px;
  color: var(--ink-secondary);
  font-weight: 500;
  text-decoration: none;
  transition: all 0.16s ease;
}

.footer-official-pill .fc-link,
.footer-creator-pill .fc-link {
  color: var(--crimson);
  font-weight: 700;
  text-decoration: none;
  transition: opacity 0.16s ease;
}

.footer-official-pill:hover,
.footer-creator-pill .fc-link:hover {
  border-color: var(--crimson);
  text-decoration: none;
}

.footer-official-pill:hover .fc-link {
  text-decoration: underline;
  opacity: 0.85;
}

/* ==========================================================================
   OFFICIAL EXCHANGE BANNER & REDIRECT
   ========================================================================== */
.official-exchange-banner {
  background: linear-gradient(135deg, rgba(139, 32, 32, 0.05) 0%, rgba(200, 155, 60, 0.08) 100%);
  border: 1.5px solid var(--crimson);
  border-radius: var(--radius-md);
  padding: 18px 22px;
  margin-bottom: 22px;
}

.official-exchange-banner .tab-header-row {
  margin-bottom: 0;
}

/* ==========================================================================
   VIP HERO BANNER & STATUS STRIP
   ========================================================================== */
.vip-hero-banner {
  background: linear-gradient(180deg, rgba(200, 155, 60, 0.12) 0%, var(--cream-card) 100%);
  border: 1.5px solid var(--gold-seal);
  margin-bottom: 20px;
}

.vip-status-strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 14px;
  padding: 10px 14px;
  background: var(--cream-card-elevated);
  border: var(--border-paper);
  border-radius: var(--radius-sm);
  flex-wrap: wrap;
  gap: 10px;
}

.vip-badge-pill {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  color: var(--gold-seal);
  background: rgba(200, 155, 60, 0.15);
  border: 1px solid var(--gold-seal);
  padding: 3px 8px;
  border-radius: 4px;
}

/* ==========================================================================
   VIP SUBSCRIPTION PLANS GRID
   ========================================================================== */
.vip-plans-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  align-items: stretch;
}

.vip-plan-card {
  background: var(--cream-card-elevated);
  border: var(--border-paper);
  border-radius: var(--radius-md);
  padding: 18px 16px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: transform var(--transition), box-shadow var(--transition);
}

.vip-plan-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
}

.vip-plan-card.featured-plan {
  border-color: var(--gold-seal);
  background: linear-gradient(180deg, rgba(200, 155, 60, 0.08) 0%, var(--cream-card-elevated) 100%);
  position: relative;
}

.vp-tag {
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: var(--ink-soft);
  text-transform: uppercase;
  margin-bottom: 6px;
}

.vp-tag.highlight {
  color: var(--gold-seal);
}

.vp-title {
  font-size: 1.1rem;
  font-weight: 700;
  margin-bottom: 6px;
}

.vp-price {
  font-family: var(--font-mono);
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 6px;
}

.vp-price small {
  font-size: 11px;
  font-weight: 500;
  color: var(--ink-secondary);
}

.vp-desc {
  font-size: 11.5px;
  color: var(--ink-secondary);
  margin-bottom: 14px;
  line-height: 1.4;
}

.vp-features {
  list-style: none;
  padding: 0;
  margin: 0 0 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
}

.vp-features li {
  font-size: 11.5px;
  color: var(--ink);
  line-height: 1.35;
}

/* ==========================================================================
   OFFICIAL PORTFOLIO INSPECTOR (?view=address)
   ========================================================================== */
.inspector-input-row {
  display: flex;
  gap: 10px;
  align-items: center;
}

.inspector-input-row .form-input {
  flex: 1;
  font-family: var(--font-mono);
  font-size: 12.5px;
  padding: 9px 12px;
  border-radius: var(--radius-sm);
  border: var(--border-paper);
  background: var(--cream-2);
}

.quick-whales-pills {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.whale-pill-btn {
  background: var(--cream-card-elevated);
  border: var(--border-paper);
  border-radius: 4px;
  padding: 4px 10px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink);
  cursor: pointer;
  transition: all var(--transition);
}

.whale-pill-btn:hover {
  border-color: var(--crimson);
  color: var(--crimson);
  background: var(--cream);
}

/* ==========================================================================
   LIVE COPY SIGNALS & PORTFOLIO
   ========================================================================== */
.copy-engine-badge {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--cream-card-elevated);
  border: var(--border-paper);
  padding: 5px 10px;
  border-radius: var(--radius-sm);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
}

.copy-signals-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

@media (max-width: 880px) {
  .copy-signals-grid {
    grid-template-columns: 1fr;
  }
}

.copy-signal-card {
  background: var(--cream-card-elevated);
  border: var(--border-paper);
  border-radius: var(--radius-md);
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 12px;
  transition: all var(--transition);
  box-shadow: var(--shadow-paper);
}

.copy-signal-card:hover {
  transform: translateY(-2px);
  border-color: var(--border-paper-strong);
  box-shadow: var(--shadow-hover);
}

.csc-header-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.csc-trader-info {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 13.5px;
  font-weight: 700;
  cursor: pointer;
  color: var(--ink);
}

.csc-whale-tag {
  font-size: 9.5px;
  font-weight: 800;
  background: rgba(245, 158, 11, 0.14);
  color: #f59e0b;
  border: 1px solid rgba(245, 158, 11, 0.3);
  padding: 1px 6px;
  border-radius: 4px;
  letter-spacing: 0.04em;
}

.csc-asset-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
  flex-wrap: wrap;
  gap: 8px;
}

.csc-asset-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--cream-2);
  border: var(--border-paper);
  padding: 4px 10px;
  border-radius: var(--radius-sm);
  font-family: var(--font-mono);
}

.cab-symbol {
  font-size: 13px;
  font-weight: 800;
  color: var(--ink);
}

.cab-tag {
  font-size: 9.5px;
  font-weight: 700;
  color: var(--ink-soft);
  background: rgba(0, 0, 0, 0.05);
  padding: 1px 4px;
  border-radius: 3px;
}

.live-mark-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--cream-2);
  border: var(--border-paper);
  border-radius: var(--radius-sm);
  padding: 4px 10px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 700;
}

.lmp-roi {
  font-weight: 800;
  padding-left: 6px;
  border-left: 1px solid var(--border-paper);
}

.csc-description {
  font-size: 12.5px;
  color: var(--ink-secondary);
  line-height: 1.5;
  margin-bottom: 14px;
}

.csc-stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  background: var(--cream-2);
  border: var(--border-paper);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  margin-bottom: 8px;
}

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

.csc-stat-cell {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.css-label {
  font-size: 9.5px;
  font-weight: 700;
  color: var(--ink-soft);
  letter-spacing: 0.03em;
  font-family: var(--font-mono);
}

.css-value {
  font-family: var(--font-mono);
  font-size: 12.5px;
  font-weight: 700;
  color: var(--ink);
}

.csc-footer-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: var(--border-paper);
  padding-top: 12px;
  gap: 8px;
  flex-wrap: wrap;
}

.csc-time {
  font-size: 11px;
  color: var(--ink-soft);
  font-family: var(--font-mono);
}

.csc-actions-group {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

/* Modern Developer Terminal Box */
.code-editor-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #0f172a;
  border: 1px solid #1e293b;
  border-bottom: none;
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  padding: 8px 14px;
}

.code-editor-dots {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.code-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  display: inline-block;
}

.dot-red { background: #ef4444; }
.dot-yellow { background: #f59e0b; }
.dot-green { background: #10b981; }

.code-filename {
  font-family: var(--font-mono);
  font-size: 11px;
  color: #94a3b8;
  margin-left: 8px;
}

.code-snippet-box {
  display: block !important;
  background: #090d16;
  color: #e2e8f0;
  border: 1px solid #1e293b;
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  padding: 16px;
  position: relative;
  overflow-x: auto;
  margin-bottom: 12px;
}

.code-snippet-box pre {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.6;
  color: #cbd5e1;
}

.code-snippet-box code {
  font-family: var(--font-mono);
}

.copy-code-btn {
  background: rgba(255, 255, 255, 0.08);
  color: #f8fafc;
  border: 1px solid rgba(255, 255, 255, 0.2);
  font-size: 11px;
}

.copy-code-btn:hover {
  background: rgba(255, 255, 255, 0.16);
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.35);
}

/* Real-Time Live Data Pulsing & Flash Animations */
.live-dot.pulse {
  animation: pulse-ring 1.8s cubic-bezier(0.215, 0.61, 0.355, 1) infinite;
}

@keyframes pulse-ring {
  0% { transform: scale(0.9); opacity: 0.8; }
  50% { transform: scale(1.3); opacity: 1; box-shadow: 0 0 8px rgba(34, 197, 94, 0.8); }
  100% { transform: scale(0.9); opacity: 0.8; }
}

.price-flash-up {
  transition: color 0.4s ease;
}

.price-flash-down {
  transition: color 0.4s ease;
}

.live-mark-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: var(--cream-2);
  border: var(--border-paper);
  border-radius: 4px;
  padding: 2px 7px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 700;
  margin-top: 4px;
}

/* ==========================================================================
   ACTIVE PERKS CARDS & BADGES
   ========================================================================== */
.active-perks-card {
  background: var(--cream-card-elevated);
  border: var(--border-paper);
  border-radius: var(--radius-md);
  padding: 14px 18px;
  margin-bottom: 20px;
}

.active-perks-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 8px;
}

.active-perk-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--cream);
  border: 1px solid var(--gain-green);
  border-radius: 4px;
  padding: 5px 10px;
  font-size: 11.5px;
  font-weight: 600;
}

.active-perk-pill small {
  color: var(--ink-secondary);
  font-size: 10px;
}

/* ==========================================================================
   CHECKOUT & COPY MODAL SPECIFIC STYLES
   ========================================================================== */
.checkout-plan-card {
  background: var(--cream-2);
  border: var(--border-paper);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  margin-bottom: 16px;
}

.pay-methods-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 14px;
}

.pay-tab-btn {
  flex: 1;
  background: var(--cream-card);
  border: var(--border-paper);
  border-radius: var(--radius-sm);
  padding: 8px 12px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}

.pay-tab-btn.active {
  background: var(--ink);
  color: var(--cream);
  border-color: var(--ink);
}

.payment-info-box {
  background: var(--cream-card-elevated);
  border: var(--border-paper);
  border-radius: var(--radius-sm);
  padding: 12px;
  margin-bottom: 16px;
  font-size: 12px;
}

.copy-preview-box {
  background: var(--cream-2);
  border: var(--border-paper);
  border-radius: var(--radius-sm);
  padding: 12px;
  margin-bottom: 16px;
}

.margin-presets-row {
  display: flex;
  gap: 6px;
  margin-top: 6px;
}

.preset-btn {
  background: var(--cream-card);
  border: var(--border-paper);
  border-radius: 4px;
  padding: 4px 8px;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
}

.preset-btn.active, .preset-btn:hover {
  background: var(--ink);
  color: var(--cream);
  border-color: var(--ink);
}

.copy-summary-box {
  background: var(--cream-card-elevated);
  border: var(--border-paper);
  border-radius: var(--radius-sm);
  padding: 12px;
  margin-bottom: 16px;
}

/* ==========================================================================
   RESPONSIVE DESIGN SYSTEM (ALL DEVICE COMPATIBILITY)
   Zero Zoom Needed — Fluid, Flexible & Touch Friendly
   ========================================================================== */
@media (max-width: 1240px) {
  .main-layout.tab-mode-feed { grid-template-columns: 260px 1fr; }
  .main-layout.tab-mode-feed .col-right { display: none !important; }
}

@media (max-width: 900px) {
  .main-layout.tab-mode-feed {
    grid-template-columns: 1fr;
    padding: 0 16px;
    margin: 14px auto;
    gap: 16px;
  }
  .main-layout.tab-mode-feed .col-left { position: static; }
  .main-layout.tab-mode-feed .col-right { display: none !important; }
  
  .navbar {
    top: 32px;
  }
  .nav-container {
    padding: 8px 14px;
    gap: 8px;
  }
  .brand-logo {
    min-width: 140px;
  }
  .nav-actions {
    gap: 6px;
  }

  .podium-grid { grid-template-columns: 1fr; }
  .podium-card.rank-gold { order: -1; transform: none; }
  .rewards-two-col, .revenue-cards-grid { grid-template-columns: 1fr; }
  .footer-inner { grid-template-columns: 1fr; }
}

@media (max-width: 600px) {
  .main-layout {
    padding: 0 10px;
    margin: 10px auto;
    gap: 12px;
  }
  .paper-card {
    padding: 14px 12px;
  }
  .setup-stats-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px 10px;
  }
  .profile-form-grid { grid-template-columns: 1fr; }
  .sponsor-direct-channels { grid-template-columns: 1fr; }
  .share-social-row { flex-direction: column; }
  .modal-backdrop { padding: 8px; }
  .modal-container {
    max-width: 100%;
    max-height: 94vh;
  }
  .modal-header { padding: 12px 14px; }
  .modal-body { padding: 14px 12px; }
  .modal-footer {
    padding: 12px 14px 14px 14px;
    gap: 8px;
  }
  .modal-body > .modal-footer,
  form.modal-body > .modal-footer,
  .modal-body form > .modal-footer {
    margin: 14px -12px -14px -12px;
    padding: 12px 14px 14px 14px;
  }
  .form-row.two-col, .form-row.three-col {
    grid-template-columns: 1fr;
  }
  .points-stats-grid {
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }
  .quest-items-list .quest-row {
    grid-template-columns: 1fr auto;
    grid-template-rows: auto auto;
    row-gap: 10px;
  }
  .quest-items-list .quest-item-left {
    grid-column: 1 / -1;
  }
  .quest-items-list .q-reward-slot {
    justify-content: flex-start;
  }
  .market-items-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 440px) {
  .wordmark-text { font-size: 1.25rem; }
  .brand-tag { display: none; }
  .nav-action-pill {
    padding: 4px 8px;
    font-size: 11px;
    height: 32px;
  }
  .nav-action-pill.btn-wallet {
    max-width: 130px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .post-headline { font-size: 13.5px; }
  .post-body-text { font-size: 12px; }
  .post-bottom-actions {
    gap: 6px;
    flex-wrap: wrap;
  }
  .action-btn { padding: 5px 8px; font-size: 11px; }
  .upvote-pill { padding: 5px 8px; }
  .post-stat-num { font-size: 1.15rem; }
}

/* Post Stats Analytics Grid */
.post-stats-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin-bottom: 14px;
}

.post-stat-card {
  background: var(--cream-2);
  border: var(--border-paper);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
}

.post-stat-num {
  font-family: var(--font-mono);
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.2;
}

.post-stat-label {
  font-size: 10.5px;
  color: var(--ink-secondary);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-top: 4px;
}

/* ==========================================================================
   SHARE MODAL & SOCIAL INTEGRATION
   ========================================================================== */
.share-modal-container {
  max-width: 480px;
}

.share-preview-box {
  background: var(--cream-2);
  border: var(--border-paper);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  margin-bottom: 12px;
}

.share-preview-tag {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  color: var(--gain-green);
  margin-bottom: 4px;
}

.share-preview-title {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.4;
  margin-bottom: 4px;
}

.share-preview-meta {
  font-size: 11px;
  color: var(--ink-soft);
}

.share-copy-input-row {
  display: flex;
  gap: 8px;
}

.share-copy-input-row input {
  flex: 1;
  background: var(--cream-card-elevated);
  border: var(--border-paper);
  border-radius: var(--radius-sm);
  padding: 8px 10px;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--ink);
}

.share-social-row {
  display: flex;
  gap: 10px;
  margin-top: 16px;
}

.social-share-btn {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
  transition: var(--transition);
  text-decoration: none;
}

.share-x-btn {
  background: var(--ink);
  color: var(--cream);
  border: 1px solid var(--ink);
}

.share-x-btn:hover {
  opacity: 0.9;
  transform: translateY(-1px);
}

.share-tg-btn {
  background: #229ED9;
  color: #fff;
  border: 1px solid #229ED9;
}

.share-tg-btn:hover {
  background: #1b85b8;
  transform: translateY(-1px);
}

/* ==========================================================================
   TRADER PROFILE & IDENTITY DASHBOARD
   ========================================================================== */
.profile-dashboard-card {
  background: var(--cream-card-elevated);
  border: var(--border-paper);
  border-radius: var(--radius-md);
  padding: 20px;
  margin-bottom: 22px;
  box-shadow: var(--shadow-paper);
}

.profile-pts-perk-badge {
  background: var(--crimson-soft);
  border: 1px solid var(--crimson-border);
  color: var(--crimson);
  font-size: 11px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 4px;
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
}

.profile-dashboard-form {
  margin-top: 8px;
}

.profile-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px 16px;
}

.profile-form-grid .full-width {
  grid-column: 1 / -1;
}

.input-with-prefix {
  display: flex;
  align-items: center;
  background: var(--cream-2);
  border: var(--border-paper);
  border-radius: var(--radius-sm);
  overflow: hidden;
  transition: var(--transition);
}

.input-with-prefix:focus-within {
  border-color: var(--crimson);
  box-shadow: 0 0 0 2px var(--crimson-soft);
}

.input-prefix {
  padding: 8px 10px;
  font-weight: 700;
  color: var(--ink-soft);
  background: rgba(0, 0, 0, 0.04);
  border-right: var(--border-paper);
}

.input-with-prefix input {
  border: none !important;
  background: transparent !important;
  width: 100%;
  padding: 8px 10px;
  font-size: 13px;
  color: var(--ink);
  outline: none;
}

.avatar-selector-row {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 2px;
}

.avatar-opt-btn {
  background: var(--cream-2);
  border: var(--border-paper);
  border-radius: var(--radius-sm);
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  cursor: pointer;
  transition: var(--transition);
}

.avatar-opt-btn:hover {
  border-color: var(--crimson);
  transform: scale(1.06);
}

.avatar-opt-btn.active {
  background: var(--ink);
  color: var(--cream);
  border-color: var(--ink);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}

.profile-form-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: var(--border-paper);
  padding-top: 14px;
  margin-top: 16px;
  flex-wrap: wrap;
  gap: 10px;
}

.profile-current-preview {
  font-size: 12px;
  color: var(--ink-secondary);
}

.profile-current-preview strong {
  color: var(--crimson);
}

/* ==========================================================================
   SPONSORSHIPS, PRODUCT ADS & PAID TOURNAMENT
   ========================================================================== */
.free-badge {
  background: var(--gain-soft);
  color: var(--gain-green);
  border: 1px solid var(--gain-border);
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 4px;
  font-size: 11px;
  letter-spacing: 0.04em;
}

.coming-soon-tag {
  display: inline-block;
  background: var(--crimson-soft);
  color: var(--crimson);
  border: 1px solid var(--crimson-border);
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: 4px;
  margin-bottom: 4px;
  letter-spacing: 0.05em;
}

.sponsor-ad-sidebar-card {
  background: var(--cream-card-elevated);
}

.ad-placeholder-box {
  background: var(--cream-2);
  border: 1px dashed var(--tape-border);
  border-radius: var(--radius-sm);
  padding: 14px 12px;
  text-align: center;
  margin-top: 6px;
  transition: var(--transition);
}

.ad-placeholder-box:hover {
  border-color: var(--crimson);
}

.ad-icon {
  font-size: 20px;
  display: block;
  margin-bottom: 4px;
}

.sponsor-modal-container {
  max-width: 600px;
}

.sponsor-direct-channels {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 6px;
}

.sdc-card {
  background: var(--cream-2);
  border: var(--border-paper);
  border-radius: var(--radius-sm);
  padding: 11px 12px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 8px;
  transition: all 0.18s ease;
}

.sdc-card:hover {
  border-color: var(--crimson);
  transform: translateY(-1px);
}

.sdc-card-top {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

.sdc-card .sdc-icon {
  font-size: 18px;
  line-height: 1;
}

.sdc-info strong {
  display: block;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--ink);
}

.sdc-info span {
  display: block;
  font-size: 11px;
  color: var(--ink-soft);
  margin-top: 2px;
  line-height: 1.3;
}

.sdc-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 2px;
}

.contact-pill-card {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--paper);
  border: var(--border-paper);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  text-decoration: none;
  transition: all 0.18s ease;
}

.contact-pill-card:hover {
  border-color: var(--crimson);
  transform: translateY(-1px);
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.06);
}

.contact-pill-card .icon {
  font-size: 20px;
  flex-shrink: 0;
}

@media (max-width: 600px) {
  .profile-form-grid { grid-template-columns: 1fr; }
  .sponsor-direct-channels { grid-template-columns: 1fr; }
  .share-social-row { flex-direction: column; }
}

/* ==========================================================================
   DONATION & SUPPORT PLATFORM MODAL
   ========================================================================== */
.donation-modal-container {
  max-width: 540px;
}

.donation-hero-box {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.donation-address-container {
  background: var(--cream-2);
  border: var(--border-paper);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
}

.donation-addr-label-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
  flex-wrap: wrap;
  gap: 6px;
}

.donation-network-tag {
  font-size: 10.5px;
  font-weight: 700;
  color: var(--crimson);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.donation-addr-input-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.donation-addr-input {
  flex: 1;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  background: var(--paper);
  color: var(--ink);
  border: var(--border-paper);
  border-radius: var(--radius-sm);
  padding: 8px 10px;
  user-select: all;
  outline: none;
}

.donation-addr-input:focus {
  border-color: var(--crimson);
}

.donation-networks-cluster {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.net-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 600;
  background: var(--cream-2);
  border: var(--border-paper);
  border-radius: 12px;
  padding: 3px 9px;
  color: var(--ink-secondary);
}

.net-pill .dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  display: inline-block;
}

.net-pill .dot.green { background: #10b981; }
.net-pill .dot.blue { background: #3b82f6; }
.net-pill .dot.purple { background: #8b5cf6; }
.net-pill .dot.cyan { background: #06b6d4; }
.net-pill .dot.orange { background: #f59e0b; }
.net-pill .dot.violet { background: #ec4899; }

.donation-tokens-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  font-size: 11px;
  color: var(--ink-secondary);
  background: var(--cream-1);
  border: 1px dashed var(--rule-light);
  border-radius: var(--radius-sm);
  padding: 8px 12px;
}

.token-tag {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 10.5px;
  color: var(--ink);
  background: var(--cream-3);
  padding: 1px 6px;
  border-radius: 4px;
}

.donation-qr-box {
  display: flex;
  align-items: center;
  gap: 16px;
  background: var(--cream-2);
  border: var(--border-paper);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
}

.donation-qr-img {
  border: var(--border-paper);
  border-radius: var(--radius-sm);
  background: #fff;
  padding: 4px;
  flex-shrink: 0;
}

.donation-qr-desc strong {
  display: block;
  font-size: 12.5px;
  color: var(--ink);
  margin-bottom: 2px;
}

.donation-qr-desc span {
  display: block;
  font-size: 11px;
  color: var(--ink-soft);
  line-height: 1.4;
}

.btn-copied {
  background: #10b981 !important;
  color: #fff !important;
  border-color: #10b981 !important;
}

@media (max-width: 540px) {
  .donation-qr-box {
    flex-direction: column;
    text-align: center;
  }
}

/* ==========================================================================
   POST TOP META & VIEWS BADGE (TOP POSITIONING)
   ========================================================================== */
.post-top-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
  flex-wrap: nowrap;
  gap: 8px;
  width: 100%;
}

.post-top-meta-left {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  flex: 1 1 auto;
  min-width: 0;
}

.post-views-top-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: var(--cream-2);
  border: var(--border-paper);
  border-radius: 4px;
  padding: 3px 8px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  color: var(--ink-secondary);
  transition: var(--transition);
  margin-left: auto;
}

.post-views-top-badge:hover {
  border-color: var(--crimson);
  color: var(--crimson);
}



/* ==========================================================================
   USER SWITCHER & CROSS-BROWSER LOGIN
   ========================================================================== */
.quick-user-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 6px;
}

.user-chip-btn {
  background: var(--cream-2);
  border: var(--border-paper);
  border-radius: 4px;
  padding: 4px 8px;
  font-size: 11.5px;
  font-weight: 600;
  cursor: pointer;
  transition: var(--transition);
}

.user-chip-btn:hover {
  border-color: var(--crimson);
  background: var(--crimson-soft);
  color: var(--crimson);
}

/* ==========================================================================
   GAMIFIED DAILY QUESTS & REPUTATION ENGINE
   ========================================================================== */
.quest-tracker-card {
  background: var(--cream-card-elevated);
  border: var(--border-paper);
  border-radius: var(--radius-md);
  padding: 18px 20px;
  margin-bottom: 22px;
}

.quest-header-flex {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
  flex-wrap: wrap;
  gap: 8px;
}

.quest-progress-meter {
  width: 100%;
  height: 8px;
  background: var(--cream-2);
  border-radius: 4px;
  overflow: hidden;
  margin: 8px 0 14px;
}

.quest-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--gold-seal), var(--gain-green));
  transition: width 0.4s ease;
}

.daily-reset-pill {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-soft);
  background: var(--cream-2);
  padding: 3px 8px;
  border-radius: 4px;
}

.quest-checkbox-icon {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: bold;
  border: 1px solid var(--border-paper-strong);
  margin-right: 8px;
}

.quest-checkbox-icon.completed {
  background: var(--gain-green);
  color: #fff;
  border-color: var(--gain-green);
}

/* ==========================================================================
   SETTINGS MODAL & WALLET CONNECT MODAL
   ========================================================================== */
.settings-modal-container {
  max-width: 860px !important;
  width: 96% !important;
  border-radius: var(--radius-md) !important;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.35) !important;
  overflow-y: auto !important;
  max-height: 92vh !important;
}

.settings-modal-header {
  padding: 15px 20px 13px 20px !important;
  border-bottom: var(--border-paper) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
}

.settings-modal-body {
  padding: 15px 20px 18px 20px !important;
}

/* Executive Trader Identity Banner */
.settings-identity-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 14px;
  background: var(--cream-2);
  border: 1px solid var(--border-paper);
  border-radius: var(--radius-sm);
  margin-bottom: 10px;
}

.sib-avatar-wrap {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: transparent;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.sib-avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

.sib-details {
  flex: 1;
  min-width: 0;
}

.sib-top-line {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.sib-handle {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--ink);
  margin: 0;
}

.sib-tier-tag {
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 3px;
  background: var(--gain-soft);
  color: var(--gain-green);
  border: 1px solid var(--gain-border);
}

.sib-tier-tag.unverified {
  background: var(--crimson-soft);
  color: var(--crimson);
  border-color: var(--crimson-border);
}

.sib-chain-pill {
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 600;
  padding: 1px 6px;
  border-radius: 3px;
  background: var(--cream-card);
  color: var(--ink-secondary);
  border: var(--border-paper);
}

.sib-address-line {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 3px;
}

.sib-addr-code {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  color: var(--ink);
  background: var(--cream-card);
  padding: 1px 6px;
  border-radius: 3px;
  border: var(--border-paper);
  letter-spacing: 0.02em;
}

.sib-copy-btn {
  background: transparent;
  border: 1px solid var(--border-paper);
  border-radius: 3px;
  font-size: 10px;
  font-family: var(--font-mono);
  font-weight: 600;
  padding: 1px 6px;
  color: var(--ink-secondary);
  cursor: pointer;
  transition: var(--transition);
  display: inline-flex;
  align-items: center;
  gap: 3px;
}

.sib-copy-btn:hover {
  border-color: var(--crimson);
  color: var(--crimson);
  background: var(--cream-card);
}

.btn-disconnect-subtle {
  background: transparent;
  border: 1px solid rgba(139, 32, 32, 0.25);
  color: var(--crimson);
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 4px;
  cursor: pointer;
  transition: var(--transition);
}

.btn-disconnect-subtle:hover {
  background: var(--crimson-soft);
  border-color: var(--crimson);
}

/* Standing Metrics Full-Width Strip */
.settings-stats-strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--cream-card);
  border: 1px solid var(--border-paper);
  border-radius: var(--radius-sm);
  padding: 8px 16px;
  margin-bottom: 12px;
}

.sss-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1px;
}

.sss-lbl {
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--ink-soft);
  letter-spacing: 0.04em;
  line-height: 1;
}

.sss-val {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.2;
}

.sss-divider {
  width: 1px;
  height: 22px;
  background: var(--border-paper);
}

/* Settings Form Controls */
.settings-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 11px;
}

.settings-form-group {
  margin-bottom: 11px;
}

.form-label-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 4px;
}

.form-label-row label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ink-secondary);
  margin: 0;
}

.char-count-badge {
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--ink-soft);
  font-weight: 600;
}

.avatar-choice-name {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--crimson);
  font-weight: 700;
}

/* ==========================================================================
   GAMIFIED ORIGAMI AVATAR SYSTEM & RANK TIERS
   ========================================================================== */

.origami-avatar-emblem {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  border-radius: 50%;
  flex-shrink: 0;
  vertical-align: middle;
  background: var(--cream-card);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.2s ease;
  user-select: none;
}
.origami-avatar-emblem:hover {
  transform: scale(1.06);
}
.origami-avatar-img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  display: block;
}

/* Rank Glow & Prestige Rings */
.avatar-1-ring {
  box-shadow: 0 0 0 1.5px #94a3b8, 0 2px 6px rgba(148, 163, 184, 0.35);
}
.avatar-2-ring {
  box-shadow: 0 0 0 2px #f59e0b, 0 3px 10px rgba(245, 158, 11, 0.45);
}
.avatar-3-ring {
  box-shadow: 0 0 0 2px #06b6d4, 0 0 0 3.5px #8b5cf6, 0 3px 14px rgba(6, 182, 212, 0.55);
}
.avatar-4-ring {
  box-shadow: 0 0 0 2px #fef08a, 0 0 0 3.5px #eab308, 0 4px 18px rgba(234, 179, 8, 0.7), 0 0 12px rgba(168, 85, 247, 0.45);
  animation: pulseApexAura 3s infinite alternate ease-in-out;
}
@keyframes pulseApexAura {
  0% { box-shadow: 0 0 0 2px #fef08a, 0 0 0 3.5px #eab308, 0 4px 16px rgba(234, 179, 8, 0.65); }
  100% { box-shadow: 0 0 0 2.5px #fff, 0 0 0 4px #f59e0b, 0 5px 22px rgba(245, 158, 11, 0.85), 0 0 14px rgba(217, 70, 239, 0.5); }
}

/* Post author chip with avatar */
.post-author-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  cursor: pointer;
  padding: 2px 6px 2px 2px;
  border-radius: 16px;
  transition: background 0.15s ease, transform 0.15s ease;
}
.post-author-chip:hover {
  background: var(--cream-2);
  transform: translateY(-1px);
}
.post-author-chip:hover .post-author-name {
  color: var(--crimson);
  text-decoration: underline;
}

/* Settings Avatar Gamified Grid */
.avatar-gamified-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin-top: 10px;
}
@media (max-width: 600px) {
  .avatar-gamified-grid {
    grid-template-columns: 1fr;
  }
}

.avatar-gamified-card {
  position: relative;
  background: var(--paper);
  border: 1.5px solid var(--border-paper);
  border-radius: var(--radius-md);
  padding: 14px 12px 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
}

.avatar-gamified-card.is-unlocked {
  cursor: pointer;
}
.avatar-gamified-card.is-unlocked:hover {
  border-color: var(--crimson);
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(139, 32, 32, 0.12);
}

.avatar-gamified-card.is-selected {
  border-color: var(--crimson);
  background: var(--cream-card);
  box-shadow: 0 0 0 2px var(--crimson), 0 8px 24px rgba(139, 32, 32, 0.18);
  transform: translateY(-2px);
}

.avatar-gamified-card.is-locked {
  opacity: 0.9;
  background: var(--cream-2);
}

/* Card Header */
.agc-header {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
  font-size: 11px;
}
.agc-rank-pill {
  font-family: var(--font-mono);
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--ink-soft);
  font-size: 10.5px;
}
.agc-active-badge {
  background: var(--green);
  color: #ffffff;
  font-size: 10px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 10px;
  letter-spacing: 0.5px;
}
.agc-unlocked-badge {
  background: rgba(46, 125, 50, 0.12);
  color: var(--green);
  font-size: 10px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 10px;
}
.agc-locked-badge {
  background: var(--border-paper);
  color: var(--ink-soft);
  font-size: 10px;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: 10px;
}

/* Preview Emblem */
.agc-preview-wrap {
  margin: 4px 0 10px;
}
.agc-emblem-ring {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 3px;
  background: var(--cream-card);
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
.avatar-gamified-card:hover .agc-emblem-ring {
  transform: scale(1.08);
}
.agc-emblem-ring.avatar-1-glow {
  border: 2px solid #94a3b8;
  box-shadow: 0 0 0 2px #cbd5e1, 0 4px 14px rgba(148, 163, 184, 0.35);
  background: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%);
}
.agc-emblem-ring.avatar-2-glow {
  border: 2.5px solid #f59e0b;
  box-shadow: 0 0 0 2px #b45309, 0 4px 18px rgba(245, 158, 11, 0.5), inset 0 0 6px rgba(254, 240, 138, 0.4);
  background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
}
.agc-emblem-ring.avatar-3-glow {
  border: 3px solid #06b6d4;
  box-shadow: 0 0 0 2px #8b5cf6, 0 6px 22px rgba(6, 182, 212, 0.6), 0 0 14px rgba(139, 92, 246, 0.4);
  background: linear-gradient(135deg, #cffafe 0%, #ede9fe 100%);
  animation: titanPulse 3.5s infinite alternate ease-in-out;
}
.agc-emblem-ring.avatar-4-glow {
  border: 3.5px solid #fef08a;
  box-shadow: 0 0 0 2.5px #eab308, 0 8px 26px rgba(234, 179, 8, 0.75), 0 0 20px rgba(168, 85, 247, 0.5), inset 0 0 8px #fff;
  background: linear-gradient(135deg, #fef9c3 0%, #fae8ff 100%);
  animation: royalApexGleam 4s infinite ease-in-out;
}
.agc-emblem-img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  display: block;
}

/* Card Info */
.agc-info {
  margin-bottom: 8px;
}
.agc-name {
  font-family: var(--font-display);
  font-size: 14.5px;
  font-weight: 700;
  color: var(--ink);
  margin: 0 0 2px;
  letter-spacing: -0.2px;
}
.agc-sub {
  font-size: 11px;
  color: var(--ink-soft);
  display: block;
}

/* Requirements Box */
.agc-req-box {
  margin-bottom: 12px;
}
.agc-req-badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 12px;
  background: var(--cream-2);
  border: 1px solid var(--border-paper);
  color: var(--ink-secondary);
}
.tier-avatar-2 .agc-req-badge {
  background: rgba(234, 179, 8, 0.1);
  border-color: rgba(234, 179, 8, 0.3);
  color: #b45309;
}
.tier-avatar-3 .agc-req-badge {
  background: rgba(239, 68, 68, 0.1);
  border-color: rgba(239, 68, 68, 0.3);
  color: var(--crimson);
}
.tier-avatar-4 .agc-req-badge {
  background: rgba(168, 85, 247, 0.12);
  border-color: rgba(168, 85, 247, 0.3);
  color: #7e22ce;
}

/* Actions */
.agc-actions {
  width: 100%;
  margin-top: auto;
}
.btn-agc-equipped {
  width: 100%;
  background: rgba(46, 125, 50, 0.12) !important;
  color: var(--green) !important;
  border: 1px solid rgba(46, 125, 50, 0.3) !important;
  font-weight: 700;
  font-size: 11.5px;
  cursor: default;
}
.btn-agc-equip {
  width: 100%;
  font-size: 11.5px;
  font-weight: 600;
}
.btn-agc-unlock {
  width: 100%;
  font-size: 11.5px;
  font-weight: 700;
  background: linear-gradient(135deg, #d97706, #b45309) !important;
  border-color: #b45309 !important;
  color: #ffffff !important;
  box-shadow: 0 2px 8px rgba(180, 83, 9, 0.35);
}
.btn-agc-unlock:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(180, 83, 9, 0.5);
}
.agc-locked-notice {
  font-size: 11px;
  color: var(--ink-soft);
  line-height: 1.35;
  padding: 4px 6px;
  background: var(--cream-2);
  border-radius: 6px;
  border: 1px dashed var(--border-paper);
}

.modern-select {
  width: 100%;
  height: 38px;
  padding: 0 10px;
  font-family: var(--font-body);
  font-size: 12.5px;
  background: var(--paper);
  color: var(--ink);
  border: var(--border-paper);
  border-radius: var(--radius-sm);
  outline: none;
  cursor: pointer;
  transition: var(--transition);
}

.modern-select:focus {
  border-color: var(--crimson);
  box-shadow: 0 0 0 2px rgba(139, 32, 32, 0.1);
}

.modern-textarea {
  width: 100%;
  box-sizing: border-box;
  padding: 8px 12px;
  font-family: var(--font-body);
  font-size: 12.5px;
  line-height: 1.45;
  background: var(--paper);
  color: var(--ink);
  border: var(--border-paper);
  border-radius: var(--radius-sm);
  resize: vertical;
  min-height: 52px;
  transition: var(--transition);
}

.modern-textarea:focus {
  outline: none;
  border-color: var(--crimson);
  box-shadow: 0 0 0 2px rgba(139, 32, 32, 0.1);
}

.settings-modal-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  margin: 18px -20px -20px -20px;
  padding: 14px 20px 16px 20px;
  background: var(--cream-2, #faf8f5);
  border-top: 1px solid var(--border-paper);
  border-bottom-left-radius: inherit;
  border-bottom-right-radius: inherit;
}

.btn-save-settings {
  padding: 8px 22px !important;
  font-weight: 700 !important;
}

/* Fallback legacy classes */
.settings-wallet-box {
  background: var(--cream-2);
  border: 1px solid var(--border-paper);
  border-radius: var(--radius-sm);
  padding: 10px 14px;
}

.settings-stat-pill {
  background: var(--cream-2);
  border: var(--border-paper);
  border-radius: 4px;
  padding: 8px 12px;
  font-size: 12px;
}

.wallet-provider-btn {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--cream-2);
  border: 1px solid var(--tape-border);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  cursor: pointer;
  text-align: left;
  transition: all var(--transition);
}

.wallet-provider-btn:hover {
  background: var(--cream-card-elevated);
  border-color: var(--crimson);
  transform: translateY(-1px);
}

.wp-icon {
  font-size: 24px;
  line-height: 1;
}

.wp-info {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.wp-info strong {
  font-size: 13px;
  color: var(--ink);
}

.wp-info span {
  font-size: 11px;
  color: var(--ink-secondary);
}

.wp-badge {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 4px;
  background: var(--gain-soft);
  border: 1px solid var(--gain-border);
}

.btn-xs {
  padding: 2px 7px;
  font-size: 10.5px;
}

.wallet-status-dot.connected {
  background: var(--gain-green);
  box-shadow: 0 0 6px rgba(34, 197, 94, 0.8);
}

.wallet-status-dot.disconnected {
  background: var(--ink-soft);
}

/* Authentication Modal Styling */
.auth-security-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: rgba(139, 32, 32, 0.06);
  border: 1px solid rgba(139, 32, 32, 0.2);
  border-radius: var(--radius-sm);
  font-size: 11.5px;
  color: var(--ink-secondary);
  line-height: 1.4;
}

.auth-sec-icon {
  font-size: 16px;
  flex-shrink: 0;
}

.auth-or-divider {
  display: flex;
  align-items: center;
  text-align: center;
  margin: 18px 0 14px;
}

.auth-or-divider::before,
.auth-or-divider::after {
  content: '';
  flex: 1;
  border-bottom: var(--border-paper);
}

.auth-or-divider span {
  padding: 0 12px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--ink-soft);
}

.google-auth-wrapper {
  display: flex;
  justify-content: center;
  margin-bottom: 8px;
  min-height: 44px;
}

.google-custom-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 11px 16px;
  background: #ffffff;
  color: #3c4043;
  border: 1px solid #dadce0;
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.18s ease;
  box-shadow: 0 1px 3px rgba(60, 64, 67, 0.08);
}

.google-custom-btn:hover {
  background: #f8f9fa;
  border-color: #c6c9ce;
  box-shadow: 0 2px 6px rgba(60, 64, 67, 0.16);
  transform: translateY(-1px);
}

.google-icon-svg {
  flex-shrink: 0;
}

.auth-modal-footer {
  margin-top: 18px;
  padding-top: 14px;
  border-top: var(--border-paper);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.auth-footer-note {
  font-size: 11px;
  color: var(--ink-soft);
  line-height: 1.35;
}

/* ==========================================================================
   CONNECT A WALLET MODAL (Multi-Extension Discovery UI)
   ========================================================================== */
.wallet-select-modal-container {
  max-width: 380px !important;
  width: 92% !important;
  background: #F7F4EB !important;
  border: 1px solid #DFD5C4 !important;
  border-radius: 20px !important;
  padding: 22px 20px 20px 20px !important;
  box-shadow: 0 16px 44px rgba(0, 0, 0, 0.22), 0 2px 10px rgba(0, 0, 0, 0.08) !important;
  color: #24201C !important;
  box-sizing: border-box;
}

.wallet-modal-top-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}

.wallet-modal-title {
  font-family: var(--font-body, system-ui, -apple-system, sans-serif);
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: #2D2722;
  margin: 0;
  line-height: 1.2;
}

.wallet-modal-top-bar .modal-close-btn {
  background: transparent;
  border: none;
  font-size: 22px;
  line-height: 1;
  color: #8C8477;
  cursor: pointer;
  padding: 0 4px;
  transition: color 0.15s ease;
}

.wallet-modal-top-bar .modal-close-btn:hover {
  color: #2D2722;
}

.wallet-extensions-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 10px;
}

.wallet-ext-item {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  background: #EFE8DA;
  border: 1px solid #DFD5C4;
  border-radius: 12px;
  padding: 12px 16px;
  cursor: pointer;
  text-align: left;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.12s ease, box-shadow 0.15s ease;
  box-sizing: border-box;
  user-select: none;
}

.wallet-ext-item:hover {
  background: #E8DFC4;
  border-color: #C8BCAC;
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.wallet-ext-item:active {
  transform: scale(0.99);
}

.wallet-ext-item.connecting {
  opacity: 0.75;
  pointer-events: none;
  background: #EAE2D2;
}

.wallet-ext-icon-wrap {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.wallet-ext-icon-wrap img {
  width: 32px;
  height: 32px;
  object-fit: contain;
  border-radius: 8px;
}

.wallet-ext-icon-wrap svg {
  width: 32px;
  height: 32px;
  display: block;
}

.wallet-ext-name {
  font-family: var(--font-body, system-ui, -apple-system, sans-serif);
  font-size: 15px;
  font-weight: 600;
  color: #1E1B18;
  letter-spacing: -0.15px;
  flex: 1;
}

.wallet-ext-badge {
  font-family: var(--font-mono, monospace);
  font-size: 10.5px;
  font-weight: 700;
  color: var(--crimson, #E11D48);
  padding: 2px 6px;
  border-radius: 4px;
  background: rgba(225, 29, 72, 0.08);
  border: 1px solid rgba(225, 29, 72, 0.2);
}

.wallet-modal-cancel-btn {
  width: 100%;
  background: transparent;
  border: 1px solid #DFD5C4;
  border-radius: 10px;
  padding: 11px 16px;
  font-family: var(--font-body, system-ui, -apple-system, sans-serif);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: #6E665B;
  cursor: pointer;
  transition: all 0.15s ease;
  text-align: center;
  box-sizing: border-box;
  margin-top: 2px;
}

.wallet-modal-cancel-btn:hover {
  background: #EFE8DA;
  border-color: #C8BCAC;
  color: #2D2722;
}

.wallet-empty-hint {
  text-align: center;
  padding: 10px 12px;
  font-size: 12px;
  color: #7A7265;
  background: rgba(0, 0, 0, 0.03);
  border-radius: 8px;
  margin-bottom: 8px;
  line-height: 1.4;
}

/* ==========================================================================
   SUPER ADMIN PORTAL, PINNED POSTS & MODERATION STYLING
   ========================================================================== */
/* ==========================================================================
   FEATURED PINNED SETUP SPOTLIGHT - ULTRA PREMIUM HERO CARD
   ========================================================================== */
/* ==========================================================================
   FEATURED PINNED SETUP SPOTLIGHT - COMPACT ULTRA-PREMIUM HERO CARD
   ========================================================================== */
.community-post-card.is-pinned-card {
  position: relative;
  border: 1.5px solid #d97706 !important;
  background: linear-gradient(180deg, #fffdf8 0%, var(--cream-card) 100%) !important;
  box-shadow: 0 6px 20px -3px rgba(217, 119, 6, 0.14), 0 2px 6px rgba(0, 0, 0, 0.03) !important;
  border-radius: var(--radius-md) !important;
  padding: 12px 16px !important;
  overflow: visible;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

[data-theme="dark"] .community-post-card.is-pinned-card {
  border-color: #f59e0b !important;
  background: linear-gradient(180deg, #1f1b13 0%, #151310 100%) !important;
  box-shadow: 0 8px 24px -3px rgba(245, 158, 11, 0.18), 0 2px 6px rgba(0, 0, 0, 0.4) !important;
}

.community-post-card.is-pinned-card:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 28px -3px rgba(217, 119, 6, 0.18), 0 3px 8px rgba(0, 0, 0, 0.05) !important;
}

/* Shimmer Accent Strip on Top (Compact) */
.spotlight-shimmer-top {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  border-radius: var(--radius-md) var(--radius-md) 0 0;
  background: linear-gradient(90deg, #d97706, #ef4444, #f59e0b, #d97706);
  background-size: 200% 100%;
  animation: spotlightShimmer 4s ease infinite;
}

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

/* Compact Spotlight Hero Header Bar */
.spotlight-hero-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  background: linear-gradient(90deg, rgba(245, 158, 11, 0.12) 0%, rgba(239, 68, 68, 0.08) 100%);
  border: 1px solid rgba(245, 158, 11, 0.35);
  border-radius: var(--radius-sm);
  padding: 4px 10px;
  margin-bottom: 8px;
}

[data-theme="dark"] .spotlight-hero-bar {
  background: linear-gradient(90deg, rgba(245, 158, 11, 0.2) 0%, rgba(239, 68, 68, 0.15) 100%);
  border-color: rgba(245, 158, 11, 0.5);
}

.shb-left {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.shb-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 800;
  color: #b45309;
  letter-spacing: 0.04em;
}

[data-theme="dark"] .shb-badge {
  color: #fbbf24;
}

.shb-pulse-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #f59e0b;
  box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.7);
  animation: pulseSpotlight 1.8s infinite;
}

@keyframes pulseSpotlight {
  0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.7); }
  70% { transform: scale(1); box-shadow: 0 0 0 5px rgba(245, 158, 11, 0); }
  100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(245, 158, 11, 0); }
}

.shb-flair {
  font-size: 9px;
  font-weight: 700;
  color: var(--crimson);
  background: rgba(163, 22, 33, 0.08);
  padding: 1.5px 5px;
  border-radius: 3px;
  letter-spacing: 0.02em;
  font-family: var(--font-mono);
}

.shb-right {
  display: flex;
  align-items: center;
  gap: 5px;
}

.shb-timer-pill {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 700;
  color: #b45309;
  background: rgba(245, 158, 11, 0.15);
  padding: 2px 7px;
  border-radius: 10px;
  border: 1px solid rgba(245, 158, 11, 0.3);
}

[data-theme="dark"] .shb-timer-pill {
  color: #fcd34d;
  background: rgba(245, 158, 11, 0.25);
}

.is-pinned-card .post-headline {
  font-size: 15px !important;
  margin: 4px 0 6px 0 !important;
  line-height: 1.35 !important;
}

.is-pinned-card .post-body-text {
  font-size: 13px !important;
  line-height: 1.4 !important;
  margin-bottom: 8px !important;
}

/* Spotlight Author Badge */
.spotlight-author-badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  background: linear-gradient(135deg, #f59e0b, #d97706);
  color: #ffffff !important;
  font-size: 9px;
  font-weight: 800;
  padding: 1px 5px;
  border-radius: 3px;
  letter-spacing: 0.03em;
  box-shadow: 0 1px 3px rgba(217, 119, 6, 0.25);
  font-family: var(--font-mono);
}

/* Compact Spotlight Setup Strip */
.post-setup-strip.spotlight-setup-strip {
  background: linear-gradient(135deg, rgba(254, 243, 199, 0.35) 0%, rgba(255, 255, 255, 0.95) 100%);
  border: 1.5px solid rgba(245, 158, 11, 0.45);
  box-shadow: 0 2px 10px rgba(217, 119, 6, 0.06);
  position: relative;
  overflow: hidden;
  padding: 8px 12px !important;
  margin: 8px 0 !important;
}

[data-theme="dark"] .post-setup-strip.spotlight-setup-strip {
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.1) 0%, rgba(20, 20, 20, 0.9) 100%);
  border-color: rgba(245, 158, 11, 0.4);
}

.spotlight-setup-strip .setup-stats-grid {
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  padding: 4px 0 !important;
  gap: 8px 10px !important;
}

.spotlight-setup-strip .ss-lbl {
  font-size: 9.5px !important;
}

.spotlight-setup-strip .ss-val {
  font-size: 12.5px !important;
}

.spotlight-setup-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px dashed rgba(245, 158, 11, 0.3);
}

.btn-spotlight-copy {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: linear-gradient(135deg, #d97706, #b45309);
  color: #ffffff !important;
  border: none;
  font-weight: 700;
  font-size: 10.5px;
  padding: 4px 10px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  box-shadow: 0 1px 4px rgba(180, 83, 9, 0.25);
  transition: all 0.2s ease;
  font-family: var(--font-mono);
}

.btn-spotlight-copy:hover {
  background: linear-gradient(135deg, #b45309, #92400e);
  transform: translateY(-1px);
}

/* ==========================================================================
   DEDICATED 1-HOUR SETUP SPOTLIGHT SECTION (COMMUNITY PAID WITH $PTS)
   ========================================================================== */
.sort-tab.spotlight-tab {
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.08) 0%, rgba(236, 72, 153, 0.08) 100%);
  border-color: rgba(139, 92, 246, 0.3);
  color: #7c3aed;
  font-weight: 700;
}

.sort-tab.spotlight-tab:hover,
.sort-tab.spotlight-tab.active {
  background: linear-gradient(135deg, #8b5cf6, #7c3aed) !important;
  color: #ffffff !important;
  border-color: #7c3aed !important;
  box-shadow: 0 2px 8px rgba(124, 58, 237, 0.3);
}

.sort-tab.spotlight-tab .tab-count-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.3);
  color: inherit;
  font-size: 10px;
  padding: 1px 5px;
  border-radius: 10px;
  margin-left: 4px;
}

.spotlight-1h-banner {
  background: linear-gradient(135deg, #fbf7ff 0%, #fff 100%);
  border: 1.5px solid rgba(139, 92, 246, 0.35);
  border-radius: var(--radius-md);
  padding: 14px 18px;
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  box-shadow: 0 4px 16px rgba(139, 92, 246, 0.08);
}

[data-theme="dark"] .spotlight-1h-banner {
  background: linear-gradient(135deg, #1c152a 0%, #151020 100%);
  border-color: rgba(139, 92, 246, 0.45);
}

.s1b-left {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.s1b-title {
  font-size: 14px;
  font-weight: 800;
  color: #7c3aed;
  display: flex;
  align-items: center;
  gap: 6px;
}

[data-theme="dark"] .s1b-title {
  color: #c4b5fd;
}

.s1b-desc {
  font-size: 12px;
  color: var(--ink-secondary);
  line-height: 1.4;
}

.btn-promote-spotlight {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: linear-gradient(135deg, #8b5cf6, #7c3aed);
  color: #ffffff !important;
  border: none;
  font-weight: 800;
  font-size: 12px;
  padding: 8px 14px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  white-space: nowrap;
  box-shadow: 0 2px 8px rgba(124, 58, 237, 0.3);
  transition: all 0.2s ease;
  font-family: var(--font-mono);
}

.btn-promote-spotlight:hover {
  background: linear-gradient(135deg, #7c3aed, #6d28d9);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(124, 58, 237, 0.4);
}

/* 1H Spotlight Post Card */
.community-post-card.is-1h-spotlight-card {
  position: relative;
  border: 1.5px solid #8b5cf6 !important;
  background: linear-gradient(180deg, #fdfaff 0%, var(--cream-card) 100%) !important;
  box-shadow: 0 8px 24px -4px rgba(139, 92, 246, 0.16), 0 2px 6px rgba(0, 0, 0, 0.03) !important;
  border-radius: var(--radius-md) !important;
  padding: 12px 16px !important;
  margin-bottom: 14px;
}

[data-theme="dark"] .community-post-card.is-1h-spotlight-card {
  border-color: #a78bfa !important;
  background: linear-gradient(180deg, #1d162a 0%, #151120 100%) !important;
  box-shadow: 0 8px 28px -4px rgba(139, 92, 246, 0.25) !important;
}

.spotlight-1h-top {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  border-radius: var(--radius-md) var(--radius-md) 0 0;
  background: linear-gradient(90deg, #8b5cf6, #ec4899, #8b5cf6);
  background-size: 200% 100%;
  animation: spotlightShimmer 3.5s ease infinite;
}

.spotlight-1h-hero-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  background: linear-gradient(90deg, rgba(139, 92, 246, 0.12) 0%, rgba(236, 72, 153, 0.08) 100%);
  border: 1px solid rgba(139, 92, 246, 0.35);
  border-radius: var(--radius-sm);
  padding: 4px 10px;
  margin-bottom: 8px;
}

.shb-1h-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 800;
  color: #7c3aed;
  letter-spacing: 0.04em;
}

[data-theme="dark"] .shb-1h-badge {
  color: #c4b5fd;
}

.shb-1h-pulse-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #8b5cf6;
  box-shadow: 0 0 0 0 rgba(139, 92, 246, 0.7);
  animation: pulsePurple 1.8s infinite;
}

@keyframes pulsePurple {
  0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(139, 92, 246, 0.7); }
  70% { transform: scale(1); box-shadow: 0 0 0 5px rgba(139, 92, 246, 0); }
  100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(139, 92, 246, 0); }
}

.shb-countdown-pill {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 800;
  color: #7c3aed;
  background: rgba(139, 92, 246, 0.15);
  padding: 2px 7px;
  border-radius: 10px;
  border: 1px solid rgba(139, 92, 246, 0.3);
}

[data-theme="dark"] .shb-countdown-pill {
  color: #ddd6fe;
  background: rgba(139, 92, 246, 0.3);
}

/* ==========================================================================
   FOLLOW / UNFOLLOW BUTTONS & PROFILE FOLLOWER STATS
   ========================================================================== */
.btn-author-follow {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  background: transparent;
  border: 1px solid var(--border-paper-strong);
  border-radius: 12px;
  padding: 1px 7px;
  font-size: 10.5px;
  font-weight: 600;
  color: var(--ink-secondary);
  cursor: pointer;
  margin-left: 6px;
  transition: all 0.2s ease;
  line-height: 1.4;
}

.btn-author-follow:hover {
  background: var(--cream-2);
  color: var(--ink);
  border-color: var(--ink);
}

.btn-author-follow.following {
  background: var(--ink);
  color: var(--cream-card);
  border-color: var(--ink);
  font-weight: 700;
}

[data-theme="dark"] .btn-author-follow.following {
  background: var(--gain-green);
  color: #000;
  border-color: var(--gain-green);
}

.tp-follow-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  flex-wrap: wrap;
}

.btn-follow {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--ink);
  color: var(--cream-card);
  border: 1px solid var(--ink);
  font-weight: 700;
  font-size: 11.5px;
  padding: 4px 12px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all 0.2s;
}

.btn-follow:hover {
  opacity: 0.9;
}

.btn-follow.following {
  background: transparent;
  color: var(--ink);
  border-color: var(--border-paper-strong);
}

.btn-notif-bell {
  font-size: 11px;
  padding: 4px 10px;
}

.btn-notif-bell.active {
  color: #d97706;
  border-color: #d97706;
  background: rgba(217, 119, 6, 0.08);
}

.tp-follow-counts {
  font-size: 11.5px;
  color: var(--ink-soft);
  margin-left: 4px;
}

.tp-follow-counts strong {
  color: var(--ink);
}

/* ==========================================================================
   UPGRADED POST ANALYTICS & AUDIENCE STATS DASHBOARD
   ========================================================================== */
.post-stats-dashboard {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.ps-privacy-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: rgba(5, 150, 105, 0.08);
  border: 1px solid rgba(5, 150, 105, 0.25);
  padding: 3px 8px;
  border-radius: 4px;
  font-size: 10.5px;
  font-weight: 700;
  color: #059669;
}

.ps-kpi-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin: 14px 0;
}

.ps-kpi-card {
  background: var(--cream-2);
  border: var(--border-paper);
  border-radius: var(--radius-sm);
  padding: 13px 14px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 94px;
  box-sizing: border-box;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.ps-kpi-card:hover {
  border-color: var(--border-paper-strong);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.ps-kpi-val {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 19px;
  font-weight: 800;
  font-family: var(--font-mono, monospace);
  font-variant-numeric: tabular-nums;
  margin-bottom: 4px;
  line-height: 1.2;
}

.ps-kpi-val .ps-kpi-icon {
  font-size: 16px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
}

.ps-kpi-val .ps-pts-badge {
  font-size: 10.5px;
  font-weight: 800;
  color: var(--gain-green, #059669);
  background: rgba(16, 185, 129, 0.12);
  border: 1px solid rgba(16, 185, 129, 0.28);
  padding: 1px 6px;
  border-radius: 4px;
  margin-left: 2px;
  letter-spacing: 0.02em;
}

.ps-kpi-lbl {
  font-size: 11.5px;
  color: var(--ink);
  font-weight: 700;
  margin-bottom: 2px;
  line-height: 1.3;
}

.ps-kpi-sub {
  font-size: 10px;
  color: var(--ink-soft);
  line-height: 1.35;
  font-family: var(--font-sans, -apple-system, sans-serif);
}

.ps-subcard {
  background: var(--cream-2);
  border: var(--border-paper);
  border-radius: var(--radius-sm);
  padding: 12px;
}

.ps-subhead {
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ink-soft);
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.geo-breakdown-card {
  background: var(--cream-2);
  border: var(--border-paper);
  border-radius: var(--radius-sm);
  padding: 14px;
  margin-bottom: 12px;
}

.geo-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 10px;
}

.geo-row {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 12px;
}

.geo-flag-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 800;
  font-family: var(--font-mono, monospace);
  background: #ffffff;
  border: 1px solid var(--rule-light, #e7dfd3);
  color: var(--ink-secondary);
  width: 28px;
  height: 20px;
  border-radius: 4px;
  flex-shrink: 0;
  letter-spacing: 0.04em;
}

.geo-name {
  width: 140px;
  font-weight: 600;
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex-shrink: 0;
  font-size: 12px;
}

.geo-bar-track {
  flex: 1;
  height: 6px;
  background: rgba(0, 0, 0, 0.06);
  border-radius: 3px;
  overflow: hidden;
}

.geo-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, #d97706, #f59e0b);
  border-radius: 3px;
  transition: width 0.3s ease;
}

.geo-count {
  font-family: var(--font-mono, monospace);
  font-size: 11px;
  font-weight: 700;
  color: var(--ink);
  min-width: 24px;
  text-align: right;
  flex-shrink: 0;
}

.geo-pct {
  font-family: var(--font-mono, monospace);
  font-size: 11px;
  font-weight: 700;
  width: 38px;
  text-align: right;
  color: var(--ink-soft);
  flex-shrink: 0;
}

.ps-traffic-bar {
  background: var(--cream-2);
  border: var(--border-paper);
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 11.5px;
  color: var(--ink-secondary);
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
}

.ps-traffic-pills {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.ps-traffic-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: #ffffff;
  border: 1px solid var(--rule-light, #e7dfd3);
  padding: 2px 8px;
  border-radius: 12px;
  font-size: 10.5px;
  font-weight: 600;
  color: var(--ink);
}

.ps-traffic-pill strong {
  color: var(--crimson, #b8332a);
}

.admin-post-btn {
  font-weight: 700;
  border-color: rgba(163, 22, 33, 0.3);
}

.admin-post-btn:hover {
  background: rgba(163, 22, 33, 0.08);
  color: var(--crimson);
}

.admin-post-btn.is-pinned {
  color: var(--crimson);
  font-weight: 800;
  background: rgba(163, 22, 33, 0.1);
  border-color: var(--crimson);
}

.comment-delete-btn {
  background: none;
  border: none;
  font-size: 11px;
  color: var(--ink-soft);
  cursor: pointer;
  padding: 0 4px;
  margin-left: 8px;
  transition: color 0.15s ease;
}

.comment-delete-btn:hover {
  color: var(--crimson);
  text-decoration: underline;
}

.comment-delete-btn.admin-delete {
  color: var(--crimson);
  font-weight: 700;
  background: rgba(163, 22, 33, 0.06);
  border-radius: 3px;
  padding: 2px 6px;
}

/* ==========================================================================
   EXECUTIVE SUPER ADMIN COMMAND PORTAL & DEAL DESK
   ========================================================================== */
.admin-modal-container {
  max-width: 1100px;
  width: 96vw;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 16px;
  border: 1px solid rgba(226, 232, 240, 0.9);
  box-shadow: 0 25px 60px -15px rgba(15, 23, 42, 0.3), 0 0 0 1px rgba(0, 0, 0, 0.05);
  background: #ffffff;
}

/* Executive Obsidian Dark Header */
.admin-modal-header {
  background: #0f172a;
  color: #f8fafc;
  padding: 16px 24px;
  border-bottom: 1px solid #1e293b;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
}

.admin-title-wrap {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.admin-badge-line {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.admin-crown-badge {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: #fbbf24;
  background: rgba(251, 191, 36, 0.12);
  border: 1px solid rgba(251, 191, 36, 0.35);
  padding: 3px 10px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.admin-pulse-indicator {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 10.5px;
  font-weight: 600;
  color: #34d399;
  background: rgba(16, 185, 129, 0.12);
  border: 1px solid rgba(16, 185, 129, 0.25);
  padding: 2px 8px;
  border-radius: 6px;
  font-family: var(--font-mono);
}

.admin-pulse-dot {
  width: 6px;
  height: 6px;
  background: #10b981;
  border-radius: 50%;
  box-shadow: 0 0 8px #10b981;
  animation: adminPulse 2s infinite;
}

@keyframes adminPulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.4; transform: scale(0.85); }
}

.admin-exclusive-tag {
  font-size: 11px;
  color: #94a3b8;
  font-weight: 500;
}

.admin-modal-header .modal-title {
  color: #ffffff;
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -0.02em;
  margin: 0;
}

.admin-modal-header .modal-subtitle {
  color: #94a3b8;
  font-size: 12px;
}

.admin-header-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.admin-refresh-btn {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: #f1f5f9;
  padding: 6px 14px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  transition: all 0.18s ease;
}

.admin-refresh-btn:hover {
  background: rgba(255, 255, 255, 0.16);
  border-color: rgba(255, 255, 255, 0.25);
  transform: translateY(-1px);
}

.admin-close-btn {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #94a3b8;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  cursor: pointer;
  transition: all 0.16s ease;
}

.admin-close-btn:hover {
  background: rgba(239, 68, 68, 0.2);
  color: #ef4444;
  border-color: rgba(239, 68, 68, 0.4);
}

/* Modal Body */
.admin-modal-body {
  padding: 20px 24px;
  background: #f8fafc;
  overflow-y: auto;
  flex: 1;
}

/* Founder Authority Identity Strip */
.admin-status-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 18px;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  margin-bottom: 18px;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.03);
  flex-wrap: wrap;
  gap: 12px;
}

.asb-left {
  display: flex;
  align-items: center;
  gap: 14px;
}

.asb-avatar-wrap {
  position: relative;
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
}

.asb-info-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: #0f172a;
  font-weight: 700;
}

.asb-authority-pill {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  background: rgba(163, 22, 33, 0.08);
  color: var(--crimson);
  border: 1px solid rgba(163, 22, 33, 0.2);
  padding: 1px 6px;
  border-radius: 4px;
}

.asb-sub {
  font-size: 11.5px;
  color: #64748b;
  margin-top: 2px;
}

.asb-right {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* High-Impact Metric Cards Grid */
.admin-metrics-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-bottom: 20px;
}

@media (max-width: 820px) {
  .admin-metrics-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.am-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.02);
  transition: all 0.2s ease;
}

.am-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 14px rgba(15, 23, 42, 0.05);
  border-color: #cbd5e1;
}

.am-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: #e2e8f0;
}

.am-card.card-users::before { background: linear-gradient(90deg, #3b82f6, #60a5fa); }
.am-card.card-posts::before { background: linear-gradient(90deg, #10b981, #34d399); }
.am-card.card-comments::before { background: linear-gradient(90deg, #8b5cf6, #a78bfa); }
.am-card.card-inquiries::before { background: linear-gradient(90deg, #ef4444, #f59e0b); }

.am-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.am-lbl {
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #64748b;
}

.am-icon {
  font-size: 16px;
  opacity: 0.8;
}

.am-val {
  font-family: var(--font-mono);
  font-size: 26px;
  font-weight: 800;
  color: #0f172a;
  line-height: 1.1;
  margin-top: 4px;
}

.am-sub-pill {
  display: inline-flex;
  align-items: center;
  font-size: 10.5px;
  font-weight: 600;
  color: #64748b;
  margin-top: 4px;
}

.am-sub-pill.highlight {
  color: #b91c1c;
  background: #fef2f2;
  padding: 1px 6px;
  border-radius: 4px;
  font-weight: 700;
}

/* Modern Segmented Navigation Tabs */
.admin-tab-nav {
  display: flex;
  background: #f1f5f9;
  padding: 4px;
  border-radius: 10px;
  gap: 4px;
  margin-bottom: 18px;
  border: 1px solid #e2e8f0;
  overflow-x: auto;
  scrollbar-width: none;
}

.admin-tab-nav::-webkit-scrollbar {
  display: none;
}

.admin-tab-btn {
  background: transparent;
  border: none;
  font-family: var(--font-sans);
  font-size: 12.5px;
  font-weight: 600;
  color: #64748b;
  padding: 8px 16px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.16s ease;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}

.admin-tab-btn:hover {
  color: #0f172a;
  background: rgba(255, 255, 255, 0.6);
}

.admin-tab-btn.active {
  background: #ffffff;
  color: #0f172a;
  font-weight: 700;
  box-shadow: 0 1px 4px rgba(15, 23, 42, 0.08);
}

.admin-tab-badge {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 10px;
  background: #e2e8f0;
  color: #475569;
}

.admin-tab-btn.active .admin-tab-badge {
  background: #0f172a;
  color: #ffffff;
}

.admin-tab-badge.badge-amber {
  background: #fef3c7;
  color: #92400e;
}

.admin-tab-pane {
  display: none;
}

.admin-tab-pane.active {
  display: block;
}

/* Pane Header & Search Bars */
.admin-pane-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
  flex-wrap: wrap;
  gap: 10px;
}

.aph-title {
  font-size: 14px;
  font-weight: 700;
  color: #0f172a;
  display: block;
}

.aph-hint {
  font-size: 11.5px;
  color: #64748b;
  margin-top: 2px;
  display: block;
}

.admin-search-input {
  background: #ffffff;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  padding: 7px 12px;
  font-size: 12px;
  color: #0f172a;
  width: 240px;
  transition: all 0.16s ease;
}

.admin-search-input:focus {
  outline: none;
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}

.admin-filter-chips {
  display: flex;
  gap: 6px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}

.admin-chip {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  color: #64748b;
  font-size: 11.5px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.admin-chip:hover {
  background: #f1f5f9;
  color: #0f172a;
}

.admin-chip.active {
  background: #0f172a;
  color: #ffffff;
  border-color: #0f172a;
}

.admin-list-container {
  max-height: 480px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.admin-empty-pane {
  text-align: center;
  padding: 40px 16px;
  color: #64748b;
  font-size: 13px;
  background: #ffffff;
  border: 1px dashed #cbd5e1;
  border-radius: 12px;
}

/* Post and Comment Rows */
.admin-row-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  gap: 14px;
  transition: all 0.16s ease;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.02);
}

.admin-row-item:hover {
  border-color: #cbd5e1;
  box-shadow: 0 3px 8px rgba(15, 23, 42, 0.04);
}

.ari-info {
  flex: 1;
  min-width: 0;
}

.ari-title-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
  flex-wrap: wrap;
}

.admin-pin-tag {
  font-size: 10px;
  font-weight: 800;
  color: #b91c1c;
  background: #fef2f2;
  border: 1px solid rgba(185, 28, 28, 0.2);
  padding: 1px 6px;
  border-radius: 4px;
  font-family: var(--font-mono);
}

.ari-title {
  font-size: 13.5px;
  color: #0f172a;
  font-weight: 700;
}

.ari-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11.5px;
  color: #64748b;
  flex-wrap: wrap;
  margin-top: 4px;
}

.ari-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

/* Data Table */
.admin-table-wrap {
  overflow-x: auto;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  background: #ffffff;
  box-shadow: 0 1px 4px rgba(15, 23, 42, 0.02);
}

.admin-data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
  text-align: left;
}

.admin-data-table th {
  padding: 10px 14px;
  background: #f8fafc;
  border-bottom: 1px solid #e2e8f0;
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #64748b;
}

.admin-data-table td {
  padding: 12px 14px;
  border-bottom: 1px solid #f1f5f9;
  color: #0f172a;
  vertical-align: middle;
}

.admin-data-table tr:hover td {
  background: #f8fafc;
}

.admin-data-table tr:last-child td {
  border-bottom: none;
}

.admin-tag-role {
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 700;
  color: #b91c1c;
  background: #fef2f2;
  border: 1px solid rgba(185, 28, 28, 0.2);
  padding: 2px 6px;
  border-radius: 4px;
}

/* ==========================================================================
   2-COLUMN LIVE DEAL DESK & SUPPORT CHAT
   ========================================================================== */
.admin-deal-desk {
  display: grid;
  grid-template-columns: 330px 1fr;
  gap: 16px;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  overflow: hidden;
  height: 480px;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.03);
}

@media (max-width: 860px) {
  .admin-deal-desk {
    grid-template-columns: 1fr;
    height: auto;
  }
}

.admin-inq-sidebar {
  border-right: 1px solid #e2e8f0;
  display: flex;
  flex-direction: column;
  background: #f8fafc;
}

.admin-inq-sidebar-head {
  padding: 12px;
  border-bottom: 1px solid #e2e8f0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: #f8fafc;
}

.admin-inq-sidebar-list {
  flex: 1;
  overflow-y: auto;
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.admin-inq-card-item {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 10px 12px;
  cursor: pointer;
  transition: all 0.16s ease;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.admin-inq-card-item:hover {
  border-color: #cbd5e1;
  background: #f8fafc;
}

.admin-inq-card-item.active {
  border-color: #0f172a;
  background: #f8fafc;
  box-shadow: 0 0 0 2px rgba(15, 23, 42, 0.08);
}

.aici-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.aici-user {
  font-weight: 700;
  font-size: 12px;
  color: #0f172a;
}

.aici-date {
  font-size: 10px;
  color: #94a3b8;
}

.aici-topic {
  font-size: 11px;
  color: #0284c7;
  font-weight: 600;
}

.aici-snippet {
  font-size: 11px;
  color: #64748b;
  line-height: 1.35;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.aici-status-pill {
  align-self: flex-start;
  font-size: 9.5px;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 4px;
  margin-top: 2px;
}

.aici-status-pill.open {
  background: #ecfdf5;
  color: #059669;
  border: 1px solid rgba(5, 150, 105, 0.2);
}

.aici-status-pill.replied {
  background: #eff6ff;
  color: #2563eb;
  border: 1px solid rgba(37, 99, 235, 0.2);
}

.aici-status-pill.resolved {
  background: #f1f5f9;
  color: #64748b;
  border: 1px solid #cbd5e1;
}

/* Chat Pane (Right Side) */
.admin-inq-chat-pane {
  display: flex;
  flex-direction: column;
  background: #ffffff;
  position: relative;
  min-height: 0;
}

.admin-chat-header {
  padding: 12px 18px;
  border-bottom: 1px solid #e2e8f0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #ffffff;
  flex-shrink: 0;
  gap: 10px;
  flex-wrap: wrap;
}

.ach-user-details {
  display: flex;
  align-items: center;
  gap: 10px;
}

.ach-handle {
  font-size: 13.5px;
  font-weight: 700;
  color: #0f172a;
}

.ach-sub {
  font-size: 11px;
  color: #64748b;
}

.ach-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}

/* Message Feed */
.admin-chat-feed {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: #fcfdfe;
}

.chat-bubble-wrap {
  display: flex;
  gap: 10px;
  max-width: 82%;
}

.chat-bubble-wrap.from-user {
  align-self: flex-start;
}

.chat-bubble-wrap.from-admin {
  align-self: flex-end;
  flex-direction: row-reverse;
}

.chat-bubble {
  padding: 10px 14px;
  border-radius: 12px;
  font-size: 12.5px;
  line-height: 1.45;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
}

.chat-bubble-wrap.from-user .chat-bubble {
  background: #f1f5f9;
  color: #0f172a;
  border: 1px solid #e2e8f0;
  border-bottom-left-radius: 2px;
}

.chat-bubble-wrap.from-admin .chat-bubble {
  background: #0f172a;
  color: #f8fafc;
  border-bottom-right-radius: 2px;
}

.chat-bubble-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 3px;
  font-size: 10.5px;
}

.chat-bubble-wrap.from-user .chat-bubble-meta {
  color: #64748b;
}

.chat-bubble-wrap.from-admin .chat-bubble-meta {
  color: #94a3b8;
  justify-content: flex-end;
}

.chat-author-pill {
  font-weight: 700;
}

.chat-author-pill.founder-tag {
  color: #fbbf24;
}

.chat-time {
  font-size: 10px;
  opacity: 0.8;
}

/* Chat Input Bar */
.admin-chat-composer {
  padding: 12px 16px;
  border-top: 1px solid #e2e8f0;
  background: #ffffff;
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex-shrink: 0;
}

.chat-quick-replies {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding-bottom: 2px;
  scrollbar-width: none;
}

.chat-quick-btn {
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
  color: #475569;
  font-size: 11px;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 6px;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.15s ease;
}

.chat-quick-btn:hover {
  background: #e2e8f0;
  color: #0f172a;
}

.chat-input-row {
  display: flex;
  gap: 8px;
  align-items: flex-end;
}

.chat-textarea {
  flex: 1;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 12.5px;
  font-family: inherit;
  resize: none;
  min-height: 44px;
  max-height: 100px;
  color: #0f172a;
  background: #f8fafc;
  transition: all 0.16s ease;
}

.chat-textarea:focus {
  outline: none;
  border-color: #3b82f6;
  background: #ffffff;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}

.chat-send-btn {
  background: #0f172a;
  color: #ffffff;
  border: none;
  border-radius: 8px;
  padding: 0 16px;
  height: 44px;
  font-size: 12.5px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  transition: all 0.16s ease;
}

.chat-send-btn:hover {
  background: #1e293b;
  transform: translateY(-1px);
}

/* User Support & Deal Chat Modal */
.user-chat-modal-container {
  max-width: 640px;
  width: 95vw;
  height: 600px;
  max-height: 85vh;
  display: flex;
  flex-direction: column;
  border-radius: 14px;
  overflow: hidden;
  background: #ffffff;
  box-shadow: 0 20px 50px rgba(15, 23, 42, 0.25);
}

.user-chat-header {
  background: #0f172a;
  color: #f8fafc;
  padding: 14px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
}

.user-chat-title-group {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.sponsor-tabs-bar {
  display: flex;
  gap: 8px;
  border-bottom: 2px solid var(--border-paper);
  margin-bottom: 14px;
  padding-bottom: 4px;
}

.sp-tab-btn {
  background: transparent;
  border: none;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink-soft);
  padding: 6px 12px;
  border-radius: 6px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all 0.15s ease;
}

.sp-tab-btn.active {
  background: var(--cream-2);
  color: var(--crimson);
  font-weight: 700;
}

.sp-tab-count {
  font-family: var(--font-mono);
  font-size: 10px;
  background: var(--crimson);
  color: #ffffff;
  padding: 1px 6px;
  border-radius: 10px;
}

.my-inq-card {
  padding: 12px 14px;
  background: var(--cream-2);
  border: var(--border-paper);
  border-radius: 8px;
  margin-bottom: 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.my-inq-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.my-inq-topic {
  font-weight: 700;
  font-size: 13px;
  color: var(--ink);
}

.my-inq-last-msg {
  font-size: 12px;
  color: var(--ink-secondary);
  background: var(--cream-card);
  padding: 8px 10px;
  border-radius: 6px;
  border: 1px dashed var(--tape-border);
}

.modal-footer.admin-modal-footer {
  padding: 12px 24px;
  background: #ffffff;
  border-top: 1px solid #e2e8f0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
}

/* ==========================================================================
   FIXED MOBILE BOTTOM NAVIGATION BAR (SATRUSH MOBILE SPEC)
   ========================================================================== */
.mobile-bottom-nav {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 62px;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-top: 1px solid var(--border-paper);
  z-index: 999;
  align-items: center;
  justify-content: space-around;
  padding: 0 4px;
  box-shadow: 0 -2px 14px rgba(15, 23, 42, 0.05);
}

.mobile-nav-item {
  flex: 1;
  min-width: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  gap: 3px;
  color: var(--ink-soft);
  cursor: pointer;
  padding: 6px 1px;
  transition: all 0.16s ease;
  position: relative;
  -webkit-tap-highlight-color: transparent;
}

.mobile-nav-item .mob-nav-icon {
  font-size: 19px;
  line-height: 1;
  transition: transform 0.15s ease;
}

.mobile-nav-item .mob-nav-label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: -0.02em;
  font-family: var(--font-sans);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

.mobile-nav-item:active {
  transform: scale(0.92);
}

.mobile-nav-item.active {
  color: var(--crimson);
}

.mobile-nav-item.active .mob-nav-icon {
  transform: translateY(-2px);
}

.mobile-nav-item.active::after {
  content: '';
  position: absolute;
  top: 0;
  left: 22%;
  right: 22%;
  height: 2.5px;
  background: var(--crimson);
  border-radius: 0 0 3px 3px;
}

.mobile-nav-item.admin-mob-item.active {
  color: #f59e0b;
}

/* ==========================================================================
   ADVANCED MOBILE & RESPONSIVE ENGINE (SMOOTH EXPERIENCE ACROSS ALL DEVICES)
   ========================================================================== */

/* 1. Tablet & Small Desktop (<= 900px): Decouple sidebars and stack cleanly */
@media (max-width: 900px) {
  .main-layout {
    padding: 0 16px !important;
    gap: 18px !important;
    margin: 14px auto !important;
  }

  /* On mobile/tablet screens (<= 900px), sidebars are cleanly housed in the dedicated 'About' tab */
  .col-left,
  .col-right {
    display: none !important;
  }

  .col-center {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important;
  }

  .vip-plans-grid {
    grid-template-columns: 1fr !important;
  }

  .admin-metrics-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  .footer-inner {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }

  .footer-nav-groups {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* 2. Mobile Handhelds (<= 768px): SatRush Bottom Navigation & Smooth Layout */
@media (max-width: 768px) {
  /* Activate fixed bottom nav bar */
  .mobile-bottom-nav {
    display: flex !important;
  }

  /* Prevent bottom bar overlapping page content */
  body {
    padding-bottom: 74px !important;
  }

  /* iOS smooth inputs */
  input, select, textarea {
    font-size: 16px !important;
  }

  /* Navbar: Clean single-line header on mobile with ZERO cutoffs */
  .navbar {
    top: 30px;
  }

  .nav-container {
    padding: 8px 12px;
    gap: 6px;
    flex-wrap: nowrap !important;
    justify-content: space-between;
    width: 100%;
    box-sizing: border-box;
  }

  .brand-logo .wordmark-text {
    font-size: 1.15rem;
    white-space: nowrap;
  }

  .brand-tag {
    display: none !important;
  }

  /* Hide bulky horizontal tabs from top navbar on mobile (handled by SatRush bottom nav) */
  .nav-links {
    display: none !important;
  }

  /* Hide bulky buttons that cause horizontal cutoff on mobile screens */
  .btn-share-pill {
    display: none !important;
  }

  .streak-pill {
    display: none !important;
  }


  .notif-bell-container .notif-btn {
    width: 32px !important;
    padding: 0 !important;
    justify-content: center !important;
    flex-shrink: 0;
  }

  .nav-actions {
    gap: 5px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
  }

  .nav-action-pill {
    height: 32px;
    font-size: 11px;
  }

  .points-pill {
    padding: 0 8px !important;
    font-size: 11px;
    white-space: nowrap;
    flex-shrink: 0;
  }

  .btn-wallet-pill {
    padding: 0 9px !important;
    font-size: 11px;
    white-space: nowrap;
    flex-shrink: 0;
    max-width: 110px;
  }

  .btn-wallet-pill .nav-handle-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* Ticker Tape */
  .ticker-tape {
    height: 30px;
  }

  .tape-badge {
    padding: 0 8px;
    font-size: 9px;
  }

  .tape-track {
    font-size: 10px;
    gap: 18px;
  }

  /* Feed Filter Bar */
  .feed-filter-bar {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    padding: 8px 10px;
    overflow: hidden;
    max-width: 100%;
    box-sizing: border-box;
  }

  .filter-tabs-group {
    display: flex;
    align-items: center;
    gap: 5px;
    overflow-x: auto;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 2px;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }

  .filter-tabs-group::-webkit-scrollbar {
    display: none;
  }

  .sort-tab {
    flex-shrink: 0 !important;
    white-space: nowrap !important;
    padding: 4px 8px;
    font-size: 11px;
  }

  .desktop-tab-word {
    display: none;
  }

  .feed-search-wrap {
    width: 100%;
    box-sizing: border-box;
  }

  .feed-search-wrap input {
    width: 100%;
    box-sizing: border-box;
  }

  /* Post Cards */
  .community-post-card {
    padding: 14px 12px;
  }

  .setup-stats-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px 10px !important;
  }

  .setup-stats-grid .ss-col.outcome-col {
    grid-column: span 2 !important;
    display: flex !important;
    flex-direction: row !important;
    justify-content: space-between !important;
    align-items: center !important;
    background: rgba(0, 0, 0, 0.025);
    border: 1px dashed var(--tape-border);
    border-radius: var(--radius-sm);
    padding: 6px 10px !important;
    margin-top: 2px;
  }

  [data-theme="dark"] .setup-stats-grid .ss-col.outcome-col {
    background: rgba(255, 255, 255, 0.035);
    border-color: rgba(255, 255, 255, 0.08);
  }

  .setup-stats-grid .ss-col.outcome-col .ss-lbl {
    margin-bottom: 0 !important;
  }

  /* Post Bottom Actions: Perfect Single-Line Alignment on Mobile */
  .post-bottom-actions {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-wrap: nowrap !important;
    gap: 3px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    padding-top: 8px !important;
    margin-top: 10px !important;
  }

  .post-actions-left {
    display: inline-flex !important;
    align-items: center !important;
    gap: 2.5px !important;
    flex-shrink: 0 !important;
  }

  .post-actions-right {
    display: inline-flex !important;
    align-items: center !important;
    gap: 3px !important;
    flex-shrink: 0 !important;
    margin-left: auto !important;
    width: auto !important;
    justify-content: flex-end !important;
  }

  .boost-pill {
    padding: 2px 5px !important;
    height: 26px !important;
    font-size: 10px !important;
    gap: 2px !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
  }

  .boost-pill .boost-icon {
    font-size: 10.5px !important;
  }

  .boost-pill .boost-count {
    font-size: 9.5px !important;
    padding: 0 4px !important;
    margin-left: 0 !important;
  }

  .action-btn {
    padding: 2px 5px !important;
    height: 26px !important;
    font-size: 10.5px !important;
    gap: 2.5px !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
  }

  .copy-setup-btn {
    padding: 2px 6px !important;
    height: 26px !important;
    font-size: 10.5px !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
  }

  .direct-trade-link {
    padding: 2px 6px !important;
    height: 26px !important;
    font-size: 10px !important;
    gap: 2px !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
  }

  /* Leaderboards Podium on Mobile */
  .podium-grid {
    grid-template-columns: 1fr !important;
    gap: 12px;
  }

  .podium-card.rank-gold {
    order: -1;
    transform: none;
  }

  /* Modals */
  .modal-container {
    max-width: 95vw !important;
    width: 95vw !important;
    margin: 12px auto !important;
    max-height: 90vh !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
    padding: 0;
  }

  .modal-header {
    padding: 12px 16px;
  }

  .modal-body {
    padding: 14px 16px;
    overflow-y: auto;
    overflow-x: hidden !important;
    box-sizing: border-box !important;
    min-height: 0;
  }

  .modal-footer {
    padding: 12px 16px 14px 16px;
    gap: 8px;
    flex-wrap: wrap;
  }

  .modal-body > .modal-footer,
  form.modal-body > .modal-footer,
  .modal-body form > .modal-footer {
    margin: 14px -16px -14px -16px;
    padding: 12px 16px 14px 16px;
  }

  .form-row.two-col,
  .form-row.three-col {
    grid-template-columns: 1fr !important;
  }

  .tp-stats-row {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  .admin-metrics-grid {
    grid-template-columns: 1fr 1fr !important;
  }

  .admin-row-item {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }

  .ari-actions {
    width: 100%;
    justify-content: flex-end;
  }

  .toast-hub {
    left: 12px;
    right: 12px;
    bottom: 74px; /* Above mobile bottom bar */
  }

  .footer-bottom-bar {
    flex-direction: column;
    gap: 12px;
    text-align: center;
    align-items: center;
  }

  .footer-bottom-actions {
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
  }

  /* ==========================================================================
     ADVANCE PAGE (#tab-monetize) RESPONSIVE MOBILE ALIGNMENTS
     ========================================================================== */
  #tab-monetize {
    max-width: 100% !important;
    overflow-x: hidden !important;
    box-sizing: border-box !important;
  }

  #tab-monetize .paper-card {
    padding: 14px 12px !important;
    margin-bottom: 16px !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  /* 1. Hero Banner & Status Strip */
  .vip-hero-banner {
    padding: 16px 12px !important;
  }

  .vip-hero-banner .section-heading {
    font-size: 1.3rem !important;
    line-height: 1.25 !important;
    margin-bottom: 8px !important;
  }

  .vip-hero-banner .section-subheading {
    font-size: 11.5px !important;
    line-height: 1.45 !important;
    margin-bottom: 12px !important;
  }

  .vip-status-strip {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
    padding: 10px 12px !important;
  }

  .vip-status-strip .vip-status-left {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 6px !important;
    width: 100% !important;
  }

  .vip-status-strip .vip-badge-pill {
    font-size: 10.5px !important;
    padding: 3px 8px !important;
  }

  .vip-status-strip .vip-status-caption {
    font-size: 11.5px !important;
    line-height: 1.35 !important;
    color: var(--gain-green) !important;
    font-weight: 600 !important;
  }

  .vip-status-strip .vip-status-btn {
    width: 100% !important;
    justify-content: center !important;
    height: 32px !important;
    font-size: 11.5px !important;
  }

  /* 2. Token Mint Telemetry & Metrics Grid */
  #tab-monetize .tab-header-row {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
  }

  .paper-mint-actions-top {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    gap: 6px !important;
    flex-wrap: nowrap !important;
  }

  .live-status-pill {
    font-size: 10.5px !important;
    padding: 4px 8px !important;
    flex: 1 !important;
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    display: inline-flex !important;
    align-items: center !important;
  }

  .paper-mint-metrics-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
    margin-bottom: 14px !important;
    width: 100% !important;
  }

  .pm-metric-box {
    padding: 10px !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  .pm-lbl {
    font-size: 9px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    margin-bottom: 3px !important;
  }

  .pm-val {
    font-size: 1.1rem !important;
    line-height: 1.2 !important;
    word-break: break-word !important;
  }

  .pm-val small {
    font-size: 9.5px !important;
  }

  .pm-sub {
    font-size: 10px !important;
    flex-wrap: wrap !important;
    gap: 3px !important;
    margin-top: 3px !important;
  }

  .pm-sub code {
    font-size: 9.5px !important;
    padding: 1px 3px !important;
  }

  .pm-sub-secondary {
    font-size: 9px !important;
    word-break: break-word !important;
    margin-top: 3px !important;
  }

  .curve-badge {
    font-size: 9px !important;
    padding: 2px 4px !important;
  }

  /* Mint Links Row */
  .paper-mint-links-row {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 8px !important;
    width: 100% !important;
  }

  .paper-mint-links-row .link-action-btn {
    display: flex !important;
    width: 100% !important;
    justify-content: space-between !important;
    align-items: center !important;
    box-sizing: border-box !important;
    padding: 8px 12px !important;
    font-size: 11.5px !important;
  }

  .paper-reserves-mini {
    margin-left: 0 !important;
    width: 100% !important;
    justify-content: space-between !important;
    display: flex !important;
    box-sizing: border-box !important;
    padding: 8px 12px !important;
    background: var(--cream-2) !important;
    border: var(--border-paper) !important;
    border-radius: var(--radius-sm) !important;
    font-size: 11px !important;
  }

  /* 3. Section 2 Copied Positions & Table */
  .copy-engine-banner {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 6px !important;
    padding: 10px 12px !important;
  }

  .ceb-badge {
    font-size: 9.5px !important;
    padding: 2px 6px !important;
  }

  .ceb-text {
    font-size: 11px !important;
    line-height: 1.4 !important;
  }

  .table-card {
    max-width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  .data-table th,
  .data-table td {
    white-space: nowrap !important;
    padding: 8px 10px !important;
    font-size: 11px !important;
  }

  #copiedTradesTbody td[colspan="8"] {
    text-align: left !important;
    padding: 16px 12px !important;
    white-space: normal !important;
    position: sticky !important;
    left: 0 !important;
    max-width: calc(100vw - 48px) !important;
  }

  /* 4. Section 3 Portfolio Inspector Header & Input */
  .inspector-header-controls {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    width: 100% !important;
  }

  .inspector-header-controls .inspector-alert-toggle {
    flex: 1 !important;
    justify-content: center !important;
    font-size: 11px !important;
    padding: 6px 8px !important;
    white-space: nowrap !important;
    box-sizing: border-box !important;
  }

  .inspector-header-controls .btn-redirect-official {
    flex: 1 !important;
    justify-content: center !important;
    font-size: 11px !important;
    padding: 6px 8px !important;
    white-space: nowrap !important;
    box-sizing: border-box !important;
  }

  .inspector-input-row {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    width: 100% !important;
  }

  .inspector-input-row input {
    width: 100% !important;
    height: 38px !important;
    font-size: 12px !important;
    box-sizing: border-box !important;
  }

  .inspector-input-row .btn {
    width: 100% !important;
    height: 38px !important;
    justify-content: center !important;
    font-size: 12px !important;
    font-weight: 700 !important;
  }

  /* Inspector Positions Deck Header */
  .inspector-positions-header {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 8px !important;
    padding: 10px 12px !important;
  }

  .inspector-positions-header .iph-left {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    width: 100% !important;
  }

  .inspector-positions-header .iph-right {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    width: 100% !important;
  }

  .iph-title {
    font-size: 11.5px !important;
  }

  .iph-count-pill {
    font-size: 10px !important;
    padding: 2px 6px !important;
  }

  .btn-remove-current-inspected {
    padding: 4px 8px !important;
    font-size: 10.5px !important;
  }

  .iph-limit-note {
    font-size: 10.5px !important;
    color: var(--ink-soft) !important;
  }

  /* Position Cards in Inspector Deck */
  .inspector-cards-deck {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
    width: 100% !important;
  }

  .position-card {
    padding: 12px !important;
    box-sizing: border-box !important;
  }

  .position-card-top {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: space-between !important;
    align-items: center !important;
    gap: 6px !important;
  }

  .position-card-top .pct-left {
    display: flex !important;
    align-items: center !important;
    gap: 5px !important;
    flex-wrap: wrap !important;
  }

  .pct-asset-pill {
    font-size: 10px !important;
    padding: 2px 5px !important;
  }

  .setup-dir-pill {
    font-size: 10px !important;
    padding: 2px 5px !important;
  }

  .pct-time-ago {
    font-size: 9.5px !important;
  }

  .pct-trader-badge {
    font-size: 10px !important;
    padding: 2px 5px !important;
  }

  .position-pnl-strip {
    padding: 7px 10px !important;
    margin: 8px 0 !important;
  }

  .pnl-lbl {
    font-size: 9.5px !important;
  }

  .pnl-val {
    font-size: 12px !important;
  }

  .pnl-strip-right {
    font-size: 10px !important;
  }

  .position-metrics-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 6px 10px !important;
    padding: 8px 10px !important;
    margin-bottom: 8px !important;
  }

  .pmg-lbl {
    font-size: 8.5px !important;
  }

  .pmg-val {
    font-size: 11.5px !important;
  }

  .position-card-footer {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
    width: 100% !important;
    padding-top: 2px !important;
  }

  .btn-copy-position {
    flex: 1 1 100% !important;
    width: 100% !important;
    height: 32px !important;
    font-size: 11.5px !important;
    font-weight: 700 !important;
    justify-content: center !important;
    box-sizing: border-box !important;
    padding: 0 10px !important;
  }

  .btn-close-sim {
    flex: 1 1 calc(50% - 3px) !important;
    height: 30px !important;
    font-size: 10.5px !important;
    white-space: nowrap !important;
    justify-content: center !important;
    display: inline-flex !important;
    align-items: center !important;
    text-align: center !important;
    box-sizing: border-box !important;
    padding: 0 6px !important;
  }

  .btn-view-official {
    flex: 1 1 calc(50% - 3px) !important;
    height: 30px !important;
    font-size: 10.5px !important;
    white-space: nowrap !important;
    justify-content: center !important;
    display: inline-flex !important;
    align-items: center !important;
    text-align: center !important;
    box-sizing: border-box !important;
    padding: 0 6px !important;
  }

  /* Pagination Bar */
  .inspector-pagination-bar {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    gap: 6px !important;
    width: 100% !important;
    padding: 4px 0 !important;
  }

  .inspector-page-pill {
    font-size: 10.5px !important;
    padding: 3px 8px !important;
  }

  /* 5. Section 4 Code Editor */
  .code-editor-header {
    padding: 8px 10px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
  }

  .code-editor-dots {
    display: flex !important;
    align-items: center !important;
    gap: 5px !important;
    min-width: 0 !important;
  }

  .code-filename {
    font-size: 11px !important;
    max-width: 130px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  .copy-code-btn {
    font-size: 10.5px !important;
    padding: 2px 7px !important;
    flex-shrink: 0 !important;
  }

  .code-snippet-box {
    max-width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  .code-snippet-box pre {
    padding: 10px !important;
    font-size: 10px !important;
    line-height: 1.4 !important;
  }

  /* 6. Section 5 Sponsor Section */
  .vip-plans-grid {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  .vip-plan-card {
    padding: 16px 12px !important;
  }

  .vip-plan-card .vp-title {
    font-size: 1.05rem !important;
  }

  .vip-plan-card .vp-price {
    font-size: 1.4rem !important;
  }

  .sponsor-channels-banner {
    padding: 12px !important;
  }

  .sponsor-channels-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 8px !important;
    width: 100% !important;
  }

  .contact-pill-card {
    padding: 8px 12px !important;
  }
}

/* 3. Extra Small Screens (<= 480px) */
@media (max-width: 480px) {
  .nav-action-pill.streak-pill #streakActionLabel {
    display: none; /* Keep just flame and count */
  }


  .btn-wallet-pill .nav-handle-text {
    max-width: 80px;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .admin-metrics-grid {
    grid-template-columns: 1fr !important;
  }

  .footer-nav-groups {
    grid-template-columns: 1fr !important;
  }
}

/* ==========================================================================
   LEADERBOARDS CLEAN EMPTY STATE STYLES
   ========================================================================== */
.podium-empty-wrapper {
  grid-column: 1 / -1;
  width: 100%;
  display: flex;
  justify-content: center;
  margin: 12px 0 24px;
}

.podium-empty-box {
  background: var(--cream-card-elevated);
  border: var(--border-paper);
  border-radius: var(--radius-lg);
  padding: 36px 28px;
  text-align: center;
  max-width: 580px;
  width: 100%;
  box-shadow: var(--shadow-paper);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.peb-icon {
  font-size: 46px;
  line-height: 1;
}

.peb-tag {
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 800;
  color: var(--gold-seal);
  background: var(--gold-soft);
  border: 1px solid rgba(245, 158, 11, 0.25);
  padding: 3px 12px;
  border-radius: 20px;
  letter-spacing: 0.05em;
}

.peb-title {
  font-size: 1.35rem;
  font-weight: 800;
  color: var(--ink);
  letter-spacing: -0.02em;
}

.peb-desc {
  font-size: 13px;
  color: var(--ink-secondary);
  line-height: 1.55;
  max-width: 480px;
}

.peb-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 8px;
}

.table-empty-box {
  text-align: center;
  padding: 36px 16px;
  color: var(--ink-secondary);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.teb-icon {
  font-size: 32px;
  line-height: 1;
}

.table-empty-box h4 {
  font-size: 14px;
  color: var(--ink);
  font-weight: 700;
}

.table-empty-box p {
  font-size: 12px;
  color: var(--ink-soft);
  max-width: 440px;
}


/* ==========================================================================
   ENHANCED COMMUNITY POST CARD & MODERN ELEVATION
   ========================================================================== */
.community-post-card {
  background: var(--paper-warm, #faf7f2);
  border: 1px solid var(--rule-light, #e7dfd3);
  border-radius: 16px;
  padding: 22px 24px;
  margin-bottom: 20px;
  box-shadow: 0 3px 12px rgba(28, 25, 23, 0.03), 0 1px 3px rgba(28, 25, 23, 0.02);
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
  position: relative;
  overflow: visible;
}

.community-post-card:hover {
  box-shadow: 0 8px 24px rgba(28, 25, 23, 0.06), 0 2px 6px rgba(28, 25, 23, 0.03);
  border-color: rgba(184, 51, 42, 0.25);
}

.community-post-card.is-pinned-card {
  border-color: rgba(184, 51, 42, 0.35);
  background: linear-gradient(180deg, rgba(184, 51, 42, 0.02) 0%, var(--paper-warm, #faf7f2) 100%);
}

.community-post-card.is-1h-spotlight-card {
  border-color: rgba(124, 58, 237, 0.35);
  background: linear-gradient(180deg, rgba(124, 58, 237, 0.025) 0%, var(--paper-warm, #faf7f2) 100%);
}

.post-top-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 12px;
  color: var(--ink-soft);
  margin-bottom: 8px;
  flex-wrap: nowrap;
  width: 100%;
}



.post-author-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-weight: 600;
  color: var(--ink);
  cursor: pointer;
  padding: 2px 8px 2px 3px;
  border-radius: 20px;
  transition: background 0.15s ease;
  overflow: visible !important;
}

.post-author-chip:hover {
  background: rgba(0, 0, 0, 0.05);
}

.post-author-name {
  color: var(--ink);
}

.btn-author-follow {
  background: transparent;
  border: 1px solid var(--rule, #dcd2c4);
  border-radius: 12px;
  padding: 2px 9px;
  font-size: 11px;
  font-weight: 600;
  color: var(--ink-secondary);
  cursor: pointer;
  transition: all 0.15s ease;
  line-height: 1.4;
}

.btn-author-follow:hover {
  background: var(--crimson, #b8332a);
  color: #ffffff;
  border-color: var(--crimson, #b8332a);
}

.btn-author-follow.following {
  background: rgba(16, 185, 129, 0.1);
  color: #059669;
  border-color: rgba(16, 185, 129, 0.3);
}

.btn-author-follow.following:hover {
  background: rgba(220, 38, 38, 0.1);
  color: #dc2626;
  border-color: rgba(220, 38, 38, 0.3);
}

.post-headline {
  font-size: 1.02rem;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.35;
  margin: 0 0 6px 0;
  cursor: pointer;
  letter-spacing: -0.01em;
  transition: color 0.15s ease;
}

.post-headline:hover {
  color: var(--crimson, #b8332a);
}

.post-body-text {
  font-size: 13px;
  color: var(--ink-secondary);
  line-height: 1.52;
  margin-bottom: 10px;
}

/* ==========================================================================
   TRADE SETUP TICKET (5-Column Clean Layout with Live Outcome)
   ========================================================================== */
.post-setup-strip {
  background: #fbf9f5;
  border: 1px solid var(--rule, #e2d9cc);
  border-radius: 8px;
  padding: 9px 13px;
  margin: 9px 0 11px;
}

.setup-strip-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
  padding-bottom: 6px;
  border-bottom: 1px dashed var(--rule-light, #e7dfd3);
}

.setup-asset-name {
  font-family: var(--font-mono, monospace);
  font-weight: 700;
  font-size: 12px;
  color: var(--ink);
  letter-spacing: 0.02em;
}

.setup-dir-pill {
  font-size: 10px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 4px;
  text-transform: uppercase;
}

.setup-dir-pill.long {
  background: rgba(16, 185, 129, 0.12);
  color: #059669;
}

.setup-dir-pill.short {
  background: rgba(220, 38, 38, 0.12);
  color: #dc2626;
}

.setup-stats-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
  align-items: center;
}

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

.ss-col {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.ss-lbl {
  font-size: 9px;
  font-weight: 600;
  color: var(--ink-soft);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.ss-val {
  font-family: var(--font-mono, monospace);
  font-size: 11.5px;
  font-weight: 700;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

.ss-outcome-col {
  background: rgba(0, 0, 0, 0.02);
  padding: 3px 6px;
  border-radius: 6px;
  border: 1px solid rgba(0, 0, 0, 0.04);
}

.ss-outcome-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: var(--font-mono, monospace);
  font-size: 11px;
  font-weight: 700;
  padding: 1.5px 5px;
  border-radius: 4px;
}

.ss-outcome-badge.profit {
  background: rgba(16, 185, 129, 0.15);
  color: #059669;
}

.ss-outcome-badge.loss {
  background: rgba(220, 38, 38, 0.15);
  color: #dc2626;
}

.post-meta-dot {
  color: var(--ink-soft);
  font-size: 11px;
  user-select: none;
}

.post-timestamp-tag {
  font-size: 11px;
  color: var(--ink-soft);
  font-weight: 500;
}

/* ==========================================================================
   PREMIUM VIEWS BLOCK & TOP META (ALL PLATFORMS / SITE-WIDE)
   ========================================================================== */
.post-top-meta-right {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.post-top-views-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 25px;
  padding: 0 10px;
  background: var(--cream-2, rgba(0, 0, 0, 0.03));
  border: 1px solid var(--border-paper, rgba(0, 0, 0, 0.07));
  border-radius: 999px;
  font-family: var(--font-sans);
  font-size: 11.5px;
  font-weight: 600;
  color: var(--ink-secondary, #64748b);
  white-space: nowrap;
  user-select: none;
  transition: all 0.16s ease;
}

.post-top-views-badge .post-views-svg {
  display: inline-block;
  vertical-align: middle;
  stroke: currentColor;
  opacity: 0.8;
  flex-shrink: 0;
}

.post-top-views-badge .top-views-val {
  font-family: var(--font-mono, monospace);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--ink);
}

.post-top-views-badge:hover {
  background: rgba(184, 51, 42, 0.06);
  border-color: rgba(184, 51, 42, 0.25);
  color: var(--crimson, #b8332a);
}

.post-top-views-badge:hover .top-views-val {
  color: var(--crimson, #b8332a);
}

[data-theme="dark"] .post-top-views-badge {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.08);
  color: #94a3b8;
}

[data-theme="dark"] .post-top-views-badge .top-views-val {
  color: #f1f5f9;
}

[data-theme="dark"] .post-top-views-badge:hover {
  background: rgba(225, 29, 72, 0.1);
  border-color: rgba(225, 29, 72, 0.3);
  color: #fb7185;
}

[data-theme="dark"] .post-top-views-badge:hover .top-views-val {
  color: #fb7185;
}

/* Consistent Topic Badge Row (All Posts) */
.post-topic-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 1px;
  margin-bottom: 8px;
}

[data-theme="dark"] .post-tag:hover {
  filter: brightness(1.15);
}

[data-theme="dark"] .tag-setup {
  background: rgba(225, 29, 72, 0.12);
  color: #fb7185;
  border-color: rgba(225, 29, 72, 0.25);
}
[data-theme="dark"] .tag-setup .post-tag-dot {
  background-color: #fb7185;
  box-shadow: 0 0 6px rgba(251, 113, 133, 0.5);
}

[data-theme="dark"] .tag-alpha {
  background: rgba(139, 92, 246, 0.12);
  color: #c084fc;
  border-color: rgba(139, 92, 246, 0.25);
}
[data-theme="dark"] .tag-alpha .post-tag-dot {
  background-color: #c084fc;
  box-shadow: 0 0 6px rgba(192, 132, 252, 0.5);
}

[data-theme="dark"] .tag-gain {
  background: rgba(16, 185, 129, 0.12);
  color: #34d399;
  border-color: rgba(16, 185, 129, 0.25);
}
[data-theme="dark"] .tag-gain .post-tag-dot {
  background-color: #34d399;
  box-shadow: 0 0 6px rgba(52, 211, 153, 0.5);
}

[data-theme="dark"] .tag-paper {
  background: rgba(245, 158, 11, 0.12);
  color: #fbbf24;
  border-color: rgba(245, 158, 11, 0.25);
}
[data-theme="dark"] .tag-paper .post-tag-dot {
  background-color: #fbbf24;
  box-shadow: 0 0 6px rgba(251, 113, 133, 0.5);
}

[data-theme="dark"] .tag-general,
[data-theme="dark"] .tag-martingaler,
[data-theme="dark"] .tag-market {
  background: rgba(148, 163, 184, 0.1);
  color: #cbd5e1;
  border-color: rgba(148, 163, 184, 0.2);
}
[data-theme="dark"] .tag-general .post-tag-dot,
[data-theme="dark"] .tag-martingaler .post-tag-dot,
[data-theme="dark"] .tag-market .post-tag-dot {
  background-color: #94a3b8;
}

[data-theme="dark"] .tag-complains {
  background: rgba(239, 68, 68, 0.12);
  color: #f87171;
  border-color: rgba(239, 68, 68, 0.25);
}
[data-theme="dark"] .tag-complains .post-tag-dot {
  background-color: #f87171;
  box-shadow: 0 0 6px rgba(248, 113, 113, 0.5);
}

/* Mobile Alignment (<= 640px) */
@media (max-width: 640px) {
  .post-top-meta {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-wrap: nowrap !important;
    gap: 8px !important;
    margin-bottom: 8px !important;
    padding-top: 8px !important;
    width: 100% !important;
    overflow: visible !important;
  }

  .post-top-meta-left {
    display: inline-flex !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    gap: 6px !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    overflow: visible !important;
  }

  .post-author-chip {
    overflow: visible !important;
    min-width: 0 !important;
    padding-left: 2px !important;
  }

  .post-author-name {
    font-size: 12.5px !important;
    max-width: 120px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    display: inline-block !important;
    vertical-align: middle !important;
  }

  .post-top-meta-right {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    flex-shrink: 0 !important;
    margin-left: auto !important;
  }

  .post-top-views-badge {
    height: 23px !important;
    padding: 0 8px !important;
    font-size: 10.5px !important;
    gap: 4px !important;
    border-radius: 999px !important;
  }

  .post-top-views-badge .top-views-val {
    font-size: 10.5px !important;
  }

  .post-topic-row {
    margin-top: 2px !important;
    margin-bottom: 7px !important;
    overflow: visible !important;
  }

  .post-topic-row .post-tag {
    height: 20px !important;
    font-size: 10px !important;
    padding: 0 8px 0 7px !important;
    gap: 5px !important;
    border-radius: 999px !important;
  }

  .post-topic-row .post-tag .post-tag-dot {
    width: 5px !important;
    height: 5px !important;
  }

  .post-headline {
    margin-top: 3px !important;
    margin-bottom: 6px !important;
    font-size: 15px !important;
  }

  .community-post-card {
    padding: 13px 14px 14px 14px !important;
    overflow: visible !important;
  }
}

.post-menu-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.post-menu-btn {
  background: transparent;
  border: none;
  font-size: 14px;
  font-weight: 800;
  color: var(--ink-soft);
  cursor: pointer;
  padding: 2px 6px;
  line-height: 1;
  border-radius: 4px;
  letter-spacing: -0.5px;
  transition: all 0.15s ease;
}

.post-menu-btn:hover {
  background: rgba(0, 0, 0, 0.06);
  color: var(--ink);
}

.post-menu-dropdown {
  display: none;
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  background: var(--paper-warm, #faf7f2);
  border: 1px solid var(--rule, #dcd2c4);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  z-index: 100;
  min-width: 140px;
  padding: 4px;
}

.post-menu-dropdown.open {
  display: flex;
  flex-direction: column;
}

.post-menu-item {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--ink);
  background: transparent;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  text-align: left;
  width: 100%;
  transition: background 0.15s ease;
}

.post-menu-item:hover {
  background: rgba(0, 0, 0, 0.05);
}

.post-menu-item.text-crimson {
  color: var(--crimson, #b8332a);
}

.post-menu-item.text-crimson:hover {
  background: rgba(184, 51, 42, 0.08);
}

/* ==========================================================================
   POST ACTION BUTTONS & STREAMLINED FOOTER
   ========================================================================== */
.post-bottom-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px 8px;
  flex-wrap: wrap;
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--rule-light, #ede7dc);
}

.post-actions-left {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  flex-wrap: wrap;
  flex: 1 1 auto;
  min-width: 0;
}

.post-actions-right {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  flex-shrink: 0;
  margin-left: auto;
}

.boost-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: rgba(245, 158, 11, 0.07);
  border: 1px solid rgba(217, 119, 6, 0.24);
  border-radius: 14px;
  padding: 3px 8px;
  height: 28px;
  font-size: 11.5px;
  font-weight: 600;
  color: #92400e;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.18s cubic-bezier(0.16, 1, 0.3, 1);
}

.boost-pill:hover {
  background: rgba(245, 158, 11, 0.14);
  border-color: rgba(217, 119, 6, 0.45);
  color: #78350f;
  transform: translateY(-1px);
  box-shadow: 0 2px 6px rgba(217, 119, 6, 0.12);
}

.boost-pill:active {
  transform: scale(0.96);
}

.boost-pill .boost-icon {
  font-size: 12px;
  color: #d97706;
  filter: none;
  transition: transform 0.2s ease;
}

.boost-pill:hover .boost-icon {
  transform: scale(1.15);
}

.boost-pill .boost-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.boost-pill .boost-count {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 800;
  color: #78350f;
  background: rgba(217, 119, 6, 0.12);
  padding: 1px 5px;
  border-radius: 8px;
  margin-left: 1px;
}

/* ACTIVE BOOSTED STATE: Fully Color-Graded Velvet Amber-Gold with Zero Overexposure */
.boost-pill.boosted {
  background: linear-gradient(135deg, #d97706 0%, #b45309 100%) !important;
  border: 1px solid #92400e !important;
  color: #ffffff !important;
  box-shadow: 0 2px 6px rgba(180, 83, 9, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.28) !important;
}

.boost-pill.boosted:hover {
  background: linear-gradient(135deg, #b45309 0%, #92400e 100%) !important;
  border-color: #78350f !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 3px 10px rgba(180, 83, 9, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.35) !important;
}

.boost-pill.boosted .boost-icon {
  color: #fef08a !important;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.35)) !important;
}

.boost-pill.boosted .boost-label {
  color: #ffffff !important;
  font-weight: 700 !important;
  text-shadow: 0 1px 2px rgba(120, 53, 15, 0.35) !important;
}

.boost-pill.boosted .boost-count {
  background: rgba(0, 0, 0, 0.25) !important;
  color: #ffffff !important;
  padding: 1px 6px !important;
  border-radius: 8px !important;
  font-weight: 800 !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35) !important;
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.2) !important;
}

/* Dark Theme Support */
[data-theme="dark"] .boost-pill {
  background: rgba(245, 158, 11, 0.08);
  border-color: rgba(245, 158, 11, 0.22);
  color: #fbbf24;
}

[data-theme="dark"] .boost-pill:hover {
  background: rgba(245, 158, 11, 0.16);
  border-color: rgba(245, 158, 11, 0.4);
  color: #fef08a;
}

[data-theme="dark"] .boost-pill .boost-icon {
  color: #f59e0b;
}

[data-theme="dark"] .boost-pill .boost-count {
  color: #fbbf24;
  background: rgba(245, 158, 11, 0.15);
}

[data-theme="dark"] .boost-pill.boosted {
  background: linear-gradient(135deg, #b45309 0%, #78350f 100%) !important;
  border-color: #f59e0b !important;
  box-shadow: 0 0 12px rgba(245, 158, 11, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
}

[data-theme="dark"] .boost-pill.boosted .boost-count {
  background: rgba(0, 0, 0, 0.4) !important;
  color: #fef3c7 !important;
  border-color: rgba(251, 191, 36, 0.3) !important;
}

.action-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 6px;
  padding: 3px 7px;
  height: 28px;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--ink-secondary);
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.15s ease;
}

.action-btn:hover {
  background: rgba(0, 0, 0, 0.04);
  color: var(--ink);
}

.action-btn.comment-btn:hover,
.action-btn.comment-btn.active {
  background: rgba(184, 51, 42, 0.06);
  color: var(--crimson);
}

.copy-setup-btn {
  background: rgba(184, 51, 42, 0.08);
  color: var(--crimson, #b8332a);
  border: 1px solid rgba(184, 51, 42, 0.2);
  font-weight: 700;
  padding: 3px 8px;
  height: 28px;
}

.copy-setup-btn:hover {
  background: var(--crimson, #b8332a);
  color: #ffffff;
}

.direct-trade-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 700;
  color: var(--crimson, #b8332a);
  text-decoration: none;
  padding: 3px 9px;
  height: 28px;
  border-radius: 6px;
  background: rgba(184, 51, 42, 0.05);
  border: 1px solid rgba(184, 51, 42, 0.18);
  white-space: nowrap;
  transition: all 0.15s ease;
}

.direct-trade-link:hover {
  background: var(--crimson, #b8332a);
  color: #ffffff;
}

/* ==========================================================================
   TOP RIGHT PROFILE DROPDOWN MENU
   ========================================================================== */
.nav-profile-wrapper {
  position: relative;
  display: inline-block;
}

.nav-profile-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: 310px;
  background: var(--paper-warm, #faf7f2);
  border: 1px solid var(--rule, #dcd2c4);
  border-radius: 14px;
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.12), 0 2px 6px rgba(0, 0, 0, 0.04);
  z-index: 1200;
  overflow: hidden;
  animation: profileDropdownFade 0.15s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes profileDropdownFade {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.npd-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background: #f4ede2;
  border-bottom: 1px solid var(--rule-light, #e7dfd3);
}

.npd-avatar {
  width: auto;
  height: auto;
  border-radius: 0;
  background: transparent;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  flex-shrink: 0;
  overflow: visible;
}

.npd-user-info {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.npd-name-row {
  display: flex;
  align-items: center;
  gap: 6px;
}

.npd-name-row strong {
  font-size: 13px;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.badge-mini-verified {
  background: #10b981;
  color: #ffffff;
  border-radius: 50%;
  width: 14px;
  height: 14px;
  font-size: 9px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.npd-tier {
  font-size: 11px;
  color: var(--ink-soft);
}

.npd-metrics-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  padding: 10px 14px;
  background: var(--paper-warm, #faf7f2);
  border-bottom: 1px solid var(--rule-light, #e7dfd3);
  text-align: center;
}

.npd-metric {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.npd-m-val {
  font-family: var(--font-mono, monospace);
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
}

.npd-m-lbl {
  font-size: 10px;
  color: var(--ink-soft);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.npd-menu-list {
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.npd-menu-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  padding: 9px 12px;
  min-height: 40px;
  background: transparent;
  border: none;
  border-radius: 8px;
  text-align: left;
  cursor: pointer;
  transition: background 0.12s ease;
  font-family: inherit;
  box-sizing: border-box;
}

.npd-menu-item:hover {
  background: rgba(0, 0, 0, 0.05);
}

.npd-item-left {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  flex: 1;
}

.npd-icon {
  font-size: 15px;
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  text-align: center;
  line-height: 1;
}

.npd-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
  line-height: 1.2;
}

.npd-hint {
  font-size: 11px;
  font-weight: 500;
  color: var(--ink-soft);
  white-space: nowrap;
  flex-shrink: 0;
  text-align: right;
  margin-left: 8px;
  line-height: 1.2;
}

.npd-logout-hint {
  color: #dc2626 !important;
  opacity: 0.85;
}

.npd-divider {
  height: 1px;
  background: var(--rule-light, #e7dfd3);
  margin: 4px 6px;
}

.npd-logout-btn:hover {
  background: rgba(220, 38, 38, 0.08);
}

.npd-logout-btn .npd-label {
  color: #dc2626;
}

/* ==========================================================================
   BANNED ACCOUNT BANNER & BADGES
   ========================================================================== */
.account-banned-banner {
  background: #fee2e2;
  border-bottom: 2px solid #ef4444;
  color: #991b1b;
  padding: 12px 24px;
  font-size: 13px;
}

.account-banned-banner .abb-content {
  max-width: 1320px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 12px;
}

.account-banned-banner .abb-icon {
  font-size: 20px;
  flex-shrink: 0;
}

.badge-banned {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: rgba(220, 38, 38, 0.12);
  color: #dc2626;
  border: 1px solid rgba(220, 38, 38, 0.3);
  border-radius: 4px;
  padding: 2px 7px;
  font-size: 11px;
  font-weight: 700;
}

.badge-active {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: rgba(16, 185, 129, 0.12);
  color: #059669;
  border: 1px solid rgba(16, 185, 129, 0.3);
  border-radius: 4px;
  padding: 2px 7px;
  font-size: 11px;
  font-weight: 700;
}

/* ==========================================================================
   INSTITUTIONAL TRADER PROFILE MODAL
   ========================================================================== */
.tp-top-nav-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 18px;
  background: #1c1917;
  color: #faf7f2;
}

.tp-tn-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #e7dfd3;
}

.tp-tn-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #10b981;
}

/* Cover Banner Hero */
.tp-cover-banner {
  height: 150px;
  background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
  position: relative;
  overflow: visible;
}

.tp-banner-pattern {
  position: absolute;
  inset: 0;
  opacity: 0.14;
  background-image: radial-gradient(#ffffff 1px, transparent 1px);
  background-size: 16px 16px;
}

.tp-avatar-anchor {
  position: absolute;
  bottom: -40px;
  left: 28px;
  display: flex;
  align-items: flex-end;
  gap: 12px;
  z-index: 15;
  overflow: visible;
}

.tp-avatar-frame-wrap {
  position: relative;
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
  padding: 0 !important;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible !important;
  z-index: 15;
}

.tp-avatar-large {
  width: auto;
  height: auto;
  min-width: 80px;
  min-height: 80px;
  border-radius: 0;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 38px;
  overflow: visible !important;
  position: relative;
}

.tp-rank-pill-badge {
  background: #1c1917;
  color: #f59e0b;
  border: 1px solid rgba(245, 158, 11, 0.4);
  border-radius: 12px;
  padding: 3px 10px;
  font-size: 11px;
  font-weight: 700;
  margin-bottom: 8px;
  letter-spacing: 0.03em;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}

.tp-rank-pill-badge.rank-gold {
  background: linear-gradient(135deg, #78350f 0%, #1c1917 100%);
  color: #fef08a;
  border-color: #eab308;
  box-shadow: 0 0 10px rgba(234, 179, 8, 0.25);
}

.tp-rank-pill-badge.rank-silver {
  background: linear-gradient(135deg, #334155 0%, #0f172a 100%);
  color: #f1f5f9;
  border-color: #94a3b8;
}

.tp-rank-pill-badge.rank-bronze {
  background: linear-gradient(135deg, #451a03 0%, #1c1917 100%);
  color: #fed7aa;
  border-color: #f97316;
}

/* Profile Header Summary (Twitter-Inspired Structure Elevated with PaperTraders Credentials) */
.tp-hero-header {
  padding: 48px 28px 20px;
  border-bottom: 1px solid var(--rule-light, #e7dfd3);
  background: var(--paper-warm, #faf7f2);
}

[data-theme="dark"] .tp-hero-header {
  background: #181512;
  border-color: rgba(255, 255, 255, 0.08);
}

[data-theme="dark"] .tp-avatar-large {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

.tp-header-top-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  flex-wrap: wrap;
}

.tp-identity-cluster {
  flex-grow: 1;
}

.tp-hero-title-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 4px;
}

.tp-hero-handle {
  font-size: 1.55rem;
  font-weight: 800;
  color: var(--ink);
  letter-spacing: -0.02em;
  margin: 0;
}

.tp-verified-badge {
  background: rgba(16, 185, 129, 0.15);
  color: #059669;
  border: 1px solid rgba(16, 185, 129, 0.3);
  border-radius: 12px;
  padding: 2px 9px;
  font-size: 11px;
  font-weight: 700;
}

.tp-verified-badge.unverified {
  background: rgba(120, 113, 108, 0.12);
  color: var(--ink-soft);
  border-color: rgba(120, 113, 108, 0.25);
}

.tp-admin-badge {
  background: rgba(184, 51, 42, 0.12);
  color: var(--crimson, #b8332a);
  border: 1px solid rgba(184, 51, 42, 0.3);
  border-radius: 12px;
  padding: 2px 9px;
  font-size: 11px;
  font-weight: 700;
}

.tp-hero-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.tp-follow-cluster {
  display: flex;
  gap: 8px;
}

.tp-edit-profile-btn {
  font-weight: 700;
  border-radius: 20px;
  padding: 6px 14px;
  font-size: 12px;
  transition: all 0.15s ease;
}

.tp-edit-profile-btn:hover {
  background: var(--ink);
  color: var(--paper-warm);
}

.tp-hero-bio {
  font-size: 13.5px;
  color: var(--ink-secondary);
  line-height: 1.5;
  margin: 8px 0 14px;
  max-width: 820px;
}

/* Following & Followers Stats Strip (Twitter-Style, Unique Tactical Way) */
.tp-stats-strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 14px;
  padding: 10px 14px;
  background: rgba(0, 0, 0, 0.025);
  border: 1px solid var(--rule-light, #e7dfd3);
  border-radius: 10px;
}

[data-theme="dark"] .tp-stats-strip {
  background: rgba(255, 255, 255, 0.03);
  border-color: rgba(255, 255, 255, 0.08);
}

.tp-follow-counts {
  display: inline-flex;
  align-items: baseline;
  gap: 18px;
}

.tp-stat-pill {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  cursor: default;
}

.tp-stat-num {
  font-family: var(--font-mono, monospace);
  font-size: 15px;
  font-weight: 800;
  color: var(--ink);
}

.tp-stat-lbl {
  font-size: 12.5px;
  color: var(--ink-soft);
  font-weight: 500;
}

.tp-conviction-counts {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

.tp-metric-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  background: var(--cream-2, #faf6ee);
  border: 1px solid var(--rule-light, #e7dfd3);
  border-radius: 6px;
  padding: 3px 8px;
}

[data-theme="dark"] .tp-metric-pill {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.08);
}

.tp-mp-icon {
  font-size: 12px;
}

.tp-mp-num {
  font-family: var(--font-mono, monospace);
  font-weight: 800;
  font-size: 12.5px;
}

.tp-mp-lbl {
  color: var(--ink-soft);
  font-size: 11px;
  font-weight: 600;
}

/* Protocol Credentials Bar (Everything from previous Protocol Credentials sidebar) */
.tp-credentials-bar {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 10px;
}

.tp-cred-chip {
  background: var(--cream-2, #faf6ee);
  border: 1px solid var(--rule-light, #e7dfd3);
  border-radius: 10px;
  padding: 8px 12px;
  display: flex;
  align-items: center;
  gap: 10px;
  transition: all 0.15s ease;
}

[data-theme="dark"] .tp-cred-chip {
  background: rgba(255, 255, 255, 0.035);
  border-color: rgba(255, 255, 255, 0.08);
}

.tp-cc-icon {
  font-size: 18px;
  flex-shrink: 0;
}

.tp-cc-content {
  display: flex;
  flex-direction: column;
  min-width: 0;
  gap: 1px;
}

.tp-cc-title {
  font-size: 12px;
  font-weight: 700;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tp-cc-sub {
  font-size: 10.5px;
  color: var(--ink-soft);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tp-cc-label {
  font-size: 9.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ink-soft);
}

.tp-wallet-inline-row {
  display: flex;
  align-items: center;
  gap: 6px;
}

.tp-wallet-inline-row code {
  font-family: var(--font-mono, monospace);
  font-size: 11px;
  color: var(--ink);
  white-space: nowrap;
}

.btn-copy-mini {
  background: var(--paper-warm);
  border: 1px solid var(--rule);
  border-radius: 4px;
  padding: 2px 6px;
  font-size: 10px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.15s ease;
}

.btn-copy-mini:hover {
  background: var(--crimson);
  color: #fff;
  border-color: var(--crimson);
}

/* FULL-WIDTH Field for Posts / Comments / Overview */
.tp-fullwidth-container {
  padding: 20px 28px 36px;
  background: #f7f3eb;
  width: 100%;
  box-sizing: border-box;
}

[data-theme="dark"] .tp-fullwidth-container {
  background: #141210;
}

.tp-tab-nav {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
  border-bottom: 1px solid var(--rule, #dcd2c4);
  padding-bottom: 10px;
}

.tp-tab-btn {
  background: transparent;
  border: none;
  padding: 8px 16px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 700;
  color: var(--ink-secondary);
  cursor: pointer;
  transition: all 0.15s ease;
  font-family: inherit;
}

.tp-tab-btn:hover {
  background: rgba(0, 0, 0, 0.05);
  color: var(--ink);
}

.tp-tab-btn.active {
  background: var(--paper-warm, #faf7f2);
  color: var(--crimson, #b8332a);
  border: 1px solid var(--rule, #dcd2c4);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04);
}

[data-theme="dark"] .tp-tab-btn.active {
  background: #1e1b18;
  color: #ef4444;
  border-color: rgba(255, 255, 255, 0.12);
}

.tp-feed-stream {
  display: flex;
  flex-direction: column;
  gap: 14px;
  width: 100%;
}

/* Profile Comment Card item in Feed */
.tp-comment-card {
  background: var(--paper-warm, #faf7f2);
  border: 1px solid var(--rule-light, #e7dfd3);
  border-radius: 12px;
  padding: 14px 16px;
  margin-bottom: 12px;
}

[data-theme="dark"] .tp-comment-card {
  background: #1e1b18;
  border-color: rgba(255, 255, 255, 0.08);
}

.tp-comment-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 11.5px;
  color: var(--ink-soft);
  margin-bottom: 6px;
}

.tp-comment-post-link {
  font-weight: 700;
  color: var(--crimson, #b8332a);
  text-decoration: none;
}

.tp-comment-body {
  font-size: 13px;
  color: var(--ink);
  line-height: 1.5;
}

[data-theme="dark"] .tp-comment-body {
  color: #f1f5f9;
}

.tp-post-card {
  background: var(--paper-warm, #faf7f2);
  border: 1px solid var(--rule-light, #e7dfd3);
  border-radius: 12px;
  padding: 14px 16px;
  margin-bottom: 12px;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

[data-theme="dark"] .tp-post-card {
  background: #1e1b18;
  border-color: rgba(255, 255, 255, 0.08);
}

.tp-post-card:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.tp-post-card-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--ink);
  margin: 6px 0 8px;
  cursor: pointer;
  transition: color 0.15s ease;
}

[data-theme="dark"] .tp-post-card-title {
  color: #f8fafc;
}

.tp-post-card-title:hover {
  color: var(--crimson, #b8332a);
}

.tp-empty-feed {
  text-align: center;
  padding: 36px 16px;
  color: var(--ink-soft);
  font-size: 13px;
  background: var(--paper-warm, #faf7f2);
  border: 1px dashed var(--rule-light, #e7dfd3);
  border-radius: 12px;
}

[data-theme="dark"] .tp-empty-feed {
  background: #1e1b18;
  border-color: rgba(255, 255, 255, 0.08);
}

.row-banned-user {
  background: rgba(220, 38, 38, 0.04);
}

.row-banned-user td {
  opacity: 0.88;
}

/* ==========================================================================
   SYNTHETIC MARKETS OFFICIAL TABLE (Matching Image 5)
   ========================================================================== */
.sm-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 12px;
  width: 100%;
}

.sm-card-head .card-eyebrow {
  margin: 0 !important;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.05em;
  white-space: nowrap;
  line-height: 1.2;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.sm-card-head .card-eyebrow.crimson-label {
  color: var(--crimson);
}

.sm-card-head .sm-pair-sub {
  font-size: 8.5px;
  font-weight: 600;
  color: var(--ink-soft);
  letter-spacing: 0.02em;
}

.sm-oi-pill {
  font-family: var(--font-mono, monospace);
  font-size: 10.5px;
  font-weight: 700;
  color: #059669;
  background: rgba(16, 185, 129, 0.12);
  border: 1px solid rgba(16, 185, 129, 0.28);
  padding: 2px 7px;
  border-radius: 4px;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1.2;
  box-sizing: border-box;
}

.sm-oi-pill .slide-countdown-container {
  display: inline-flex;
  align-items: center;
  height: 1.25em;
  white-space: nowrap !important;
}

.sm-oi-pill .slide-countdown-item {
  white-space: nowrap !important;
}

.sm-positions-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}

.sm-positions-table th {
  text-align: right;
  font-size: 10.5px;
  font-weight: 700;
  color: var(--ink-soft);
  padding: 6px 8px;
  border-bottom: 1px solid var(--rule-light, #e7dfd3);
  letter-spacing: 0.04em;
  white-space: nowrap;
}

.sm-positions-table th:first-child {
  text-align: left;
}

.sm-positions-table td {
  padding: 8px 8px;
  text-align: right;
  font-family: var(--font-mono, monospace);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  border-bottom: 1px dashed rgba(0, 0, 0, 0.04);
  white-space: nowrap;
}

.sm-positions-table td:first-child {
  text-align: left;
  font-family: inherit;
  font-weight: 700;
  color: var(--ink);
}

.sm-positions-table tr.total-row td {
  font-weight: 800;
  border-top: 1px solid var(--rule, #dcd2c4);
  border-bottom: none;
  background: rgba(0, 0, 0, 0.015);
}

.text-long {
  color: #059669;
  font-weight: 600;
}

.text-short {
  color: #dc2626;
  font-weight: 600;
}

.text-net {
  color: #059669;
  font-weight: 700;
}

/* Live Activity Telemetry Card */
.la-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 4px;
}

.badge-live-stream {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 10.5px;
  font-weight: 700;
  color: #059669;
  background: rgba(16, 185, 129, 0.1);
  padding: 2px 7px;
  border-radius: 10px;
}

.la-desc-hint {
  font-size: 11px;
  color: var(--ink-soft);
  margin-bottom: 10px;
  line-height: 1.4;
}

.act-telemetry-row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 7px 0;
  border-bottom: 1px dashed var(--rule-light, #e7dfd3);
  font-size: 11.5px;
  animation: fadeIn 0.3s ease;
}

.act-telemetry-row:last-child {
  border-bottom: none;
}

.act-badge-dir {
  font-size: 9.5px;
  font-weight: 800;
  padding: 1px 5px;
  border-radius: 3px;
  text-transform: uppercase;
  flex-shrink: 0;
  margin-top: 2px;
}

.act-badge-dir.long {
  background: rgba(16, 185, 129, 0.15);
  color: #059669;
}

.act-badge-dir.short {
  background: rgba(220, 38, 38, 0.15);
  color: #dc2626;
}

.act-badge-dir.signal {
  background: rgba(245, 158, 11, 0.15);
  color: #b45309;
}

.act-badge-dir.setup {
  background: rgba(16, 185, 129, 0.15);
  color: #059669;
}

.act-badge-dir.post {
  background: rgba(37, 99, 235, 0.12);
  color: #2563eb;
}

.act-badge-dir.comment {
  background: rgba(124, 58, 237, 0.12);
  color: #7c3aed;
}

.act-badge-dir.register {
  background: rgba(13, 148, 136, 0.15);
  color: #0d9488;
}

.act-badge-dir.boost {
  background: rgba(217, 119, 6, 0.15);
  color: #d97706;
}

.act-badge-dir.prestige {
  background: rgba(220, 38, 38, 0.15);
  color: #dc2626;
}

.act-badge-dir.streak {
  background: rgba(234, 88, 12, 0.15);
  color: #ea580c;
}

.act-badge-dir.shield {
  background: rgba(16, 185, 129, 0.15);
  color: #059669;
}

.act-actor-handle {
  color: var(--ink, #1c1917);
  font-weight: 700;
  text-decoration: none;
}

.act-actor-handle:hover {
  color: var(--crimson, #b8332a);
}

.act-content-text {
  flex-grow: 1;
  color: var(--ink);
  line-height: 1.35;
}

.act-time-stamp {
  font-size: 10px;
  color: var(--ink-soft);
  white-space: nowrap;
  font-family: var(--font-mono, monospace);
}

/* ==========================================================================
   UNIQUE HANDLE ONBOARDING MODAL STYLES
   ========================================================================== */
.input-with-affix {
  display: flex;
  align-items: center;
  border: 1px solid var(--rule, #dcd2c4);
  border-radius: 8px;
  background: #ffffff;
  overflow: hidden;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.input-with-affix:focus-within {
  border-color: var(--crimson, #b8332a);
  box-shadow: 0 0 0 3px rgba(184, 51, 42, 0.12);
}

.input-prefix {
  padding: 0 10px;
  font-weight: 700;
  color: var(--ink-soft);
  background: #f8f6f0;
  border-right: 1px solid var(--rule-light, #e7dfd3);
}

.input-with-affix .form-input {
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}

.handle-feedback-valid {
  color: #059669;
  font-weight: 600;
}

.handle-feedback-invalid {
  color: #dc2626;
  font-weight: 600;
}

.handle-feedback-checking {
  color: var(--ink-soft);
  font-style: italic;
}

/* Admin search input */
.admin-users-pane-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.admin-search-input {
  background: #ffffff;
  border: 1px solid var(--rule, #dcd2c4);
  border-radius: 6px;
  padding: 6px 12px;
  font-size: 12px;
  color: var(--ink);
  width: 220px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.admin-search-input:focus {
  outline: none;
  border-color: var(--crimson);
  box-shadow: 0 0 0 2px rgba(163, 22, 33, 0.15);
}

.admin-toolbar-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.admin-filter-chips {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}

.admin-chip {
  background: var(--cream);
  border: 1px solid var(--border-paper);
  border-radius: 14px;
  padding: 3px 10px;
  font-size: 11px;
  font-weight: 600;
  color: var(--ink-secondary);
  cursor: pointer;
  transition: all 0.15s ease;
}

.admin-chip:hover {
  border-color: var(--ink);
  color: var(--ink);
}

.admin-chip.active {
  background: var(--crimson);
  border-color: var(--crimson);
  color: #ffffff;
  font-weight: 700;
}

.btn-gift-pts {
  background: linear-gradient(135deg, #f59e0b, #d97706);
  color: #ffffff !important;
  font-weight: 700;
  border: 1px solid rgba(254, 240, 138, 0.6);
  padding: 3px 8px;
  border-radius: 4px;
  cursor: pointer;
  box-shadow: 0 1px 3px rgba(217, 119, 6, 0.25);
  transition: all 0.15s ease;
}

.btn-gift-pts:hover {
  background: linear-gradient(135deg, #d97706, #b45309);
  transform: translateY(-1px);
}


/* ==========================================================================
   PRESTIGE AVATAR & ORNATE FRAME ACQUISITION ("GRAB NOW" & ADMIN CONTROLS)
   ========================================================================== */

/* "Grab Now" Button on Settings Cards */
.btn-grab-prestige {
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 50%, #b45309 100%);
  color: #ffffff !important;
  font-weight: 800;
  border: 1px solid #fef08a;
  border-radius: 8px;
  box-shadow: 0 3px 10px rgba(217, 119, 6, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.3);
  letter-spacing: 0.02em;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  cursor: pointer;
  padding: 5px 12px;
  font-size: 11.5px;
  margin-top: 4px;
}
.btn-grab-prestige:hover {
  transform: translateY(-1.5px);
  box-shadow: 0 6px 16px rgba(217, 119, 6, 0.45), 0 0 12px rgba(251, 191, 36, 0.4);
  background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 50%, #d97706 100%);
}

/* Grab Prestige Avatar Modal Styles */
.gam-showcase-box {
  background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
  border-radius: 12px;
  padding: 24px;
  display: flex;
  align-items: center;
  gap: 20px;
  color: #f8fafc;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
  margin-bottom: 16px;
  border: 1px solid rgba(255, 255, 255, 0.1);
}
.gam-avatar-preview-wrap {
  flex-shrink: 0;
}
.gam-details {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.gam-rank-badge {
  font-family: var(--font-mono, monospace);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  color: #f59e0b;
  letter-spacing: 0.05em;
}
.gam-title {
  font-size: 1.25rem;
  font-weight: 800;
  margin: 0;
  color: #ffffff;
}
.gam-sub {
  font-size: 12.5px;
  color: #94a3b8;
  margin: 0;
}

.gam-pitch-card {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  background: rgba(245, 158, 11, 0.08);
  border: 1px solid rgba(245, 158, 11, 0.25);
  border-radius: 10px;
  padding: 12px 14px;
  margin-bottom: 16px;
}
.gam-pitch-icon {
  font-size: 24px;
  flex-shrink: 0;
}
.gam-pitch-text strong {
  display: block;
  font-size: 13px;
  color: var(--ink);
  margin-bottom: 2px;
}
.gam-pitch-text p {
  font-size: 12px;
  color: var(--ink-secondary);
  line-height: 1.45;
  margin: 0;
}

.gam-channels-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
@media (max-width: 500px) {
  .gam-channels-grid {
    grid-template-columns: 1fr;
  }
}
.gam-channel-card {
  background: var(--cream-2, #faf6ee);
  border: 1px solid var(--rule-light, #e7dfd3);
  border-radius: 10px;
  padding: 12px;
  display: flex;
  align-items: center;
  gap: 10px;
  transition: all 0.15s ease;
  text-decoration: none;
  color: var(--ink);
}
.gam-channel-card:hover {
  background: var(--paper-warm, #faf7f2);
  border-color: var(--crimson);
  transform: translateY(-1.5px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}
.gcc-icon {
  font-size: 20px;
  flex-shrink: 0;
}
.gcc-info {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex-grow: 1;
}
.gcc-info strong {
  font-size: 12.5px;
  font-weight: 700;
}
.gcc-info span {
  font-size: 11px;
  color: var(--ink-soft);
}
.gcc-arrow {
  color: var(--ink-soft);
  font-weight: 700;
}

.gam-order-box {
  background: rgba(0, 0, 0, 0.025);
  border: 1px dashed var(--rule-light, #e7dfd3);
  border-radius: 8px;
  padding: 10px 12px;
}
.gam-copy-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.gam-copy-row code {
  font-family: var(--font-mono, monospace);
  font-size: 11px;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex-grow: 1;
}

/* Admin Assign Avatar Modal */
.aaa-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin: 14px 0;
}
@media (max-width: 520px) {
  .aaa-grid {
    grid-template-columns: 1fr;
  }
}
.aaa-card {
  border: 1.5px solid var(--border-paper);
  border-radius: 10px;
  padding: 12px;
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  background: var(--cream-2, #faf6ee);
  transition: all 0.15s ease;
}
.aaa-card:hover {
  border-color: var(--crimson);
  background: var(--paper-warm, #faf7f2);
}
.aaa-card.selected {
  border-color: var(--crimson);
  background: var(--paper-warm, #faf7f2);
  box-shadow: 0 0 0 2px var(--crimson);
}
.aaa-info strong {
  display: block;
  font-size: 12.5px;
  color: var(--ink);
}
.aaa-info span {
  font-size: 11px;
  color: var(--ink-soft);
}

/* ==========================================================================
   10 DECORATIVE PRESTIGE AVATAR FRAMES SYSTEM (Discord/Steam Style)
   ========================================================================== */

/* Cosmetics Nav Switcher in Trader Settings */
.settings-cosmetics-nav {
  display: flex;
  gap: 8px;
  margin-bottom: 14px;
  background: var(--cream-2, #faf6ee);
  padding: 4px;
  border-radius: 10px;
  border: 1px solid var(--rule-light, #e7dfd3);
}

.cosmetic-tab-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 8px 12px;
  font-size: 12px;
  font-weight: 700;
  color: var(--ink-soft);
  background: transparent;
  border: 1px solid transparent;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.cosmetic-tab-btn:hover {
  color: var(--ink);
  background: rgba(0, 0, 0, 0.03);
}

.cosmetic-tab-btn.active {
  color: var(--ink);
  background: var(--paper-warm, #ffffff);
  border-color: var(--rule-light, #e7dfd3);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
}

.cosmetic-count-pill {
  font-size: 10px;
  font-weight: 800;
  padding: 2px 6px;
  border-radius: 10px;
  background: var(--cream-2, #f3ede2);
  color: var(--ink-secondary);
}

.cosmetic-tab-btn.active .cosmetic-count-pill {
  background: rgba(184, 19, 45, 0.08);
  color: var(--crimson);
}

/* 10 Frames Grid Container in Settings */
.settings-frames-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
  margin-top: 12px;
}

@media (max-width: 768px) {
  .settings-frames-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }
}

.sfg-card {
  position: relative;
  background: var(--paper-warm, #ffffff);
  border: 1.5px solid var(--rule-light, #e7dfd3);
  border-radius: 12px;
  padding: 14px 16px;
  display: flex;
  gap: 16px;
  align-items: flex-start;
  transition: all 0.2s ease;
  overflow: visible;
}

.sfg-card:hover {
  border-color: var(--crimson, #b8132d);
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
}

.sfg-card.active-equipped {
  border-color: #10b981;
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.04) 0%, var(--paper-warm, #ffffff) 100%);
  box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.35);
}

.sfg-card.unlocked-owned {
  border-color: #3b82f6;
}

.sfg-preview-col {
  flex-shrink: 0;
  width: 68px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  padding-top: 4px;
}

.sfg-details-col {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.sfg-meta-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 2px;
  width: 100%;
}

.sfg-meta-left {
  display: flex;
  align-items: center;
  gap: 5px;
  flex-wrap: wrap;
}

.sfg-name {
  font-size: 13.5px;
  font-weight: 800;
  color: var(--ink);
  line-height: 1.25;
  margin: 1px 0;
  word-break: normal;
}

.sfg-rarity-badge {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.05em;
  padding: 2px 6px;
  border-radius: 4px;
  text-transform: uppercase;
  white-space: nowrap;
}

.rarity-degen { background: rgba(245, 158, 11, 0.15); color: #d97706; border: 1px solid rgba(245, 158, 11, 0.4); }
.rarity-mythic { background: rgba(234, 179, 8, 0.15); color: #ca8a04; border: 1px solid rgba(234, 179, 8, 0.4); }
.rarity-cyber { background: rgba(6, 182, 212, 0.15); color: #0891b2; border: 1px solid rgba(6, 182, 212, 0.4); }
.rarity-inferno { background: rgba(239, 68, 68, 0.15); color: #dc2626; border: 1px solid rgba(239, 68, 68, 0.4); }
.rarity-whale { background: rgba(14, 165, 233, 0.15); color: #0284c7; border: 1px solid rgba(14, 165, 233, 0.4); }
.rarity-divine { background: rgba(217, 119, 6, 0.15); color: #b45309; border: 1px solid rgba(251, 191, 36, 0.4); }
.rarity-diamond { background: rgba(168, 85, 247, 0.15); color: #9333ea; border: 1px solid rgba(168, 85, 247, 0.4); }
.rarity-arcade { background: rgba(236, 72, 153, 0.15); color: #db2777; border: 1px solid rgba(236, 72, 153, 0.4); }
.rarity-void { background: rgba(147, 51, 234, 0.15); color: #7e22ce; border: 1px solid rgba(147, 51, 234, 0.4); }
.rarity-origami { background: rgba(244, 114, 182, 0.15); color: #e11d48; border: 1px solid rgba(244, 114, 182, 0.4); }

.sfg-lore {
  font-size: 11px;
  color: var(--ink-soft);
  line-height: 1.35;
  margin: 2px 0 4px;
}

.sfg-ornaments-desc {
  font-size: 10px;
  font-family: var(--font-mono, monospace);
  color: var(--ink-secondary);
  background: var(--cream-2, #faf6ee);
  padding: 3px 6px;
  border-radius: 4px;
  border: 1px dashed var(--rule-light, #e7dfd3);
  margin-bottom: 6px;
}

.sfg-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
}

.sfg-actions .btn-grab-prestige,
.sfg-actions .btn-equipped,
.sfg-actions .btn {
  width: 100%;
  justify-content: center;
  text-align: center;
  box-sizing: border-box;
}

.btn-equipped {
  background: #10b981 !important;
  color: #ffffff !important;
  font-weight: 800;
  border: none;
  border-radius: 6px;
  padding: 5px 12px;
  font-size: 11px;
  cursor: default;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

/* ==========================================================================
   DECORATED AVATAR WRAPPER CORE (The Custom Discord-Style Frame)
   ========================================================================== */

.decorated-avatar-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  flex-shrink: 0;
  overflow: visible !important;
  user-select: none;
}

.dav-frame-ring {
  position: relative;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  box-sizing: border-box;
  overflow: visible !important;
}

/* Universal Frame Visibility & Truncation Shield */
.decorated-avatar-wrap,
.dav-frame-ring,
.dav-ornament-tl,
.dav-ornament-br,
.post-author-chip,
.post-author-emblem,
.comment-avatar-ring,
.comment-avatar-column,
.comment-avatar-emblem,
.composer-user-avatar,
.feed-share-emblem,
.podium-avatar,
.nav-origami-emblem,
.sidebar-origami-emblem,
.settings-hero-emblem {
  overflow: visible !important;
}

.dav-inner-avatar {
  position: relative;
  z-index: 2;
  border-radius: 50%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  background-color: #12141a;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.25);
  contain: paint layout;
}

.dav-inner-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  display: block;
  image-rendering: -webkit-optimize-contrast;
}

/* Top-Left Angled Badge Plaque */
.dav-ornament-tl {
  position: absolute;
  top: -6px;
  left: -8px;
  z-index: 6;
  white-space: nowrap;
  font-family: var(--font-mono, monospace);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 2.5px 6.5px;
  border-radius: 6px;
  transform: rotate(-10deg);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.45);
  pointer-events: none;
  display: flex;
  align-items: center;
  gap: 3px;
  line-height: 1.1;
  transition: transform 0.25s ease;
}

/* Bottom-Right Overlapping Element (Bursting out of the frame edge) */
.dav-ornament-br {
  position: absolute;
  bottom: -6px;
  right: -8px;
  z-index: 7;
  font-size: 22px;
  line-height: 1;
  transform: rotate(8deg);
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.45));
  pointer-events: none;
  transition: transform 0.25s ease;
}

.decorated-avatar-wrap:hover .dav-ornament-br {
  transform: rotate(14deg) scale(1.15);
}

.decorated-avatar-wrap:hover .dav-ornament-tl {
  transform: rotate(-6deg) scale(1.06);
}

/* No Frame (Default Clean Avatar) */
.decorated-avatar-wrap.frame-none,
.frame-none {
  margin: 0 !important;
}
.decorated-avatar-wrap.frame-none .dav-frame-ring,
.frame-none .dav-frame-ring,
.dav-ring-none {
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
  border-width: 0 !important;
  box-shadow: none !important;
  animation: none !important;
}
.decorated-avatar-wrap.frame-none .dav-ornament-tl,
.decorated-avatar-wrap.frame-none .dav-ornament-br,
.frame-none .dav-ornament-tl,
.frame-none .dav-ornament-br {
  display: none !important;
}

/* Sizes Modifiers */
.dav-size-xl {
  margin: 6px 12px;
}
.dav-size-xl .dav-frame-ring {
  padding: 6px !important;
  border-width: 3px !important;
}
.dav-size-xl .dav-ornament-tl {
  display: flex !important;
  top: -10px;
  left: -12px;
  font-size: 12px;
  padding: 4px 10px;
  border-radius: 8px;
}
.dav-size-xl .dav-ornament-br {
  display: block !important;
  bottom: -10px;
  right: -12px;
  font-size: 36px;
}

.dav-size-lg {
  margin: 5px 10px;
}
.dav-size-lg .dav-frame-ring {
  padding: 4.5px !important;
  border-width: 2.5px !important;
}
.dav-size-lg .dav-ornament-tl {
  display: flex !important;
  top: -8px;
  left: -10px;
  font-size: 10.5px;
  padding: 3.5px 8px;
  border-radius: 7px;
}
.dav-size-lg .dav-ornament-br {
  display: block !important;
  bottom: -8px;
  right: -10px;
  font-size: 28px;
}

.dav-size-md {
  margin: 4px 8px;
}
.dav-size-md .dav-frame-ring {
  padding: 3.5px !important;
  border-width: 2px !important;
}
.dav-size-md .dav-ornament-tl {
  display: flex !important;
  top: -6px;
  left: -8px;
  font-size: 9px;
  padding: 2px 6px;
  border-radius: 5px;
}
.dav-size-md .dav-ornament-br {
  display: block !important;
  bottom: -6px;
  right: -8px;
  font-size: 20px;
}

.dav-size-sm {
  margin: 4px 7px;
}
.dav-size-sm .dav-frame-ring {
  padding: 2.5px !important;
  border-width: 1.5px !important;
}
.dav-size-sm .dav-ornament-tl {
  display: flex !important;
  font-size: 7px;
  padding: 1.5px 4px;
  top: -5px;
  left: -5px;
  border-radius: 4px;
  letter-spacing: 0.02em;
  transform: rotate(-10deg);
  line-height: 1.05;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.45);
}
.dav-size-sm .dav-ornament-br {
  display: block !important;
  font-size: 14px;
  bottom: -4px;
  right: -5px;
  transform: rotate(8deg);
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.5));
}

.dav-size-xs {
  margin: 2px 5px;
}
.dav-size-xs .dav-frame-ring {
  padding: 1.5px !important;
  border-width: 1px !important;
}
.dav-size-xs .dav-ornament-tl {
  display: flex !important;
  font-size: 5.5px;
  padding: 1px 3px;
  top: -4px;
  left: -4px;
  border-radius: 3px;
  letter-spacing: 0;
  transform: rotate(-10deg);
  line-height: 1;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.45);
}
.dav-size-xs .dav-ornament-br {
  display: block !important;
  font-size: 11px;
  bottom: -3px;
  right: -4px;
  transform: rotate(8deg);
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.5));
}

/* ==========================================================================
   THE 10 CUSTOM PRESTIGE FRAME THEMES
   ========================================================================== */

/* 1. FRAME-DEGEN-PIZZA (Degen Pizza Party - User Uploaded Style) */
.frame-degen-pizza .dav-frame-ring {
  padding: 5px;
  background: linear-gradient(135deg, #ff7a18 0%, #78350f 25%, #fbbf24 50%, #991b1b 75%, #ff7a18 100%);
  border: 2px solid #ffcc00;
  box-shadow: 0 8px 24px rgba(255, 122, 24, 0.4), 0 0 16px rgba(251, 191, 36, 0.5), inset 0 0 8px rgba(180, 83, 9, 0.5);
  animation: degenPizzaGlow 3s infinite alternate ease-in-out;
}
.frame-degen-pizza .dav-ornament-tl {
  background: linear-gradient(135deg, #451a03 0%, #1f0802 100%);
  border: 1.5px solid #f59e0b;
  color: #fef08a;
  box-shadow: 0 4px 12px rgba(245, 158, 11, 0.4);
}
.frame-degen-pizza .dav-ornament-br {
  filter: drop-shadow(0 4px 8px rgba(255, 122, 24, 0.6));
}
@keyframes degenPizzaGlow {
  0% { box-shadow: 0 8px 24px rgba(255, 122, 24, 0.4), 0 0 14px rgba(251, 191, 36, 0.4); }
  100% { box-shadow: 0 10px 30px rgba(255, 122, 24, 0.6), 0 0 22px rgba(255, 204, 0, 0.7); }
}

/* 2. FRAME-GOLDEN-LAUREL (Imperial 24K Caesar) */
.frame-golden-laurel .dav-frame-ring {
  padding: 5.5px;
  background: linear-gradient(135deg, #fffbeb 0%, #fef08a 12%, #eab308 28%, #78350f 45%, #ca8a04 62%, #fef08a 80%, #d97706 100%);
  border: 2px solid #fef08a;
  box-shadow: 0 10px 28px rgba(234, 179, 8, 0.5), 0 0 24px rgba(254, 240, 138, 0.65);
  animation: imperialGoldShine 3.5s infinite ease-in-out;
}
.frame-golden-laurel .dav-ornament-tl {
  background: linear-gradient(135deg, #78350f 0%, #3a1502 100%);
  border: 1.5px solid #fde047;
  color: #fef08a;
  box-shadow: 0 4px 12px rgba(234, 179, 8, 0.5);
}
@keyframes imperialGoldShine {
  0%, 100% { box-shadow: 0 10px 28px rgba(234, 179, 8, 0.5), 0 0 20px rgba(254, 240, 138, 0.6); }
  50% { box-shadow: 0 12px 34px rgba(234, 179, 8, 0.7), 0 0 32px rgba(254, 240, 138, 0.9); }
}

/* 3. FRAME-CYBER-GLITCH (Cyber Matrix Glitch) */
.frame-cyber-glitch .dav-frame-ring {
  padding: 5px;
  background: linear-gradient(135deg, #00f5ff 0%, #001f3f 25%, #00ff88 50%, #0a0a23 75%, #00f5ff 100%);
  border: 2px solid #00f5ff;
  box-shadow: 0 0 22px rgba(0, 245, 255, 0.6), 0 0 30px rgba(0, 255, 136, 0.4);
  animation: cyberGlitchPulse 2.8s infinite alternate ease-in-out;
}
.frame-cyber-glitch .dav-ornament-tl {
  background: #031b26;
  border: 1.5px solid #00f5ff;
  color: #00f5ff;
  text-shadow: 0 0 6px rgba(0, 245, 255, 0.8);
  box-shadow: 0 4px 12px rgba(0, 245, 255, 0.4);
}
@keyframes cyberGlitchPulse {
  0% { box-shadow: 0 0 20px rgba(0, 245, 255, 0.5), 0 0 25px rgba(0, 255, 136, 0.3); }
  100% { box-shadow: 0 0 28px rgba(0, 245, 255, 0.8), 0 0 40px rgba(0, 255, 136, 0.6); }
}

/* 4. FRAME-CRIMSON-INFERNO (Infernal Magma Dragon) */
.frame-crimson-inferno .dav-frame-ring {
  padding: 5px;
  background: linear-gradient(135deg, #ff1a40 0%, #450a0a 25%, #ff6b00 50%, #7f1d1d 75%, #ff1a40 100%);
  border: 2px solid #ff4d4d;
  box-shadow: 0 10px 28px rgba(255, 26, 64, 0.55), 0 0 24px rgba(255, 107, 0, 0.5);
  animation: magmaEmberPulse 3.2s infinite alternate ease-in-out;
}
.frame-crimson-inferno .dav-ornament-tl {
  background: #2a0505;
  border: 1.5px solid #ff4d4d;
  color: #fca5a5;
  box-shadow: 0 4px 12px rgba(255, 26, 64, 0.45);
}
@keyframes magmaEmberPulse {
  0% { box-shadow: 0 10px 24px rgba(255, 26, 64, 0.5), 0 0 20px rgba(255, 107, 0, 0.4); }
  100% { box-shadow: 0 12px 34px rgba(255, 26, 64, 0.75), 0 0 32px rgba(255, 107, 0, 0.7); }
}

/* 5. FRAME-SOVEREIGN-WHALE (Abyssal Titan Whale) */
.frame-sovereign-whale .dav-frame-ring {
  padding: 5px;
  background: linear-gradient(135deg, #00b4d8 0%, #03045e 30%, #90e0ef 55%, #0077b6 80%, #00b4d8 100%);
  border: 2px solid #90e0ef;
  box-shadow: 0 10px 28px rgba(0, 180, 216, 0.55), 0 0 24px rgba(144, 224, 239, 0.5);
  animation: titanAbyssWave 3.5s infinite alternate ease-in-out;
}
.frame-sovereign-whale .dav-ornament-tl {
  background: #021a36;
  border: 1.5px solid #00b4d8;
  color: #caf0f8;
  box-shadow: 0 4px 12px rgba(0, 180, 216, 0.45);
}
@keyframes titanAbyssWave {
  0% { box-shadow: 0 10px 24px rgba(0, 180, 216, 0.5), 0 0 20px rgba(144, 224, 239, 0.4); }
  100% { box-shadow: 0 12px 34px rgba(0, 180, 216, 0.75), 0 0 32px rgba(144, 224, 239, 0.7); }
}

/* 6. FRAME-CELESTIAL-HALO (Celestial Archangel) */
.frame-celestial-halo .dav-frame-ring {
  padding: 5px;
  background: linear-gradient(135deg, #fffbe6 0%, #d4af37 25%, #ffffff 50%, #fef08a 75%, #ffffff 100%);
  border: 2px solid #fff5c0;
  box-shadow: 0 10px 30px rgba(255, 215, 0, 0.5), 0 0 26px rgba(255, 255, 255, 0.7);
  animation: celestialAura 4s infinite alternate ease-in-out;
}
.frame-celestial-halo .dav-ornament-tl {
  background: #2e2612;
  border: 1.5px solid #fef08a;
  color: #fef9c3;
  box-shadow: 0 4px 12px rgba(255, 215, 0, 0.45);
}
@keyframes celestialAura {
  0% { box-shadow: 0 10px 26px rgba(255, 215, 0, 0.45), 0 0 22px rgba(255, 255, 255, 0.6); }
  100% { box-shadow: 0 12px 36px rgba(255, 215, 0, 0.7), 0 0 34px rgba(255, 255, 255, 0.85); }
}

/* 7. FRAME-DIAMOND-HANDS (Prismatic Diamond Hands) */
.frame-diamond-hands .dav-frame-ring {
  padding: 5px;
  background: linear-gradient(135deg, #a18cd1 0%, #fbc2eb 25%, #8fd3f4 50%, #84fab0 75%, #a18cd1 100%);
  border: 2px solid #ffffff;
  box-shadow: 0 10px 28px rgba(161, 140, 209, 0.5), 0 0 24px rgba(132, 250, 176, 0.55);
  animation: prismaticShimmer 3s infinite linear;
}
.frame-diamond-hands .dav-ornament-tl {
  background: #1e1b4b;
  border: 1.5px solid #a5b4fc;
  color: #e0e7ff;
  box-shadow: 0 4px 12px rgba(161, 140, 209, 0.45);
}
@keyframes prismaticShimmer {
  0% { filter: hue-rotate(0deg); }
  100% { filter: hue-rotate(360deg); }
}

/* 8. FRAME-ARCADE-RETRO (8-Bit Pixel Arcade - $80) */
.frame-arcade-retro .dav-frame-ring {
  padding: 5px;
  background: linear-gradient(135deg, #ff007f 0%, #2e0854 25%, #00f0ff 50%, #ffe600 75%, #ff007f 100%);
  border: 2px dashed #00f0ff;
  box-shadow: 0 0 20px rgba(255, 0, 127, 0.65), 0 0 30px rgba(0, 240, 255, 0.6), inset 0 0 8px rgba(255, 230, 0, 0.5);
  animation: arcadeNeonVortex 2.5s infinite linear, arcadeBorderStrobe 1.2s infinite alternate ease-in-out;
  position: relative;
}
.frame-arcade-retro .dav-frame-ring::before {
  content: '';
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  background: conic-gradient(from 0deg, #ff007f 0%, #00f0ff 25%, #ffe600 50%, #7928ca 75%, #ff007f 100%);
  z-index: 0;
  pointer-events: none;
  opacity: 0.85;
  filter: blur(2px);
  animation: arcadeConicLaser 2.2s infinite linear;
}
.frame-arcade-retro .dav-ornament-tl {
  background: #2b0036;
  border: 1.5px solid #ff007f;
  color: #ffe600;
  box-shadow: 0 0 12px rgba(255, 0, 127, 0.6);
  animation: arcadeBadgePulse 1.2s infinite alternate ease-in-out;
}
.frame-arcade-retro .dav-ornament-br {
  animation: arcadeStickNudge 1.6s infinite ease-in-out;
}
@keyframes arcadeNeonVortex {
  0% { filter: hue-rotate(0deg); }
  100% { filter: hue-rotate(360deg); }
}
@keyframes arcadeConicLaser {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
@keyframes arcadeBorderStrobe {
  0% {
    border-color: #00f0ff;
    box-shadow: 0 0 16px rgba(255, 0, 127, 0.6), 0 0 24px rgba(0, 240, 255, 0.55), inset 0 0 6px rgba(255, 230, 0, 0.5);
  }
  100% {
    border-color: #ffe600;
    box-shadow: 0 0 24px rgba(0, 240, 255, 0.8), 0 0 34px rgba(255, 0, 127, 0.7), inset 0 0 10px rgba(0, 240, 255, 0.7);
  }
}
@keyframes arcadeBadgePulse {
  0% { transform: rotate(-10deg) scale(1); filter: drop-shadow(0 0 4px #00f0ff); }
  100% { transform: rotate(-8deg) scale(1.05); filter: drop-shadow(0 0 10px #ff007f); }
}
@keyframes arcadeStickNudge {
  0%, 100% { transform: rotate(8deg); }
  50% { transform: rotate(20deg) scale(1.12); }
}

/* 9. FRAME-VOID-REAPER (Void Reaper Phantom - $90) */
.frame-void-reaper .dav-frame-ring {
  padding: 5px;
  background: linear-gradient(135deg, #7928ca 0%, #0b0217 25%, #a855f7 50%, #020108 75%, #c084fc 100%);
  border: 2px solid #c084fc;
  box-shadow: 0 0 22px rgba(121, 40, 202, 0.75), 0 0 36px rgba(168, 85, 247, 0.6), inset 0 0 10px rgba(192, 132, 252, 0.6);
  animation: voidSpectralCycle 3s infinite linear, voidEventHorizonPulse 2.4s infinite alternate ease-in-out;
  position: relative;
}
.frame-void-reaper .dav-frame-ring::before {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  background: conic-gradient(from 0deg, #7928ca 0%, #020108 20%, #c084fc 40%, #150624 60%, #e9d5ff 75%, #7928ca 100%);
  z-index: 0;
  pointer-events: none;
  opacity: 0.9;
  filter: blur(3px);
  animation: voidSingularitySpin 3s infinite linear;
}
.frame-void-reaper .dav-ornament-tl {
  background: #150624;
  border: 1.5px solid #a855f7;
  color: #f3e8ff;
  box-shadow: 0 0 14px rgba(168, 85, 247, 0.65);
  animation: reaperSoulPulse 1.8s infinite alternate ease-in-out;
}
.frame-void-reaper .dav-ornament-br {
  animation: scytheEtherealReap 2.4s infinite ease-in-out;
}
@keyframes voidSingularitySpin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
@keyframes voidSpectralCycle {
  0% { filter: hue-rotate(0deg); }
  50% { filter: hue-rotate(180deg) brightness(1.2); }
  100% { filter: hue-rotate(360deg); }
}
@keyframes voidEventHorizonPulse {
  0% {
    box-shadow: 0 0 18px rgba(121, 40, 202, 0.7), 0 0 30px rgba(168, 85, 247, 0.5), inset 0 0 8px rgba(192, 132, 252, 0.5);
  }
  100% {
    box-shadow: 0 0 32px rgba(168, 85, 247, 0.95), 0 0 55px rgba(121, 40, 202, 0.8), inset 0 0 16px rgba(243, 232, 255, 0.85);
  }
}
@keyframes reaperSoulPulse {
  0% { text-shadow: 0 0 6px #a855f7; transform: rotate(-10deg) scale(1); }
  100% { text-shadow: 0 0 14px #e9d5ff, 0 0 24px #9333ea; transform: rotate(-7deg) scale(1.07); }
}
@keyframes scytheEtherealReap {
  0%, 100% {
    transform: rotate(8deg) translateY(0);
    filter: drop-shadow(0 2px 8px rgba(168, 85, 247, 0.8));
  }
  50% {
    transform: rotate(18deg) translateY(-3px) scale(1.15);
    filter: drop-shadow(0 4px 18px rgba(192, 132, 252, 1)) drop-shadow(0 0 10px rgba(255, 255, 255, 0.6));
  }
}

/* 10. FRAME-ORIGAMI-MASTER (Royal Origami Lotus - $100 Crown Jewel) */
.frame-origami-master .dav-frame-ring {
  padding: 5px;
  background: linear-gradient(135deg, #ffd700 0%, #f472b6 22%, #ffffff 42%, #fda4af 62%, #ffd700 82%, #f472b6 100%);
  border: 2px solid #fffdf0;
  box-shadow: 0 0 25px rgba(255, 215, 0, 0.8), 0 0 45px rgba(244, 114, 182, 0.7), inset 0 0 10px rgba(255, 255, 255, 0.8);
  animation: royalLotusAuraCycle 3.5s infinite linear, royalLotusImperialRadiance 2.2s infinite alternate ease-in-out;
  position: relative;
}
.frame-origami-master .dav-frame-ring::before {
  content: '';
  position: absolute;
  inset: -5px;
  border-radius: 50%;
  background: conic-gradient(from 0deg, #ffd700 0%, #f472b6 18%, #ffffff 35%, #fb7185 52%, #ffd700 70%, #f472b6 85%, #ffd700 100%);
  z-index: 0;
  pointer-events: none;
  opacity: 0.95;
  filter: blur(3.5px);
  animation: royalLotusCoronaSpin 4s infinite linear;
}
.frame-origami-master .dav-frame-ring::after {
  content: '';
  position: absolute;
  inset: -1.5px;
  border-radius: 50%;
  background: conic-gradient(from 180deg, transparent 0%, rgba(255, 255, 255, 0.9) 12%, rgba(255, 215, 0, 0.7) 22%, transparent 35%);
  z-index: 1;
  pointer-events: none;
  animation: royalSheenSweepCounter 2.5s infinite linear;
}
.frame-origami-master .dav-ornament-tl {
  background: linear-gradient(135deg, #3d081b 0%, #1a040b 100%);
  border: 1.5px solid #ffd700;
  color: #fff1f2;
  box-shadow: 0 0 16px rgba(255, 215, 0, 0.7), 0 0 8px rgba(244, 114, 182, 0.5);
  animation: royalOrigamiBadgeShine 2s infinite alternate ease-in-out;
}
.frame-origami-master .dav-ornament-br {
  animation: lotusSacredBloom 3s infinite ease-in-out;
}
@keyframes royalLotusCoronaSpin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
@keyframes royalSheenSweepCounter {
  0% { transform: rotate(360deg); }
  100% { transform: rotate(0deg); }
}
@keyframes royalLotusAuraCycle {
  0% { filter: hue-rotate(0deg); }
  100% { filter: hue-rotate(360deg); }
}
@keyframes royalLotusImperialRadiance {
  0% {
    box-shadow: 0 0 20px rgba(255, 215, 0, 0.7), 0 0 35px rgba(244, 114, 182, 0.6), inset 0 0 8px rgba(255, 255, 255, 0.8);
  }
  100% {
    box-shadow: 0 0 36px rgba(255, 215, 0, 0.95), 0 0 60px rgba(244, 114, 182, 0.85), inset 0 0 16px rgba(255, 255, 255, 1);
  }
}
@keyframes royalOrigamiBadgeShine {
  0% {
    text-shadow: 0 0 6px #ffd700;
    transform: rotate(-10deg) scale(1);
    box-shadow: 0 0 12px rgba(255, 215, 0, 0.6);
  }
  100% {
    text-shadow: 0 0 14px #ffffff, 0 0 22px #ffd700;
    transform: rotate(-8deg) scale(1.06);
    box-shadow: 0 0 20px rgba(255, 215, 0, 0.9), 0 0 10px rgba(244, 114, 182, 0.7);
  }
}
@keyframes lotusSacredBloom {
  0%, 100% {
    transform: rotate(8deg) scale(1);
    filter: drop-shadow(0 2px 10px rgba(255, 215, 0, 0.85)) drop-shadow(0 0 14px rgba(244, 114, 182, 0.65));
  }
  50% {
    transform: rotate(15deg) scale(1.2);
    filter: drop-shadow(0 4px 20px rgba(255, 215, 0, 1)) drop-shadow(0 0 28px rgba(255, 255, 255, 0.95));
  }
}

/* Size Modifiers for Dynamic Circular Auras */
.dav-size-xs .frame-arcade-retro .dav-frame-ring::before,
.frame-arcade-retro.dav-size-xs .dav-frame-ring::before {
  inset: -1.5px;
  filter: blur(1px);
}
.dav-size-xs .frame-void-reaper .dav-frame-ring::before,
.frame-void-reaper.dav-size-xs .dav-frame-ring::before {
  inset: -1.5px;
  filter: blur(1.5px);
}
.dav-size-xs .frame-origami-master .dav-frame-ring::before,
.frame-origami-master.dav-size-xs .dav-frame-ring::before {
  inset: -2px;
  filter: blur(1.5px);
}
.dav-size-xs .frame-origami-master .dav-frame-ring::after,
.frame-origami-master.dav-size-xs .dav-frame-ring::after {
  inset: -1px;
}

.dav-size-sm .frame-arcade-retro .dav-frame-ring::before,
.frame-arcade-retro.dav-size-sm .dav-frame-ring::before {
  inset: -2px;
}
.dav-size-sm .frame-void-reaper .dav-frame-ring::before,
.frame-void-reaper.dav-size-sm .dav-frame-ring::before {
  inset: -2.5px;
}
.dav-size-sm .frame-origami-master .dav-frame-ring::before,
.frame-origami-master.dav-size-sm .dav-frame-ring::before {
  inset: -3px;
}

.dav-size-xl .frame-arcade-retro .dav-frame-ring::before,
.frame-arcade-retro.dav-size-xl .dav-frame-ring::before {
  inset: -4.5px;
  filter: blur(3px);
}
.dav-size-xl .frame-void-reaper .dav-frame-ring::before,
.frame-void-reaper.dav-size-xl .dav-frame-ring::before {
  inset: -6px;
  filter: blur(4.5px);
}
.dav-size-xl .frame-origami-master .dav-frame-ring::before,
.frame-origami-master.dav-size-xl .dav-frame-ring::before {
  inset: -7px;
  filter: blur(5px);
}
.dav-size-xl .frame-origami-master .dav-frame-ring::after,
.frame-origami-master.dav-size-xl .dav-frame-ring::after {
  inset: -2.5px;
}

/* Grab Prestige Frame Modal Styles */
.gfm-showcase-box {
  background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
  border-radius: 12px;
  padding: 28px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: visible;
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: inset 0 2px 10px rgba(0, 0, 0, 0.4);
  margin-bottom: 20px;
}

.gfm-preview-center {
  margin-bottom: 16px;
  position: relative;
}

.gfm-info-row {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.gfm-title {
  color: #ffffff;
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -0.01em;
}

.gfm-desc {
  color: #94a3b8;
  font-size: 12.5px;
  max-width: 380px;
  line-height: 1.45;
}

.gfm-founder-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(245, 158, 11, 0.15);
  border: 1px solid rgba(245, 158, 11, 0.4);
  color: #fbbf24;
  padding: 4px 10px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 700;
  margin-top: 4px;
}

.gfm-channels-grid {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 16px;
}

.gfm-channel-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  background: var(--cream-2, #faf6ee);
  border: 1.5px solid var(--rule-light, #e7dfd3);
  border-radius: 10px;
  text-decoration: none;
  color: var(--ink);
  transition: all 0.15s ease;
}

.gfm-channel-card:hover {
  border-color: var(--crimson);
  background: var(--paper-warm, #ffffff);
  transform: translateX(3px);
}

.gfm-channel-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.gfm-channel-icon {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: var(--paper-warm, #ffffff);
  border: 1px solid var(--rule-light, #e7dfd3);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  flex-shrink: 0;
}

.gfm-channel-meta strong {
  display: block;
  font-size: 13px;
  color: var(--ink);
}

.gfm-channel-meta span {
  font-size: 11px;
  color: var(--ink-soft);
}

.gfm-channel-action {
  font-size: 11px;
  font-weight: 700;
  color: var(--crimson);
  display: flex;
  align-items: center;
  gap: 4px;
}

/* ==========================================================================
   DEDICATED SINGLE POST VIEW & COMMENT PAGINATION (200 INITIAL + 50 REVEAL)
   ========================================================================== */
.single-post-page-view {
  display: flex;
  flex-direction: column;
  gap: 16px;
  animation: fadeIn 0.2s ease-out;
}

.spv-sticky-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 18px;
  background: var(--cream-card, #ffffff);
  border: 1.5px solid var(--border-paper, #e7dfd3);
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
  position: sticky;
  top: 60px;
  z-index: 20;
}

.spv-back-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  background: var(--cream-2, #faf6ee);
  border: 1px solid var(--rule-light, #e7dfd3);
  border-radius: 8px;
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
  cursor: pointer;
  transition: all 0.15s ease;
}

.spv-back-btn:hover {
  background: var(--crimson, #b8132d);
  color: #ffffff;
  border-color: var(--crimson, #b8132d);
  transform: translateX(-3px);
}

.spv-back-arrow {
  font-size: 16px;
  line-height: 1;
}

.spv-header-meta {
  display: flex;
  align-items: center;
  gap: 8px;
}

.spv-meta-tag {
  font-size: 11.5px;
  font-family: var(--font-mono, monospace);
  font-weight: 700;
  color: var(--crimson, #b8132d);
  background: rgba(184, 19, 45, 0.08);
  border: 1px solid rgba(184, 19, 45, 0.2);
  padding: 4px 10px;
  border-radius: 20px;
}

.spv-post-container {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.spv-comments-section {
  background: var(--cream-card, #ffffff);
  border: 1.5px solid var(--border-paper, #e7dfd3);
  border-radius: 14px;
  padding: 24px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);
}

.spv-comments-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
  padding-bottom: 14px;
  border-bottom: 1.5px solid var(--rule-light, #e7dfd3);
}

.spv-ch-title {
  font-size: 17px;
  font-weight: 800;
  color: var(--ink);
  display: flex;
  align-items: center;
  gap: 8px;
}

.spv-ch-count {
  font-family: var(--font-mono, monospace);
  color: var(--crimson);
  font-size: 15px;
}

.spv-ch-reward {
  font-size: 11px;
  font-family: var(--font-mono, monospace);
  color: #059669;
  background: rgba(16, 185, 129, 0.1);
  border: 1px solid rgba(16, 185, 129, 0.3);
  padding: 4px 10px;
  border-radius: 20px;
  font-weight: 600;
}

.spv-comments-scrollable {
  max-height: 800px;
  overflow-y: auto;
  padding-right: 8px;
  margin-top: 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--crimson, #b8132d) var(--cream-2, #faf6ee);
}

.spv-comments-scrollable::-webkit-scrollbar {
  width: 7px;
}

.spv-comments-scrollable::-webkit-scrollbar-track {
  background: var(--cream-2, #faf6ee);
  border-radius: 4px;
}

.spv-comments-scrollable::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 4px;
}

.spv-comments-scrollable::-webkit-scrollbar-thumb:hover {
  background: var(--crimson, #b8132d);
}

.spv-pagination-bar {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px dashed var(--rule-light, #e7dfd3);
  display: flex;
  justify-content: center;
}

.spv-btn-more {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 24px;
  font-size: 13px;
  font-weight: 700;
  border-radius: 8px;
  background: var(--cream-2, #faf6ee);
  border: 1.5px solid var(--rule-light, #e7dfd3);
  color: var(--ink);
  cursor: pointer;
  transition: all 0.2s ease;
}

.spv-btn-more:hover {
  border-color: var(--crimson);
  background: var(--crimson);
  color: #ffffff;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(184, 19, 45, 0.25);
}

.spv-more-badge {
  font-size: 11px;
  font-family: var(--font-mono, monospace);
  background: rgba(0, 0, 0, 0.08);
  padding: 2px 7px;
  border-radius: 12px;
}

.spv-btn-more:hover .spv-more-badge {
  background: rgba(255, 255, 255, 0.25);
  color: #ffffff;
}

.spv-all-loaded {
  text-align: center;
  margin-top: 16px;
  font-size: 12px;
  font-family: var(--font-mono, monospace);
  color: var(--ink-soft);
}

.spv-back-label-mobile {
  display: none;
}

.spv-meta-text-mobile {
  display: none;
}

[data-theme="dark"] .spv-sticky-header {
  background: var(--cream-card, #1c1917) !important;
  border-color: var(--border-paper, #2e2924) !important;
}

[data-theme="dark"] .spv-back-btn {
  background: var(--cream-2, #24201c) !important;
  border-color: var(--border-paper, #2e2924) !important;
  color: var(--ink) !important;
}

[data-theme="dark"] .spv-comments-section {
  background: var(--cream-card, #1c1917) !important;
  border-color: var(--border-paper, #2e2924) !important;
}

[data-theme="dark"] .spv-btn-more {
  background: var(--cream-2, #24201c) !important;
  border-color: var(--border-paper, #2e2924) !important;
  color: var(--ink) !important;
}

[data-theme="dark"] .post-menu-dropdown {
  background: var(--cream-card, #1c1917) !important;
  border-color: var(--border-paper, #2e2924) !important;
}

[data-theme="dark"] .post-menu-item {
  color: var(--ink) !important;
}

[data-theme="dark"] .post-menu-item:hover {
  background: var(--cream-2, #24201c) !important;
}

/* ==========================================================================
   DEDICATED SINGLE POST VIEW MOBILE RESPONSIVE FIXES (MOBILE-ONLY: <= 768px)
   ========================================================================== */
@media (max-width: 768px) {
  /* 1. Header & Back Navigation Alignment */
  .spv-back-label-desktop {
    display: none !important;
  }

  .spv-back-label-mobile {
    display: inline !important;
  }

  .spv-meta-text-desktop {
    display: none !important;
  }

  .spv-meta-text-mobile {
    display: inline !important;
  }

  .single-post-page-view {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  .spv-sticky-header {
    position: sticky !important;
    top: 78px !important;
    z-index: 40 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 8px 12px !important;
    background: var(--cream-card, #ffffff) !important;
    border: 1px solid var(--border-paper, #e7dfd3) !important;
    border-radius: 10px !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05) !important;
    margin-bottom: 0 !important;
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  .spv-back-btn {
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    padding: 6px 11px !important;
    font-size: 11.5px !important;
    font-weight: 700 !important;
    border-radius: 6px !important;
    flex-shrink: 0 !important;
  }

  .spv-back-arrow {
    font-size: 14px !important;
  }

  .spv-header-meta {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    flex-shrink: 0 !important;
  }

  .spv-meta-tag {
    font-size: 10.5px !important;
    padding: 3px 8px !important;
    border-radius: 14px !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
  }

  .spv-post-container {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  /* 2. Post Detail Card Mobile Layout & Internal Alignment */
  .spv-post-card {
    padding: 13px 14px 14px 14px !important;
    border-radius: 12px !important;
    margin-bottom: 0 !important;
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow: visible !important;
  }

  .spv-post-card .spotlight-hero-bar {
    padding: 4px 8px !important;
    gap: 6px !important;
    margin-bottom: 8px !important;
  }

  .spv-post-card .shb-left {
    gap: 4px !important;
    flex-wrap: wrap !important;
  }

  .spv-post-card .shb-badge {
    font-size: 9px !important;
  }

  .spv-post-card .shb-flair {
    font-size: 8.5px !important;
    padding: 1px 4px !important;
  }

  .spv-post-card .shb-timer-pill {
    font-size: 8.5px !important;
  }

  .spv-post-card .post-top-meta {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-wrap: nowrap !important;
    gap: 6px !important;
    margin-bottom: 6px !important;
    width: 100% !important;
    overflow: visible !important;
    padding-top: 8px !important;
  }

  .spv-post-card .post-top-meta-left {
    display: inline-flex !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    gap: 5px !important;
    min-width: 0 !important;
    flex: 1 1 auto !important;
    overflow: visible !important;
  }

  .spv-post-card .post-author-chip {
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    min-width: 0 !important;
    flex-shrink: 1 !important;
    overflow: visible !important;
    padding-left: 2px !important;
  }

  .spv-post-card .post-author-name {
    font-size: 13px !important;
    font-weight: 700 !important;
    max-width: 110px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    display: inline-block !important;
    vertical-align: middle !important;
  }

  .spv-post-card .spotlight-author-badge {
    font-size: 9px !important;
    padding: 1px 5px !important;
    white-space: nowrap !important;
  }

  .spv-post-card .btn-author-follow {
    padding: 1px 6px !important;
    font-size: 10px !important;
    height: 20px !important;
    border-radius: 10px !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
  }

  .spv-post-card .post-meta-dot {
    font-size: 11px !important;
    color: var(--ink-soft) !important;
    flex-shrink: 0 !important;
  }

  .spv-post-card .post-timestamp-tag {
    font-size: 10.5px !important;
    color: var(--ink-soft) !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
  }

  .spv-post-card .post-top-meta-right {
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    flex-shrink: 0 !important;
    margin-left: auto !important;
  }

  .spv-post-card .post-top-views-badge {
    height: 22px !important;
    padding: 0 7px !important;
    font-size: 10px !important;
    gap: 3px !important;
    border-radius: 999px !important;
  }

  .spv-post-card .post-topic-row {
    margin-top: 2px !important;
    margin-bottom: 6px !important;
    display: flex !important;
    align-items: center !important;
  }

  .spv-post-card .post-topic-row .post-tag {
    height: 20px !important;
    font-size: 10px !important;
    padding: 0 8px 0 7px !important;
    border-radius: 999px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
  }

  .spv-headline {
    font-size: 16.5px !important;
    font-weight: 800 !important;
    line-height: 1.35 !important;
    margin: 6px 0 8px 0 !important;
    word-break: break-word !important;
  }

  .spv-body-text {
    font-size: 13.5px !important;
    line-height: 1.55 !important;
    margin-bottom: 12px !important;
    word-break: break-word !important;
  }

  /* Adaptive Media Gallery inside Single Post View */
  .spv-post-card .post-media-grid {
    margin-top: 8px !important;
    margin-bottom: 8px !important;
    border-radius: 10px !important;
  }

  .spv-post-card .post-media-grid.media-count-1,
  .spv-post-card .post-media-grid.media-count-1 .post-media-item-wrap,
  .spv-post-card .post-media-grid.media-count-1 img {
    max-height: 280px !important;
  }

  .spv-post-card .post-media-grid.media-count-2 {
    height: 200px !important;
  }

  .spv-post-card .post-media-grid.media-count-3 {
    height: 220px !important;
  }

  .spv-post-card .post-media-grid.media-count-4 {
    height: 240px !important;
  }

  /* 3. Trade Setup Strip: Compact 2-Column Grid on Mobile */
  .spv-post-card .post-setup-strip {
    margin: 10px 0 !important;
    padding: 10px 12px !important;
    border-radius: 8px !important;
    background: var(--cream-2) !important;
    border: 1px solid var(--border-paper) !important;
    box-sizing: border-box !important;
  }

  .spv-post-card .setup-strip-head {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    margin-bottom: 8px !important;
    gap: 6px !important;
  }

  .spv-post-card .setup-asset-name {
    font-size: 12.5px !important;
    font-weight: 800 !important;
    font-family: var(--font-mono, monospace) !important;
  }

  .spv-post-card .setup-dir-pill {
    font-size: 10.5px !important;
    padding: 2px 7px !important;
    border-radius: 4px !important;
  }

  .spv-post-card .setup-stats-grid,
  .spv-post-card.spotlight-setup-strip .setup-stats-grid,
  .spv-post-card .post-setup-strip.spotlight-setup-strip .setup-stats-grid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px 10px !important;
    padding: 0 !important;
    align-items: stretch !important;
  }

  .spv-post-card .setup-stats-grid .ss-col {
    display: flex !important;
    flex-direction: column !important;
    gap: 2px !important;
    min-width: 0 !important;
  }

  .spv-post-card .setup-stats-grid .ss-lbl {
    font-size: 10px !important;
    font-weight: 600 !important;
    color: var(--ink-soft) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.04em !important;
  }

  .spv-post-card .setup-stats-grid .ss-val {
    font-size: 12.5px !important;
    font-weight: 800 !important;
    font-family: var(--font-mono, monospace) !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  .spv-post-card .setup-stats-grid .ss-col.outcome-col {
    grid-column: span 2 !important;
    display: flex !important;
    flex-direction: row !important;
    justify-content: space-between !important;
    align-items: center !important;
    background: rgba(0, 0, 0, 0.03) !important;
    border: 1px dashed var(--tape-border) !important;
    border-radius: 6px !important;
    padding: 6px 10px !important;
    margin-top: 2px !important;
  }

  [data-theme="dark"] .spv-post-card .setup-stats-grid .ss-col.outcome-col {
    background: rgba(255, 255, 255, 0.04) !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
  }

  .spv-post-card .setup-stats-grid .ss-col.outcome-col .ss-lbl {
    margin-bottom: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
  }

  .spv-post-card .setup-stats-grid .ss-col.outcome-col .outcome-val {
    font-size: 13px !important;
    font-weight: 800 !important;
  }

  .spv-post-card .spotlight-setup-actions {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    width: 100% !important;
    margin-top: 8px !important;
    padding-top: 8px !important;
    box-sizing: border-box !important;
  }

  .spv-post-card .btn-spotlight-copy,
  .spv-post-card .spotlight-setup-actions .direct-trade-link {
    flex: 1 !important;
    text-align: center !important;
    justify-content: center !important;
    height: 30px !important;
    font-size: 11px !important;
    padding: 0 8px !important;
    box-sizing: border-box !important;
  }

  /* 4. Post Action Bar: Thumb-friendly 2-Row Layout on Mobile */
  .spv-post-card .post-bottom-actions {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    padding-top: 10px !important;
    margin-top: 12px !important;
    border-top: 1px solid var(--border-paper) !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .spv-post-card .post-actions-left {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
    width: 100% !important;
  }

  .spv-post-card .post-actions-right {
    display: flex !important;
    align-items: center !important;
    justify-content: stretch !important;
    gap: 6px !important;
    width: 100% !important;
    margin-left: 0 !important;
    margin-top: 2px !important;
  }

  .spv-post-card .boost-pill {
    height: 28px !important;
    padding: 0 9px !important;
    font-size: 11px !important;
    gap: 4px !important;
    border-radius: 6px !important;
  }

  .spv-post-card .boost-pill .boost-icon {
    font-size: 11px !important;
  }

  .spv-post-card .boost-pill .boost-count {
    font-size: 10px !important;
    padding: 0 4px !important;
  }

  .spv-post-card .action-btn {
    height: 28px !important;
    padding: 0 9px !important;
    font-size: 11px !important;
    gap: 4px !important;
    border-radius: 6px !important;
  }

  .spv-post-card .copy-setup-btn {
    flex: 1 !important;
    height: 32px !important;
    font-size: 11.5px !important;
    font-weight: 700 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 6px !important;
    box-sizing: border-box !important;
  }

  .spv-post-card .direct-trade-link {
    flex: 1 !important;
    height: 32px !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 6px !important;
    box-sizing: border-box !important;
  }

  /* 5. Discussion Section & Header Alignment */
  .spv-comments-section {
    padding: 13px 14px !important;
    border-radius: 12px !important;
    background: var(--cream-card) !important;
    border: 1px solid var(--border-paper) !important;
    box-shadow: var(--shadow-paper) !important;
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  .spv-comments-header {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 6px !important;
    margin-bottom: 12px !important;
    padding-bottom: 10px !important;
    border-bottom: 1px solid var(--border-paper) !important;
  }

  .spv-ch-title {
    font-size: 14.5px !important;
    font-weight: 800 !important;
    color: var(--ink) !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
  }

  .spv-ch-title svg {
    width: 16px !important;
    height: 16px !important;
  }

  .spv-ch-count {
    font-size: 13.5px !important;
    font-family: var(--font-mono, monospace) !important;
    color: var(--crimson) !important;
  }

  .spv-ch-reward {
    font-size: 10px !important;
    padding: 2.5px 8px !important;
    border-radius: 12px !important;
    align-self: flex-start !important;
    font-weight: 600 !important;
  }

  /* 6. Comment Composer Card on Mobile */
  .spv-comments-section .comment-composer-card {
    display: flex !important;
    gap: 8px !important;
    margin-bottom: 14px !important;
    align-items: flex-start !important;
  }

  .spv-comments-section .composer-user-avatar {
    flex-shrink: 0 !important;
    width: 32px !important;
    height: 32px !important;
    overflow: visible !important;
    margin-top: 4px !important;
    margin-left: 2px !important;
  }

  .spv-comments-section .composer-user-avatar .dav-size-sm,
  .spv-comments-section .composer-user-avatar .comment-avatar {
    width: 32px !important;
    height: 32px !important;
    overflow: visible !important;
  }

  .spv-comments-section .composer-body {
    flex: 1 !important;
    min-width: 0 !important;
    border-radius: 8px !important;
  }

  .spv-comments-section .composer-input-wrap {
    padding: 8px 10px 4px !important;
  }

  .spv-comments-section .comment-textarea {
    min-height: 42px !important;
    max-height: 140px !important;
    font-size: 13px !important;
    line-height: 1.45 !important;
  }

  .spv-comments-section .composer-footer {
    padding: 5px 8px !important;
    gap: 4px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
  }

  .spv-comments-section .composer-formatting-hints {
    display: flex !important;
    align-items: center !important;
    gap: 2px !important;
  }

  .spv-comments-section .fmt-btn {
    padding: 2px 4px !important;
    font-size: 10.5px !important;
    border-radius: 3px !important;
  }

  .spv-comments-section .composer-actions {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
  }

  .spv-comments-section .comment-submit-btn {
    padding: 4px 10px !important;
    font-size: 11.5px !important;
    height: 28px !important;
    font-weight: 700 !important;
  }

  .spv-comments-section .composer-guest-banner {
    flex-direction: column !important;
    align-items: stretch !important;
    text-align: left !important;
    padding: 10px 12px !important;
    gap: 8px !important;
    border-radius: 8px !important;
  }

  .spv-comments-section .cgb-left {
    gap: 8px !important;
  }

  .spv-comments-section .cgb-icon {
    font-size: 18px !important;
  }

  .spv-comments-section .cgb-title {
    font-size: 12.5px !important;
  }

  .spv-comments-section .cgb-sub {
    font-size: 11px !important;
  }

  .spv-comments-section .cgb-btn {
    width: 100% !important;
    justify-content: center !important;
    height: 30px !important;
    font-size: 11.5px !important;
  }

  /* 7. Comments Thread: Natural Scrolling & Clean Tree Alignment */
  .spv-comments-scrollable {
    max-height: none !important;
    overflow-y: visible !important;
    padding-right: 0 !important;
    margin-top: 12px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
  }

  .comment-thread-item {
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .comment-thread-inner {
    display: flex !important;
    gap: 10px !important;
    align-items: flex-start !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .comment-avatar-column {
    width: 36px !important;
    flex-shrink: 0 !important;
    overflow: visible !important;
    padding-top: 2px !important;
  }

  .comment-avatar-column .dav-size-sm,
  .comment-avatar-column .comment-avatar {
    width: 30px !important;
    height: 30px !important;
    overflow: visible !important;
  }

  .comment-avatar-ring .decorated-avatar-wrap {
    margin: 0 !important;
  }

  .comment-thread-rail {
    margin-top: 4px !important;
    margin-bottom: 2px !important;
  }

  .comment-content-column {
    flex: 1 !important;
    min-width: 0 !important;
  }

  .comment-bubble {
    padding: 9px 12px !important;
    border-radius: 10px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .comment-meta-bar {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 4px !important;
    margin-bottom: 4px !important;
  }

  .comment-author-info {
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    flex-wrap: wrap !important;
    min-width: 0 !important;
  }

  .comment-author-name {
    font-size: 12px !important;
    font-weight: 700 !important;
  }

  .comment-time-ago {
    font-size: 10px !important;
    color: var(--ink-soft) !important;
  }

  .comment-badge {
    font-size: 8.5px !important;
    padding: 1px 4px !important;
    border-radius: 3px !important;
  }

  .comment-delete-pill {
    font-size: 10px !important;
    padding: 1px 4px !important;
  }

  .comment-text-body {
    font-size: 12.5px !important;
    line-height: 1.5 !important;
    word-break: break-word !important;
  }

  .comment-text-body p {
    margin: 0 0 4px !important;
  }

  .comment-actions-bar {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    margin-top: 4px !important;
    padding-left: 1px !important;
  }

  .comment-boost-btn {
    font-size: 10.5px !important;
    padding: 2px 6px !important;
    border-radius: 4px !important;
  }

  .comment-reply-btn {
    font-size: 10.5px !important;
    padding: 2px 6px !important;
    border-radius: 4px !important;
  }

  .comment-replies-indicator {
    font-size: 10px !important;
  }

  /* Nested Replies */
  .nested-replies-list {
    padding-left: 10px !important;
    margin-top: 8px !important;
    margin-left: 6px !important;
    gap: 8px !important;
    border-left: 2px solid var(--tape-border) !important;
  }

  .comment-thread-item.is-nested .comment-avatar-column {
    width: 28px !important;
    overflow: visible !important;
  }

  .comment-thread-item.is-nested .comment-avatar-column .dav-size-sm,
  .comment-thread-item.is-nested .comment-avatar-column .comment-avatar {
    width: 24px !important;
    height: 24px !important;
    overflow: visible !important;
  }

  /* Inline Reply Composer on Mobile */
  .inline-reply-composer {
    padding: 8px 10px !important;
    margin-top: 8px !important;
    border-radius: 6px !important;
  }

  .inline-reply-textarea {
    font-size: 12px !important;
    padding: 5px 8px !important;
    min-height: 38px !important;
  }

  .inline-reply-bottom {
    margin-top: 6px !important;
  }

  /* 8. Pagination / More Comments Button */
  .spv-pagination-bar {
    margin-top: 14px !important;
    padding-top: 12px !important;
  }

  .spv-btn-more {
    width: 100% !important;
    justify-content: center !important;
    padding: 9px 14px !important;
    font-size: 12px !important;
  }

  .spv-all-loaded {
    margin-top: 12px !important;
    font-size: 11px !important;
  }
}

/* ==========================================================================
   UPGRADED PRESTIGE FRAME CATALOG & HIGH-CONVERTING MODAL STYLES
   ========================================================================== */
.sfg-serial-pill {
  font-size: 10px;
  font-family: var(--font-mono, monospace);
  font-weight: 800;
  color: #475569;
  background: var(--cream-3, #f1ede3);
  border: 1px solid var(--rule-light, #e7dfd3);
  padding: 2px 6px;
  border-radius: 4px;
}

.sfg-price-tag {
  font-size: 12px;
  font-family: var(--font-mono, monospace);
  font-weight: 800;
  color: #059669;
  background: rgba(16, 185, 129, 0.12);
  border: 1px solid rgba(16, 185, 129, 0.35);
  padding: 2px 8px;
  border-radius: 4px;
  letter-spacing: 0.02em;
}

.sfg-pitch-banner {
  font-size: 10px;
  font-weight: 800;
  color: #b45309;
  background: rgba(245, 158, 11, 0.12);
  border: 1px solid rgba(245, 158, 11, 0.3);
  padding: 3px 8px;
  border-radius: 4px;
  display: inline-block;
  margin-bottom: 2px;
  letter-spacing: 0.03em;
}

.btn-grab-prestige {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: linear-gradient(135deg, #b8132d 0%, #830d20 100%);
  color: #ffffff;
  font-size: 12px;
  font-weight: 800;
  padding: 7px 14px;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 2px 8px rgba(184, 19, 45, 0.35);
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-grab-prestige:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(184, 19, 45, 0.5);
  filter: brightness(1.1);
}

.gfm-urgency-banner {
  background: linear-gradient(90deg, #991b1b 0%, #b91c1c 50%, #ea580c 100%);
  color: #ffffff;
  padding: 8px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-radius: 12px 12px 0 0;
  box-shadow: 0 2px 8px rgba(185, 28, 28, 0.3);
}

.gub-left {
  display: flex;
  align-items: center;
  gap: 8px;
}

.gub-pulse {
  font-size: 14px;
  animation: pulseFire 1.5s infinite alternate;
}

@keyframes pulseFire {
  0% { transform: scale(1); filter: drop-shadow(0 0 2px rgba(251, 191, 36, 0.5)); }
  100% { transform: scale(1.25); filter: drop-shadow(0 0 8px rgba(251, 191, 36, 0.9)); }
}

.gub-text {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.gub-countdown {
  font-family: var(--font-mono, monospace);
  font-size: 13px;
  font-weight: 800;
  background: rgba(0, 0, 0, 0.35);
  padding: 2px 8px;
  border-radius: 4px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  color: #fef08a;
  letter-spacing: 0.08em;
}

.gfm-badges-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}

.gfm-serial-badge {
  font-size: 10px;
  font-family: var(--font-mono, monospace);
  font-weight: 800;
  color: #f8fafc;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.25);
  padding: 3px 8px;
  border-radius: 4px;
}

.gfm-discount-badge {
  font-size: 10px;
  font-weight: 800;
  color: #10b981;
  background: rgba(16, 185, 129, 0.18);
  border: 1px solid rgba(16, 185, 129, 0.4);
  padding: 3px 8px;
  border-radius: 4px;
  letter-spacing: 0.04em;
}

.gfm-price-hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  max-width: 400px;
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 10px;
  padding: 12px 18px;
  margin-top: 14px;
}

.gfm-price-left {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.gfm-strike-price {
  font-size: 14px;
  font-family: var(--font-mono, monospace);
  color: #64748b;
  text-decoration: line-through;
}

.gfm-main-price-wrap {
  display: flex;
  align-items: baseline;
  gap: 2px;
}

.gfm-currency {
  font-size: 18px;
  font-weight: 800;
  color: #10b981;
}

.gfm-amount {
  font-size: 32px;
  font-weight: 900;
  color: #ffffff;
  font-family: var(--font-mono, monospace);
  line-height: 1;
}

.gfm-usd {
  font-size: 12px;
  font-weight: 800;
  color: #10b981;
  margin-left: 2px;
}

.gfm-price-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
}

.gfm-access-type {
  font-size: 11px;
  font-weight: 800;
  color: #38bdf8;
  letter-spacing: 0.04em;
}

.gfm-guarantee-text {
  font-size: 10px;
  color: #94a3b8;
}

.gfm-value-stack {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 14px;
  background: var(--cream-2, #faf6ee);
  border: 1px solid var(--rule-light, #e7dfd3);
  border-radius: 10px;
  padding: 12px 14px;
}

.gvs-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.gvs-icon {
  font-size: 14px;
  line-height: 1.3;
}

.gvs-text {
  font-size: 12px;
  color: var(--ink-secondary);
  line-height: 1.4;
}

.gvs-text strong {
  color: var(--ink);
}

.gfm-channel-highlight {
  border-color: #38bdf8 !important;
  background: linear-gradient(135deg, rgba(56, 189, 248, 0.06) 0%, var(--cream-2, #faf6ee) 100%) !important;
}

.gfm-channel-icon.x-icon {
  background: #000000;
  color: #ffffff;
  border: none;
}

.gfm-cm-title {
  display: flex;
  align-items: center;
  gap: 8px;
}

.gfm-fast-pill {
  font-size: 9px;
  font-weight: 800;
  color: #dc2626;
  background: rgba(220, 38, 38, 0.12);
  border: 1px solid rgba(220, 38, 38, 0.3);
  padding: 1px 6px;
  border-radius: 10px;
  letter-spacing: 0.04em;
}

.gfm-crypto-card {
  cursor: pointer;
}

.gfm-channel-icon.crypto-icon {
  background: #0f172a;
  color: #fbbf24;
  border: none;
}

.gfm-wallet-mono {
  font-family: var(--font-mono, monospace);
  font-size: 10.5px !important;
  color: #475569 !important;
  word-break: break-all;
}

/* ==========================================================================
   IN-FEED SPONSORED POSTS / AD SPACE (PROFESSIONAL COLOR-HIGHLIGHTED)
   ========================================================================== */
.feed-sponsored-card {
  position: relative;
  background: linear-gradient(145deg, #ffffff 0%, rgba(255, 241, 242, 0.55) 100%);
  border: 1px solid rgba(225, 29, 72, 0.32) !important;
  box-shadow: 0 4px 20px rgba(225, 29, 72, 0.07), 0 1px 3px rgba(15, 23, 42, 0.03);
  overflow: hidden;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
  margin-bottom: 14px;
}

[data-theme="dark"] .feed-sponsored-card {
  background: linear-gradient(145deg, #121622 0%, rgba(38, 20, 28, 0.85) 100%);
  border: 1px solid rgba(244, 63, 94, 0.42) !important;
  box-shadow: 0 4px 22px rgba(225, 29, 72, 0.14), 0 1px 4px rgba(0, 0, 0, 0.5);
}

.feed-sponsored-card:hover {
  border-color: rgba(225, 29, 72, 0.55) !important;
  box-shadow: 0 6px 26px rgba(225, 29, 72, 0.12), 0 2px 6px rgba(15, 23, 42, 0.05);
  transform: translateY(-1.5px);
}

[data-theme="dark"] .feed-sponsored-card:hover {
  border-color: rgba(244, 63, 94, 0.7) !important;
  box-shadow: 0 6px 30px rgba(225, 29, 72, 0.22);
}

/* Luminous multi-color top accent line */
.feed-sponsored-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2.5px;
  background: linear-gradient(90deg, #e11d48 0%, #f59e0b 50%, #e11d48 100%);
  z-index: 2;
}

/* Sponsored Top Bar */
.feed-ad-top-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(225, 29, 72, 0.1);
}

[data-theme="dark"] .feed-ad-top-bar {
  border-bottom-color: rgba(244, 63, 94, 0.15);
}

.feed-ad-sponsor-info {
  display: flex;
  align-items: center;
  gap: 10px;
}

.feed-ad-avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  overflow: hidden;
  border: 1.5px solid rgba(225, 29, 72, 0.25);
  flex-shrink: 0;
  background: var(--paper-warm);
  display: flex;
  align-items: center;
  justify-content: center;
}

.feed-ad-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.feed-ad-meta {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.feed-ad-name-row {
  display: flex;
  align-items: center;
  gap: 6px;
}

.feed-ad-sponsor-name {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--ink);
}

.feed-ad-sponsor-handle {
  font-size: 11.5px;
  color: var(--ink-soft);
  font-family: var(--font-mono);
}

.feed-ad-promoted-tag {
  font-size: 10.5px;
  color: var(--ink-soft);
  letter-spacing: -0.01em;
}

.feed-ad-promoted-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 9px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--crimson);
  background: rgba(225, 29, 72, 0.08);
  border: 1px solid rgba(225, 29, 72, 0.25);
  border-radius: 999px;
}

[data-theme="dark"] .feed-ad-promoted-pill {
  color: #fb7185;
  background: rgba(225, 29, 72, 0.16);
  border-color: rgba(244, 63, 94, 0.35);
}

.feed-ad-badge-wrap {
  display: flex;
  align-items: center;
  gap: 6px;
}

.feed-ad-close-btn {
  background: transparent;
  border: 1px solid transparent;
  font-size: 15px;
  line-height: 1;
  color: var(--ink-soft);
  cursor: pointer;
  padding: 2px 5px;
  border-radius: 4px;
  transition: all 0.15s ease;
}

.feed-ad-close-btn:hover {
  color: var(--crimson);
  background: rgba(225, 29, 72, 0.1);
  border-color: rgba(225, 29, 72, 0.2);
}

.feed-sponsored-card.is-dismissing {
  opacity: 0 !important;
  transform: translateY(-8px) scale(0.98) !important;
  max-height: 0 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  border-width: 0 !important;
  overflow: hidden !important;
  transition: all 0.32s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* Typography strictly matching standard posts — NO font size increase */
.feed-ad-title {
  font-size: 14.5px;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.4;
  margin: 0 0 8px 0;
  transition: color 0.15s ease;
}

.feed-ad-title:hover {
  color: var(--crimson);
}

.feed-ad-desc {
  font-size: 13px;
  color: var(--ink-secondary);
  line-height: 1.5;
  margin-bottom: 12px;
}

/* Banner Image Wrap */
.feed-ad-banner-wrap {
  width: 100%;
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 12px;
  border: 1px solid var(--border-paper);
  background: rgba(0, 0, 0, 0.03);
  max-height: 280px;
  position: relative;
  transition: opacity 0.15s ease;
}

.feed-ad-banner-wrap:hover {
  opacity: 0.95;
}

.feed-ad-banner-img {
  width: 100%;
  height: auto;
  max-height: 280px;
  object-fit: cover;
  display: block;
}

/* Action Footer */
.feed-ad-action-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 10px;
  border-top: 1px dashed var(--rule-light);
  margin-top: 4px;
}

.feed-ad-dest-info {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  color: var(--ink-soft);
  font-family: var(--font-mono);
}

.feed-ad-cta-btn {
  padding: 6px 14px;
  font-size: 12px;
  font-weight: 600;
  border-radius: var(--radius-sm);
}

/* ==========================================================================
   NARROW PROFESSIONAL AD INVITATION STRIP (UNOBTRUSIVE WHEN NO ADS)
   ========================================================================== */
.narrow-ad-invitation-strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 10px 16px;
  background: linear-gradient(90deg, rgba(225, 29, 72, 0.05) 0%, rgba(245, 158, 11, 0.03) 50%, var(--card-bg, #ffffff) 100%);
  border: 1px solid rgba(225, 29, 72, 0.22);
  border-radius: var(--radius-sm);
  margin-bottom: 14px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.02);
  position: relative;
  overflow: hidden;
  transition: all 0.25s ease;
}

[data-theme="dark"] .narrow-ad-invitation-strip {
  background: linear-gradient(90deg, rgba(225, 29, 72, 0.09) 0%, rgba(245, 158, 11, 0.05) 50%, #121622 100%);
  border-color: rgba(244, 63, 94, 0.3);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
}

.narrow-ad-invitation-strip::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 3px;
  background: linear-gradient(180deg, #e11d48, #f59e0b);
}

.narrow-ad-invitation-strip.is-dismissing {
  opacity: 0 !important;
  transform: translateY(-6px) scale(0.99) !important;
  max-height: 0 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  border-width: 0 !important;
  overflow: hidden !important;
  transition: all 0.28s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.nais-left {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  flex: 1;
}

.nais-badge {
  font-size: 9.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--crimson);
  background: rgba(225, 29, 72, 0.08);
  border: 1px solid rgba(225, 29, 72, 0.25);
  border-radius: 4px;
  padding: 3px 7px;
  white-space: nowrap;
  flex-shrink: 0;
}

[data-theme="dark"] .nais-badge {
  background: rgba(225, 29, 72, 0.16);
  border-color: rgba(244, 63, 94, 0.35);
  color: #fb7185;
}

.nais-text {
  font-size: 12.5px;
  line-height: 1.4;
  color: var(--ink);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.nais-headline {
  color: var(--ink);
  font-weight: 700;
  margin-right: 4px;
}

.nais-sub {
  color: var(--ink-secondary);
}

.nais-right {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.nais-cta-btn {
  padding: 5px 12px;
  font-size: 11.5px;
  font-weight: 600;
  border-radius: var(--radius-sm);
  white-space: nowrap;
}

.nais-close-btn {
  background: transparent;
  border: none;
  font-size: 16px;
  line-height: 1;
  color: var(--ink-soft);
  cursor: pointer;
  padding: 3px 6px;
  border-radius: 4px;
  transition: all 0.15s ease;
}

.nais-close-btn:hover {
  color: var(--crimson);
  background: rgba(225, 29, 72, 0.1);
}

@media (max-width: 680px) {
  .narrow-ad-invitation-strip {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    padding: 10px 12px;
  }

  .nais-left {
    flex-direction: column;
    align-items: flex-start;
    gap: 5px;
  }

  .nais-text {
    white-space: normal;
    font-size: 11.5px;
    line-height: 1.4;
  }

  .nais-right {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 6px;
    border-top: 1px dashed var(--rule-light);
    width: 100%;
  }

  .nais-cta-btn {
    flex: 1;
    text-align: center;
    justify-content: center;
  }
}

/* ==========================================================================
   ABOUT TAB STYLES (MOBILE-FIRST HUB)
   ========================================================================== */
.about-page-layout {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.about-hero-banner {
  margin-bottom: 2px;
}

.about-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}

@media (max-width: 860px) {
  .about-grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }
}

/* ==========================================================================
   FEED TOPICS & CHANNELS BAR (MOBILE-ONLY NATIVE CHIPS, HIDDEN ON DESKTOP WEB)
   ========================================================================== */
.feed-topics-bar {
  display: none; /* Hidden on web/desktop version as right sidebar already has Topics & Channels */
  margin-bottom: 12px;
  overflow: hidden;
  max-width: 100%;
}

@media (max-width: 1240px) {
  .feed-topics-bar {
    display: block; /* Visible on mobile & tablet web where right sidebar is hidden */
  }
}

.feed-topics-track {
  display: flex;
  align-items: center;
  gap: 7px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding: 2px 2px 6px;
}

.feed-topics-track::-webkit-scrollbar {
  display: none;
}

.feed-topics-track .topic-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 12px;
  background: var(--cream-card);
  border: 1px solid var(--border-paper);
  border-radius: 999px;
  font-family: var(--font-sans);
  font-size: 11.5px;
  font-weight: 600;
  color: var(--ink-secondary);
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  transition: all 0.16s ease;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
}

.feed-topics-track .topic-btn:hover {
  background: var(--cream-2);
  color: var(--ink);
  border-color: rgba(184, 51, 42, 0.3);
}

.feed-topics-track .topic-btn.active {
  background: var(--crimson);
  color: #ffffff;
  border-color: var(--crimson);
  box-shadow: 0 2px 8px rgba(184, 51, 42, 0.28);
}

[data-theme="dark"] .feed-topics-track .topic-btn {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.1);
  color: #cbd5e1;
}

[data-theme="dark"] .feed-topics-track .topic-btn:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #ffffff;
}

[data-theme="dark"] .feed-topics-track .topic-btn.active {
  background: var(--crimson);
  color: #ffffff;
  border-color: var(--crimson);
  box-shadow: 0 2px 10px rgba(225, 29, 72, 0.35);
}

.topic-icon {
  font-size: 13px;
  line-height: 1;
}

/* ==========================================================================
   FLOATING / POPUP AD WIDGET (USER-FRIENDLY & CLOSABLE)
   ========================================================================== */
.floating-popup-ad {
  position: fixed;
  bottom: 24px;
  right: 24px;
  width: 360px;
  max-width: calc(100vw - 32px);
  background: var(--card-bg, #ffffff);
  border: 1px solid rgba(225, 29, 72, 0.35);
  border-radius: var(--radius-md);
  box-shadow: 0 12px 36px rgba(15, 23, 42, 0.16), 0 2px 8px rgba(225, 29, 72, 0.1);
  z-index: 1040;
  overflow: hidden;
  animation: floatAdSlideUp 0.35s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  transition: opacity 0.25s ease, transform 0.25s ease;
}

[data-theme="dark"] .floating-popup-ad {
  background: #121622;
  border-color: rgba(244, 63, 94, 0.45);
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.65), 0 2px 10px rgba(225, 29, 72, 0.2);
}

@keyframes floatAdSlideUp {
  0% {
    opacity: 0;
    transform: translateY(20px) scale(0.96);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.floating-popup-ad.is-hiding {
  opacity: 0 !important;
  transform: translateY(20px) scale(0.96) !important;
  pointer-events: none !important;
}

.floating-ad-glow-strip {
  height: 2.5px;
  width: 100%;
  background: linear-gradient(90deg, #e11d48, #f59e0b, #6366f1);
}

.floating-ad-close {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: none;
  background: rgba(0, 0, 0, 0.05);
  color: var(--ink-secondary);
  font-size: 16px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 5;
  transition: all 0.15s ease;
}

[data-theme="dark"] .floating-ad-close {
  background: rgba(255, 255, 255, 0.08);
  color: #94a3b8;
}

.floating-ad-close:hover {
  background: rgba(225, 29, 72, 0.15);
  color: var(--crimson);
}

.floating-ad-inner {
  padding: 12px 14px 10px;
  cursor: pointer;
}

.floating-ad-top {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  padding-right: 24px;
}

.floating-ad-pill {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--crimson);
  background: rgba(225, 29, 72, 0.08);
  border: 1px solid rgba(225, 29, 72, 0.25);
  border-radius: 999px;
  padding: 2px 7px;
}

.floating-ad-domain {
  font-size: 10.5px;
  font-family: var(--font-mono);
  color: var(--ink-soft);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.floating-ad-body {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 10px;
}

.floating-ad-avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  border: 1.5px solid rgba(225, 29, 72, 0.25);
  background: var(--paper-warm);
}

.floating-ad-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.floating-ad-content {
  flex: 1;
  min-width: 0;
}

.floating-ad-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
  margin: 0 0 3px 0;
  line-height: 1.35;
}

.floating-ad-desc {
  font-size: 11.5px;
  color: var(--ink-secondary);
  line-height: 1.4;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.floating-ad-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 8px;
  border-top: 1px dashed var(--rule-light);
  gap: 8px;
}

.floating-ad-dismiss-link {
  font-size: 10.5px;
  color: var(--ink-soft);
  text-decoration: underline;
  cursor: pointer;
  transition: color 0.15s ease;
}

.floating-ad-dismiss-link:hover {
  color: var(--crimson);
}

.floating-ad-cta {
  font-size: 11.5px;
  padding: 4px 10px;
}

/* ==========================================================================
   FOOTER CONTACT CLUSTER & CREATIVE DESIGN (DESKTOP & GENERAL)
   ========================================================================== */
.footer-contact-cluster {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-top: 6px;
}

.f-contact-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 16px;
  background: var(--cream-card);
  border: 1px solid var(--border-paper);
  border-radius: var(--radius-sm);
  text-decoration: none;
  transition: all 0.18s ease;
  min-width: 0;
}

.f-contact-card:hover {
  border-color: var(--crimson);
  background: var(--cream-card-elevated);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.fcc-icon {
  font-size: 20px;
  flex-shrink: 0;
}

.fcc-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.fcc-label {
  font-size: 9.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ink-soft);
}

.fcc-val {
  font-size: 12px;
  font-family: var(--font-mono);
  color: var(--crimson);
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ==========================================================================
   MOBILE VIEWPORT ENHANCEMENTS (<= 768px): LOYALTY, FOOTER & POPUP AD
   ========================================================================== */
@media (max-width: 768px) {
  /* Floating popup ad positioning right above mobile bottom nav */
  .floating-popup-ad {
    bottom: 74px;
    left: 12px;
    right: 12px;
    width: auto;
    max-width: none;
  }

  /* LOYALTY TAB (#tab-rewards) MOBILE FIXES */
  #tab-rewards {
    max-width: 100% !important;
    overflow-x: hidden !important;
    box-sizing: border-box !important;
  }

  .hero-rewards-card {
    padding: 16px 14px !important;
  }

  /* Balanced 2-column layout: Balance spans top, Streak & Multiplier side-by-side */
  .rewards-tiles-row {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
    margin-top: 14px !important;
  }

  .rewards-tiles-row > .r-tile:first-child {
    grid-column: 1 / -1 !important;
    background: linear-gradient(135deg, var(--cream-2) 0%, rgba(225, 29, 72, 0.05) 100%) !important;
    border-color: rgba(225, 29, 72, 0.25) !important;
    padding: 14px 16px !important;
  }

  .rewards-tiles-row > .r-tile:first-child .rt-val {
    font-size: 1.8rem !important;
  }

  .r-tile {
    padding: 10px 12px !important;
    min-width: 0 !important;
  }

  .rt-val {
    font-size: 1.3rem !important;
    word-break: break-word !important;
  }

  .btn-loyalty-streak {
    padding: 7px 8px !important;
    font-size: 10.5px !important;
    white-space: nowrap !important;
    letter-spacing: 0 !important;
  }

  /* 7-Day Consistency Streak Hub on mobile */
  .streak-hub-banner {
    padding: 14px 12px !important;
    margin-top: 14px !important;
  }

  .shb-header {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 8px !important;
    margin-bottom: 12px !important;
  }

  .shb-left {
    align-items: center !important;
    gap: 10px !important;
  }

  .shb-flame {
    font-size: 22px !important;
  }

  .shb-title {
    font-size: 13.5px !important;
  }

  .shb-sub {
    font-size: 11.5px !important;
  }

  .shb-status-pill {
    align-self: flex-start !important;
    font-size: 10px !important;
    padding: 3px 9px !important;
  }

  /* Streak Journey Track: 7 days in 1 row, clean and aligned */
  .streak-journey-track {
    grid-template-columns: repeat(7, 1fr) !important;
    gap: 3px !important;
  }

  .sjt-day-card {
    padding: 6px 2px !important;
    gap: 2px !important;
    min-width: 0 !important;
    border-radius: 4px !important;
  }

  .sjt-day-lbl {
    font-size: 9px !important;
  }

  .sjt-day-icon {
    font-size: 13px !important;
  }

  .sjt-day-reward {
    font-size: 8.5px !important;
  }

  .sjt-day-status {
    font-size: 7.5px !important;
    letter-spacing: -0.02em !important;
  }

  /* Trader Verification Card on mobile */
  .trader-verification-card {
    padding: 14px 12px !important;
    margin-bottom: 14px !important;
  }

  .tvc-inner {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 12px !important;
  }

  .tvc-left {
    min-width: 0 !important;
    width: 100% !important;
  }

  .tvc-right {
    width: 100% !important;
  }

  #btnVerifyTraderActivity {
    width: 100% !important;
    justify-content: center !important;
    text-align: center !important;
    padding: 9px 12px !important;
    font-size: 12px !important;
  }

  /* Unified Activity Quests on mobile */
  .quest-tracker-card,
  .unified-quests-card {
    padding: 14px 12px !important;
  }

  .quest-header-flex {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 6px !important;
  }

  .quest-header-badges {
    width: 100% !important;
    justify-content: flex-start !important;
    gap: 6px !important;
    margin-top: 6px !important;
  }

  .quest-progress-summary-strip {
    padding: 10px 10px !important;
    margin-bottom: 12px !important;
  }

  .qps-top-row,
  .qps-bottom-hint {
    font-size: 10.5px !important;
  }

  .daily-reset-pill {
    align-self: flex-start !important;
    font-size: 10px !important;
  }

  /* Marketplace on mobile */
  .market-items-grid {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  .market-item {
    flex-direction: column !important;
    gap: 10px !important;
    padding: 12px !important;
  }

  .market-item > div:last-child {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px !important;
    border-top: 1px dashed var(--rule-light) !important;
    padding-top: 8px !important;
    width: 100% !important;
  }

  .market-item .btn {
    flex: 1 !important;
    justify-content: center !important;
  }

  /* ==========================================================================
     MOBILE FOOTER: EXCLUSIVELY SHOWN ON ABOUT TAB
     ========================================================================== */
  .app-footer {
    display: none !important;
  }

  /* Footer displayed ONLY when on About tab */
  body[data-active-tab="about"] .app-footer,
  .main-layout.tab-mode-about ~ .app-footer {
    display: block !important;
    padding: 24px 16px 84px !important; /* Clearance for fixed mobile bottom nav */
    background: var(--cream-2) !important;
    border-top: 1px solid var(--border-paper) !important;
  }

  /* Hide Navigation & Ecosystem link columns on mobile */
  .footer-top-row {
    display: block !important;
    margin-bottom: 16px !important;
  }

  .footer-col-main {
    max-width: 100% !important;
  }

  .footer-nav-groups,
  .f-group-nav,
  .f-group-eco {
    display: none !important;
  }

  .footer-contact-section {
    padding-top: 14px !important;
    margin-bottom: 18px !important;
  }

  .f-contact-head {
    margin-bottom: 8px !important;
  }

  .f-contact-subline {
    display: none !important;
  }

  .footer-contact-cluster {
    display: flex !important;
    flex-direction: column !important;
    gap: 9px !important;
  }

  .f-contact-card {
    padding: 10px 14px !important;
  }

  .fcc-icon {
    font-size: 18px !important;
  }

  .fcc-label {
    font-size: 9.5px !important;
  }

  .fcc-val {
    font-size: 12px !important;
  }

  .footer-bottom-bar {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 12px !important;
    text-align: center !important;
    padding-top: 16px !important;
    border-top: 1px dashed var(--rule-light) !important;
  }

  .footer-bottom-actions {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    flex-wrap: wrap !important;
    width: 100% !important;
  }

  .footer-donate-btn {
    padding: 6px 14px !important;
    font-size: 11.5px !important;
  }

  .footer-official-pill,
  .footer-creator-pill {
    padding: 5px 12px !important;
    font-size: 11.5px !important;
  }

  .fbb-copy {
    font-size: 11px !important;
    color: var(--ink-soft) !important;
    order: 2 !important;
  }
}

/* ==========================================================================
   NOWPAYMENTS GATEWAY & DIRECT CRYPTO CHECKOUT STYLES
   ========================================================================== */
.gfm-nowpayments-deck {
  margin-top: 10px;
}

.btn-nowpayments-pay {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: linear-gradient(135deg, #090d16 0%, #0f172a 100%);
  border: 1.5px solid rgba(16, 185, 129, 0.45);
  border-radius: 12px;
  padding: 14px 18px;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 4px 14px rgba(16, 185, 129, 0.12);
  text-align: left;
}

.btn-nowpayments-pay:hover {
  border-color: #10b981;
  background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
  box-shadow: 0 6px 20px rgba(16, 185, 129, 0.24);
  transform: translateY(-1px);
}

.bnp-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.bnp-icon {
  font-size: 22px;
  background: rgba(16, 185, 129, 0.18);
  border: 1px solid rgba(16, 185, 129, 0.35);
  border-radius: 10px;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #10b981;
}

.bnp-text-col {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.bnp-title {
  font-size: 14.5px;
  font-weight: 800;
  color: #ffffff;
  letter-spacing: -0.01em;
}

.bnp-sub {
  font-size: 11px;
  color: #94a3b8;
}

.bnp-badge {
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #10b981;
  background: rgba(16, 185, 129, 0.12);
  border: 1px solid rgba(16, 185, 129, 0.3);
  padding: 4px 10px;
  border-radius: 20px;
  white-space: nowrap;
}

.gfm-security-strip {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-top: 8px;
  font-size: 11px;
  color: #64748b;
  flex-wrap: wrap;
}

.gfm-security-strip span {
  display: flex;
  align-items: center;
  gap: 4px;
}

.gaib-active-invoice-box {
  background: #0f172a !important;
  border: 1.5px solid rgba(56, 189, 248, 0.45) !important;
  border-radius: 12px !important;
  padding: 16px 18px !important;
  color: #f8fafc !important;
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.4), 0 0 15px rgba(56, 189, 248, 0.15) !important;
}

.gaib-status-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  padding-bottom: 14px;
  margin-bottom: 14px;
}

.gaib-status-header-line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

.gaib-status-indicator {
  display: flex;
  align-items: center;
  gap: 10px;
}

.gaib-status-title,
.gaib-status-indicator strong {
  font-size: 14px !important;
  font-weight: 700 !important;
  color: #ffffff !important;
  letter-spacing: -0.01em;
  margin: 0;
  padding: 0;
  line-height: 1.3;
}

.gaib-network-pill {
  font-size: 10px !important;
  font-weight: 800 !important;
  color: #38bdf8 !important;
  background: rgba(56, 189, 248, 0.12) !important;
  border: 1px solid rgba(56, 189, 248, 0.3) !important;
  padding: 2px 8px !important;
  border-radius: 12px !important;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.gaib-pulse-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #f59e0b;
  box-shadow: 0 0 12px #f59e0b;
  animation: pulse-warn 1.5s infinite;
  flex-shrink: 0;
}

.gaib-pulse-dot.confirmed {
  background: #10b981;
  box-shadow: 0 0 12px #10b981;
  animation: pulse-success 1.5s infinite;
}

@keyframes pulse-warn {
  0% { transform: scale(0.95); opacity: 0.7; }
  50% { transform: scale(1.25); opacity: 1; }
  100% { transform: scale(0.95); opacity: 0.7; }
}

@keyframes pulse-success {
  0% { transform: scale(0.95); opacity: 0.8; }
  50% { transform: scale(1.3); opacity: 1; }
  100% { transform: scale(0.95); opacity: 0.8; }
}

.gaib-order-info-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  padding: 8px 12px;
}

.gaib-order-label {
  font-size: 11px !important;
  font-weight: 700 !important;
  color: #94a3b8 !important;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.gaib-order-code {
  font-family: var(--font-mono, monospace) !important;
  font-size: 11.5px !important;
  color: #38bdf8 !important;
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  word-break: break-all;
  flex: 1;
  min-width: 150px;
}

.gaib-micro-btn {
  font-size: 11px !important;
  font-weight: 700 !important;
  color: #f1f5f9 !important;
  background: rgba(255, 255, 255, 0.1) !important;
  border: 1px solid rgba(255, 255, 255, 0.25) !important;
  border-radius: 5px !important;
  padding: 3px 10px !important;
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: nowrap;
}

.gaib-micro-btn:hover {
  background: rgba(255, 255, 255, 0.2) !important;
  color: #ffffff !important;
  border-color: rgba(255, 255, 255, 0.5) !important;
}

.gaib-actions-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.gaib-primary-pay-btn {
  flex: 1;
  min-width: 240px;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
  color: #ffffff !important;
  font-size: 13.5px !important;
  font-weight: 800 !important;
  border: none !important;
  border-radius: 8px !important;
  padding: 10px 18px !important;
  text-decoration: none !important;
  box-shadow: 0 4px 14px rgba(16, 185, 129, 0.35) !important;
  transition: all 0.2s ease !important;
  cursor: pointer;
}

.gaib-primary-pay-btn:hover {
  background: linear-gradient(135deg, #059669 0%, #047857 100%) !important;
  box-shadow: 0 6px 20px rgba(16, 185, 129, 0.5) !important;
  transform: translateY(-1px);
}

.gaib-sec-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  background: rgba(255, 255, 255, 0.08) !important;
  border: 1px solid rgba(255, 255, 255, 0.22) !important;
  color: #f1f5f9 !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  border-radius: 8px !important;
  padding: 10px 16px !important;
  cursor: pointer;
  transition: all 0.15s ease !important;
  white-space: nowrap;
}

.gaib-sec-btn:hover {
  background: rgba(255, 255, 255, 0.18) !important;
  color: #ffffff !important;
  border-color: rgba(255, 255, 255, 0.45) !important;
}

.gaib-success-banner {
  margin-top: 14px;
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.15) 0%, rgba(5, 150, 105, 0.25) 100%);
  border: 1px solid #10b981;
  border-radius: 10px;
  padding: 16px;
  display: flex;
  align-items: flex-start;
  gap: 14px;
  animation: fadeInSuccess 0.4s ease;
}

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

.gsb-icon {
  font-size: 32px;
  line-height: 1;
}

.gsb-content h4 {
  font-size: 15px;
  font-weight: 800;
  color: #ffffff;
  margin: 0 0 4px 0;
}

.gsb-content p {
  font-size: 12px;
  color: #cbd5e1;
  margin: 0 0 12px 0;
  line-height: 1.4;
}

.gfm-manual-details {
  border: 1px solid var(--rule-light, #e7dfd3);
  border-radius: 8px;
  padding: 8px 12px;
  background: var(--cream-2, #faf6ee);
  font-size: 12px;
}

.gfm-manual-summary {
  cursor: pointer;
  font-weight: 600;
  color: var(--ink-secondary);
  outline: none;
  user-select: none;
}

.gfm-manual-summary:hover {
  color: var(--ink);
}

.badge-green {
  background: rgba(16, 185, 129, 0.15) !important;
  color: #10b981 !important;
  border: 1px solid rgba(16, 185, 129, 0.35) !important;
}

/* ==========================================================================
   $PTS LOYALTY POINTS TRANSACTION LEDGER & HISTORY MODAL
   ========================================================================== */
.pts-clean-modal-header {
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border-paper);
}

.pts-clean-modal-header .modal-title {
  font-size: 17px;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 2px;
}

.pts-clean-modal-header .modal-subtitle {
  font-size: 12px;
  color: var(--ink-secondary);
}

.pts-balance-overview {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--cream-2);
  border: 1px solid var(--border-paper);
  border-radius: var(--radius-sm, 8px);
  padding: 12px 16px;
  margin-bottom: 12px;
  gap: 16px;
}

.pbo-main {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.pbo-lbl {
  font-size: 10.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ink-soft);
}

.pbo-val {
  font-family: var(--font-mono, monospace);
  font-size: 22px;
  font-weight: 800;
  color: var(--ink);
  display: flex;
  align-items: baseline;
  gap: 5px;
  line-height: 1.2;
}

.pbo-val small {
  font-size: 13px;
  font-weight: 700;
  color: var(--crimson);
}

.pbo-stats {
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--cream-card-elevated, #fff);
  border: 1px solid var(--border-paper);
  border-radius: 6px;
  padding: 8px 14px;
}

.pbo-stat {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 1px;
}

.pbo-stat-lbl {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ink-soft);
}

.pbo-stat-num {
  font-family: var(--font-mono, monospace);
  font-size: 14px;
  font-weight: 700;
}

.pbo-stat-divider {
  width: 1px;
  height: 24px;
  background: var(--border-paper);
}

.pts-nav-tabs {
  display: flex;
  gap: 4px;
  background: var(--cream-2);
  border: 1px solid var(--border-paper);
  border-radius: 8px;
  padding: 4px;
  margin-bottom: 12px;
}

.pts-tab {
  flex: 1;
  background: transparent;
  border: none;
  border-radius: 6px;
  padding: 7px 12px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink-secondary);
  cursor: pointer;
  transition: all 0.15s ease;
  text-align: center;
}

.pts-tab:hover {
  color: var(--ink);
}

.pts-tab.active {
  background: var(--cream-card-elevated, #fff);
  color: var(--ink);
  font-weight: 700;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
  border: 1px solid rgba(0, 0, 0, 0.04);
}

.pts-transactions-list {
  max-height: 380px;
  overflow-y: auto;
  border: 1px solid var(--border-paper);
  border-radius: 8px;
  background: var(--cream-card-elevated, #fff);
  scrollbar-width: thin;
}

.pts-transactions-list::-webkit-scrollbar {
  width: 5px;
}

.pts-transactions-list::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.15);
  border-radius: 4px;
}

.pts-tx-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border-paper);
  gap: 14px;
  transition: background 0.12s ease;
}

.pts-tx-row:last-child {
  border-bottom: none;
}

.pts-tx-row:hover {
  background: var(--cream-2);
}

.pts-tx-icon-box {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  font-weight: 800;
  flex-shrink: 0;
  line-height: 1;
}

.pts-tx-icon-box.icon-addition {
  background: rgba(16, 185, 129, 0.1);
  color: #059669;
  border: 1px solid rgba(16, 185, 129, 0.22);
}

.pts-tx-icon-box.icon-deduction {
  background: rgba(225, 29, 72, 0.08);
  color: #e11d48;
  border: 1px solid rgba(225, 29, 72, 0.2);
}

.pts-tx-arrow {
  font-size: 15px;
  font-weight: 800;
}

.pts-tx-details {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1;
  gap: 3px;
}

.pts-tx-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pts-tx-meta {
  font-size: 11px;
  color: var(--ink-secondary);
  display: flex;
  align-items: center;
  gap: 6px;
}

.pts-tx-time {
  color: var(--ink-soft);
  font-family: var(--font-mono, monospace);
  font-size: 10.5px;
}

.pts-tx-sep {
  color: var(--ink-soft);
  font-size: 11px;
}

.pts-tx-cat {
  color: var(--ink-secondary);
  font-weight: 500;
}

.pts-tx-values {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  flex-shrink: 0;
  gap: 2px;
}

.pts-tx-amt {
  font-family: var(--font-mono, monospace);
  font-size: 13.5px;
  font-weight: 700;
  white-space: nowrap;
}

.pts-tx-amt small {
  font-size: 11px;
  font-weight: 600;
  color: var(--ink-secondary);
}

.pts-tx-bal {
  font-family: var(--font-mono, monospace);
  font-size: 10.5px;
  color: var(--ink-soft);
  white-space: nowrap;
}

.pts-empty-state {
  padding: 44px 16px;
  text-align: center;
  color: var(--ink-soft);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.pts-empty-icon {
  font-size: 26px;
  opacity: 0.6;
}

.pts-empty-state h4 {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
}

.pts-empty-state p {
  margin: 0;
  font-size: 12px;
  max-width: 300px;
  line-height: 1.4;
  color: var(--ink-secondary);
}

@media (max-width: 540px) {
  .pts-balance-overview {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }
  .pbo-stats {
    justify-content: space-around;
  }
}