/**
 * Pivots Flow - Main Stylesheet
 * Real-time crypto order flow alerts dashboard
 */

/* ============================================
   CSS Variables & Reset
   ============================================ */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

:root {
  --bg: #0a0a0f;
  --bg2: #12121a;
  --bg3: #1e1e2a;
  --card: #1a1a25;
  --border: #2a2a3a;
  --text: #fff;
  --text2: #888899;
  --green: #4ecdc4;
  --red: #ff6b6b;
  --yellow: #ffe66d;
  --purple: #a855f7;
  --blue: #54a0ff;
  --orange: #f39c12;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  background: var(--bg);
  color: var(--text);
  font-size: 13px;
}

/* ============================================
   Loading Overlay
   ============================================ */
.loading-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  opacity: 1;
  transition: opacity 0.5s ease;
}

.loading-overlay.hidden {
  opacity: 0;
  pointer-events: none;
}

.loading-content {
  text-align: center;
}

.loading-logo {
  font-size: 64px;
  margin-bottom: 16px;
  animation: loading-pulse 1.5s ease-in-out infinite;
}

.loading-title {
  font-size: 28px;
  font-weight: 700;
  margin-bottom: 24px;
  background: linear-gradient(135deg, var(--green) 0%, var(--blue) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.loading-status {
  font-size: 14px;
  color: var(--text2);
  margin-bottom: 24px;
}

.loading-spinner {
  width: 40px;
  height: 40px;
  margin: 0 auto;
  border: 3px solid var(--border);
  border-top-color: var(--green);
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes loading-pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.1); opacity: 0.8; }
}

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

/* ============================================
   Top Bar / Header
   ============================================ */
.top-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 16px;
  border-bottom: 1px solid var(--border);
  background: linear-gradient(180deg, var(--bg3) 0%, var(--bg2) 100%);
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  height: 44px;
  gap: 10px;
  flex-wrap: wrap;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

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

.logo h1 {
  font-size: 14px;
}

.logo span {
  font-size: 9px;
  color: var(--green);
  background: rgba(78, 205, 196, 0.2);
  padding: 2px 5px;
  border-radius: 8px;
}

.beta-badge {
  font-size: 9px;
  font-weight: 700;
  color: #fff;
  background: linear-gradient(135deg, var(--purple) 0%, #6366f1 100%);
  padding: 2px 8px;
  border-radius: 10px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  animation: beta-pulse 2s ease-in-out infinite;
  box-shadow: 0 0 8px rgba(168, 85, 247, 0.4);
}

@keyframes beta-pulse {
  0%, 100% { opacity: 1; box-shadow: 0 0 8px rgba(168, 85, 247, 0.4); }
  50% { opacity: 0.85; box-shadow: 0 0 12px rgba(168, 85, 247, 0.6); }
}

/* Beta Access Info */
.beta-access-info {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 10px;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 6px;
  margin-left: 8px;
}

.pro-badge {
  font-size: 9px;
  font-weight: 700;
  color: var(--yellow);
  background: rgba(255, 230, 109, 0.15);
  padding: 2px 6px;
  border-radius: 4px;
}

.beta-pricing {
  font-size: 9px;
  color: var(--text2);
  font-style: italic;
}

.notify-checkbox {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 8px;
  color: var(--text2);
  cursor: pointer;
}

.notify-checkbox input[type="checkbox"] {
  width: 12px;
  height: 12px;
  cursor: pointer;
  accent-color: var(--purple);
}

.notify-checkbox span {
  white-space: nowrap;
}

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

/* ============================================
   Ticker Toggles
   ============================================ */
.ticker-toggles {
  display: flex;
  gap: 2px;
}

.ticker-toggle {
  background: var(--card);
  border: 1px solid var(--border);
  color: var(--text2);
  padding: 3px 7px;
  border-radius: 3px;
  cursor: pointer;
  font-size: 9px;
  font-weight: 600;
}

.ticker-toggle.active {
  background: var(--purple);
  border-color: var(--purple);
  color: #fff;
}

/* ============================================
   Source Connection Badges
   ============================================ */
.source-badges {
  display: flex;
  gap: 2px;
}

.source-badge {
  font-size: 8px;
  padding: 2px 4px;
  border-radius: 2px;
  background: rgba(255, 107, 107, 0.2);
  color: var(--red);
  font-weight: 600;
}

.source-badge.connected {
  background: rgba(78, 205, 196, 0.2);
  color: var(--green);
}

.source-badge.price-stale {
  background: rgba(255, 193, 7, 0.3);
  color: #ffc107;
}

.source-badge.price-dead {
  background: rgba(255, 107, 107, 0.3);
  color: var(--red);
  animation: pulse-red 1s infinite;
}

@keyframes pulse-red {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

/* Alert Age Indicator */
.alert-age {
  font-size: 9px;
  padding: 1px 4px;
  border-radius: 3px;
  margin-left: 4px;
  font-weight: 600;
}

.alert-age.age-fresh {
  background: rgba(78, 205, 196, 0.2);
  color: var(--green);
}

.alert-age.age-warning {
  background: rgba(255, 193, 7, 0.2);
  color: #ffc107;
}

.alert-age.age-stale {
  background: rgba(255, 107, 107, 0.2);
  color: var(--red);
}

/* ============================================
   Sound Controls
   ============================================ */
.sound-controls {
  display: flex;
  align-items: center;
  gap: 4px;
  background: var(--card);
  padding: 2px 6px;
  border-radius: 4px;
}

.volume-slider {
  width: 40px;
  height: 3px;
  -webkit-appearance: none;
  background: var(--border);
  border-radius: 2px;
}

.volume-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 8px;
  height: 8px;
  background: var(--green);
  border-radius: 50%;
  cursor: pointer;
}

/* ============================================
   Connection Status
   ============================================ */
.status {
  display: flex;
  align-items: center;
  gap: 3px;
  font-size: 9px;
}

.status-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--red);
}

