/* css/style.css — Candle Sensei v2 Professional */

/* ── Base ─────────────────────────────────────────────────── */
* {
  box-sizing: border-box;
}

/* Belt-and-suspenders: define .hidden here so it works even if Tailwind CDN
   is slow to load or blocked. !important beats any ID-level specificity. */
.hidden {
  display: none !important;
}

/* Hard-cap the root so no child can ever widen the page beyond the viewport */
html {
  overflow-x: hidden;
  max-width: 100%;
  width: 100%;
}

body {
  font-family:
    "Inter",
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;
  background: #020617;
  overflow-x: hidden;
  /* Prevent the flex-col body from stretching wider than the viewport */
  max-width: 100%;
  width: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Every direct child of the flex-col body must not force a wider layout.
   min-width:auto (the flex default) lets scroll content leak into body width. */
body > * {
  min-width: 0;
  max-width: 100%;
}

/* ── Animations ──────────────────────────────────────────── */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes fadeInFast {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes slideUp {
  from {
    transform: translateY(100%);
  }
  to {
    transform: translateY(0);
  }
}
@keyframes slideRight {
  from {
    transform: translateX(-16px);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}
@keyframes pulseGlow {
  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(16, 185, 129, 0);
  }
  50% {
    box-shadow: 0 0 24px 4px rgba(16, 185, 129, 0.15);
  }
}
@keyframes ticker {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}
@keyframes shimmer {
  0% {
    background-position: -400px 0;
  }
  100% {
    background-position: 400px 0;
  }
}
@keyframes newBadgePulse {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

.fade-in {
  animation: fadeIn 0.4s ease forwards;
}
.fade-in-fast {
  animation: fadeInFast 0.25s ease forwards;
}
.slide-right {
  animation: slideRight 0.35s ease forwards;
}
.pulse-glow {
  animation: pulseGlow 2.5s ease-in-out infinite;
}

/* ── Modal bottom-sheet on mobile ────────────────────────── */
@media (max-width: 639px) {
  .modal-sheet {
    animation: slideUp 0.28s cubic-bezier(0.32, 0.72, 0, 1) forwards;
  }
}

/* ── Shared modal input ──────────────────────────────────── */
.modal-input {
  width: 100%;
  background: #1f2937;
  border-radius: 0.875rem;
  padding: 0.875rem 1.25rem;
  font-size: 0.875rem;
  border: 1px solid #374151;
  color: #fff;
  outline: none;
  transition:
    border-color 0.15s,
    box-shadow 0.15s;
  -webkit-appearance: none;
  appearance: none;
}
.modal-input:focus {
  border-color: #10b981;
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.15);
}
.modal-input::placeholder {
  color: #6b7280;
}

/* ── Scrollbars ──────────────────────────────────────────── */
::-webkit-scrollbar {
  width: 4px;
  height: 4px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: #374151;
  border-radius: 20px;
}
::-webkit-scrollbar-thumb:hover {
  background: #10b981;
}

.custom-scroll::-webkit-scrollbar {
  width: 4px;
}
.custom-scroll::-webkit-scrollbar-thumb {
  background: #10b981;
  border-radius: 20px;
}
.custom-scroll::-webkit-scrollbar-track {
  background: #1f2937;
}

/* ── Typography ───────────────────────────────────────────── */
.font-mono {
  font-family:
    "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
    "Courier New", monospace;
}

.text-gradient {
  background: linear-gradient(135deg, #10b981 0%, #34d399 60%, #6ee7b7 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.text-gradient-gold {
  background: linear-gradient(135deg, #f59e0b 0%, #fcd34d 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ── Ticker tape ─────────────────────────────────────────── */
.ticker-container {
  overflow: hidden;
  white-space: nowrap;
  background: #020617;
  border-bottom: 1px solid #1f2937;
  position: relative;
}
.ticker-container::before,
.ticker-container::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 40px;
  z-index: 2;
  pointer-events: none;
}
.ticker-container::before {
  left: 0;
  background: linear-gradient(to right, #020617, transparent);
}
.ticker-container::after {
  right: 0;
  background: linear-gradient(to left, #020617, transparent);
}

.ticker-scroll {
  display: inline-block;
  animation: ticker 28s linear infinite;
  will-change: transform;
}
.ticker-scroll:hover {
  animation-play-state: paused;
}

/* ── Card components ──────────────────────────────────────── */
.pro-card {
  background: linear-gradient(145deg, #0f172a 0%, #0d1117 100%);
  border: 1px solid #1e293b;
  border-radius: 1.25rem;
  transition:
    border-color 0.2s,
    box-shadow 0.2s,
    transform 0.2s;
}
.pro-card:hover {
  border-color: rgba(16, 185, 129, 0.35);
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.5),
    0 0 0 1px rgba(16, 185, 129, 0.08);
}

.glass-card {
  background: rgba(15, 23, 42, 0.85);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.06);
}

/* ── Signal confidence bar ────────────────────────────────── */
.signal-confidence-bar {
  height: 4px;
  background: #1e293b;
  border-radius: 9999px;
  overflow: hidden;
  margin-top: 10px;
}
.signal-confidence-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, #10b981, #34d399);
  border-radius: 9999px;
  transition: width 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}

/* ── TradingView chart ────────────────────────────────────── */
#tv-chart {
  height: 300px; /* compact default for mobile */
  min-height: 220px;
  width: 100%;
}
@media (min-width: 480px) {
  #tv-chart {
    height: 360px;
  }
}
@media (min-width: 640px) {
  #tv-chart {
    height: 460px;
  }
}
@media (min-width: 1024px) {
  #tv-chart {
    height: 540px;
  }
}
@media (min-width: 1280px) {
  #tv-chart {
    height: 580px;
  }
}

/* ── Backtester metric cards ──────────────────────────────── */
.metric-card {
  background: #0d1117;
  border: 1px solid #1e293b;
  border-radius: 0.875rem;
  padding: 0.875rem 0.75rem;
  text-align: center;
  transition: border-color 0.2s;
}
.metric-card:hover {
  border-color: #374151;
}

.metric-value {
  font-family: "JetBrains Mono", monospace;
  font-size: 1.35rem;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.02em;
}
.metric-label {
  font-size: 0.6rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #6b7280;
  margin-top: 5px;
}

/* ── Backtester Tier 2 tabs ──────────────────────────────── */
.bt2-tab {
  padding: 6px 14px;
  border-radius: 8px 8px 0 0;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  color: #6b7280;
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  transition: all 0.2s;
  margin-bottom: -1px;
}
.bt2-tab:hover {
  color: #9ca3af;
  background: rgba(255, 255, 255, 0.04);
}
.bt2-tab-active {
  color: #10b981 !important;
  border-bottom-color: #10b981 !important;
  background: rgba(16, 185, 129, 0.06) !important;
}

/* ── Session badges ───────────────────────────────────────── */
.session-badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 2px 8px;
  border-radius: 9999px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.session-london {
  background: rgba(59, 130, 246, 0.15);
  color: #60a5fa;
  border: 1px solid rgba(59, 130, 246, 0.3);
}
.session-ny {
  background: rgba(168, 85, 247, 0.15);
  color: #c084fc;
  border: 1px solid rgba(168, 85, 247, 0.3);
}
.session-asian {
  background: rgba(245, 158, 11, 0.15);
  color: #fbbf24;
  border: 1px solid rgba(245, 158, 11, 0.3);
}
.session-overlap {
  background: rgba(16, 185, 129, 0.15);
  color: #34d399;
  border: 1px solid rgba(16, 185, 129, 0.3);
}
.session-closed {
  background: rgba(107, 114, 128, 0.12);
  color: #9ca3af;
  border: 1px solid rgba(107, 114, 128, 0.25);
}

/* ── Course progress bar ──────────────────────────────────── */
.course-progress-bar {
  height: 3px;
  background: #1e293b;
  border-radius: 9999px;
  overflow: hidden;
}
.course-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #10b981, #34d399);
  border-radius: 9999px;
  transition: width 0.7s ease;
}

/* ── Skeleton shimmer ─────────────────────────────────────── */
.skeleton {
  background: linear-gradient(90deg, #1e293b 25%, #293548 50%, #1e293b 75%);
  background-size: 400px 100%;
  animation: shimmer 1.6s ease-in-out infinite;
  border-radius: 0.75rem;
}

/* ── NEW signal badge ─────────────────────────────────────── */
.new-badge {
  background: #10b981;
  color: #052e16;
  font-size: 9px;
  font-weight: 800;
  padding: 1px 6px;
  border-radius: 999px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  animation: newBadgePulse 2s ease-in-out infinite;
}

/* ── Signal filter tabs ───────────────────────────────────── */
.sig-tab {
  padding: 6px 16px;
  border-radius: 9999px;
  font-size: 11px;
  font-weight: 600;
  border: 1px solid #374151;
  background: transparent;
  color: #9ca3af;
  cursor: pointer;
  transition: all 0.15s;
  white-space: nowrap;
}
.sig-tab:hover {
  border-color: #10b981;
  color: #10b981;
}
.sig-tab.active {
  background: #10b981;
  border-color: #10b981;
  color: #020617;
}

/* ── Bot builder tag-selected ─────────────────────────────── */
.tag-selected {
  border-color: #10b981 !important;
  background: #052e16 !important;
  color: #6ee7b7 !important;
}

/* ── Analysis verdict panel gradient ─────────────────────── */
.verdict-panel-buy {
  background: linear-gradient(
    135deg,
    rgba(6, 78, 59, 0.55) 0%,
    rgba(15, 23, 42, 0.9) 100%
  );
  border: 1px solid rgba(16, 185, 129, 0.35);
}
.verdict-panel-sell {
  background: linear-gradient(
    135deg,
    rgba(136, 19, 55, 0.45) 0%,
    rgba(15, 23, 42, 0.9) 100%
  );
  border: 1px solid rgba(244, 63, 94, 0.35);
}
.verdict-panel-neutral {
  background: linear-gradient(
    135deg,
    rgba(120, 80, 0, 0.35) 0%,
    rgba(15, 23, 42, 0.9) 100%
  );
  border: 1px solid rgba(245, 158, 11, 0.3);
}

/* ── Mobile tap targets ───────────────────────────────────── */
@media (max-width: 639px) {
  button,
  a,
  [onclick] {
    -webkit-tap-highlight-color: transparent;
  }
  select {
    font-size: 16px;
  }
  input[type="text"],
  input[type="number"],
  input[type="email"],
  textarea {
    font-size: 16px;
  }
}

/* ── FAQ details arrow ────────────────────────────────────── */
details > summary {
  cursor: pointer;
}
details > summary::-webkit-details-marker {
  display: none;
}

/* ── Hover scale (non-touch only) ────────────────────────── */
@media (hover: hover) {
  .hover\:scale-105:hover {
    transform: scale(1.05);
  }
}

/* ── Price level visual bar ───────────────────────────────── */
.price-level-bar {
  position: relative;
  height: 6px;
  background: #1e293b;
  border-radius: 9999px;
  margin: 10px 0;
  overflow: visible;
}
.price-level-bar-fill-buy {
  background: linear-gradient(
    90deg,
    rgba(244, 63, 94, 0.4),
    rgba(16, 185, 129, 0.4)
  );
  height: 100%;
  border-radius: 9999px;
}
.price-level-bar-fill-sell {
  background: linear-gradient(
    90deg,
    rgba(16, 185, 129, 0.4),
    rgba(244, 63, 94, 0.4)
  );
  height: 100%;
  border-radius: 9999px;
}
.price-dot {
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 2px solid #020617;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.6);
}

/* ── Nav active indicator ─────────────────────────────────── */
.nav-active {
  color: #10b981 !important;
}

/* ── Loading spinner ──────────────────────────────────────── */
.spinner {
  width: 16px;
  height: 16px;
  border: 2px solid #374151;
  border-top-color: #10b981;
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
  display: inline-block;
}

/* ── Course lesson row hover ──────────────────────────────── */
.lesson-row {
  transition: background 0.15s;
}
.lesson-row:hover {
  background: rgba(31, 41, 55, 0.5);
}

/* ── Broker connect animation ─────────────────────────────── */
@keyframes connectPulse {
  0%,
  100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.06);
  }
}
.connecting-pulse {
  animation: connectPulse 1s ease-in-out infinite;
}

/* ── Scanner tool tabs ────────────────────────────────────── */
.stab {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 7px 14px;
  border-radius: 9999px;
  font-size: 11px;
  font-weight: 600;
  border: 1px solid #374151;
  background: transparent;
  color: #9ca3af;
  cursor: pointer;
  transition: all 0.15s;
  white-space: nowrap;
  flex-shrink: 0;
}
.stab:hover {
  border-color: #10b981;
  color: #10b981;
}
.stab-active {
  background: #052e16;
  border-color: #10b981;
  color: #34d399;
}

/* ── Live dot ─────────────────────────────────────────────── */
@keyframes livePulse {
  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.6);
  }
  50% {
    box-shadow: 0 0 0 5px rgba(16, 185, 129, 0);
  }
}
.live-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  background: #10b981;
  border-radius: 50%;
  animation: livePulse 1.8s ease-in-out infinite;
  flex-shrink: 0;
}

/* ── Offer cards ──────────────────────────────────────────── */
.offer-card {
  position: relative;
  background: linear-gradient(160deg, #0f172a 0%, #0a0f1e 100%);
  border: 1px solid #1e293b;
  border-radius: 1.5rem;
  padding: 1.5rem;
  transition:
    border-color 0.2s,
    box-shadow 0.2s;
}
.offer-card:hover {
  border-color: rgba(16, 185, 129, 0.3);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5);
}
.offer-featured {
  background: linear-gradient(160deg, #052e16 0%, #0a1f14 60%, #0a0f1e 100%);
  border: 2px solid rgba(16, 185, 129, 0.6);
  box-shadow: 0 0 40px rgba(16, 185, 129, 0.08);
}
.offer-featured:hover {
  border-color: #10b981;
  box-shadow: 0 12px 50px rgba(16, 185, 129, 0.15);
}
.offer-vip {
  background: linear-gradient(160deg, #1c1007 0%, #0d0a04 60%, #0a0f1e 100%);
  border-color: rgba(234, 179, 8, 0.25);
}
.offer-vip:hover {
  border-color: rgba(234, 179, 8, 0.5);
}

.offer-tier-badge {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.offer-check {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(16, 185, 129, 0.15);
  color: #10b981;
  border-radius: 4px;
  font-size: 9px;
  font-weight: 900;
  margin-top: 1px;
}
.offer-check-pro {
  background: rgba(16, 185, 129, 0.25);
  color: #34d399;
}
.offer-check-gold {
  background: rgba(234, 179, 8, 0.2);
  color: #fbbf24;
}

/* ── Feature tiles (offers section) ──────────────────────── */
.feature-tile {
  background: #0f172a;
  border: 1px solid #1e293b;
  border-radius: 1rem;
  padding: 1rem;
  transition: border-color 0.2s;
}
.feature-tile:hover {
  border-color: rgba(16, 185, 129, 0.3);
}
.feature-tile-icon {
  font-size: 1.5rem;
  margin-bottom: 0.5rem;
}
.feature-tile-title {
  font-size: 0.8rem;
  font-weight: 700;
  color: #fff;
  margin-bottom: 0.25rem;
}
.feature-tile-desc {
  font-size: 0.7rem;
  color: #6b7280;
  line-height: 1.5;
}

/* ── Quantum Scanner ──────────────────────────────────────── */
@keyframes beastPulse {
  0%,
  100% {
    box-shadow:
      0 0 0 0 rgba(234, 179, 8, 0),
      0 0 24px 2px rgba(234, 179, 8, 0.08);
  }
  50% {
    box-shadow:
      0 0 0 4px rgba(234, 179, 8, 0.12),
      0 0 32px 8px rgba(234, 179, 8, 0.18);
  }
}
@keyframes scanSlide {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(100%);
  }
}

.beast-glow {
  border-color: rgba(234, 179, 8, 0.55) !important;
  animation: beastPulse 2.4s ease-in-out infinite;
}

.beast-badge {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 2px 7px;
  border-radius: 9999px;
  background: rgba(234, 179, 8, 0.18);
  color: #fbbf24;
  border: 1px solid rgba(234, 179, 8, 0.4);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
}

.scanner-card {
  background: linear-gradient(145deg, #0f172a 0%, #0d1117 100%);
  border: 1px solid #1e293b;
  border-radius: 1rem;
  padding: 1rem;
  cursor: pointer;
  transition:
    border-color 0.2s,
    box-shadow 0.2s,
    transform 0.15s;
}
.scanner-card:hover {
  border-color: rgba(16, 185, 129, 0.4);
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.45);
  transform: translateY(-1px);
}

.scan-tab {
  padding: 5px 14px;
  border-radius: 9999px;
  font-size: 11px;
  font-weight: 600;
  border: 1px solid #374151;
  background: transparent;
  color: #9ca3af;
  cursor: pointer;
  transition: all 0.15s;
  white-space: nowrap;
}
.scan-tab:hover {
  border-color: #10b981;
  color: #10b981;
}
.scan-tab.active {
  background: #10b981;
  border-color: #10b981;
  color: #020617;
}

.scan-view-btn {
  padding: 6px 14px;
  border-radius: 0.625rem;
  font-size: 11px;
  font-weight: 600;
  border: 1px solid #374151;
  background: transparent;
  color: #9ca3af;
  cursor: pointer;
  transition: all 0.15s;
}
.scan-view-btn.active {
  background: #1e293b;
  border-color: #374151;
  color: #fff;
}

.beast-alert-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 0.875rem;
  background: rgba(234, 179, 8, 0.07);
  border: 1px solid rgba(234, 179, 8, 0.25);
  transition: background 0.15s;
}
.beast-alert-card:hover {
  background: rgba(234, 179, 8, 0.12);
}

/* Scan progress bar shimmer */
.scan-progress-track {
  background: #1e293b;
  border-radius: 9999px;
  height: 4px;
  overflow: hidden;
  position: relative;
}
.scan-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #10b981, #34d399);
  border-radius: 9999px;
  transition: width 0.28s linear;
}
.scan-progress-fill::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.25) 50%,
    transparent 100%
  );
  animation: scanSlide 1.2s ease-in-out infinite;
}

