/* =========================
   BASE
========================= */
html {
  /* Prevent page from being wider than the viewport on mobile.
     Set on html (not body) so iOS Safari touch-scroll still works
     inside child containers. */
  overflow-x: hidden;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Arial, sans-serif;
  background: linear-gradient(180deg, #08111f 0%, #0f172a 100%);
  color: #f3f4f6;
  min-height: 100vh;
}

.app {
  max-width: 1200px;
  margin: auto;
  padding: 20px;
}

/* =========================
   GUEST HERO
========================= */
.guest-hero {
  margin-bottom: 28px;
}

.hero-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  background: linear-gradient(135deg, rgba(37,99,235,0.12) 0%, rgba(15,23,42,0.6) 100%);
  border: 1px solid rgba(59,130,246,0.25);
  border-radius: 18px;
  padding: 28px 32px;
  flex-wrap: wrap;
}

.hero-text {
  flex: 1;
  min-width: 260px;
}

.hero-headline {
  font-size: 26px;
  font-weight: 800;
  margin: 0 0 10px 0;
  color: #f1f5f9;
  line-height: 1.2;
  letter-spacing: -0.5px;
}

.hero-sub {
  font-size: 15px;
  color: #94a3b8;
  margin: 0 0 16px 0;
  line-height: 1.55;
}

.hero-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.hero-chip {
  background: rgba(255,255,255,0.06);
  border: 1px solid #334155;
  border-radius: 20px;
  padding: 4px 12px;
  font-size: 13px;
  color: #cbd5e1;
}

.hero-cta-block {
  text-align: center;
  flex-shrink: 0;
}

.hero-cta-btn {
  display: inline-block;
  background: #2563eb;
  color: white;
  padding: 14px 28px;
  border-radius: 12px;
  font-size: 16px;
  font-weight: 700;
  text-decoration: none;
  transition: background 0.15s, transform 0.1s;
  white-space: nowrap;
}

.hero-cta-btn:hover {
  background: #1d4ed8;
  transform: translateY(-1px);
}

.hero-cta-sub {
  margin: 8px 0 0 0;
  font-size: 12px;
  color: #475569;
}

.hero-arrow {
  text-align: center;
  margin-top: 16px;
  font-size: 13px;
  color: #475569;
  letter-spacing: 0.3px;
}

.hero-arrow span {
  color: #64748b;
}

/* =========================
   HERO PEEK STRIP (blurred data teaser)
========================= */
.hero-peek {
  background: rgba(8,14,28,0.6);
  border-top: 1px solid rgba(255,255,255,0.07);
  padding: 14px 32px 18px;
}

.hero-peek-title {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: #334155;
  margin-bottom: 10px;
}

.hero-peek-content {
  position: relative;
  border-radius: 10px;
  overflow: hidden;
}

.hero-peek-blurred {
  font-size: 13px;
  line-height: 1.8;
  color: #7e9ab5;
  font-family: -apple-system, monospace;
  white-space: pre-line;
  padding: 12px 14px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 10px;
  -webkit-filter: blur(5px);
  filter: blur(5px);
  user-select: none;
  pointer-events: none;
}

.hero-peek-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
  color: #60a5fa;
  background: rgba(8,14,28,0.35);
  backdrop-filter: blur(0px);
  letter-spacing: 0.2px;
}

/* =========================
   DEMO ANALYSIS BADGE
========================= */
.demo-analysis-badge {
  background: rgba(234,179,8,0.15);
  color: #fbbf24;
  border: 1px solid rgba(234,179,8,0.3);
  font-size: 11px;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 6px;
  letter-spacing: 0.5px;
}

/* =========================
   GUEST RUN CTA STRIP
========================= */
.guest-run-cta {
  margin-top: 16px;
}

.run-cta-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(37,99,235,0.1);
  border: 1px solid rgba(37,99,235,0.3);
  border-radius: 14px;
  padding: 16px 20px;
  gap: 16px;
  flex-wrap: wrap;
}

.run-cta-inner strong {
  display: block;
  color: #f1f5f9;
  font-size: 15px;
  margin-bottom: 2px;
}

.run-cta-inner span {
  font-size: 13px;
  color: #64748b;
}

.run-cta-btn {
  background: #2563eb;
  color: white;
  padding: 10px 22px;
  border-radius: 10px;
  border: none;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s;
  flex-shrink: 0;
}

.run-cta-btn:hover {
  background: #1d4ed8;
}

/* =========================
   GUEST BANNER
========================= */
.guest-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: linear-gradient(90deg, #0f2a4a 0%, #0d1f36 100%);
  border-bottom: 1px solid rgba(59, 130, 246, 0.3);
  padding: 10px 20px;
  font-size: 14px;
  flex-wrap: wrap;
  gap: 10px;
}

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

.guest-banner-right {
  display: flex;
  align-items: center;
  gap: 10px;
}

.demo-pill {
  background: #2563eb;
  color: white;
  font-size: 11px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 6px;
  letter-spacing: 0.5px;
}

.guest-login-link {
  color: #93c5fd;
  text-decoration: none;
  font-weight: 500;
  font-size: 14px;
}

.guest-login-link:hover {
  color: white;
}

.guest-signup-btn {
  background: #2563eb;
  color: white;
  padding: 7px 16px;
  border-radius: 8px;
  text-decoration: none;
  font-weight: 600;
  font-size: 14px;
  transition: background 0.15s;
}

.guest-signup-btn:hover {
  background: #1d4ed8;
}

/* =========================
   PRO TEASER (guests only)
========================= */
.pro-teaser {
  border: 1px solid rgba(59,130,246,0.2);
  border-radius: 16px;
  overflow: hidden;
  margin: 8px 0 24px 0;
  background: linear-gradient(180deg, rgba(15,23,42,0.8) 0%, rgba(17,24,39,0.95) 100%);
}

/* Blurred preview rows — top section */
.pro-teaser-preview {
  padding: 20px 24px 16px;
  border-bottom: 1px solid rgba(255,255,255,0.05);
  display: flex;
  flex-direction: column;
  gap: 12px;
  position: relative;
  overflow: hidden;
}

.pro-teaser-preview::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(15,23,42,0) 0%, rgba(15,23,42,0.85) 100%);
  pointer-events: none;
}

.preview-section-row {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}

.preview-label {
  font-size: 11px;
  font-weight: 600;
  color: #475569;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  width: 90px;
  flex-shrink: 0;
  padding-top: 3px;
}

.preview-lines {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.preview-line {
  height: 9px;
  background: rgba(100,116,139,0.18);
  border-radius: 5px;
}

/* CTA section — bottom */
.pro-teaser-cta {
  padding: 24px;
  text-align: center;
}

.pro-teaser-features {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  margin-bottom: 16px;
}

.pro-teaser-features span {
  background: rgba(37,99,235,0.12);
  border: 1px solid rgba(37,99,235,0.25);
  color: #93c5fd;
  font-size: 12px;
  font-weight: 600;
  padding: 4px 12px;
  border-radius: 20px;
}

.pro-teaser-cta h3 {
  margin: 0 0 8px 0;
  font-size: 20px;
  color: #f1f5f9;
  font-weight: 700;
}

.pro-teaser-cta p {
  margin: 0 0 20px 0;
  font-size: 14px;
  color: #64748b;
  line-height: 1.55;
  max-width: 400px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 20px;
}

.pro-teaser-actions {
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
}

.pro-teaser-btn-primary {
  background: #2563eb;
  color: white;
  padding: 12px 24px;
  border-radius: 10px;
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
  transition: background 0.15s, transform 0.1s;
}

.pro-teaser-btn-primary:hover {
  background: #1d4ed8;
  transform: translateY(-1px);
}

.pro-teaser-btn-secondary {
  background: rgba(255,255,255,0.05);
  color: #94a3b8;
  border: 1px solid #334155;
  padding: 12px 20px;
  border-radius: 10px;
  font-size: 15px;
  font-weight: 500;
  text-decoration: none;
  transition: background 0.15s;
}

.pro-teaser-btn-secondary:hover {
  background: rgba(255,255,255,0.08);
  color: #e2e8f0;
}

/* =========================
   FREE TIER BANNER
========================= */
.free-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(37, 99, 235, 0.1);
  border-bottom: 1px solid rgba(37, 99, 235, 0.25);
  padding: 10px 20px;
  font-size: 14px;
  gap: 12px;
  flex-wrap: wrap;
}

.banner-upgrade-btn {
  background: #2563eb;
  color: white;
  padding: 6px 14px;
  border-radius: 8px;
  text-decoration: none;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
}

.banner-upgrade-btn:hover {
  background: #1d4ed8;
}

.banner-close {
  background: transparent;
  color: #94a3b8;
  border: none;
  cursor: pointer;
  padding: 4px 8px;
  font-size: 14px;
  font-weight: 600;
  border-radius: 6px;
}

.banner-close:hover {
  background: rgba(255,255,255,0.08);
  color: white;
}

/* =========================
   TOPBAR
========================= */
.topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
  flex-wrap: wrap;
  gap: 12px;
}

.topbar-left {
  display: flex;
  align-items: center;
}

.topbar-right {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

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

.logo-icon {
  font-size: 22px;
}

.logo-text {
  font-size: 18px;
  font-weight: 700;
  color: #f1f5f9;
  letter-spacing: -0.3px;
}

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

input,
select {
  padding: 10px 14px;
  border-radius: 10px;
  border: 1px solid #334155;
  background: #162033;
  color: white;
}

button {
  padding: 10px 18px;
  border-radius: 10px;
  border: none;
  background: #2563eb;
  color: white;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s;
}

button:hover {
  background: #1d4ed8;
}

/* =========================
   AUTH USER AREA
========================= */
.auth-user-area {
  display: flex;
  align-items: center;
  gap: 10px;
}

.user-menu {
  position: relative;
}

.user-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(255,255,255,0.07);
  border: 1px solid #334155;
  border-radius: 10px;
  padding: 7px 12px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  color: #f1f5f9;
  transition: background 0.15s;
}

.user-btn:hover {
  background: rgba(255,255,255,0.12);
}

.user-dropdown {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  background: #1a2540;
  border: 1px solid #2d3f58;
  border-radius: 12px;
  padding: 8px;
  min-width: 200px;
  z-index: 100;
  box-shadow: 0 8px 24px rgba(0,0,0,0.4);
}

.user-dropdown a,
.user-dropdown button.dropdown-logout {
  display: block;
  padding: 10px 14px;
  border-radius: 8px;
  font-size: 14px;
  color: #e2e8f0;
  text-decoration: none;
  width: 100%;
  text-align: left;
  background: transparent;
  border: none;
  cursor: pointer;
  font-weight: 500;
  transition: background 0.12s;
  min-height: 40px;
  line-height: 1.3;
}
@media (max-width: 640px) {
  .user-dropdown a,
  .user-dropdown button.dropdown-logout {
    min-height: 44px;
    padding: 12px 14px;
  }
}

.user-dropdown a:hover,
.user-dropdown button.dropdown-logout:hover {
  background: rgba(255,255,255,0.08);
}

.user-dropdown hr {
  border: none;
  border-top: 1px solid #2d3f58;
  margin: 6px 0;
}

.dropdown-email {
  font-size: 12px;
  color: #64748b;
  padding: 6px 12px 4px;
}

.dropdown-logout {
  color: #f87171 !important;
}

/* =========================
   TIER BADGES
========================= */
.tier-badge {
  font-size: 10px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 5px;
  letter-spacing: 0.5px;
}

.badge-free {
  background: rgba(100,116,139,0.3);
  color: #94a3b8;
  border: 1px solid #475569;
}

.badge-pro {
  background: rgba(37,99,235,0.25);
  color: #60a5fa;
  border: 1px solid rgba(59,130,246,0.5);
}

.badge-elite {
  background: rgba(234,179,8,0.2);
  color: #fbbf24;
  border: 1px solid rgba(234,179,8,0.4);
}

/* =========================
   GUEST HEADER BUTTONS
========================= */
.guest-header-btns {
  display: flex;
  align-items: center;
  gap: 8px;
}

.btn-ghost {
  color: #93c5fd;
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  padding: 8px 14px;
  border-radius: 9px;
  border: 1px solid rgba(59,130,246,0.3);
  transition: background 0.15s;
}

.btn-ghost:hover {
  background: rgba(59,130,246,0.1);
  color: white;
}

.btn-primary-sm {
  background: #2563eb;
  color: white;
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
  padding: 8px 16px;
  border-radius: 9px;
  transition: background 0.15s;
  white-space: nowrap;
}

.btn-primary-sm:hover {
  background: #1d4ed8;
}

.btn-primary-full {
  display: block;
  width: 100%;
  padding: 12px;
  background: #2563eb;
  color: white;
  border: none;
  border-radius: 10px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s;
}

.btn-primary-full:hover {
  background: #1d4ed8;
}

/* =========================
   STATUS ROW
========================= */
.status-row {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 16px;
}

.status {
  font-size: 14px;
  color: #64748b;
  flex: 1;
}

.run-counter {
  font-size: 12px;
  color: #475569;
  background: rgba(255,255,255,0.04);
  border: 1px solid #1e3050;
  padding: 4px 10px;
  border-radius: 6px;
}

/* ── Credits pill in topbar ── */
.credits-display {
  font-size: 12px;
  font-weight: 600;
  color: #94a3b8;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(148,163,184,0.2);
  padding: 4px 10px;
  border-radius: 20px;
  white-space: nowrap;
}
.credits-display.credits-moderate {
  color: #fbbf24;
  border-color: rgba(251,191,36,0.3);
  background: rgba(251,191,36,0.07);
}
.credits-display.credits-low {
  color: #f97316;
  border-color: rgba(249,115,22,0.4);
  background: rgba(249,115,22,0.08);
}
.credits-display.credits-empty {
  color: #ef4444;
  border-color: rgba(239,68,68,0.4);
  background: rgba(239,68,68,0.08);
}

/* ── Cooldown / limit status message ── */
.status-cooldown {
  font-size: 15px;
  color: #fbbf24;
  font-weight: 700;
}

/* ── Stale-cache banner (shown when master-brief is served from cache) ── */
.status-stale {
  font-size: 13px;
  color: #fcd34d;
  background: rgba(250,204,21,0.08);
  border: 1px solid rgba(250,204,21,0.25);
  border-radius: 8px;
  padding: 6px 12px;
  font-weight: 600;
}

/* ── Credits info tooltip ── */
.credits-info-icon {
  cursor: pointer;
  font-size: 12px;
  opacity: 0.6;
  margin-left: 2px;
  user-select: none;
}
.credits-info-icon:hover { opacity: 1; }

.credits-display {
  position: relative;
}

.credits-tooltip {
  display: none;
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: 220px;
  background: #0f172a;
  border: 1px solid rgba(59,130,246,0.3);
  border-radius: 12px;
  padding: 14px 16px;
  z-index: 200;
  box-shadow: 0 8px 32px rgba(0,0,0,0.5);
  font-size: 13px;
  color: #cbd5e1;
}
.credits-tooltip.visible { display: block; }
.credits-tooltip strong {
  font-size: 14px;
  color: #f1f5f9;
  text-transform: capitalize;
}
.tt-row {
  display: flex;
  justify-content: space-between;
  margin-top: 8px;
  color: #94a3b8;
}
.tt-row span:last-child { color: #e2e8f0; font-weight: 600; }
.tt-divider {
  border-top: 1px solid rgba(255,255,255,0.07);
  margin: 10px 0;
}
.tt-remaining {
  font-weight: 700;
}
.tt-remaining span:first-child { color: #e2e8f0; }
.tt-remaining span:last-child  { color: #22c55e; font-size: 15px; }
.tt-reset {
  font-size: 11px;
  color: #475569;
  margin-top: 6px;
  text-align: right;
}
.tt-note {
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px solid rgba(255,255,255,0.06);
  font-size: 11px;
  color: #475569;
  text-align: center;
}

/* =========================
   LOADING / SPINNER
========================= */
.loading-view {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 460px;
  gap: 20px;
  text-align: center;
  padding: 40px 24px;
  background: rgba(15,22,40,0.55);
  border: 1px solid rgba(59,130,246,0.18);
  border-radius: 18px;
  margin-top: 8px;
}

.spinner {
  width: 64px;
  height: 64px;
  border: 4px solid rgba(59,130,246,0.18);
  border-top-color: #3b82f6;
  border-radius: 50%;
  animation: spin 0.75s linear infinite;
}

/* Reusable inline spinner — drop-in for buttons / inline labels */
.spinner-inline {
  display: inline-block;
  width: 14px;
  height: 14px;
  border: 2px solid rgba(255,255,255,0.25);
  border-top-color: rgba(255,255,255,0.9);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  vertical-align: -2px;
  margin-right: 6px;
}

/* Uniform disabled button state across the app */
button:disabled,
.btn:disabled,
.btn-primary:disabled,
.btn-secondary:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  transform: none !important;
  box-shadow: none !important;
  filter: grayscale(0.2);
}

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

.loading-view h2 {
  margin: 0;
  font-size: 26px;
  font-weight: 700;
  color: #f1f5f9;
  letter-spacing: -0.3px;
}

.loading-view p {
  margin: 0;
  font-size: 15px;
  color: #94a3b8;
  min-height: 22px;
  transition: all 0.3s ease;
}

.loading-note {
  font-size: 12px;
  color: #475569;
  margin-top: -8px;
}

/* Status bar — prominent "running" state */
.status-running {
  font-size: 15px;
  color: #60a5fa;
  font-weight: 700;
  animation: status-pulse 2s ease-in-out infinite;
}

@keyframes status-pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.55; }
}

/* =========================
   CARD
========================= */
.section-card {
  background: rgba(31, 41, 55, 0.92);
  border: 1px solid #243041;
  border-radius: 18px;
  padding: 20px;
}

.card-header-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 18px;
}

.card-header-row h2 {
  margin: 0;
  font-size: 18px;
}

/* =========================
   TA TAB BAR
========================= */
.ta-tab-bar {
  display: flex;
  gap: 8px;
  margin-bottom: 20px;
  border-bottom: 1px solid #1e3050;
  padding-bottom: 12px;
}

.ta-tab-btn {
  background: transparent;
  border: 1px solid #1e3050;
  color: #64748b;
  padding: 8px 18px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
}

.ta-tab-btn:hover {
  border-color: #3b82f6;
  color: #93c5fd;
}

.ta-tab-btn.active {
  background: rgba(37,99,235,0.15);
  border-color: #3b82f6;
  color: #60a5fa;
}

/* "You are here" — full color, no interaction */
.ta-tab-btn[disabled].active {
  opacity: 1;
  cursor: default;
  pointer-events: none;
}

/* Loading state — both disabled but TA shows muted active */
.ta-tab-btn[disabled].tab-loading {
  opacity: 0.7;
  cursor: default;
  pointer-events: none;
}

/* Scalp btn disabled during loading — muted */
.ta-tab-btn[disabled]:not(.active):not(.tab-loading) {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
}

/* Scalp button in loading state — blue pulse, same as TA loading */
.ta-tab-btn[disabled].tab-scalp-loading {
  opacity: 0.85;
  cursor: default;
  pointer-events: none;
  background: rgba(37,99,235,0.18);
  border-color: #3b82f6;
  color: #60a5fa;
}

/* ── Scalp loading view — shown while options-quick is running ── */
.scalp-loading-view {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 48px 20px 40px;
  gap: 14px;
  text-align: center;
}
.scalp-loading-view .spinner {
  width: 48px;
  height: 48px;
  border-width: 3px;
}
.scalp-loading-view h3 {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  color: #93c5fd;
  letter-spacing: 0.2px;
}
.scalp-loading-view p {
  margin: 0;
  font-size: 12px;
  color: #475569;
}
.scalp-loading-ticker {
  color: #60a5fa;
}

/* TA & Scenarios green CTA — shown when on scalp tab, inviting user to run */
.ta-tab-btn.tab-cta {
  background: rgba(22,163,74,0.15);
  border-color: #16a34a;
  color: #4ade80;
}
.ta-tab-btn.tab-cta:hover {
  background: rgba(22,163,74,0.28);
  border-color: #22c55e;
  color: #86efac;
}