.status-dot.connected {
  background: var(--green);
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}

/* ============================================
   Referral Links
   ============================================ */
.referrals {
  display: flex;
  gap: 6px;
  font-size: 8px;
}

.referrals a {
  color: var(--blue);
  text-decoration: none;
  padding: 2px 5px;
  background: rgba(84, 160, 255, 0.1);
  border-radius: 3px;
}

.save-btn {
  background: linear-gradient(135deg, var(--green), #2ecc71);
  border: none;
  color: #000;
  padding: 5px 10px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 9px;
  font-weight: 600;
  transition: all 0.2s ease;
  box-shadow: 0 2px 4px rgba(78, 205, 196, 0.3);
}
.save-btn:hover {
  background: linear-gradient(135deg, #5fe0d8, #3dd68a);
  transform: translateY(-1px);
  box-shadow: 0 3px 8px rgba(78, 205, 196, 0.4);
}
.save-btn.saved {
  background: linear-gradient(135deg, #4ecdc4, #45b7aa);
  animation: pulse-save 0.3s ease;
}
@keyframes pulse-save {
  0% { transform: scale(1); }
  50% { transform: scale(1.1); }
  100% { transform: scale(1); }
}

.load-btn {
  background: linear-gradient(135deg, var(--blue), #2980b9);
  border: none;
  color: #fff;
  padding: 5px 10px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 9px;
  font-weight: 600;
  transition: all 0.2s ease;
  box-shadow: 0 2px 4px rgba(84, 160, 255, 0.3);
}
.load-btn:hover {
  background: linear-gradient(135deg, #6bb3f8, #54a0ff);
  transform: translateY(-1px);
  box-shadow: 0 3px 8px rgba(84, 160, 255, 0.4);
}
.load-btn.loaded {
  background: linear-gradient(135deg, var(--green), #2ecc71);
  animation: pulse-save 0.3s ease;
}
.load-btn.no-save {
  background: linear-gradient(135deg, var(--red), #e74c3c);
  animation: shake 0.3s ease;
}
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-3px); }
  75% { transform: translateX(3px); }
}

.reset-btn {
  background: linear-gradient(135deg, var(--purple), #9333ea);
  border: none;
  color: #fff;
  padding: 5px 10px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 9px;
  font-weight: 600;
  transition: all 0.2s ease;
  box-shadow: 0 2px 4px rgba(168, 85, 247, 0.3);
}
.reset-btn:hover {
  background: linear-gradient(135deg, #b366ff, #a855f7);
  transform: translateY(-1px);
  box-shadow: 0 3px 8px rgba(168, 85, 247, 0.4);
}

/* ============================================
   Dashboard & Panels
   ============================================ */
.dashboard {
  position: absolute;
  top: 44px;
  left: 0;
  right: 0;
  bottom: 0;
  overflow: auto;
  background: var(--bg);
}

.panel {
  position: absolute;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  min-width: 280px;
  min-height: 200px;
  z-index: 1;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.35);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
  overflow: hidden;
}

.panel:hover {
  border-color: var(--purple);
}

.panel.hidden {
  display: none;
}

.panel-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 12px;
  border-bottom: 1px solid var(--border);
  background: linear-gradient(180deg, var(--bg3) 0%, var(--bg2) 100%);
  border-radius: 8px 8px 0 0;
  cursor: move;
  user-select: none;
  flex-shrink: 0;
}

.panel-title {
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.panel-actions {
  display: flex;
  align-items: center;
  gap: 4px;
}

.panel-controls {
  display: flex;
  gap: 2px;
}

.tf-btn {
  background: var(--card);
  border: 1px solid var(--border);
  color: var(--text2);
  padding: 1px 4px;
  border-radius: 2px;
  cursor: pointer;
  font-size: 8px;
}

.tf-btn.active {
  background: var(--blue);
  border-color: var(--blue);
  color: #fff;
}

.close-btn {
  background: none;
  border: none;
  color: var(--text2);
  cursor: pointer;
  font-size: 12px;
  padding: 2px 6px;
  border-radius: 3px;
  transition: all 0.15s ease;
}

.close-btn:hover {
  color: var(--red);
  background: rgba(255, 107, 107, 0.15);
}

.panel-content {
  flex: 1;
  overflow-y: auto;
  padding: 6px;
}

.panel-resize {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 16px;
  height: 16px;
  cursor: nwse-resize;
  opacity: 0.5;
  transition: opacity 0.15s ease;
}

.panel-resize:hover {
  opacity: 1;
}

.panel-resize::after {
  content: '';
  position: absolute;
  bottom: 3px;
  right: 3px;
  width: 8px;
  height: 8px;
  border-right: 2px solid var(--purple);
  border-bottom: 2px solid var(--purple);
  border-radius: 1px;
}

/* ============================================
   Snap Guides & Visual Feedback
   ============================================ */
.snap-guide {
  position: absolute;
  background: var(--purple);
  opacity: 0.8;
  z-index: 9999;
  pointer-events: none;
  transition: opacity 0.1s ease;
}

.snap-guide.horizontal {
  height: 1px;
  left: 0;
  right: 0;
  box-shadow: 0 0 4px var(--purple), 0 0 8px var(--purple);
}

.snap-guide.vertical {
  width: 1px;
  top: 0;
  bottom: 0;
  box-shadow: 0 0 4px var(--purple), 0 0 8px var(--purple);
}

.panel.snapping {
  box-shadow: 0 0 0 2px var(--purple), 0 4px 20px rgba(168, 85, 247, 0.4);
}

.panel.dragging {
  z-index: 100;
  opacity: 0.95;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5), 0 0 0 1px var(--purple);
  transition: none;
}

.panel.resizing {
  z-index: 100;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5), 0 0 0 1px var(--blue);
}

/* Panel preview ghost for snapping position */
.snap-preview {
  position: absolute;
  background: var(--purple);
  opacity: 0.15;
  border: 2px dashed var(--purple);
  border-radius: 6px;
  pointer-events: none;
  z-index: 50;
  transition: all 0.1s ease;
}

/* ============================================
   Alert Items
   ============================================ */
.alert-item {
  background: var(--bg2);
  border-radius: 4px;
  padding: 6px 8px;
  margin-bottom: 4px;
  border-left: 3px solid var(--purple);
  font-size: 11px;
}

.alert-item.buy {
  border-left-color: var(--green);
}

.alert-item.sell {
  border-left-color: var(--red);
}

.alert-item.sweep {
  border-left-color: var(--orange);
}

.alert-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.alert-asset {
  font-weight: 700;
  font-size: 12px;
}

.alert-asset.buy {
  color: var(--green);
}

.alert-asset.sell {
  color: var(--red);
}

.alert-time {
  font-size: 8px;
  color: var(--text2);
}

.alert-msg {
  color: var(--text2);
  font-size: 10px;
  margin-top: 2px;
}

.alert-meta {
  display: flex;
  gap: 4px;
  margin-top: 4px;
  font-size: 8px;
}

.alert-meta span {
  background: rgba(255, 255, 255, 0.05);
  padding: 1px 4px;
  border-radius: 2px;
}

.alert-meta span.buy {
  background: rgba(78, 205, 196, 0.2);
  color: var(--green);
}

.alert-meta span.sell {
  background: rgba(255, 107, 107, 0.2);
  color: var(--red);
}

/* ============================================
   Trader Type Badges (Smart Money vs Retail)
   ============================================ */
.trader-badge {
  margin-right: 4px;
  font-size: 12px;
}

/* Trader type uses right border + subtle background, preserving buy/sell left border */
.alert-item.trader-whale {
  border-right: 3px solid #9b59b6;
  background: linear-gradient(270deg, rgba(155, 89, 182, 0.15) 0%, transparent 40%);
}

.alert-item.trader-smart {
  border-right: 3px solid #3498db;
  background: linear-gradient(270deg, rgba(52, 152, 219, 0.12) 0%, transparent 40%);
}

.alert-item.trader-retail {
  opacity: 0.75;
}

/* ============================================
   Biggest Trades
   ============================================ */
.biggest-trade {
  background: var(--bg2);
  border-radius: 4px;
  padding: 8px;
  margin-bottom: 5px;
}

.biggest-header {
  display: flex;
  justify-content: space-between;
  font-size: 9px;
}

.biggest-period {
  color: var(--yellow);
  font-weight: 600;
}

.biggest-value {
  font-size: 16px;
  font-weight: 700;
  margin: 2px 0;
}

.biggest-value.buy {
  color: var(--green);
}

.biggest-value.sell {
  color: var(--red);
}

.biggest-meta {
  font-size: 8px;
  color: var(--text2);
  margin-top: 2px;
}

/* ============================================
   OI Panel
   ============================================ */
.oi-item {
  background: var(--bg2);
  border-radius: 4px;
  padding: 6px 8px;
  margin-bottom: 4px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.oi-label {
  font-size: 10px;
  font-weight: 600;
}

.oi-value {
  font-size: 12px;
  font-weight: 700;
  color: var(--green);
}

/* ============================================
   Premium Panel
   ============================================ */
.premium-item {
  background: var(--bg2);
  border-radius: 4px;
  padding: 8px;
  margin-bottom: 4px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.premium-asset {
  font-weight: 600;
  font-size: 12px;
}

.premium-value {
  font-size: 14px;
  font-weight: 700;
}

.premium-value.pos {
  color: var(--green);
}

.premium-value.neg {
  color: var(--red);
}

/* ============================================
   Volume Panel
   ============================================ */
.volume-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 10px;
  margin-bottom: 5px;
}

.volume-rank {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 8px;
  font-weight: 600;
}

.volume-rank.top {
  background: var(--yellow);
  color: #000;
}

.volume-name {
  width: 65px;
  font-weight: 500;
  font-size: 9px;
}

.volume-bar {
  flex: 1;
  height: 6px;
  background: var(--bg);
  border-radius: 3px;
  overflow: hidden;
}

.volume-bar-fill {
  height: 100%;
  border-radius: 3px;
}

.volume-bar-fill.spot {
  background: linear-gradient(90deg, var(--green), #2ecc71);
}

.volume-bar-fill.perp {
  background: linear-gradient(90deg, var(--purple), #9b59b6);
}

.volume-bar-fill.buy {
  background: linear-gradient(90deg, var(--green), #2ecc71);
}

.volume-bar-fill.sell {
  background: linear-gradient(90deg, var(--red), #e74c3c);
}

.volume-val {
  width: 55px;
  text-align: right;
  font-weight: 600;
  font-size: 9px;
}

/* ============================================
   Empty State
   ============================================ */
.empty-state {
  text-align: center;
  padding: 15px;
  color: var(--text2);
  font-size: 10px;
}

/* ============================================
   Panel Toggle (Bottom Right)
   ============================================ */
.panel-toggle {
  position: fixed;
  bottom: 10px;
  right: 10px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px;
  z-index: 999;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  max-width: 300px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(8px);
}

.panel-toggle-btn {
  background: var(--bg2);
  border: 1px solid var(--border);
  color: var(--text2);
  padding: 4px 8px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 9px;
  font-weight: 500;
  transition: all 0.15s ease;
}

.panel-toggle-btn:hover {
  border-color: var(--purple);
  color: var(--text);
}

.panel-toggle-btn.active {
  background: var(--green);
  border-color: var(--green);
  color: #000;
  font-weight: 600;
}

/* ============================================
   Scrollbar
   ============================================ */
::-webkit-scrollbar {
  width: 4px;
}

::-webkit-scrollbar-track {
  background: var(--bg);
}

::-webkit-scrollbar-thumb {
  background: var(--border);
  border-radius: 2px;
}

/* ============================================
   Update Banner & Modal
   ============================================ */
.update-banner {
  display: none;
  position: fixed;
  top: 44px;
  left: 0;
  right: 0;
  background: linear-gradient(90deg, var(--purple), var(--blue));
  color: #fff;
  padding: 8px 16px;
  text-align: center;
  z-index: 999;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  animation: pulse-bg 2s infinite;
}

.update-banner:hover {
  background: linear-gradient(90deg, var(--blue), var(--purple));
}

@keyframes pulse-bg {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.85;
  }
}

.update-banner.show {
  display: block;
}

.update-modal-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.8);
  z-index: 2000;
  justify-content: center;
  align-items: center;
  backdrop-filter: blur(4px);
}

.update-modal-overlay.show {
  display: flex;
}

.update-modal {
  background: var(--card);
  border: 2px solid var(--purple);
  border-radius: 12px;
  padding: 24px 32px;
  text-align: center;
  max-width: 400px;
  box-shadow: 0 0 40px rgba(168, 85, 247, 0.4);
  animation: modal-pop 0.3s ease-out;
}

@keyframes modal-pop {
  0% {
    transform: scale(0.8);
    opacity: 0;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

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

.update-modal-title {
  font-size: 20px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 8px;
}

.update-modal-version {
  font-size: 12px;
  color: var(--text2);
  margin-bottom: 16px;
}

.update-modal-desc {
  font-size: 13px;
  color: var(--text2);
  margin-bottom: 20px;
  line-height: 1.5;
}

.update-modal-btn {
  background: linear-gradient(90deg, var(--purple), var(--blue));
  border: none;
  color: #fff;
  padding: 12px 32px;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition:
    transform 0.2s,
    box-shadow 0.2s;
}

.update-modal-btn:hover {
  transform: scale(1.05);
  box-shadow: 0 0 20px rgba(168, 85, 247, 0.5);
}

.update-modal-later {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text2);
  padding: 8px 20px;
  border-radius: 6px;
  font-size: 12px;
  cursor: pointer;
  margin-left: 10px;
}

.update-modal-later:hover {
  border-color: var(--text2);
}

/* ============================================
   Filter Controls
   ============================================ */
.filter-btn {
  background: var(--bg);
  border: 1px solid var(--border);
  color: var(--text2);
  padding: 2px 6px;
  border-radius: 3px;
  cursor: pointer;
  font-size: 9px;
  display: flex;
  align-items: center;
  gap: 2px;
}

.filter-btn:hover {
  border-color: var(--purple);
  color: var(--text);
}

.filter-btn.has-filter {
  background: var(--purple);
  border-color: var(--purple);
  color: #fff;
}

.filter-dropdown {
  position: absolute;
  top: 100%;
  right: 0;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 8px;
  min-width: 180px;
  z-index: 1000;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
  display: none;
}

.filter-dropdown.show {
  display: block;
}

.filter-section {
  margin-bottom: 8px;
}

.filter-section:last-child {
  margin-bottom: 0;
}

.filter-label {
  font-size: 9px;
  color: var(--text2);
  margin-bottom: 4px;
  font-weight: 600;
  text-transform: uppercase;
}

.filter-options {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
}

.filter-opt {
  background: var(--bg);
  border: 1px solid var(--border);
  color: var(--text2);
  padding: 2px 6px;
  border-radius: 3px;
  cursor: pointer;
  font-size: 8px;
}

.filter-opt:hover {
  border-color: var(--purple);
}

.filter-opt.active {
  background: var(--purple);
  border-color: var(--purple);
  color: #fff;
}

.filter-actions {
  display: flex;
  gap: 4px;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--border);
}

.filter-action-btn {
  flex: 1;
  background: var(--bg);
  border: 1px solid var(--border);
  color: var(--text2);
  padding: 4px;
  border-radius: 3px;
  cursor: pointer;
  font-size: 8px;
}

.filter-action-btn:hover {
  border-color: var(--purple);
}

.filter-action-btn.primary {
  background: var(--purple);
  border-color: var(--purple);
  color: #fff;
}

/* ============================================
   SIGNAL CONNECTION STYLES
   ============================================ */

/* Connection indicators on alerts */
.alert-item.has-connections {
  position: relative;
}

.connection-badge {
  position: absolute;
  top: 4px;
  right: 4px;
  min-width: 16px;
  height: 16px;
  border-radius: 8px;
  font-size: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  padding: 0 4px;
}

.connection-badge.high {
  background: var(--green);
  color: #000;
}

.connection-badge.medium {
  background: var(--yellow);
  color: #000;
}

.connection-badge.low {
  background: var(--text2);
  color: #fff;
}

/* Signal connections panel */
.signal-group {
  background: var(--bg2);
  border-radius: 6px;
  padding: 8px;
  margin-bottom: 8px;
  border: 1px solid var(--border);
}

.signal-group:hover {
  border-color: var(--green);
}

.signal-group-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 6px;
  font-size: 10px;
  color: var(--text2);
}

.signal-group-header .count {
  color: var(--green);
  font-weight: 600;
}

.signal-group-header .confidence {
  color: var(--yellow);
}

.signal-group-signals {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.signal-mini {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 6px;
  background: var(--bg3);
  border-radius: 4px;
  font-size: 10px;
  border-left: 2px solid var(--border);
}

.signal-mini.buy {
  border-left-color: var(--green);
}

.signal-mini.sell {
  border-left-color: var(--red);
}

.signal-mini .type-badge {
  padding: 2px 5px;
  border-radius: 3px;
  font-size: 8px;
  font-weight: 600;
  text-transform: uppercase;
}

.signal-mini .type-badge.trade {
  background: rgba(78, 205, 196, 0.2);
  color: var(--green);
}

.signal-mini .type-badge.cvd {
  background: rgba(255, 217, 61, 0.2);
  color: var(--yellow);
}

.signal-mini .type-badge.absorption {
  background: rgba(138, 43, 226, 0.2);
  color: var(--purple);
}

.signal-mini .type-badge.sweep {
  background: rgba(255, 165, 0, 0.2);
  color: orange;
}

.signal-mini .type-badge.pivot {
  background: rgba(78, 205, 196, 0.3);
  color: var(--green);
}

.signal-mini .type-badge.smart {
  background: rgba(100, 149, 237, 0.2);
  color: cornflowerblue;
}

.signal-mini .signal-asset {
  font-weight: 600;
  color: var(--text);
}

.signal-mini .signal-time {
  color: var(--text2);
  margin-left: auto;
  font-size: 9px;
}

/* Expanded signal detail */
.signal-expanded {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 8px;
  margin-top: 6px;
}

.related-signals-header {
  font-size: 10px;
  color: var(--text2);
  margin-bottom: 6px;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--border);
}

.related-signal {
  display: flex;
  align-items: center;
  padding: 4px 6px;
  margin: 3px 0;
  border-radius: 4px;
  background: var(--bg3);
  font-size: 10px;
  gap: 6px;
}

.relationship-badge {
  font-size: 8px;
  padding: 2px 4px;
  border-radius: 3px;
  font-weight: 600;
  text-transform: uppercase;
}

.relationship-badge.caused_by {
  background: rgba(255, 107, 107, 0.2);
  color: var(--red);
}

.relationship-badge.followed_by {
  background: rgba(78, 205, 196, 0.2);
  color: var(--green);
}

.relationship-badge.confirmed_by {
  background: rgba(255, 217, 61, 0.2);
  color: var(--yellow);
}

.relationship-badge.preceded_by {
  background: rgba(136, 136, 153, 0.2);
  color: var(--text2);
}

.related-signal .signal-type {
  color: var(--text);
}

.related-signal .signal-asset {
  color: var(--text2);
}

.confidence-bar {
  width: 40px;
  height: 4px;
  background: var(--bg);
  border-radius: 2px;
  overflow: hidden;
  margin-left: auto;
}

.confidence-fill {
  height: 100%;
  border-radius: 2px;
}

.confidence-fill.high {
  background: var(--green);
}

.confidence-fill.medium {
  background: var(--yellow);
}

.confidence-fill.low {
  background: var(--red);
}

/* Connection stats in header */
.connection-stats {
  font-size: 9px;
  color: var(--text2);
  padding: 2px 6px;
  background: var(--bg2);
  border-radius: 3px;
}

/* Empty state */
.empty-connections {
  text-align: center;
  padding: 20px;
  color: var(--text2);
  font-size: 11px;
}

/* Alert item expanded state */
.alert-item.expanded {
  background: var(--bg2);
}

.alert-item.clickable {
  cursor: pointer;
}

.alert-item.clickable:hover {
  background: var(--bg2);
}

/* Signal stats bar */
.signal-stats-bar {
  display: flex;
  justify-content: space-around;
  padding: 6px;
  background: var(--bg2);
  border-radius: 4px;
  margin-bottom: 8px;
  font-size: 10px;
}

.signal-stats-bar .stat-item {
  color: var(--text2);
}

.signal-stats-bar .stat-value {
  color: var(--green);
  font-weight: 600;
}

/* Signal groups container */
.signal-groups-container {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: calc(100% - 50px);
  overflow-y: auto;
}

/* Signal group side colors */
.signal-group.buy {
  border-left: 3px solid var(--green);
}

.signal-group.sell {
  border-left: 3px solid var(--red);
}

/* Primary signal in group */
.signal-primary {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 6px;
}

.signal-primary .signal-asset {
  font-weight: 700;
  font-size: 11px;
}

.signal-primary .signal-asset.buy {
  color: var(--green);
}

.signal-primary .signal-asset.sell {
  color: var(--red);
}

.signal-primary .signal-type {
  font-size: 10px;
  padding: 2px 6px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 3px;
}

.signal-primary .signal-time {
  margin-left: auto;
  font-size: 9px;
  color: var(--text2);
}

/* Related signals section */
.signal-related {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.related-signal .rel-type {
  font-size: 9px;
  color: var(--text);
}

/* Confidence bar with CSS variable */
.confidence-bar {
  position: relative;
  width: 40px;
  height: 4px;
  background: var(--bg);
  border-radius: 2px;
  overflow: hidden;
  margin-left: auto;
}

.confidence-bar::after {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: var(--conf, 50%);
  background: linear-gradient(90deg, var(--green), var(--yellow));
  border-radius: 2px;
}

/* More signals indicator */
.more-signals {
  font-size: 9px;
  color: var(--text2);
  text-align: center;
  padding: 2px;
}

/* ============================================
   MARKET NARRATIVE PANEL
   ============================================ */
.narrative-container {
  padding: 10px;
  border-radius: 6px;
  background: var(--bg2);
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.narrative-container.narrative-bullish {
  background: linear-gradient(135deg, rgba(78, 205, 196, 0.1) 0%, var(--bg2) 100%);
  border-left: 3px solid var(--green);
}

.narrative-container.narrative-bearish {
  background: linear-gradient(135deg, rgba(255, 107, 107, 0.1) 0%, var(--bg2) 100%);
  border-left: 3px solid var(--red);
}

.narrative-container.narrative-neutral {
  background: linear-gradient(135deg, rgba(136, 136, 153, 0.1) 0%, var(--bg2) 100%);
  border-left: 3px solid var(--text2);
}

.narrative-asset-selector {
  display: flex;
  gap: 4px;
}

.narrative-asset-btn {
  background: var(--bg3);
  border: 1px solid var(--border);
  color: var(--text2);
  padding: 4px 10px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 11px;
  font-weight: 600;
  transition: all 0.15s ease;
}

.narrative-asset-btn:hover {
  border-color: var(--purple);
  color: var(--text);
}

.narrative-asset-btn.active {
  background: var(--purple);
  border-color: var(--purple);
  color: #fff;
}

.narrative-summary {
  font-size: 16px;
  line-height: 1.5;
  color: var(--text);
  flex: 1;
  display: flex;
  align-items: center;
}

.narrative-counts {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}

.count-badge {
  padding: 3px 8px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
}

.count-badge.bullish {
  background: rgba(78, 205, 196, 0.2);
  color: var(--green);
}

.count-badge.bearish {
  background: rgba(255, 107, 107, 0.2);
  color: var(--red);
}

.count-badge.neutral {
  background: rgba(136, 136, 153, 0.2);
  color: var(--text2);
}

.count-time {
  font-size: 9px;
  color: var(--text2);
  margin-left: auto;
}

.narrative-asset-btn.has-story {
  border-color: var(--yellow);
}

/* ============================================
   DAILY MARKET STORY CARDS
   ============================================ */
.daily-story-card {
  background: var(--bg2);
  border-radius: 8px;
  padding: 12px;
  margin-bottom: 10px;
  border: 2px solid var(--border);
  position: relative;
  overflow: hidden;
}

.daily-story-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--purple), var(--cyan));
}

.daily-story-card.story-bullish {
  border-color: var(--green);
  background: linear-gradient(135deg, rgba(78, 205, 196, 0.1) 0%, var(--bg2) 100%);
}

.daily-story-card.story-bullish::before {
  background: linear-gradient(90deg, var(--green), var(--cyan));
}

.daily-story-card.story-bearish {
  border-color: var(--red);
  background: linear-gradient(135deg, rgba(255, 107, 107, 0.1) 0%, var(--bg2) 100%);
}

.daily-story-card.story-bearish::before {
  background: linear-gradient(90deg, var(--red), var(--orange));
}

.daily-story-card.story-neutral {
  border-color: var(--text2);
}

.story-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

.story-badge {
  background: linear-gradient(135deg, var(--purple), var(--cyan));
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 4px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.story-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
  flex: 1;
}

.story-date {
  font-size: 10px;
  color: var(--text2);
}

.story-narrative {
  font-size: 12px;
  line-height: 1.5;
  color: var(--text);
  margin-bottom: 10px;
  padding: 8px;
  background: var(--bg3);
  border-radius: 4px;
}

.story-stats {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
}

.story-stat {
  text-align: center;
  padding: 6px;
  background: var(--bg3);
  border-radius: 4px;
}

.story-stat .stat-label {
  font-size: 9px;
  color: var(--text2);
  text-transform: uppercase;
  margin-bottom: 2px;
}

.story-stat .stat-value {
  font-size: 12px;
  font-weight: 700;
  color: var(--text);
}

.story-stat .stat-value.green {
  color: var(--green);
}

.story-stat .stat-value.red {
  color: var(--red);
}

.story-stat .stat-value span.green {
  color: var(--green);
}

.story-stat .stat-value span.red {
  color: var(--red);
}

/* ============================================
   VISUAL URGENCY INDICATORS
   ============================================ */

/* High urgency - strong signals */
.alert-item.urgency-high {
  animation: urgency-pulse 2s ease-in-out infinite;
  border-left-width: 4px;
}

@keyframes urgency-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(78, 205, 196, 0.4); }
  50% { box-shadow: 0 0 0 8px rgba(78, 205, 196, 0); }
}

.alert-item.urgency-high.sell {
  animation: urgency-pulse-sell 2s ease-in-out infinite;
}

@keyframes urgency-pulse-sell {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255, 107, 107, 0.4); }
  50% { box-shadow: 0 0 0 8px rgba(255, 107, 107, 0); }
}