/* Heatmap table */
.heatmap-table {
  border-collapse: separate;
  border-spacing: 3px;
  width: 100%;
}
.heatmap-table th {
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #6b7280;
  padding: 4px 6px;
  font-weight: 600;
}
.heatmap-table td {
  border-radius: 5px;
}

/* ── Auth Modal ─────────────────────────────────────────────── */
.auth-input {
  background: #1e293b;
  border: 1px solid #334155;
  border-radius: 0.875rem;
  padding: 11px 14px;
  font-size: 13px;
  color: #f1f5f9;
  outline: none;
  transition:
    border-color 0.15s,
    box-shadow 0.15s;
  font-family: inherit;
}
.auth-input:focus {
  border-color: #10b981;
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.12);
}
.auth-input::placeholder {
  color: #475569;
}

.auth-tab {
  background: transparent;
  border: none;
  color: #6b7280;
  cursor: pointer;
  font-family: inherit;
  transition: all 0.15s;
  border-radius: 0.75rem;
}
.auth-tab:hover {
  color: #d1d5db;
}
.auth-tab-active {
  background: #0f172a;
  color: #ffffff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
}
/* Gate tabs share same styles */
.gate-tab {
  background: transparent;
  border: none;
  color: #6b7280;
  cursor: pointer;
  transition: all 0.15s;
  border-radius: 0.75rem;
}
.gate-tab:hover {
  color: #d1d5db;
}
.gate-tab-active {
  background: #0f172a;
  color: #fff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
}

/* ── Payment method tabs (signup wizard) ─────────────────────── */
#suMpesaTab,
#suBinanceTab {
  border: 1.5px solid rgba(255, 255, 255, 0.08);
  background: transparent;
  color: #6b7280;
}
#suMpesaTab:hover,
#suBinanceTab:hover {
  color: #c4b5fd;
  border-color: rgba(139, 92, 246, 0.25);
}
#suMpesaTab.su-method-active,
#suBinanceTab.su-method-active {
  background: rgba(139, 92, 246, 0.15);
  color: #a78bfa;
  border-color: rgba(139, 92, 246, 0.45);
}
.su-copy-btn {
  background: rgba(139, 92, 246, 0.12);
  border: 1px solid rgba(139, 92, 246, 0.3);
  color: #a78bfa;
  border-radius: 5px;
  padding: 2px 8px;
  font-size: 10px;
  font-weight: 600;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.15s;
}
.su-copy-btn:hover {
  background: rgba(139, 92, 246, 0.22);
}
.su-tg-help {
  display: flex;
  align-items: center;
  gap: 4px;
  background: rgba(37, 211, 102, 0.1);
  border: 1px solid rgba(37, 211, 102, 0.3);
  color: #25d366;
  border-radius: 8px;
  padding: 4px 8px;
  font-size: 10px;
  font-weight: 700;
  white-space: nowrap;
  text-decoration: none;
  flex-shrink: 0;
  transition: background 0.15s;
}
.su-tg-help:hover {
  background: rgba(37, 211, 102, 0.2);
}

/* Premium lock overlay */
.premium-lock-overlay {
  position: absolute;
  inset: 0;
  background: rgba(2, 6, 23, 0.82);
  backdrop-filter: blur(2px);
  border-radius: inherit;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  z-index: 10;
}
.premium-lock-overlay::before {
  content: "🔒";
  font-size: 1.5rem;
}
.premium-lock-overlay::after {
  content: "Premium";
  font-size: 10px;
  font-weight: 700;
  color: #fbbf24;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.is-premium-locked {
  position: relative;
}

/* ── Chart Category Buttons ──────────────────────────────────── */
.cat-btn {
  padding: 6px 14px;
  border-radius: 9999px;
  font-size: 11px;
  font-weight: 600;
  border: 1px solid #334155;
  background: transparent;
  color: #9ca3af;
  cursor: pointer;
  transition: all 0.15s;
  flex-shrink: 0;
}
.cat-btn:hover {
  border-color: #10b981;
  color: #10b981;
}
.cat-btn-active {
  background: #064e3b;
  border-color: #10b981;
  color: #34d399;
}

/* TradingView ticker wrapper */
.tradingview-ticker-wrap {
  overflow: hidden;
}
.tradingview-widget-container {
  overflow: hidden;
}

/* ── Responsive — mobile-first fixes ────────────────────────── */
@media (max-width: 479px) {
  /* Hero headings scale down */
  h1.text-3xl {
    font-size: 1.6rem;
  }

  /* Scanner tool tabs: allow horizontal scroll */
  .stab {
    font-size: 10px;
    padding: 5px 10px;
  }

  /* Auth modal full-width on tiny screens */
  #authModal > div {
    border-radius: 1.25rem;
  }

  /* Sensei verdict panel full width below chart on mobile */
  .lg\:w-72 {
    width: 100%;
  }

  /* Offer cards stack to single col */
  .offer-card {
    margin-bottom: 0;
  }
}

@media (max-width: 639px) {
  /* Nav items tighter */
  nav .text-base {
    font-size: 0.875rem;
  }

  /* Analysis controls: pair + timeframe each take half */
  #pairSelect,
  #timeframeSelect {
    min-width: 0;
    font-size: 11px;
  }

  /* Scanner heatmap: smaller cells */
  .heatmap-table td,
  .heatmap-table th {
    font-size: 8px;
    padding: 3px 4px;
  }

  /* Feature grid: 2 cols on mobile */
  .grid-cols-4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* Bot creator full screen */
  .modal-sheet {
    height: 100vh !important;
    border-radius: 0 !important;
  }
}

@media (min-width: 640px) and (max-width: 767px) {
  /* Tablet-small: 3-col feature grid */
  .sm\:grid-cols-4 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 1440px) {
  /* Large screens: wider max-width content */
  .max-w-screen-2xl {
    max-width: 1600px;
  }
}

/* ══════════════════════════════════════════════════════════════
   ANALYSIS TOOL — NEW CREATIVE ELEMENTS
   ══════════════════════════════════════════════════════════════ */

/* Chart glow frame */
.chart-glow-frame {
  position: relative;
  border-radius: 1.125rem;
  overflow: hidden;
  box-shadow:
    0 0 0 1px rgba(16, 185, 129, 0.15),
    0 8px 40px rgba(0, 0, 0, 0.6),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);
  background: #0f172a;
}

/* Fullscreen toggle button — floats in top-right of chart */
#chartFsBtn {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 20;
  background: rgba(15, 23, 42, 0.75);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(16, 185, 129, 0.25);
  color: #94a3b8;
  font-size: 1rem;
  line-height: 1;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition:
    background 0.2s,
    color 0.2s,
    border-color 0.2s;
  min-height: unset;
  padding: 0;
}
#chartFsBtn:hover {
  background: rgba(16, 185, 129, 0.15);
  border-color: rgba(16, 185, 129, 0.5);
  color: #10b981;
}
/* When the frame itself is fullscreen */
.chart-glow-frame:fullscreen,
.chart-glow-frame:-webkit-full-screen {
  border-radius: 0;
  width: 100vw;
  height: 100vh;
}
.chart-glow-frame:fullscreen #tv-chart,
.chart-glow-frame:-webkit-full-screen #tv-chart {
  height: 100vh !important;
  min-height: 100vh !important;
}
.chart-glow-frame::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  border: 1px solid rgba(16, 185, 129, 0.12);
  pointer-events: none;
  z-index: 1;
}

/* MTF Bias Pills */
.mtf-pill {
  padding: 3px 10px;
  border-radius: 9999px;
  font-size: 10px;
  font-weight: 700;
  border: 1px solid #334155;
  white-space: nowrap;
  flex-shrink: 0;
  transition: all 0.3s ease;
  font-family: "JetBrains Mono", monospace;
}
.mtf-neutral {
  background: rgba(51, 65, 85, 0.5);
  color: #64748b;
  border-color: #334155;
}
.mtf-bull {
  background: rgba(6, 78, 59, 0.5);
  color: #34d399;
  border-color: rgba(16, 185, 129, 0.5);
  box-shadow: 0 0 8px rgba(16, 185, 129, 0.15);
}
.mtf-bear {
  background: rgba(136, 19, 55, 0.4);
  color: #fb7185;
  border-color: rgba(244, 63, 94, 0.5);
  box-shadow: 0 0 8px rgba(244, 63, 94, 0.12);
}

/* Verdict empty state */
.verdict-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2.5rem 1.5rem;
  background: linear-gradient(145deg, #0f172a 0%, #020617 100%);
  border: 1px solid #1e293b;
  border-radius: 1.125rem;
  text-align: center;
  min-height: 280px;
}
.verdict-feat-pill {
  padding: 6px 10px;
  background: rgba(30, 41, 59, 0.6);
  border: 1px solid #1e293b;
  border-radius: 0.625rem;
  font-size: 10px;
  color: #64748b;
  text-align: center;
  transition: all 0.2s;
}
.verdict-feat-pill:hover {
  border-color: rgba(16, 185, 129, 0.3);
  color: #94a3b8;
}

