/* ============================================================
   KIVU CHALLENGE ENGINE — Tailwind-Compatible Utility Classes
   These classes are used by challenge.html but not present in
   the pre-built output.css. Generated manually.
   ============================================================ */

/* === SAFE AREAS (iOS notch) === */
.safe-top { padding-top: env(safe-area-inset-top, 0px); }
.safe-bottom { padding-bottom: env(safe-area-inset-bottom, 0px); }
.safe-top-padding { padding-top: env(safe-area-inset-top, 0px); }

/* === NO SCROLLBAR === */
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

/* === FONT SMOOTHING & TEXT QUALITY === */
#module-challenge {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* === ANIMATION: slide-up (modal entrance) === */
@keyframes slideUp {
  from { transform: translateY(100%); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}
.animate-slide-up { animation: slideUp 0.3s ease-out; }

/* === ARBITRARY BACKGROUND COLORS === */
.bg-\[\#0c0f17\] { background-color: #0c0f17; }
.bg-\[\#131826\] { background-color: #131826; }
.bg-\[\#131826\]\/90 { background-color: rgb(19 24 38 / 0.9); }
.bg-\[\#131826\]\/70 { background-color: rgb(19 24 38 / 0.7); }
.bg-\[\#161c2e\] { background-color: #161c2e; }
.bg-\[\#151b2c\] { background-color: #151b2c; }
.bg-\[\#141926\] { background-color: #141926; }
.bg-\[\#0f131f\] { background-color: #0f131f; }
.bg-\[\#0f1424\] { background-color: #0f1424; }
.bg-\[\#181f33\] { background-color: #181f33; }
.bg-\[\#141a29\] { background-color: #141a29; }
.bg-\[\#151a28\] { background-color: #151a28; }

/* === AMBER PALETTE === */
.text-amber-300 { color: #fcd34d; }
.text-amber-300\/80 { color: rgb(252 211 77 / 0.8); }
.text-amber-400 { color: #fbbf24; }
.text-amber-400\/90 { color: rgb(251 191 36 / 0.9); }
.text-amber-500 { color: #f59e0b; }
.text-amber-500\/80 { color: rgb(245 158 11 / 0.8); }
.text-amber-600 { color: #d97706; }
.bg-amber-400 { background-color: #fbbf24; }
.bg-amber-500 { background-color: #f59e0b; }
.bg-amber-500\/10 { background-color: rgb(245 158 11 / 0.1); }
.bg-amber-500\/15 { background-color: rgb(245 158 11 / 0.15); }
.bg-amber-500\/20 { background-color: rgb(245 158 11 / 0.2); }
.bg-amber-600 { background-color: #d97706; }
.border-amber-400 { border-color: #fbbf24; }
.border-amber-400\/20 { border-color: rgb(251 191 36 / 0.2); }
.border-amber-400\/30 { border-color: rgb(251 191 36 / 0.3); }
.border-amber-400\/40 { border-color: rgb(251 191 36 / 0.4); }
.border-amber-500\/20 { border-color: rgb(245 158 11 / 0.2); }
.border-amber-500\/30 { border-color: rgb(245 158 11 / 0.3); }
.border-amber-500\/40 { border-color: rgb(245 158 11 / 0.4); }
.border-amber-700 { border-color: #b45309; }
.border-t-amber-400 { border-top-color: #fbbf24; }
.hover\:bg-amber-400:hover { background-color: #fbbf24; }
.hover\:bg-amber-500:hover { background-color: #f59e0b; }
.shadow-amber-500\/20 { --tw-shadow-color: rgb(245 158 11 / 0.2); box-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(245 158 11 / 0.2)); }
.shadow-amber-500\/30 { --tw-shadow-color: rgb(245 158 11 / 0.3); box-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(245 158 11 / 0.3)); }
.from-amber-500 { --tw-gradient-from: #f59e0b; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgb(245 158 11 / 0)); }
.from-amber-500\/10 { --tw-gradient-from: rgb(245 158 11 / 0.1); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgb(245 158 11 / 0)); }
.from-amber-500\/20 { --tw-gradient-from: rgb(245 158 11 / 0.2); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgb(245 158 11 / 0)); }
.from-\[\#161d2d\] { --tw-gradient-from: #161d2d; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgb(22 29 45 / 0)); }
.via-\[\#131927\] { --tw-gradient-stops: var(--tw-gradient-from), #131927, var(--tw-gradient-to, rgb(19 25 39 / 0)); }
.to-\[\#0d121c\] { --tw-gradient-to: #0d121c; }
.to-\[\#101420\] { --tw-gradient-to: #101420; }
.from-\[\#182136\] { --tw-gradient-from: #182136; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgb(24 33 54 / 0)); }
.via-\[\#141a29\] { --tw-gradient-stops: var(--tw-gradient-from), #141a29, var(--tw-gradient-to, rgb(20 26 41 / 0)); }
.to-\[\#0c0f17\] { --tw-gradient-to: #0c0f17; }
.via-\[\#181f33\] { --tw-gradient-stops: var(--tw-gradient-from), #181f33, var(--tw-gradient-to, rgb(24 31 51 / 0)); }
.to-\[\#0f1424\] { --tw-gradient-to: #0f1424; }
.from-emerald-950\/30 { --tw-gradient-from: rgb(2 44 34 / 0.3); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgb(2 44 34 / 0)); }
.from-\[\#10241b\] { --tw-gradient-from: #10241b; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgb(16 36 27 / 0)); }
.to-\[\#121724\] { --tw-gradient-to: #121724; }
.to-\[\#141a29\] { --tw-gradient-to: #141a29; }
.from-pink-900\/30 { --tw-gradient-from: rgb(131 24 67 / 0.3); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgb(131 24 67 / 0)); }
.to-purple-900\/20 { --tw-gradient-to: rgb(88 28 135 / 0.2); }
.to-rose-500 { --tw-gradient-to: #f43f5e; }

/* === YELLOW PALETTE (gradient targets) === */
.to-yellow-400 { --tw-gradient-to: #facc15; }
.to-yellow-500 { --tw-gradient-to: #eab308; }

/* === EMERALD PALETTE === */
.text-emerald-300 { color: #6ee7b7; }
.bg-emerald-500\/10 { background-color: rgb(16 185 129 / 0.1); }
.bg-emerald-500\/20 { background-color: rgb(16 185 129 / 0.2); }
.border-emerald-400 { border-color: #34d399; }
.border-emerald-500\/20 { border-color: rgb(16 185 129 / 0.2); }
.border-emerald-500\/30 { border-color: rgb(16 185 129 / 0.3); }
.hover\:bg-emerald-500:hover { background-color: #10b981; }
.from-emerald-500 { --tw-gradient-from: #10b981; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgb(16 185 129 / 0)); }
.shadow-emerald-500\/20 { --tw-shadow-color: rgb(16 185 129 / 0.2); }

/* === TEAL (gradient target) === */
.to-teal-400 { --tw-gradient-to: #2dd4bf; }

/* === PURPLE PALETTE === */
.bg-purple-500\/20 { background-color: rgb(168 85 247 / 0.2); }
.border-purple-500\/30 { border-color: rgb(168 85 247 / 0.3); }

/* === RED/PINK extras === */
.shadow-red-600\/30 { --tw-shadow-color: rgb(220 38 38 / 0.3); box-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(220 38 38 / 0.3)); }
.border-red-500\/20 { border-color: rgb(239 68 68 / 0.2); }
.border-red-500\/30 { border-color: rgb(239 68 68 / 0.3); }

/* === PINK badges (platform indicators injected by JS) === */
.text-pink-300 { color: #f9a8d4; }
.text-pink-400 { color: #f472b6; }
.bg-pink-500\/20 { background-color: rgb(236 72 153 / 0.2); }
.border-pink-500\/30 { border-color: rgb(236 72 153 / 0.3); }

/* === GRAY alpha extras === */
.bg-black\/30 { background-color: rgb(0 0 0 / 0.3); }
.bg-black\/35 { background-color: rgb(0 0 0 / 0.35); }
.bg-black\/40 { background-color: rgb(0 0 0 / 0.4); }
.bg-black\/50 { background-color: rgb(0 0 0 / 0.5); }
.bg-black\/60 { background-color: rgb(0 0 0 / 0.6); }
.bg-black\/80 { background-color: rgb(0 0 0 / 0.8); }
.bg-\[\#131826\]\/95 { background-color: rgb(19 24 38 / 0.95); }
.bg-\[\#101422\] { background-color: #101422; }
.bg-\[\#121724\] { background-color: #121724; }
.bg-\[\#131927\] { background-color: #131927; }
.bg-\[\#0d121c\] { background-color: #0d121c; }
.border-white\/5 { border-color: rgb(255 255 255 / 0.05); }
.border-white\/10 { border-color: rgb(255 255 255 / 0.1); }
.border-white\/20 { border-color: rgb(255 255 255 / 0.2); }

/* === Additional colors and borders === */
.bg-amber-500\/30 { background-color: rgb(245 158 11 / 0.3); }
.from-amber-500\/15 { --tw-gradient-from: rgb(245 158 11 / 0.15); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgb(245 158 11 / 0)); }
.bg-emerald-500 { background-color: #10b981; }
.border-emerald-500\/40 { border-color: rgb(16 185 129 / 0.4); }
.bg-blue-500\/15 { background-color: rgb(59 130 246 / 0.15); }
.bg-blue-500\/20 { background-color: rgb(59 130 246 / 0.2); }
.bg-blue-600 { background-color: #2563eb; }
.border-blue-500\/20 { border-color: rgb(59 130 246 / 0.2); }
.border-blue-500\/30 { border-color: rgb(59 130 246 / 0.3); }
.bg-cyan-500 { background-color: #06b6d4; }
.bg-cyan-500\/10 { background-color: rgb(6 182 212 / 0.1); }
.bg-cyan-500\/20 { background-color: rgb(6 182 212 / 0.2); }
.border-cyan-500\/20 { border-color: rgb(6 182 212 / 0.2); }
.border-cyan-500\/30 { border-color: rgb(6 182 212 / 0.3); }
/* Referrals & Quests screen (challenge-growth.js) */
.bg-cyan-500\/15 { background-color: rgb(6 182 212 / 0.15); }
.border-cyan-500\/40 { border-color: rgb(6 182 212 / 0.4); }
.hover\:border-cyan-500\/40:hover { border-color: rgb(6 182 212 / 0.4); }
.from-cyan-500\/15 { --tw-gradient-from: rgb(6 182 212 / 0.15); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgb(6 182 212 / 0)); }
.text-cyan-400 { color: #22d3ee; }
.bg-teal-500\/20 { background-color: rgb(20 184 166 / 0.2); }
.border-teal-500\/30 { border-color: rgb(20 184 166 / 0.3); }
.text-teal-300 { color: #5eead4; }
.border-purple-500\/40 { border-color: rgb(168 85 247 / 0.4); }
.text-purple-300 { color: #d8b4fe; }
.border-pink-500\/40 { border-color: rgb(236 72 153 / 0.4); }
.text-pink-200 { color: #fbcfe8; }
.bg-yellow-500\/20 { background-color: rgb(234 179 8 / 0.2); }
.bg-gray-500\/20 { background-color: rgb(107 114 128 / 0.2); }
.border-gray-500\/30 { border-color: rgb(107 114 128 / 0.3); }
.bg-red-500\/10 { background-color: rgb(239 68 68 / 0.1); }
.bg-rose-500\/20 { background-color: rgb(244 63 94 / 0.2); }
.border-rose-500\/40 { border-color: rgb(244 63 94 / 0.4); }
.text-rose-300 { color: #fda4af; }
.text-rose-400 { color: #fb7185; }
.text-rose-500 { color: #f43f5e; }
.text-gray-100 { color: #f3f4f6; }
.text-gray-300\/80 { color: rgb(209 213 219 / 0.8); }

/* === PADDINGS & SPACING === */
.px-2\.5 { padding-left: 0.625rem; padding-right: 0.625rem; }
.py-0\.5 { padding-top: 0.125rem; padding-bottom: 0.125rem; }
.p-0\.5 { padding: 0.125rem; }
.p-2\.5 { padding: 0.625rem; }
.p-3\.5 { padding: 0.875rem; }
.pt-2\.5 { padding-top: 0.625rem; }
.pb-28 { padding-bottom: 7rem; }
.pl-5 { padding-left: 1.25rem; }
.mr-1\.5 { margin-right: 0.375rem; }
.mr-auto { margin-right: auto; }
.h-2\.5 { height: 0.625rem; }
.h-5 { height: 1.25rem; }
.min-w-\[22px\] { min-width: 22px; }

.gap-1\.5 { gap: 0.375rem; }
.gap-2\.5 { gap: 0.625rem; }
.gap-3\.5 { gap: 0.875rem; }

.space-y-1\.5 > :not([hidden]) ~ :not([hidden]) { margin-top: 0.375rem; }
.space-y-2\.5 > :not([hidden]) ~ :not([hidden]) { margin-top: 0.625rem; }
.space-y-3\.5 > :not([hidden]) ~ :not([hidden]) { margin-top: 0.875rem; }

/* === TYPOGRAPHY & TEXT SIZES === */
.text-\[9px\] { font-size: 9px; line-height: 13px; }
.text-\[10px\] { font-size: 10px; line-height: 14px; }
.text-\[11px\] { font-size: 11px; line-height: 16px; }
.text-\[12px\] { font-size: 12px; line-height: 16px; }
.text-\[13px\] { font-size: 13px; line-height: 18px; }

.tracking-tight { letter-spacing: -0.025em; }
.tracking-wide { letter-spacing: 0.025em; }
.tracking-wider { letter-spacing: 0.05em; }
.tracking-widest { letter-spacing: 0.1em; }

.leading-snug { line-height: 1.375; }
.leading-normal { line-height: 1.5; }
.leading-relaxed { line-height: 1.625; }

/* === LINE CLAMP (compact cards) === */
.line-clamp-3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.cursor-pointer { cursor: pointer; }
.flex-nowrap { flex-wrap: nowrap; }
.max-w-\[140px\] { max-width: 140px; }
.overflow-hidden { overflow: hidden; }
.space-y-2 > :not(:first-child) { margin-top: 0.5rem; }
.py-0 { padding-top: 0; padding-bottom: 0; }

/* === BUG BOUNTY: Severity & Status Badge Colors === */
.bg-red-500\/15 { background-color: rgb(239 68 68 / 0.15); }
.bg-red-500\/5 { background-color: rgb(239 68 68 / 0.05); }
.bg-red-500\/10 { background-color: rgb(239 68 68 / 0.1); }
.bg-red-500\/20 { background-color: rgb(239 68 68 / 0.2); }
.bg-red-400\/10 { background-color: rgb(248 113 113 / 0.1); }
.bg-red-400\/15 { background-color: rgb(248 113 113 / 0.15); }
.text-red-300 { color: rgb(252 165 165); }
.text-red-400 { color: rgb(248 113 113); }
.border-red-500\/20 { border-color: rgb(239 68 68 / 0.2); }
.border-red-500\/25 { border-color: rgb(239 68 68 / 0.25); }
.border-red-500\/30 { border-color: rgb(239 68 68 / 0.3); }
.border-red-500\/40 { border-color: rgb(239 68 68 / 0.4); }
.border-red-400\/25 { border-color: rgb(248 113 113 / 0.25); }
.border-red-400\/30 { border-color: rgb(248 113 113 / 0.3); }
.shadow-red-500\/20 { --tw-shadow-color: rgb(239 68 68 / 0.2); --tw-shadow: 0 4px 6px -1px var(--tw-shadow-color); box-shadow: var(--tw-shadow); }
.shadow-red-600\/20 { --tw-shadow-color: rgb(220 38 38 / 0.2); --tw-shadow: 0 4px 6px -1px var(--tw-shadow-color); box-shadow: var(--tw-shadow); }
.via-red-600 { --tw-gradient-via: rgb(220 38 38); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-via), var(--tw-gradient-to); }
.bg-gray-500\/15 { background-color: rgb(107 114 128 / 0.15); }
.border-gray-500\/30 { border-color: rgb(107 114 128 / 0.3); }
.bg-emerald-500\/15 { background-color: rgb(16 185 129 / 0.15); }
.border-emerald-500\/30 { border-color: rgb(16 185 129 / 0.3); }
.bg-amber-400\/15 { background-color: rgb(251 191 36 / 0.15); }
.border-amber-400\/30 { border-color: rgb(251 191 36 / 0.3); }
.whitespace-pre-wrap { white-space: pre-wrap; }
.focus\:border-red-400:focus { border-color: rgb(248 113 113); }

/* === BABY 2027: Celebratory Teal & Badge Colors === */
.bg-teal-400 { background-color: #2dd4bf !important; }
.bg-teal-500 { background-color: #14b8a6 !important; }
.hover\:bg-teal-400:hover { background-color: #2dd4bf !important; }
.hover\:bg-teal-500:hover { background-color: #14b8a6 !important; }
.bg-teal-500\/10 { background-color: rgb(20 184 166 / 0.1); }
.bg-teal-500\/15 { background-color: rgb(20 184 166 / 0.15); }
.bg-teal-500\/20 { background-color: rgb(20 184 166 / 0.2); }
.bg-teal-500\/25 { background-color: rgb(20 184 166 / 0.25); }
.bg-teal-500\/30 { background-color: rgb(20 184 166 / 0.3); }
.bg-teal-400\/10 { background-color: rgb(45 212 191 / 0.1); }
.bg-teal-400\/15 { background-color: rgb(45 212 191 / 0.15); }
.bg-teal-400\/20 { background-color: rgb(45 212 191 / 0.2); }
.text-teal-200\/70 { color: rgb(153 246 228 / 0.7); }
.text-teal-300 { color: rgb(94 234 212); }
.text-teal-400 { color: rgb(45 212 191); }
.border-teal-500\/20 { border-color: rgb(20 184 166 / 0.2); }
.border-teal-500\/25 { border-color: rgb(20 184 166 / 0.25); }
.border-teal-500\/30 { border-color: rgb(20 184 166 / 0.3); }
.border-teal-500\/35 { border-color: rgb(20 184 166 / 0.35); }
.border-teal-500\/40 { border-color: rgb(20 184 166 / 0.4); }
.border-teal-400\/25 { border-color: rgb(45 212 191 / 0.25); }
.border-teal-400\/30 { border-color: rgb(45 212 191 / 0.3); }
.border-teal-400\/35 { border-color: rgb(45 212 191 / 0.35); }
.border-teal-400\/40 { border-color: rgb(45 212 191 / 0.4); }
.shadow-teal-500\/20 { --tw-shadow-color: rgb(20 184 166 / 0.2); --tw-shadow: 0 4px 6px -1px var(--tw-shadow-color); box-shadow: var(--tw-shadow); }
.from-teal-400 { --tw-gradient-from: #2dd4bf; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgb(45 212 191 / 0)); }
.via-teal-500 { --tw-gradient-via: #14b8a6; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-via), var(--tw-gradient-to); }
.focus\:border-teal-400:focus { border-color: rgb(45 212 191); }

/* === ANIMATIONS === */
@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
.animate-spin { animation: spin 1s linear infinite; }

/* === Z-INDEX for modals === */
.z-\[70\] { z-index: 70; }
.z-\[75\] { z-index: 75; }
.z-\[80\] { z-index: 80; }

/* === SIZING: fixed-size submit button === */
.w-9 { width: 2.25rem; /* 36px */ }
.min-w-\[36px\] { min-width: 36px; }

/* === LEADERBOARD MATRIX === */
.c-lb-matrix {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  background: #0c0f17;
}

/* Header row: sticky at top */
.c-lb-header {
  display: flex;
  position: sticky;
  top: 0;
  z-index: 10;
  background: #131826;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  flex-shrink: 0;
}

/* Body: vertical scroll */
.c-lb-body {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
}

/* Fixed left column (rank + avatar + name + votes + vote btn) */
.c-lb-fixed {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 180px;
  min-width: 180px;
  padding: 8px 8px 8px 10px;
  position: sticky;
  left: 0;
  z-index: 5;
  background: inherit;
  flex-shrink: 0;
}

/* Search cell in header */
.c-lb-search-cell {
  flex-direction: column;
  gap: 3px !important;
  padding: 8px 8px 6px 10px !important;
  background: #131826 !important;
}

.c-lb-search-wrap {
  display: flex;
  align-items: center;
  gap: 5px;
  background: rgba(0,0,0,0.4);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 8px;
  padding: 4px 8px;
  width: 100%;
}

.c-lb-search-input {
  background: transparent;
  border: none;
  outline: none;
  color: white;
  font-size: 11px;
  width: 100%;
  font-weight: 500;
}
.c-lb-search-input::placeholder { color: rgba(156,163,175,0.6); }

.c-lb-vote-hint {
  font-size: 9px;
  color: rgba(156,163,175,0.5);
  text-align: center;
  font-weight: 700;
}

/* Scrollable right area for module columns */
.c-lb-scroll-row {
  display: flex;
  overflow-x: auto;
  flex: 1;
  align-items: center;
}

/* Column header in the header row */
.c-lb-col-hdr {
  width: 44px;
  min-width: 44px;
  text-align: center;
  padding: 6px 2px;
  font-size: 10px;
  font-weight: 900;
  color: #fbbf24;
  line-height: 1.2;
  flex-shrink: 0;
}
.c-lb-col-sub {
  font-size: 8px;
  font-weight: 600;
  color: rgba(156,163,175,0.7);
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Participant row */
.c-lb-row {
  display: flex;
  border-bottom: 1px solid rgba(255,255,255,0.04);
  background: #0c0f17;
  transition: background 0.15s;
}
.c-lb-row:hover { background: #131826; }

/* Elements within fixed left column */
.c-lb-rank {
  width: 24px;
  text-align: center;
  flex-shrink: 0;
}
.c-lb-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid rgba(255,255,255,0.1);
  background: #1e293b;
  flex-shrink: 0;
}
.c-lb-info {
  flex: 1;
  min-width: 0;
  overflow: hidden;
}
.c-lb-name {
  font-size: 11px;
  font-weight: 900;
  color: white;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.2;
}
.c-lb-votes {
  font-size: 10px;
  color: #fbbf24;
  font-weight: 700;
}

/* Vote button */
.c-lb-vote-btn {
  width: 26px;
  height: 26px;
  min-width: 26px;
  border-radius: 8px;
  background: rgba(239,68,68,0.15);
  border: 1px solid rgba(239,68,68,0.25);
  color: #f87171;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  cursor: pointer;
  transition: all 0.15s;
  flex-shrink: 0;
}
.c-lb-vote-btn:hover {
  background: rgba(239,68,68,0.3);
  border-color: rgba(239,68,68,0.5);
  transform: scale(1.1);
}
.c-lb-vote-btn:active { transform: scale(0.9); }

/* Individual cell in the scrollable area */
.c-lb-cell {
  width: 44px;
  min-width: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px 0;
  flex-shrink: 0;
}
.c-lb-cell a { display: flex; }

/* Header scroll area styling */
.c-lb-hdr-scroll {
  border-left: 1px solid rgba(255,255,255,0.05);
}

/* Red/blue color extras for leaderboard */
.bg-red-600 { background-color: #dc2626; }

/* === SCOUT INVESTORS: Blue & Indigo Theme === */
.bg-blue-500 { background-color: #3b82f6 !important; }
.bg-blue-600 { background-color: #2563eb !important; }
.hover\:bg-blue-500:hover { background-color: #3b82f6 !important; }
.hover\:bg-blue-600:hover { background-color: #2563eb !important; }
.bg-blue-500\/10 { background-color: rgb(59 130 246 / 0.1); }
.bg-blue-500\/15 { background-color: rgb(59 130 246 / 0.15); }
.bg-blue-500\/20 { background-color: rgb(59 130 246 / 0.2); }
.bg-blue-500\/25 { background-color: rgb(59 130 246 / 0.25); }
.bg-blue-500\/30 { background-color: rgb(59 130 246 / 0.3); }
.bg-blue-400\/10 { background-color: rgb(96 165 250 / 0.1); }
.bg-blue-400\/15 { background-color: rgb(96 165 250 / 0.15); }
.bg-blue-400\/20 { background-color: rgb(96 165 250 / 0.2); }
.text-blue-300 { color: rgb(147 197 253); }
.text-blue-400 { color: rgb(96 165 250); }
.border-blue-500\/20 { border-color: rgb(59 130 246 / 0.2); }
.border-blue-500\/25 { border-color: rgb(59 130 246 / 0.25); }
.border-blue-500\/30 { border-color: rgb(59 130 246 / 0.3); }
.border-blue-500\/40 { border-color: rgb(59 130 246 / 0.4); }
.border-blue-400\/30 { border-color: rgb(96 165 250 / 0.3); }
.shadow-blue-500\/20 { --tw-shadow-color: rgb(59 130 246 / 0.2); --tw-shadow: 0 4px 6px -1px var(--tw-shadow-color); box-shadow: var(--tw-shadow); }
.bg-indigo-500\/15 { background-color: rgb(99 102 241 / 0.15); }
.border-indigo-500\/30 { border-color: rgb(99 102 241 / 0.3); }
.text-indigo-400 { color: rgb(129 140 248); }

/* === MOTO DRIVERS: Amber & Golden Jackpot Theme === */
.bg-amber-400 { background-color: #fbbf24 !important; }
.bg-amber-500 { background-color: #f59e0b !important; }
.hover\:bg-amber-400:hover { background-color: #fbbf24 !important; }
.hover\:bg-amber-500:hover { background-color: #f59e0b !important; }
.bg-amber-500\/10 { background-color: rgb(245 158 11 / 0.1); }
.bg-amber-500\/15 { background-color: rgb(245 158 11 / 0.15); }
.bg-amber-500\/20 { background-color: rgb(245 158 11 / 0.2); }
.bg-amber-500\/25 { background-color: rgb(245 158 11 / 0.25); }
.bg-amber-500\/30 { background-color: rgb(245 158 11 / 0.3); }
.bg-amber-400\/10 { background-color: rgb(251 191 36 / 0.1); }
.bg-amber-400\/20 { background-color: rgb(251 191 36 / 0.2); }
.text-amber-300 { color: rgb(252 211 77); }
.text-amber-400 { color: rgb(251 191 36); }
.border-amber-500\/20 { border-color: rgb(245 158 11 / 0.2); }
.border-amber-500\/25 { border-color: rgb(245 158 11 / 0.25); }
.border-amber-500\/30 { border-color: rgb(245 158 11 / 0.3); }
.border-amber-500\/40 { border-color: rgb(245 158 11 / 0.4); }
.border-amber-400\/40 { border-color: rgb(251 191 36 / 0.4); }
.shadow-amber-500\/20 { --tw-shadow-color: rgb(245 158 11 / 0.2); --tw-shadow: 0 4px 6px -1px var(--tw-shadow-color); box-shadow: var(--tw-shadow); }
.shadow-amber-400\/30 { --tw-shadow-color: rgb(251 191 36 / 0.3); --tw-shadow: 0 4px 6px -1px var(--tw-shadow-color); box-shadow: var(--tw-shadow); }



/* Growth → Bloggers tab (Session 4, docs/referrals-quests-plan.md): application form inputs */
.px-3\.5 { padding-left: 0.875rem; padding-right: 0.875rem; }
.focus\:border-cyan-400:focus { border-color: rgb(34 211 238); }

/* Creator: сердечко у того, за кого человек уже голосовал (И1 п. 9, 2026-10-20) */
.c-lb-vote-btn.c-lb-voted {
  background: #ef4444;
  border-color: #f87171;
  color: #fff;
}

/* FAQ окно (кнопка FAQ в шапке, 2026-10-22): прокрутка списка и стрелка у вопроса */
.c-faq-scroll { max-height: 70vh; overflow-y: auto; }
.c-faq-item > summary { list-style: none; }
.c-faq-item > summary::-webkit-details-marker { display: none; }
.c-faq-item .c-faq-chev { transition: transform 0.2s; }
.c-faq-item[open] .c-faq-chev { transform: rotate(180deg); }