/* Medium urgency */
.alert-item.urgency-medium {
  border-left-width: 3px;
  background: rgba(255, 255, 255, 0.02);
}

/* Fresh alerts (< 60s old) */
.alert-item.fresh {
  background: rgba(255, 255, 255, 0.05);
  position: relative;
}

.alert-item.fresh::after {
  content: 'NEW';
  position: absolute;
  top: 4px;
  right: 4px;
  font-size: 7px;
  font-weight: 700;
  color: var(--green);
  background: rgba(78, 205, 196, 0.2);
  padding: 1px 4px;
  border-radius: 2px;
}

.alert-item.fresh.has-connections::after {
  right: 28px;
}

/* Urgency indicator in panel header */
.panel-urgency-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--green);
  animation: urgency-dot-pulse 1.5s ease-in-out infinite;
  margin-right: 6px;
}

@keyframes urgency-dot-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.5; transform: scale(0.8); }
}

.urgency-count {
  font-size: 9px;
  font-weight: 600;
  color: var(--green);
  background: rgba(78, 205, 196, 0.2);
  padding: 1px 5px;
  border-radius: 3px;
  margin-left: 4px;
}

/* ============================================
   SIGNAL LEGEND PANEL
   ============================================ */
.legend-container {
  padding: 4px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  height: 100%;
  overflow-y: auto;
}