/* Signal verdict card */
.signal-verdict-card {
  background: linear-gradient(145deg, #0f172a 0%, #050e1d 100%);
}

/* ICT tags */
.ict-tag {
  display: inline-flex;
  align-items: center;
  padding: 3px 9px;
  border-radius: 9999px;
  font-size: 10px;
  font-weight: 600;
  border: 1px solid;
  white-space: nowrap;
}

/* Sensei checklist items (rendered via JS) */
/* styles applied inline in JS */

/* ══════════════════════════════════════════════════════════════
   QUANTUM SCANNER — ELITE SETUPS
   ══════════════════════════════════════════════════════════════ */
.elite-setup-card {
  padding: 14px 16px;
  border-radius: 1rem;
  border: 1px solid #1e293b;
  background: linear-gradient(145deg, #0d1b2a 0%, #0a1628 100%);
  cursor: pointer;
  transition: all 0.2s ease;
  position: relative;
  overflow: hidden;
}
.elite-setup-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  border-radius: 1rem 1rem 0 0;
  transition: opacity 0.2s;
}
.elite-setup-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5);
}
.elite-card-gold {
  border-color: rgba(234, 179, 8, 0.35);
  box-shadow: 0 4px 20px rgba(234, 179, 8, 0.08);
}
.elite-card-gold::before {
  background: linear-gradient(90deg, #f59e0b, #fbbf24);
  opacity: 0.9;
}
.elite-card-silver {
  border-color: rgba(148, 163, 184, 0.25);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
}
.elite-card-silver::before {
  background: linear-gradient(90deg, #94a3b8, #cbd5e1);
  opacity: 0.7;
}
.elite-card-bronze {
  border-color: rgba(180, 120, 60, 0.25);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
}
.elite-card-bronze::before {
  background: linear-gradient(90deg, #b45309, #d97706);
  opacity: 0.7;
}

.elite-setup-skeleton {
  height: 110px;
  border-radius: 1rem;
  background: linear-gradient(90deg, #0f172a 0%, #1e293b 50%, #0f172a 100%);
  background-size: 200% 100%;
  animation: shimmer 1.6s ease-in-out infinite;
  border: 1px solid #1e293b;
}

/* ══════════════════════════════════════════════════════════════
   SIGNALS ROOM — NEW STYLES
   ══════════════════════════════════════════════════════════════ */
.signal-stat-card {
  background: #0f172a;
  border: 1px solid #1e293b;
  border-radius: 0.875rem;
  padding: 8px 14px;
  text-align: center;
  min-width: 72px;
}

/* Signal cards rendered by JS get these classes */
.signal-card-v2 {
  background: linear-gradient(145deg, #0f172a 0%, #0a1220 100%);
  border: 1px solid #1e293b;
  border-radius: 1rem;
  padding: 16px;
  transition: all 0.2s ease;
  position: relative;
  overflow: hidden;
}
.signal-card-v2:hover {
  border-color: rgba(16, 185, 129, 0.3);
  transform: translateY(-1px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}
.signal-card-v2.buy-card {
  border-top: 2px solid rgba(16, 185, 129, 0.6);
}
.signal-card-v2.sell-card {
  border-top: 2px solid rgba(244, 63, 94, 0.6);
}

/* Price mini-ladder inside signal cards */
.mini-ladder {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 8px 10px;
  background: rgba(0, 0, 0, 0.2);
  border-radius: 0.625rem;
  border: 1px solid #1e293b;
}
.mini-ladder-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 10px;
  font-family: "JetBrains Mono", monospace;
}

/* Signal health bar */
.signal-health-bar {
  height: 2px;
  border-radius: 9999px;
  background: #1e293b;
  overflow: hidden;
  margin-top: 8px;
}
.signal-health-fill {
  height: 100%;
  background: linear-gradient(90deg, #10b981, #34d399);
  border-radius: 9999px;
  transition: width 1s linear;
}

/* Confluence tag pills on signal cards */
.conf-tag {
  display: inline-flex;
  padding: 2px 7px;
  border-radius: 9999px;
  font-size: 9px;
  font-weight: 600;
  background: rgba(30, 41, 59, 0.8);
  border: 1px solid #334155;
  color: #64748b;
  white-space: nowrap;
}

/* ══════════════════════════════════════════════════════════════
   SIGNALS ROOM — REDESIGNED CARDS
   ══════════════════════════════════════════════════════════════ */
.sig-card {
  background: linear-gradient(145deg, #0d1420 0%, #080f1a 100%);
  border: 1px solid #1e293b;
  border-radius: 1rem;
  padding: 16px;
  transition:
    border-color 0.2s ease,
    transform 0.2s ease,
    box-shadow 0.2s ease;
  position: relative;
}
.sig-card:hover {
  border-color: rgba(30, 41, 59, 1);
  transform: translateY(-2px);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5);
}

.sig-price-cell {
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid #1e293b;
  border-radius: 0.5rem;
  padding: 6px 8px;
}
.sig-price-label {
  font-size: 9px;
  color: #475569;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 2px;
}
.sig-price-val {
  font-size: 11px;
  font-weight: 700;
  font-family: "JetBrains Mono", monospace;
  white-space: nowrap;
}

/* filter tabs reuse .ct-tab style */
.sig-tab {
  padding: 6px 13px;
  border-radius: 9px;
  font-size: 11px;
  font-weight: 600;
  background: #0f172a;
  border: 1px solid #1e293b;
  color: #64748b;
  cursor: pointer;
  transition: all 0.18s ease;
  white-space: nowrap;
}
.sig-tab:hover {
  border-color: #334155;
  color: #e2e8f0;
}
.sig-tab.active {
  background: rgba(16, 185, 129, 0.1);
  border-color: rgba(16, 185, 129, 0.35);
  color: #34d399;
}

/* ══════════════════════════════════════════════════════════════
   ANNOUNCEMENT BAR
   ══════════════════════════════════════════════════════════════ */
.announcement-bar {
  background: linear-gradient(90deg, #1c1000 0%, #2d1c00 45%, #1c1000 100%);
  border-bottom: 1px solid rgba(234, 179, 8, 0.18);
  padding: 9px 16px;
  text-align: center;
  color: #fde68a;
}

/* ══════════════════════════════════════════════════════════════
   SMOOTH SCROLL + SCROLL-TO-TOP
   ══════════════════════════════════════════════════════════════ */
html {
  scroll-behavior: smooth;
}

#scrollTopBtn {
  font-size: 1rem;
  font-weight: 700;
  line-height: 1;
  opacity: 0;
  pointer-events: none;
  transform: translateY(10px) scale(0.9);
  transition:
    opacity 0.25s ease,
    transform 0.25s ease;
}
#scrollTopBtn.visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0) scale(1);
}

/* ══════════════════════════════════════════════════════════════
   FOOTER — ENHANCED
   ══════════════════════════════════════════════════════════════ */
footer .footer-social-btn {
  width: 44px;
  height: 44px;
  background: #111827;
  border: 1px solid #1f2937;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.875rem;
  transition: all 0.2s ease;
  text-decoration: none;
  cursor: pointer;
}
footer .footer-social-btn:hover {
  background: rgba(16, 185, 129, 0.12);
  border-color: rgba(16, 185, 129, 0.35);
}

/* ══════════════════════════════════════════════════════════════
   COPY TRADING
   ══════════════════════════════════════════════════════════════ */
.ct-tab {
  padding: 7px 14px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 600;
  background: #0f172a;
  border: 1px solid #1e293b;
  color: #64748b;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
}
.ct-tab:hover {
  border-color: #334155;
  color: #e2e8f0;
}
.ct-tab-active {
  background: rgba(16, 185, 129, 0.1);
  border-color: rgba(16, 185, 129, 0.35);
  color: #34d399;
}

.copy-trader-card {
  background: linear-gradient(145deg, #0d1420 0%, #070e19 100%);
  border: 1px solid #1e293b;
  border-radius: 1rem;
  padding: 16px;
  transition: all 0.22s ease;
  position: relative;
  overflow: hidden;
}
.copy-trader-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(16, 185, 129, 0.25),
    transparent
  );
}
.copy-trader-card:hover {
  border-color: rgba(16, 185, 129, 0.22);
  transform: translateY(-2px);
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.5);
}

.ct-avatar {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  border: 1px solid;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.8rem;
}

.ct-verified-badge {
  display: inline-flex;
  align-items: center;
  padding: 1px 6px;
  background: rgba(16, 185, 129, 0.1);
  border: 1px solid rgba(16, 185, 129, 0.25);
  border-radius: 9999px;
  font-size: 9px;
  font-weight: 700;
  color: #34d399;
}

.ct-rank-num {
  font-size: 10px;
  font-weight: 700;
  color: #475569;
  font-family: "JetBrains Mono", monospace;
}

.ct-stat-cell {
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid #1e293b;
  border-radius: 0.5rem;
  padding: 5px 6px;
  text-align: center;
}
.ct-stat-label {
  font-size: 9px;
  color: #475569;
  margin-bottom: 2px;
}
.ct-stat-value {
  font-size: 11px;
  font-weight: 700;
  font-family: "JetBrains Mono", monospace;
}

.ct-sparkline {
  background: rgba(0, 0, 0, 0.2);
  border: 1px solid #1e293b;
  border-radius: 0.625rem;
  padding: 8px 10px;
}
.ct-spark-label {
  font-size: 9px;
  color: #334155;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.ct-spark-bar {
  flex: 1;
  border-radius: 2px 2px 0 0;
  min-width: 6px;
  opacity: 0.8;
  transition: opacity 0.2s;
}
.copy-trader-card:hover .ct-spark-bar {
  opacity: 1;
}

/* How it works steps */
.ct-step-icon {
  width: 44px;
  height: 44px;
  background: rgba(16, 185, 129, 0.08);
  border: 1px solid rgba(16, 185, 129, 0.15);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  margin: 0 auto 10px;
}

/* ══════════════════════════════════════════════════════════════
   WORLD-CLASS DESIGN SYSTEM — INTERNATIONAL EDITION
   ══════════════════════════════════════════════════════════════ */

/* Keyframes */
@keyframes float {
  0%,
  100% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-14px);
  }
}
@keyframes gradientShift {
  0%,
  100% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
}
@keyframes orbDrift {
  0% {
    transform: translate(0, 0) scale(1);
  }
  33% {
    transform: translate(30px, -20px) scale(1.05);
  }
  66% {
    transform: translate(-20px, 15px) scale(0.95);
  }
  100% {
    transform: translate(0, 0) scale(1);
  }
}
@keyframes heroGlow {
  0%,
  100% {
    opacity: 0.8;
  }
  50% {
    opacity: 1;
  }
}

/* ── Nav glassmorphism ──────────────────────────────────────── */
.nav-glass {
  background: rgba(2, 6, 23, 0.82) !important;
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
  box-shadow: 0 1px 40px rgba(0, 0, 0, 0.4);
}

/* ── Hero background system ─────────────────────────────────── */
.hero-bg {
  position: relative;
  overflow: hidden;
  background: #020617;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  padding-top: 4rem;
  padding-bottom: 5rem;
}
@media (min-width: 640px) {
  .hero-bg {
    padding-top: 5rem;
    padding-bottom: 6rem;
  }
}
@media (min-width: 768px) {
  .hero-bg {
    padding-top: 6rem;
    padding-bottom: 7rem;
  }
}

.hero-orb {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
  animation: orbDrift 20s ease-in-out infinite;
}
.hero-orb-1 {
  width: 700px;
  height: 700px;
  background: radial-gradient(
    circle,
    rgba(16, 185, 129, 0.1) 0%,
    transparent 65%
  );
  top: -280px;
  right: -180px;
  animation-delay: 0s;
  filter: blur(1px);
}
.hero-orb-2 {
  width: 500px;
  height: 500px;
  background: radial-gradient(
    circle,
    rgba(59, 130, 246, 0.07) 0%,
    transparent 65%
  );
  bottom: -200px;
  left: -150px;
  animation-delay: -7s;
  filter: blur(1px);
}
.hero-orb-3 {
  width: 350px;
  height: 350px;
  background: radial-gradient(
    circle,
    rgba(168, 85, 247, 0.05) 0%,
    transparent 65%
  );
  top: 40%;
  left: 30%;
  animation-delay: -13s;
  filter: blur(2px);
}

.hero-grid-overlay {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(16, 185, 129, 0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(16, 185, 129, 0.025) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(
    ellipse 75% 75% at 50% 50%,
    black 10%,
    transparent 75%
  );
  -webkit-mask-image: radial-gradient(
    ellipse 75% 75% at 50% 50%,
    black 10%,
    transparent 75%
  );
  pointer-events: none;
  z-index: 0;
}

/* ── Gradient text variants ─────────────────────────────────── */
.text-gradient-emerald {
  background: linear-gradient(135deg, #10b981 0%, #34d399 50%, #a7f3d0 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.text-gradient-hero {
  background: linear-gradient(
    130deg,
    #ffffff 0%,
    #d1fae5 30%,
    #10b981 65%,
    #34d399 100%
  );
  background-size: 200% 200%;
  animation: gradientShift 5s ease infinite;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ── Section badge ──────────────────────────────────────────── */
.section-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(16, 185, 129, 0.08);
  border: 1px solid rgba(16, 185, 129, 0.2);
  border-radius: 9999px;
  padding: 4px 14px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #34d399;
  margin-bottom: 0.75rem;
}

/* ── Hero stat glass cards ──────────────────────────────────── */
.hero-stat-glass {
  background: rgba(15, 23, 42, 0.7);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(16, 185, 129, 0.14);
  border-radius: 1rem;
  padding: 0.875rem 1rem;
  text-align: center;
  transition:
    border-color 0.25s,
    box-shadow 0.25s;
}
.hero-stat-glass:hover {
  border-color: rgba(16, 185, 129, 0.32);
  box-shadow: 0 0 28px rgba(16, 185, 129, 0.08);
}
.hero-stat-num {
  font-family: "JetBrains Mono", monospace;
  font-size: 1.6rem;
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1.1;
}

/* ── Premium CTA buttons ────────────────────────────────────── */
.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
  color: #fff;
  font-weight: 700;
  border-radius: 1.5rem;
  padding: 0.875rem 1.75rem;
  border: none;
  cursor: pointer;
  transition:
    transform 0.22s,
    box-shadow 0.22s;
  box-shadow: 0 4px 20px rgba(16, 185, 129, 0.25);
  position: relative;
  overflow: hidden;
  text-decoration: none;
  white-space: nowrap;
}
.btn-primary::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.18) 0%,
    transparent 60%
  );
  opacity: 0;
  transition: opacity 0.2s;
  border-radius: inherit;
}
.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 36px rgba(16, 185, 129, 0.4);
}
.btn-primary:hover::after {
  opacity: 1;
}
.btn-primary:active {
  transform: translateY(0);
}

.btn-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  color: #10b981;
  border: 2px solid rgba(16, 185, 129, 0.38);
  font-weight: 600;
  border-radius: 1.5rem;
  padding: 0.875rem 1.75rem;
  cursor: pointer;
  transition: all 0.22s;
  white-space: nowrap;
}
.btn-ghost:hover {
  background: rgba(16, 185, 129, 0.08);
  border-color: #10b981;
  transform: translateY(-2px);
}
.btn-ghost:active {
  transform: translateY(0);
}

/* ── Floating live signal card (hero right) ─────────────────── */
.signal-float-card {
  background: rgba(13, 20, 32, 0.92);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid rgba(16, 185, 129, 0.28);
  border-radius: 1.5rem;
  padding: 1.25rem 1.5rem;
  box-shadow:
    0 24px 64px rgba(0, 0, 0, 0.7),
    0 0 48px rgba(16, 185, 129, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);
  animation: float 7s ease-in-out infinite;
  position: relative;
}
.signal-float-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(16, 185, 129, 0.5),
    transparent
  );
  border-radius: 1.5rem 1.5rem 0 0;
}

/* ── Glass card (hero right side cards) ─────────────────────── */
.hero-glass-card {
  background: rgba(13, 20, 36, 0.75);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 1.5rem;
  padding: 1.5rem;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.5);
  transition:
    border-color 0.25s,
    box-shadow 0.25s;
}
.hero-glass-card:hover {
  border-color: rgba(16, 185, 129, 0.2);
  box-shadow:
    0 20px 56px rgba(0, 0, 0, 0.6),
    0 0 32px rgba(16, 185, 129, 0.06);
}

/* ── Section h2 gradient headings ───────────────────────────── */
.section-h2 {
  font-size: clamp(1.6rem, 3.5vw, 2.5rem);
  font-weight: 900;
  letter-spacing: -0.03em;
  line-height: 1.1;
  background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 60%, #94a3b8 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ── Trust strip flags ──────────────────────────────────────── */
.trust-strip {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}
.trust-flag-row {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.trust-flag-row img {
  border-radius: 2px;
  transition: transform 0.2s;
  display: inline-block;
  vertical-align: middle;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}
.trust-flag-row img:hover {
  transform: scale(1.2);
}

/* ══════════════════════════════════════════════════════════════
   MOBILE FIXES
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 639px) {
  .hero-stat-num {
    font-size: 1.25rem;
  }
  .signal-float-card {
    animation: none;
  }
  .btn-primary,
  .btn-ghost {
    padding: 0.75rem 1.25rem;
  }
  .sig-room-door {
    padding: 1.25rem;
    border-radius: 1rem;
  }
}

/* ══════════════════════════════════════════════════════════════
   SIGNAL ROOM ENTRANCE
   ══════════════════════════════════════════════════════════════ */
.sig-room-door {
  background: linear-gradient(145deg, #060e1d 0%, #040b17 100%);
  border: 1px solid rgba(16, 185, 129, 0.18);
  border-radius: 1.5rem;
  padding: 2rem;
  max-width: 900px;
  margin: 0 auto;
  position: relative;
  overflow: hidden;
  box-shadow:
    0 0 80px rgba(16, 185, 129, 0.05),
    0 32px 80px rgba(0, 0, 0, 0.6),
    inset 0 1px 0 rgba(255, 255, 255, 0.03);
}
.sig-room-door::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(16, 185, 129, 0.45),
    transparent
  );
}
.sig-room-door::after {
  content: "";
  position: absolute;
  top: -180px;
  right: -120px;
  width: 380px;
  height: 380px;
  background: radial-gradient(
    circle,
    rgba(16, 185, 129, 0.05) 0%,
    transparent 65%
  );
  pointer-events: none;
  z-index: 0;
}

.sig-entrance-stat {
  background: rgba(15, 23, 42, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 0.875rem;
  padding: 0.75rem 1rem;
}

.session-live-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border-radius: 9999px;
  font-size: 10px;
  font-weight: 700;
}
.session-live-pill.open {
  background: rgba(16, 185, 129, 0.1);
  border: 1px solid rgba(16, 185, 129, 0.25);
  color: #34d399;
}
.session-live-pill.closed {
  background: rgba(30, 41, 59, 0.5);
  border: 1px solid #1e293b;
  color: #475569;
}

.sig-preview-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.04);
  border-radius: 0.75rem;
  cursor: pointer;
  transition: all 0.18s;
  position: relative;
  z-index: 1;
}
.sig-preview-row:hover {
  background: rgba(16, 185, 129, 0.04);
  border-color: rgba(16, 185, 129, 0.14);
}

.btn-enter-room {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 1rem 2rem;
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
  color: #fff;
  font-weight: 800;
  font-size: 0.9375rem;
  border-radius: 1rem;
  border: none;
  cursor: pointer;
  transition: all 0.25s;
  position: relative;
  overflow: hidden;
  margin-top: 1.5rem;
  box-shadow: 0 8px 32px rgba(16, 185, 129, 0.28);
  z-index: 1;
}
.btn-enter-room::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.15) 0%,
    transparent 60%
  );
  opacity: 0;
  transition: opacity 0.2s;
}
.btn-enter-room:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 40px rgba(16, 185, 129, 0.42);
}
.btn-enter-room:hover::after {
  opacity: 1;
}
.btn-enter-room:active {
  transform: translateY(0);
}

