/* ═══════════════════════════════════════════════════════════════════════════
   SwingPulse — Complete Theme & UI System
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Design Tokens (Dark) ─────────────────────────────────────────────── */
:root,
[data-theme="dark"] {
  --bg-base:       #0a0e17;
  --bg-surface:    #111827;
  --bg-elevated:   #1a2332;
  --bg-card:       #151e2d;
  --bg-hover:      #1e293b;
  --bg-input:      #0f172a;
  --border:        #1e293b;
  --border-active: #334155;
  --text-primary:  #f1f5f9;
  --text-secondary:#94a3b8;
  --text-muted:    #64748b;
  --accent:        #f97316;
  --accent-glow:   rgba(249,115,22,.25);
  --buy:           #10b981;
  --buy-soft:      rgba(16,185,129,.12);
  --buy-glow:      rgba(16,185,129,.35);
  --sell:          #ef4444;
  --sell-soft:     rgba(239,68,68,.12);
  --sell-glow:     rgba(239,68,68,.35);
  --watch:         #f59e0b;
  --watch-soft:    rgba(245,158,11,.12);
  --watch-glow:    rgba(245,158,11,.35);
  --volume:        #8b5cf6;
  --volume-soft:   rgba(139,92,246,.12);
  --volume-glow:   rgba(139,92,246,.35);
  --neutral:       #475569;
  --neutral-soft:  rgba(71,85,105,.15);
  --radius:        12px;
  --radius-sm:     8px;
  --radius-lg:     16px;
  --shadow:        0 4px 24px rgba(0,0,0,.4);
  --shadow-lg:     0 12px 48px rgba(0,0,0,.6);
  --transition:    .25s cubic-bezier(.4,0,.2,1);
  --glass:         rgba(17,24,39,.7);
  --glass-border:  rgba(255,255,255,.06);
  --scrollbar-bg:  #1e293b;
  --scrollbar-thumb:#334155;
}

/* ── Design Tokens (Midnight — deep emerald / teal noir) ────────────── */
[data-theme="midnight"] {
  --bg-base:       #020c0f;
  --bg-surface:    #061419;
  --bg-elevated:   #0c2028;
  --bg-card:       #071c22;
  --bg-hover:      #0e2d38;
  --bg-input:      #061318;
  --border:        rgba(0,210,180,.14);
  --border-active: rgba(0,230,195,.35);
  --text-primary:  #d6f5ef;
  --text-secondary:#7ec9bb;
  --text-muted:    #3d7a70;
  --accent:        #fb923c;
  --accent-glow:   rgba(251,146,60,.22);
  --buy:           #00f0a0;
  --buy-soft:      rgba(0,240,160,.13);
  --buy-glow:      rgba(0,240,160,.3);
  --sell:          #ff5f7e;
  --sell-soft:     rgba(255,95,126,.13);
  --sell-glow:     rgba(255,95,126,.3);
  --watch:         #ffd060;
  --watch-soft:    rgba(255,208,96,.13);
  --watch-glow:    rgba(255,208,96,.3);
  --volume:        #00cfff;
  --volume-soft:   rgba(0,207,255,.13);
  --volume-glow:   rgba(0,207,255,.3);
  --neutral:       #2e6560;
  --neutral-soft:  rgba(46,101,96,.18);
  --radius:        12px;
  --radius-sm:     8px;
  --radius-lg:     16px;
  --shadow:        0 4px 24px rgba(0,0,0,.55);
  --shadow-lg:     0 12px 48px rgba(0,0,0,.7);
  --transition:    .25s cubic-bezier(.4,0,.2,1);
  --glass:         rgba(6,20,25,.8);
  --glass-border:  rgba(0,229,192,.09);
  --scrollbar-bg:  #0c2028;
  --scrollbar-thumb:#0e4840;
}

/* ── Design Tokens (Light / Rainbow) ─────────────────────────────────── */
[data-theme="light"] {
  --bg-base:       #fdf9ff;
  --bg-surface:    #ffffff;
  --bg-elevated:   #f3eeff;
  --bg-card:       #ffffff;
  --bg-hover:      #ede8ff;
  --bg-input:      #f5f0ff;
  --border:        rgba(139,92,246,.18);
  --border-active: rgba(139,92,246,.45);
  --text-primary:  #1a103a;
  --text-secondary:#4b3a8a;
  --text-muted:    #9585c4;
  --accent:        #ea580c;
  --accent-glow:   rgba(234,88,12,.18);
  --buy:           #059669;
  --buy-soft:      rgba(5,150,105,.1);
  --buy-glow:      rgba(5,150,105,.25);
  --sell:          #e11d48;
  --sell-soft:     rgba(225,29,72,.1);
  --sell-glow:     rgba(225,29,72,.25);
  --watch:         #d97706;
  --watch-soft:    rgba(217,119,6,.1);
  --watch-glow:    rgba(217,119,6,.25);
  --volume:        #2563eb;
  --volume-soft:   rgba(37,99,235,.1);
  --volume-glow:   rgba(37,99,235,.25);
  --neutral:       #9585c4;
  --neutral-soft:  rgba(149,133,196,.12);
  --shadow:        0 4px 24px rgba(124,58,237,.08);
  --shadow-lg:     0 12px 48px rgba(124,58,237,.14);
  --glass:         rgba(255,255,255,.88);
  --glass-border:  rgba(139,92,246,.12);
  --scrollbar-bg:  #ede8ff;
  --scrollbar-thumb:#c4b5fd;

  /* Rainbow stripe used on topbar + bottom nav */
  --rainbow: linear-gradient(90deg,
    #f43f5e 0%, #f97316 16%, #eab308 32%,
    #22c55e 48%, #06b6d4 64%, #8b5cf6 80%, #ec4899 100%);
}

/* Soft multi-tone background — not plain white */
[data-theme="light"] body {
  background:
    radial-gradient(ellipse at 0% 0%,   rgba(251,191,36,.09)  0%, transparent 55%),
    radial-gradient(ellipse at 100% 0%,  rgba(239,68,68,.07)   0%, transparent 55%),
    radial-gradient(ellipse at 100% 100%,rgba(34,211,238,.08)  0%, transparent 55%),
    radial-gradient(ellipse at 0% 100%,  rgba(139,92,246,.09)  0%, transparent 55%),
    #fdf9ff;
  background-attachment: fixed;
}

/* Rainbow stripe under topbar */
[data-theme="light"] .topbar {
  border-bottom: none;
  box-shadow: 0 1px 0 0 rgba(139,92,246,.1);
  position: relative;
}
[data-theme="light"] .topbar::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 3px;
  background: var(--rainbow);
  border-radius: 0 0 2px 2px;
}

/* Rainbow stripe above bottom nav */
[data-theme="light"] .bottom-nav {
  border-top: none;
  box-shadow: none;
}
[data-theme="light"] .bottom-nav::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--rainbow);
}

/* Cards: subtle colored shadow + very light tinted border */
[data-theme="light"] .stat-card,
[data-theme="light"] .card {
  box-shadow: 0 2px 16px rgba(124,58,237,.07), 0 1px 3px rgba(124,58,237,.05);
  border-color: rgba(139,92,246,.14);
}

/* Heatmap cells: softer in light mode */
[data-theme="light"] .heatmap-cell {
  box-shadow: 0 1px 6px rgba(0,0,0,.06);
}

/* Scrollbar rainbow thumb on hover */
[data-theme="light"] ::-webkit-scrollbar-thumb:hover {
  background: var(--accent);
}

/* ── Reset & Base ─────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Inter', sans-serif;
  font-size: 14px;
  -webkit-font-smoothing: antialiased;
  scroll-behavior: smooth;
}

body {
  background: var(--bg-base);
  color: var(--text-primary);
  min-height: 100vh;
  min-height: 100dvh;
  overflow-x: hidden;
  transition: background var(--transition), color var(--transition);
}

/* Scrollbar */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--scrollbar-bg); }
::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); border-radius: 3px; }

/* ── Typography ───────────────────────────────────────────────────────── */
h1, h2, h3, h4 { font-weight: 600; letter-spacing: -.01em; }
h3 { font-size: .9rem; color: var(--text-secondary); display: flex; align-items: center; gap: 6px; }

/* ── Top Bar ──────────────────────────────────────────────────────────── */
.topbar {
  position: sticky;
  top: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 56px;
  padding: 0 16px;
  background: var(--glass);
  backdrop-filter: blur(16px) saturate(1.5);
  -webkit-backdrop-filter: blur(16px) saturate(1.5);
  border-bottom: 1px solid var(--glass-border);
  --pulse-color: var(--accent);
}

/* Sentiment-driven (keeps variable for the badge) */
.topbar.sentiment-bullish { --pulse-color: var(--buy); }
.topbar.sentiment-bearish { --pulse-color: var(--sell); }
.topbar.sentiment-mixed   { --pulse-color: var(--watch); }

/* Sentiment dot in topbar */
.topbar-sentiment {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: .78rem;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 20px;
  background: color-mix(in srgb, var(--pulse-color) 12%, transparent);
  color: var(--pulse-color);
  letter-spacing: .02em;
}
.topbar-sentiment-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--pulse-color);
  animation: dot-heartbeat 3.5s ease-in-out infinite;
}
@keyframes dot-heartbeat {
  0%, 60%, 100% { transform: scale(1); opacity: .5; }
  14% { transform: scale(1.5); opacity: 1; }
  28% { transform: scale(1); opacity: .6; }
  42% { transform: scale(1.35); opacity: 1; }
}

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

.logo { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 1.1rem; flex-shrink: 0; }
.logo-icon {
  width: 28px; height: 28px;
  background: linear-gradient(135deg, var(--buy), var(--accent));
  border-radius: 8px;
  position: relative;
  overflow: hidden;
}
.logo-icon::after {
  content: '';
  position: absolute;
  inset: 4px;
  background: var(--bg-surface);
  border-radius: 4px;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpolyline points='2,14 7,8 11,12 18,5' stroke='white' stroke-width='2.5' fill='none'/%3E%3C/svg%3E") center/80% no-repeat;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpolyline points='2,14 7,8 11,12 18,5' stroke='white' stroke-width='2.5' fill='none'/%3E%3C/svg%3E") center/80% no-repeat;
}

.date-badge {
  font-size: .75rem;
  font-weight: 500;
  padding: 4px 10px;
  background: var(--accent-glow);
  color: var(--accent);
  border-radius: 20px;
  letter-spacing: .02em;
  white-space: nowrap;
}

/* ── Topbar mobile: two-row layout ─────────────────────────────────── */
@media (max-width: 600px) {
  .topbar {
    flex-wrap: wrap;
    height: auto;
    padding: 8px 12px 0;
    gap: 0;
  }
  /* Row 1: left takes all space, right stays right */
  .topbar-left  { order: 1; flex: 1; gap: 8px; padding-bottom: 8px; }
  .topbar-right { order: 2; gap: 8px; padding-bottom: 8px; }
  /* Row 2: tf-toggle spans full width */
  .topbar-center {
    order: 3;
    width: 100%;
    border-top: 1px solid var(--glass-border);
    padding: 6px 0 8px;
  }
  .topbar-center .tf-toggle {
    width: 100%;
    border-radius: 10px;
  }
  .topbar-center .tf-btn {
    flex: 1;
    padding: 8px 0;
    font-size: .82rem;
    text-align: center;
  }
  .logo-text { display: none; }
  .date-badge { font-size: .75rem; padding: 6px 10px; }
  .icon-btn { width: 34px; height: 34px; }
}

/* Timeframe toggle (D / W) */
.tf-toggle {
  display: flex;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--bg-input);
  padding: 4px;
  gap: 3px;
}

.tf-btn {
  border: none;
  background: transparent;
  color: var(--text-muted);
  font-size: .78rem;
  font-weight: 800;
  padding: 6px 14px;
  cursor: pointer;
  border-radius: 8px;
  transition: all .22s cubic-bezier(.34,1.56,.64,1);
  letter-spacing: .06em;
  position: relative;
  overflow: hidden;
}

/* Subtle shimmer layer */
.tf-btn::before {
  content: '';
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity .2s;
  border-radius: 8px;
}