/* =========================
   TA BLOCKS
========================= */
.ta-block {
  margin-bottom: 28px;
  padding-bottom: 20px;
  border-bottom: 1px solid #1e3050;
}

.ta-block:last-child {
  border-bottom: none;
}

.ta-block h3 {
  margin-bottom: 12px;
  font-size: 15px;
  color: #cbd5e1;
}

/* =========================
   SCALPING PLAN BLOCK
========================= */
.scalp-block {
  background: rgba(37, 99, 235, 0.06);
  border: 1px solid rgba(59, 130, 246, 0.2);
  border-radius: 14px;
  padding: 16px;
  margin-bottom: 28px;
}

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

.scalp-header h3 {
  margin: 0;
  font-size: 16px;
  color: #93c5fd;
}

.scalp-badge {
  background: rgba(37, 99, 235, 0.3);
  color: #60a5fa;
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 5px;
  letter-spacing: 0.5px;
  border: 1px solid rgba(59,130,246,0.4);
}

.scalp-sub {
  font-size: 12px;
  color: #64748b;
  margin: 0 0 12px 0;
}

/* =========================
   SUMMARY BLOCK
========================= */
.ta-summary-block {
  background: rgba(15, 23, 42, 0.6);
  border: 1px solid #1e3050;
  border-radius: 14px;
  padding: 16px;
}

.ta-summary-block pre {
  font-size: 13px;
  line-height: 1.65;
  color: #94a3b8;
}

/* =========================
   OPTIONS BLOCK
========================= */
.options-block {
  background: rgba(124, 58, 237, 0.05);
  border: 1px solid rgba(124, 58, 237, 0.2);
  border-radius: 14px;
  padding: 16px;
}

.ta-block-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 4px;
}

.ta-block-header h3 {
  margin: 0;
  font-size: 16px;
  color: #c4b5fd;
}

/* =========================
   SCENARIO CARDS (side by side)
========================= */
.ta-scenarios-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 28px;
}

@media (max-width: 640px) {
  .ta-scenarios-row { grid-template-columns: 1fr; }
}

.ta-scenario {
  border-radius: 12px;
  padding: 14px;
  margin-bottom: 0 !important;
  border-bottom: none !important;
}

.bull-scenario {
  background: rgba(16, 185, 129, 0.05);
  border: 1px solid rgba(16, 185, 129, 0.2) !important;
}

.bull-scenario h3 { color: #6ee7b7; font-size: 14px; }

.bear-scenario {
  background: rgba(239, 68, 68, 0.05);
  border: 1px solid rgba(239, 68, 68, 0.2) !important;
}

.bear-scenario h3 { color: #fca5a5; font-size: 14px; }

/* =========================
   IMAGE
========================= */
img {
  width: 100%;
  border-radius: 12px;
  background: #0b1220;
  object-fit: contain;
  margin-bottom: 12px;
  border: 1px solid #1e3050;
}

/* Chart images only show if src is set */
.chart-img:not([src]), .chart-img[src=""] {
  display: none !important;
}

/* =========================
   TEXT
========================= */
pre {
  white-space: pre-wrap;
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
  color: #e2e8f0;
}

/* =========================
   LOCK SYSTEM (TEXT ONLY)
========================= */
.locked-text-wrap {
  position: relative;
  margin-top: 10px;
}

/* Chart attribution link — shown below each chart image */
.chart-attr-link {
  display: block;
  margin: 6px 0 10px;
  font-size: 12px;
  color: #60a5fa;
  text-decoration: none;
  opacity: 0.75;
  transition: opacity 0.15s;
}
.chart-attr-link:hover { opacity: 1; text-decoration: underline; }

/* GEX affiliate reference link — kept for backwards compat */
.gex-ref-link {
  display: inline-block;
  margin-top: 8px;
  font-size: 12px;
  color: #6366f1;
  opacity: 0.7;
  text-decoration: none;
  letter-spacing: 0.1px;
  transition: opacity 0.15s;
}
.gex-ref-link:hover {
  opacity: 1;
  text-decoration: underline;
}

/* blur only text */
.locked-text-wrap.locked pre {
  filter: blur(8px);
  user-select: none;
  pointer-events: none;
  min-height: 80px;
}

/* dark overlay */
.locked-text-wrap.locked::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.45);
  border-radius: 12px;
  z-index: 1;
}

/* center overlay */
.lock-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  z-index: 2;
}

/* lock card — used only for the Scalping Plan (single lock remaining for guests) */
.lock-card {
  max-width: 360px;
  text-align: center;
  background: rgba(10, 16, 30, 0.92);
  border: 1px solid rgba(59, 130, 246, 0.35);
  border-radius: 16px;
  padding: 24px 28px;
  box-shadow: 0 12px 40px rgba(0,0,0,0.5);
  backdrop-filter: blur(4px);
}

.lock-icon {
  font-size: 26px;
  margin-bottom: 10px;
}

.lock-card h4 {
  margin: 0 0 6px 0;
  font-size: 17px;
  color: #f1f5f9;
}

.lock-card p {
  margin: 0 0 16px 0;
  font-size: 13px;
  color: #64748b;
  line-height: 1.5;
}

/* upgrade button inside lock card */
.lock-card .upgrade-btn {
  display: inline-block;
  padding: 10px 22px;
  background: #2563eb;
  border-radius: 9px;
  color: white;
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
  transition: background 0.15s;
}

.lock-card .upgrade-btn:hover {
  background: #1d4ed8;
}

/* =========================
   UPGRADE SECTION
========================= */
.upgrade-section {
  margin-top: 20px;
}

.upgrade-card {
  background: rgba(37, 99, 235, 0.12);
  border: 1px solid rgba(37, 99, 235, 0.3);
  border-radius: 14px;
  padding: 20px;
  display: flex;
  align-items: center;
  gap: 16px;
  text-align: left;
}

.upgrade-card-icon {
  font-size: 30px;
  flex-shrink: 0;
}

.upgrade-card-body h3 {
  margin: 0 0 6px 0;
  font-size: 16px;
}

.upgrade-card-body p {
  margin: 0 0 12px 0;
  font-size: 13px;
  color: #94a3b8;
}

.upgrade-btn {
  display: inline-block;
  padding: 9px 18px;
  background: #2563eb;
  border-radius: 8px;
  color: white;
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
  transition: background 0.15s;
}

.upgrade-btn:hover {
  background: #1d4ed8;
}

/* =========================
   MODALS
========================= */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(5, 10, 20, 0.75);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 20px;
  backdrop-filter: blur(4px);
}

.modal-card {
  background: #111827;
  border: 1px solid #1e3050;
  border-radius: 18px;
  padding: 32px;
  max-width: 420px;
  width: 100%;
  text-align: center;
  position: relative;
  box-shadow: 0 20px 60px rgba(0,0,0,0.5);
}

.modal-close {
  position: absolute;
  top: 10px;
  right: 10px;
  background: rgba(255,255,255,0.06);
  border: none;
  color: #94a3b8;
  border-radius: 10px;
  width: 40px;
  height: 40px;
  min-width: 40px;
  min-height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 18px;
  padding: 0;
  font-weight: 600;
}

@media (max-width: 640px) {
  .modal-close {
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
    top: 8px;
    right: 8px;
  }
}

.modal-close:hover {
  background: rgba(255,255,255,0.1);
  color: white;
}

.modal-icon {
  font-size: 36px;
  margin-bottom: 12px;
}

.modal-card h2 {
  margin: 0 0 10px 0;
  font-size: 22px;
  color: #f1f5f9;
}

.modal-card p {
  margin: 0 0 16px 0;
  font-size: 14px;
  color: #94a3b8;
  line-height: 1.55;
}

.quick-register-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
  text-align: left;
  margin-bottom: 14px;
}

.quick-register-form input {
  width: 100%;
  padding: 11px 14px;
  border-radius: 10px;
  border: 1px solid #334155;
  background: #162033;
  color: white;
  font-size: 14px;
}

.quick-register-form input:focus {
  outline: none;
  border-color: #3b82f6;
}

.form-error {
  background: rgba(239, 68, 68, 0.12);
  border: 1px solid rgba(239, 68, 68, 0.35);
  color: #f87171;
  border-radius: 8px;
  padding: 9px 12px;
  font-size: 13px;
  text-align: left;
}

.modal-footer-link {
  font-size: 13px;
  color: #64748b;
  margin-top: 4px;
}

.modal-footer-link a {
  color: #60a5fa;
  text-decoration: none;
}

.modal-footer-link a:hover {
  text-decoration: underline;
}

.modal-disclaimer {
  font-size: 12px;
  color: #475569;
  margin-top: 8px;
}

/* =========================
   ELITE OUTPUTS (COLLAPSED)
========================= */
.collapsed-section {
  margin-top: 20px;
}

.extra-label {
  font-size: 11px;
  font-weight: 700;
  color: #fbbf24;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  margin-bottom: 10px;
}

.collapsed-section details {
  background: rgba(31, 41, 55, 0.7);
  border: 1px solid #243041;
  border-radius: 12px;
  margin-bottom: 8px;
  overflow: hidden;
}

.collapsed-section summary {
  padding: 12px 16px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
  color: #cbd5e1;
  list-style: none;
  user-select: none;
}

.collapsed-section summary:hover {
  background: rgba(255,255,255,0.04);
}

.collapse-body {
  padding: 0 16px 16px;
  border-top: 1px solid #243041;
}

/* =========================
   NUMBER BLUR (guest mode)
========================= */
.num-blur {
  filter: blur(5px);
  user-select: none;
  pointer-events: none;
  display: inline-block;
  min-width: 1.5ch;
  transition: filter 0.2s;
}

/* Small "BLURRED LEVELS" notice badge color override */
#guestBlurBadge {
  background: rgba(15,23,42,0.8);
  color: #94a3b8;
  border: 1px solid #334155;
  font-size: 11px;
  font-weight: 600;
  padding: 3px 9px;
  border-radius: 6px;
  letter-spacing: 0.4px;
}

/* =========================
   UTIL
========================= */
.hidden {
  display: none !important;
}

.main-view {
  /* nothing special, just a container */
}

/* =========================
   OPTIONS SCALPING HEADER
========================= */

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

.options-header-left {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.options-header-left h3 {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  color: #f1f5f9;
}

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

/* 🟢 LIVE badge — pulsing green dot */
.live-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.5px;
  color: #4ade80;
  background: rgba(74,222,128,0.12);
  border: 1px solid rgba(74,222,128,0.3);
  border-radius: 20px;
  padding: 2px 8px;
  animation: live-pulse 1.8s ease-in-out infinite;
}

@keyframes live-pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.55; }
}

/* Countdown: "next in 42s" */
.options-countdown {
  font-size: 11px;
  color: #64748b;
  font-variant-numeric: tabular-nums;
  min-width: 80px;
  text-align: right;
}

/* "X min ago" age display */
.options-age {
  font-size: 11px;
  color: #64748b;
  white-space: nowrap;
}

/* ↺ Refresh button */
.options-refresh-btn {
  font-size: 11.5px;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 6px;
  border: 1px solid #334155;
  background: rgba(51,65,85,0.4);
  color: #94a3b8;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
  white-space: nowrap;
}

.options-refresh-btn:hover:not(:disabled) {
  background: rgba(59,130,246,0.15);
  border-color: #3b82f6;
  color: #93c5fd;
}

.options-refresh-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* =========================
   QUICK DECISION BANNER
========================= */

.qd-banner {
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: rgba(37, 99, 235, 0.07);
  border: 1px solid rgba(59, 130, 246, 0.25);
  border-radius: 10px;
  padding: 12px 14px;
  margin-bottom: 12px;
}

/* DTE tab row — standalone above action card */
.qd-dte-tabs {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 10px;
}

/* Trade direction + prices row */
.qd-trade-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
}

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

/* CALL / PUT direction chip */
.qd-direction {
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.5px;
  padding: 4px 10px;
  border-radius: 6px;
  white-space: nowrap;
}

.qd-direction.qd-bull {
  background: rgba(22,163,74,0.18);
  color: #4ade80;
  border: 1px solid rgba(74,222,128,0.25);
}

.qd-direction.qd-bear {
  background: rgba(220,38,38,0.18);
  color: #f87171;
  border: 1px solid rgba(248,113,113,0.25);
}

/* Contract + DTE */
.qd-contract {
  font-size: 14px;
  font-weight: 700;
  color: #e2e8f0;
  letter-spacing: 0.3px;
}

/* Right side: Entry / Target / Stop trio */
.qd-right {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}

.qd-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
}

.qd-label {
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: #475569;
}

.qd-val {
  font-size: 15px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: #e2e8f0;
}