@keyframes roomSlideIn {
  from {
    opacity: 0;
    transform: translateY(-16px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.sig-room-animate-in {
  animation: roomSlideIn 0.35s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

/* Interior header bar */
.sig-interior-bar {
  background: rgba(10, 18, 32, 0.8);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 1rem;
  padding: 10px 14px;
  margin-bottom: 1.25rem;
}

/* ══════════════════════════════════════════════════════════════
   SIGNAL CARD V3 — COMPACT + EXPANDABLE
   ══════════════════════════════════════════════════════════════ */
.sig-card-v3 {
  background: linear-gradient(145deg, #0a1220 0%, #070e19 100%);
  border: 1px solid #1e293b;
  border-radius: 1rem;
  overflow: hidden;
  transition:
    border-color 0.2s,
    box-shadow 0.2s;
}
.sig-card-v3:hover {
  border-color: #2d3f59;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.4);
}
.sig-card-v3.sig-buy {
  border-left: 3px solid rgba(16, 185, 129, 0.5);
}
.sig-card-v3.sig-sell {
  border-left: 3px solid rgba(244, 63, 94, 0.5);
}
.sig-card-v3.sig-closed {
  opacity: 0.75;
}

.sig-compact-btn {
  width: 100%;
  padding: 14px 16px;
  text-align: left;
  background: transparent;
  border: none;
  color: #fff;
  cursor: pointer;
  display: block;
}
.sig-compact-btn:hover {
  background: rgba(255, 255, 255, 0.015);
}

.sig-dir-badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 4px 10px;
  border-radius: 8px;
  font-size: 11px;
  font-weight: 800;
  flex-shrink: 0;
  white-space: nowrap;
}
.sig-dir-buy {
  background: rgba(16, 185, 129, 0.14);
  color: #10b981;
  border: 1px solid rgba(16, 185, 129, 0.28);
}
.sig-dir-sell {
  background: rgba(244, 63, 94, 0.14);
  color: #f43f5e;
  border: 1px solid rgba(244, 63, 94, 0.28);
}

.sig-expand-chevron {
  transition: transform 0.25s ease;
  flex-shrink: 0;
}
.sig-card-v3.expanded .sig-expand-chevron {
  transform: rotate(180deg);
}

.sig-expand-body {
  display: none;
  padding: 0 16px 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
}
.sig-card-v3.expanded .sig-expand-body {
  display: block;
  animation: fadeIn 0.22s ease forwards;
}

.sig-mini-conf-track {
  height: 3px;
  background: #1e293b;
  border-radius: 9999px;
  overflow: hidden;
}
.sig-mini-conf-fill {
  height: 100%;
  border-radius: 9999px;
  transition: width 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}

.sig-action-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 11px;
  border-radius: 8px;
  font-size: 11px;
  font-weight: 600;
  border: 1px solid;
  cursor: pointer;
  transition: all 0.18s;
  background: transparent;
  white-space: nowrap;
  text-decoration: none;
  color: inherit;
}
.sig-action-chart {
  border-color: rgba(59, 130, 246, 0.3);
  color: #60a5fa;
}
.sig-action-chart:hover {
  background: rgba(59, 130, 246, 0.08);
  border-color: rgba(59, 130, 246, 0.5);
}
.sig-action-copy {
  border-color: rgba(16, 185, 129, 0.3);
  color: #34d399;
}
.sig-action-copy:hover {
  background: rgba(16, 185, 129, 0.08);
  border-color: rgba(16, 185, 129, 0.5);
}
.sig-action-alert {
  border-color: rgba(245, 158, 11, 0.3);
  color: #fbbf24;
}
.sig-action-alert:hover {
  background: rgba(245, 158, 11, 0.08);
  border-color: rgba(245, 158, 11, 0.5);
}

/* ── Sessions Clock Strip ────────────────────────────────── */
.sessions-strip {
  background: rgba(2, 6, 23, 0.96);
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  padding: 5px 0;
}
.session-clock-item {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 500;
  white-space: nowrap;
  transition: all 0.2s;
}
.session-clock-item.sess-open {
  background: rgba(16, 185, 129, 0.1);
  border: 1px solid rgba(16, 185, 129, 0.22);
  color: #34d399;
}
.session-clock-item.sess-closed {
  background: rgba(30, 41, 59, 0.45);
  border: 1px solid rgba(255, 255, 255, 0.05);
  color: #475569;
}
.session-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}
.sess-open .session-dot {
  background: #10b981;
  box-shadow: 0 0 6px rgba(16, 185, 129, 0.6);
  animation: newBadgePulse 1.5s ease-in-out infinite;
}
.sess-closed .session-dot {
  background: #334155;
}
.session-time {
  font-family: "JetBrains Mono", monospace;
  font-size: 9px;
  opacity: 0.65;
}

/* ── Position Size Calculator ────────────────────────────── */
.calc-input {
  width: 100%;
  background: #0f172a;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 10px;
  padding: 9px 12px;
  font-size: 13px;
  color: #fff;
  outline: none;
  transition:
    border-color 0.15s,
    box-shadow 0.15s;
  -webkit-appearance: none;
  appearance: none;
}
.calc-input:focus {
  border-color: #10b981;
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.12);
}
.calc-input option {
  background: #0f172a;
  color: #fff;
}
.calc-label {
  display: block;
  font-size: 10px;
  font-weight: 700;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 5px;
}
.calc-result-box {
  background: linear-gradient(
    135deg,
    rgba(16, 185, 129, 0.07),
    rgba(5, 150, 105, 0.03)
  );
  border: 1px solid rgba(16, 185, 129, 0.14);
  border-radius: 12px;
  padding: 12px 10px;
  text-align: center;
}
.calc-result-value {
  font-family: "JetBrains Mono", monospace;
  font-size: 1.2rem;
  font-weight: 700;
  color: #10b981;
  line-height: 1.2;
}
.calc-result-label {
  font-size: 9px;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-top: 3px;
}
.range-slider {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 4px;
  border-radius: 99px;
  background: linear-gradient(
    to right,
    #10b981 var(--pct, 44%),
    #1e293b var(--pct, 44%)
  );
  outline: none;
  cursor: pointer;
  margin-top: 8px;
}
.range-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #10b981;
  box-shadow: 0 0 8px rgba(16, 185, 129, 0.5);
  cursor: pointer;
  transition: box-shadow 0.15s;
}
.range-slider::-webkit-slider-thumb:hover {
  box-shadow: 0 0 14px rgba(16, 185, 129, 0.7);
}
.range-slider::-moz-range-thumb {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #10b981;
  border: none;
  cursor: pointer;
}

/* ── Signal Toast ─────────────────────────────────────────── */
.signal-toast {
  position: fixed;
  bottom: 76px;
  right: 16px;
  z-index: 99999;
  width: 272px;
  background: rgba(4, 7, 20, 0.97);
  border: 1px solid rgba(16, 185, 129, 0.3);
  border-radius: 16px;
  padding: 14px 16px;
  box-shadow:
    0 8px 48px rgba(0, 0, 0, 0.75),
    0 0 0 1px rgba(16, 185, 129, 0.08);
  backdrop-filter: blur(24px);
  transform: translateX(310px);
  opacity: 0;
  transition:
    transform 0.38s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 0.38s;
  pointer-events: none;
}
.signal-toast.toast-visible {
  transform: translateX(0);
  opacity: 1;
  pointer-events: all;
}
.toast-pair {
  font-family: "JetBrains Mono", monospace;
  font-size: 14px;
  font-weight: 700;
  color: #fff;
}
.toast-conf-bar {
  height: 2px;
  background: #1e293b;
  border-radius: 99px;
  margin: 8px 0 9px;
  overflow: hidden;
}
.toast-conf-fill {
  height: 100%;
  background: linear-gradient(90deg, #10b981, #34d399);
  border-radius: 99px;
  transition: width 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}

/* ── Community CTA ────────────────────────────────────────── */
.community-section {
  background:
    radial-gradient(
      ellipse at 50% 0%,
      rgba(16, 185, 129, 0.07) 0%,
      transparent 65%
    ),
    #020617;
  border-top: 1px solid rgba(16, 185, 129, 0.09);
  border-bottom: 1px solid rgba(16, 185, 129, 0.09);
}
.community-join-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 26px;
  border-radius: 14px;
  font-weight: 700;
  font-size: 14px;
  transition: all 0.22s;
  text-decoration: none;
  cursor: pointer;
}
.community-join-tg {
  background: linear-gradient(135deg, #229ed9, #0e76a8);
  color: #fff;
  box-shadow: 0 4px 20px rgba(34, 158, 217, 0.3);
}
.community-join-tg:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 28px rgba(34, 158, 217, 0.42);
}
.community-join-wa {
  background: linear-gradient(135deg, #25d366, #128c7e);
  color: #fff;
  box-shadow: 0 4px 20px rgba(37, 211, 102, 0.3);
}
.community-join-wa:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 28px rgba(37, 211, 102, 0.42);
}
.community-stat {
  text-align: center;
  padding: 14px 16px;
  background: rgba(16, 185, 129, 0.04);
  border: 1px solid rgba(16, 185, 129, 0.09);
  border-radius: 12px;
}

/* ── Scroll-to-top visibility ─────────────────────────────── */
#scrollTopBtn {
  opacity: 0;
  transform: translateY(12px);
  transition:
    opacity 0.25s,
    transform 0.25s;
  pointer-events: none;
}
#scrollTopBtn.visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: all;
}

/* ═══════════════════════════════════════════════════════════ */
/* SIGNAL ROOM — Telegram Gate + History                       */
/* ═══════════════════════════════════════════════════════════ */
.sig-tg-gate {
  position: relative;
  text-align: center;
  padding: 52px 20px 44px;
  border-radius: 24px;
  background:
    radial-gradient(
      ellipse at 50% -10%,
      rgba(16, 185, 129, 0.11) 0%,
      transparent 65%
    ),
    rgba(15, 23, 42, 0.45);
  border: 1px solid rgba(16, 185, 129, 0.13);
  overflow: hidden;
  margin-bottom: 36px;
}
.sig-tg-gate::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(16, 185, 129, 0.45) 35%,
    rgba(16, 185, 129, 0.85) 50%,
    rgba(16, 185, 129, 0.45) 65%,
    transparent 100%
  );
}
.sig-tg-gate::after {
  content: "";
  position: absolute;
  top: -120px;
  left: 50%;
  transform: translateX(-50%);
  width: 420px;
  height: 260px;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(16, 185, 129, 0.09) 0%,
    transparent 65%
  );
  pointer-events: none;
}
.sig-tg-bell {
  font-size: 52px;
  display: block;
  margin-bottom: 18px;
  animation: bell-ring 3s ease-in-out infinite;
  position: relative;
  z-index: 1;
}
@keyframes bell-ring {
  0%,
  90%,
  100% {
    transform: rotate(0deg);
  }
  92% {
    transform: rotate(-12deg);
  }
  94% {
    transform: rotate(12deg);
  }
  96% {
    transform: rotate(-8deg);
  }
  98% {
    transform: rotate(6deg);
  }
}
.sig-tg-heading {
  font-size: clamp(20px, 4.5vw, 34px);
  font-weight: 900;
  color: #f8fafc;
  letter-spacing: -0.025em;
  line-height: 1.1;
  margin-bottom: 12px;
  position: relative;
  z-index: 1;
}
.sig-tg-sub {
  font-size: 13px;
  color: #64748b;
  max-width: 500px;
  margin: 0 auto 28px;
  line-height: 1.65;
  position: relative;
  z-index: 1;
}
.sig-tg-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 15px 38px;
  background: linear-gradient(135deg, #229ed9 0%, #1678b0 100%);
  color: #fff;
  border-radius: 16px;
  font-weight: 800;
  font-size: 15px;
  text-decoration: none;
  box-shadow:
    0 8px 32px rgba(34, 158, 217, 0.38),
    0 0 0 1px rgba(34, 158, 217, 0.22);
  transition: all 0.22s;
  margin-bottom: 28px;
  position: relative;
  z-index: 1;
}
.sig-tg-btn:hover {
  transform: translateY(-3px);
  box-shadow:
    0 16px 44px rgba(34, 158, 217, 0.52),
    0 0 0 1px rgba(34, 158, 217, 0.35);
}
.sig-tg-stats {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  position: relative;
  z-index: 1;
}
.sig-tg-stat-pill {
  padding: 5px 14px;
  background: rgba(16, 185, 129, 0.07);
  border: 1px solid rgba(16, 185, 129, 0.14);
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  color: #10b981;
}

/* Signal history stat cells */
.sig-stat-cell {
  background: rgba(15, 23, 42, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 14px;
  padding: 12px 8px;
  text-align: center;
}
.sig-stat-val {
  font-size: 20px;
  font-weight: 800;
  font-family: "JetBrains Mono", monospace;
  color: #f8fafc;
  line-height: 1;
  margin-bottom: 5px;
}
.sig-stat-lbl {
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: #475569;
}

/* Signal history table rows */
.sig-hist-row {
  display: grid;
  grid-template-columns: 60px 1fr auto auto;
  align-items: center;
  gap: 10px;
  padding: 11px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  transition: background 0.14s;
}
.sig-hist-row:last-child {
  border-bottom: none;
}
.sig-hist-row:hover {
  background: rgba(255, 255, 255, 0.02);
}
.sig-hist-dir {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 28px;
  border-radius: 8px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.04em;
}
.sig-hist-dir.dir-buy {
  background: rgba(16, 185, 129, 0.12);
  color: #34d399;
  border: 1px solid rgba(16, 185, 129, 0.26);
}
.sig-hist-dir.dir-sell {
  background: rgba(244, 63, 94, 0.12);
  color: #fb7185;
  border: 1px solid rgba(244, 63, 94, 0.26);
}
.sig-hist-badge {
  padding: 3px 9px;
  border-radius: 7px;
  font-size: 10px;
  font-weight: 700;
  white-space: nowrap;
}
.sig-hist-badge.win {
  background: rgba(16, 185, 129, 0.1);
  color: #10b981;
}
.sig-hist-badge.loss {
  background: rgba(244, 63, 94, 0.1);
  color: #f43f5e;
}
.sig-hist-badge.open {
  background: rgba(245, 158, 11, 0.1);
  color: #f59e0b;
}

/* ═══════════════════════════════════════════════════════════ */
/* SCANNER — Chart Canvas                                       */
/* ═══════════════════════════════════════════════════════════ */
.scan-chart-outer {
  background: #070d1a;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 18px;
  overflow: hidden;
  margin-bottom: 16px;
}
.scan-chart-header {
  padding: 10px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(10, 18, 36, 0.9);
  gap: 10px;
}
.scan-chart-pair-select {
  display: flex;
  gap: 5px;
  overflow-x: auto;
  flex: 1;
}
.scan-chart-pair-btn {
  padding: 4px 11px;
  border-radius: 8px;
  font-size: 10px;
  font-weight: 700;
  color: #64748b;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.06);
  cursor: pointer;
  transition: all 0.15s;
  white-space: nowrap;
}
.scan-chart-pair-btn:hover {
  color: #f8fafc;
  border-color: rgba(255, 255, 255, 0.14);
}
.scan-chart-pair-btn.active-pair {
  background: rgba(16, 185, 129, 0.12);
  color: #34d399;
  border-color: rgba(16, 185, 129, 0.3);
}
#scannerChart {
  width: 100%;
  display: block;
  cursor: pointer;
}
.scan-chart-legend {
  padding: 6px 16px;
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  border-top: 1px solid rgba(255, 255, 255, 0.04);
  background: rgba(10, 18, 36, 0.7);
}
.scan-chart-legend span {
  font-size: 9px;
  color: #475569;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
}