/* Each TF gets its own color personality */
.tf-btn[data-tf="4H"]  { --tf-color: #22d3ee; --tf-glow: rgba(34,211,238,.35); }
.tf-btn[data-tf="D"]   { --tf-color: #818cf8; --tf-glow: rgba(129,140,248,.35); }
.tf-btn[data-tf="W"]   { --tf-color: #34d399; --tf-glow: rgba(52,211,153,.35); }
.tf-btn[data-tf="M"]   { --tf-color: #fbbf24; --tf-glow: rgba(251,191,36,.35);  }

.tf-btn:hover:not(.active) {
  color: var(--tf-color);
  background: color-mix(in srgb, var(--tf-color) 10%, transparent);
  transform: translateY(-1px);
}

.tf-btn.active {
  background: var(--tf-color);
  color: #0a0a0f;
  font-weight: 900;
  box-shadow: 0 0 14px var(--tf-glow), 0 2px 6px rgba(0,0,0,.3);
  transform: translateY(-1px) scale(1.04);
  animation: tf-pulse 2.8s ease-in-out infinite;
}

@keyframes tf-pulse {
  0%, 100% { box-shadow: 0 0 14px var(--tf-glow), 0 2px 6px rgba(0,0,0,.3); }
  50%       { box-shadow: 0 0 24px var(--tf-glow), 0 2px 8px rgba(0,0,0,.3); }
}

.icon-btn {
  width: 36px; height: 36px;
  border: none;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-secondary);
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: all var(--transition);
}
.icon-btn:hover { background: var(--bg-hover); color: var(--text-primary); }
.icon-btn:active { transform: scale(.92); }

#refreshBtn.spinning svg { animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* Dark: show moon (click to go to midnight) */
.theme-toggle .icon-sun { display: none; }
.theme-toggle .icon-moon { display: block; }
.theme-toggle .icon-aurora { display: none; }
/* Midnight: show aurora (click to go to light) */
[data-theme="midnight"] .theme-toggle .icon-sun { display: none; }
[data-theme="midnight"] .theme-toggle .icon-moon { display: none; }
[data-theme="midnight"] .theme-toggle .icon-aurora { display: block; }
/* Light: show sun (click to go to dark) */
[data-theme="light"] .theme-toggle .icon-sun { display: block; }
[data-theme="light"] .theme-toggle .icon-moon { display: none; }
[data-theme="light"] .theme-toggle .icon-aurora { display: none; }

/* ── Main Content ─────────────────────────────────────────────────────── */
.content {
  padding: 16px 16px 80px;
  max-width: 1400px;
  margin: 0 auto;
}

@media (min-width: 768px) { .content { padding: 24px 24px 32px; } }

/* ── Tab Panes ────────────────────────────────────────────────────────── */
.tab-pane {
  display: none;
  animation: fadeIn .35s ease;
}
.tab-pane.active { display: block; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ── Bottom Nav ───────────────────────────────────────────────────────── */
.bottom-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 100;
  display: flex;
  height: 64px;
  padding-bottom: env(safe-area-inset-bottom, 0);
  background: var(--glass);
  backdrop-filter: blur(16px) saturate(1.5);
  -webkit-backdrop-filter: blur(16px) saturate(1.5);
  border-top: 1px solid var(--glass-border);
}

.nav-tab {
  flex: 1;
  border: none;
  background: transparent;
  color: var(--text-muted);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  cursor: pointer;
  font-size: .65rem;
  font-weight: 500;
  transition: all var(--transition);
  position: relative;
}
.nav-tab span { transition: color var(--transition); }
.nav-tab.active { color: var(--accent); }
.nav-tab.active::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 32px;
  height: 3px;
  border-radius: 0 0 3px 3px;
  background: var(--accent);
  animation: slideDown .3s ease;
}
@keyframes slideDown { from { transform: translateX(-50%) scaleX(0); } to { transform: translateX(-50%) scaleX(1); } }

@media (min-width: 768px) {
  .bottom-nav {
    top: 56px; bottom: auto;
    height: 48px;
    border-top: none;
    border-bottom: 1px solid var(--glass-border);
    justify-content: center;
    gap: 4px;
    padding: 0 16px;
  }
  .nav-tab {
    flex: none;
    flex-direction: row;
    gap: 6px;
    padding: 0 20px;
    font-size: .8rem;
    border-radius: var(--radius-sm);
  }
  .nav-tab.active::before {
    top: auto; bottom: 0;
    border-radius: 3px 3px 0 0;
  }
  .content { padding-top: 72px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Market Pulse Card  (new dashboard hero — replaces the old banner)
   ═══════════════════════════════════════════════════════════════════════════ */
.mp-pulse-card {
  padding: 0;
  overflow: hidden;
  position: relative;
  --mp-color: var(--accent);
  animation: heartbeat 3.5s ease-in-out infinite;
}
.mp-pulse-card::before {
  content: '';
  position: absolute;
  top: -50%;
  right: -20%;
  width: 200px;
  height: 200px;
  background: radial-gradient(circle, color-mix(in srgb, var(--mp-color) 15%, transparent), transparent 70%);
  pointer-events: none;
  animation: heartbeat-glow 3.5s ease-in-out infinite;
}
.mp-pulse-card.mp-bullish { --mp-color: var(--buy);   border-color: rgba(16,185,129,.25); }
.mp-pulse-card.mp-bearish { --mp-color: var(--sell);  border-color: rgba(239,68,68,.25); }
.mp-pulse-card.mp-mixed   { --mp-color: var(--watch); border-color: rgba(245,158,11,.25); }

.mp-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px 6px;
}
.mp-card-title {
  font-size: .64rem;
  font-weight: 700;
  letter-spacing: .1em;
  color: var(--text-muted);
  text-transform: uppercase;
}
.mp-card-hint {
  display: block;
  font-size: .58rem;
  color: var(--text-muted);
  margin-top: 1px;
  opacity: .7;
}
.mp-card-body {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 16px 12px;
}
.mp-gauge-wrap {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.mp-gauge-wrap .gauge-svg {
  width: 170px;
  height: auto;
}
.mp-breakdown {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
}
.mp-bd-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.mp-bd-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.mp-bd-lbl {
  flex: 1;
  font-size: .8rem;
  color: var(--text-secondary);
  white-space: nowrap;
}
.mp-bd-val {
  font-size: 1.2rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
/* Interactive filter rows */
.mp-filter-row {
  cursor: pointer;
  border-radius: var(--radius-sm);
  padding: 4px 6px;
  margin: 0 -6px;
  transition: background var(--transition);
  user-select: none;
}
.mp-filter-row:hover { background: rgba(255,255,255,.05); }
.mp-filter-row.mp-bd-active {
  background: rgba(255,255,255,.07);
  box-shadow: inset 3px 0 0 var(--border-active), inset 0 0 0 1px rgba(255,255,255,.1);
  border-radius: var(--radius-sm);
}
.mp-filter-row.mp-bd-active .mp-bd-lbl {
  color: var(--text-primary);
  font-weight: 600;
}
.mp-filter-row.mp-bd-active .mp-bd-val {
  opacity: 1;
  text-shadow: 0 0 12px currentColor;
}

/* Alignment row separator */
.mp-align-row {
  margin-top: 2px;
  padding-top: 8px;
  border-top: 1px solid var(--border);
}

.mp-score-track {
  height: 4px;
  background: var(--border);
}
.mp-score-fill {
  height: 100%;
  background: linear-gradient(90deg,#ef4444 0%,#f97316 25%,#f59e0b 50%,#6366f1 75%,#10b981 100%);
  width: 0%;
  transition: width .9s cubic-bezier(.4,0,.2,1);
  border-radius: 0 2px 2px 0;
}

/* ═══════════════════════════════════════════════════════════════════════════
   Today's Opportunities  (horizontal scroll card row)
   ═══════════════════════════════════════════════════════════════════════════ */
.opp-section { margin-bottom: 4px; }

.section-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 2px 8px;
}
.section-title {
  font-size: .9rem;
  font-weight: 700;
  color: var(--text-primary);
}
.see-all-btn {
  background: none;
  border: none;
  color: var(--accent);
  font-size: .78rem;
  font-weight: 600;
  cursor: pointer;
  padding: 4px 0;
  opacity: .9;
  transition: opacity var(--transition);
}
.see-all-btn:hover { opacity: 1; }

.opp-scroll {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  padding-bottom: 6px;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}
.opp-scroll::-webkit-scrollbar { display: none; }

.opp-loading, .opp-empty {
  font-size: .8rem;
  color: var(--text-muted);
  padding: 16px 4px;
}

.opp-card {
  flex: 0 0 155px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  cursor: pointer;
  scroll-snap-align: start;
  transition: transform var(--transition), border-color var(--transition), box-shadow var(--transition);
  display: flex;
  flex-direction: column;
}
.opp-card:hover {
  transform: translateY(-2px);
  border-color: var(--border-active);
  box-shadow: 0 8px 24px rgba(0,0,0,.3);
}
.opp-card:active { transform: translateY(0); }

.opp-card-strip { height: 4px; flex-shrink: 0; }
.opp-card-buy     .opp-card-strip { background: var(--buy); }
.opp-card-sell    .opp-card-strip { background: var(--sell); }
.opp-card-neutral .opp-card-strip { background: var(--text-muted); }

.opp-card-body {
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.opp-name {
  font-size: .88rem;
  font-weight: 700;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.opp-group {
  font-size: .62rem;
  color: var(--text-muted);
  margin-bottom: 7px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.opp-badges {
  display: flex;
  gap: 3px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}
.opp-dir-badge {
  font-size: .55rem;
  font-weight: 800;
  padding: 1px 5px;
  border-radius: 4px;
  letter-spacing: .04em;
}
.opp-dir-buy  { background: var(--buy-soft);  color: var(--buy);  }
.opp-dir-sell { background: var(--sell-soft); color: var(--sell); }

.opp-price {
  font-size: .95rem;
  font-weight: 700;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}
.opp-change {
  font-size: .64rem;
  margin: 2px 0 8px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.opp-change.up { color: var(--buy); }
.opp-change.dn { color: var(--sell); }

.opp-sparkbars {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  height: 22px;
  margin-top: auto;
}
.opp-bar {
  flex: 1;
  border-radius: 2px 2px 0 0;
  background: var(--border-active);
  opacity: .35;
}
.opp-bar.opp-bar-filled          { opacity: 1; }
.opp-bar.opp-bar-filled.opp-bar-buy     { background: var(--buy); }
.opp-bar.opp-bar-filled.opp-bar-sell    { background: var(--sell); }
.opp-bar.opp-bar-filled.opp-bar-neutral { background: var(--text-muted); }

/* ── Market Pulse Banner — heartbeat border ───────────────────────── */
.market-pulse {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px;
  margin-bottom: 16px;
  border-radius: var(--radius-lg);
  background: linear-gradient(135deg, var(--bg-elevated), var(--bg-surface));
  border: 2px solid var(--border);
  position: relative;
  overflow: hidden;
  --mp-color: var(--accent);
}
.market-pulse.mp-bullish { --mp-color: var(--buy); }
.market-pulse.mp-bearish { --mp-color: var(--sell); }
.market-pulse.mp-mixed   { --mp-color: var(--watch); }

/* Heartbeat glow — double-beat then rest, like a real heart */
.market-pulse {
  animation: heartbeat 3.5s ease-in-out infinite;
}
@keyframes heartbeat {
  0%  {
    border-color: color-mix(in srgb, var(--mp-color) 30%, var(--border));
    box-shadow: 0 0 0px transparent;
  }
  /* first beat — quick strong punch */
  14% {
    border-color: var(--mp-color);
    box-shadow:
      0 0 18px color-mix(in srgb, var(--mp-color) 50%, transparent),
      0 0 6px color-mix(in srgb, var(--mp-color) 30%, transparent),
      inset 0 0 12px color-mix(in srgb, var(--mp-color) 10%, transparent);
  }
  /* brief dip between beats */
  28% {
    border-color: color-mix(in srgb, var(--mp-color) 50%, var(--border));
    box-shadow: 0 0 4px color-mix(in srgb, var(--mp-color) 15%, transparent);
  }
  /* second beat — slightly softer */
  42% {
    border-color: var(--mp-color);
    box-shadow:
      0 0 22px color-mix(in srgb, var(--mp-color) 45%, transparent),
      0 0 8px color-mix(in srgb, var(--mp-color) 25%, transparent),
      inset 0 0 14px color-mix(in srgb, var(--mp-color) 8%, transparent);
  }
  /* rest period */
  60%, 100% {
    border-color: color-mix(in srgb, var(--mp-color) 30%, var(--border));
    box-shadow: 0 0 0px transparent;
  }
}

/* Radial glow behind banner that also heartbeats */
.market-pulse::before {
  content: '';
  position: absolute;
  top: -50%;
  right: -20%;
  width: 200px;
  height: 200px;
  background: radial-gradient(circle, color-mix(in srgb, var(--mp-color) 15%, transparent), transparent 70%);
  pointer-events: none;
  animation: heartbeat-glow 3.5s ease-in-out infinite;
}
@keyframes heartbeat-glow {
  0%, 60%, 100% { opacity: .3; transform: scale(1); }
  14% { opacity: 1; transform: scale(1.1); }
  28% { opacity: .5; transform: scale(1); }
  42% { opacity: .9; transform: scale(1.08); }
}

/* Hide old rings */
.pulse-ring, .pulse-ring-2 { display: none; }

.pulse-inner { display: flex; align-items: center; gap: 12px; position: relative; z-index: 1; }
.pulse-info { display: flex; flex-direction: column; }
.pulse-label { font-size: .7rem; text-transform: uppercase; letter-spacing: .08em; color: var(--text-muted); }
.pulse-value { font-size: 1.1rem; font-weight: 700; }
.pulse-value.bullish { color: var(--buy); }
.pulse-value.bearish { color: var(--sell); }
.pulse-value.mixed { color: var(--watch); }

.pulse-stats {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: .78rem;
  color: var(--text-secondary);
  position: relative;
  z-index: 1;
}
.pulse-divider { opacity: .3; }

/* Trend pills — clickable filters */
#pulseUptrend, #pulseDowntrend, #pulseNeutral {
  padding: 3px 10px;
  border-radius: 20px;
  border: 1px solid transparent;
  transition: all .18s cubic-bezier(.4,0,.2,1);
  cursor: pointer;
  user-select: none;
}
#pulseUptrend:hover    { color: var(--buy);  border-color: var(--buy);  background: rgba(16,185,129,.08); }
#pulseDowntrend:hover  { color: var(--sell); border-color: var(--sell); background: rgba(239,68,68,.08); }
#pulseNeutral:hover    { color: var(--text-primary); border-color: var(--border-active); background: var(--bg-hover); }
#pulseUptrend.pulse-stat-active   { color: var(--buy);  border-color: var(--buy);  background: rgba(16,185,129,.12); box-shadow: 0 0 12px var(--buy-glow); }
#pulseDowntrend.pulse-stat-active { color: var(--sell); border-color: var(--sell); background: rgba(239,68,68,.12);  box-shadow: 0 0 12px var(--sell-glow); }
#pulseNeutral.pulse-stat-active   { color: var(--text-primary); border-color: var(--accent); background: var(--accent-glow); box-shadow: 0 0 12px rgba(99,102,241,.3); }
.pulse-alignment { transition: all .18s cubic-bezier(.4,0,.2,1); cursor: pointer; user-select: none; }
.pulse-alignment:hover { opacity: .8; }
.pulse-alignment.pulse-stat-active { box-shadow: 0 0 0 2px var(--accent), 0 0 12px rgba(99,102,241,.3); }

@media (max-width: 580px) {
  .market-pulse { flex-direction: column; gap: 12px; text-align: center; }
  .pulse-inner { justify-content: center; }
}

/* ── Stat Cards ───────────────────────────────────────────────────────── */
.stat-cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin-bottom: 16px;
}
@media (min-width: 768px) { .stat-cards { grid-template-columns: repeat(4, 1fr); gap: 16px; } }

.stat-card {
  position: relative;
  padding: 10px 12px;
  border-radius: var(--radius);
  background: var(--bg-card);
  border: 1px solid var(--border);
  overflow: hidden;
  transition: all var(--transition);
  cursor: pointer;
  user-select: none;
}
.stat-card:hover { transform: translateY(-2px); border-color: var(--border-active); }
.stat-card.stat-active {
  border-color: var(--accent);
  box-shadow: 0 0 12px var(--accent-glow);
}
.stat-buy.stat-active { border-color: var(--buy); box-shadow: 0 0 12px var(--buy-glow); }
.stat-sell.stat-active { border-color: var(--sell); box-shadow: 0 0 12px var(--sell-glow); }
.stat-watch.stat-active { border-color: var(--watch); box-shadow: 0 0 12px var(--watch-glow); }
.stat-volume.stat-active { border-color: var(--volume); box-shadow: 0 0 12px var(--volume-glow); }
.stat-squeeze.stat-active { border-color: #fbbf24; box-shadow: 0 0 12px rgba(251,191,36,.2); }
.stat-highconf.stat-active { border-color: #6366f1; box-shadow: 0 0 12px rgba(99,102,241,.2); }

.stat-card-glow {
  position: absolute;
  top: -20px;
  right: -20px;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  filter: blur(24px);
  pointer-events: none;
  transition: opacity var(--transition);
}
.stat-buy .stat-card-glow { background: var(--buy-glow); }
.stat-sell .stat-card-glow { background: var(--sell-glow); }
.stat-watch .stat-card-glow { background: var(--watch-glow); }
.stat-volume .stat-card-glow { background: var(--volume-glow); }
.stat-squeeze .stat-card-glow { background: rgba(251,191,36,.08); }
.stat-highconf .stat-card-glow { background: rgba(99,102,241,.08); }

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

.stat-icon-wrap {
  width: 24px; height: 24px;
  border-radius: var(--radius-sm);
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
.stat-icon-wrap svg { width: 14px; height: 14px; }
.buy-icon { background: var(--buy-soft); color: var(--buy); }
.sell-icon { background: var(--sell-soft); color: var(--sell); }
.watch-icon { background: var(--watch-soft); color: var(--watch); }
.volume-icon { background: var(--volume-soft); color: var(--volume); }
.squeeze-icon { background: rgba(251,191,36,.12); color: #fbbf24; }
.highconf-icon { background: rgba(99,102,241,.12); color: #6366f1; }

.stat-label { font-size: .68rem; color: var(--text-muted); font-weight: 500; }
.stat-number {
  font-size: 1.35rem;
  font-weight: 700;
  line-height: 1;
  margin-bottom: 6px;
  font-variant-numeric: tabular-nums;
}
.stat-buy .stat-number { color: var(--buy); }
.stat-sell .stat-number { color: var(--sell); }
.stat-watch .stat-number { color: var(--watch); }
.stat-volume .stat-number { color: var(--volume); }
.stat-squeeze .stat-number { color: #fbbf24; }
.stat-highconf .stat-number { color: #6366f1; }

.stat-bar {
  height: 3px;
  background: var(--border);
  border-radius: 2px;
  overflow: hidden;
}
.stat-bar-fill {
  height: 100%;
  border-radius: 2px;
  width: 0%;
  transition: width .8s cubic-bezier(.4,0,.2,1);
}
.buy-fill { background: var(--buy); }
.sell-fill { background: var(--sell); }
.watch-fill { background: var(--watch); }
.volume-fill { background: var(--volume); }
.squeeze-fill { background: #fbbf24; }
.highconf-fill { background: #6366f1; }

/* ── Cards ────────────────────────────────────────────────────────────── */
.card {
  background: var(--bg-card);
  border-radius: var(--radius);
  border: 1px solid var(--border);
  padding: 16px;
  margin-bottom: 16px;
  transition: all var(--transition);
}

.card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
  flex-wrap: wrap;
  gap: 8px;
}
.chart-tf-badge {
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: 20px;
  background: var(--accent-glow);
  color: var(--accent);
  border: 1px solid var(--accent);
  opacity: 0;
  transition: opacity .2s;
}
.chart-tf-badge:not(:empty) { opacity: 1; }
.chart-tf-badge[data-tf="D"]  { background: rgba(99,102,241,.12); color: var(--accent); border-color: var(--accent); }
.chart-tf-badge[data-tf="4H"] { background: rgba(251,191,36,.12); color: var(--watch); border-color: var(--watch); }
.chart-tf-badge[data-tf="W"]  { background: rgba(16,185,129,.12); color: var(--buy);   border-color: var(--buy); }
.chart-tf-badge[data-tf="M"]  { background: rgba(251,113,133,.12); color: var(--sell); border-color: var(--sell); }
.card-icon { display: inline-flex; margin-right: 2px; }
.card-icon.turning { color: var(--watch); }
.card-icon.watch { color: var(--accent); }
.card-icon.level { color: var(--buy); }
.card-icon.volume { color: var(--volume); }

/* ── Charts Row ───────────────────────────────────────────────────────── */
.charts-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  margin-bottom: 16px;
}
@media (min-width: 768px) { .charts-row { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); } }

.chart-card { min-height: 260px; }
.chart-wrap { position: relative; height: 200px; }
.chart-wrap canvas { width: 100% !important; height: 100% !important; }

/* chart sub-row: hint + legend side by side */
.chart-sub-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 8px;
  flex-wrap: wrap;
  gap: 6px;
}
.chart-hint {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: .65rem;
  color: var(--text-muted);
}
.chart-hint svg { color: var(--accent); flex-shrink: 0; }
.chart-legend {
  display: flex;
  gap: 10px;
}
.cl-item {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: .65rem;
  color: var(--text-secondary);
}
.cl-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
}

/* ── Market Strength Gauge ────────────────────────────────────────────── */
.gauge-card { min-height: 280px; }
.gauge-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 4px 0 0;
}
.gauge-svg {
  width: 190px;
  height: auto;
  overflow: visible;
}
.gauge-sublabel {
  font-size: .68rem;
  color: var(--text-muted);
  margin-top: 4px;
  text-align: center;
}
.gauge-breakdown {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 6px;
  width: 100%;
  margin-top: 12px;
}
.gb-item {
  background: var(--bg-elevated);
  border-radius: var(--radius-sm);
  padding: 6px 8px;
  text-align: center;
  border: 1px solid var(--border);
}
.gb-val {
  font-size: 1rem;
  font-weight: 800;
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
}
.gb-lbl {
  font-size: .58rem;
  color: var(--text-muted);
  margin-top: 1px;
}

/* ── Sector Drill-down ────────────────────────────────────────────────── */
.sector-drill {
  margin-top: 10px;
  background: var(--bg-elevated);
  border: 1px solid var(--border-active);
  border-radius: var(--radius-sm);
  padding: 8px 10px;
  animation: fadeIn .2s ease;
}
@keyframes fadeIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.sd-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 7px;
}
.sd-name {
  font-size: .75rem;
  font-weight: 700;
  color: var(--accent);
}
.sd-close {
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  font-size: .75rem;
  padding: 0 2px;
  line-height: 1;
}
.sd-close:hover { color: var(--text-primary); }
.sd-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}
.sd-chip {
  padding: 2px 9px;
  border-radius: 8px;
  font-size: .65rem;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid transparent;
  transition: transform .1s, border-color .15s;
}
.sd-chip:hover { transform: scale(1.05); }
.sd-chip-buy  { background: var(--buy-soft);  color: var(--buy);  border-color: rgba(16,185,129,.25); }
.sd-chip-sell { background: var(--sell-soft); color: var(--sell); border-color: rgba(239,68,68,.22); }

/* ── Heatmap ──────────────────────────────────────────────────────────── */
.hm-trend-clear {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: .72rem;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 20px;
  background: var(--accent-glow);
  border: 1px solid var(--accent);
  color: var(--text-primary);
  cursor: pointer;
  user-select: none;
  transition: all .15s;
  white-space: nowrap;
}
.hm-trend-clear:hover { background: rgba(99,102,241,.35); }
.heatmap-legend { display: flex; gap: 12px; flex-wrap: wrap; }
.legend-item { display: flex; align-items: center; gap: 5px; font-size: .72rem; color: var(--text-muted); cursor: pointer; padding: 3px 7px; border-radius: 6px; border: 1px solid transparent; transition: all .15s; user-select: none; }
.legend-item:hover { color: var(--text-primary); background: var(--bg-card); border-color: var(--border); }
.legend-item.legend-active { color: var(--text-primary); background: var(--bg-card); border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.legend-dot { width: 10px; height: 10px; border-radius: 3px; flex-shrink: 0; }
.buy-dot { background: var(--buy); }
.sell-dot { background: var(--sell); }
.neutral-dot { background: var(--neutral); }
.watch-dot { background: var(--watch); }

/* Heatmap dimmed cells (stat card rearrange — non-matching pushed to back) */
.heatmap-cell.hm-dimmed { opacity: .28; transform: scale(.97); filter: saturate(.3); pointer-events: none; }
.heatmap-cell.hm-dimmed:hover { transform: scale(.97); }

/* Heatmap lifted state — section jumps up next to stat cards */
#heatmapCard.heatmap-lifted {
  animation: hmLift .25s ease;
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent), 0 8px 32px rgba(0,0,0,.35);
}
@keyframes hmLift {
  from { opacity: .6; transform: translateY(-6px); }
  to   { opacity: 1;  transform: translateY(0); }
}

.heatmap-filters {
  display: flex;
  gap: 6px;
  margin-bottom: 12px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 4px;
}
.heatmap-filter-btn {
  border: none;
  padding: 5px 12px;
  border-radius: 20px;
  font-size: .72rem;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  background: var(--bg-hover);
  color: var(--text-secondary);
  transition: all var(--transition);
}
.heatmap-filter-btn.active { background: var(--accent); color: #fff; }

.heatmap-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
  gap: 6px;
}

.heatmap-cell {
  position: relative;
  aspect-ratio: 1.6;
  border-radius: var(--radius-sm);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: .68rem;
  font-weight: 600;
  transition: all var(--transition);
  border: 1px solid transparent;
  overflow: hidden;
}
.heatmap-cell:hover { transform: scale(1.05); z-index: 2; border-color: var(--text-muted); }
.heatmap-cell .cell-name { opacity: .9; }
.heatmap-cell .cell-signal {
  font-size: .58rem;
  font-weight: 700;
  opacity: .7;
  margin-top: 2px;
}

.heatmap-cell.hm-buy { background: var(--buy-soft); color: var(--buy); border-color: var(--buy-soft); }
.heatmap-cell.hm-sell { background: var(--sell-soft); color: var(--sell); border-color: var(--sell-soft); }
.heatmap-cell.hm-neutral { background: var(--neutral-soft); color: var(--neutral); }
.heatmap-cell.hm-watch { background: var(--watch-soft); color: var(--watch); border-color: var(--watch-soft); }

.heatmap-cell.hm-buy.hm-primary {
  background: linear-gradient(135deg, var(--buy-soft), var(--buy-glow));
  box-shadow: 0 0 12px var(--buy-glow);
}
.heatmap-cell.hm-sell.hm-primary {
  background: linear-gradient(135deg, var(--sell-soft), var(--sell-glow));
  box-shadow: 0 0 12px var(--sell-glow);
}

/* ── Signal Feed ──────────────────────────────────────────────────────── */
.signal-feed {
  display: grid;
  gap: 8px;
  max-height: 400px;
  overflow-y: auto;
}

.signal-feed-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border-radius: var(--radius-sm);
  background: var(--bg-elevated);
  cursor: pointer;
  transition: all var(--transition);
  border-left: 3px solid transparent;
}
.signal-feed-item:hover { background: var(--bg-hover); }
.signal-feed-item.feed-buy { border-left-color: var(--buy); }
.signal-feed-item.feed-sell { border-left-color: var(--sell); }

.feed-badge {
  font-size: .65rem;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 4px;
  letter-spacing: .04em;
}
.feed-badge.badge-p1 { background: linear-gradient(135deg, var(--buy), #059669); color: #fff; }
.feed-badge.badge-p2 { background: var(--buy); color: #fff; }
.feed-badge.badge-p3 { background: var(--buy-soft); color: var(--buy); }
.feed-badge.badge-p4 { background: var(--sell); color: #fff; }
.feed-badge.badge-sell-p1 { background: linear-gradient(135deg, var(--sell), #b91c1c); color: #fff; }
.feed-badge.badge-sell-p2 { background: var(--sell); color: #fff; }
.feed-badge.badge-secondary { background: var(--neutral-soft); color: var(--text-secondary); }

.feed-info { flex: 1; min-width: 0; }
.feed-name { font-weight: 600; font-size: .85rem; }
.feed-detail { font-size: .72rem; color: var(--text-muted); margin-top: 2px; }
.feed-group { font-size: .65rem; color: var(--text-muted); padding: 2px 8px; background: var(--bg-hover); border-radius: 10px; }
.feed-empty { text-align: center; padding: 32px; color: var(--text-muted); font-size: .85rem; }

/* ── Signals Tab ──────────────────────────────────────────────────────── */
.filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 16px;
  align-items: center;
}

.search-wrap {
  flex: 1;
  min-width: 200px;
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 8px 12px;
  transition: border-color var(--transition);
  color: var(--text-muted);
}
.search-wrap:focus-within { border-color: var(--accent); }
.search-input {
  flex: 1;
  border: none;
  background: transparent;
  color: var(--text-primary);
  font-size: .85rem;
  outline: none;
}
.search-input::placeholder { color: var(--text-muted); }

.select-input {
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--bg-input);
  color: var(--text-primary);
  font-size: .82rem;
  outline: none;
  cursor: pointer;
  transition: border-color var(--transition);
}
.select-input:focus { border-color: var(--accent); }

.filter-chips { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 2px; }
.chip {
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text-secondary);
  padding: 5px 14px;
  border-radius: 20px;
  font-size: .72rem;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  transition: all var(--transition);
}
.chip:hover { border-color: var(--accent); color: var(--accent); }
.chip.active { background: var(--accent); color: #fff; border-color: var(--accent); }
.chip-buy.active { background: var(--buy); border-color: var(--buy); }
.chip-sell.active { background: var(--sell); border-color: var(--sell); }
.chip-squeeze { background: rgba(251,191,36,.12); color: #fbbf24; }
.chip-squeeze.active { background: #fbbf24; color: #000; }
.chip-best { background: rgba(99,102,241,.12); color: var(--accent); }
.chip-best.active { background: var(--accent); color: #fff; }
.chip-today { background: rgba(16,185,129,.1); color: var(--buy); }
.chip-today.active { background: var(--buy); color: #fff; }

/* ── Signal Legend ────────────────────────────────────────────────────── */
.signal-legend {
  display: grid;
  gap: 6px;
  padding: 12px 14px;
  margin-bottom: 12px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: .78rem;
  color: var(--text-secondary);
  line-height: 1.5;
}
.sig-def {
  display: flex;
  align-items: center;
  gap: 8px;
}
.sig-def .feed-badge { flex-shrink: 0; }
.sig-def .badge-confidence { flex-shrink: 0; }
.sig-def .badge-alignment { flex-shrink: 0; }
.sig-legend-group { margin-bottom: 12px; }
.sig-legend-group:last-child { margin-bottom: 0; }
.sig-legend-title { font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--text-muted); margin-bottom: 6px; padding-bottom: 4px; border-bottom: 1px solid var(--border); }

/* ── Volume Spike Indicator (Signal Rows) ────────────────────────────── */
.vol-spike-indicator {
  display: inline-flex; align-items: center;
  font-size: .55rem; font-weight: 700; padding: 1px 5px; border-radius: 3px;
  background: var(--volume-soft); color: var(--volume);
  letter-spacing: .03em;
}

/* ── Signal Summary Bar ───────────────────────────────────────────────── */
.signal-summary {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding: 6px 0 10px;
  font-size: .72rem;
}
/* Restore horizontal padding in pane-signals (which negates .content padding) */
#pane-signals .signal-summary { padding-left: 16px; padding-right: 16px; }
#pane-signals .signal-legend  { margin-left: 16px;  margin-right: 16px; }
.sig-sum-total { color: var(--text-muted); font-weight: 500; }
.sig-sum-item {
  padding: 2px 8px;
  border-radius: 20px;
  font-weight: 600;
}
.sig-sum-buy   { background: var(--buy-soft);  color: var(--buy); }
.sig-sum-sell  { background: var(--sell-soft); color: var(--sell); }
.sig-sum-sqz   { background: rgba(251,191,36,.12); color: #fbbf24; }
.sig-sum-today { background: var(--accent-glow); color: var(--accent); }

/* ── Signal age badge ─────────────────────────────────────────────────── */
.sig-age {
  font-size: .62rem;
  padding: 1px 6px;
  border-radius: 10px;
  background: var(--bg-input);
  color: var(--text-muted);
  font-weight: 500;
}
.sig-age-today {
  background: rgba(16,185,129,.12);
  color: var(--buy);
  font-weight: 700;
}

/* ── Feature 6: Signal Age Decay Classes ────────────────────────────── */
.age-fresh  { background: rgba(16,185,129,.15);  color: var(--buy);   font-weight: 700; }
.age-1d     { background: rgba(16,185,129,.08);  color: var(--buy);   font-weight: 600; opacity: .9; }
.age-aging  { background: rgba(245,158,11,.10);  color: var(--watch); font-weight: 500; opacity: .85; }
.age-old    { background: rgba(239,68,68,.08);   color: var(--sell);  font-weight: 500; opacity: .75; }
.age-stale  { background: transparent;           color: var(--text-muted); opacity: .55; text-decoration: line-through; }

/* ── Star / watchlist button ──────────────────────────────────────────── */
.star-btn {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 1rem;
  color: var(--text-muted);
  padding: 2px 4px;
  border-radius: 4px;
  line-height: 1;
  transition: color .15s, transform .15s;
}
.star-btn:hover { color: var(--watch); transform: scale(1.2); }
.star-btn.starred { color: var(--watch); }

/* ── Share button (appears on all card types) ─────────────────────── */
.share-btn {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-muted);
  padding: 3px 5px;
  border-radius: 5px;
  line-height: 1;
  display: flex;
  align-items: center;
  transition: color var(--transition), background var(--transition);
  -webkit-tap-highlight-color: transparent;
}
.share-btn:hover  { color: var(--accent); background: var(--accent-glow); }
.share-btn:active { transform: scale(.9); }

/* ── Signal List (Signals Tab) ────────────────────────────────────────── */
.signal-list { display: grid; gap: 8px; }

.signal-row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border-radius: var(--radius-sm);
  background: var(--bg-card);
  border: 1px solid var(--border);
  cursor: pointer;
  transition: all var(--transition);
}
.signal-row:hover { background: var(--bg-hover); border-color: var(--border-active); }

.signal-row-left { min-width: 0; }
.signal-row-name { font-weight: 600; font-size: .88rem; }
.signal-row-status { font-size: .72rem; color: var(--text-muted); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.signal-row-badges { display: flex; gap: 6px; flex-wrap: wrap; }
.signal-row-trend {
  font-size: .65rem;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 4px;
}
.trend-up { background: var(--buy-soft); color: var(--buy); }
.trend-down { background: var(--sell-soft); color: var(--sell); }
.trend-neutral { background: var(--neutral-soft); color: var(--neutral); }
.signal-row-empty { text-align: center; padding: 40px; color: var(--text-muted); }
.signal-row-pct { font-size: .82rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.pct-up { color: var(--buy); }
.pct-down { color: var(--sell); }

/* ── Confidence & Alignment Badges ────────────────────────────────────── */
.badge-confidence {
  font-size: .58rem; font-weight: 700; padding: 2px 7px; border-radius: 4px;
  text-transform: uppercase; letter-spacing: .04em;
}
.conf-high { background: var(--buy-soft); color: var(--buy); }
.conf-standard { background: var(--neutral-soft); color: var(--text-secondary); }
.conf-low { background: var(--sell-soft); color: var(--sell); }

.badge-alignment {
  font-size: .58rem; font-weight: 700; padding: 2px 7px; border-radius: 4px;
  letter-spacing: .03em;
}
.align-bull { background: var(--buy-soft); color: var(--buy); }
.align-bear { background: var(--sell-soft); color: var(--sell); }
.align-mixed { background: var(--watch-soft); color: var(--watch); }
.align-counter { background: var(--volume-soft); color: var(--volume); }

/* ── Ribbon Compression Alert ─────────────────────────────────────────── */
.compression-alert {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: .6rem; font-weight: 700; padding: 2px 8px; border-radius: 4px;
  background: var(--volume-soft); color: var(--volume);
  animation: pulse-glow 2s ease-in-out infinite;
}
@keyframes pulse-glow {
  0%, 100% { box-shadow: 0 0 0 0 var(--volume-glow); }
  50% { box-shadow: 0 0 8px 2px var(--volume-glow); }
}

/* ── MA Order Gauge (mini bar) ────────────────────────────────────────── */
.ma-order-gauge {
  display: flex; align-items: center; gap: 6px; font-size: .72rem;
}
.ma-order-track {
  flex: 1; height: 4px; border-radius: 2px; background: var(--border);
  position: relative; overflow: hidden; min-width: 40px;
}
.ma-order-fill {
  height: 100%; border-radius: 2px; transition: width .4s ease;
}

/* ── ROC Momentum Indicator ───────────────────────────────────────────── */
.roc-val { font-size: .72rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.roc-pos { color: var(--buy); }
.roc-neg { color: var(--sell); }

/* ── Dashboard Alignment Summary Card ─────────────────────────────────── */
.alignment-summary { margin-top: 8px; }
.alignment-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 8px;
}
.alignment-item {
  padding: 10px 12px; border-radius: var(--radius-sm);
  background: var(--bg-elevated); text-align: center;
  cursor: pointer; transition: transform .15s, box-shadow .15s, border-color .15s;
  border: 2px solid transparent;
}
.alignment-item:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,.2); }
.alignment-item.alignment-active { border-color: var(--accent); background: var(--accent-glow); }
.alignment-item-count { font-size: 1.2rem; font-weight: 700; }
.alignment-item-label { font-size: .65rem; color: var(--text-muted); }

.alignment-instruments { margin-top: 12px; }
.alignment-inst-header {
  font-size: .85rem; font-weight: 700; padding: 8px 0;
  border-bottom: 1px solid var(--border); margin-bottom: 6px;
}
.alignment-inst-list { display: flex; flex-direction: column; gap: 4px; max-height: 400px; overflow-y: auto; }
.alignment-inst-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 8px 12px; border-radius: var(--radius-sm);
  background: var(--bg-elevated); cursor: pointer;
  transition: background .15s;
}
.alignment-inst-row:hover { background: var(--bg-hover); }
.alignment-inst-row.feed-buy { border-left: 3px solid var(--buy); }
.alignment-inst-row.feed-sell { border-left: 3px solid var(--sell); }
.alignment-inst-name { display: flex; align-items: center; gap: 6px; font-size: .8rem; font-weight: 600; }
.alignment-inst-meta { display: flex; align-items: center; gap: 8px; }

/* ── Scanner Tab ──────────────────────────────────────────────────────── */
.scanner-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 12px;
}

.scanner-card {
  padding: 16px;
  border-radius: var(--radius);
  background: var(--bg-card);
  border: 1px solid var(--border);
  cursor: pointer;
  transition: all var(--transition);
  position: relative;
  overflow: hidden;
}
.scanner-card:hover { transform: translateY(-2px); border-color: var(--border-active); box-shadow: var(--shadow); }

.scanner-top { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 10px; }
.scanner-name { font-weight: 700; font-size: .95rem; }
.scanner-group { font-size: .65rem; color: var(--text-muted); }

/* ── Full instrument name (shows below ticker on all card types) ─── */
.inst-fullname {
  display: block;
  font-size: 0.68rem;
  font-weight: 400;
  color: var(--text-muted);
  line-height: 1.2;
  margin-top: 1px;
  margin-bottom: 1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 160px;
}

.scanner-price { font-size: 1.3rem; font-weight: 700; font-variant-numeric: tabular-nums; margin-bottom: 6px; }

.scanner-meta { display: flex; flex-wrap: wrap; gap: 6px; }
.scanner-tag {
  font-size: .62rem;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 4px;
}
.tag-up { background: var(--buy-soft); color: var(--buy); }
.tag-down { background: var(--sell-soft); color: var(--sell); }
.tag-neutral { background: var(--neutral-soft); color: var(--text-muted); }

.scanner-signal-strip {
  position: absolute;
  top: 0;
  right: 0;
  font-size: .6rem;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 0 0 0 var(--radius-sm);
}
.strip-buy { background: var(--buy); color: #fff; }
.strip-sell { background: var(--sell); color: #fff; }

.scanner-mini-bar {
  margin-top: 10px;
  height: 3px;
  border-radius: 2px;
  overflow: hidden;
}
.scanner-mini-bar-inner {
  height: 100%;
  border-radius: 2px;
  transition: width .6s ease;
}

.scanner-empty { grid-column: 1 / -1; text-align: center; padding: 40px; color: var(--text-muted); }

/* ── Watchlist Tab ────────────────────────────────────────────────────── */
.wl-my-card, .wl-alerts-card { margin-bottom: 16px; }
.wl-header-right { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.wl-sort-select { font-size: .72rem; padding: 4px 8px; height: auto; }
.wl-filter-chips { padding: 0 16px 12px; border-bottom: 1px solid var(--border); }

/* My Watchlist cards */
.wl-card {
  position: relative;
  overflow: hidden;
  padding: 16px;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  transition: background var(--transition);
}
.wl-card:last-child { border-bottom: none; }
.wl-card:hover { background: var(--bg-hover); }
.wl-card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.wl-card-left { min-width: 0; flex: 1; }
.wl-card-name { display: block; font-weight: 800; font-size: 1rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wl-card-group { display: block; font-size: .7rem; color: var(--text-muted); margin-top: 2px; }
.wl-card-right { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; flex-shrink: 0; }
.wl-card-price { font-size: 1.3rem; font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; }
.wl-card-badges { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 6px; }

/* Empty state */
.wl-empty { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 32px 16px;
  color: var(--text-muted); font-size: .82rem; text-align: center; }
.wl-empty p { max-width: 240px; line-height: 1.5; margin: 0; }

/* Today's Alerts */
.wl-alerts-card .card-header { flex-wrap: wrap; gap: 8px; }
.wl-alert-count { font-size: .65rem; color: var(--text-muted); }
.wl-alert-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  transition: background var(--transition);
}
.wl-alert-item:last-child { border-bottom: none; }
.wl-alert-item:hover { background: var(--bg-hover); }
.wl-alert-left { min-width: 0; flex: 1; }
.wl-alert-name { display: block; font-weight: 600; font-size: .82rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wl-alert-detail { display: block; font-size: .68rem; color: var(--text-muted); margin-top: 2px; }
.wl-alert-right { display: flex; align-items: center; gap: 4px; flex-shrink: 0; }

/* Legacy — keep for any remaining references */
.watchlist-empty { padding: 24px; text-align: center; color: var(--text-muted); font-size: .82rem; }

/* ── Modal ────────────────────────────────────────────────────────────── */
.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(0,0,0,.6);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: none;
  align-items: flex-end;
  justify-content: center;
  padding: 0;
}
.modal-overlay.open { display: flex; animation: fadeIn .2s ease; }

@media (min-width: 768px) {
  .modal-overlay { align-items: center; padding: 24px; }
}

.modal {
  position: relative;
  width: 100%;
  max-width: 680px;
  max-height: 90vh;
  max-height: 90dvh;
  background: var(--bg-surface);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  overflow: hidden;
  animation: slideUp .35s cubic-bezier(.22,1,.36,1);
}
@media (min-width: 768px) {
  .modal { border-radius: var(--radius-lg); }
}

@keyframes slideUp { from { transform: translateY(40px); opacity: 0; } to { transform: none; opacity: 1; } }

.modal-close {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 2;
  width: 32px; height: 32px;
  border: none;
  border-radius: 50%;
  background: var(--bg-hover);
  color: var(--text-secondary);
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: all var(--transition);
}
.modal-close:hover { background: var(--sell-soft); color: var(--sell); }

.modal-body {
  padding: 24px;
  overflow-y: auto;
  max-height: 90vh;
  max-height: 90dvh;
}

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
  padding-right: 36px;
}
.modal-title { font-size: 1.2rem; font-weight: 700; }
.modal-subtitle { font-size: .75rem; color: var(--text-muted); margin-top: 2px; }
.modal-signal-badge {
  font-size: .7rem;
  font-weight: 700;
  padding: 4px 12px;
  border-radius: 6px;
}

.modal-stats-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: 20px;
}
.modal-stat {
  padding: 12px;
  border-radius: var(--radius-sm);
  background: var(--bg-elevated);
  text-align: center;
}
.modal-stat-label { font-size: .65rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: .06em; }
.modal-stat-value { font-size: 1.1rem; font-weight: 700; margin-top: 4px; }

.modal-section { margin-bottom: 16px; }
.modal-section-title { font-size: .75rem; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: .06em; margin-bottom: 8px; display: flex; align-items: center; gap: 8px; }

.modal-chart-wrap { height: 260px; margin-bottom: 16px; border-radius: var(--radius-sm); overflow: hidden; background: var(--bg-elevated); padding: 12px; }
.modal-chart-wrap canvas { width: 100% !important; height: 100% !important; }

.modal-ma-ribbon {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.ma-pill {
  font-size: .62rem;
  font-weight: 500;
  padding: 3px 8px;
  border-radius: 4px;
  background: var(--bg-hover);
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
}
.ma-pill.above { background: var(--buy-soft); color: var(--buy); }
.ma-pill.below { background: var(--sell-soft); color: var(--sell); }

.modal-levels {
  display: grid;
  gap: 4px;
  max-height: 160px;
  overflow-y: auto;
}
.level-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: .75rem;
  padding: 6px 8px;
  border-radius: 4px;
  background: var(--bg-hover);
}
.level-type {
  font-weight: 700;
  font-size: .6rem;
  padding: 2px 6px;
  border-radius: 3px;
  text-transform: uppercase;
}
.level-type.top { background: var(--sell-soft); color: var(--sell); }
.level-type.bottom { background: var(--buy-soft); color: var(--buy); }
.level-price { font-weight: 600; font-variant-numeric: tabular-nums; flex: 1; }
.level-touches { font-size: .65rem; color: var(--text-muted); }
.level-date { font-size: .65rem; color: var(--text-muted); }

/* ── TradingView Hero Card ────────────────────────────────────────────── */
.tv-hero-card {
  display: flex;
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  margin-bottom: 16px;
  text-decoration: none;
  color: #fff;
  min-height: 120px;
  transition: all var(--transition);
  cursor: pointer;
}
.tv-hero-card:hover { transform: translateY(-2px); box-shadow: 0 8px 32px rgba(26,115,232,.35); }
.tv-hero-card:active { transform: translateY(0); }

.tv-hero-bg {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, #1a1a2e 0%, #16213e 30%, #0f3460 60%, #1a73e8 100%);
  z-index: 0;
}
.tv-hero-bg::after {
  content: '';
  position: absolute;
  top: -40%;
  right: -10%;
  width: 280px;
  height: 280px;
  background: radial-gradient(circle, rgba(26,115,232,.3), transparent 65%);
  pointer-events: none;
}

.tv-hero-content {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 20px 24px;
  gap: 16px;
}

.tv-hero-left { flex: 1; min-width: 0; }
.tv-hero-name { font-size: 1.3rem; font-weight: 800; letter-spacing: -.02em; }
.tv-hero-sub { font-size: .72rem; opacity: .6; margin-top: 2px; }
.tv-hero-price { font-size: 1.6rem; font-weight: 700; margin-top: 8px; font-variant-numeric: tabular-nums; }

.tv-hero-right { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; flex-shrink: 0; }
.tv-hero-signal {
  font-size: .68rem;
  font-weight: 700;
  padding: 4px 12px;
  border-radius: 6px;
  color: #fff;
}
.tv-hero-cta {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border-radius: var(--radius-sm);
  background: rgba(255,255,255,.15);
  backdrop-filter: blur(8px);
  font-size: .82rem;
  font-weight: 600;
  transition: background var(--transition);
  white-space: nowrap;
}
.tv-hero-card:hover .tv-hero-cta { background: rgba(255,255,255,.25); }
.tv-hero-hint { font-size: .62rem; opacity: .45; text-align: right; }

@media (max-width: 480px) {
  .tv-hero-content { flex-direction: column; align-items: flex-start; padding: 16px 18px; }
  .tv-hero-right { align-items: flex-start; flex-direction: row; flex-wrap: wrap; gap: 6px; }
  .tv-hero-hint { display: none; }
}

/* ── MA Ribbon Gauge ──────────────────────────────────────────────────── */
.ribbon-gauge { padding: 8px 0; }
.ribbon-gauge-track {
  height: 10px;
  border-radius: 5px;
  background: var(--border);
  overflow: hidden;
  position: relative;
}
.ribbon-gauge-fill {
  height: 100%;
  border-radius: 5px;
  transition: width .8s cubic-bezier(.4,0,.2,1);
  position: relative;
}
.ribbon-gauge-fill::after {
  content: '';
  position: absolute;
  right: 0;
  top: -3px;
  width: 4px;
  height: 16px;
  background: #fff;
  border-radius: 2px;
  box-shadow: 0 0 6px rgba(0,0,0,.3);
}
.ribbon-gauge-labels {
  display: flex;
  justify-content: space-between;
  margin-top: 6px;
  font-size: .62rem;
  font-weight: 500;
}

/* ── Signal Status Card ───────────────────────────────────────────────── */
.modal-status-card {
  padding: 12px 16px;
  border-radius: var(--radius-sm);
  border-left: 4px solid var(--neutral);
  background: var(--bg-elevated);
}
.modal-status-card.status-buy { border-left-color: var(--buy); background: var(--buy-soft); }
.modal-status-card.status-sell { border-left-color: var(--sell); background: var(--sell-soft); }
.modal-status-card.status-neutral { border-left-color: var(--neutral); }
.status-main { font-size: .82rem; color: var(--text-secondary); }
.status-sub { font-size: .72rem; color: var(--text-muted); margin-top: 4px; }

/* ── TradingView Integration ──────────────────────────────────────────── */

/* Inline TV icon link (small, appears next to instrument names) */
.tv-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--accent);
  text-decoration: none;
  padding: 3px 6px;
  border-radius: 4px;
  transition: all var(--transition);
  font-size: .68rem;
  font-weight: 600;
  flex-shrink: 0;
}
.tv-link:hover {
  background: var(--accent-glow);
  color: var(--accent);
  transform: scale(1.08);
}
.tv-link .tv-icon { flex-shrink: 0; }

/* Full-width TV button (in modal) */
.tv-btn-full {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  border-radius: var(--radius-sm);
  background: linear-gradient(135deg, #1a73e8, #6c5ce7);
  color: #fff;
  font-size: .82rem;
  font-weight: 600;
  text-decoration: none;
  transition: all var(--transition);
  box-shadow: 0 4px 12px rgba(26,115,232,.3);
}
.tv-btn-full:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(26,115,232,.4);
}
.tv-btn-full:active { transform: translateY(0); }

.modal-tv-bar {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
}

/* TradingView iframe chart in modal */
.modal-tv-chart-wrap {
  width: 100%;
  height: 380px;
  border-radius: var(--radius-sm);
  overflow: hidden;
  border: 1px solid var(--border);
  background: var(--bg-elevated);
}
.modal-tv-chart-wrap iframe {
  width: 100%;
  height: 100%;
  border: none;
}

/* Inline "Open full chart" link in section title */
.tv-link-inline {
  font-size: .68rem;
  color: var(--accent);
  text-decoration: none;
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
  margin-left: auto;
  padding: 2px 8px;
  border-radius: 4px;
  transition: all var(--transition);
}
.tv-link-inline:hover { background: var(--accent-glow); }

/* Heatmap cell actions (TV + info buttons) */
.heatmap-cell-actions {
  position: absolute;
  top: 2px;
  right: 2px;
  display: flex;
  gap: 2px;
  opacity: 0;
  transition: opacity var(--transition);
  z-index: 1;
}
.heatmap-cell:hover .heatmap-cell-actions { opacity: 1; }
.hm-detail-btn {
  border: none;
  background: rgba(0,0,0,.3);
  color: #fff;
  width: 18px;
  height: 18px;
  border-radius: 3px;
  display: grid;
  place-items: center;
  cursor: pointer;
  font-size: .6rem;
  padding: 0;
}
.hm-detail-btn:hover { background: rgba(0,0,0,.5); }
.hm-star-btn { color: var(--text-muted); }
.hm-star-btn.starred { color: #fbbf24; background: rgba(251,191,36,.18); }
.hm-star-btn:hover { color: #fbbf24; }

.heatmap-cell .tv-link {
  padding: 1px 3px;
  font-size: .58rem;
}
.heatmap-cell .tv-link .tv-icon { width: 11px; height: 11px; }

/* Scanner card actions */
.scanner-actions {
  display: flex;
  gap: 4px;
  flex-shrink: 0;
}

/* Signal row TV link alignment */
.signal-row-name {
  display: flex;
  align-items: center;
  gap: 4px;
}
.signal-row-name .tv-link { padding: 2px 4px; }

/* Watchlist TV link */
.watchlist-item .tv-link { padding: 2px 4px; }

/* ── Morning Brief ───────────────────────────────────────────────────── */
.morning-brief-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 16px;
  margin-bottom: 16px;
  box-shadow: var(--shadow);
}
.mb-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}
.mb-title {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: .78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--watch);
}
.mb-title svg { color: var(--watch); }
.mb-date { font-size: .68rem; color: var(--text-muted); }
.mb-list { display: flex; flex-direction: column; gap: 4px; }
.mb-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  background: var(--bg-elevated);
  cursor: pointer;
  transition: background var(--transition);
}
.mb-item:hover { background: var(--bg-hover); }
.mb-item-left { min-width: 0; }
.mb-name { font-size: .82rem; font-weight: 700; color: var(--text-primary); display: block; }
.mb-group { font-size: .65rem; color: var(--text-muted); }
.mb-item-right { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.mb-sig { font-size: .62rem; font-weight: 700; padding: 2px 6px; border-radius: 4px; }
.mb-sig.tag-buy  { background: var(--buy-soft);  color: var(--buy); }
.mb-sig.tag-sell { background: var(--sell-soft); color: var(--sell); }
.mb-sig.tag-neutral { background: var(--bg-input); color: var(--text-muted); }
.mb-score-bars { display: flex; gap: 2px; align-items: center; }
.mb-bar { width: 4px; height: 12px; border-radius: 2px; background: var(--border); }
.mb-bar-filled.mb-bar-buy  { background: var(--buy); }
.mb-bar-filled.mb-bar-sell { background: var(--sell); }
.mb-bar-filled.mb-bar-neutral { background: var(--text-muted); }
.mb-perf { font-size: .68rem; font-weight: 700; }
.perf-pos { color: var(--buy); }
.perf-neg { color: var(--sell); }

/* ── Signal Performance on Watchlist cards ───────────────────────────── */
.wl-signal-perf {
  font-size: .65rem;
  font-weight: 700;
  padding: 1px 5px;
  border-radius: 4px;
  white-space: nowrap;
}
.wl-signal-perf.perf-pos { background: var(--buy-soft);  color: var(--buy); }
.wl-signal-perf.perf-neg { background: var(--sell-soft); color: var(--sell); }

/* ── TradingView Picker Popover ──────────────────────────────────────── */
.tv-picker {
  z-index: 9999;
  background: var(--bg-card);
  border: 1px solid var(--border-active);
  border-radius: 12px;
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  box-shadow: 0 8px 32px rgba(0,0,0,.55);
  min-width: 160px;
  animation: pop-in .12s cubic-bezier(.34,1.56,.64,1);
}
.tv-picker-label {
  font-size: .65rem;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .06em;
  padding: 4px 10px 2px;
}
.tv-picker-btn {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px 12px;
  border-radius: 8px;
  border: none;
  background: transparent;
  color: var(--text-primary);
  font-size: .82rem;
  font-weight: 500;
  cursor: pointer;
  text-align: left;
  width: 100%;
  transition: background var(--transition);
}
.tv-picker-btn:hover { background: var(--bg-hover); }
.tv-picker-btn svg { flex-shrink: 0; color: var(--text-muted); }

/* Make tv-link button look identical to the old anchor */
button.tv-link { border: none; cursor: pointer; background: transparent; }

/* ── Loading States ───────────────────────────────────────────────────── */
.skeleton {
  background: linear-gradient(90deg, var(--bg-elevated) 25%, var(--bg-hover) 50%, var(--bg-elevated) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  border-radius: var(--radius-sm);
}
@keyframes shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

/* ── Utility Animations ───────────────────────────────────────────────── */
.count-up { transition: all .4s ease; }

@keyframes pop {
  0% { transform: scale(0.8); opacity: 0; }
  50% { transform: scale(1.05); }
  100% { transform: scale(1); opacity: 1; }
}
.pop-in { animation: pop .4s cubic-bezier(.22,1,.36,1) both; }

@keyframes glow-pulse {
  0%, 100% { box-shadow: 0 0 0 0 transparent; }
  50% { box-shadow: 0 0 20px var(--accent-glow); }
}

/* ── Empty States ─────────────────────────────────────────────────────── */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 48px 24px;
  color: var(--text-muted);
  text-align: center;
}
.empty-state svg { margin-bottom: 12px; opacity: .4; }

/* ── Trends Tab ──────────────────────────────────────────────────────── */
.trends-container {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 16px;
  height: calc(100vh - 180px);
  min-height: 400px;
}
.trends-sidebar {
  display: flex;
  flex-direction: column;
  gap: 0;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}
.trends-sidebar-filters {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px;
  border-bottom: 1px solid var(--border);
}
.trends-sidebar-filters .search-input {
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px 12px;
  background: var(--bg-input);
}
.trends-sidebar-filters .select-input { font-size: .75rem; padding: 6px 8px; }
.trends-instrument-list {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 0;
}
.trends-inst-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 9px 12px;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  transition: background var(--transition);
}
.trends-inst-item:last-child { border-bottom: none; }
.trends-inst-item:hover { background: var(--bg-hover); }
.trends-inst-item.active { background: var(--accent); color: #fff; }
.inst-item-left { min-width: 0; flex: 1; }
.inst-item-name { display: block; font-size: .82rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.inst-item-group { display: block; font-size: .65rem; color: var(--text-muted); margin-top: 1px; }
.trends-inst-item.active .inst-item-group { color: rgba(255,255,255,.7); }
.inst-item-right { display: flex; align-items: center; gap: 5px; flex-shrink: 0; }
.inst-run-days { font-size: .65rem; color: var(--text-muted); white-space: nowrap; }
.trends-inst-item.active .inst-run-days { color: rgba(255,255,255,.7); }
.inst-trend-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.inst-trend-dot.up { background: var(--buy); }
.inst-trend-dot.down { background: var(--sell); }
.inst-trend-dot.neutral { background: var(--neutral); }

/* Back button */
.trends-back-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: .8rem;
  font-weight: 600;
  color: var(--accent);
  background: none;
  border: none;
  padding: 0 0 14px;
  cursor: pointer;
}
.trends-back-btn:hover { opacity: .8; }

.trends-main {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px;
  overflow-y: auto;
}
.trends-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: var(--text-muted);
  gap: 12px;
  font-size: .9rem;
}

/* Trend detail header */
.trend-detail-header {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border);
}
.trend-detail-name {
  font-size: 1.3rem;
  font-weight: 800;
  letter-spacing: -.02em;
}
.trend-detail-meta {
  display: flex;
  gap: 12px;
  font-size: .82rem;
  color: var(--text-muted);
}
.trend-detail-meta .est-trend {
  font-weight: 700;
  padding: 2px 10px;
  border-radius: 20px;
  font-size: .75rem;
  text-transform: uppercase;
}
.est-trend.up { background: var(--buy-soft); color: var(--buy); }
.est-trend.down { background: var(--sell-soft); color: var(--sell); }
.est-trend.neutral { background: var(--bg-input); color: var(--text-muted); }

/* Stats row */
.trend-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 12px;
  margin-bottom: 20px;
}
.trend-stat-card {
  background: var(--bg-input);
  border-radius: 10px;
  padding: 14px 16px;
  text-align: center;
}
.trend-stat-card .stat-value {
  font-size: 1.4rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.trend-stat-card .stat-label {
  font-size: .72rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .04em;
  margin-top: 2px;
}

/* Trend timeline */
.trend-timeline {
  display: flex;
  flex-direction: column;
  gap: 0;
  position: relative;
  padding-left: 24px;
}
.trend-timeline::before {
  content: '';
  position: absolute;
  left: 7px;
  top: 4px;
  bottom: 4px;
  width: 2px;
  background: var(--border);
}
.trend-segment {
  position: relative;
  padding: 10px 14px;
  margin-bottom: 4px;
  border-radius: 8px;
  border-left: 3px solid transparent;
  transition: background var(--transition);
}
.trend-segment:hover { background: var(--bg-input); }
.trend-segment::before {
  content: '';
  position: absolute;
  left: -21px;
  top: 16px;
  width: 10px; height: 10px;
  border-radius: 50%;
  border: 2px solid var(--bg-card);
}
.trend-segment.seg-up { border-left-color: var(--buy); }
.trend-segment.seg-up::before { background: var(--buy); }
.trend-segment.seg-down { border-left-color: var(--sell); }
.trend-segment.seg-down::before { background: var(--sell); }
.trend-segment.seg-current {
  background: var(--bg-input);
  box-shadow: 0 0 0 1px var(--border);
}
.trend-seg-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.trend-seg-dir {
  font-weight: 700;
  font-size: .82rem;
  text-transform: uppercase;
}
.seg-up .trend-seg-dir { color: var(--buy); }
.seg-down .trend-seg-dir { color: var(--sell); }
.trend-seg-days {
  font-size: .78rem;
  font-weight: 700;
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 0;
}
.trend-seg-pct {
  font-weight: 800;
  font-size: .8rem;
  font-variant-numeric: tabular-nums;
}
.trend-seg-dates {
  font-size: .72rem;
  color: var(--text-muted);
  margin-top: 2px;
}
.trend-seg-bar {
  margin-top: 6px;
  height: 4px;
  border-radius: 2px;
  background: var(--border);
  overflow: hidden;
}
.trend-seg-bar-fill {
  height: 100%;
  border-radius: 2px;
  transition: width .4s ease;
}

/* Updated segment layout */
.trend-seg-left { min-width: 0; flex: 1; }
.trend-seg-right { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; flex-shrink: 0; }
.trend-seg-days-val { font-size: .75rem; font-weight: 700; color: var(--text-secondary); font-variant-numeric: tabular-nums; }
.seg-current-badge {
  display: inline-block; margin-left: 6px; font-size: .62rem; font-weight: 700;
  background: var(--accent); color: #fff; padding: 1px 6px; border-radius: 10px;
  text-transform: uppercase; letter-spacing: .03em; vertical-align: middle;
}

/* Trend section title */
.trend-section-title {
  font-size: .75rem; color: var(--text-muted); text-transform: uppercase;
  letter-spacing: .06em; margin: 20px 0 12px; font-weight: 600;
}

/* Current trend context card */
.trend-context-card {
  display: flex;
  gap: 16px;
  padding: 14px 16px;
  border-radius: 10px;
  border: 1px solid var(--border);
  margin-bottom: 18px;
}
.ctx-main { flex: 1; min-width: 0; }
.ctx-label { font-size: .68rem; text-transform: uppercase; letter-spacing: .06em; color: var(--text-muted); margin-bottom: 2px; }
.ctx-days { font-size: 1.8rem; font-weight: 800; letter-spacing: -.03em; line-height: 1; margin-bottom: 4px; }
.ctx-since { font-size: .72rem; color: var(--text-muted); }
.ctx-move { font-size: .78rem; font-weight: 700; margin-top: 4px; }
.ctx-compare { flex-shrink: 0; display: flex; flex-direction: column; gap: 4px; align-items: flex-end; }
.ctx-compare-row { display: flex; gap: 8px; font-size: .72rem; align-items: baseline; }
.ctx-cmp-label { color: var(--text-muted); }
.ctx-cmp-val { font-weight: 700; font-variant-numeric: tabular-nums; }
.ctx-maturity { font-size: .75rem; font-weight: 700; margin-top: 4px; }

/* Trend ratio bar */
.trend-ratio-wrap { margin-bottom: 20px; }
.trend-ratio-labels {
  display: flex; justify-content: space-between; align-items: center;
  font-size: .72rem; font-weight: 600; margin-bottom: 6px;
}
.trend-ratio-bar {
  display: flex; height: 8px; border-radius: 4px; overflow: hidden; background: var(--border);
}
.trb-up { background: var(--buy); transition: width .4s ease; }
.trb-down { background: var(--sell); transition: width .4s ease; }

/* Sidebar row for two dropdowns */
.trends-sidebar-row { display: flex; gap: 6px; }
.trends-sidebar-row .select-input { flex: 1; font-size: .72rem; padding: 5px 6px; }

/* Mobile: two-state view — show picker OR detail */
@media (max-width: 768px) {
  .trends-container {
    grid-template-columns: 1fr;
    height: calc(100vh - 160px);
    gap: 0;
  }
  .trends-sidebar {
    border-radius: var(--radius);
    height: 100%;
  }
  /* When detail is visible: hide sidebar, show main */
  .trends-container.detail-visible #trendsSidebar { display: none; }
  .trends-container.detail-visible #trendsMain { display: block; }
  /* Default: show sidebar, hide main */
  #trendsMain { display: none; border-radius: var(--radius); height: 100%; overflow-y: auto; }
  .trends-back-btn { display: flex; }
  .trend-stats { grid-template-columns: repeat(2, 1fr) !important; }
}

/* ── Pulse Alignment Badge ───────────────────────────────────────────── */
.pulse-alignment {
  font-size: .72rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 4px;
}

/* ── Confidence Breakdown ────────────────────────────────────────────── */
.confidence-breakdown-card { }
.confidence-breakdown { padding: 8px 0; }
.conf-stacked-bar { display: flex; height: 28px; border-radius: 6px; overflow: hidden; margin-bottom: 12px; cursor: pointer; }
.conf-stacked-bar > div { transition: opacity .2s; display: flex; align-items: center; justify-content: center; font-size: .7rem; font-weight: 700; color: #fff; }
.conf-stacked-bar > div:hover { opacity: .8; }
.conf-seg-high { background: #10b981; }
.conf-seg-standard { background: #6366f1; }
.conf-seg-low { background: #f59e0b; }
.conf-seg-none { background: var(--border); color: var(--text-muted); }
.conf-inst-list { display: flex; flex-direction: column; gap: 4px; max-height: 300px; overflow-y: auto; }
.conf-inst-row { display: flex; justify-content: space-between; align-items: center; padding: 6px 10px; background: var(--bg-elevated); border-radius: var(--radius-sm); cursor: pointer; font-size: .8rem; }
.conf-inst-row:hover { background: var(--bg-hover); }

/* ── Heatmap Alignment Bar & Squeeze Dot ─────────────────────────────── */
.hm-align-bar { height: 3px; width: 100%; border-radius: 0 0 4px 4px; margin-top: 4px; }
.hm-squeeze-dot { width: 6px; height: 6px; border-radius: 50%; background: #fbbf24; position: absolute; top: 4px; right: 4px; animation: pulse-glow 2s infinite; z-index: 1; }

/* ── Signal Feed Meta Row (ROC + MA gauge) ───────────────────────────── */
.feed-meta-row { display: flex; align-items: center; gap: 10px; margin-top: 3px; }
.feed-ma-gauge { display: inline-flex; align-items: center; gap: 4px; }
.feed-ma-track { display: inline-block; width: 40px; height: 4px; border-radius: 2px; background: var(--border); overflow: hidden; position: relative; }
.feed-ma-fill { display: block; height: 100%; border-radius: 2px; transition: width .4s ease; }

/* ── Signal row right column ─────────────────────────────────────────── */
.signal-row-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  text-align: right;
}

/* ═══════════════════════════════════════════════════════════════════════
   MOBILE RESPONSIVE — applied to all tabs
   ═══════════════════════════════════════════════════════════════════════ */
@media (max-width: 580px) {
  html { font-size: 15px; }

  /* ── Signal row: reflow to 2-row layout ── */
  .signal-row {
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "left  right"
      "badges badges";
    align-items: start;
    gap: 6px 8px;
    padding: 12px;
  }
  .signal-row-left   { grid-area: left; min-width: 0; }
  .signal-row-badges { grid-area: badges; flex-wrap: wrap; }
  .signal-row-right  { grid-area: right; }

  /* ── Signal row name: prevent overflow ── */
  .signal-row-name {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
  }

  /* ── Filter chips: wrap instead of scroll ── */
  .filter-chips {
    flex-wrap: wrap;
    overflow-x: visible;
  }

  /* ── Filter bar selects: 2-column grid on mobile ── */
  .filter-bar {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }
  .filter-bar .search-wrap {
    grid-column: 1 / -1;
  }
  .filter-bar .filter-chips {
    grid-column: 1 / -1;
  }

  /* ── Heatmap: smaller cells on mobile ── */
  .heatmap-cell {
    min-height: 52px;
    padding: 6px 4px;
  }
  .cell-name { font-size: .65rem; }

  /* ── Card header: allow wrapping ── */
  .card-header {
    flex-wrap: wrap;
    gap: 8px;
  }

  /* ── Market pulse: ensure pills wrap cleanly ── */
  .pulse-stats {
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px;
  }
  .pulse-divider { display: none; }

  /* ── Scanner cards: full width on mobile ── */
  .scanner-grid {
    grid-template-columns: 1fr;
  }

  /* ── Modal: full width on mobile ── */
  .modal {
    width: 100%;
    max-width: 100%;
    margin: 0;
    border-radius: var(--radius) var(--radius) 0 0;
    max-height: 90vh;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
  }
  .modal-overlay {
    align-items: flex-end;
  }

  .sim-setups-grid { grid-template-columns: 1fr 1fr; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Feature 4 — 3TF Alignment Badge
   ═══════════════════════════════════════════════════════════════════════════ */
.badge-3tf {
  display: inline-flex;
  align-items: center;
  font-size: .58rem;
  font-weight: 800;
  padding: 1px 6px;
  border-radius: 10px;
  letter-spacing: .03em;
  white-space: nowrap;
  vertical-align: middle;
}
.badge-3tf-bull {
  background: rgba(16,185,129,.18);
  color: var(--buy);
  border: 1px solid rgba(16,185,129,.3);
}
.badge-3tf-bear {
  background: rgba(239,68,68,.15);
  color: var(--sell);
  border: 1px solid rgba(239,68,68,.25);
}

/* 3TF dot on heatmap cells */
.hm-3tf-dot {
  position: absolute;
  bottom: 4px;
  right: 18px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 4px var(--accent-glow);
}

/* ═══════════════════════════════════════════════════════════════════════════
   Feature 9 — Similar Setups in Modal
   ═══════════════════════════════════════════════════════════════════════════ */
.sim-setups-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-top: 8px;
}
.sim-card {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  cursor: pointer;
  transition: background var(--transition), border-color var(--transition), transform .15s;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.sim-card:hover {
  background: var(--bg-hover);
  border-color: var(--border-active);
  transform: translateY(-2px);
}
.sim-card-top {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.sim-card-name {
  font-size: .82rem;
  font-weight: 700;
  color: var(--text-primary);
}
.sim-card-group {
  font-size: .62rem;
  color: var(--text-muted);
}
.sim-card-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  align-items: center;
}
.sim-card-bottom {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 2px;
}
.sim-card-price {
  font-size: .75rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--text-secondary);
}

/* ═══════════════════════════════════════════════════════════════════════════
   AI Signal Explainer
   ═══════════════════════════════════════════════════════════════════════════ */
.ai-analysis-card {
  background: linear-gradient(135deg, rgba(99,102,241,.08) 0%, rgba(139,92,246,.06) 100%);
  border: 1px solid rgba(99,102,241,.2);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
}
.ai-analysis-text {
  font-size: .82rem;
  line-height: 1.65;
  color: var(--text-primary);
  margin: 0;
}
.ai-model-badge {
  display: inline-flex;
  align-items: center;
  font-size: .55rem;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 8px;
  background: rgba(99,102,241,.12);
  color: var(--accent);
  border: 1px solid rgba(99,102,241,.2);
  letter-spacing: .04em;
  margin-left: 6px;
  vertical-align: middle;
  text-transform: uppercase;
}

/* ═══════════════════════════════════════════════════════════════════════════
   Instrument Notes
   ═══════════════════════════════════════════════════════════════════════════ */
.notes-section {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.notes-textarea {
  width: 100%;
  min-height: 80px;
  max-height: 180px;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  font-size: .82rem;
  font-family: inherit;
  line-height: 1.55;
  padding: 10px 12px;
  resize: vertical;
  transition: border-color .2s;
  outline: none;
}
.notes-textarea:focus {
  border-color: var(--border-active);
  box-shadow: 0 0 0 2px rgba(99,102,241,.12);
}
.notes-textarea::placeholder { color: var(--text-muted); }
.notes-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.notes-save-hint {
  font-size: .65rem;
  color: var(--text-muted);
  transition: color .2s;
}
.notes-save-hint.saved { color: var(--buy); font-weight: 600; }
.notes-char-count {
  font-size: .62rem;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

/* Note indicator badge on cards */
.note-indicator {
  font-size: .65rem;
  opacity: .7;
  cursor: default;
  margin-left: 2px;
  vertical-align: middle;
}

/* ═══════════════════════════════════════════════════
   SIGNALS TAB — v2 Card Design
═══════════════════════════════════════════════════ */

/*
 * Negate .content's horizontal padding so signals tab
 * controls its own consistent 16px edges on both sides.
 * Prevents double-padding and the overflow-x right-clip bug.
 */
#pane-signals {
  margin-left: -16px;
  margin-right: -16px;
}
@media (min-width: 768px) {
  #pane-signals {
    margin-left: -24px;
    margin-right: -24px;
  }
}

/* Header row */
.sig-tab-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px 4px;
  gap: 12px;
}
.sig-tab-count {
  font-size: .72rem;
  font-weight: 600;
  color: var(--text-muted);
  white-space: nowrap;
}
.sig-search-wrap {
  flex: 1;
  max-width: 220px;
}
.sig-search-wrap .search-input {
  font-size: .78rem;
  padding: 7px 10px 7px 30px;
}

/* Chip row */
.sig-chips-row {
  display: flex;
  gap: 6px;
  padding: 8px 16px;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.sig-chips-row::-webkit-scrollbar { display: none; }

.sig-chip {
  flex-shrink: 0;
  font-size: .65rem;
  font-weight: 700;
  padding: 6px 13px;
  border-radius: 20px;
  white-space: nowrap;
  cursor: pointer;
  border: 1.5px solid var(--border);
  background: transparent;
  color: var(--text-muted);
  transition: all .15s;
  line-height: 1;
}
.sig-chip:hover {
  border-color: var(--accent);
  color: var(--accent);
}
.sig-chip.active,
.sig-chip-all.active {
  background: rgba(79,158,255,.15);
  color: var(--accent);
  border-color: rgba(79,158,255,.4);
}
.sig-chip-buy.active {
  background: var(--buy-soft);
  color: var(--buy);
  border-color: rgba(0,217,126,.35);
}
.sig-chip-sell.active {
  background: var(--sell-soft);
  color: var(--sell);
  border-color: rgba(255,77,109,.35);
}
.sig-chip-best.active {
  background: rgba(99,102,241,.15);
  color: #a78bfa;
  border-color: rgba(99,102,241,.4);
}
.sig-chip-more {
  margin-left: auto;
  flex-shrink: 0;
}
.sig-chip-more.active {
  background: rgba(255,255,255,.08);
  color: var(--text-primary);
  border-color: rgba(255,255,255,.2);
}

/* Advanced filters collapsible */
.sig-advanced-row {
  display: none;
  flex-wrap: wrap;
  gap: 8px;
  padding: 10px 16px;
  background: var(--bg-elevated);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.sig-advanced-row.sig-advanced-open {
  display: flex;
}
.sig-advanced-row .select-input {
  flex: 1 1 140px;
  min-width: 130px;
}

/* Card list container */
.sig-card-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  padding: 12px 16px 16px;
}

/* Wrapper keeps card + analysis strip together as one grid item */
.sig-card-wrap {
  display: flex;
  flex-direction: column;
}

/* Signal card */
.sig-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
  cursor: pointer;
  transition: transform .1s, border-color .15s;
}
.sig-card:hover {
  border-color: var(--border-active);
  transform: translateY(-1px);
}
.sig-card:active { transform: scale(.99); }

/* Colored top strip */
.sig-card-strip {
  height: 3px;
  width: 100%;
}
.sig-card-strip.buy {
  background: linear-gradient(90deg, var(--buy) 0%, rgba(0,217,126,.5) 50%, transparent 100%);
}
.sig-card-strip.sell {
  background: linear-gradient(90deg, var(--sell) 0%, rgba(255,77,109,.5) 50%, transparent 100%);
}
/* Buy/sell cards also get a subtle left glow */
.sig-card:has(.sig-card-strip.buy) {
  border-left-color: rgba(0,217,126,.25);
}
.sig-card:has(.sig-card-strip.sell) {
  border-left-color: rgba(255,77,109,.22);
}

/* Card body */
.sig-card-body {
  padding: 16px;
}
.sig-card-row1 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.sig-card-name-wrap { display: flex; flex-direction: column; min-width: 0; }
.sig-card-name {
  font-size: 1rem;
  font-weight: 800;
  color: var(--text-primary);
}
.sig-card-right {
  display: flex;
  align-items: center;
  gap: 8px;
}
.sig-card-price {
  font-size: 1.3rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.sig-card-row2 {
  margin-top: 6px;
}
.sig-card-status {
  font-size: .75rem;
  color: var(--text-muted);
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sig-card-badges {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 9px;
}

/* Bottom row: MA bar + ROC */
.sig-card-row3 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
}
.sig-ma-label {
  font-size: .65rem;
  color: var(--text-muted);
  white-space: nowrap;
}
.sig-mini-bar {
  flex: 1;
  height: 3px;
  background: rgba(255,255,255,.06);
  border-radius: 3px;
  overflow: hidden;
}
.sig-mini-bar-fill {
  height: 100%;
  border-radius: 3px;
}
.sig-roc {
  font-size: .7rem;
  font-weight: 700;
  white-space: nowrap;
}
.sig-roc.pos { color: var(--buy); }
.sig-roc.neg { color: var(--sell); }

/* Signal badges (inside sig-card) */
.sig-badge {
  font-size: .62rem;
  font-weight: 800;
  padding: 2px 8px;
  border-radius: 4px;
  line-height: 1.4;
}
.sig-badge.p1 { background: rgba(0,217,126,.18); color: var(--buy); }
.sig-badge.p2 { background: rgba(0,217,126,.12); color: var(--buy); }
.sig-badge.p3 { background: rgba(255,181,71,.12); color: var(--watch); }
.sig-badge.p4 { background: rgba(255,77,109,.1); color: var(--sell); }
.sig-badge.secondary { background: rgba(255,255,255,.06); color: var(--text-muted); }
.sig-badge.conf-HIGH { background: rgba(79,158,255,.14); color: var(--accent); }
.sig-badge.conf-STANDARD { background: rgba(255,255,255,.06); color: var(--text-secondary); }
.sig-badge.conf-LOW { background: rgba(255,77,109,.08); color: var(--sell); }
.sig-badge.conf-high { background: rgba(79,158,255,.14); color: var(--accent); }
.sig-badge.conf-standard { background: rgba(255,255,255,.06); color: var(--text-secondary); }
.sig-badge.conf-low { background: rgba(255,77,109,.08); color: var(--sell); }
.sig-badge.align { background: rgba(255,255,255,.06); color: var(--text-secondary); }
.sig-badge.age-fresh { background: rgba(0,217,126,.1); color: var(--buy); }
.sig-badge.age-old { background: rgba(255,255,255,.04); color: var(--text-muted); }
.sig-badge.age-decay1 { background: rgba(255,181,71,.08); color: var(--watch); }
.sig-badge.age-decay2 { background: rgba(255,255,255,.04); color: var(--text-muted); }
.sig-badge.age-decay3 { background: rgba(255,255,255,.03); color: var(--text-muted); opacity: .7; }

/* AI analysis strip below sig-card */
.ai-strip {
  margin: -4px 0 8px;
  background: linear-gradient(135deg, rgba(79,158,255,.05), rgba(139,92,246,.05));
  border: 1px solid rgba(79,158,255,.14);
  border-left: 3px solid var(--accent);
  border-top: none;
  border-radius: 0 0 12px 12px;
  padding: 9px 13px 10px;
}
.ai-strip-label {
  font-size: .55rem;
  font-weight: 800;
  color: var(--accent);
  letter-spacing: .08em;
  text-transform: uppercase;
  margin-bottom: 4px;
  display: flex;
  align-items: center;
  gap: 5px;
  opacity: .85;
}
.ai-strip-text {
  font-size: .7rem;
  line-height: 1.55;
  color: var(--text-muted);
}

/* ═══════════════════════════════════════════════════
   INSTRUMENT MODAL — v2 Hero + Tabs Design
═══════════════════════════════════════════════════ */

/* ── Hero ── */
.mh-hero {
  padding: 20px 20px 16px;
  background: linear-gradient(135deg, #0c1d38 0%, #0f1c35 100%);
  border-bottom: 1px solid var(--border);
  position: relative;
  overflow: hidden;
}
.mh-hero::after {
  content: '';
  position: absolute;
  bottom: -40px; right: -40px;
  width: 160px; height: 160px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(79,158,255,.07), transparent 70%);
  pointer-events: none;
}
.mh-hero-buy::after  { background: radial-gradient(circle, rgba(0,217,126,.08), transparent 70%); }
.mh-hero-sell::after { background: radial-gradient(circle, rgba(255,77,109,.07), transparent 70%); }

.mh-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}
.mh-name {
  font-size: 1.5rem;
  font-weight: 900;
  letter-spacing: -.03em;
  color: var(--text-primary);
  line-height: 1;
}
.mh-group-lbl {
  font-size: .65rem;
  color: var(--text-muted);
  margin-top: 4px;
}
.mh-sig-wrap {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 5px;
  flex-shrink: 0;
}
.mh-sig-badge {
  font-size: .75rem;
  font-weight: 800;
  padding: 5px 14px;
  border-radius: 10px;
  background: var(--bg-elevated);
  color: var(--text-primary);
  letter-spacing: .02em;
}
.mh-sig-badge.buy  { background: var(--buy); color: #000; }
.mh-sig-badge.sell { background: var(--sell); color: #fff; }
.mh-sig-conf {
  font-size: .58rem;
  color: var(--text-muted);
}

.mh-price-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}
.mh-price {
  font-size: 1.85rem;
  font-weight: 900;
  letter-spacing: -.04em;
  font-variant-numeric: tabular-nums;
  color: var(--text-primary);
}
.mh-price-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}
.mh-change {
  font-size: .72rem;
  font-weight: 700;
}
.mh-change.pos { color: var(--buy); }
.mh-change.neg { color: var(--sell); }
.mh-tv-link {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: .62rem;
  font-weight: 700;
  color: var(--text-muted);
  text-decoration: none;
  padding: 4px 9px;
  border-radius: 8px;
  background: rgba(255,255,255,.06);
  border: 1px solid var(--border);
  transition: all .15s;
  white-space: nowrap;
}
.mh-tv-link:hover { color: var(--accent); border-color: rgba(79,158,255,.3); }

/* ── Tab bar ── */
.mh-tabs {
  display: flex;
  gap: 4px;
  padding: 6px 6px;
  background: var(--bg-elevated);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 2;
}
.mh-tab {
  flex: 1;
  text-align: center;
  padding: 9px 4px;
  font-size: .68rem;
  font-weight: 700;
  color: var(--text-muted);
  border-radius: 10px;
  cursor: pointer;
  border: none;
  background: transparent;
  transition: all .15s;
}
.mh-tab:hover { color: var(--text-secondary); }
.mh-tab.active {
  background: var(--bg-hover);
  color: var(--text-primary);
  box-shadow: 0 1px 5px rgba(0,0,0,.35);
}

/* ── Panels ── */
.mh-panel { display: block; }
.mh-panel-hidden { display: none; }

/* ── Section within panels ── */
.mh-section {
  padding: 14px 20px;
  border-bottom: 1px solid var(--border);
}
.mh-section:last-child { border-bottom: none; }
.mh-section .ribbon-gauge { padding: 4px 0 0; }

.mh-section-title {
  font-size: .7rem;
  font-weight: 700;
  color: var(--text-secondary);
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 6px;
}

/* ── 3-col stat grid ── */
.mg-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 8px;
  padding: 14px 20px;
}
.mg-tile {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 10px 12px;
}
.mg-label {
  font-size: .55rem;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .06em;
  margin-bottom: 5px;
}
.mg-val {
  font-size: .88rem;
  font-weight: 800;
  color: var(--text-primary);
  line-height: 1.1;
}
.mg-val.buy    { color: var(--buy); }
.mg-val.sell   { color: var(--sell); }
.mg-val.accent { color: var(--accent); }

/* ═══════════════════════════════════════════════════════════════════════════
   Volume Tab — Multi-Timeframe Volume Tracker
   ═══════════════════════════════════════════════════════════════════════════ */

/* Full-bleed (negate .content padding) */
#pane-volume {
  margin-left: -16px;
  margin-right: -16px;
}
@media (min-width: 768px) {
  #pane-volume { margin-left: -24px; margin-right: -24px; }
}

/* ── Sticky header ── */
.vol-header {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--bg-base);
  border-bottom: 1px solid var(--border);
  padding: 12px 16px 0;
}
.vol-header-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}
.vol-header-count {
  font-size: .7rem;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .07em;
  white-space: nowrap;
  flex-shrink: 0;
}
.vol-search-wrap { flex: 1; min-width: 0; }
.vol-search-wrap .search-input { width: 100%; }
.vol-sort-select {
  flex-shrink: 0;
  font-size: .7rem;
  padding: 6px 8px;
  height: auto;
  min-width: 110px;
}

/* ── Filter chips ── */
.vol-chips-row {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding-bottom: 12px;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.vol-chips-row::-webkit-scrollbar { display: none; }
.vol-chip {
  flex-shrink: 0;
  padding: 5px 12px;
  border-radius: 20px;
  font-size: .65rem;
  font-weight: 700;
  border: 1.5px solid var(--border);
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  transition: all .15s;
  line-height: 1;
  white-space: nowrap;
}
.vol-chip:hover                { border-color: var(--volume); color: var(--text-primary); }
.vol-chip.active               { border-color: var(--volume); background: rgba(139,92,246,.15); color: var(--volume); }
.vol-chip-d.active             { border-color: var(--volume); background: rgba(139,92,246,.18); color: var(--volume); }
.vol-chip-4h.active            { border-color: #a78bfa; background: rgba(167,139,250,.15); color: #a78bfa; }
.vol-chip-w.active             { border-color: var(--watch); background: var(--watch-soft); color: var(--watch); }
.vol-chip-m.active             { border-color: #fb923c; background: rgba(251,146,60,.12); color: #fb923c; }
.vol-chip-up.active            { border-color: var(--buy); background: var(--buy-soft); color: var(--buy); }
.vol-chip-dn.active            { border-color: var(--sell); background: var(--sell-soft); color: var(--sell); }

/* ── Card grid ── */
.vol-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  padding: 14px 16px 28px;
}

/* ── Volume Card ── */
.vol-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  cursor: pointer;
  transition: border-color .18s, transform .12s;
  position: relative;
}
.vol-card:hover  { border-color: var(--border-active); transform: translateY(-1px); }
.vol-card:active { transform: scale(.99); }

/* Left accent bar based on volume intensity */
.vol-card::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 4px;
}
.vol-card.has-spike-d::before  { background: var(--volume); }
.vol-card.has-spike-w::before  { background: var(--watch); }
.vol-card.has-spike-m::before  { background: #fb923c; }
.vol-card.no-spike.trend-up::before   { background: var(--buy); opacity: .4; }
.vol-card.no-spike.trend-down::before { background: var(--sell); opacity: .4; }

.vol-card-inner { padding: 14px 14px 14px 18px; }

/* ── Top row: name + spike badges + trend ── */
.vol-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 3px;
}
.vol-name-wrap  { display: flex; flex-direction: column; min-width: 0; }
.vol-top-right  { display: flex; align-items: center; gap: 4px; flex-shrink: 0; }
.vol-name {
  font-size: 1rem;
  font-weight: 800;
  color: var(--text-primary);
  letter-spacing: .01em;
}
.vol-spike-badges {
  display: flex;
  gap: 4px;
  flex-shrink: 0;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.vol-spike-badge {
  font-size: .6rem;
  font-weight: 800;
  padding: 2px 6px;
  border-radius: 4px;
  letter-spacing: .04em;
}
.vsb-d  { background: rgba(139,92,246,.22); color: var(--volume); }
.vsb-4h { background: rgba(167,139,250,.18); color: #a78bfa; }
.vsb-w  { background: var(--watch-soft); color: var(--watch); }
.vsb-m  { background: rgba(251,146,60,.15); color: #fb923c; }

/* ── Group + industry ── */
.vol-group {
  font-size: .68rem;
  color: var(--text-muted);
  margin-bottom: 10px;
}

/* ── Price row ── */
.vol-price-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 12px;
}
.vol-price {
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}
.vol-roc {
  font-size: .8rem;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 5px;
}
.vol-roc.pos { background: var(--buy-soft);  color: var(--buy); }
.vol-roc.neg { background: var(--sell-soft); color: var(--sell); }
.vol-roc.neu { background: var(--bg-elevated); color: var(--text-muted); }
.vol-trend-badge {
  margin-left: auto;
  font-size: .62rem;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 4px;
}
.vtb-up   { background: var(--buy-soft);  color: var(--buy); }
.vtb-down { background: var(--sell-soft); color: var(--sell); }
.vtb-neu  { background: var(--bg-elevated); color: var(--text-muted); }

/* ── Volume bars section ── */
.vol-bars {
  border-top: 1px solid var(--border);
  padding-top: 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.vol-bar-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.vol-bar-tf {
  font-size: .62rem;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .06em;
  width: 22px;
  flex-shrink: 0;
}
.vol-bar-track {
  flex: 1;
  height: 6px;
  background: var(--bg-elevated);
  border-radius: 3px;
  overflow: hidden;
}
.vol-bar-fill {
  height: 100%;
  border-radius: 3px;
  min-width: 3px;
  transition: width .4s ease;
}
.vol-bar-fill.d   { background: var(--volume); }
.vol-bar-fill.h4  { background: #a78bfa; }
.vol-bar-fill.w   { background: var(--watch); }
.vol-bar-fill.m   { background: #fb923c; }
.vol-bar-ratio {
  font-size: .65rem;
  font-weight: 700;
  color: var(--text-secondary);
  min-width: 44px;
  text-align: right;
  white-space: nowrap;
}
.vol-bar-ratio.spike { color: var(--volume); }
.vol-bar-ratio.spike-w { color: var(--watch); }
.vol-bar-ratio.spike-m { color: #fb923c; }

/* ── Recent spikes footer ── */
.vol-history {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--border);
  font-size: .65rem;
  color: var(--text-muted);
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.vol-hist-item { display: flex; align-items: center; gap: 4px; }
.vol-hist-dot  {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--volume); flex-shrink: 0;
}
.vol-hist-dot.move { background: var(--watch); }

/* ── Empty state ── */
.vol-empty {
  grid-column: 1 / -1;
  text-align: center;
  padding: 60px 20px;
  color: var(--text-muted);
}
.vol-empty svg { opacity: .25; margin-bottom: 12px; display: block; margin-left: auto; margin-right: auto; }
.vol-empty p   { font-size: .9rem; }

/* ═══════════════════════════════════════════════════════════════════════════
   Trends Tab — Historical Summary Bar  (2-column grid, mobile-first)
   ═══════════════════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════════════════
   iPhone Widget Install Sheet
   ═══════════════════════════════════════════════════════════════════════════ */

.widget-sheet-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.55);
  z-index: 1000;
  align-items: flex-end;
  justify-content: center;
}
.widget-sheet-overlay.open { display: flex; }

.widget-sheet {
  background: var(--bg-surface);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  width: 100%;
  max-width: 480px;
  padding: 0 0 env(safe-area-inset-bottom, 16px);
  box-shadow: var(--shadow-lg);
  animation: slideUp .25s cubic-bezier(.4,0,.2,1);
}
@keyframes slideUp {
  from { transform: translateY(100%); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}

.widget-sheet-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 18px 0;
}
.widget-sheet-title {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: .95rem;
  font-weight: 700;
  color: var(--text-primary);
}
.widget-sheet-body {
  padding: 16px 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.widget-sheet-desc {
  font-size: .85rem;
  color: var(--text-secondary);
  margin: 0;
  line-height: 1.5;
}
.widget-sheet-desc strong { color: var(--text-primary); }

/* One-tap install button */
.widget-install-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: var(--accent);
  color: #fff;
  font-size: .95rem;
  font-weight: 700;
  border-radius: var(--radius);
  padding: 14px 20px;
  text-decoration: none;
  transition: opacity var(--transition);
  -webkit-tap-highlight-color: transparent;
}
.widget-install-btn:active { opacity: .8; }

/* Step blocks */
.widget-step-block {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 14px;
  background: var(--bg-elevated);
  border-radius: var(--radius);
  border: 1px solid var(--border);
}
.widget-step-num {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--accent-glow);
  color: var(--accent);
  font-size: .72rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 2px;
}
.widget-step-block-content {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
  min-width: 0;
}
.widget-step-block-label {
  font-size: .83rem;
  font-weight: 600;
  color: var(--text-primary);
}
.widget-step-hint {
  font-size: .78rem;
  color: var(--text-secondary);
  line-height: 1.5;
}
.widget-step-hint strong { color: var(--text-primary); }

/* URL copy row */
.widget-url-row {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 8px 10px;
  overflow: hidden;
}
.widget-url-text {
  font-size: .7rem;
  color: var(--text-muted);
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-family: ui-monospace, monospace;
}
.widget-copy-btn {
  display: flex;
  align-items: center;
  gap: 5px;
  flex-shrink: 0;
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: 6px;
  padding: 6px 10px;
  font-size: .76rem;
  font-weight: 700;
  cursor: pointer;
  transition: opacity var(--transition);
  -webkit-tap-highlight-color: transparent;
}
.widget-copy-btn:active { opacity: .8; }
.widget-copy-btn.copied { background: var(--buy); }

/* App Store button */
.widget-appstore-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--bg-surface);
  border: 1px solid var(--border-active);
  color: var(--text-primary);
  font-size: .82rem;
  font-weight: 600;
  border-radius: var(--radius-sm);
  padding: 8px 14px;
  text-decoration: none;
  width: fit-content;
  transition: background var(--transition);
  -webkit-tap-highlight-color: transparent;
}
.widget-appstore-btn:active { background: var(--bg-hover); }

/* Hide the old flex dividers — grid gap handles spacing */
.trh-divider { display: none; }

.trh-bar {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--border);          /* gap becomes border colour */
  border-bottom: 1px solid var(--border);
  margin: 0 -16px 16px;               /* full-bleed, compensate .content padding */
}
@media (min-width: 768px) {
  .trh-bar { margin-left: -24px; margin-right: -24px; }
}

.trh-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 14px 12px;
  background: var(--bg-surface);
  text-align: center;
}

.trh-val {
  font-size: 1.45rem;
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -.01em;
  color: var(--text-primary);
}
.trh-val-up   { color: var(--buy); }
.trh-val-down { color: var(--sell); }

.trh-lbl {
  font-size: .65rem;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .07em;
  margin-top: 4px;
  line-height: 1.3;
}

/* ═══════════════════════════════════════════════════════════════════════════
   Trend Change Alert Banner (P1 / P2)
   ═══════════════════════════════════════════════════════════════════════════ */
.trend-alert-banner {
  margin-bottom: 12px;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid rgba(99,102,241,.2);
  background: linear-gradient(135deg, rgba(16,185,129,.04), rgba(99,102,241,.04));
}

.trend-alert-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px 8px;
  border-bottom: 1px solid rgba(255,255,255,.05);
}

.trend-alert-icon { font-size: .95rem; }

.trend-alert-title {
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .09em;
  color: var(--text-secondary);
  flex: 1;
}

.trend-alert-count {
  background: var(--accent);
  color: #fff;
  font-size: .63rem;
  font-weight: 800;
  padding: 2px 7px;
  border-radius: 20px;
  min-width: 18px;
  text-align: center;
}

.trend-alert-see-all {
  background: none;
  border: none;
  color: var(--accent);
  font-size: .72rem;
  font-weight: 600;
  cursor: pointer;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
}

.trend-alert-scroll {
  display: flex;
  gap: 8px;
  padding: 10px 14px 12px;
  overflow-x: auto;
  scrollbar-width: none;
}
.trend-alert-scroll::-webkit-scrollbar { display: none; }

/* Individual signal chip */
.trend-alert-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px 11px;
  border-radius: 10px;
  border: 1px solid transparent;
  cursor: pointer;
  flex-shrink: 0;
  min-width: 88px;
  transition: transform .15s;
  -webkit-tap-highlight-color: transparent;
}
.trend-alert-item:active { transform: scale(.96); }

.trend-alert-item.tci-buy {
  background: var(--buy-soft);
  border-color: rgba(16,185,129,.3);
}
.trend-alert-item.tci-sell {
  background: var(--sell-soft);
  border-color: rgba(239,68,68,.3);
}

/* P1 pulses, P2 is steady */
.trend-alert-item.tci-p1.tci-buy  { animation: tci-pulse-buy  2.8s ease-in-out infinite; }
.trend-alert-item.tci-p1.tci-sell { animation: tci-pulse-sell 2.8s ease-in-out infinite; }

@keyframes tci-pulse-buy {
  0%,100% { box-shadow: 0 0 0 0 rgba(16,185,129,0);  border-color: rgba(16,185,129,.3); }
  50%      { box-shadow: 0 0 14px 3px rgba(16,185,129,.3); border-color: rgba(16,185,129,.7); }
}
@keyframes tci-pulse-sell {
  0%,100% { box-shadow: 0 0 0 0 rgba(239,68,68,0);  border-color: rgba(239,68,68,.3); }
  50%      { box-shadow: 0 0 14px 3px rgba(239,68,68,.3); border-color: rgba(239,68,68,.7); }
}

/* Badge inside chip */
.tci-badge {
  font-size: .58rem;
  font-weight: 800;
  letter-spacing: .06em;
  padding: 1px 5px;
  border-radius: 4px;
  align-self: flex-start;
  margin-bottom: 1px;
}
.tci-buy  .tci-badge { background: rgba(16,185,129,.2);  color: var(--buy); }
.tci-sell .tci-badge { background: rgba(239,68,68,.2);   color: var(--sell); }

/* Direction arrow */
.tci-dir { font-size: .85rem; font-weight: 800; line-height: 1; }
.tci-buy  .tci-dir { color: var(--buy); }
.tci-sell .tci-dir { color: var(--sell); }

/* Name block */
.tci-ticker   { font-size: .8rem;  font-weight: 700; color: var(--text-primary); display: block; }
.tci-fullname { font-size: .6rem;  color: var(--text-muted); display: block; max-width: 84px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.tci-label    { font-size: .58rem; color: var(--text-muted); margin-top: 3px; }
.tci-p1 .tci-label { color: var(--text-secondary); font-weight: 600; }

/* P1/P2 signal cards get stronger left border glow */
.sig-card:has(.sig-badge.p1) { border-left-color: rgba(16,185,129,.5) !important; }
.sig-card:has(.sig-badge.sell-p1) { border-left-color: rgba(239,68,68,.5) !important; }

/* P1/P2 filter chips show dot indicator when signals exist */
.sig-chip[data-filter="P1"].has-signals,
.sig-chip[data-filter="P2"].has-signals {
  position: relative;
}
.sig-chip[data-filter="P1"].has-signals::after,
.sig-chip[data-filter="P2"].has-signals::after {
  content: '';
  position: absolute;
  top: 3px; right: 3px;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--buy);
}

/* ── Lightweight Chart containers ─────────────────────────────────────── */
.lw-chart-wrap {
  height: 280px !important;
  min-height: 280px;
  background: transparent;
  border-radius: 8px;
  overflow: hidden;
}
.lw-chart-wrap--tall {
  height: 340px !important;
  min-height: 340px;
}

/* ── VOL+ confirmation chip (modal hero) ───────────────────────────────── */
.vol-plus-chip {
  display: inline-block;
  font-size: .6rem;
  font-weight: 700;
  padding: 1px 5px;
  border-radius: 4px;
  background: rgba(245,158,11,.2);
  color: #f59e0b;
  border: 1px solid rgba(245,158,11,.4);
  vertical-align: middle;
  margin-left: 4px;
  letter-spacing: .03em;
}

/* ── Volume spike legend (chart section title) ─────────────────────────── */
.vol-spike-legend {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: .65rem;
  font-weight: 500;
  color: #f59e0b;
  opacity: .85;
}
.vol-spike-dot {
  width: 8px; height: 8px;
  border-radius: 2px;
  background: #f59e0b;
  flex-shrink: 0;
}

/* ── Stale Data Warning Banner ─────────────────────────────────────────── */
.stale-banner {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 14px;
  margin: 0 0 10px;
  background: rgba(245,158,11,.12);
  border: 1px solid rgba(245,158,11,.3);
  border-radius: 10px;
  color: #f59e0b;
  font-size: .75rem;
  font-weight: 600;
}
.stale-banner svg { flex-shrink: 0; }
.stale-banner span { flex: 1; }
.stale-dismiss {
  background: none;
  border: none;
  color: #f59e0b;
  cursor: pointer;
  font-size: .8rem;
  padding: 0 2px;
  opacity: .7;
  line-height: 1;
}
.stale-dismiss:hover { opacity: 1; }

/* ── Gauge Info Button + Tooltip ───────────────────────────────────────── */
.gauge-info-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: rgba(99,102,241,.15);
  border: 1px solid rgba(99,102,241,.3);
  color: var(--accent);
  font-size: .65rem;
  font-weight: 700;
  cursor: pointer;
  margin-left: 6px;
  vertical-align: middle;
  line-height: 1;
  flex-shrink: 0;
}
.gauge-info-btn:hover { background: rgba(99,102,241,.28); }
.gauge-tooltip {
  position: absolute;
  top: 44px;
  left: 12px;
  right: 12px;
  background: var(--bg-elevated);
  border: 1px solid rgba(99,102,241,.3);
  border-radius: 10px;
  padding: 12px 14px;
  font-size: .72rem;
  color: var(--text-secondary);
  line-height: 1.6;
  z-index: 40;
  box-shadow: 0 8px 24px rgba(0,0,0,.4);
}
.gauge-tooltip strong { color: var(--text-primary); font-size: .75rem; }
.mp-pulse-card { position: relative; }

/* ── Signal % since entry ──────────────────────────────────────────────── */
.sig-price-stack {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 1px;
}
.sig-entry-pct {
  font-size: .6rem;
  font-weight: 700;
  letter-spacing: .02em;
}
.sig-entry-pct.pct-pos { color: var(--buy); }
.sig-entry-pct.pct-neg { color: var(--sell); }

/* ── Trend Maturity Badges ─────────────────────────────────────────────── */
.sig-badge.maturity-young       { background: rgba(16,185,129,.12); color: #10b981; border-color: rgba(16,185,129,.25); }
.sig-badge.maturity-developing  { background: rgba(99,102,241,.12); color: var(--accent); border-color: rgba(99,102,241,.25); }
.sig-badge.maturity-mature      { background: rgba(245,158,11,.12); color: #f59e0b; border-color: rgba(245,158,11,.25); }
.sig-badge.maturity-extended    { background: rgba(239,68,68,.12);  color: var(--sell); border-color: rgba(239,68,68,.25); }