/* Target = green, Stop = red */
.qd-val.qd-bull { color: #4ade80; }
.qd-val.qd-bear { color: #f87171; }

/* =========================
   DTE PILL TABS
   Small switcher: 0DTE | 1DTE | 7DTE
========================= */

.dte-tab-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 10px;
}

.dte-tab {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.6px;
  padding: 3px 11px;
  border-radius: 20px;
  border: 1px solid rgba(255,255,255,0.1);
  background: rgba(255,255,255,0.04);
  color: #64748b;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
  user-select: none;
}

.dte-tab:hover {
  border-color: rgba(255,255,255,0.2);
  color: #94a3b8;
  background: rgba(255,255,255,0.07);
}

.dte-tab.active {
  background: rgba(59,130,246,0.15);
  border-color: rgba(59,130,246,0.45);
  color: #93c5fd;
}

/* =========================
   ANALYSIS FORMATTER (af-)
   Structured key-value layout
   for readable trading output
========================= */

/* Container for formatted analysis sections */
.af-body {
  font-size: 13.5px;
  line-height: 1.55;
  color: #cbd5e1;
  padding: 2px 0;
}

/* Blank-line gap spacer — also acts as a visual section divider */
.af-gap {
  height: 6px;
  border-top: 1px solid rgba(255,255,255,0.05);
  margin: 6px 0;
}

/* Key: Value row */
.af-kv {
  display: flex;
  align-items: baseline;
  gap: 0;
  padding: 2px 0;
  border-bottom: 1px solid rgba(255,255,255,0.04);
}

.af-key {
  flex: 0 0 auto;
  min-width: 130px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: #64748b;
  padding-right: 10px;
  white-space: nowrap;
}

.af-val {
  flex: 1;
  color: #e2e8f0;
  font-size: 13.5px;
  font-variant-numeric: tabular-nums;
}

/* Setup blocks: Long / Short / Stand Aside */
.af-setup {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 6px 10px;
  border-radius: 6px;
  margin: 4px 0;
  border-left: 3px solid;
}

.af-setup-bull {
  background: rgba(22,163,74,0.1);
  border-color: #16a34a;
}

.af-setup-bear {
  background: rgba(220,38,38,0.1);
  border-color: #dc2626;
}

.af-setup-aside {
  background: rgba(100,116,139,0.12);
  border-color: #64748b;
}

.af-setup-label {
  flex: 0 0 auto;
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  padding-top: 1px;
}

.af-setup-bull .af-setup-label { color: #4ade80; }
.af-setup-bear .af-setup-label { color: #f87171; }
.af-setup-aside .af-setup-label { color: #94a3b8; }

.af-setup-val {
  flex: 1;
  color: #e2e8f0;
  font-size: 13px;
}

/* Prose paragraphs */
p.af-para {
  margin: 4px 0;
  color: #94a3b8;
  font-size: 13px;
  line-height: 1.6;
}

/* Keyword colors */
.af-bull {
  color: #4ade80;
  font-weight: 700;
}

.af-bear {
  color: #f87171;
  font-weight: 700;
}

.af-neutral {
  color: #facc15;
  font-weight: 700;
}

/* =========================
   RESPONSIVE
========================= */

/* ── Desktop hero login link (hidden on desktop, shown on mobile) ── */
.hero-login-link {
  display: none;
}

@media (max-width: 640px) {

  /* ── Body / container ── */
  body {
    background: #080f1e;
    /* NOTE: overflow-x:hidden intentionally NOT set here —
       iOS Safari blocks touch scroll in child containers when any
       ancestor has overflow:hidden. The carousel must be touchable. */
  }

  .app {
    padding: 0;
    width: 100%;
    /* overflow must stay visible/default so iOS touch scroll works
       inside #tabPanelsWrap — do NOT add overflow:hidden here */
  }

  /* ── Guest banner: hide on mobile — hero handles all CTAs ── */
  .guest-banner {
    display: none !important;
  }

  /* ── Topbar: compact single row ── */
  .topbar {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    flex-wrap: nowrap;
    padding: 14px 16px 10px;
    margin-bottom: 0;
    gap: 8px;
    border-bottom: 1px solid rgba(255,255,255,0.06);
  }

  .topbar-left {
    flex-shrink: 0;
  }

  .logo-text {
    font-size: 15px;
    font-weight: 700;
  }

  /* Hide ticker/provider controls and auth buttons from topbar on mobile —
     for guests the hero has the CTAs; for logged-in users keep the user menu */
  .topbar-right .controls {
    display: none;
  }

  /* Keep the user menu visible for logged-in users, hide guest header buttons */
  .guest-header-btns {
    display: none !important;
  }

  .auth-user-area {
    display: flex !important;
  }

  /* ── Hero: full-bleed, centered, conversion-focused ── */
  .guest-hero {
    margin: 0 0 0 0;
    padding: 0;
  }

  .hero-inner {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 20px;
    padding: 44px 24px 40px;
    background: linear-gradient(160deg, #0a1628 0%, #112044 45%, #0a1628 100%);
    border: none;
    border-radius: 0;
    border-bottom: 1px solid rgba(59,130,246,0.18);
  }

  .hero-text {
    min-width: auto;
    width: 100%;
  }

  .hero-headline {
    font-size: 27px;
    line-height: 1.22;
    letter-spacing: -0.6px;
    margin-bottom: 12px;
  }

  .hero-sub {
    font-size: 14px;
    line-height: 1.6;
    color: #7e9ab5;
    margin-bottom: 20px;
  }

  .hero-chips {
    justify-content: center;
    gap: 7px;
  }

  .hero-chip {
    font-size: 12px;
    padding: 5px 11px;
  }

  /* ── CTAs: full-width, finger-friendly ── */
  .hero-cta-block {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
  }

  .hero-cta-btn {
    display: block;
    width: 100%;
    max-width: 340px;
    padding: 17px 24px;
    font-size: 17px;
    font-weight: 700;
    border-radius: 14px;
    text-align: center;
    background: #2563eb;
    letter-spacing: 0.1px;
    box-shadow: 0 4px 24px rgba(37,99,235,0.35);
  }

  .hero-login-link {
    display: block;
    font-size: 14px;
    color: #94a3b8;
    text-decoration: none;
    padding: 4px 0;
  }

  .hero-login-link strong {
    color: #60a5fa;
    font-weight: 600;
  }

  .hero-cta-sub {
    font-size: 12px;
    color: #475569;
    margin: 0;
  }

  .hero-arrow {
    padding: 10px 16px;
    font-size: 13px;
    text-align: center;
    color: #475569;
    border-bottom: 1px solid rgba(255,255,255,0.05);
  }

  /* ── Blurred peek strip on mobile ── */
  .hero-peek {
    padding: 12px 16px 16px;
  }

  .hero-peek-blurred {
    font-size: 12px;
    line-height: 1.7;
    padding: 10px 12px;
  }

  .hero-peek-overlay {
    font-size: 13px;
  }

  /* ── Ticker controls: shown below hero as a compact bar ── */
  .status-row {
    padding: 10px 16px;
    border-bottom: 1px solid rgba(255,255,255,0.05);
  }

  /* ── Nav tabs: horizontally scrollable ── */
  .platform-nav {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    border-radius: 0;
    border-left: none;
    border-right: none;
    padding: 6px 8px;
    margin-bottom: 0;
    gap: 3px;
  }

  .platform-nav::-webkit-scrollbar {
    display: none;
  }

  .nav-tab {
    flex-shrink: 0;
    font-size: 12px;
    padding: 11px 14px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }

  /* ── Show ticker/provider below nav for logged-in users on mobile ── */
  .controls {
    flex-wrap: wrap;
    gap: 8px;
    padding: 12px 16px;
  }

  #tickerInput {
    font-size: 16px; /* prevents iOS auto-zoom */
  }

  /* ── Tab panels ── */
  .tab-panel {
    padding: 16px;
  }

  .platform-tab-header {
    flex-direction: column;
    gap: 10px;
    align-items: flex-start;
  }

  .platform-tab-title {
    font-size: 18px;
  }

  /* ── Upgrade card ── */
  .upgrade-card {
    flex-direction: column;
    text-align: center;
  }

  /* ── Section cards ── */
  .section-card {
    border-radius: 12px;
  }

  /* ── Topbar: hide credits pill on mobile (too wide, tooltip breaks layout) ── */
  .credits-display {
    display: none !important;
  }

  /* ── Free banner: compact single-line on mobile ── */
  .free-banner {
    flex-wrap: nowrap;
    padding: 8px 12px;
    font-size: 12px;
    gap: 8px;
  }
  .free-banner > span {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .banner-upgrade-btn {
    font-size: 12px;
    padding: 5px 10px;
    white-space: nowrap;
    flex-shrink: 0;
  }
  .banner-close {
    flex-shrink: 0;
    padding: 4px 6px;
  }

  /* ── User menu dropdown: keep inside viewport on mobile ── */
  .user-dropdown {
    right: 0;
    left: auto;
    min-width: 160px;
    max-width: 90vw;
  }

  /* ── Auth user area: tighter on mobile ── */
  .auth-user-area {
    gap: 6px;
  }

  .user-btn {
    padding: 5px 10px;
    gap: 6px;
    font-size: 13px;
  }

  /* ── Prevent tooltip from bleeding into layout on mobile ── */
  .credits-tooltip {
    display: none !important;
  }

  /* ── Global overflow guard: clamp any element that bleeds past the viewport ── */
  .section-card,
  .ta-block,
  .options-block,
  .ms-card,
  .ms-action-card,
  .qd-banner,
  .trade-card,
  .setup-card,
  .phase-chart-wrap,
  .platform-card {
    max-width: 100%;
    overflow-x: hidden;
  }

  /* ── TA sub-tab bar: wrap on very small screens ── */
  .ta-tab-bar {
    flex-wrap: wrap;
    gap: 6px;
  }

  /* ── Options scalp: DTE pills stack-friendly ── */
  .qd-dte-tabs {
    flex-wrap: wrap;
  }

  /* ── Trade idea cards: allow columns to shrink ── */
  .trade-levels-row {
    flex-wrap: wrap;
    gap: 6px;
  }
  .trade-level-item {
    min-width: 0;
    flex: 1 1 60px;
  }

  /* ── Nav tabs: allow wrapping so no tab is cut off ── */
  .nav-tabs {
    flex-wrap: wrap;
    gap: 4px;
  }

  /* ── Scalp loading view: tighter on mobile ── */
  .scalp-loading-view {
    padding: 32px 16px 28px;
  }
}


/* ============================================================
   PLATFORM NAV TABS
============================================================ */
.platform-nav {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  margin: 0 0 20px 0;
  background: rgba(15,23,42,0.6);
  border: 1px solid #1e293b;
  border-radius: 14px;
  padding: 6px;
}

.nav-tab {
  background: transparent;
  border: none;
  color: #94a3b8;
  font-size: 13px;
  font-weight: 600;
  padding: 8px 14px;
  border-radius: 9px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  white-space: nowrap;
}
.nav-tab:hover {
  background: rgba(255,255,255,0.07);
  color: #e2e8f0;
}
.nav-tab.active {
  background: #2563eb;
  color: #fff;
}
.nav-tab.pro-tab:not(.active)::after {
  content: " PRO";
  font-size: 9px;
  color: #3b82f6;
  vertical-align: super;
}
.nav-tab.elite-tab:not(.active)::after {
  content: " ELITE";
  font-size: 9px;
  color: #f59e0b;
  vertical-align: super;
}
.nav-tab.reg-tab:not(.active)::after {
  content: " REG";
  font-size: 9px;
  color: #22c55e;
  vertical-align: super;
}

/* ============================================================
   TAB PANELS
============================================================ */
.tab-panel { display: none; }
.tab-panel.active { display: block; }

/* ============================================================
   PLATFORM CARD / HEADER
============================================================ */
.platform-card {
  margin-bottom: 16px;
}
.platform-tab-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 20px;
}
.platform-tab-title {
  font-size: 22px;
  font-weight: 800;
  margin: 0 0 4px 0;
  color: #f1f5f9;
}
.platform-tab-sub {
  font-size: 13px;
  color: #94a3b8;
  margin: 4px 0 0 0;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.desk-q {
  color: #cbd5e1;
  font-weight: 500;
  font-size: 12.5px;
}
.desk-dot {
  color: #64748b;
  font-size: 14px;
  line-height: 1;
}
.platform-tab-hint {
  font-size: 11.5px;
  color: #94a3b8;
  margin: 6px 0 0 0;
  display: flex;
  align-items: flex-start;
  gap: 5px;
  line-height: 1.5;
  max-width: 620px;
}
.desk-hint-icon { font-size: 11px; margin-top: 1px; flex-shrink: 0; }
.platform-tab-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

/* ============================================================
   PLATFORM FORM ELEMENTS
============================================================ */
.platform-input {
  background: #0f172a;
  border: 1px solid #334155;
  color: #e2e8f0;
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 13px;
  min-width: 220px;
  outline: none;
  transition: border-color 0.15s;
}
.platform-input.sm { min-width: 120px; }
.platform-input:focus { border-color: #3b82f6; }

.platform-select {
  background: #0f172a;
  border: 1px solid #334155;
  color: #e2e8f0;
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 13px;
  cursor: pointer;
}
.platform-textarea {
  width: 100%;
  background: #0f172a;
  border: 1px solid #334155;
  color: #e2e8f0;
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 13px;
  font-family: inherit;
  resize: vertical;
  outline: none;
}
.platform-textarea:focus { border-color: #3b82f6; }

.platform-btn {
  background: #2563eb;
  color: #fff;
  border: none;
  border-radius: 9px;
  padding: 9px 18px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s, transform 0.1s;
  white-space: nowrap;
}
.platform-btn:hover { background: #1d4ed8; transform: translateY(-1px); }
.platform-btn:disabled { opacity: 0.5; cursor: not-allowed; }

.platform-btn-sm {
  background: #1e293b;
  color: #94a3b8;
  border: 1px solid #334155;
  border-radius: 7px;
  padding: 5px 12px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s;
}
.platform-btn-sm:hover  { background: #334155; color: #e2e8f0; }
.platform-btn-sm:active { background: #1a3a5c; color: #fff; transform: scale(0.96); box-shadow: inset 0 2px 4px rgba(0,0,0,0.4); }

/* ============================================================
   LOADING / EMPTY / GATE
============================================================ */
.platform-loading {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 24px 0;
  color: #64748b;
  font-size: 14px;
}
.platform-empty {
  text-align: center;
  padding: 48px 24px;
  color: #475569;
}
.platform-empty-icon {
  font-size: 40px;
  margin-bottom: 12px;
}
.platform-empty p { font-size: 15px; }

.pro-gate {
  text-align: center;
  padding: 48px 24px;
  background: rgba(37,99,235,0.07);
  border: 1px solid rgba(59,130,246,0.2);
  border-radius: 16px;
}
.pro-gate .lock-icon { font-size: 36px; margin-bottom: 10px; }
.pro-gate h3 { color: #f1f5f9; margin: 0 0 8px; }
.pro-gate p { color: #94a3b8; margin: 0 0 16px; }

/* ============================================================
   STAT CARDS / GRID
============================================================ */
.card-grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-bottom: 16px;
}
@media (max-width: 640px) {
  .card-grid-3 { grid-template-columns: 1fr; }
}

.stat-card {
  background: rgba(255,255,255,0.03);
  border: 1px solid #1e293b;
  border-radius: 12px;
  padding: 16px;
}
.stat-label {
  font-size: 11px;
  font-weight: 700;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  margin-bottom: 8px;
}
.stat-value {
  font-size: 22px;
  font-weight: 800;
  color: #f1f5f9;
  line-height: 1;
}
.stat-value.sm-val { font-size: 16px; line-height: 1.3; }
.stat-sub {
  font-size: 12px;
  color: #94a3b8;
  margin-top: 6px;
}

/* ============================================================
   BIAS / CONVICTION / META BADGES
============================================================ */
.bias-badge[data-val="CALL"],
.bias-badge[data-val="LONG"],
.bias-badge[data-val="UP"],
.bias-badge[data-val="BULL"] { color: #22c55e; }

.bias-badge[data-val="PUT"],
.bias-badge[data-val="SHORT"],
.bias-badge[data-val="DOWN"],
.bias-badge[data-val="BEAR"] { color: #ef4444; }

.bias-badge[data-val="WAIT"],
.bias-badge[data-val="NEUTRAL"] { color: #f59e0b; }

.conviction-badge {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  padding: 3px 10px;
  border-radius: 20px;
  letter-spacing: 0.5px;
  background: rgba(34,197,94,0.12);
  color: #22c55e;
  border: 1px solid rgba(34,197,94,0.25);
}
.conviction-badge.low {
  background: rgba(239,68,68,0.12);
  color: #ef4444;
  border-color: rgba(239,68,68,0.25);
}
.conviction-badge.medium {
  background: rgba(245,158,11,0.12);
  color: #f59e0b;
  border-color: rgba(245,158,11,0.25);
}

.meta-badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  padding: 2px 9px;
  border-radius: 20px;
  background: rgba(255,255,255,0.06);
  color: #94a3b8;
  border: 1px solid #334155;
  margin-left: 6px;
}
.meta-badge.risk-badge.low { color: #22c55e; border-color: rgba(34,197,94,0.3); }
.meta-badge.risk-badge.medium { color: #f59e0b; border-color: rgba(245,158,11,0.3); }
.meta-badge.risk-badge.high { color: #ef4444; border-color: rgba(239,68,68,0.3); }

/* ============================================================
   BEST TRADE GRID
============================================================ */
.best-trade-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
}
@media (max-width: 640px) {
  .best-trade-grid { grid-template-columns: repeat(2, 1fr); }
}
.trade-cell {
  background: rgba(255,255,255,0.03);
  border: 1px solid #1e293b;
  border-radius: 10px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.trade-label {
  font-size: 10px;
  font-weight: 700;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.6px;
}
.trade-val {
  font-size: 16px;
  font-weight: 700;
  color: #e2e8f0;
}

/* ============================================================
   SETUP CARDS
============================================================ */
.setup-cards {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.setup-card {
  display: flex;
  align-items: center;
  gap: 14px;
  background: rgba(255,255,255,0.03);
  border: 1px solid #1e293b;
  border-radius: 10px;
  padding: 12px 16px;
  flex-wrap: wrap;
}
.setup-ticker {
  font-size: 16px;
  font-weight: 800;
  color: #f1f5f9;
  min-width: 52px;
}
.setup-dir {
  font-size: 12px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 6px;
}
.setup-dir.long { background: rgba(34,197,94,0.15); color: #22c55e; }
.setup-dir.short { background: rgba(239,68,68,0.15); color: #ef4444; }
.setup-thesis { font-size: 13px; color: #94a3b8; flex: 1; }
.setup-level { font-size: 12px; color: #64748b; }

/* ============================================================
   KEY LEVELS
============================================================ */
.levels-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
@media (max-width: 480px) { .levels-grid { grid-template-columns: 1fr; } }
.level-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  margin-bottom: 8px;
}
.support-label { color: #22c55e; }
.resist-label { color: #ef4444; }
.level-list { display: flex; flex-direction: column; gap: 6px; }
.level-item {
  background: rgba(255,255,255,0.03);
  border: 1px solid #1e293b;
  border-radius: 7px;
  padding: 6px 12px;
  font-size: 14px;
  font-weight: 600;
  color: #e2e8f0;
}

/* ============================================================
   IDEAS TABLE
============================================================ */
.ideas-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: 10px;
  border: 1px solid #1e293b;
  background: rgba(15, 23, 42, 0.4);
}
.ideas-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  min-width: 560px;
}

@media (max-width: 640px) {
  .ideas-table-wrap {
    position: relative;
  }
  .ideas-table-wrap::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 24px;
    pointer-events: none;
    background: linear-gradient(to right, transparent, rgba(8, 17, 31, 0.9));
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
  }
  .ideas-table {
    font-size: 12px;
    min-width: 520px;
  }
  .ideas-table th,
  .ideas-table td {
    padding: 8px 10px;
  }
}
.ideas-table th {
  text-align: left;
  padding: 8px 12px;
  color: #64748b;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border-bottom: 1px solid #1e293b;
}
.ideas-table td {
  padding: 10px 12px;
  border-bottom: 1px solid #0f172a;
  color: #cbd5e1;
  vertical-align: middle;
}
.ideas-table tr:hover td { background: rgba(255,255,255,0.025); }
.dir-long { color: #22c55e; font-weight: 700; }
.dir-short { color: #ef4444; font-weight: 700; }
.conv-high { color: #22c55e; font-weight: 700; }
.conv-med { color: #f59e0b; font-weight: 700; }
.conv-low { color: #ef4444; font-weight: 700; }

.ideas-top-pick {
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(34,197,94,0.07);
  border: 1px solid rgba(34,197,94,0.2);
  border-radius: 10px;
  padding: 10px 16px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}
.top-pick-label {
  font-size: 11px;
  font-weight: 700;
  color: #22c55e;
  text-transform: uppercase;
}
.top-pick-ticker { font-size: 16px; font-weight: 800; color: #f1f5f9; }
.top-pick-reason { font-size: 13px; color: #94a3b8; }

/* ============================================================
   SENTIMENT GRID
============================================================ */
.sent-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 12px;
  margin-top: 12px;
}
/* ── Sentiment — Bias Confirmation Status badge ── */
.sent-confirmation-badge {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  padding: 3px 10px;
  border-radius: 20px;
  border: 1px solid;
  white-space: nowrap;
}
.sent-confirm-yes {
  color: #22c55e;
  background: rgba(34,197,94,0.1);
  border-color: rgba(34,197,94,0.3);
}
.sent-confirm-mix {
  color: #f59e0b;
  background: rgba(245,158,11,0.1);
  border-color: rgba(245,158,11,0.3);
}
.sent-confirm-div {
  color: #ef4444;
  background: rgba(239,68,68,0.1);
  border-color: rgba(239,68,68,0.3);
}

/* ── Sentiment — scope clarification note ── */
.sent-scope-note {
  font-size: 11px;
  color: #475569;
  font-style: italic;
  margin: 0 0 8px;
  padding: 6px 10px;
  background: rgba(148,163,184,0.07);
  border-radius: 6px;
}

/* ── Sentiment — Macro connection line ── */
.sent-macro-line {
  font-size: 13px;
  color: #64748b;
  font-style: italic;
  margin: 6px 0 4px;
  padding-left: 12px;
  border-left: 2px solid rgba(99,102,241,0.3);
  line-height: 1.5;
}

/* ── Sentiment — Divergence warning bar ── */
.sent-divergence-bar {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  background: rgba(245,158,11,0.06);
  border: 1px solid rgba(245,158,11,0.2);
  border-radius: 8px;
  padding: 8px 12px;
  margin: 6px 0 10px;
}
.sent-divergence-icon { font-size: 13px; line-height: 1.5; flex-shrink: 0; }
.sent-divergence-text {
  font-size: 12px;
  font-weight: 500;
  color: #fbbf24;
  line-height: 1.5;
}

/* ── Sentiment — Tone interpretation in ticker card ── */
.sent-tone-interp {
  font-size: 11px;
  color: #475569;
  font-weight: 500;
  margin: 4px 0 2px;
  letter-spacing: 0.1px;
}

.sent-card {
  background: rgba(255,255,255,0.03);
  border: 1px solid #1e293b;
  border-radius: 12px;
  padding: 14px;
}
.sent-ticker {
  font-size: 16px;
  font-weight: 800;
  color: #f1f5f9;
  margin-bottom: 6px;
}
.sent-score {
  font-size: 28px;
  font-weight: 900;
  margin-bottom: 4px;
}
.sent-score.bull { color: #22c55e; }
.sent-score.bear { color: #ef4444; }
.sent-score.neutral { color: #94a3b8; }
.sent-meta {
  display: flex;
  gap: 6px;
  align-items: center;
  margin-bottom: 6px;
  flex-wrap: wrap;
}
.sent-trend { font-size: 11px; font-weight: 700; color: #64748b; }
.sent-spike { font-size: 11px; background: rgba(245,158,11,0.15); color: #f59e0b; border-radius: 4px; padding: 1px 6px; }
.sent-impl { font-size: 12px; color: #64748b; line-height: 1.4; }
.sent-signal { font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 5px; display: inline-block; margin-top: 6px; }
.sent-signal.bull { background: rgba(34,197,94,0.15); color: #22c55e; }
.sent-signal.bear { background: rgba(239,68,68,0.15); color: #ef4444; }
.sent-signal.neutral { background: rgba(100,116,139,0.15); color: #94a3b8; }

/* ============================================================
   EARNINGS
============================================================ */
.earn-section-label {
  font-size: 11px;
  font-weight: 700;
  color: #475569;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 10px;
  display: block;
}
.earn-details { display: flex; flex-direction: column; gap: 10px; margin-top: 4px; }
.earn-row {
  display: flex;
  gap: 12px;
  padding: 8px 0;
  border-bottom: 1px solid #0f172a;
}
.earn-label {
  font-size: 12px;
  font-weight: 700;
  color: #64748b;
  min-width: 140px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

/* ============================================================
   RISK
============================================================ */
.risk-inputs { display: flex; flex-direction: column; gap: 12px; }
.risk-input-row { display: flex; flex-direction: column; gap: 4px; }
.risk-input-row label { font-size: 12px; font-weight: 600; color: #64748b; }
.risk-two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 16px;
}
@media (max-width: 640px) { .risk-two-col { grid-template-columns: 1fr; } }
.platform-list { margin: 0; padding: 0 0 0 18px; color: #94a3b8; font-size: 13px; line-height: 1.7; }
.green-list { color: #22c55e; }

.risk-score-badge {
  font-size: 13px;
  font-weight: 800;
  padding: 4px 14px;
  border-radius: 20px;
  text-transform: uppercase;
}
.risk-score-badge.low { background: rgba(34,197,94,0.15); color: #22c55e; }
.risk-score-badge.medium { background: rgba(245,158,11,0.15); color: #f59e0b; }
.risk-score-badge.high { background: rgba(239,68,68,0.15); color: #ef4444; }
.risk-score-badge.critical { background: rgba(239,68,68,0.3); color: #fca5a5; }

/* ============================================================
   MACRO
============================================================ */
/* ── Factor Rotation — two-level hierarchy ── */
.factor-rotation-title {
  font-size: 16px;
  font-weight: 800;
  color: #f1f5f9;
  letter-spacing: -0.2px;
  line-height: 1.3;
  margin-top: 4px;
}
.factor-rotation-sub {
  font-size: 11px;
  font-weight: 400;
  color: #64748b;
  margin-top: 4px;
  line-height: 1.4;
}

/* ── Top Pick primary focus label ── */
.macro-primary-focus {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.7px;
  color: #475569;
  margin: 2px 0 6px;
}

/* ── Macro scope note (Top Pick subtitle) ── */
.macro-scope-note {
  font-size: 10px;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  color: #64748b;
}

/* ── Macro narrative — dominant posture headline ── */
.macro-narrative {
  margin: 4px 0 12px;
  padding: 12px 18px;
  font-size: 14px;
  font-weight: 600;
  color: #e2e8f0;
  line-height: 1.55;
  background: rgba(16,185,129,0.06);
  border: 1px solid rgba(16,185,129,0.18);
  border-left: 3px solid #10b981;
  border-radius: 10px;
}

/* ── Macro section sub-label ── */
.macro-section-sub {
  font-size: 11px;
  color: #475569;
  font-weight: 400;
  margin-left: 4px;
}

/* ── Macro top-pick alignment note ── */
.macro-alignment-note {
  margin: 4px 0 10px;
  padding: 9px 14px;
  font-size: 13px;
  color: #94a3b8;
  line-height: 1.5;
  background: rgba(255,255,255,0.02);
  border-left: 3px solid rgba(16,185,129,0.35);
  border-radius: 0 6px 6px 0;
}

/* ── Macro invalidation bar ── */
.macro-invalidation-bar {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  background: rgba(239,68,68,0.05);
  border: 1px solid rgba(239,68,68,0.18);
  border-radius: 8px;
  padding: 9px 14px;
  margin-top: 12px;
}
.macro-invalidation-icon {
  font-size: 13px;
  line-height: 1.5;
  flex-shrink: 0;
}
.macro-invalidation-text {
  font-size: 13px;
  font-weight: 500;
  color: #fca5a5;
  line-height: 1.5;
}

/* ── Fed stance badge colours ── */
.fed-hawkish  { color: #ef4444; }
.fed-neutral  { color: #f59e0b; }
.fed-dovish   { color: #22c55e; }

.macro-two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 16px;
}
@media (max-width: 640px) { .macro-two-col { grid-template-columns: 1fr; } }
.sector-item {
  background: rgba(255,255,255,0.03);
  border: 1px solid #1e293b;
  border-radius: 9px;
  padding: 10px 14px;
  margin-bottom: 8px;
}
.sector-name { font-size: 14px; font-weight: 700; color: #f1f5f9; }
.sector-etf { font-size: 11px; color: #3b82f6; font-weight: 700; margin: 2px 0; }
.sector-reason { font-size: 12px; color: #94a3b8; }
.winning h3 { color: #22c55e; }
.losing h3 { color: #ef4444; }

.stock-idea {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid #0f172a;
}
.stock-idea:last-child { border: none; }
.stock-idea-ticker { font-size: 15px; font-weight: 800; color: #f1f5f9; min-width: 52px; }
.stock-idea-thesis { font-size: 12px; color: #94a3b8; flex: 1; }

/* ============================================================
   STRATEGY BUILDER
============================================================ */

/* ── Recommended Strategy card — premium redesign ── */
.rec-strat-card {
  background: linear-gradient(145deg, #0d1117 0%, #0f172a 60%, #110c2e 100%);
  border: 1px solid #1e293b;
  border-top: 3px solid #6366f1;
  box-shadow: 0 0 40px rgba(99,102,241,0.08), 0 4px 24px rgba(0,0,0,0.4);
  position: relative;
  overflow: hidden;
}
.rec-strat-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(99,102,241,0.6), transparent);
  pointer-events: none;
}

/* Header row */
.rec-strat-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}
.rec-strat-title-group { display: flex; flex-direction: column; gap: 3px; }
.rec-strat-eyebrow {
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  color: #6366f1;
}
.rec-strat-title {
  margin: 0;
  font-size: 11px;
  font-weight: 700;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.6px;
}
.rec-strat-subtitle {
  margin: 0;
  font-size: 11px;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.6px;
}
/* The strategy name badge — hero element */
.rec-strat-badge {
  background: linear-gradient(135deg, #4338ca, #6366f1);
  color: #fff;
  font-size: 13px;
  font-weight: 800;
  padding: 6px 16px;
  border-radius: 6px;
  white-space: nowrap;
  flex-shrink: 0;
  letter-spacing: 0.3px;
  box-shadow: 0 0 16px rgba(99,102,241,0.35);
}

/* Context line — callout style */
.rec-strat-ctx {
  font-size: 13px;
  color: #c7d2fe;
  font-style: italic;
  margin: 0 0 18px;
  padding: 10px 14px;
  background: rgba(99,102,241,0.08);
  border-left: 3px solid #6366f1;
  border-radius: 0 6px 6px 0;
  line-height: 1.5;
}

/* Meta chips row */
.rec-strat-meta {
  display: flex;
  gap: 8px;
  margin-bottom: 18px;
  flex-wrap: wrap;
}
.rec-meta-item {
  display: flex;
  flex-direction: column;
  gap: 3px;
  background: rgba(255,255,255,0.03);
  border: 1px solid #1e293b;
  border-radius: 8px;
  padding: 8px 14px;
  min-width: 80px;
}
.rec-meta-label {
  font-size: 9px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.9px;
  color: #475569;
}
.rec-meta-val {
  font-size: 13px;
  font-weight: 700;
  color: #e2e8f0;
}

/* Why line */
.rec-strat-why {
  font-size: 13px;
  color: #94a3b8;
  margin: 0 0 18px;
  line-height: 1.6;
}

/* Entry / Exit blocks */
.rec-strat-logic {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 16px;
}
@media (max-width: 600px) { .rec-strat-logic { grid-template-columns: 1fr; } }
.rec-logic-block {
  background: rgba(0,0,0,0.35);
  border: 1px solid #1e293b;
  border-radius: 8px;
  padding: 12px 16px;
  position: relative;
}
.rec-logic-block.entry-block { border-top: 2px solid #22c55e; }
.rec-logic-block.exit-block  { border-top: 2px solid #f59e0b; }

.rec-logic-label {
  font-size: 9px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 6px;
  display: block;
}
.entry-block .rec-logic-label { color: #22c55e; }
.exit-block  .rec-logic-label { color: #f59e0b; }
.rec-logic-text {
  font-size: 12px;
  color: #cbd5e1;
  line-height: 1.55;
}

/* Works / Fails */
.rec-strat-conditions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
@media (max-width: 560px) { .rec-strat-conditions { grid-template-columns: 1fr; } }
.rec-cond-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
  border-radius: 8px;
  padding: 10px 12px;
}
.rec-cond-works {
  background: rgba(34,197,94,0.06);
  border: 1px solid rgba(34,197,94,0.2);
}
.rec-cond-fails {
  background: rgba(239,68,68,0.06);
  border: 1px solid rgba(239,68,68,0.18);
}
.rec-cond-label {
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.8px;
}
.rec-cond-works .rec-cond-label { color: #22c55e; }
.rec-cond-fails .rec-cond-label { color: #f87171; }
.rec-cond-text {
  font-size: 12px;
  color: #94a3b8;
  line-height: 1.45;
}

/* ── Builder section header ── */
.strat-builder-header { margin-bottom: 14px; }
.strat-builder-header h3 {
  margin: 0 0 4px;
  font-size: 14px;
  font-weight: 800;
  color: #e2e8f0;
  display: flex;
  align-items: center;
  gap: 0;
}
.strat-builder-tag {
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: #475569;
  background: #1e293b;
  border: 1px solid #334155;
  padding: 2px 8px;
  border-radius: 4px;
  margin-left: 8px;
  vertical-align: middle;
}
.strat-builder-sub {
  margin: 0;
  font-size: 12px;
  color: #475569;
}

/* ── Quick templates row ── */
.strat-templates {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 14px;
  padding-bottom: 14px;
  border-bottom: 1px solid #1e293b;
}
.strat-templates-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.7px;
  color: #475569;
  white-space: nowrap;
  margin-right: 2px;
}
.strat-template-chip {
  background: transparent;
  border: 1px solid #334155;
  color: #64748b;
  font-size: 11px;
  font-weight: 600;
  padding: 5px 13px;
  border-radius: 5px;
  cursor: pointer;
  transition: all 0.15s;
  white-space: nowrap;
  letter-spacing: 0.2px;
}
.strat-template-chip:hover {
  background: #1e293b;
  color: #e2e8f0;
  border-color: #475569;
}
.strat-template-chip.active {
  background: rgba(99,102,241,0.15);
  color: #a5b4fc;
  border-color: #6366f1;
  font-weight: 700;
}

/* ── Context tip line ── */
.strat-context-tip {
  font-size: 11px;
  color: #818cf8;
  font-style: italic;
  margin-bottom: 8px;
  padding: 7px 12px;
  background: rgba(99,102,241,0.06);
  border-radius: 5px;
  border-left: 2px solid #4338ca;
  letter-spacing: 0.1px;
}

/* ── Best conditions / avoid when rows ── */
.strat-condition-row {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  padding: 8px 12px;
  border-radius: 6px;
  margin-bottom: 6px;
  background: rgba(255,255,255,0.02);
  border: 1px solid #1e293b;
}
.strat-cond-icon { font-size: 12px; font-weight: 900; flex-shrink: 0; }
.strat-cond-green { color: #22c55e; }
.strat-cond-red   { color: #f87171; }
.strat-cond-key   { font-weight: 700; color: #64748b; white-space: nowrap; font-size: 11px; text-transform: uppercase; letter-spacing: 0.5px; }
.strat-cond-val   { color: #cbd5e1; flex: 1; }

/* ── Existing ── */
.strat-inputs { display: flex; flex-direction: column; gap: 12px; }
.strat-row { display: grid; grid-template-columns: 1fr 2fr 1fr; gap: 12px; }
@media (max-width: 640px) { .strat-row { grid-template-columns: 1fr; } }

.pine-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}
.pine-header h4 { margin: 0; color: #94a3b8; font-size: 13px; font-weight: 700; }
.pine-block {
  background: #0d1117;
  border: 1px solid #21262d;
  border-radius: 10px;
  padding: 16px;
  font-size: 12px;
  color: #79c0ff;
  white-space: pre-wrap;
  overflow-x: auto;
  line-height: 1.55;
  font-family: "JetBrains Mono", "Fira Code", "Cascadia Code", monospace;
}

/* ── Pine Fix Panel ──────────────────────────────────── */
.pine-fix-panel {
  margin-top: 10px;
  background: #0a1628;
  border: 1px solid #1e3a5f;
  border-radius: 10px;
  padding: 14px 16px;
}
.pine-fix-header {
  font-size: 12px;
  color: #60a5fa;
  margin-bottom: 10px;
  font-weight: 500;
}
.pine-error-input {
  width: 100%;
  background: #0d1117;
  border: 1px solid #21262d;
  color: #e2e8f0;
  border-radius: 7px;
  padding: 9px 12px;
  font-size: 12px;
  font-family: "JetBrains Mono", monospace;
  resize: vertical;
  box-sizing: border-box;
}
.pine-error-input:focus { outline: 1px solid #3b82f6; border-color: #3b82f6; }
.pine-fix-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 10px;
}
.pine-fix-btn {
  background: linear-gradient(135deg, #1d4ed8, #4f46e5);
  color: #fff;
  border: none;
  border-radius: 7px;
  padding: 7px 18px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: opacity .15s;
}
.pine-fix-btn:hover   { opacity: .85; }
.pine-fix-btn:active  { transform: scale(0.96); opacity: .75; }
.pine-fix-btn:disabled { opacity: .5; cursor: not-allowed; }
.pine-fix-status { font-size: 12px; }
.pine-fix-toggle-btn {
  background: #1a2533;
  border-color: #2a4a6b;
  color: #60a5fa;
}
.pine-fix-toggle-btn:hover  { background: #223347; color: #93c5fd; }
.pine-fix-toggle-btn:active { background: #0f1e2e; color: #fff; transform: scale(0.96); }

/* =========================
   STRATEGY — METRICS & NOTES
========================= */
.strat-metrics-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.strat-metric-chip {
  background: rgba(59,130,246,0.12);
  border: 1px solid rgba(59,130,246,0.3);
  border-radius: 20px;
  padding: 4px 12px;
  font-size: 12px;
  color: #93c5fd;
  font-weight: 600;
}
.strat-opt-notes {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.strat-opt-note-item {
  background: rgba(15,23,42,0.6);
  border-left: 3px solid #f59e0b;
  border-radius: 0 6px 6px 0;
  padding: 7px 12px;
  font-size: 13px;
  color: #cbd5e1;
  line-height: 1.45;
}
.strat-opt-section-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: #64748b;
  text-transform: uppercase;
  margin-bottom: 4px;
}

/* ============================================================
   PLATFORM SUMMARY
============================================================ */
.platform-summary {
  font-size: 14px;
  color: #94a3b8;
  margin: 0 0 16px 0;
  line-height: 1.55;
}


/* ============================================================
   DASHBOARD — MASTER BRIEF ADDITIONS
============================================================ */

/* ══════════════════════════════════════════════════════════════════════
   OPENING RANGE BANNER
   Shown 9:30–10:00 AM ET. Two phases:
     9:30–9:45 → orange (HIGH caution, opening range active)
     9:45–10:00 → yellow (MILD caution, early session)
   ══════════════════════════════════════════════════════════════════════ */
.opening-range-banner {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px 16px;
  border-radius: 0;                          /* flush — sits between nav and content */
  margin: 0;
  border-top: none;
  border-bottom: 2px solid #c2410c;
  border-left: none;
  border-right: none;
  background: linear-gradient(90deg, rgba(194,65,12,0.18), rgba(15,23,42,0.85));
  animation: orb-pulse 2.5s ease-in-out infinite;
}
.opening-range-banner.phase-early {
  border-bottom-color: #b45309;
  background: linear-gradient(90deg, rgba(180,83,9,0.13), rgba(15,23,42,0.85));
  animation: none;
}
@keyframes orb-pulse {
  0%, 100% { background: linear-gradient(90deg, rgba(194,65,12,0.18), rgba(15,23,42,0.85)); }
  50%       { background: linear-gradient(90deg, rgba(194,65,12,0.28), rgba(15,23,42,0.85)); }
}
.orb-top-row {
  display: flex;
  align-items: center;
  gap: 10px;
}
.orb-icon {
  font-size: 18px;
  line-height: 1;
  flex-shrink: 0;
}
.orb-body {
  flex: 1;
  min-width: 0;
}
.orb-title {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1px;
  color: #fb923c;
  margin-bottom: 2px;
}
.phase-early .orb-title { color: #fbbf24; }
.orb-msg {
  font-size: 12px;
  color: #cbd5e1;
  line-height: 1.45;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.orb-countdown {
  font-size: 12px;
  font-weight: 700;
  color: #fb923c;
  white-space: nowrap;
  flex-shrink: 0;
}
.phase-early .orb-countdown { color: #fbbf24; }
.orb-rule {
  font-size: 11px;
  color: #64748b;
  line-height: 1.4;
  padding-left: 28px;     /* align with body text */
}
.orb-rule-label {
  font-weight: 700;
  letter-spacing: 0.6px;
  color: #475569;
  margin-right: 6px;
}
@media (max-width: 640px) {
  .orb-msg { white-space: normal; }
  .orb-countdown { display: none; }
}

/* ── TODAY'S STANCE card — single action directive above detail cards ── */
.dash-stance-card {
  background: #0d1525;
  border: 2px solid #1e3a5f;
  border-radius: 12px;
  padding: 16px 20px;
  margin-bottom: 12px;
  transition: border-color 0.3s;
}
.dash-stance-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: #475569;
  text-transform: uppercase;
  margin-bottom: 6px;
}
.dash-stance-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.dash-stance-main {
  font-size: 26px;
  font-weight: 800;
  letter-spacing: 0.02em;
  color: #f1f5f9;
  line-height: 1.1;
}
.dash-stance-badge {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 4px;
  padding: 2px 7px;
  color: #94a3b8;
}
.dash-stance-sub {
  margin-top: 6px;
  font-size: 13px;
  color: #94a3b8;
  line-height: 1.45;
}

/* Signal chips row — bias · regime · risk inline inside the stance card */
.dash-stance-chips {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}
.dash-sig-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 5px;
  padding: 3px 9px;
  font-size: 11.5px;
}
.dash-sig-key {
  color: #475569;
  font-weight: 600;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.dash-sig-val {
  color: #cbd5e1;
  font-weight: 600;
}
.dash-sig-sep {
  color: #334155;
  font-size: 14px;
  padding: 0 2px;
}

/* WHY and ACTION lines */
.dash-stance-why {
  margin-top: 12px;
  font-size: 12.5px;
  color: #64748b;
  line-height: 1.5;
  font-style: italic;
}
.dash-stance-why::before { content: ""; }
.dash-stance-action {
  margin-top: 8px;
  font-size: 13.5px;
  color: #e2e8f0;
  font-weight: 600;
  line-height: 1.5;
  padding: 8px 12px;
  background: rgba(255,255,255,0.04);
  border-radius: 6px;
  border-left: 3px solid currentColor;
}

/* Summary card */
/* ── Directional Bias card ── */
.dash-bias-card {
  transition: border-color 0.3s;
}
.dash-bias-value {
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -0.3px;
  margin: 6px 0 6px;
  line-height: 1.1;
}
.dash-bias-row2 {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 4px;
}
.dash-conf-badge {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 2px 7px;
  border-radius: 20px;
}
.dash-conf-badge.conf-high   { background: rgba(34,197,94,0.15);  color: #22c55e; border: 1px solid rgba(34,197,94,0.3); }
.dash-conf-badge.conf-medium { background: rgba(245,158,11,0.12); color: #f59e0b; border: 1px solid rgba(245,158,11,0.25); }
.dash-conf-badge.conf-low    { background: rgba(100,116,139,0.12);color: #94a3b8; border: 1px solid rgba(100,116,139,0.2); }
.dash-cond-text {
  font-size: 11px;
  color: #64748b;
  font-weight: 500;
}

/* Bias card colour variants */
.dash-bias-card.bias-bullish       { border-color: rgba(34,197,94,0.5); }
.dash-bias-card.bias-bullish       .dash-bias-value { color: #22c55e; }
.dash-bias-card.bias-bullish-lean  { border-color: rgba(34,197,94,0.3); }
.dash-bias-card.bias-bullish-lean  .dash-bias-value { color: #4ade80; }
.dash-bias-card.bias-bearish       { border-color: rgba(239,68,68,0.5); }
.dash-bias-card.bias-bearish       .dash-bias-value { color: #ef4444; }
.dash-bias-card.bias-bearish-lean  { border-color: rgba(239,68,68,0.3); }
.dash-bias-card.bias-bearish-lean  .dash-bias-value { color: #f87171; }
.dash-bias-card.bias-range         { border-color: rgba(148,163,184,0.3); }
.dash-bias-card.bias-range         .dash-bias-value { color: #94a3b8; }
.dash-bias-card.bias-neutral       { border-color: rgba(245,158,11,0.3); }
.dash-bias-card.bias-neutral       .dash-bias-value { color: #f59e0b; }

/* ── Risk Mode card colour variants ── */
.dash-risk-card.risk-full        { border-color: rgba(34,197,94,0.45); }
.dash-risk-card.risk-full        .stat-value { color: #22c55e; }
.dash-risk-card.risk-controlled  { border-color: rgba(245,158,11,0.35); }
.dash-risk-card.risk-controlled  .stat-value { color: #f59e0b; }
.dash-risk-card.risk-reduced     { border-color: rgba(245,158,11,0.25); }
.dash-risk-card.risk-reduced     .stat-value { color: #fbbf24; }
.dash-risk-card.risk-defensive   { border-color: rgba(239,68,68,0.45); }
.dash-risk-card.risk-defensive   .stat-value { color: #ef4444; }

/* ── Trader Guidance bar ── */
.dash-guidance-bar {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  background: rgba(245,158,11,0.07);
  border: 1px solid rgba(245,158,11,0.25);
  border-radius: 10px;
  padding: 11px 16px;
  margin: 2px 0;
}
.dash-guidance-icon {
  font-size: 15px;
  line-height: 1.4;
  flex-shrink: 0;
}
.dash-guidance-text {
  font-size: 14px;
  font-weight: 600;
  color: #fbbf24;
  line-height: 1.5;
}

/* ── Narrative headline — combined bias + regime + risk posture ── */
.dash-narrative {
  margin: 4px 0 2px;
  padding: 12px 18px;
  font-size: 14px;
  font-weight: 600;
  color: #e2e8f0;
  line-height: 1.55;
  background: rgba(99,102,241,0.06);
  border: 1px solid rgba(99,102,241,0.18);
  border-left: 3px solid #6366f1;
  border-radius: 10px;
}

/* ── Avoid Condition bar — when NOT to trade ── */
.dash-avoid-bar {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  background: rgba(239,68,68,0.05);
  border: 1px solid rgba(239,68,68,0.18);
  border-radius: 10px;
  padding: 10px 16px;
  margin: 2px 0;
}
.dash-avoid-icon {
  font-size: 14px;
  line-height: 1.4;
  flex-shrink: 0;
}
.dash-avoid-text {
  font-size: 13px;
  font-weight: 500;
  color: #fca5a5;
  line-height: 1.5;
}

/* ── Best Trade sub-label ── */
.best-trade-sub {
  font-size: 12px;
  font-weight: 400;
  color: #64748b;
  margin-left: 4px;
}

/* ── Best Trade alignment note ── */
.bt-alignment-note {
  margin: 4px 0 10px;
  padding: 9px 14px;
  font-size: 13px;
  color: #94a3b8;
  line-height: 1.5;
  background: rgba(255,255,255,0.02);
  border-left: 3px solid rgba(99,102,241,0.35);
  border-radius: 0 6px 6px 0;
}

/* ── Alternative Setups sub-label ── */
.alt-setups-sub {
  font-size: 11px;
  color: #475569;
  font-weight: 400;
  margin-left: 4px;
}

/* ── Market Context card ── */
.dash-context-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.7px;
  color: #475569;
  margin-bottom: 8px;
}

/* ── Tab staleness badge ── */
.tab-stale-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 600;
  color: #475569;
  background: rgba(71,85,105,0.1);
  border: 1px solid rgba(71,85,105,0.2);
  border-radius: 20px;
  padding: 3px 9px;
  white-space: nowrap;
  cursor: default;
  transition: color 0.3s, border-color 0.3s, background 0.3s;
  user-select: none;
  flex-shrink: 0;
}
.tab-stale-badge .stale-dot {
  font-size: 7px;
  color: #22c55e;
  line-height: 1;
}
.tab-stale-badge.stale {
  color: #f59e0b;
  background: rgba(245,158,11,0.1);
  border-color: rgba(245,158,11,0.3);
  cursor: pointer;
}
.tab-stale-badge.stale:hover {
  background: rgba(245,158,11,0.18);
}
.tab-stale-badge .stale-icon {
  font-size: 12px;
  line-height: 1;
}

/* Mobile: hide label text, keep badge compact */
@media (max-width: 640px) {
  .tab-stale-badge {
    font-size: 10px;
    padding: 2px 7px;
  }
}

/* ── Dashboard auto-refresh pill ── */
.dash-auto-refresh-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 500;
  color: #93c5fd;
  background: rgba(59,130,246,0.10);
  border: 1px solid rgba(59,130,246,0.25);
  border-radius: 20px;
  padding: 3px 10px;
  white-space: nowrap;
  user-select: none;
  flex-shrink: 0;
  letter-spacing: 0.01em;
  min-width: 8ch;   /* prevent layout jump as countdown digits change */
  font-variant-numeric: tabular-nums;
}

/* ── No-trade state ── */
.dash-no-trade {
  font-size: 14px;
  color: #64748b;
  font-style: italic;
  padding: 12px 4px;
  border-left: 3px solid rgba(100,116,139,0.3);
  padding-left: 14px;
  margin: 4px 0 8px;
}

.dash-summary-card {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding: 16px 20px;
}
.dash-summary-text {
  margin: 0;
  font-size: 14px;
  color: #cbd5e1;
  line-height: 1.6;
  flex: 1;
  min-width: 200px;
}
.dash-updated {
  font-size: 11px;
  color: #475569;
  white-space: nowrap;
  flex-shrink: 0;
}

.dash-meta-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 6px;
  flex-wrap: wrap;
}

.dash-price-source {
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 20px;
  white-space: nowrap;
  cursor: default;
}

.dash-price-source.source-live {
  color: #10b981;
  background: rgba(16, 185, 129, 0.12);
  border: 1px solid rgba(16, 185, 129, 0.3);
}

.dash-price-source.source-fallback {
  color: #94a3b8;
  background: rgba(148, 163, 184, 0.1);
  border: 1px solid rgba(148, 163, 184, 0.2);
}

.dash-price-source.source-close {
  color: #f59e0b;
  background: rgba(245, 158, 11, 0.1);
  border: 1px solid rgba(245, 158, 11, 0.25);
}

/* Best trade reason row */
.bt-reason-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 10px;
  padding: 10px 14px;
  background: rgba(255,255,255,0.02);
  border: 1px solid #1e293b;
  border-radius: 8px;
}
.bt-reason-label {
  font-size: 10px;
  font-weight: 800;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  white-space: nowrap;
  padding-top: 1px;
}
.bt-reason-text {
  font-size: 13px;
  color: #94a3b8;
  line-height: 1.5;
}

/* Key levels — flat list layout */
.key-levels-flat {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 8px;
}
.kl-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(255,255,255,0.03);
  border: 1px solid #1e293b;
  border-radius: 8px;
  padding: 9px 14px;
  gap: 10px;
}
.kl-label {
  font-size: 11px;
  font-weight: 700;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  white-space: nowrap;
}
.kl-value {
  font-size: 14px;
  font-weight: 700;
  color: #e2e8f0;
  text-align: right;
}
/* Colour-code by label keyword */
.kl-item.support .kl-value  { color: #22c55e; }
.kl-item.resist  .kl-value  { color: #ef4444; }
.kl-item.bias    .kl-value  { color: #f59e0b; }

/* Rich setup cards */
.setup-card-rich {
  background: rgba(255,255,255,0.03);
  border: 1px solid #1e293b;
  border-radius: 12px;
  padding: 14px 16px;
  margin-bottom: 8px;
}
.setup-card-rich:last-child { margin-bottom: 0; }

.setup-rich-top {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}
.setup-rich-tf {
  font-size: 11px;
  font-weight: 700;
  color: #475569;
  background: rgba(255,255,255,0.05);
  border-radius: 5px;
  padding: 2px 7px;
}
.setup-rich-thesis {
  font-size: 12px;
  color: #64748b;
  line-height: 1.45;
  margin-bottom: 8px;
}
.setup-rich-levels {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.setup-rich-cell {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  background: rgba(255,255,255,0.025);
  border: 1px solid #1e293b;
  border-radius: 6px;
  padding: 5px 10px;
  min-width: 70px;
}
.setup-rich-cell .slabel {
  font-size: 9px;
  font-weight: 700;
  color: #475569;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.setup-rich-cell .sval {
  font-size: 13px;
  font-weight: 700;
  color: #e2e8f0;
}
.setup-rich-cell.rr .sval { color: #3b82f6; }

/* ── Conviction stars & relative-strength badge ─────────────────────────── */
.setup-conviction {
  font-size: 12px; font-weight: 700; letter-spacing: 1px;
  padding: 2px 6px; border-radius: 4px;
}
.setup-conviction.conv-high { color: #4ade80; background: rgba(34,197,94,0.12); }
.setup-conviction.conv-mid  { color: #fbbf24; background: rgba(251,191,36,0.12); }
.setup-conviction.conv-low  { color: #94a3b8; background: rgba(148,163,184,0.08); }
.setup-relstr {
  font-size: 11px; font-weight: 600; color: #64748b;
  margin-left: auto;  /* push to right end of the top row */
}

/* ── Action row (Pin + Run Full Analysis) ───────────────────────────────── */
.setup-action-row {
  display: flex; align-items: center; gap: 8px;
  margin-top: 10px; flex-wrap: wrap;
}
.run-analysis-btn {
  background: rgba(139,92,246,0.12);
  border: 1px solid rgba(139,92,246,0.3);
  color: #a78bfa;
  font-size: 12px; font-weight: 600;
  border-radius: 6px; padding: 6px 14px;
  cursor: pointer; transition: background 0.15s, border-color 0.15s;
}
.run-analysis-btn:hover {
  background: rgba(139,92,246,0.22);
  border-color: rgba(139,92,246,0.55);
}

/* ── Smart Analysis ticker daily-limit upgrade gate ─────────────────────── */
.smart-limit-gate {
  display: flex; flex-direction: column; align-items: center;
  gap: 10px; padding: 28px 24px; text-align: center;
  background: rgba(15,23,42,0.6);
  border: 1px solid rgba(139,92,246,0.25);
  border-radius: 12px;
}
.smart-limit-icon  { font-size: 28px; line-height: 1; }
.smart-limit-title { font-size: 15px; font-weight: 700; color: #e2e8f0; }
.smart-limit-body  { font-size: 13px; color: #94a3b8; max-width: 380px; line-height: 1.5; }
.smart-limit-body strong { color: #cbd5e1; }
.smart-limit-actions { display: flex; flex-direction: column; align-items: center; gap: 6px; margin-top: 4px; }
.smart-upgrade-btn {
  display: inline-block;
  background: linear-gradient(135deg, rgba(139,92,246,0.25), rgba(99,102,241,0.25));
  border: 1px solid rgba(139,92,246,0.5);
  color: #c4b5fd; font-size: 13px; font-weight: 700;
  border-radius: 8px; padding: 10px 22px;
  text-decoration: none; transition: background 0.15s, border-color 0.15s;
}
.smart-upgrade-btn:hover {
  background: linear-gradient(135deg, rgba(139,92,246,0.4), rgba(99,102,241,0.4));
  border-color: rgba(139,92,246,0.8); color: #ddd6fe;
}
.smart-limit-reset { font-size: 11px; color: #475569; }

/* ============================================================
   TRADE IDEAS — FULL CARD SYSTEM
============================================================ */

/* Context card */
.ideas-context-card { margin-bottom: 16px; }

/* Shared card wrapper — top pick and idea cards */
.ideas-full-card {
  background: rgba(255,255,255,0.03);
  border: 1px solid #1e293b;
  border-radius: 14px;
  padding: 18px 20px;
  margin-bottom: 12px;
}
.ideas-full-card:last-child { margin-bottom: 0; }

/* Top pick gets elevated treatment */
.ideas-top-pick-full {
  border-color: rgba(34, 197, 94, 0.3);
  background: rgba(34, 197, 94, 0.04);
}

/* ── Card header row ── */
.ideas-card-head {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}
.ideas-top-pick-badge {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.6px;
  color: #22c55e;
  background: rgba(34,197,94,0.12);
  border: 1px solid rgba(34,197,94,0.3);
  border-radius: 5px;
  padding: 2px 8px;
  white-space: nowrap;
  text-transform: uppercase;
}
.ideas-card-ticker {
  font-size: 18px;
  font-weight: 900;
  color: #f1f5f9;
  letter-spacing: -0.3px;
}
.ideas-card-dir {
  font-size: 12px;
  font-weight: 800;
  padding: 3px 9px;
  border-radius: 6px;
}
.ideas-card-dir.long { background: rgba(34,197,94,0.15);  color: #22c55e; }
.ideas-card-dir.short { background: rgba(239,68,68,0.15); color: #ef4444; }
.ideas-card-tf {
  font-size: 11px;
  font-weight: 700;
  color: #64748b;
  background: rgba(255,255,255,0.05);
  border-radius: 5px;
  padding: 2px 8px;
}
/* Conviction pill */
.ideas-card-conv {
  font-size: 11px;
  font-weight: 700;
  padding: 2px 9px;
  border-radius: 20px;
  margin-left: auto;
}
.ideas-card-conv.high   { background: rgba(34,197,94,0.12);  color: #22c55e; border: 1px solid rgba(34,197,94,0.25); }
.ideas-card-conv.medium { background: rgba(245,158,11,0.12); color: #f59e0b; border: 1px solid rgba(245,158,11,0.25); }
.ideas-card-conv.low    { background: rgba(239,68,68,0.12);  color: #ef4444; border: 1px solid rgba(239,68,68,0.25); }

/* Priority badge (idea cards only) */
.ideas-priority-badge {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: 5px;
  white-space: nowrap;
}
.ideas-priority-badge.high   { background: rgba(34,197,94,0.15);  color: #22c55e; border: 1px solid rgba(34,197,94,0.3); }
.ideas-priority-badge.medium { background: rgba(245,158,11,0.12); color: #f59e0b; border: 1px solid rgba(245,158,11,0.3); }
.ideas-priority-badge.low    { background: rgba(100,116,139,0.12); color: #64748b; border: 1px solid rgba(100,116,139,0.3); }

/* ── Setup type row ── */
.ideas-card-setup-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}
.ideas-setup-label {
  font-size: 10px;
  font-weight: 700;
  color: #475569;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  min-width: 38px;
}
.ideas-setup-val {
  font-size: 13px;
  font-weight: 600;
  color: #94a3b8;
}

/* ── Trigger row (idea cards only) ── */
.ideas-trigger-row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-bottom: 10px;
  padding: 8px 12px;
  background: rgba(59,130,246,0.06);
  border: 1px solid rgba(59,130,246,0.15);
  border-radius: 8px;
}
.ideas-trigger-label {
  font-size: 10px;
  font-weight: 800;
  color: #3b82f6;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  white-space: nowrap;
  padding-top: 1px;
  min-width: 42px;
}
.ideas-trigger-val {
  font-size: 13px;
  color: #93c5fd;
  line-height: 1.45;
}

/* ── Meta rows (sentiment, sector) ── */
.ideas-meta-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 6px 0;
  border-bottom: 1px solid #0f172a;
}
.ideas-meta-row:last-of-type { border-bottom: none; }
.ideas-meta-label {
  font-size: 10px;
  font-weight: 700;
  color: #475569;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  white-space: nowrap;
  min-width: 72px;
  padding-top: 1px;
}
.ideas-meta-val {
  font-size: 13px;
  color: #94a3b8;
  line-height: 1.45;
}

/* ── TA alignment notice ── */
.ideas-ta-notice {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  background: rgba(245, 158, 11, 0.08);
  border: 1px solid rgba(245, 158, 11, 0.25);
  border-radius: 8px;
  padding: 10px 14px;
  font-size: 13px;
  color: #f59e0b;
  margin-bottom: 14px;
  line-height: 1.5;
}
.ideas-ta-notice strong { color: #fbbf24; }
.ideas-ta-notice em { font-style: normal; color: #fbbf24; }

/* ── Data quality banner (trade ideas) ── */
.ideas-data-quality {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  background: rgba(239, 68, 68, 0.08);
  border: 1px solid rgba(239, 68, 68, 0.25);
  border-radius: 8px;
  padding: 10px 14px;
  margin-bottom: 14px;
  line-height: 1.45;
}
.ideas-data-quality .idq-icon {
  font-size: 16px;
  line-height: 1.2;
  flex-shrink: 0;
}
.ideas-data-quality .idq-title {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: #fca5a5;
  margin-bottom: 4px;
}
.ideas-data-quality .idq-list {
  margin: 0;
  padding-left: 16px;
  color: #fecaca;
  font-size: 13px;
}
.ideas-data-quality .idq-list li {
  margin: 2px 0;
}

/* ── Reason row (top pick only) ── */
.ideas-reason-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 10px;
  padding: 10px 14px;
  background: rgba(34,197,94,0.05);
  border: 1px solid rgba(34,197,94,0.15);
  border-radius: 8px;
}
.ideas-reason-label {
  font-size: 10px;
  font-weight: 800;
  color: #22c55e;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  white-space: nowrap;
  padding-top: 1px;
  min-width: 28px;
}
.ideas-reason-val {
  font-size: 13px;
  color: #86efac;
  line-height: 1.5;
}

/* ── Invalidation row ── */
.ideas-inval-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 8px;
  padding: 8px 12px;
  background: rgba(239,68,68,0.04);
  border: 1px solid rgba(239,68,68,0.12);
  border-radius: 8px;
}
.ideas-inval-label {
  font-size: 10px;
  font-weight: 800;
  color: #ef4444;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  white-space: nowrap;
  padding-top: 1px;
  min-width: 72px;
}
.ideas-inval-val {
  font-size: 13px;
  color: #fca5a5;
  line-height: 1.45;
}

/* ── Price action narrative ── */
.ideas-price-action {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 8px 12px;
  margin-top: 8px;
  background: rgba(59,130,246,0.04);
  border: 1px solid rgba(59,130,246,0.12);
  border-radius: 8px;
}
.ideas-pa-label {
  font-size: 10px;
  font-weight: 800;
  color: #60a5fa;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  white-space: nowrap;
  padding-top: 1px;
  min-width: 90px;
}
.ideas-pa-text {
  font-size: 13px;
  color: #cbd5e1;
  line-height: 1.45;
}

/* ── Key levels (support / pivot / resistance) ── */
.ideas-key-levels {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 8px;
}
.ideas-kl-cell {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  flex: 1 1 30%;
  min-width: 80px;
  padding: 8px 10px;
  background: rgba(255,255,255,0.02);
  border: 1px solid #1e293b;
  border-radius: 8px;
}
.ideas-kl-label {
  font-size: 9px;
  font-weight: 800;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 4px;
}
.ideas-kl-val {
  font-size: 13px;
  font-weight: 700;
  color: #e2e8f0;
  font-variant-numeric: tabular-nums;
}

/* ── Options block (contract + Greeks) ── */
.ideas-options-block {
  margin-top: 10px;
  padding: 10px 12px;
  background: rgba(168,85,247,0.05);
  border: 1px solid rgba(168,85,247,0.18);
  border-radius: 8px;
}
.ideas-options-head {
  font-size: 12px;
  color: #e2e8f0;
  margin-bottom: 6px;
}
.ideas-options-head strong {
  color: #c4b5fd;
  font-weight: 700;
  letter-spacing: 0.3px;
}
.ideas-options-mid {
  margin-left: 8px;
  font-size: 11px;
  color: #94a3b8;
  font-variant-numeric: tabular-nums;
}
.ideas-greeks-row {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.ideas-greek-cell {
  flex: 1 1 18%;
  min-width: 64px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 6px 8px;
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(168,85,247,0.12);
  border-radius: 6px;
}
.ideas-greek-label {
  font-size: 9px;
  font-weight: 800;
  color: #a78bfa;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 2px;
}
.ideas-greek-val {
  font-size: 12px;
  font-weight: 700;
  color: #e9d5ff;
  font-variant-numeric: tabular-nums;
}

/* ── Timeframe recommendation ── */
.ideas-horizon-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 8px 12px;
  margin-top: 8px;
  background: rgba(250,204,21,0.05);
  border: 1px solid rgba(250,204,21,0.18);
  border-radius: 8px;
}
.ideas-horizon-label {
  font-size: 10px;
  font-weight: 800;
  color: #facc15;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  white-space: nowrap;
  padding-top: 1px;
  min-width: 140px;
}
.ideas-horizon-text {
  font-size: 13px;
  color: #fde68a;
  line-height: 1.45;
}
.ideas-horizon-badge.intraday  { background: rgba(59,130,246,0.12); color: #93c5fd; }
.ideas-horizon-badge.swing     { background: rgba(16,185,129,0.12); color: #6ee7b7; }
.ideas-horizon-badge.long-term { background: rgba(168,85,247,0.12); color: #c4b5fd; }


/* =========================
   MOBILE TICKER BAR
========================= */
.mobile-ticker-bar {
  display: none; /* shown via JS on mobile for logged-in users */
}

@media (max-width: 640px) {
  .mobile-ticker-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    background: rgba(15,23,42,0.8);
    border-bottom: 1px solid rgba(255,255,255,0.07);
  }

  .mobile-ticker-bar input,
  .mobile-ticker-bar select {
    background: rgba(255,255,255,0.07);
    border: 1px solid #1e293b;
    color: #f1f5f9;
    border-radius: 9px;
    padding: 9px 12px;
    font-size: 16px; /* prevents iOS auto-zoom */
    font-family: inherit;
    outline: none;
  }

  .mobile-ticker-bar input {
    width: 90px;
    font-weight: 700;
    text-transform: uppercase;
  }

  .mobile-ticker-bar select {
    flex: 1;
  }
}

/* ============================================================
   MOBILE OVERRIDES — must be at end of file to win cascade
   (platform-nav base CSS appears after the first media query
   block, so these rules override it correctly)
============================================================ */
@media (max-width: 640px) {

  /* ── Body: single seamless dark background, no seams ── */
  body {
    background: #080f1e !important;
  }

  /* ── Topbar area sits on the same page background ── */
  .topbar {
    background: transparent;
  }

  /* ── Nav: hidden on mobile — replaced by swipeable card carousel ── */
  .platform-nav {
    display: none !important;
  }

  .platform-nav::-webkit-scrollbar { display: none; }

  .nav-tab {
    flex-shrink: 0 !important;
    font-size: 12px !important;
    padding: 7px 12px !important;
  }

  /* ── Hero: no separate background — blends with page ── */
  .hero-inner {
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 40px 24px 36px !important;
  }

  /* Subtle separator line only at the bottom of the hero */
  .guest-hero {
    border-bottom: 1px solid rgba(255,255,255,0.07);
    margin-bottom: 0 !important;
  }

  /* ── Tab panels: proper side padding ── */
  .tab-panel {
    padding: 20px 16px !important;
  }

  /* ── Section cards: edge-to-edge feel ── */
  .section-card,
  .full-card {
    border-radius: 14px !important;
  }

}

/* ============================================================
   TAB DEMO PREVIEWS
============================================================ */
.tab-demo {
  position: relative;
}

/* Blurred number spans inside demos */
.demo-blur {
  display: inline-block;
  filter: blur(6px);
  user-select: none;
  pointer-events: none;
  min-width: 2em;
}

/* Sticky upgrade bar at bottom of demo */
.demo-upgrade-bar {
  position: sticky;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 20px;
  padding: 14px 20px;
  background: linear-gradient(90deg, #0f2a4a 0%, #1e3a8a 100%);
  border: 1px solid rgba(59,130,246,0.4);
  border-radius: 14px;
  font-size: 14px;
  color: #cbd5e1;
  flex-wrap: wrap;
}

.demo-upgrade-bar strong {
  color: #f1f5f9;
}

.demo-upgrade-btn {
  background: #2563eb;
  color: #fff;
  font-weight: 700;
  font-size: 14px;
  padding: 9px 20px;
  border-radius: 9px;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.15s;
}

.demo-upgrade-btn:hover { background: #1d4ed8; }

/* "DEMO" watermark badge */
.demo-watermark {
  display: inline-block;
  background: rgba(245,158,11,0.15);
  border: 1px solid rgba(245,158,11,0.4);
  color: #f59e0b;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 1px;
  padding: 2px 8px;
  border-radius: 5px;
  vertical-align: middle;
  margin-left: 8px;
}

@media (max-width: 640px) {
  .demo-upgrade-bar {
    flex-direction: column;
    text-align: center;
    gap: 10px;
    border-radius: 12px;
  }
  .demo-upgrade-btn { width: 100%; text-align: center; }
}

/* ============================================================
   TICKER SECTION
============================================================ */
/* ── Market Pulse Bar (page-load overview) ───────────────────── */
.market-pulse-bar {
  background: linear-gradient(135deg, #0a0e1a 0%, #0d1424 100%);
  border-bottom: 1px solid #1a2540;
  padding: 10px 20px;
  display: flex;
  align-items: center;
  min-height: 48px;
}
.mp-loading { font-size: 12px; color: #475569; }
.mp-content {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  width: 100%;
}
.mp-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: #475569;
  white-space: nowrap;
}
.mp-tiles {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.mp-tile {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  border: 1px solid transparent;
}
.mp-tile-up   { background: #0a2e1a; border-color: #16a34a44; }
.mp-tile-down { background: #2d0a0a; border-color: #dc262644; }
.mp-tile-sym  { color: #94a3b8; }
.mp-tile-up   .mp-tile-pct { color: #4ade80; }
.mp-tile-down .mp-tile-pct { color: #f87171; }

/* Intraday arrow — shows direction vs today's open, independent of day change */
.mp-tile-intraday {
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0;
  margin-left: 3px;
  opacity: 0.85;
  cursor: default;
}
.mp-intraday-up   { color: #4ade80; }   /* ▲ above today's open */
.mp-intraday-dn   { color: #f87171; }   /* ▼ below today's open */
.mp-intraday-flat { color: #64748b; }   /* – flat near open */

.mp-bias-wrap {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  padding: 3px 12px;
  border-radius: 20px;
}
.mp-bias-bull { background: #0a2e1a; color: #4ade80; }
.mp-bias-bear { background: #2d0a0a; color: #f87171; }
.mp-bias-chop { background: #1a1a0a; color: #fbbf24; }

.mp-scan-cta {
  margin-left: auto;
  background: linear-gradient(135deg, #4f46e5, #7c3aed);
  color: #fff;
  border: none;
  border-radius: 7px;
  padding: 5px 14px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: opacity .15s;
}
.mp-scan-cta:hover { opacity: .85; }

/* ── Level gating (free users) ──────────────────────────────── */
.blurred-level {
  filter: blur(4px);
  user-select: none;
  pointer-events: none;
  opacity: .6;
}
.setup-upgrade-hint {
  font-size: 11px;
  color: #64748b;
  margin-top: 8px;
  padding: 6px 10px;
  background: #0f172a;
  border-radius: 6px;
  border: 1px solid #1e293b;
}
.setup-upgrade-hint a {
  color: #818cf8;
  text-decoration: underline;
}

/* ── Ticker-required banner ──────────────────────────────────── */
.ticker-required-banner {
  background: linear-gradient(135deg, #1c1a08, #2a2206);
  border: 1px solid #78350f;
  border-radius: 8px;
  margin: 8px 20px 0;
  padding: 10px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-size: 13px;
  color: #fcd34d;
  animation: pulseIn .2s ease;
}
@keyframes pulseIn {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.trb-close {
  background: none;
  border: none;
  color: #92400e;
  font-size: 15px;
  cursor: pointer;
  padding: 0 4px;
  flex-shrink: 0;
}
.trb-close:hover { color: #fcd34d; }

/* Input pulse animation when ticker is missing */
@keyframes tickerPulse {
  0%   { box-shadow: 0 0 0 0 rgba(251,191,36,.5); }
  50%  { box-shadow: 0 0 0 6px rgba(251,191,36,.15); }
  100% { box-shadow: 0 0 0 0 rgba(251,191,36,0); }
}
.ticker-input-pulse {
  animation: tickerPulse .6s ease 2;
  border-color: #f59e0b !important;
}

/* ── Market Scan ─────────────────────────────────────────────── */
.scan-trigger-btn {
  background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
  border: 1px solid #334155;
  color: #94a3b8;
  border-radius: 8px;
  padding: 7px 14px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  transition: all .15s;
  height: 40px;
}
.scan-trigger-btn:hover { border-color: #4f46e5; color: #e2e8f0; }
.analyze-trigger-btn {
  background: linear-gradient(135deg, #3730a3 0%, #4f46e5 100%);
  border: 1px solid #6366f1;
  color: #e0e7ff;
  border-radius: 8px;
  padding: 7px 16px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  transition: all .15s;
  height: 40px;
  letter-spacing: 0.02em;
}
.analyze-trigger-btn:hover { background: linear-gradient(135deg, #4338ca 0%, #6366f1 100%); border-color: #818cf8; color: #fff; }
.ticker-or-divider {
  color: #475569;
  font-size: 12px;
  font-weight: 500;
  padding: 0 2px;
  flex-shrink: 0;
  user-select: none;
}
.scan-selected-badge {
  background: #4f46e5;
  color: #fff;
  padding: 1px 8px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 700;
  margin-left: 4px;
}

.market-scan-panel {
  position: absolute;
  top: calc(100% - 8px);
  left: 0;
  right: 0;
  z-index: 300;
  background: #0f1520;
  border: 1px solid #1e2d45;
  border-radius: 12px;
  box-shadow: 0 16px 48px rgba(0,0,0,.7);
  overflow: hidden;
}

.scan-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid #1a2540;
  background: #0a0e1a;
}
.scan-panel-title {
  font-size: 13px;
  font-weight: 600;
  color: #94a3b8;
  text-transform: uppercase;
  letter-spacing: .06em;
}
.scan-close-btn {
  background: none;
  border: none;
  color: #475569;
  font-size: 16px;
  cursor: pointer;
  line-height: 1;
  padding: 2px 4px;
  transition: color .1s;
}
.scan-close-btn:hover { color: #e2e8f0; }

.scan-loading {
  padding: 20px;
  text-align: center;
  color: #64748b;
  font-size: 13px;
}

.scan-top-label, .scan-rest-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: #475569;
  padding: 10px 16px 4px;
}

/* Top 3 cards */
.scan-top-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  padding: 4px 14px 10px;
}
.scan-top-card {
  background: #131c2e;
  border: 1px solid #1e2d45;
  border-radius: 10px;
  padding: 12px 14px;
  cursor: pointer;
  transition: all .15s;
}
.scan-top-card:hover { border-color: #4f46e5; transform: translateY(-1px); }
.scan-top-card.scan-dir-up  { border-top: 2px solid #22c55e; }
.scan-top-card.scan-dir-down { border-top: 2px solid #ef4444; }

.stc-ticker { font-size: 16px; font-weight: 700; color: #f1f5f9; margin-bottom: 2px; }
.stc-price  { font-size: 13px; color: #94a3b8; }
.stc-pct    { font-size: 15px; font-weight: 700; margin: 4px 0; }
.stc-reason { font-size: 11px; color: #64748b; margin-bottom: 4px; }
.stc-vol    { font-size: 10px; color: #475569; }

.scan-pct-up   { color: #22c55e; }
.scan-pct-down { color: #ef4444; }

/* Rest list */
.scan-rest-list {
  padding: 0 14px 12px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.scan-rest-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 10px;
  border-radius: 7px;
  cursor: pointer;
  transition: background .1s;
}
.scan-rest-row:hover { background: #131c2e; }
.srr-ticker { width: 52px; font-weight: 600; color: #e2e8f0; font-size: 13px; }
.srr-price  { width: 64px; color: #94a3b8; font-size: 12px; }
.srr-pct    { width: 58px; font-weight: 600; font-size: 13px; }
.srr-reason { flex: 1; color: #64748b; font-size: 11px; }
.srr-vol    { color: #475569; font-size: 11px; }

.scan-error {
  padding: 16px;
  color: #f87171;
  font-size: 13px;
  text-align: center;
}

.ticker-section {
  padding: 16px 20px 14px;
  border-bottom: 1px solid rgba(255,255,255,0.07);
  background: rgba(10,16,30,0.6);
  display: flex;
  justify-content: flex-end;
}

.ticker-group {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
}

.ticker-label {
  font-size: 13px;
  font-weight: 500;
  color: #64748b;
}

.ticker-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Sub-groups inside ticker-row */
.ticker-input-analyze {
  display: flex;
  align-items: center;
  gap: 8px;
}

.ticker-scan-group {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

/* Hide ticker input rows on Dashboard without hiding the whole section
   (scan panel lives inside ticker-section and must remain reachable) */
.ticker-section.input-rows-hidden .ticker-group {
  display: none;
}

.ticker-main-input {
  background: rgba(255,255,255,0.07);
  border: 1px solid #1e293b;
  color: #f1f5f9;
  border-radius: 10px;
  padding: 10px 14px;
  font-size: 17px;
  font-weight: 700;
  font-family: inherit;
  width: 140px;
  text-transform: uppercase;
  outline: none;
  transition: border-color 0.15s;
}

.ticker-main-input:focus {
  border-color: #2563eb;
}

.ticker-main-input::placeholder {
  font-weight: 400;
  font-size: 13px;
  text-transform: none;
  color: #475569;
}

.provider-controls {
  display: flex;
  align-items: center;
  gap: 8px;
}

.provider-label {
  font-size: 12px;
  color: #64748b;
  font-weight: 600;
  white-space: nowrap;
}

.provider-controls select {
  background: rgba(255,255,255,0.07);
  border: 1px solid #1e293b;
  color: #f1f5f9;
  border-radius: 9px;
  padding: 8px 12px;
  font-size: 13px;
  font-family: inherit;
  outline: none;
  cursor: pointer;
}

/* Mobile */
@media (max-width: 640px) {
  /* On Dashboard mobile, hide the whole ticker bar —
     no scan panel trigger needed (button was removed) */
  .ticker-section.input-rows-hidden {
    display: none !important;
  }

  /* On non-Dashboard tabs: show ticker bar, compact padding */
  .ticker-section {
    padding: 10px 12px 8px;
    justify-content: center;
  }

  .ticker-group {
    width: 100%;
    align-items: center;
  }

  /* Single horizontal line: [input] [Analyze →]  or  [🔍 Scan Market] */
  .ticker-row {
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    gap: 6px;
    width: 100%;
    justify-content: center;
  }

  /* Input: narrow — just wide enough for a ticker symbol (≤ 5 chars) */
  .ticker-input-analyze {
    gap: 6px;
    flex-shrink: 1;
  }

  .ticker-input-analyze .ticker-main-input {
    width: 72px;
    min-width: 60px;
    font-size: 16px; /* prevent iOS zoom */
    padding: 8px 10px;
  }

  .analyze-trigger-btn {
    font-size: 12px;
    padding: 7px 10px;
    white-space: nowrap;
  }

  .ticker-or-divider {
    font-size: 11px;
    flex-shrink: 0;
  }

  .scan-trigger-btn {
    font-size: 12px;
    padding: 7px 10px;
    white-space: nowrap;
    flex-shrink: 0;
  }

  .ticker-label {
    font-size: 10px;
    text-align: center;
    width: 100%;
  }
}

/* ============================================================
   MOBILE CARD CAROUSEL
   On mobile: platform-nav hides, all tab panels become a
   horizontal scroll-snap deck, card bar shows current tab.
============================================================ */

/* ── Card bar + tools label: hidden on desktop ── */
.mobile-card-bar  { display: none; }
.mobile-tools-label { display: none; }

/* ── Hide old horizontal tab nav on mobile ── */
@media (max-width: 640px) {
  .platform-nav { display: none !important; }

  /* ── Section divider between hero CTA and card deck ── */
  .mobile-tools-label {
    display: flex !important;
    align-items: center;
    gap: 10px;
    padding: 18px 20px 6px;
  }

  .mobile-tools-line {
    flex: 1;
    height: 1px;
    background: linear-gradient(to right, transparent, rgba(59,130,246,0.35), transparent);
  }

  .mobile-tools-text {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 2px;
    color: rgba(148,163,184,0.7);
  }

  /* ── Mobile card bar: nav header for the card deck ── */
  .mobile-card-bar {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px 10px;
    background: linear-gradient(180deg, rgba(15,22,40,0.98) 0%, rgba(10,16,30,0.96) 100%);
    border-top: 2px solid rgba(59,130,246,0.5);
    border-bottom: 1px solid rgba(59,130,246,0.15);
    position: sticky;
    top: 0;
    z-index: 20;
    gap: 10px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.4);
  }

  .mobile-card-info {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    flex: 1;
  }

  .mobile-card-name {
    font-size: 18px;
    font-weight: 800;
    color: #f1f5f9;
    letter-spacing: -0.3px;
    line-height: 1.2;
  }

  .mobile-card-tier {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.8px;
    padding: 2px 8px;
    border-radius: 5px;
  }

  .mobile-card-tier.tier-pro {
    background: rgba(59,130,246,0.2);
    color: #60a5fa;
    border: 1px solid rgba(59,130,246,0.4);
  }

  .mobile-card-tier.tier-elite {
    background: rgba(245,158,11,0.15);
    color: #fbbf24;
    border: 1px solid rgba(245,158,11,0.4);
  }

  /* ── Position dot indicators ── */
  .mobile-card-dots {
    display: flex;
    gap: 5px;
    align-items: center;
    margin-top: 2px;
  }

  .mobile-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: rgba(255,255,255,0.2);
    transition: background 0.2s, transform 0.2s;
    flex-shrink: 0;
  }

  .mobile-dot.active {
    background: #3b82f6;
    transform: scale(1.4);
  }

  /* ── Arrows: bigger, bolder ── */
  .mobile-card-arrow {
    background: rgba(59,130,246,0.12);
    border: 1.5px solid rgba(59,130,246,0.35);
    color: #93c5fd;
    font-size: 28px;
    font-weight: 400;
    line-height: 1;
    width: 48px;
    height: 48px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    cursor: pointer;
    flex-shrink: 0;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
  }

  .mobile-card-arrow:hover,
  .mobile-card-arrow:active {
    background: rgba(59,130,246,0.25);
    border-color: rgba(59,130,246,0.6);
    color: #dbeafe;
  }

  .mobile-card-arrow:disabled {
    opacity: 0.2;
    cursor: default;
  }

  /* ── Card deck container ── */
  /* NOTE: -webkit-overflow-scrolling:touch is intentionally omitted —
     it conflicts with scroll-snap on iOS 15+ and causes swipe to not snap */
  .tab-panels-wrap {
    display: flex;
    overflow-x: scroll;
    /* Do NOT set overflow-y here: CSS coerces overflow-y to 'auto'
       when overflow-x is non-visible, which confuses iOS about which
       axis to handle — just leave overflow-y at its default. */
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    width: 100%;
    background: rgba(6,10,20,0.6);
    border-left: 1px solid rgba(59,130,246,0.1);
    border-right: 1px solid rgba(59,130,246,0.1);
  }

  .tab-panels-wrap::-webkit-scrollbar { display: none; }

  /* ── Each tab is a full-width snap card ── */
  .tab-panels-wrap .tab-panel {
    display: block !important;  /* override .tab-panel { display:none } */
    /* Width is set in px by JS (setupMobileCards). 100% is CSS fallback. */
    min-width: 100%;
    width: 100%;
    scroll-snap-align: start;
    scroll-snap-stop: always;   /* prevents fast swipes skipping cards on iOS */
    flex-shrink: 0;
    box-sizing: border-box;
  }

  /* ── Card visual order matches the nav order ── */
  #tab-dashboard   { order: 1; }
  #tab-trade-ideas { order: 2; }
  #tab-sentiment   { order: 3; }
  #tab-earnings    { order: 4; }
  #tab-risk        { order: 5; }
  #tab-macro       { order: 6; }
  #tab-strategy    { order: 7; }
  #tab-ta          { order: 8; }
  #tab-autotrade   { order: 9; }
}

/* ================================================================
   MOBILE CAROUSEL — ABSOLUTE FINAL OVERRIDE
   Uses ID selectors (highest specificity) + !important.
   Placed at end of file so nothing above can override.
   Drops CSS scroll-snap entirely — JS handles snapping.
================================================================ */
@media (max-width: 640px) {

  /* Hide old tab nav */
  #platformNav { display: none !important; }

  /* Card bar: horizontal pill row */
  #mobileCardBar {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 10px 16px !important;
    background: rgba(8,14,28,0.95) !important;
    border-bottom: 1px solid rgba(255,255,255,0.08) !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 50 !important;
  }

  /* Carousel container — plain flex scroll, NO CSS scroll-snap */
  #tabPanelsWrap {
    display: flex !important;
    overflow-x: scroll !important;
    overflow-y: visible !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    width: 100% !important;
    align-items: flex-start !important; /* prevents sections stretching to tallest tab height */
    /* scroll-snap intentionally absent — JS snaps on touchend */
  }

  #tabPanelsWrap::-webkit-scrollbar { display: none !important; }

  /* Each tab = one full-width card — width set in px by JS, 100vw as fallback */
  #tabPanelsWrap > section {
    display: block !important;
    min-width: 100vw !important;
    width: 100vw !important;
    flex-shrink: 0 !important;
    box-sizing: border-box !important;
    scroll-snap-align: unset !important;
  }

  /* Non-active sections are off-screen horizontally but still contribute
     to page scroll height. Cap them at 1 viewport so only the active tab
     drives how far the page scrolls vertically. */
  #tabPanelsWrap > section:not(.active) {
    max-height: 100vh;
    overflow-y: hidden;
  }

  /* Card order */
  #tab-dashboard   { order: 1 !important; }
  #tab-trade-ideas { order: 2 !important; }
  #tab-sentiment   { order: 3 !important; }
  #tab-earnings    { order: 4 !important; }
  #tab-risk        { order: 5 !important; }
  #tab-macro       { order: 6 !important; }
  #tab-strategy    { order: 7 !important; }
  #tab-ta          { order: 8 !important; }
  #tab-autotrade   { order: 9 !important; }
}

/* =========================
   COPY REMINDER BANNER
========================= */

.copy-reminder-banner {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  background: linear-gradient(135deg, rgba(245,158,11,0.12) 0%, rgba(234,179,8,0.08) 100%);
  border: 1px solid rgba(245,158,11,0.35);
  border-radius: 10px;
  padding: 12px 14px;
  margin-bottom: 14px;
  font-size: 13px;
  color: #fde68a;
  line-height: 1.5;
}

.copy-reminder-banner strong {
  color: #fbbf24;
}

.copy-reminder-dismiss {
  margin-left: auto;
  flex-shrink: 0;
  background: none;
  border: none;
  color: #92400e;
  font-size: 13px;
  cursor: pointer;
  padding: 0 2px;
  opacity: 0.6;
  transition: opacity 0.15s;
}
.copy-reminder-dismiss:hover { opacity: 1; }

.copy-reminder-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-left: 8px;
  padding: 4px 12px;
  font-size: 12px;
  font-weight: 700;
  background: rgba(245,158,11,0.2);
  border: 1px solid rgba(245,158,11,0.4);
  border-radius: 5px;
  color: #fbbf24;
  cursor: pointer;
  transition: background 0.15s;
  vertical-align: middle;
}
.copy-reminder-btn:hover {
  background: rgba(245,158,11,0.3);
}

/* =========================
   OPTIONS — MARKET STATE CARD
========================= */

/* Updated scalp-badge variant */
.scalp-badge-live {
  background: rgba(124,58,237,0.2);
  color: #a78bfa;
  border: 1px solid rgba(124,58,237,0.35);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 2px 8px;
  border-radius: 4px;
  text-transform: uppercase;
  margin-left: 8px;
}

/* Market State Card */
.ms-card {
  background: rgba(15, 23, 42, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  padding: 14px 16px;
  margin-bottom: 10px;
  transition: border-color 0.2s;
}

.ms-card-top {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

/* State badge */
.ms-state-badge {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 5px;
  border: 1px solid currentColor;
  white-space: nowrap;
}

/* State-specific colors */
.ms-state-trend_continuation { color: #34d399; border-color: rgba(52,211,153,0.35); background: rgba(52,211,153,0.1); }
.ms-state-breakout_attempt   { color: #60a5fa; border-color: rgba(96,165,250,0.35); background: rgba(96,165,250,0.1); }
.ms-state-pullback           { color: #fbbf24; border-color: rgba(251,191,36,0.35); background: rgba(251,191,36,0.1); }
.ms-state-retest             { color: #a78bfa; border-color: rgba(167,139,250,0.35); background: rgba(167,139,250,0.1); }
.ms-state-failed_breakout    { color: #f87171; border-color: rgba(248,113,113,0.35); background: rgba(248,113,113,0.1); }
.ms-state-reversal_warning   { color: #fb923c; border-color: rgba(251,146,60,0.35); background: rgba(251,146,60,0.1); }
.ms-state-chop               { color: #94a3b8; border-color: rgba(148,163,184,0.3);  background: rgba(148,163,184,0.07); }

/* Bias indicator */
.ms-bias {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.03em;
  white-space: nowrap;
}
.ms-bull    { color: #34d399; }
.ms-bear    { color: #f87171; }
.ms-neutral { color: #94a3b8; }

/* Confidence bar */
.ms-conf-wrap {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-left: auto;
}

.ms-conf-track {
  width: 80px;
  height: 5px;
  background: rgba(255,255,255,0.08);
  border-radius: 3px;
  overflow: hidden;
}

.ms-conf-fill {
  height: 100%;
  border-radius: 3px;
  transition: width 0.4s ease;
}
.ms-conf-high { background: linear-gradient(90deg, #10b981, #34d399); }
.ms-conf-mid  { background: linear-gradient(90deg, #f59e0b, #fbbf24); }
.ms-conf-low  { background: linear-gradient(90deg, #ef4444, #f87171); }

.ms-conf-pct {
  font-size: 11px;
  font-weight: 700;
  color: #94a3b8;
  min-width: 28px;
  text-align: right;
}

/* Why line */
.ms-why {
  font-size: 12px;
  color: #94a3b8;
  margin-top: 8px;
  line-height: 1.5;
  border-top: 1px solid rgba(255,255,255,0.06);
  padding-top: 8px;
}

/* DTE tabs — standalone, above action card */

/* Action Card */
.ms-action-card {
  background: rgba(15, 23, 42, 0.5);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 10px;
  padding: 12px 16px;
  margin-bottom: 10px;
}

.ms-action-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 8px;
}

.ms-action-label {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: #64748b;
  text-transform: uppercase;
  white-space: nowrap;
  margin-top: 2px;
  min-width: 72px;
}

.ms-action-text {
  font-size: 13px;
  font-weight: 700;
  line-height: 1.45;
  flex: 1;
}
.ms-action-bull { color: #34d399; }
.ms-action-bear { color: #f87171; }

/* Key level chips */
.ms-levels-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 8px;
}

.ms-level-chip {
  font-size: 11px;
  font-weight: 600;
  color: #94a3b8;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 4px;
  padding: 3px 8px;
  white-space: nowrap;
}

/* Risk Warning */
.ms-warning-row {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  background: rgba(251,146,60,0.07);
  border: 1px solid rgba(251,146,60,0.2);
  border-radius: 6px;
  padding: 7px 10px;
}

.ms-warning-icon {
  font-size: 12px;
  color: #fb923c;
  margin-top: 1px;
  flex-shrink: 0;
}

.ms-warning-text {
  font-size: 11.5px;
  color: #fdba74;
  line-height: 1.4;
}

/* Greeks detail label */
.ms-greeks-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: #475569;
  text-transform: uppercase;
  margin-bottom: 8px;
  padding-top: 4px;
  border-top: 1px solid rgba(255,255,255,0.05);
}

/* QD Banner — see definition above (~line 1620) */

/* ══════════════════════════════════════════════════════════════════════════
   GEX Footer Bar (TA tab) — mirrors the TradingView-style bottom strip:
   IVR · IVx avg · implied move · CALL$ · GEX lights · countdown
   ══════════════════════════════════════════════════════════════════════════ */

.gex-footer {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 16px;
  padding: 8px 12px;
  background: #0f172a;
  border: 1px solid #1e293b;
  border-radius: 10px;
  font-family: -apple-system, BlinkMacSystemFont, "SF Mono", Menlo, monospace;
  font-size: 12px;
  color: #e2e8f0;
  box-shadow: 0 4px 12px rgba(0,0,0,0.25);
}

.gex-footer.hidden { display: none; }

.gex-chip {
  display: inline-flex;
  flex-direction: column;   /* label always on top, value below */
  align-items: center;
  gap: 3px;
  padding: 5px 10px;
  border-radius: 6px;
  background: rgba(30,41,59,0.8);
  border: 1px solid rgba(51,65,85,0.6);
  font-variant-numeric: tabular-nums;
  min-width: 42px;
}

.gex-label {
  color: #64748b;
  font-size: 9.5px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 600;
  white-space: nowrap;
}

.gex-val {
  color: #f1f5f9;
  font-weight: 700;
  font-size: 13px;
}

/* Implied-move chip (e.g. "3.17%") — yellow accent like TradingView */
.gex-chip-move .gex-val {
  color: #fbbf24;
}

/* CALL$ % chip — soft cyan accent */
.gex-chip-call .gex-val {
  color: #7dd3fc;
}

/* GEX traffic-light dots — sit in a row below the "GEX" label */
.gex-chip-gex { gap: 5px; }   /* label → dots row */
.gex-chip-gex .gex-dot { display: inline-block; }

.gex-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  box-shadow: 0 0 6px currentColor;
  transition: background-color 160ms ease, color 160ms ease;
}
.gex-dot-green  { background: #22c55e; color: #22c55e; }
.gex-dot-yellow { background: #eab308; color: #eab308; }
.gex-dot-red    { background: #ef4444; color: #ef4444; }
.gex-dot-gray   { background: #475569; color: #475569; box-shadow: none; }

/* Countdown to market close */
.gex-chip-timer {
  margin-left: auto;   /* pushes timer to the right edge like screenshot */
  background: rgba(15,23,42,0.9);
  border-color: rgba(71,85,105,0.4);
}
.gex-chip-timer .gex-val {
  color: #cbd5e1;
  font-size: 12.5px;
}

.gex-refresh-btn {
  width: 26px;
  height: 26px;
  border-radius: 6px;
  background: rgba(30,41,59,0.7);
  border: 1px solid rgba(51,65,85,0.6);
  color: #94a3b8;
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s, transform 0.3s ease;
}
.gex-refresh-btn:hover {
  background: rgba(59,130,246,0.15);
  border-color: #3b82f6;
  color: #93c5fd;
}
.gex-refresh-btn.loading {
  animation: gex-spin 1s linear infinite;
  pointer-events: none;
  opacity: 0.6;
}
@keyframes gex-spin { to { transform: rotate(360deg); } }

/* Stale-data dim state — when auto-refresh is paused or API errored */
.gex-footer.stale .gex-chip:not(.gex-chip-timer) { opacity: 0.55; }
.gex-footer.stale .gex-dot { box-shadow: none; opacity: 0.7; }

/* Dot wrapper — keeps the two GEX dots side-by-side within the chip,
   including on mobile when the chip becomes a column layout. */
.gex-dots {
  display: inline-flex;
  gap: 4px;
  align-items: center;
}

/* Mobile — stack each chip as { value on top / label below }.
   flex-direction: column-reverse keeps the HTML semantic order
   (label first in markup) but visually swaps it.  */
@media (max-width: 640px) {
  .gex-footer {
    gap: 6px;
    padding: 6px 8px;
    justify-content: space-between;
  }
  .gex-chip {
    flex-direction: column-reverse;
    align-items: center;
    text-align: center;
    padding: 4px 8px;
    gap: 1px;
    min-width: 58px;
    flex: 1 1 auto;
  }
  .gex-label {
    display: block;               /* always visible on mobile */
    font-size: 9.5px;
    letter-spacing: 0.03em;
  }
  .gex-val {
    font-size: 13.5px;
    line-height: 1.15;
  }
  .gex-chip-timer { margin-left: 0; }
  .gex-chip-timer .gex-val { font-size: 12.5px; }
}

/* ══════════════════════════════════════════════════════════════════════════
   GEX Sub-tab Panel (taPanel-gex) — full landing view in TA tab
   ══════════════════════════════════════════════════════════════════════════ */

#taPanel-gex { padding: 12px 0 4px; }
#taPanel-gex.hidden { display: none; }

.gex-panel-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  margin: 0 0 14px;
}
.gex-panel-header h3 {
  margin: 0 0 4px;
  font-size: 16px;
  color: #f1f5f9;
}
.gex-panel-ticker {
  color: #60a5fa;
  font-weight: 600;
}
.gex-panel-sub {
  margin: 0;
  color: #64748b;
  font-size: 12px;
}
.gex-panel-header-right {
  display: flex;
  align-items: center;
  gap: 10px;
}
.gex-panel-age {
  color: #64748b;
  font-size: 11.5px;
  font-variant-numeric: tabular-nums;
}

/* Metric grid */
.gex-metric-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 10px;
  margin-top: 14px;
}
.gex-metric {
  background: #0f172a;
  border: 1px solid #1e293b;
  border-radius: 8px;
  padding: 10px 12px;
  min-height: 72px;
}
.gex-metric-label {
  color: #64748b;
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 600;
  margin-bottom: 4px;
}
.gex-metric-val {
  color: #f1f5f9;
  font-size: 20px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}
.gex-metric-sub {
  color: #94a3b8;
  font-size: 11px;
  margin-top: 3px;
}

/* Explanatory footnote */
.gex-panel-note {
  margin-top: 14px;
  padding: 10px 14px;
  background: rgba(30,41,59,0.45);
  border-left: 3px solid #3b82f6;
  border-radius: 6px;
  color: #cbd5e1;
  font-size: 12px;
  line-height: 1.55;
}
.gex-panel-note strong { color: #f1f5f9; }

/* Market Phase chart — 1m candle host + controls */
.phase-candle-host { background: #0b1220; border-radius: 6px; }
.phase-candle-host.draw-mode  { cursor: crosshair; }

.phase-candle-controls {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  flex-wrap: wrap;
}
.phase-ctrl-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: rgba(30,41,59,0.7);
  border: 1px solid rgba(51,65,85,0.6);
  color: #cbd5e1;
  font-size: 11.5px;
  font-weight: 600;
  padding: 5px 10px;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
}
.phase-ctrl-btn:hover {
  background: rgba(51,65,85,0.55);
  border-color: #475569;
  color: #f1f5f9;
}
.phase-ctrl-btn.active {
  background: rgba(251,191,36,0.15);
  border-color: rgba(251,191,36,0.55);
  color: #fbbf24;
}
.phase-ctrl-hint {
  color: #64748b;
  font-size: 10.5px;
  margin-left: 4px;
}
@media (max-width: 640px) {
  .phase-ctrl-hint { display: none; }
}

/* Strategy overlay buttons */
.strat-btn {
  padding: 5px 8px;
  font-size: 11px;
}
.strat-btn.active {
  background: rgba(148,163,184,0.15);
  border-color: rgba(148,163,184,0.55);
  color: #e2e8f0;
}
.strat-info-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  color: #475569;
  font-size: 12px;
  padding: 0 2px;
  cursor: pointer;
  line-height: 1;
  transition: color 0.12s;
}
.strat-info-btn:hover { color: #94a3b8; }

/* Strategy info popup */
#stratInfoPopup {
  position: fixed;
  z-index: 9999;
  background: #151c28;
  border: 1px solid #2a3654;
  border-radius: 10px;
  padding: 14px 16px;
  font-size: 12px;
  color: #cbd5e1;
  max-width: 300px;
  line-height: 1.6;
  box-shadow: 0 8px 32px rgba(0,0,0,.55);
  pointer-events: auto;
}
#stratInfoPopup strong { color: #f1f5f9; display: block; margin-bottom: 6px; font-size: 13px; }
#stratInfoPopup .close-x {
  float: right; cursor: pointer; color: #64748b; font-size: 14px; margin-left: 8px; line-height: 1;
}
#stratInfoPopup .close-x:hover { color: #f1f5f9; }

/* Market Phase chart — timeframe toggle (5m ↔ 1m) */
.phase-tf-group {
  display: inline-flex;
  background: #0d1525;
  border: 1px solid #1e293b;
  border-radius: 6px;
  padding: 2px;
  gap: 2px;
}
.phase-tf-btn {
  background: transparent;
  border: none;
  color: #64748b;
  font-size: 11px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 4px;
  cursor: pointer;
  transition: background 0.12s, color 0.12s;
  font-variant-numeric: tabular-nums;
}
.phase-tf-btn:hover:not(.active) {
  color: #cbd5e1;
  background: rgba(51,65,85,0.4);
}
.phase-tf-btn.active {
  background: #6366f1;
  color: #fff;
  box-shadow: 0 0 0 1px rgba(99,102,241,0.4);
}
.phase-tf-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* Multi-row dot legend — each "dot row" lays out label + legend across,
   wraps to a new row on narrow screens */
.gex-note-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: baseline;
  margin-bottom: 4px;
}
.gex-note-row strong {
  flex: 0 0 auto;
  min-width: 210px;
}
.gex-note-legend {
  color: #cbd5e1;
}
.gex-note-examples strong {
  color: #93c5fd;
}
.gex-note-footer {
  margin-top: 8px;
  padding-top: 6px;
  border-top: 1px solid rgba(51,65,85,0.5);
  color: #94a3b8;
  font-size: 11.5px;
  font-style: italic;
}

@media (max-width: 640px) {
  .gex-note-row strong { min-width: 0; flex-basis: 100%; }
}

/* Inline dot (smaller, used inside the legend text) */
.gex-dot-inline {
  display: inline-block;
  width: 8px;
  height: 8px;
  margin: 0 2px;
  vertical-align: middle;
}

/* Stale state on the whole panel — dims values when we can't refresh */
#taPanel-gex.stale .gex-metric-val,
#taPanel-gex.stale .gex-chip:not(.gex-chip-timer) { opacity: 0.55; }

/* ── Key Strikes visualization ────────────────────────────────────────────
   Ranked call walls (C1..Cn by call OI), put walls (P1..Pn by put OI),
   HVL (max |GEX| strike) and max-pain markers. Rows ordered top-down by
   strike descending; the current underlying price is highlighted with a
   dashed yellow band.
   ─────────────────────────────────────────────────────────────────────── */

.gex-strike-map {
  margin-top: 14px;
  background: #0f172a;
  border: 1px solid #1e293b;
  border-radius: 8px;
  padding: 12px 14px;
}

.gex-strike-map-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(30,41,59,0.8);
}
.gex-strike-map-title {
  font-weight: 700;
  color: #f1f5f9;
  font-size: 13px;
}
.gex-strike-map-meta {
  margin-left: 8px;
  color: #64748b;
  font-size: 11.5px;
  font-weight: 500;
}
.gex-strike-map-legend {
  display: flex;
  gap: 14px;
  font-size: 11px;
  color: #94a3b8;
}
.gex-strike-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.gex-strike-map-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-family: -apple-system, BlinkMacSystemFont, "SF Mono", Menlo, monospace;
  font-variant-numeric: tabular-nums;
  font-size: 12px;
}
.gex-strike-map-empty {
  padding: 16px;
  text-align: center;
  color: #64748b;
  font-size: 12px;
  font-style: italic;
}

/* Row: [ label 42px | bar track flex | OI 52px | strike 70px ] */
.gex-strike-row {
  display: grid;
  grid-template-columns: 42px 1fr 56px 78px;
  align-items: center;
  gap: 10px;
  min-height: 22px;
  padding: 3px 6px;
  border-radius: 4px;
  transition: background-color 120ms;
}
.gex-strike-row:hover { background: rgba(51,65,85,0.25); }

/* Current-price divider — dashed yellow band that visually separates
   strikes above and below spot. */
.gex-strike-row.current {
  background: rgba(251,191,36,0.08);
  border-top:    1px dashed #fbbf24;
  border-bottom: 1px dashed #fbbf24;
  padding: 5px 6px;
  margin: 2px 0;
}

.gex-strike-label {
  font-weight: 700;
  font-size: 11px;
  text-align: center;
  padding: 2px 4px;
  border-radius: 3px;
  letter-spacing: 0.02em;
}
.gex-strike-label.call     { color: #4ade80; background: rgba(34,197,94,0.12); }
.gex-strike-label.put      { color: #f87171; background: rgba(239,68,68,0.12); }
.gex-strike-label.hvl      { color: #22d3ee; background: rgba(34,211,238,0.12); }
.gex-strike-label.maxpain  { color: #fbbf24; background: rgba(251,191,36,0.12); }
.gex-strike-label.spot     { color: #fbbf24; background: rgba(251,191,36,0.18); font-style: italic; }

.gex-strike-bar-track {
  position: relative;
  height: 10px;
  background: rgba(51,65,85,0.3);
  border-radius: 3px;
  overflow: hidden;
}
.gex-strike-bar {
  position: absolute;
  top: 0; left: 0; bottom: 0;
  border-radius: 3px;
}
.gex-strike-bar.call {
  background: linear-gradient(90deg, rgba(34,197,94,0.35) 0%, rgba(34,197,94,0.9) 100%);
  box-shadow: 0 0 8px rgba(34,197,94,0.15);
}
.gex-strike-bar.put  {
  background: linear-gradient(90deg, rgba(239,68,68,0.35) 0%, rgba(239,68,68,0.9) 100%);
  box-shadow: 0 0 8px rgba(239,68,68,0.15);
}
.gex-strike-bar.hvl {
  background: linear-gradient(90deg, rgba(34,211,238,0.25), rgba(34,211,238,0.75));
  width: 100%;
}
.gex-strike-bar.maxpain {
  background: linear-gradient(90deg, rgba(251,191,36,0.25), rgba(251,191,36,0.75));
  width: 100%;
}

.gex-strike-oi {
  text-align: right;
  color: #94a3b8;
  font-size: 11px;
}
.gex-strike-price {
  text-align: right;
  color: #e2e8f0;
  font-weight: 600;
  font-size: 12px;
}
.gex-strike-row.current .gex-strike-price { color: #fbbf24; }

/* Compact on narrow widths */
@media (max-width: 640px) {
  .gex-strike-row {
    grid-template-columns: 36px 1fr 60px;
    gap: 6px;
  }
  .gex-strike-oi { display: none; }
  .gex-strike-map-legend { font-size: 10px; gap: 8px; }
}

/* ══════════════════════════════════════════════════════════════════════════
   GEX Levels Chart (NEW — additive to the summary panel above)
   TradingView-inspired candles + horizontal overlays for walls / HVL / pain.
   ══════════════════════════════════════════════════════════════════════════ */

.gex-chart-section {
  margin-top: 16px;
  background: #0b1220;
  border: 1px solid #1e293b;
  border-radius: 10px;
  padding: 12px 12px 8px;
  position: relative;
}

/* Inline variant — used when the chart is a continuation of the GEX
   snapshot panel rather than a standalone card. No border, no distinct
   background, no internal header/legend. */
.gex-chart-section.gex-chart-inline {
  margin-top: 12px;
  background: transparent;
  border: none;
  padding: 0;
}

.gex-chart-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 8px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(30,41,59,0.8);
}
.gex-chart-title {
  font-weight: 700;
  color: #f1f5f9;
  font-size: 13px;
}
.gex-chart-sub {
  margin-left: 8px;
  color: #64748b;
  font-size: 11.5px;
}

.gex-chart-legend {
  display: flex;
  gap: 12px;
  font-size: 11px;
  color: #94a3b8;
  flex-wrap: wrap;
}
.gex-chart-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.gex-legend-swatch {
  display: inline-block;
  width: 14px;
  height: 3px;
  border-radius: 1px;
  vertical-align: middle;
}
.gex-legend-swatch.gex-legend-dashed {
  background: repeating-linear-gradient(90deg, #fbbf24 0 3px, transparent 3px 6px) !important;
  height: 2px;
}

/* Chart canvas host — lightweight-charts renders inside this */
.gex-levels-chart {
  width: 100%;
  height: 380px;
  position: relative;
}

/* Loading / empty / error overlay state message */
.gex-chart-state {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #64748b;
  font-size: 12px;
  font-style: italic;
  background: rgba(15,23,42,0.8);
  padding: 6px 14px;
  border-radius: 6px;
  border: 1px solid rgba(51,65,85,0.5);
  pointer-events: none;
  display: none;          /* hidden by default; revealed by JS */
}
.gex-chart-state.visible { display: block; }

/* Corner variant — small non-blocking info tag. */
.gex-chart-state.corner {
  top: 10px;
  left: 10px;
  transform: none;
  font-size: 10.5px;
  padding: 3px 8px;
  background: rgba(251,191,36,0.12);
  border-color: rgba(251,191,36,0.45);
  color: #fbbf24;
  font-style: normal;
}

/* When in loading/empty state, dim the canvas slightly */
.gex-chart-section.loading .gex-levels-chart,
.gex-chart-section.empty   .gex-levels-chart { opacity: 0.4; }

/* Narrow-screen adjustments */
@media (max-width: 640px) {
  .gex-levels-chart { height: 280px; }
  .gex-chart-legend { font-size: 10px; gap: 8px; }
}

/* ══════════════════════════════════════════════════════════════════════════
   Intraday Signal collapsible (Trade Ideas section)
   Interface-only wrapper — no layout of the inner cards changes.
   ══════════════════════════════════════════════════════════════════════════ */

.ideas-collapse {
  margin-bottom: 16px;
}

/* Summary bar — always visible. Clickable to toggle open/close. */
.ideas-collapse-summary {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  background: #0f172a;
  border: 1px solid #1e293b;
  border-radius: 10px;
  cursor: pointer;
  list-style: none;       /* strips default disclosure triangle */
  user-select: none;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.ideas-collapse-summary:hover {
  background: rgba(51,65,85,0.35);
  border-color: #334155;
}
/* Hide browser's default marker in Safari + modern Chromium */
.ideas-collapse-summary::-webkit-details-marker { display: none; }
.ideas-collapse-summary::marker { content: ""; display: none; }

/* When opened, merge summary visually with body below */
.ideas-collapse[open] > .ideas-collapse-summary {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

.ideas-collapse-chevron {
  display: inline-block;
  color: #64748b;
  font-size: 11px;
  width: 12px;
  text-align: center;
  transition: transform 0.2s ease;
}
.ideas-collapse[open] > .ideas-collapse-summary .ideas-collapse-chevron {
  transform: rotate(90deg);
}

.ideas-collapse-title {
  flex: 1;
  font-size: 14px;
  font-weight: 700;
  color: #f1f5f9;
  letter-spacing: 0.01em;
}

.ideas-collapse-badge {
  display: inline-flex;
  align-items: center;
}
.ideas-collapse-badge-pill {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.05em;
  padding: 3px 9px;
  border-radius: 999px;
  border: 1px solid transparent;
  font-variant-numeric: tabular-nums;
}

.ideas-collapse-hint {
  font-size: 10.5px;
  color: #475569;
  font-weight: 500;
  margin-left: 4px;
}
.ideas-collapse[open] > .ideas-collapse-summary .ideas-collapse-hint::before {
  content: "click to collapse";
}
.ideas-collapse[open] > .ideas-collapse-summary .ideas-collapse-hint {
  color: #475569;
  font-size: 0;   /* swap text via ::before above */
}
.ideas-collapse[open] > .ideas-collapse-summary .ideas-collapse-hint::before {
  font-size: 10.5px;
}

/* Body — inherit styles from existing #ideasContent. Add a top border that
   continues the summary's visual boundary when expanded. */
.ideas-collapse[open] > .ideas-collapse-body {
  border: 1px solid #1e293b;
  border-top: none;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
  padding: 14px 14px 6px;
  background: rgba(15,23,42,0.3);
}

@media (max-width: 640px) {
  .ideas-collapse-summary { padding: 12px 14px; gap: 8px; }
  .ideas-collapse-title   { font-size: 13px; }
  .ideas-collapse-hint    { display: none; }
  .ideas-collapse[open] > .ideas-collapse-body { padding: 10px 10px 4px; }
}

/* ══════════════════════════════════════════════════════════════════════════
   GEX Chatbot — sits below the Intraday Signal collapse
   ══════════════════════════════════════════════════════════════════════════ */

.gex-chat-section {
  background: #0f172a;
  border: 1px solid #1e293b;
  border-radius: 10px;
  margin-bottom: 16px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.gex-chat-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  background: rgba(30,41,59,0.55);
  border-bottom: 1px solid rgba(30,41,59,0.8);
}
.gex-chat-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 700;
  color: #f1f5f9;
}
.gex-chat-sym {
  color: #60a5fa;
  font-weight: 700;
  font-size: 12.5px;
}

.gex-chat-header-pills {
  display: flex;
  align-items: center;
  gap: 6px;
}
.gex-chat-vwap-badge {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.02em;
  padding: 2px 7px;
  border-radius: 5px;
  border: 1px solid rgba(99,102,241,0.4);
  background: rgba(99,102,241,0.12);
  color: #a5b4fc;
  white-space: nowrap;
}
.gex-chat-mom-badge {
  font-size: 10.5px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 5px;
  border: 1px solid rgba(51,65,85,0.4);
  background: rgba(30,41,59,0.5);
  color: #94a3b8;
  white-space: nowrap;
}
.gex-chat-mom-badge.up   { border-color: rgba(34,197,94,0.4); background: rgba(34,197,94,0.1);  color: #86efac; }
.gex-chat-mom-badge.down { border-color: rgba(239,68,68,0.4); background: rgba(239,68,68,0.1);  color: #fca5a5; }

.gex-chat-refresh {
  width: 26px;
  height: 26px;
  border-radius: 6px;
  background: rgba(30,41,59,0.7);
  border: 1px solid rgba(51,65,85,0.6);
  color: #94a3b8;
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s, transform 0.3s ease;
}
.gex-chat-refresh:hover {
  background: rgba(59,130,246,0.15);
  border-color: #3b82f6;
  color: #93c5fd;
}
.gex-chat-refresh.loading {
  animation: gex-spin 1s linear infinite;
  pointer-events: none;
  opacity: 0.6;
}

/* Chat messages area — FIXED height window.
   Everything scrolls internally so the page layout never grows as the
   conversation gets longer. Header (top) and input form (bottom) stay put. */
.gex-chat-messages {
  padding: 14px;
  height: 420px;              /* fixed, not max-height */
  overflow-y: auto;
  overflow-x: hidden;
  font-size: 13px;
  line-height: 1.55;
  color: #e2e8f0;
  display: flex;
  flex-direction: column;
  gap: 12px;
  /* Smooth scroll when auto-jumping to bottom on new message */
  scroll-behavior: smooth;
  /* Thin dark scrollbar — visually indicates scrollability without being loud */
  scrollbar-width: thin;
  scrollbar-color: #334155 transparent;
}
.gex-chat-messages::-webkit-scrollbar {
  width: 8px;
}
.gex-chat-messages::-webkit-scrollbar-track {
  background: transparent;
}
.gex-chat-messages::-webkit-scrollbar-thumb {
  background: #334155;
  border-radius: 4px;
}
.gex-chat-messages::-webkit-scrollbar-thumb:hover {
  background: #475569;
}

.gex-chat-placeholder {
  color: #64748b;
  font-style: italic;
  padding: 18px 8px;
  text-align: center;
}

/* Message bubbles */
.gex-chat-msg {
  display: flex;
  gap: 10px;
}
.gex-chat-msg-avatar {
  flex: 0 0 26px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  background: #1e293b;
  border: 1px solid #334155;
}
.gex-chat-msg-body {
  flex: 1;
  background: rgba(30,41,59,0.4);
  border: 1px solid rgba(51,65,85,0.35);
  border-radius: 10px;
  padding: 10px 12px;
  min-width: 0;   /* allow wrapping in flex children */
  word-break: break-word;
}
.gex-chat-msg.user .gex-chat-msg-avatar {
  background: rgba(59,130,246,0.15);
  border-color: rgba(59,130,246,0.5);
  color: #60a5fa;
}
.gex-chat-msg.user .gex-chat-msg-body {
  background: rgba(59,130,246,0.08);
  border-color: rgba(59,130,246,0.35);
}
.gex-chat-msg.loading .gex-chat-msg-body {
  color: #94a3b8;
  font-style: italic;
}
/* Markdown-ish formatting inside assistant replies */
.gex-chat-msg-body strong { color: #f1f5f9; }
.gex-chat-msg-body em     { color: #64748b; }
.gex-chat-msg-body ul     { margin: 6px 0 6px 18px; padding: 0; }
.gex-chat-msg-body li     { margin: 3px 0; }
.gex-chat-msg-body p      { margin: 6px 0; }
.gex-chat-msg-body p:first-child { margin-top: 0; }
.gex-chat-msg-body p:last-child  { margin-bottom: 0; }

/* Discord post button — admin / elite@trader.com only */
.gex-discord-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 10px 0 2px auto;
  padding: 6px 14px;
  background: #5865f2;
  color: #fff;
  border: none;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, opacity 0.15s;
  white-space: nowrap;
}
.gex-discord-btn:hover  { background: #4752c4; }
.gex-discord-btn:disabled { opacity: 0.6; cursor: default; }

.gex-chat-form {
  display: flex;
  gap: 8px;
  padding: 10px 14px;
  border-top: 1px solid rgba(30,41,59,0.8);
  background: rgba(15,23,42,0.5);
}
.gex-chat-input {
  flex: 1;
  background: #0b1220;
  border: 1px solid #1e293b;
  border-radius: 8px;
  padding: 8px 12px;
  color: #f1f5f9;
  font-size: 13px;
  outline: none;
  transition: border-color 0.15s;
}
.gex-chat-input::placeholder { color: #475569; }
.gex-chat-input:focus {
  border-color: #3b82f6;
}
.gex-chat-send {
  background: #3b82f6;
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 8px 16px;
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s;
}
.gex-chat-send:hover:not(:disabled) { background: #2563eb; }
.gex-chat-send:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.gex-chat-footer {
  padding: 8px 14px 10px;
  color: #475569;
  font-size: 10.5px;
  font-style: italic;
  text-align: center;
  border-top: 1px solid rgba(30,41,59,0.6);
}

@media (max-width: 640px) {
  .gex-chat-messages  { height: 320px; padding: 10px; }
  .gex-chat-form      { padding: 8px 10px; }
  .gex-chat-input     { font-size: 16px; } /* 16px prevents iOS auto-zoom on focus */
  .gex-chat-send      { padding: 7px 12px; }
}

/* ── iOS / Android: prevent auto-zoom on input focus ───────────────────────
   iOS Safari zooms in on any input/textarea/select whose computed font-size
   is below 16px.  Setting all interactive text fields to 16px on mobile
   eliminates the zoom entirely — no viewport meta tricks needed.
   The visual size stays reasonable because the surrounding layout scales down. */
@media (max-width: 768px) {
  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="search"],
  input[type="number"],
  input[type="tel"],
  input[type="url"],
  textarea,
  select {
    font-size: 16px !important;
  }
}

/* ── Catalyst Badge (Best Trade card) ───────────────────────────────────── */
.bt-catalyst-row {
  display: flex; align-items: flex-start; gap: 10px; flex-wrap: wrap;
  margin-bottom: 10px; padding: 8px 12px;
  border-radius: 7px; border: 1px solid rgba(255,255,255,0.07);
  background: rgba(15,23,42,0.5);
}
.bt-catalyst-badge {
  font-size: 12px; font-weight: 700; white-space: nowrap;
  padding: 2px 8px; border-radius: 4px;
}
.bt-catalyst-badge.cat-strong   { background: rgba(34,197,94,0.15);  color: #4ade80; }
.bt-catalyst-badge.cat-moderate { background: rgba(251,191,36,0.15); color: #fbbf24; }
.bt-catalyst-badge.cat-none     { background: rgba(239,68,68,0.12);  color: #f87171;
                                    animation: cat-fade-pulse 2.5s infinite; }
/* SHORT + no catalyst: muted/neutral — absence of news is not a warning on a short */
.bt-catalyst-badge.cat-neutral  { background: rgba(148,163,184,0.1); color: #64748b; }
@keyframes cat-fade-pulse {
  0%, 100% { opacity: 1; } 50% { opacity: 0.65; }
}
.bt-catalyst-note {
  font-size: 12px; color: #94a3b8; line-height: 1.5; flex: 1;
}

/* ── Active Trades Panel ─────────────────────────────────────────────────── */
.active-trades-panel { border-left: 3px solid #3b82f6; }
.active-trades-sub   { font-size: 11px; font-weight: 400; color: #94a3b8; margin-left: 6px; }
.active-trades-badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 22px; height: 22px; border-radius: 11px;
  background: #3b82f6; color: #fff; font-size: 12px; font-weight: 700;
  padding: 0 6px;
}
.active-trades-list { display: flex; flex-direction: column; gap: 12px; }

.active-trade-card {
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(15,23,42,0.6);
  padding: 14px 16px;
  position: relative;
}
/* Status-specific left border */
.at-status-open     { border-left: 4px solid #22c55e; }
.at-status-drawdown { border-left: 4px solid #f59e0b; }
.at-status-stop     { border-left: 4px solid #ef4444; background: rgba(239,68,68,0.07); }
.at-status-target   { border-left: 4px solid #22c55e; background: rgba(34,197,94,0.07); }

.at-alert {
  background: rgba(239,68,68,0.15);
  border: 1px solid rgba(239,68,68,0.4);
  border-radius: 6px;
  color: #fca5a5;
  font-size: 13px;
  font-weight: 600;
  padding: 8px 12px;
  margin-bottom: 10px;
  animation: at-pulse 2s infinite;
}
.at-status-target .at-alert {
  background: rgba(34,197,94,0.15);
  border-color: rgba(34,197,94,0.4);
  color: #86efac;
  animation: none;
}
@keyframes at-pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.7; }
}

.at-header {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-bottom: 10px;
}
.at-ticker { font-size: 18px; font-weight: 800; color: #f1f5f9; }
.at-dir    { font-size: 12px; font-weight: 700; padding: 2px 8px; border-radius: 4px; }
.at-dir.long  { background: rgba(34,197,94,0.18); color: #4ade80; }
.at-dir.short { background: rgba(239,68,68,0.18); color: #f87171; }
.at-status-badge {
  font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 4px;
}
.at-status-badge.at-status-open     { color: #4ade80; }
.at-status-badge.at-status-drawdown { color: #fbbf24; }
.at-status-badge.at-status-stop     { color: #f87171; }
.at-status-badge.at-status-target   { color: #4ade80; }
.at-time { font-size: 10.5px; color: #64748b; margin-left: auto; }

.at-levels {
  display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px;
}
.at-level-cell { display: flex; flex-direction: column; gap: 2px; min-width: 70px; }
.at-label      { font-size: 10px; color: #64748b; text-transform: uppercase; letter-spacing: 0.04em; }
.at-val        { font-size: 14px; font-weight: 600; color: #e2e8f0; }
.at-val.at-stop   { color: #f87171; }
.at-val.at-target { color: #4ade80; }
.at-level-cell.at-live .at-val { color: #93c5fd; }
.at-pct-pos { color: #4ade80; font-size: 12px; }
.at-pct-neg { color: #f87171; font-size: 12px; }

.at-close-btn {
  background: none; border: 1px solid rgba(255,255,255,0.12);
  color: #64748b; font-size: 11px; border-radius: 5px;
  padding: 4px 10px; cursor: pointer; transition: all 0.15s;
}
.at-close-btn:hover { background: rgba(239,68,68,0.12); color: #f87171; border-color: #f87171; }
.at-close-btn:disabled { opacity: 0.5; cursor: not-allowed; }

/* Pin button — on Best Trade card and setup cards */
.bt-pin-row  { margin-top: 12px; }
.setup-pin-row { margin-top: 10px; }
.pin-trade-btn {
  background: rgba(59,130,246,0.12);
  border: 1px solid rgba(59,130,246,0.35);
  color: #93c5fd;
  font-size: 12px; font-weight: 600;
  border-radius: 6px; padding: 6px 14px;
  cursor: pointer; transition: all 0.15s;
}
.pin-trade-btn:hover  { background: rgba(59,130,246,0.25); border-color: #3b82f6; color: #bfdbfe; }
.pin-trade-btn.pinned { background: rgba(34,197,94,0.15); border-color: #22c55e; color: #86efac; }
.pin-trade-btn:disabled { opacity: 0.5; cursor: not-allowed; }




/* ── Market Scan panel on mobile: fixed bottom sheet (2026-07-09) ─────────────
   The desktop panel is position:absolute under the ticker row; inside the
   mobile scroll-snap deck that anchor placed it over the SECOND slide, so
   tapping Scan appeared to do nothing until the user swiped. A fixed sheet
   is visible from every slide and thumb-reachable. */
@media (max-width: 640px) {
  .market-scan-panel {
    position: fixed;
    top: auto;
    bottom: 0;
    left: 0;
    right: 0;
    max-height: 72vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: 16px 16px 0 0;
    border-bottom: none;
    z-index: 1000;
    box-shadow: 0 -16px 48px rgba(0,0,0,.8);
    padding-bottom: env(safe-area-inset-bottom, 12px);
  }
  .scan-panel-header {
    position: sticky;
    top: 0;
    z-index: 2;
  }
}