/* ═══════════════════════════════════════════════════════════ */
/* COURSE — Colorized modules                                   */
/* ═══════════════════════════════════════════════════════════ */
.course-mod-strip {
  height: 3px;
  border-radius: 0 0 0 0;
  flex-shrink: 0;
}
.course-mod-icon-wrap {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  flex-shrink: 0;
}

/* ═══════════════════════════════════════════════════════════ */
/* PRICING — compact sizes                                      */
/* ═══════════════════════════════════════════════════════════ */
.offer-card {
  padding: 22px 22px 24px;
}
.offer-card .offer-price {
  font-size: 1.6rem;
  font-weight: 800;
  color: #fff;
  line-height: 1;
}
.offer-card .offer-price-usd {
  font-size: 11px;
  color: #64748b;
}

/* ── Scanner Simple / Pro Mode Toggle ───────────────────────── */
.scan-mode-toggle {
  display: inline-flex;
  align-items: center;
  background: rgba(15, 23, 42, 0.9);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 12px;
  padding: 3px;
  gap: 2px;
}
.scan-mode-btn {
  padding: 6px 18px;
  border-radius: 9px;
  font-size: 12px;
  font-weight: 600;
  color: #64748b;
  background: transparent;
  border: none;
  cursor: pointer;
  transition: all 0.18s;
  white-space: nowrap;
}
.scan-mode-btn.active {
  background: #0f172a;
  color: #f8fafc;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
}

/* ── Best Trade Spotlight ──────────────────────────────────── */
.best-trade-spotlight {
  background: linear-gradient(
    135deg,
    rgba(16, 185, 129, 0.07) 0%,
    rgba(5, 150, 105, 0.03) 100%
  );
  border: 1px solid rgba(16, 185, 129, 0.16);
  border-radius: 20px;
  padding: 20px 22px;
  position: relative;
  overflow: hidden;
  margin-bottom: 16px;
}
.best-trade-spotlight::before {
  content: "";
  position: absolute;
  top: -50px;
  right: -50px;
  width: 160px;
  height: 160px;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(16, 185, 129, 0.07) 0%,
    transparent 70%
  );
  pointer-events: none;
}

/* ── Scanner Pair Rows ──────────────────────────────────────── */
.scan-pair-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 16px;
  background: rgba(15, 23, 42, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 14px;
  cursor: pointer;
  transition: all 0.18s;
}
.scan-pair-row:hover {
  background: rgba(30, 41, 59, 0.75);
  border-color: rgba(255, 255, 255, 0.09);
  transform: translateX(3px);
}
.scan-pair-row.active-row {
  border-color: rgba(16, 185, 129, 0.28);
  background: rgba(16, 185, 129, 0.04);
}

/* ── Strength Dots ──────────────────────────────────────────── */
.sig-strength-dots {
  display: flex;
  gap: 3px;
  align-items: center;
}
.sig-strength-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #1e293b;
  flex-shrink: 0;
}
.sig-strength-dot.dot-buy {
  background: #10b981;
  box-shadow: 0 0 4px rgba(16, 185, 129, 0.45);
}
.sig-strength-dot.dot-sell {
  background: #f43f5e;
  box-shadow: 0 0 4px rgba(244, 63, 94, 0.45);
}

/* ── Verdict Badges ─────────────────────────────────────────── */
.scan-verdict {
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  white-space: nowrap;
  letter-spacing: 0.02em;
}
.verdict-strong-buy {
  background: rgba(16, 185, 129, 0.15);
  color: #34d399;
  border: 1px solid rgba(16, 185, 129, 0.3);
}
.verdict-buy {
  background: rgba(16, 185, 129, 0.08);
  color: #6ee7b7;
  border: 1px solid rgba(16, 185, 129, 0.18);
}
.verdict-strong-sell {
  background: rgba(244, 63, 94, 0.15);
  color: #fb7185;
  border: 1px solid rgba(244, 63, 94, 0.3);
}
.verdict-sell {
  background: rgba(244, 63, 94, 0.08);
  color: #fda4af;
  border: 1px solid rgba(244, 63, 94, 0.18);
}
.verdict-wait {
  background: rgba(100, 116, 139, 0.1);
  color: #94a3b8;
  border: 1px solid rgba(100, 116, 139, 0.2);
}

/* ── Scanner Detail Panel ───────────────────────────────────── */
.scan-detail-wrap {
  background: rgba(15, 23, 42, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 16px;
  overflow: hidden;
}
.scan-detail-tab {
  padding: 8px 16px;
  font-size: 11px;
  font-weight: 600;
  color: #64748b;
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  transition: all 0.18s;
  white-space: nowrap;
}
.scan-detail-tab.active {
  color: #f8fafc;
  border-bottom-color: #10b981;
}

/* ── Plain English & Trade Level Boxes ─────────────────────── */
.plain-english-box {
  background: rgba(16, 185, 129, 0.05);
  border: 1px solid rgba(16, 185, 129, 0.14);
  border-radius: 14px;
  padding: 14px 16px;
}
.plain-english-box p {
  font-size: 13px;
  line-height: 1.65;
  color: #cbd5e1;
  margin: 0;
}
.trade-level-cell {
  background: rgba(15, 23, 42, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 12px;
  padding: 10px 8px;
  text-align: center;
}
.tl-label {
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: #475569;
  margin-bottom: 4px;
}
.tl-value {
  font-size: 12px;
  font-weight: 700;
  font-family: "JetBrains Mono", monospace;
}

/* ── Signal Room Mode Toggle ────────────────────────────────── */
.sig-mode-toggle {
  display: inline-flex;
  align-items: center;
  background: rgba(15, 23, 42, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 10px;
  padding: 3px;
  gap: 2px;
  flex-shrink: 0;
}
.sig-mode-btn {
  padding: 5px 12px;
  border-radius: 7px;
  font-size: 11px;
  font-weight: 600;
  color: #64748b;
  background: transparent;
  border: none;
  cursor: pointer;
  transition: all 0.18s;
  white-space: nowrap;
}
.sig-mode-btn.active {
  background: #10b981;
  color: #022c22;
}

/* ── Signal Simple Card ─────────────────────────────────────── */
.sig-simple-card {
  background: rgba(15, 23, 42, 0.8);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 18px;
  padding: 18px 20px;
  transition: border-color 0.2s;
}
.sig-simple-card.simple-buy {
  border-color: rgba(16, 185, 129, 0.22);
}
.sig-simple-card.simple-sell {
  border-color: rgba(244, 63, 94, 0.22);
}
.sig-big-dir {
  font-size: 42px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.02em;
}
.sig-simple-levels {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 7px;
  margin: 14px 0;
}
@media (max-width: 400px) {
  .sig-simple-levels {
    grid-template-columns: repeat(2, 1fr);
  }
}
.sig-simple-level {
  text-align: center;
  padding: 8px 4px;
  border-radius: 10px;
  background: rgba(15, 23, 42, 0.9);
  border: 1px solid rgba(255, 255, 255, 0.05);
}
.ssl-label {
  font-size: 8px;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: #475569;
}
.ssl-value {
  font-size: 11px;
  font-weight: 700;
  font-family: "JetBrains Mono", monospace;
  margin-top: 2px;
}
.sig-plain-reason {
  font-size: 12px;
  line-height: 1.65;
  color: #94a3b8;
  padding: 10px 13px;
  background: rgba(255, 255, 255, 0.02);
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.04);
  margin-top: 12px;
}

/* ═══════════════════════════════════════════════════════════ */
/* PREMIUM SCANNER — Full-screen real-data ICT scanner         */
/* ═══════════════════════════════════════════════════════════ */

/* Open button (sits in TradingView section) */
.prem-open-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 22px;
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
  color: #fff;
  border: none;
  border-radius: 14px;
  font-weight: 800;
  font-size: 13px;
  cursor: pointer;
  box-shadow:
    0 6px 24px rgba(16, 185, 129, 0.35),
    0 0 0 1px rgba(16, 185, 129, 0.2);
  transition: all 0.2s;
  letter-spacing: 0.01em;
}
.prem-open-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 32px rgba(16, 185, 129, 0.45);
}

/* Modal backdrop — default hidden; opened by JS via style.display='flex' */
#premScannerModal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(2, 6, 23, 0.97);
  flex-direction: column;
}

/* Header bar */
.prem-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  background: rgba(7, 13, 26, 0.95);
  flex-shrink: 0;
  min-height: 52px;
  overflow: hidden;
}
#premPairTabs {
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
}
#premPairTabs::-webkit-scrollbar {
  display: none;
}
#premTFTabs {
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
  flex-shrink: 0;
}
#premTFTabs::-webkit-scrollbar {
  display: none;
}
.prem-logo {
  font-size: 12px;
  font-weight: 900;
  color: #10b981;
  letter-spacing: 0.05em;
  flex-shrink: 0;
  white-space: nowrap;
}

/* Pair buttons */
.prem-pair-btn {
  padding: 5px 10px;
  border-radius: 8px;
  font-size: 11px;
  font-weight: 600;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.07);
  color: #6b7280;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.15s;
  flex-shrink: 0;
}
.prem-pair-btn:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #d1d5db;
}
.prem-pair-btn.active-prem-pair {
  background: rgba(16, 185, 129, 0.15);
  border-color: rgba(16, 185, 129, 0.4);
  color: #34d399;
}

/* TF buttons */
.prem-tf-btn {
  padding: 5px 9px;
  border-radius: 7px;
  font-size: 10px;
  font-weight: 700;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.07);
  color: #6b7280;
  cursor: pointer;
  font-family: "JetBrains Mono", monospace;
  transition: all 0.15s;
  flex-shrink: 0;
}
.prem-tf-btn:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #d1d5db;
}
.prem-tf-btn.active-prem-tf {
  background: rgba(245, 158, 11, 0.15);
  border-color: rgba(245, 158, 11, 0.4);
  color: #fbbf24;
}

/* Body layout */
.prem-body {
  display: flex;
  flex: 1;
  overflow: hidden;
  min-height: 0;
}

/* Chart area */
#premChartContainer {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  background: #070d1a;
}

/* Signal panel */
#premSignalPanel {
  width: 268px;
  flex-shrink: 0;
  overflow-y: auto;
  border-left: 1px solid rgba(255, 255, 255, 0.06);
  background: rgba(7, 13, 26, 0.92);
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.08) transparent;
}
#premSignalPanel::-webkit-scrollbar {
  width: 4px;
}
#premSignalPanel::-webkit-scrollbar-track {
  background: transparent;
}
#premSignalPanel::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 4px;
}

/* Panel blocks */
.prem-panel-block {
  padding: 14px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.prem-panel-label {
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #374151;
  margin-bottom: 10px;
}

/* Level rows inside panel */
.prem-level-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid;
  background: rgba(255, 255, 255, 0.02);
}

/* Signal pills */
.prem-sig-pill {
  font-size: 9px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 5px;
  border: 1px solid;
}
.prem-sig-pill.bull {
  background: rgba(16, 185, 129, 0.12);
  color: #34d399;
  border-color: rgba(16, 185, 129, 0.25);
}
.prem-sig-pill.bear {
  background: rgba(244, 63, 94, 0.12);
  color: #fb7185;
  border-color: rgba(244, 63, 94, 0.25);
}
.prem-sig-pill.blue {
  background: rgba(96, 165, 250, 0.12);
  color: #60a5fa;
  border-color: rgba(96, 165, 250, 0.25);
}
.prem-sig-pill.amber {
  background: rgba(245, 158, 11, 0.12);
  color: #fbbf24;
  border-color: rgba(245, 158, 11, 0.25);
}

/* Status dot */
.prem-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}
.prem-dot.green {
  background: #10b981;
}
.prem-dot.yellow {
  background: #f59e0b;
}
.prem-dot.red {
  background: #f43f5e;
}
.prem-dot.pulse {
  animation: prem-pulse 1.5s ease-in-out infinite;
}
@keyframes prem-pulse {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.35;
  }
}

/* Keyboard shortcut hint */
.prem-kbd-hint {
  font-size: 9px;
  color: #374151;
  white-space: nowrap;
  flex-shrink: 0;
  letter-spacing: 0.04em;
  display: none;
}
@media (min-width: 860px) {
  .prem-kbd-hint {
    display: block;
  }
}

/* Close button */
.prem-close-btn {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: #6b7280;
  font-size: 14px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s;
  flex-shrink: 0;
}
.prem-close-btn:hover {
  background: rgba(244, 63, 94, 0.15);
  color: #fb7185;
  border-color: rgba(244, 63, 94, 0.3);
}

@media (max-width: 640px) {
  .prem-header {
    position: relative;
    padding-right: 46px;
  }
  .prem-close-btn {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    width: 34px;
    height: 34px;
    font-size: 16px;
  }
}

/* Market category row */
.prem-market-row {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 5px 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  background: rgba(4, 8, 18, 0.97);
  flex-shrink: 0;
  overflow-x: auto;
  scrollbar-width: none;
}
.prem-market-row::-webkit-scrollbar {
  display: none;
}
.prem-market-btn {
  padding: 4px 10px;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: transparent;
  color: #6b7280;
  font-size: 10px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  transition: all 0.15s;
  letter-spacing: 0.03em;
}
.prem-market-btn:hover {
  background: rgba(255, 255, 255, 0.06);
  color: #d1d5db;
}
.prem-market-btn.active-prem-market {
  background: rgba(0, 229, 204, 0.12);
  border-color: rgba(0, 229, 204, 0.35);
  color: #00e5cc;
}

/* Strategy selector bar */
.prem-strategy-bar {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 6px 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  background: rgba(4, 9, 20, 0.9);
  overflow-x: auto;
  flex-shrink: 0;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.prem-strategy-bar::-webkit-scrollbar {
  display: none;
}
.prem-strat-btn {
  padding: 4px 11px;
  border-radius: 6px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.07);
  color: #4b5563;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.15s;
  flex-shrink: 0;
}
.prem-strat-btn:hover {
  color: #9ca3af;
  background: rgba(255, 255, 255, 0.07);
}
.prem-strat-btn.active-strat {
  color: #fff;
  border-color: var(--sc, rgba(255, 255, 255, 0.3));
  background: color-mix(in srgb, var(--sc, #ffffff) 15%, transparent);
}

/* Criteria check rows for KILL SHOT */
.kill-criterion {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 10px;
  padding: 5px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}
.kill-criterion:last-child {
  border-bottom: none;
}
.kill-criterion .kc-icon {
  font-size: 11px;
  flex-shrink: 0;
}
.kill-criterion .kc-label {
  flex: 1;
  color: #6b7280;
}
.kill-criterion.met .kc-label {
  color: #d1d5db;
}

/* Session pill in SNIPER PRO */
.session-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  border-radius: 20px;
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.session-pill.active {
  background: rgba(16, 185, 129, 0.15);
  color: #34d399;
  border: 1px solid rgba(16, 185, 129, 0.3);
}
.session-pill.inactive {
  background: rgba(100, 116, 139, 0.1);
  color: #64748b;
  border: 1px solid rgba(100, 116, 139, 0.2);
}

/* Mobile: stack chart over panel */
@media (max-width: 640px) {
  .prem-body {
    flex-direction: column;
  }
  #premChartContainer {
    height: 55%;
    flex: none;
  }
  #premSignalPanel {
    width: 100%;
    height: 45%;
    border-left: none;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
  }
}

/* ══════════════════════════════════════════════════════════════
   PAYMENT MODAL
   ══════════════════════════════════════════════════════════════ */