.legend-section {
  background: var(--bg2);
  border-radius: 6px;
  padding: 8px;
}

.legend-section-title {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--text2);
  margin-bottom: 6px;
  letter-spacing: 0.5px;
}

.legend-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 0;
  font-size: 11px;
}

.legend-item:not(:last-child) {
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.legend-icon {
  font-size: 14px;
  width: 20px;
  text-align: center;
  flex-shrink: 0;
}

.legend-label {
  font-weight: 600;
  color: var(--text);
  width: 80px;
  flex-shrink: 0;
}

.legend-desc {
  color: var(--text2);
  font-size: 10px;
  flex: 1;
}

.legend-strength {
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 9px;
  font-weight: 700;
  width: 70px;
  text-align: center;
  flex-shrink: 0;
}

.legend-strength.extreme {
  background: #ff4444;
  color: #fff;
}

.legend-strength.strong {
  background: #ff8800;
  color: #fff;
}

.legend-strength.moderate {
  background: #ffcc00;
  color: #000;
}

.legend-strength.weak {
  background: #888888;
  color: #fff;
}

.legend-rel {
  font-size: 14px;
  width: 20px;
  text-align: center;
  flex-shrink: 0;
  color: var(--green);
  font-weight: bold;
}

/* ============================================
   OPTIONS FLOW PANEL - Redesigned
   ============================================ */
.options-asset-selector {
  display: flex;
  gap: 4px;
  margin-bottom: 10px;
}

.options-asset-btn {
  flex: 1;
  background: var(--bg2);
  border: 1px solid var(--border);
  color: var(--text2);
  padding: 5px 10px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 11px;
  font-weight: 600;
  transition: all 0.15s ease;
}

.options-asset-btn:hover {
  border-color: var(--purple);
}

.options-asset-btn.active {
  background: var(--purple);
  border-color: var(--purple);
  color: #fff;
}

/* Metrics Grid - 2x2 layout */
.opt-metrics-grid {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 8px !important;
  margin-bottom: 10px !important;
}

.opt-metric-card {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 8px 10px;
  text-align: center;
}

.opt-metric-label {
  font-size: 9px;
  color: var(--text2);
  text-transform: uppercase;
  letter-spacing: 0.3px;
  margin-bottom: 4px;
}

.opt-metric-value {
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
  line-height: 1.2;
}

.opt-metric-sub {
  font-size: 9px;
  color: var(--text2);
  margin-top: 2px;
}

/* Strike Walls Row */
.opt-walls-row {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 8px !important;
  margin-bottom: 10px !important;
}

.opt-wall {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 8px;
  text-align: center;
}

.opt-wall-call {
  border-top: 2px solid #00E676;
}

.opt-wall-put {
  border-top: 2px solid #FF5252;
}

.opt-wall-label {
  font-size: 8px;
  color: var(--text2);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 4px;
}

.opt-wall-price {
  font-size: 14px;
  font-weight: 700;
  line-height: 1.2;
}

.opt-wall-call .opt-wall-price {
  color: #00E676;
}

.opt-wall-put .opt-wall-price {
  color: #FF5252;
}

.opt-wall-oi {
  font-size: 9px;
  color: var(--text2);
  margin-top: 2px;
}

/* Expiry Table */
.opt-expiry-section {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 8px;
  margin-bottom: 8px;
}

.opt-expiry-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 10px;
}