.pay-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.82);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}
.pay-modal-card {
  background: #0f172a;
  border: 1px solid rgba(16, 185, 129, 0.2);
  border-radius: 1.5rem;
  padding: 1.75rem;
  width: 100%;
  max-width: 480px;
  max-height: 90vh;
  overflow-y: auto;
  animation: fadeIn 0.2s ease;
}
.pay-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 1.25rem;
}
.pay-modal-title {
  font-size: 1.1rem;
  font-weight: 700;
  color: #fff;
}
.pay-modal-plan {
  font-size: 0.78rem;
  color: #10b981;
  margin-top: 0.2rem;
}
.pay-modal-close {
  background: none;
  border: none;
  color: #64748b;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  padding: 0 0.2rem;
}
.pay-modal-close:hover {
  color: #fff;
}
.pay-tabs {
  display: flex;
  gap: 0.35rem;
  margin-bottom: 1.25rem;
  background: #1e293b;
  border-radius: 0.75rem;
  padding: 0.25rem;
}
.pay-tab {
  flex: 1;
  padding: 0.55rem 0.2rem;
  border: none;
  background: none;
  color: #94a3b8;
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  border-radius: 0.5rem;
  transition: all 0.15s;
}
.pay-tab-active {
  background: #10b981;
  color: #fff;
}
.pay-info {
  font-size: 0.82rem;
  color: #94a3b8;
  line-height: 1.6;
  margin-bottom: 1rem;
}
.pay-input {
  width: 100%;
  background: #1e293b;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 0.75rem;
  padding: 0.75rem 1rem;
  color: #fff;
  font-size: 0.9rem;
  outline: none;
  margin-bottom: 0.75rem;
}
.pay-input:focus {
  border-color: #10b981;
}
.pay-input::placeholder {
  color: #475569;
}
.pay-btn {
  width: 100%;
  padding: 0.9rem;
  border: none;
  border-radius: 0.875rem;
  font-size: 0.9rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.15s;
  margin-top: 0.25rem;
}
.pay-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.pay-btn-green {
  background: #10b981;
  color: #fff;
}
.pay-btn-green:hover:not(:disabled) {
  background: #059669;
}
.pay-btn-yellow {
  background: #f59e0b;
  color: #0f172a;
}
.pay-btn-yellow:hover:not(:disabled) {
  background: #d97706;
}
.pay-btn-blue {
  background: #3b82f6;
  color: #fff;
}
.pay-btn-blue:hover:not(:disabled) {
  background: #2563eb;
}
.pay-address-box {
  background: #1e293b;
  border-radius: 0.75rem;
  padding: 0.75rem 1rem;
  margin-bottom: 0.5rem;
}
.pay-address-label {
  font-size: 0.68rem;
  color: #475569;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 0.3rem;
}
.pay-address-value {
  font-family: "JetBrains Mono", monospace;
  font-size: 0.8rem;
  color: #10b981;
  word-break: break-all;
}
.pay-status {
  border-radius: 0.6rem;
  padding: 0.6rem 0.875rem;
  font-size: 0.82rem;
  font-weight: 500;
  margin-bottom: 0.75rem;
}
.pay-status-success {
  background: rgba(16, 185, 129, 0.12);
  color: #10b981;
  border: 1px solid rgba(16, 185, 129, 0.2);
}
.pay-status-error {
  background: rgba(239, 68, 68, 0.12);
  color: #ef4444;
  border: 1px solid rgba(239, 68, 68, 0.2);
}
.pay-status-info {
  background: rgba(59, 130, 246, 0.12);
  color: #60a5fa;
  border: 1px solid rgba(59, 130, 246, 0.2);
}
.pay-status-warn {
  background: rgba(245, 158, 11, 0.12);
  color: #f59e0b;
  border: 1px solid rgba(245, 158, 11, 0.2);
}
.pay-stripe-logos {
  text-align: center;
  color: #475569;
  font-size: 0.78rem;
  letter-spacing: 0.05em;
  margin-bottom: 1rem;
}
.pay-secure-note {
  text-align: center;
  font-size: 0.72rem;
  color: #475569;
  margin-top: 0.75rem;
}
@media (max-width: 639px) {
  /* Bottom-sheet style: slides up from bottom edge */
  .pay-modal-overlay {
    align-items: flex-end;
    padding: 0;
  }
  .pay-modal-card {
    width: 100%;
    max-width: 100%;
    max-height: 88vh;
    border-radius: 1.5rem 1.5rem 0 0; /* round top corners only */
    padding: 1.25rem 1.25rem 2rem; /* extra bottom padding for home-bar safe area */
  }
  /* Drag handle pill at top of the sheet */
  .pay-modal-card::before {
    content: "";
    display: block;
    width: 40px;
    height: 4px;
    border-radius: 2px;
    background: rgba(255, 255, 255, 0.15);
    margin: 0 auto 0.75rem;
  }
  .pay-tab {
    font-size: 0.72rem;
    padding: 0.5rem 0.1rem;
  }
  /* Price + feature list — tighter on small screens */
  .pricing-carousel-card .text-2xl {
    font-size: 1.4rem !important;
  }
}

/* ══════════════════════════════════════════════════════════════
   ANALYSIS BUTTONS — mobile: compact Premium Scanner, hide Scanner toggle
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 639px) {
  .prem-open-btn {
    padding: 10px 12px;
    font-size: 11px;
    gap: 5px;
    border-radius: 12px;
  }
  #senseiScannerBtn {
    display: none !important;
  }
}

/* ══════════════════════════════════════════════════════════════
   GLOBAL RESPONSIVE FIXES — all screen sizes
   ══════════════════════════════════════════════════════════════ */

/* Very small phones (320px–374px): scale hero headline */
@media (max-width: 374px) {
  .hero-bg h1 {
    font-size: 2rem !important;
    line-height: 1 !important;
  }
  .hero-stat-glass {
    padding: 0.5rem 0.4rem;
  }
  .hero-stat-num {
    font-size: 1.1rem;
  }
  .btn-primary,
  .btn-ghost {
    font-size: 0.8rem;
    padding: 0.65rem 1rem;
  }
}

/* Verdict panel — desktop: all content visible, brain trigger hidden */
#verdictBrainTrigger {
  display: none;
}
#verdictToggleBtn {
  display: none;
} /* old toggle — fully removed */
#verdictInner {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
#verdictDetails {
  display: contents;
} /* transparent so space-y applies */

@media (min-width: 640px) and (max-width: 1023px) {
  .verdict-empty-state {
    min-height: 200px;
  }
}

/* QMS panel-scroll correct height at mobile header offset */
@media (max-width: 1023px) {
  .panel-scroll {
    max-height: calc(100vh - 60px);
  }
}

/* Announcement bar: single line on tiny screens */
@media (max-width: 479px) {
  .announcement-bar {
    padding: 7px 10px;
    font-size: 10px;
  }
  .announcement-bar strong {
    font-size: 10px;
  }
}

/* Nav: prevent overflow on narrow screens */
@media (max-width: 359px) {
  #navLoginBtn,
  #navSignupBtn {
    padding: 6px 8px;
    font-size: 10px;
  }
}

/* ══════════════════════════════════════════════════════════════
   FOOTER — MOBILE POLISH
   ══════════════════════════════════════════════════════════════ */

/* Touch-friendly nav links in footer */
footer nav a {
  min-height: 36px;
  display: flex;
  align-items: center;
  padding-top: 2px;
  padding-bottom: 2px;
}

/* Social buttons already 44px; on touch give them a bit more breathing room */
@media (max-width: 639px) {
  footer .footer-social-btn {
    width: 44px;
    height: 44px;
    font-size: 1rem;
  }
}

/* Collapsible footer on mobile */
.footer-body-collapsed {
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.35s ease;
}
.footer-body-collapsed.footer-open {
  max-height: 1200px;
}
@media (min-width: 640px) {
  .footer-body-collapsed {
    max-height: none !important;
    overflow: visible !important;
  }
  #footerToggle {
    display: none !important;
  }
}

/* Testimonials: single column on phones, tighter gap */
@media (max-width: 639px) {
  .community-join-btn {
    padding: 13px 20px;
    font-size: 0.82rem;
  }
}

/* Ensure hero right-column cards don't overflow on narrow laptops */
@media (min-width: 768px) and (max-width: 900px) {
  .signal-float-card {
    padding: 14px;
  }
}

/* Section headings consistent spacing mobile → desktop */
@media (max-width: 639px) {
  .section-h2 {
    font-size: 1.5rem;
    line-height: 1.2;
  }
  section,
  header {
    padding-top: 2.5rem !important;
    padding-bottom: 2.5rem !important;
  }
  .community-section {
    padding-top: 3rem !important;
    padding-bottom: 3rem !important;
  }
}

/* Prevent any section from having content touch screen edges on smallest phones */
@media (max-width: 374px) {
  .max-w-screen-2xl {
    padding-left: 0.75rem !important;
    padding-right: 0.75rem !important;
  }
}

/* ══════════════════════════════════════════════════════════════
   GLOBAL POLISH — accessibility, fluid type, motion
   ══════════════════════════════════════════════════════════════ */

/* Fluid hero headline: 28px → 68px across all viewport widths */
.hero-h1 {
  font-size: clamp(1.75rem, 7.5vw, 4.25rem);
}

/* Skip-to-content link for keyboard / screen-reader users */
.skip-link {
  position: absolute;
  top: -100px;
  left: 12px;
  background: #10b981;
  color: #fff;
  padding: 10px 18px;
  border-radius: 8px;
  font-size: 0.875rem;
  font-weight: 700;
  z-index: 999999;
  transition: top 0.15s;
  text-decoration: none;
}
.skip-link:focus {
  top: 12px;
}

/* Keyboard focus ring — visible only when navigating by keyboard */
:focus-visible {
  outline: 2px solid #10b981;
  outline-offset: 3px;
  border-radius: 4px;
}

/* Ensure interactive elements always have a minimum 44×44px touch target */
button,
[role="button"],
a,
input[type="checkbox"],
input[type="radio"],
select {
  min-height: 44px;
}
/* Nav links and small inline buttons are intentionally narrower — reset */
nav a,
.nav-link,
.cat-btn,
.tab-btn,
.pricing-badge,
.badge,
.pill,
.text-xs.font-medium,
.text-\[10px\] {
  min-height: unset;
}

/* Suppress motion for users who prefer it */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Auth gate — fade in on load */
#authGate {
  animation: fadeIn 0.3s ease both;
}

/* Print — strip backgrounds, show URLs */
@media print {
  body {
    background: #fff !important;
    color: #000 !important;
  }
  nav,
  footer,
  #authGate,
  .fixed {
    display: none !important;
  }
  a::after {
    content: " (" attr(href) ")";
    font-size: 0.75em;
    color: #555;
  }
}

/* ══════════════════════════════════════════════════════════════
   TOOL ACCORDION — Risk Calculator & Economic Calendar
   ══════════════════════════════════════════════════════════════ */
.tool-body {
  display: none;
}
.tool-open .tool-body {
  display: block;
}
.tool-open .tool-chevron {
  transform: rotate(180deg);
  color: #10b981;
}

.offer-card-v2 {
  position: relative;
  background: linear-gradient(160deg, #0f172a 0%, #0a0f1e 100%);
  border: 1px solid #1e293b;
  border-radius: 1.25rem;
  padding: 1rem 1.125rem 1.25rem;
  transition:
    border-color 0.2s,
    box-shadow 0.2s,
    transform 0.2s;
}
.offer-card-v2:hover {
  border-color: rgba(16, 185, 129, 0.35);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.45);
  transform: translateY(-2px);
}
.offer-card-v2.featured {
  background: linear-gradient(160deg, #052e16 0%, #0a1f14 60%, #0a0f1e 100%);
  border: 2px solid rgba(16, 185, 129, 0.55);
  box-shadow: 0 0 30px rgba(16, 185, 129, 0.07);
}
.offer-card-v2.featured:hover {
  border-color: #10b981;
  box-shadow: 0 10px 40px rgba(16, 185, 129, 0.14);
}
.offer-card-v2.vip {
  background: linear-gradient(160deg, #1c1007 0%, #0d0a04 60%, #0a0f1e 100%);
  border-color: rgba(234, 179, 8, 0.25);
}
.offer-card-v2.vip:hover {
  border-color: rgba(234, 179, 8, 0.5);
}

/* ══════════════════════════════════════════════════════════════
   FLOATING FAQ BUTTON + BUBBLE
   ══════════════════════════════════════════════════════════════ */

@keyframes faqColorShift {
  0% {
    border-color: #ef4444;
    box-shadow:
      0 4px 20px rgba(0, 0, 0, 0.5),
      0 0 14px rgba(239, 68, 68, 0.45);
    color: #f87171;
  }
  50% {
    border-color: #6366f1;
    box-shadow:
      0 4px 20px rgba(0, 0, 0, 0.5),
      0 0 14px rgba(99, 102, 241, 0.45);
    color: #a5b4fc;
  }
  100% {
    border-color: #ef4444;
    box-shadow:
      0 4px 20px rgba(0, 0, 0, 0.5),
      0 0 14px rgba(239, 68, 68, 0.45);
    color: #f87171;
  }
}

@keyframes faqBorderShift {
  0% {
    border-color: rgba(239, 68, 68, 0.45);
    box-shadow:
      0 20px 60px rgba(0, 0, 0, 0.7),
      0 0 18px rgba(239, 68, 68, 0.15);
  }
  50% {
    border-color: rgba(99, 102, 241, 0.45);
    box-shadow:
      0 20px 60px rgba(0, 0, 0, 0.7),
      0 0 18px rgba(99, 102, 241, 0.15);
  }
  100% {
    border-color: rgba(239, 68, 68, 0.45);
    box-shadow:
      0 20px 60px rgba(0, 0, 0, 0.7),
      0 0 18px rgba(239, 68, 68, 0.15);
  }
}

/* ── Reviews FAB + bubble ────────────────────────────────────────── */
.testi-fab {
  position: fixed;
  bottom: 78px;
  left: 20px;
  z-index: 9000;
  background: #0f172a;
  border: 2px solid #10b981;
  color: #34d399;
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.1em;
  padding: 9px 14px;
  border-radius: 999px;
  cursor: pointer;
  transition:
    transform 0.15s,
    background 0.2s;
  min-height: unset;
  box-shadow: 0 0 14px rgba(16, 185, 129, 0.2);
}
.testi-fab:hover {
  background: rgba(16, 185, 129, 0.1);
  transform: translateY(-2px);
}
.testi-fab.testi-fab-active {
  background: rgba(16, 185, 129, 0.15);
}

.testi-bubble {
  position: fixed;
  bottom: 136px;
  left: 20px;
  z-index: 8999;
  width: min(380px, calc(100vw - 32px));
  background: #0f172a;
  border: 1.5px solid rgba(16, 185, 129, 0.3);
  border-radius: 1.25rem;
  box-shadow:
    0 20px 60px rgba(0, 0, 0, 0.7),
    0 0 18px rgba(16, 185, 129, 0.08);
  overflow: hidden;
  opacity: 0;
  transform: translateY(12px) scale(0.97);
  pointer-events: none;
  transition:
    opacity 0.22s ease,
    transform 0.22s ease;
}
.testi-bubble.testi-bubble-open {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}
.testi-bubble-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 13px 18px 11px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  background: rgba(16, 185, 129, 0.06);
}
.testi-bubble-title {
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.14em;
  background: linear-gradient(90deg, #34d399, #a7f3d0);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.testi-bubble-list {
  max-height: 62vh;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 6px 0 4px;
}
.testi-bubble-list::-webkit-scrollbar {
  width: 3px;
}
.testi-bubble-list::-webkit-scrollbar-thumb {
  background: rgba(16, 185, 129, 0.3);
  border-radius: 3px;
}
.testi-fab-item {
  display: flex;
  gap: 11px;
  padding: 12px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}
.testi-fab-item:last-child {
  border-bottom: none;
}
.testi-fab-avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 800;
  flex-shrink: 0;
}
.testi-fab-body {
  flex: 1;
  min-width: 0;
}
.testi-fab-name {
  font-size: 11px;
  font-weight: 700;
  color: #f1f5f9;
  line-height: 1.3;
}
.testi-fab-name span {
  font-weight: 400;
  color: #64748b;
}
.testi-fab-stars {
  color: #fbbf24;
  font-size: 10px;
  margin: 2px 0 5px;
}
.testi-fab-quote {
  font-size: 11px;
  color: #94a3b8;
  line-height: 1.55;
  font-style: italic;
  margin: 0;
}

.faq-fab {
  position: fixed;
  bottom: 24px;
  right: 20px;
  z-index: 9000;
  background: #111827;
  border: 2px solid #ef4444;
  color: #f87171;
  font-size: 0.75rem;
  font-weight: 900;
  letter-spacing: 0.12em;
  padding: 10px 16px;
  border-radius: 999px;
  cursor: pointer;
  animation: faqColorShift 3s ease-in-out infinite;
  transition:
    transform 0.15s,
    background 0.2s;
  min-height: unset;
}
.faq-fab:hover {
  background: rgba(99, 102, 241, 0.15);
  transform: translateY(-2px);
}
.faq-fab.faq-fab-active {
  background: rgba(99, 102, 241, 0.18);
}

/* The floating bubble panel */
.faq-bubble {
  position: fixed;
  bottom: 76px;
  right: 20px;
  z-index: 8999;
  width: min(360px, calc(100vw - 32px));
  background: #0f172a;
  border: 1.5px solid rgba(239, 68, 68, 0.4);
  border-radius: 1.25rem;
  animation: faqBorderShift 3s ease-in-out infinite;
  box-shadow:
    0 20px 60px rgba(0, 0, 0, 0.7),
    0 0 18px rgba(239, 68, 68, 0.12);
  overflow: hidden;
  /* Hidden state */
  opacity: 0;
  transform: translateY(12px) scale(0.97);
  pointer-events: none;
  transition:
    opacity 0.22s ease,
    transform 0.22s ease;
}
.faq-bubble.faq-bubble-open {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

/* Bubble header */
.faq-bubble-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  background: rgba(99, 102, 241, 0.06);
}
.faq-bubble-title {
  font-size: 0.7rem;
  font-weight: 900;
  letter-spacing: 0.16em;
  background: linear-gradient(90deg, #f87171, #a5b4fc);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.faq-bubble-close {
  background: transparent;
  border: none;
  color: #64748b;
  font-size: 0.85rem;
  cursor: pointer;
  line-height: 1;
  padding: 0;
  min-height: unset;
  transition: color 0.15s;
}
.faq-bubble-close:hover {
  color: #fff;
}

/* Scrollable question list */
.faq-bubble-list {
  max-height: 65vh;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 8px 0;
}
.faq-bubble-list::-webkit-scrollbar {
  width: 3px;
}
.faq-bubble-list::-webkit-scrollbar-track {
  background: transparent;
}
.faq-bubble-list::-webkit-scrollbar-thumb {
  background: linear-gradient(#ef4444, #6366f1);
  border-radius: 99px;
}

/* Individual FAQ item */
.faq-item {
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}
.faq-item:last-child {
  border-bottom: none;
}
.faq-item summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 13px 18px;
  font-size: 0.78rem;
  font-weight: 500;
  color: #e2e8f0;
  cursor: pointer;
  list-style: none;
  transition:
    background 0.15s,
    color 0.15s;
}
.faq-item summary::-webkit-details-marker {
  display: none;
}
.faq-item summary:hover {
  background: rgba(255, 255, 255, 0.04);
  color: #fff;
}
.faq-item[open] summary {
  color: #a5b4fc;
}
.faq-arr {
  font-size: 1.1rem;
  color: #f87171;
  flex-shrink: 0;
  transition: transform 0.2s;
  display: inline-block;
}
.faq-item[open] .faq-arr {
  transform: rotate(90deg);
}
.faq-item p {
  padding: 0 18px 14px;
  font-size: 0.76rem;
  color: #94a3b8;
  line-height: 1.6;
  margin: 0;
}
.faq-item p button {
  background: none;
  border: none;
  padding: 0;
  min-height: unset;
  cursor: pointer;
}

/* Testimonials accordion — smooth height animation */
.testi-body {
  max-height: 0;
  overflow: hidden;
  transition:
    max-height 0.3s ease,
    padding 0.3s ease;
  padding-top: 0;
}
.testi-card.testi-open .testi-body {
  max-height: 400px;
  padding-top: 0.75rem;
}
.testi-card.testi-open .testi-chevron {
  transform: rotate(180deg);
}
.testi-card.testi-open .testi-preview {
  display: none;
}

/* ══════════════════════════════════════════════════════════════
   SCANNER BUTTONS — red/blue glow (reuses faqColorShift keyframes)
   ══════════════════════════════════════════════════════════════ */
.scanner-glow-btn {
  border: 2px solid #ef4444 !important;
  color: #f87171 !important;
  background: #0f172a !important;
  animation: faqColorShift 3.5s ease-in-out infinite;
  transition:
    transform 0.15s,
    background 0.2s !important;
}
.scanner-glow-btn:hover {
  background: rgba(99, 102, 241, 0.12) !important;
  transform: translateY(-1px);
  color: #a5b4fc !important;
}

/* ══════════════════════════════════════════════════════════════
   BOT BUILDER BUTTON — purple-pink gradient
   ══════════════════════════════════════════════════════════════ */
.btn-bot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  background: linear-gradient(135deg, #7c3aed 0%, #db2777 100%);
  color: #fff;
  font-weight: 700;
  font-size: 0.875rem;
  padding: 0.75rem 1.25rem;
  border-radius: 1rem;
  border: none;
  cursor: pointer;
  width: 100%;
  box-shadow: 0 4px 18px rgba(124, 58, 237, 0.35);
  transition:
    opacity 0.2s,
    transform 0.15s,
    box-shadow 0.2s;
  min-height: unset;
}
.btn-bot:hover {
  opacity: 0.9;
  transform: translateY(-1px);
  box-shadow: 0 6px 24px rgba(219, 39, 119, 0.4);
}

/* ══════════════════════════════════════════════════════════════
   FEATURE TILES — 4 × 2 compact grid (always 4 cols)
   ══════════════════════════════════════════════════════════════ */
.feature-grid-4x2 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}
@media (max-width: 639px) {
  .feature-grid-4x2 .feature-tile {
    padding: 10px 6px 8px;
    border-radius: 0.75rem;
  }
  .feature-grid-4x2 .feature-tile-icon {
    font-size: 1.1rem;
    margin-bottom: 3px;
  }
  .feature-grid-4x2 .feature-tile-title {
    font-size: 8px;
    letter-spacing: -0.01em;
  }
  .feature-grid-4x2 .feature-tile-desc {
    display: none;
  }
}

/* ══════════════════════════════════════════════════════════════
   PRICING CAROUSEL — mobile swipe, desktop 3-col grid
   ══════════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════════════
   PRICING CAROUSEL — mobile centre-snap, desktop 3-col grid
   ══════════════════════════════════════════════════════════════

   Mobile strategy: scroll-snap-align:center  + symmetric side
   padding calculated so the first card is centred in the section
   and the next card peeks equally on the right.  No negative
   margins — the carousel stays within section bounds so the
   heading and cards share the same left alignment.               */

.pricing-carousel-outer {
  position: relative;
  width: 100%;
  max-width: 100vw;
  margin: 0 auto 2.5rem;
  overflow: hidden; /* clip the peeking cards at outer boundary */
  box-sizing: border-box;
}

.pricing-carousel {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  gap: 14px;
  /*
   * Symmetric padding centres each card in the scroll port.
   * Formula: (100% - card_width) / 2  where card = min(75vw, 280px).
   * On 360px section-inner ≈ 336px: padding ≈ (336-280)/2 = 28px ✓
   * On 375px section-inner ≈ 351px: padding ≈ (351-280)/2 = 35.5px ✓
   * On 320px: card = 75vw=240px, padding ≈ (296-240)/2 = 28px ✓
   */
  padding: 28px max(8px, calc((100% - min(75vw, 280px)) / 2)) 16px;
  scrollbar-width: none;
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
}
.pricing-carousel::-webkit-scrollbar {
  display: none;
}

.pricing-carousel-card {
  scroll-snap-align: center;
  flex-shrink: 0;
  width: min(75vw, 280px);
}

/* Extra top room for the "MOST POPULAR" badge (absolutely −16px above card) */
.pricing-carousel-card--featured {
  padding-top: 20px;
}

/* Dots indicator */
.pricing-dots {
  display: flex;
  justify-content: center;
  gap: 6px;
  margin-top: 10px;
}
.pricing-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #334155;
  transition:
    background 0.2s,
    width 0.2s;
}
.pricing-dot.active {
  background: #10b981;
  width: 18px;
  border-radius: 3px;
}

/* ── sm: 640–767px — 2 cards visible ────────────────────────── */
@media (min-width: 640px) {
  .pricing-carousel {
    padding: 28px max(8px, calc((100% - min(45vw, 290px)) / 2)) 16px;
  }
  .pricing-carousel-card {
    width: min(45vw, 290px);
  }
}

/* ── Desktop: 3-col grid ≥768px ─────────────────────────────── */
@media (min-width: 768px) {
  .pricing-carousel-outer {
    max-width: 920px;
  }
  .pricing-carousel {
    display: grid;
    grid-template-columns: 1fr 1.08fr 1fr;
    gap: 20px;
    overflow: visible;
    scroll-snap-type: none;
    padding: 28px 0 0;
  }
  .pricing-carousel-card {
    width: auto;
    scroll-snap-align: unset;
  }
  .pricing-carousel-card--featured {
    padding-top: 24px;
  }
  .pricing-dots {
    display: none;
  }
}

/* ══════════════════════════════════════════════════════════════
   ANALYSIS SECTION — mobile responsiveness
   ══════════════════════════════════════════════════════════════ */
/* Verdict text size on mobile */
@media (max-width: 639px) {
  #signalText {
    font-size: 1.4rem !important;
    line-height: 1.1;
  }
  #signalPanelHeader {
    padding: 12px !important;
  }
  .signal-verdict-card {
    padding: 10px !important;
  }
  /* Stack verdict ABOVE chart on mobile via order */
  .analysis-verdict-col {
    order: -1;
  }
}

/* ══════════════════════════════════════════════════════════════
   ICT TAG TOOLTIPS
   ══════════════════════════════════════════════════════════════ */
.ict-tag {
  cursor: pointer;
  transition:
    opacity 0.15s,
    transform 0.15s;
}
.ict-tag:hover {
  opacity: 0.85;
  transform: scale(1.04);
}
#ictTagTooltip {
  display: none;
  margin-top: 8px;
  padding: 8px 12px;
  background: #1e293b;
  border: 1px solid rgba(16, 185, 129, 0.2);
  border-radius: 10px;
  font-size: 11px;
  color: #94a3b8;
  line-height: 1.5;
  animation: fadeIn 0.15s ease both;
}
#ictTagTooltip.visible {
  display: block;
}

/* ══════════════════════════════════════════════════════════════
   VERDICT FEAT PILLS — clickable with tooltip
   ══════════════════════════════════════════════════════════════ */
.verdict-feat-pill {
  cursor: pointer;
  transition:
    background 0.15s,
    border-color 0.15s;
}
.verdict-feat-pill:hover {
  background: rgba(16, 185, 129, 0.12);
  border-color: rgba(16, 185, 129, 0.3);
}
#pillTooltip {
  display: none;
  grid-column: 1 / -1;
  margin-top: 4px;
  padding: 8px 10px;
  background: #1e293b;
  border: 1px solid rgba(16, 185, 129, 0.2);
  border-radius: 10px;
  font-size: 10px;
  color: #94a3b8;
  line-height: 1.5;
  animation: fadeIn 0.15s ease both;
}

/* ══════════════════════════════════════════════════════════════
   SCANNER BUTTONS — additive border glow (keeps btn-ghost base)
   ══════════════════════════════════════════════════════════════ */
@keyframes scannerGlow {
  0%,
  100% {
    border-color: rgba(239, 68, 68, 0.65);
    box-shadow:
      0 0 10px rgba(239, 68, 68, 0.25),
      inset 0 0 6px rgba(239, 68, 68, 0.06);
  }
  50% {
    border-color: rgba(99, 102, 241, 0.65);
    box-shadow:
      0 0 10px rgba(99, 102, 241, 0.25),
      inset 0 0 6px rgba(99, 102, 241, 0.06);
  }
}
.scanner-glow {
  border-width: 2px !important;
  animation: scannerGlow 3s ease-in-out infinite;
}

/* ══════════════════════════════════════════════════════════════
   FEATURE TILES — infinite auto-scroll marquee
   ══════════════════════════════════════════════════════════════ */
@keyframes featureMarquee {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}
.feat-marquee-outer {
  overflow: hidden;
  overflow-x: clip; /* clip without creating scroll container (Chrome 90+/FF 81+) */
  width: 100%;
  max-width: 100%;
  contain: layout; /* prevent track from expanding ancestor layout */
  -webkit-mask-image: linear-gradient(
    to right,
    transparent 0%,
    #000 8%,
    #000 92%,
    transparent 100%
  );
  mask-image: linear-gradient(
    to right,
    transparent 0%,
    #000 8%,
    #000 92%,
    transparent 100%
  );
}
.feat-marquee-track {
  display: flex;
  gap: 12px;
  width: max-content;
  will-change: transform; /* isolate animation layer */
  animation: featureMarquee 28s linear infinite;
}
.feat-marquee-track:hover,
.feat-marquee-track:focus-within {
  animation-play-state: paused;
}
.feat-marquee-tile {
  flex-shrink: 0;
  width: 160px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 1rem;
  padding: 14px 10px 12px;
  text-align: center;
  transition:
    background 0.2s,
    border-color 0.2s,
    transform 0.2s;
}
.feat-marquee-tile:hover {
  background: rgba(16, 185, 129, 0.06);
  border-color: rgba(16, 185, 129, 0.2);
  transform: translateY(-2px);
}
.feat-marquee-tile .feature-tile-icon {
  font-size: 1.5rem;
  margin-bottom: 6px;
}
.feat-marquee-tile .feature-tile-title {
  font-size: 0.72rem;
  font-weight: 700;
  color: #e2e8f0;
  margin-bottom: 4px;
  line-height: 1.3;
}
.feat-marquee-tile .feature-tile-desc {
  font-size: 0.62rem;
  color: #64748b;
  line-height: 1.4;
}
@media (max-width: 639px) {
  .feat-marquee-tile {
    width: 140px;
    padding: 11px 8px 10px;
  }
  .feat-marquee-tile .feature-tile-icon {
    font-size: 1.25rem;
  }
  .feat-marquee-tile .feature-tile-title {
    font-size: 0.66rem;
  }
  .feat-marquee-tile .feature-tile-desc {
    font-size: 0.58rem;
  }
}