.opt-expiry-table th {
  font-size: 8px;
  color: var(--text2);
  text-transform: uppercase;
  letter-spacing: 0.3px;
  font-weight: 600;
  padding: 4px 6px;
  text-align: left;
  border-bottom: 1px solid var(--border);
}

.opt-expiry-table th:last-child {
  text-align: center;
}

.opt-expiry-table td {
  padding: 5px 6px;
  color: var(--text);
  border-bottom: 1px solid rgba(255,255,255,0.05);
}

.opt-expiry-table tr:last-child td {
  border-bottom: none;
}

.opt-cp-bar {
  display: block;
  width: 100%;
  height: 6px;
  background: #FF5252;
  border-radius: 3px;
  overflow: hidden;
}

.opt-cp-calls {
  display: block;
  height: 100%;
  background: #00E676;
}

.opt-expiry-legend {
  display: flex;
  justify-content: center;
  gap: 12px;
  font-size: 8px;
  color: var(--text2);
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px solid var(--border);
}

.opt-leg-call::before,
.opt-leg-put::before {
  content: '';
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 2px;
  margin-right: 4px;
  vertical-align: middle;
}

.opt-leg-call::before {
  background: #00E676;
}

.opt-leg-put::before {
  background: #FF5252;
}

.opt-footer {
  text-align: center;
  font-size: 8px;
  color: var(--text2);
  opacity: 0.6;
}