/* ══════════════════════════════════════════════════════════════
   MOBILE-FIRST GLOBAL FIXES  (max-width: 639px)
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 639px) {
  /* ── Hero ──────────────────────────────────────────────────── */
  /* Reduce hero top/bottom padding so the fold is reached sooner */
  .hero-bg {
    padding-top: 72px !important;
    padding-bottom: 40px !important;
  }

  /* Hero heading size – prevent overflow on 320px phones */
  .hero-h1 {
    font-size: clamp(2.4rem, 10vw, 4rem) !important;
  }

  /* Bot Builder + Signal cards: tighter padding on mobile */
  .hero-glass-card {
    padding: 14px !important;
  }

  /* ── Analysis section ──────────────────────────────────────── */
  /* Controls: stack pair select full-width, then TF + LOAD on same row */
  #analysisControls {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }
  #pairSelect {
    grid-column: 1 / -1;
  } /* pair select spans full width */
  #timeframeSelect {
    grid-column: 1;
  }
  #loadChartBtn {
    grid-column: 2;
  }

  /* Action bar buttons below chart */
  #askSenseiBtn {
    font-size: 0.72rem !important;
    padding: 10px 12px !important;
  }
  #senseiScannerBtn,
  #smzBtn {
    font-size: 0.68rem !important;
    padding: 8px 10px !important;
  }

  /* ── Verdict panel ─────────────────────────────────────────── */
  #signalText {
    font-size: 1.5rem !important;
  }
  /* On mobile: hide ALL verdict content — show only the brain trigger */
  #verdictInner {
    display: none;
  }
  #verdictInner.verdict-mobile-open {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }
  /* When verdictInner is open on mobile, show all sections including ③-⑥ */
  #verdictInner.verdict-mobile-open #verdictDetails {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }
  /* Brain trigger button — scanner cyan glow */
  #verdictBrainTrigger {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 12px 18px;
    background: rgba(0, 229, 204, 0.07);
    border: 1px solid rgba(0, 229, 204, 0.35);
    border-radius: 16px;
    color: #00e5cc;
    font-size: 0.78rem;
    font-weight: 700;
    cursor: pointer;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    box-shadow:
      0 0 20px rgba(0, 229, 204, 0.16),
      0 0 45px rgba(0, 229, 204, 0.06);
    transition: all 0.25s;
    min-height: unset;
  }
  #verdictBrainTrigger:hover,
  #verdictBrainTrigger:active {
    background: rgba(0, 229, 204, 0.14);
    border-color: rgba(0, 229, 204, 0.6);
    box-shadow:
      0 0 32px rgba(0, 229, 204, 0.28),
      0 0 70px rgba(0, 229, 204, 0.12);
  }

  /* ── Resources — compact on mobile ─────────────────────────── */
  #resources {
    padding-top: 24px !important;
    padding-bottom: 24px !important;
  }
  #resources .max-w-4xl > p {
    margin-bottom: 14px !important;
    font-size: 0.7rem !important;
  }
  #resources .section-h2 {
    margin-bottom: 4px !important;
  }
  #resources .bg-gray-950 {
    padding: 10px !important;
    border-radius: 14px !important;
  }
  #resources .grid {
    gap: 8px !important;
  }
  #resources .bg-gray-900 {
    padding: 10px 12px !important;
    border-radius: 12px !important;
  }
  #resources h4 {
    font-size: 0.75rem !important;
    line-height: 1.3 !important;
  }
  #resources p {
    font-size: 0.65rem !important;
    margin-top: 4px !important;
  }
  #resources .text-xs.font-bold {
    font-size: 0.6rem !important;
    margin-bottom: 4px !important;
  }

  /* ── Section headings ──────────────────────────────────────── */
  .section-h2 {
    font-size: clamp(1.5rem, 7vw, 2.2rem) !important;
  }

  /* ── FAQ floating pill – don't overlap content on very small screens */
  .faq-fab {
    bottom: 16px !important;
    right: 12px !important;
    font-size: 0.7rem !important;
    padding: 8px 14px !important;
  }
  .faq-bubble {
    right: 8px !important;
    bottom: 56px !important;
    width: calc(100vw - 16px) !important;
    max-width: none !important;
  }
}

/* ══════════════════════════════════════════════════════════════
   MOBILE PERFORMANCE — reduce GPU/CPU overhead on phones
   ══════════════════════════════════════════════════════════════ */

/* Eliminate 300ms tap delay on all interactive elements (Android) */
button,
[role="button"],
a,
input,
select,
textarea,
label {
  touch-action: manipulation;
}

/* Promote hero orbs to their own compositing layer on desktop so
   orbDrift transform doesn't repaint the rest of the page */
.hero-orb {
  will-change: transform;
}

@media (max-width: 767px) {
  /* ── Stop continuous animation loops ───────────────────────────
     These all animate non-cheap properties (box-shadow, filter,
     background-position) every frame and are the top contributors
     to dropped frames on mid-range phones.                        */

  /* Hero orbs: 350–700 px elements moving + filter:blur every frame */
  .hero-orb {
    animation: none !important;
    filter: none !important;
    will-change: auto;
  }

  /* Gradient text: background-position repaint per frame */
  .text-gradient-hero {
    animation: none !important;
    background-position: 0% 50%;
  }

  /* FAQ FAB: box-shadow + border-color + color animated 3 s/frame,
     always visible in the viewport */
  .faq-fab {
    animation: none !important;
    border-color: #ef4444;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4);
    color: #f87171;
  }

  /* FAQ bubble: animates even when closed (opacity:0) — wasted GPU */
  .faq-bubble {
    animation: none !important;
    border-color: rgba(239, 68, 68, 0.4);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6);
  }

  /* Scanner glow: continuous box-shadow animation */
  .scanner-glow {
    animation: none !important;
    border-color: rgba(239, 68, 68, 0.65) !important;
    box-shadow: 0 0 8px rgba(239, 68, 68, 0.2) !important;
  }
  .scanner-glow-btn {
    animation: none !important;
    border-color: #ef4444 !important;
    box-shadow: none !important;
  }

  /* ── Lighten stacked backdrop-filter layers in the hero ────────
     signal-float-card (24px) + hero-glass-card (20px) +
     hero-stat-glass (16px) all render simultaneously — GPU
     overdraw on mid-range phones. Halve the blur; the opaque
     background colour makes up the visual difference.             */
  .signal-float-card {
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
  }
  .hero-glass-card {
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
  }
  .hero-stat-glass {
    backdrop-filter: blur(6px) !important;
    -webkit-backdrop-filter: blur(6px) !important;
  }
}

/* ══════════════════════════════════════════════════════════════
   FLUID TYPOGRAPHY — clamp() everywhere, no more hard jumps
   ══════════════════════════════════════════════════════════════ */

/* Hero subheadline: fluid between 14px (320px screen) and 18px (1024px+) */
.hero-bg p.text-base,
.hero-bg p.text-lg {
  font-size: clamp(0.875rem, 1.5vw + 0.5rem, 1.125rem);
}

/* Section description paragraphs below headings */
.section-desc {
  font-size: clamp(0.875rem, 1.2vw + 0.5rem, 1rem);
}

/* Card body text: smooth between 11px and 13px */
.offer-card p,
.feature-tile p,
.sig-room-door p {
  font-size: clamp(0.688rem, 1vw + 0.3rem, 0.8125rem);
}

/* CTA button text fluid */
.btn-primary,
.btn-ghost {
  font-size: clamp(0.8125rem, 1.2vw + 0.3rem, 1rem);
}

/* ══════════════════════════════════════════════════════════════
   HERO — tablet (768–1023px): prevent right-column overflow
   ══════════════════════════════════════════════════════════════ */
@media (min-width: 768px) and (max-width: 1023px) {
  /* Right column cards: constrain width so they don't stretch too far */
  .hero-bg .grid > div:last-child {
    max-width: 460px;
    margin-left: auto;
  }

  /* Hero heading: fluid between tablet sizes */
  .hero-h1 {
    font-size: clamp(2.5rem, 5vw, 3.5rem) !important;
  }

  /* Glass cards: reduce internal padding on tablet */
  .hero-glass-card {
    padding: 1rem !important;
  }

  .signal-float-card {
    padding: 14px 16px !important;
  }
}

/* ══════════════════════════════════════════════════════════════
   ANALYSIS SECTION — 640–1023px (stacked, pre-desktop)
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 1023px) {
  /* Chart area: full width, reasonable height */
  #tv-chart {
    width: 100% !important;
  }

  /* Verdict panel text: fluid so it doesn't crowd */
  #signalText {
    font-size: clamp(1.25rem, 4vw, 1.75rem) !important;
  }

  /* Analysis controls: fluid gap */
  #analysisControls {
    gap: clamp(4px, 1vw, 8px);
  }
}

/* ══════════════════════════════════════════════════════════════
   PRICING SECTION — mid-range tablets (640–767px)
   ══════════════════════════════════════════════════════════════ */
@media (min-width: 640px) and (max-width: 767px) {
  /* Offer cards: reduce padding so 3 cards fit side-by-side */
  .offer-card {
    padding: 1rem !important;
  }
  .offer-card .text-4xl {
    font-size: 1.75rem !important;
  }
  .offer-card .text-3xl {
    font-size: 1.5rem !important;
  }
}

/* ══════════════════════════════════════════════════════════════
   FOOTER — 640–900px: tighter column gaps
   ══════════════════════════════════════════════════════════════ */
@media (min-width: 640px) and (max-width: 900px) {
  footer .grid {
    gap: clamp(12px, 3vw, 24px) !important;
  }
  footer .text-sm {
    font-size: 0.8125rem;
  }
}

/* ══════════════════════════════════════════════════════════════
   GLOBAL MOBILE — tighten spacing on < 640px
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 639px) {
  /* Section vertical padding: fluid so sections don't waste space */
  section,
  [id]:not(#hero):not(nav) {
    scroll-margin-top: 60px;
  }

  /* Card padding: fluid */
  .offer-card {
    padding: clamp(0.75rem, 3vw, 1.25rem) !important;
  }

  /* Stat grid numbers: scale down smoothly */
  .hero-stat-num {
    font-size: clamp(1.1rem, 5vw, 1.5rem) !important;
  }
  .hero-stat-label {
    font-size: clamp(0.6rem, 1.5vw + 0.3rem, 0.75rem);
  }

  /* Announce bar: fluid font */
  .announcement-bar span {
    font-size: clamp(0.65rem, 2.5vw, 0.75rem);
  }

  /* Trust strip: fluid font */
  .trust-strip > span {
    font-size: clamp(0.65rem, 2vw, 0.75rem);
  }

  /* Nav logo text: fluid */
  .nav-logo-text {
    font-size: clamp(0.8rem, 3vw, 1rem);
  }

  /* Section headings: already clamp'd but reinforce */
  .section-h2 {
    font-size: clamp(1.4rem, 7vw, 2rem) !important;
    line-height: 1.15 !important;
  }

  /* Feature tiles: fluid padding */
  .feature-tile {
    padding: clamp(0.625rem, 2.5vw, 0.875rem) !important;
  }

  /* Pricing carousel cards: fluid padding */
  .pricing-card,
  .offer-card {
    padding: clamp(0.75rem, 3vw, 1rem) !important;
  }

  /* Live signal card: compact */
  .signal-float-card {
    padding: 12px 14px !important;
  }

  /* Bot creator glass card: tighter */
  .hero-glass-card {
    padding: 12px !important;
  }
}

/* ══════════════════════════════════════════════════════════════
   VERY SMALL PHONES (< 380px) — extra tightening
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 379px) {
  .hero-h1 {
    font-size: clamp(2rem, 9vw, 2.5rem) !important;
    line-height: 0.95 !important;
  }

  .section-h2 {
    font-size: clamp(1.25rem, 7vw, 1.6rem) !important;
  }

  .btn-primary,
  .btn-ghost {
    font-size: 0.8rem !important;
    padding: 0.65rem 1rem !important;
  }

  /* Nav: hide long text, keep icons readable */
  .nav-logo-text {
    font-size: 0.8rem;
  }

  .offer-card {
    padding: 0.75rem !important;
  }
}

/* ── Scroll FAB: replaces the old bottom testi/faq buttons ── */
.testi-fab,
.faq-fab {
  display: none !important;
}

#scrollFab {
  position: fixed;
  top: 72px;
  right: 18px;
  z-index: 9100;
  display: none;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
}
#scrollFab.visible {
  display: flex;
}
#scrollFabBtn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #0f172a;
  border: 1.5px solid rgba(255, 255, 255, 0.12);
  color: #9ca3af;
  font-size: 18px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
  transition:
    border-color 0.2s,
    color 0.2s;
  min-height: unset;
}
#scrollFabBtn:hover {
  border-color: rgba(255, 255, 255, 0.3);
  color: #fff;
}
#scrollFabMenu {
  background: #0f172a;
  border: 1.5px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.6);
  display: none;
}
#scrollFabMenu.open {
  display: block;
}
.sfm-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  font-size: 12px;
  font-weight: 600;
  color: #d1d5db;
  cursor: pointer;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  background: transparent;
  border-left: none;
  border-right: none;
  border-top: none;
  width: 100%;
  text-align: left;
  white-space: nowrap;
  min-height: unset;
  transition: background 0.15s;
}
.sfm-item:last-child {
  border-bottom: none;
}
.sfm-item:hover {
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
}

.scan-pair-btn {
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 600;
  border: 1px solid #374151;
  background: transparent;
  color: #6b7280;
  cursor: pointer;
  transition: all 0.15s;
  min-height: unset;
}
.scan-pair-btn.active {
  background: rgba(16, 185, 129, 0.12);
  border-color: rgba(16, 185, 129, 0.4);
  color: #34d399;
}
.scan-pair-btn:hover {
  border-color: #6b7280;
  color: #d1d5db;
}

/* ── Compact Sensei Verdict ── */
.signal-verdict-card {
  padding: 14px 16px !important;
}
#verdictDetails .grid {
  gap: 6px !important;
}
#verdictDetails .text-sm {
  font-size: 11px !important;
}
#verdictDetails .text-xs {
  font-size: 10px !important;
}
#verdictDetails .p-4 {
  padding: 10px 12px !important;
}
#verdictDetails .p-3 {
  padding: 8px 10px !important;
}
#verdictDetails .mb-4 {
  margin-bottom: 10px !important;
}
#verdictDetails .mb-3 {
  margin-bottom: 8px !important;
}

/* ── Full Master Course — red glow animation ── */
@keyframes courseRedPulse {
  0%,
  100% {
    box-shadow:
      0 0 24px rgba(239, 68, 68, 0.18),
      0 0 60px rgba(239, 68, 68, 0.06);
    border-color: rgba(239, 68, 68, 0.4);
  }
  50% {
    box-shadow:
      0 0 40px rgba(239, 68, 68, 0.32),
      0 0 90px rgba(239, 68, 68, 0.12);
    border-color: rgba(239, 68, 68, 0.65);
  }
}

/* ── Signup payment wizard animations ── */
@keyframes suDotPulse {
  0%,
  80%,
  100% {
    transform: scale(0.6);
    opacity: 0.4;
  }
  40% {
    transform: scale(1);
    opacity: 1;
  }
}
@keyframes suIconBounce {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-6px);
  }
}
.su-step-active {
  background: #10b981 !important;
}
.su-step-done {
  background: rgba(16, 185, 129, 0.4) !important;
}
.su-step-inactive {
  background: rgba(255, 255, 255, 0.08) !important;
}
.su-method-active {
  background: rgba(16, 185, 129, 0.12) !important;
  border-color: rgba(16, 185, 129, 0.4) !important;
  color: #10b981 !important;
}

/* ── Account Settings Modal ───────────────────────────────── */
.acs-tab {
  padding: 8px 14px;
  font-size: 12px;
  font-weight: 600;
  color: #64748b;
  border-radius: 10px 10px 0 0;
  border: none;
  background: transparent;
  cursor: pointer;
  transition:
    color 0.15s,
    background 0.15s;
  white-space: nowrap;
  margin-bottom: -1px;
}
.acs-tab:hover {
  color: #e2e8f0;
}
.acs-tab-active {
  color: #10b981 !important;
  border-bottom: 2px solid #10b981;
}

/* Toggle switch */
.acs-toggle-track {
  width: 40px;
  height: 22px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  transition: background 0.2s;
  position: relative;
}
.acs-toggle-thumb {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 16px;
  height: 16px;
  background: #94a3b8;
  border-radius: 50%;
  transition:
    transform 0.2s,
    background 0.2s;
  pointer-events: none;
}
#acsNotifyToggle:checked ~ .acs-toggle-track {
  background: rgba(16, 185, 129, 0.25);
  border-color: rgba(16, 185, 129, 0.5);
}
#acsNotifyToggle:checked ~ .acs-toggle-thumb {
  transform: translateX(18px);
  background: #10b981;
}