@charset "UTF-8";
:root {
  --bg-color: #0A0A0F;
  --bg-secondary: #10101A;
  --card-bg: #171726;
  --card-bg-hover: #1e1e32;
  --text-primary: #F5F7FF;
  --text-secondary: #B8BECC;
  --text-muted: #7F8799;
  --primary-color: #FF5A1F;
  --primary-hover: #FF6C3A;
  --success-color: #00FF85;
  --danger-color: #FF3B4E;
  --warning-color: #FFD166;
  --info-color: #66A6FF;
  --border-color: #2A2F3A;
  --input-border: #3A4050;
  --input-bg: #0A0A0F;
  --shadow: 0 1px 0 rgba(255, 255, 255, 0.03), 0 10px 28px rgba(0, 0, 0, 0.45);
  --shadow-lg: 0 1px 0 rgba(255, 255, 255, 0.03), 0 20px 40px rgba(0, 0, 0, 0.5);
  --focus-ring: rgba(0, 255, 133, 0.45);
  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 18px;
  --font-ui: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Inter, Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, monospace;
  --font-display: Space Grotesk, Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  --transition-fast: 140ms ease;
  --transition-med: 220ms ease;
  --chart-neutral: #A8B0C2;
}
/* Trade Picker - Main Stylesheet */
/* Carbon + Orange/Green Theme */
:root {
  /* Core surfaces (Carbon dark) */
  --bg-color: #0A0A0F; /* page background */
  --bg-secondary: #10101A; /* panels */
  --card-bg: #171726; /* cards */
  --card-bg-hover: #1e1e32; /* card hover */
  /* Text hierarchy */
  --text-primary: #F5F7FF; /* headings, important */
  --text-secondary: #B8BECC; /* body text */
  --text-muted: #7F8799; /* captions, hints */
  /* Brand colors */
  --primary-color: #FF5A1F; /* signal orange - primary actions */
  --primary-hover: #FF6C3A; /* orange hover */
  --success-color: #00FF85; /* profit green */
  --danger-color: #FF3B4E; /* loss/error red */
  --warning-color: #FFD166; /* warnings */
  --info-color: #66A6FF; /* info/links */
  /* Borders and lines */
  --border-color: #2A2F3A;
  --input-border: #3A4050;
  --input-bg: #0A0A0F;
  /* Shadows */
  --shadow: 0 1px 0 rgba(255,255,255,0.03), 0 10px 28px rgba(0,0,0,0.45);
  --shadow-lg: 0 1px 0 rgba(255,255,255,0.03), 0 20px 40px rgba(0,0,0,0.5);
  /* Focus ring (green glow) */
  --focus-ring: rgba(0, 255, 133, 0.45);
  /* Shape */
  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 18px;
  /* Typography */
  --font-ui: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Inter, Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  /* Transitions */
  --transition-fast: 140ms ease;
  --transition-med: 220ms ease;
  /* Chart colors */
  --chart-neutral: #A8B0C2;
}
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Inter, Arial, sans-serif;
  background-color: #0A0A0F;
  color: #F5F7FF;
  line-height: 1.6;
}
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1rem;
}
/* Header */
.header {
  background-color: #171726;
  border-bottom: 1px solid #2A2F3A;
  padding: 1rem 0;
  position: sticky;
  top: 0;
  z-index: 100;
}
.header .container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.logo {
  font-size: 1.5rem;
  font-weight: 700;
  color: #FF5A1F;
}
.nav {
  display: flex;
  gap: 1.5rem;
}
.nav-link {
  text-decoration: none;
  color: #B8BECC;
  font-weight: 500;
  transition: color 0.2s;
}
.nav-link:hover,
.nav-link.active {
  color: #FF5A1F;
}
/* User Menu */
.user-menu {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-left: 1.5rem;
  padding-left: 1.5rem;
  border-left: 1px solid #2A2F3A;
}
.user-name {
  color: #B8BECC;
  font-size: 0.9rem;
}
.logout-link {
  color: #B8BECC;
  font-size: 0.9rem;
}
.logout-link:hover {
  color: #FF3B4E;
}
/* Main Content */
.main {
  padding: 2rem 0;
}
.section {
  margin-bottom: 2rem;
}
.section-title {
  font-size: 1.25rem;
  font-weight: 600;
  margin-bottom: 1rem;
  color: #F5F7FF;
}
/* Cards */
.card {
  background-color: #171726;
  border-radius: 0.5rem;
  padding: 1.5rem;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.03), 0 10px 28px rgba(0, 0, 0, 0.45);
  border: 1px solid #2A2F3A;
}
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem;
}
.index-card {
  text-align: center;
}
.index-card h3 {
  font-size: 0.875rem;
  color: #B8BECC;
  margin-bottom: 0.5rem;
}
.index-card .value {
  font-size: 1.5rem;
  font-weight: 700;
  color: #F5F7FF;
}
.index-card .change {
  font-size: 0.875rem;
  font-weight: 500;
}
.change.positive {
  color: #00FF85;
}
.change.negative {
  color: #FF3B4E;
}
/* Forms */
.search-form {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 1rem;
}
.input {
  flex: 1;
  padding: 0.75rem 1rem;
  border: 1px solid #3A4050;
  border-radius: 10px;
  font-size: 1rem;
  transition: border-color 0.2s;
  background-color: #0A0A0F;
  color: #F5F7FF;
}
/* Base button element reset */
button {
  border-radius: 10px;
}
.input::placeholder {
  color: #7F8799;
}
.input:focus {
  outline: none;
  border-color: #FF5A1F;
  box-shadow: 0 0 0 2px rgba(0, 255, 133, 0.45);
}
/* Date inputs - ensure dark theme styling */
input[type=date],
input[type=datetime-local],
input[type=time] {
  padding: 0.5rem 0.75rem;
  border: 1px solid #3A4050;
  border-radius: 10px;
  font-size: 0.875rem;
  background-color: #0A0A0F;
  color: #F5F7FF;
  color-scheme: dark;
}
input[type=date]:focus,
input[type=datetime-local]:focus,
input[type=time]:focus {
  outline: none;
  border-color: #FF5A1F;
  box-shadow: 0 0 0 2px rgba(0, 255, 133, 0.45);
}
input[type=date]::-webkit-calendar-picker-indicator,
input[type=datetime-local]::-webkit-calendar-picker-indicator,
input[type=time]::-webkit-calendar-picker-indicator {
  filter: invert(1);
  cursor: pointer;
}
.btn {
  padding: 0.75rem 1.5rem;
  border: none;
  border-radius: 10px;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  text-decoration: none;
  display: inline-block;
}
.btn-primary {
  background-color: #FF5A1F;
  color: white;
}
.btn-primary:hover {
  background-color: #FF6C3A;
  transform: translateY(-1px);
}
.btn-secondary {
  background-color: #10101A;
  color: #F5F7FF;
  border: 1px solid #2A2F3A;
}
.btn-secondary:hover {
  background-color: #1e1e32;
}
.btn-sm {
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
}
/* Lists */
.trends-list,
.opportunities-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
/* Markets Section Styles */
.markets-subsections {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}
.markets-section {
  border-bottom: 1px solid #2A2F3A;
  padding-bottom: 1.5rem;
}
.markets-section:last-child {
  border-bottom: none;
  padding-bottom: 0;
}
.markets-subtitle {
  font-size: 0.875rem;
  font-weight: 600;
  color: #B8BECC;
  margin-bottom: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.time-period-label {
  font-size: 0.75rem;
  font-weight: 400;
  color: #7F8799;
  text-transform: none;
  letter-spacing: normal;
}
/* Sector Performance Bars */
.sector-bars {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.sector-bar-item {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.sector-bar-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.sector-bar-name {
  font-size: 0.8125rem;
  color: #F5F7FF;
}
.sector-bar-change {
  font-size: 0.75rem;
  font-weight: 600;
}
.sector-bar-item.positive .sector-bar-change {
  color: #00FF85;
}
.sector-bar-item.negative .sector-bar-change {
  color: #FF3B4E;
}
.sector-bar-track {
  height: 6px;
  background-color: rgba(255, 255, 255, 0.05);
  border-radius: 3px;
  overflow: hidden;
}
.sector-bar-fill {
  height: 100%;
  border-radius: 3px;
  transition: width 0.3s ease;
}
.sector-bar-fill.positive {
  background-color: #00FF85;
}
.sector-bar-fill.negative {
  background-color: #FF3B4E;
}
/* Spot Market Data Section */
.spot-market-grid {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1.5rem;
  align-items: start;
}
.spot-market-main {
  text-align: center;
  padding: 1.5rem;
  background: linear-gradient(135deg, rgba(255, 90, 31, 0.1), rgba(23, 23, 38, 0.8));
  border-radius: 14px;
  border: 1px solid rgba(255, 90, 31, 0.2);
}
.spot-price-display {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.spot-price-label {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #7F8799;
}
.spot-price-value {
  font-size: 2.25rem;
  font-weight: 700;
  color: #F5F7FF;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
}
.spot-price-change {
  font-size: 1.125rem;
  font-weight: 600;
}
.spot-market-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 1rem;
}
.spot-stat {
  background-color: #0A0A0F;
  padding: 0.875rem;
  border-radius: 10px;
  text-align: center;
}
.spot-stat-label {
  display: block;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #7F8799;
  margin-bottom: 0.25rem;
}
.spot-stat-value {
  font-size: 1rem;
  font-weight: 600;
  color: #F5F7FF;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
}
@media (max-width: 768px) {
  .spot-market-grid {
    grid-template-columns: 1fr;
  }
  .spot-market-stats {
    grid-template-columns: repeat(2, 1fr);
  }
}
/* Options Market Overview */
.options-market-grid {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.options-overview-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem;
}
.options-overview-stat {
  background-color: #0A0A0F;
  padding: 1rem;
  border-radius: 0.375rem;
  text-align: center;
}
.options-overview-stat .stat-label {
  display: block;
  font-size: 0.75rem;
  color: #B8BECC;
  margin-bottom: 0.5rem;
}
.options-overview-stat .stat-value {
  font-size: 1.25rem;
  font-weight: 700;
  color: #F5F7FF;
}
.options-overview-stat.bullish .stat-value {
  color: #00FF85;
}
.options-overview-stat.bearish .stat-value {
  color: #FF3B4E;
}
.options-overview-list {
  background-color: #0A0A0F;
  padding: 1rem;
  border-radius: 0.375rem;
}
.options-overview-list .stat-label {
  display: block;
  font-size: 0.75rem;
  color: #B8BECC;
  margin-bottom: 0.5rem;
}
.stat-list {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}
.stat-list-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.375rem 0.5rem;
  border-radius: 0.25rem;
  text-decoration: none;
  color: #F5F7FF;
  transition: background-color 0.2s;
}
.stat-list-item:hover {
  background-color: rgba(255, 255, 255, 0.05);
}
.stat-list-item .symbol {
  font-weight: 600;
  font-size: 0.875rem;
}
.stat-list-item .value {
  font-size: 0.8125rem;
  color: #B8BECC;
}
.stat-list-item.bullish .value {
  color: #00FF85;
}
.stat-list-item.bearish .value {
  color: #FF3B4E;
}
/* Trend Items */
.trend-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.5rem 0.75rem;
  background-color: #0A0A0F;
  border-radius: 0.375rem;
  text-decoration: none;
  color: #F5F7FF;
  transition: background-color 0.2s;
}
.trend-item:hover {
  background-color: rgba(255, 255, 255, 0.08);
}
.trend-symbol {
  font-weight: 600;
  font-size: 0.875rem;
}
.trend-direction {
  font-size: 1rem;
}
.trend-direction.up {
  color: #00FF85;
}
.trend-direction.down {
  color: #FF3B4E;
}
.trend-strength {
  margin-left: auto;
  font-size: 0.8125rem;
  color: #B8BECC;
}
.list-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.75rem;
  background-color: #0A0A0F;
  border-radius: 0.375rem;
}
.placeholder {
  color: #B8BECC;
  text-align: center;
  padding: 2rem;
}
/* Symbol Result */
.symbol-result {
  margin-top: 1rem;
  padding: 1rem;
  background-color: #0A0A0F;
  border-radius: 0.375rem;
}
.symbol-result.hidden {
  display: none;
}
/* Footer */
.footer {
  background-color: #171726;
  border-top: 1px solid #2A2F3A;
  padding: 1.5rem 0;
  text-align: center;
  color: #B8BECC;
  font-size: 0.875rem;
}
/* Responsive */
@media (max-width: 768px) {
  .header .container {
    flex-direction: column;
    gap: 1rem;
  }
  .nav {
    flex-wrap: wrap;
    justify-content: center;
  }
  .search-form {
    flex-direction: column;
  }
}
/* Scraping Controls */
.scrape-controls {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 1rem;
}
/* Activity Monitor */
.activity-monitor {
  margin-bottom: 1rem;
}
.activity-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
}
.activity-header h3 {
  margin: 0;
  font-size: 1.125rem;
}
.activity-status {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  background-color: #0A0A0F;
  border-radius: 0.375rem;
  font-size: 0.875rem;
}
.activity-actions {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-bottom: 1rem;
}
.scheduler-summary {
  display: flex;
  gap: 1.5rem;
  align-items: center;
  padding: 0.75rem 1rem;
  background-color: #0A0A0F;
  border-radius: 0.375rem;
  font-size: 0.875rem;
  margin-bottom: 1rem;
  flex-wrap: wrap;
}
.scheduler-badge {
  font-weight: 600;
}
.badge-active {
  color: #00FF85;
}
.badge-inactive {
  color: #B8BECC;
}
.next-run, .last-run {
  color: #B8BECC;
}
.activity-progress {
  margin-bottom: 1rem;
}
.activity-progress.hidden {
  display: none;
}
.activity-log-container {
  border: 1px solid #2A2F3A;
  border-radius: 0.375rem;
  overflow: hidden;
}
.activity-log-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.5rem 0.75rem;
  background-color: #0A0A0F;
  border-bottom: 1px solid #2A2F3A;
  font-size: 0.8125rem;
  font-weight: 500;
}
.activity-log {
  max-height: 200px;
  overflow-y: auto;
  padding: 0.5rem;
  background-color: #1e293b;
  font-family: "SF Mono", Consolas, monospace;
  font-size: 0.75rem;
}
.activity-log .log-entry {
  display: flex;
  gap: 0.5rem;
  padding: 0.25rem 0.5rem;
  border-radius: 0.25rem;
  color: #e2e8f0;
}
.activity-log .log-entry:hover {
  background-color: rgba(255, 255, 255, 0.05);
}
.activity-log .log-time {
  color: #64748b;
  flex-shrink: 0;
}
.activity-log .log-source {
  flex-shrink: 0;
}
.activity-log .log-message {
  flex: 1;
  word-break: break-word;
}
.activity-log .log-entry.log-success .log-message {
  color: #4ade80;
}
.activity-log .log-entry.log-warning .log-message {
  color: #fbbf24;
}
.activity-log .log-entry.log-error .log-message {
  color: #f87171;
}
.btn-xs {
  font-size: 0.75rem;
  padding: 0.25rem 0.5rem;
}
.btn-text {
  background: none;
  border: none;
  color: #B8BECC;
  cursor: pointer;
}
.btn-text:hover {
  color: #FF5A1F;
}
.btn-outline {
  background: transparent;
  border: 1px solid #FF5A1F;
  color: #FF5A1F;
}
.btn-outline:hover {
  background: #FF5A1F;
  color: white;
}
/* Duplicate btn-secondary removed - correct definition is above */
.btn-danger {
  background-color: #FF3B4E;
  color: white;
}
.btn-danger:hover {
  background-color: #dc2626;
}
.btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
.scrape-status {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  background-color: #0A0A0F;
  border-radius: 0.375rem;
}
.status-indicator {
  width: 10px;
  height: 10px;
  border-radius: 50%;
}
.status-indicator.idle {
  background-color: #B8BECC;
}
.status-indicator.running {
  background-color: #00FF85;
  animation: pulse 1s infinite;
}
@keyframes pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}
.scrape-results {
  margin-top: 1rem;
  padding: 1rem;
  background-color: #0A0A0F;
  border-radius: 0.375rem;
}
.scrape-results.hidden {
  display: none;
}
.scrape-result-summary {
  display: flex;
  gap: 1rem;
  align-items: center;
  flex-wrap: wrap;
}
.result-status {
  font-weight: 600;
  text-transform: uppercase;
  font-size: 0.75rem;
  padding: 0.25rem 0.5rem;
  border-radius: 0.25rem;
}
.result-status.success {
  background-color: rgba(0, 255, 133, 0.2);
  color: #00FF85;
}
.result-status.error {
  background-color: rgba(255, 59, 78, 0.2);
  color: #FF3B4E;
}
/* Watchlist */
.watchlist-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
}
.watchlist-count {
  color: #B8BECC;
  font-size: 0.875rem;
}
.add-symbol-form {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 1rem;
}
.add-symbol-form .input {
  max-width: 150px;
}
.watchlist-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 1rem;
}
.watchlist-item {
  background-color: #0A0A0F;
  border-radius: 0.5rem;
  padding: 1rem;
  transition: transform 0.2s, box-shadow 0.2s;
}
.watchlist-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.03), 0 20px 40px rgba(0, 0, 0, 0.5);
}
.watchlist-item.disabled {
  opacity: 0.6;
  background: linear-gradient(135deg, #171726 0%, #10101A 100%);
}
.watchlist-item.disabled:hover {
  transform: translateY(-1px);
}
.watchlist-item-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.5rem;
}
.watchlist-symbol {
  font-weight: 700;
  color: #FF5A1F;
  font-size: 1.25rem;
  white-space: nowrap;
}
.watchlist-actions {
  display: flex;
  gap: 0.25rem;
  flex-shrink: 0;
  margin-left: auto;
}
/* Watchlist Price Row (second row) */
.watchlist-price-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}
.watchlist-price-row .price-value {
  font-weight: 600;
  font-size: 1rem;
  color: #F5F7FF;
}
.watchlist-price-row .price-change {
  font-size: 0.75rem;
  padding: 0.125rem 0.375rem;
  border-radius: 0.25rem;
  white-space: nowrap;
}
.watchlist-price-row.price-up .price-change {
  background-color: rgba(0, 255, 133, 0.15);
  color: #00FF85;
}
.watchlist-price-row.price-down .price-change {
  background-color: rgba(239, 68, 68, 0.15);
  color: #FF3B4E;
}
.btn-toggle {
  background: none;
  border: none;
  color: #B8BECC;
  cursor: pointer;
  font-size: 0.875rem;
  line-height: 1;
  padding: 0.25rem 0.375rem;
  border-radius: 0.25rem;
  transition: background-color 0.2s, color 0.2s;
}
.btn-toggle.btn-disable:hover {
  background-color: #FFD166;
  color: white;
}
.btn-toggle.btn-enable:hover {
  background-color: #00FF85;
  color: white;
}
.btn-remove {
  background: none;
  border: none;
  color: #B8BECC;
  cursor: pointer;
  font-size: 1.25rem;
  line-height: 1;
  padding: 0.25rem;
  border-radius: 0.25rem;
  transition: background-color 0.2s, color 0.2s;
}
.btn-remove:hover {
  background-color: #FF3B4E;
  color: white;
}
.badge.disabled {
  background-color: #94a3b8;
  color: white;
  font-size: 0.625rem;
}
/* Watchlist Options Stats */
.watchlist-options-stats {
  display: flex;
  gap: 0.75rem;
  margin-bottom: 0.5rem;
  flex-wrap: wrap;
}
.watchlist-options-stats .options-stat {
  font-size: 0.6875rem;
  color: #B8BECC;
  background-color: rgba(255, 255, 255, 0.05);
  padding: 0.125rem 0.375rem;
  border-radius: 0.25rem;
}
.watchlist-options-stats .options-stat.bullish {
  background-color: rgba(0, 255, 133, 0.1);
  color: #00FF85;
}
.watchlist-options-stats .options-stat.bearish {
  background-color: rgba(239, 68, 68, 0.1);
  color: #FF3B4E;
}
.watchlist-meta {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-bottom: 0.5rem;
}
.sector-tag {
  font-size: 0.625rem;
  background-color: #2A2F3A;
  padding: 0.125rem 0.375rem;
  border-radius: 0.25rem;
  color: #B8BECC;
}
.market-cap {
  font-size: 0.75rem;
  color: #B8BECC;
}
.watchlist-badges {
  display: flex;
  gap: 0.25rem;
}
.badge {
  font-size: 0.625rem;
  font-weight: 600;
  padding: 0.125rem 0.375rem;
  border-radius: 0.25rem;
}
.badge.sp500 {
  background-color: rgba(102, 166, 255, 0.2);
  color: #66A6FF;
}
.badge.nasdaq {
  background-color: rgba(0, 255, 133, 0.2);
  color: #00FF85;
}
.badge.dow {
  background-color: rgba(255, 209, 102, 0.2);
  color: #FFD166;
}
.placeholder.error {
  color: #FF3B4E;
}
/* Filter Controls */
.filter-controls {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 1rem;
  padding: 0.75rem;
  background-color: #0A0A0F;
  border-radius: 0.375rem;
}
.filter-group {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.filter-group label {
  font-size: 0.75rem;
  color: #B8BECC;
  font-weight: 500;
}
.select {
  min-width: 150px;
  padding: 0.5rem 0.75rem;
  font-size: 0.875rem;
}
/* Sort Controls */
.sort-controls {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-bottom: 1rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid #2A2F3A;
}
.sort-label {
  font-size: 0.875rem;
  color: #B8BECC;
}
.sort-btn {
  padding: 0.375rem 0.75rem;
  font-size: 0.75rem;
  background-color: #0A0A0F;
  color: #B8BECC;
  border: 1px solid #2A2F3A;
  border-radius: 0.25rem;
  cursor: pointer;
  transition: all 0.2s;
}
.sort-btn:hover {
  border-color: #FF5A1F;
  color: #FF5A1F;
}
.sort-btn.sort-asc,
.sort-btn.sort-desc {
  background-color: #FF5A1F;
  color: white;
  border-color: #FF5A1F;
}
.sort-btn.sort-asc::after {
  content: " ↑";
}
.sort-btn.sort-desc::after {
  content: " ↓";
}
/* Show Disabled Toggle */
.show-disabled-toggle {
  margin-bottom: 1rem;
}
.toggle-label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  color: #B8BECC;
  cursor: pointer;
}
.toggle-label input[type=checkbox] {
  width: 16px;
  height: 16px;
  cursor: pointer;
}
/* Danger Zone (Settings) */
.danger-zone {
  background-color: rgba(255, 59, 78, 0.1);
  border: 1px solid rgba(255, 59, 78, 0.3);
  border-radius: 0.5rem;
  padding: 1rem;
  margin-top: 1rem;
}
.danger-warning {
  color: #FF3B4E;
  font-size: 0.875rem;
  margin-bottom: 1rem;
}
/* Scrape Controls Enhanced */
.scrape-controls {
  flex-direction: column;
}
.scrape-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
}
.scrape-actions {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
}
/* Progress Bar */
.scrape-progress {
  margin-top: 1rem;
  padding: 0.75rem;
  background-color: #0A0A0F;
  border-radius: 0.375rem;
}
.scrape-progress.hidden {
  display: none;
}
.progress-bar {
  height: 8px;
  background-color: #2A2F3A;
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 0.5rem;
}
.progress-fill {
  height: 100%;
  background-color: #FF5A1F;
  transition: width 0.3s ease;
}
.progress-text {
  font-size: 0.75rem;
  color: #B8BECC;
  text-align: center;
}
/* Scrape Logs */
.scrape-logs {
  margin-top: 1rem;
  max-height: 200px;
  overflow-y: auto;
  background-color: #1e293b;
  border-radius: 0.375rem;
  padding: 0.75rem;
  font-family: "Monaco", "Menlo", monospace;
  font-size: 0.75rem;
}
.log-entry {
  display: flex;
  gap: 0.75rem;
  padding: 0.25rem 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.log-entry:last-child {
  border-bottom: none;
}
.log-time {
  color: #64748b;
  flex-shrink: 0;
}
.log-message {
  color: #e2e8f0;
}
.log-entry.log-info .log-message {
  color: #60a5fa;
}
.log-entry.log-success .log-message {
  color: #34d399;
}
.log-entry.log-warning .log-message {
  color: #fbbf24;
}
.log-entry.log-error .log-message {
  color: #f87171;
}
/* Watchlist Scores */
.watchlist-scores {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.25rem 0.5rem;
  margin: 0.5rem 0;
}
.mini-score {
  font-size: 0.7rem;
  padding: 0.125rem 0.375rem;
  border-radius: 0.25rem;
  background-color: #2A2F3A;
  text-align: center;
}
.mini-score.score-bullish {
  background-color: rgba(0, 255, 133, 0.2);
  color: #00FF85;
}
.mini-score.score-bearish {
  background-color: rgba(255, 59, 78, 0.2);
  color: #FF3B4E;
}
.mini-score.score-neutral {
  background-color: rgba(255, 209, 102, 0.2);
  color: #FFD166;
}
/* Watchlist Item Clickable */
.watchlist-item {
  cursor: pointer;
}
/* Settings Section */
.settings-group {
  margin-bottom: 2rem;
}
.settings-group:last-child {
  margin-bottom: 0;
}
.settings-group h3 {
  margin-bottom: 0.75rem;
  color: #F5F7FF;
}
.settings-description {
  color: #B8BECC;
  font-size: 0.875rem;
  margin-bottom: 1rem;
}
.api-key-form {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-bottom: 0.75rem;
}
.api-key-input {
  min-width: 280px;
  flex: 1;
}
.settings-help {
  font-size: 0.75rem;
  color: #B8BECC;
}
.settings-help a {
  color: #FF5A1F;
}
/* Stock Detail Page Styles */
.stock-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 1rem;
}
.stock-symbol {
  font-size: 2rem;
  font-weight: 700;
  color: #FF5A1F;
}
.stock-name {
  font-size: 1.125rem;
  color: #B8BECC;
}
.stock-meta-badges {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-top: 0.5rem;
}
.back-link {
  text-decoration: none;
  color: #B8BECC;
  display: flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.875rem;
}
.back-link:hover {
  color: #FF5A1F;
}
/* Score Cards */
.scores-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem;
  margin-top: 1rem;
}
.score-card {
  background-color: #0A0A0F;
  border-radius: 0.5rem;
  padding: 1rem;
  text-align: center;
}
.score-label {
  font-size: 0.75rem;
  color: #B8BECC;
  text-transform: uppercase;
  font-weight: 500;
  margin-bottom: 0.5rem;
}
.score-value {
  font-size: 2rem;
  font-weight: 700;
}
.score-value.bullish {
  color: #00FF85;
}
.score-value.bearish {
  color: #FF3B4E;
}
.score-value.neutral {
  color: #FFD166;
}
.score-bar {
  height: 6px;
  background-color: #2A2F3A;
  border-radius: 3px;
  margin-top: 0.75rem;
  overflow: hidden;
  position: relative;
}
.score-bar-fill {
  height: 100%;
  border-radius: 3px;
  transition: width 0.3s ease;
}
.score-bar-fill.bullish {
  background-color: #00FF85;
}
.score-bar-fill.bearish {
  background-color: #FF3B4E;
}
/* Timeline */
.timeline-controls {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 1rem;
}
.timeline-filter {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.875rem;
  color: #B8BECC;
}
.timeline-filter input[type=checkbox] {
  accent-color: #FF5A1F;
}
.timeline {
  position: relative;
  padding-left: 2rem;
}
.timeline::before {
  content: "";
  position: absolute;
  left: 8px;
  top: 0;
  bottom: 0;
  width: 2px;
  background-color: #2A2F3A;
}
.timeline-now {
  position: relative;
  padding: 0.5rem 0;
  margin: 1rem 0;
}
.timeline-now-line {
  position: absolute;
  left: -2rem;
  right: 0;
  top: 50%;
  height: 2px;
  background-color: #FF3B4E;
  transform: translateY(-50%);
}
.timeline-now-text {
  position: relative;
  display: inline-block;
  background-color: #FF3B4E;
  color: white;
  padding: 0.25rem 0.75rem;
  border-radius: 9999px;
  font-size: 0.75rem;
  font-weight: 600;
  margin-left: -0.5rem;
}
.timeline-item {
  position: relative;
  padding: 0.75rem 0 0.75rem 1rem;
}
.timeline-item::before {
  content: "";
  position: absolute;
  left: -1.5rem;
  top: 1rem;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background-color: #171726;
  border: 2px solid #2A2F3A;
}
.timeline-item.future::before {
  border-color: #FF5A1F;
  border-style: dashed;
}
.timeline-item.past::before {
  background-color: #FF5A1F;
  border-color: #FF5A1F;
}
.timeline-item.event::before {
  border-color: #FFD166;
}
.timeline-item.news::before {
  border-color: #00FF85;
}
.timeline-content {
  background-color: #0A0A0F;
  border-radius: 0.375rem;
  padding: 0.75rem;
}
.timeline-date {
  font-size: 0.75rem;
  color: #B8BECC;
  margin-bottom: 0.25rem;
}
.timeline-title {
  font-weight: 600;
  margin-bottom: 0.25rem;
}
.timeline-source {
  font-size: 0.75rem;
  color: #B8BECC;
}
.timeline-sentiment {
  display: inline-block;
  font-size: 0.625rem;
  font-weight: 600;
  padding: 0.125rem 0.375rem;
  border-radius: 0.25rem;
  margin-left: 0.5rem;
}
.timeline-sentiment.positive {
  background-color: rgba(16, 185, 129, 0.2);
  color: #10b981;
}
.timeline-sentiment.negative {
  background-color: rgba(239, 68, 68, 0.2);
  color: #ef4444;
}
.timeline-sentiment.neutral {
  background-color: #10101A;
  color: #B8BECC;
}
/* AI Extracted Events */
.timeline-item.extracted_event {
  border-left: 3px solid #8b5cf6;
  margin-left: -3px;
}
.timeline-item.extracted_event::before {
  border-color: #8b5cf6;
  background: linear-gradient(135deg, #8b5cf6 0%, #6366f1 100%);
}
.timeline-item.extracted_event.future::before {
  border-style: dashed;
  background: transparent;
}
.timeline-item.ai-extracted .timeline-content {
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.15) 0%, rgba(99, 102, 241, 0.1) 100%);
  border: 1px solid rgba(139, 92, 246, 0.3);
}
.ai-badge {
  background: linear-gradient(135deg, #8b5cf6 0%, #6366f1 100%);
  color: white;
  padding: 0.125rem 0.5rem;
  border-radius: 9999px;
  font-size: 0.625rem;
  font-weight: 600;
}
.confidence-badge {
  background-color: rgba(139, 92, 246, 0.25);
  color: #a78bfa;
  padding: 0.125rem 0.5rem;
  border-radius: 9999px;
  font-size: 0.625rem;
  font-weight: 600;
}
/* Extracted Events Score Bars */
.extracted-scores {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  margin: 0.75rem 0;
  padding: 0.75rem;
  background-color: #10101A;
  border-radius: 0.375rem;
  border: 1px solid #2A2F3A;
}
.score-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.score-row .score-label {
  flex: 0 0 100px;
  font-size: 0.75rem;
  font-weight: 500;
  color: #B8BECC;
}
.mini-score-bar {
  flex: 1;
  height: 8px;
  background-color: #0A0A0F;
  border-radius: 4px;
  overflow: hidden;
}
.mini-score-fill {
  height: 100%;
  border-radius: 4px;
  transition: width 0.3s ease;
}
.score-num {
  flex: 0 0 30px;
  font-size: 0.75rem;
  font-weight: 600;
  text-align: right;
  color: #F5F7FF;
}
/* Event Date Text */
.event-date-text {
  font-size: 0.75rem;
  color: #B8BECC;
  margin-top: 0.5rem;
  padding: 0.25rem 0.5rem;
  background-color: rgba(255, 209, 102, 0.2);
  border-radius: 0.25rem;
  display: inline-block;
}
/* Recurring Badge */
.recurring-badge {
  display: inline-block;
  font-size: 0.625rem;
  font-weight: 600;
  padding: 0.125rem 0.375rem;
  background-color: rgba(102, 166, 255, 0.2);
  color: #66A6FF;
  border-radius: 0.25rem;
  margin-top: 0.5rem;
  margin-right: 0.5rem;
}
/* Source Reference */
.source-ref {
  display: inline-block;
  font-size: 0.625rem;
  color: #B8BECC;
  margin-top: 0.5rem;
}
/* Company Info Section */
.info-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem;
}
.info-item {
  padding: 0.75rem;
  background-color: #0A0A0F;
  border-radius: 0.375rem;
}
.info-label {
  font-size: 0.75rem;
  color: #B8BECC;
  margin-bottom: 0.25rem;
}
.info-value {
  font-weight: 600;
}
/* Analysis Section */
.analysis-loading {
  text-align: center;
  padding: 2rem;
  color: #B8BECC;
}
.analysis-content {
  white-space: pre-wrap;
  line-height: 1.6;
}
/* Responsive adjustments */
@media (max-width: 768px) {
  .filter-controls {
    flex-direction: column;
  }
  .filter-group {
    width: 100%;
  }
  .select {
    width: 100%;
  }
  .sort-controls {
    flex-wrap: wrap;
  }
  .api-key-form {
    flex-direction: column;
  }
  .api-key-input {
    min-width: unset;
    width: 100%;
  }
  .scores-grid {
    grid-template-columns: 1fr 1fr;
  }
}
/* Factors Table */
.factors-section {
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid #2A2F3A;
}
.subsection-title {
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: 1rem;
  color: #F5F7FF;
}
.factors-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
}
.factors-table th,
.factors-table td {
  padding: 0.75rem;
  text-align: left;
  border-bottom: 1px solid #2A2F3A;
}
.factors-table th {
  background: #0A0A0F;
  font-weight: 600;
  color: #B8BECC;
  font-size: 0.75rem;
  text-transform: uppercase;
}
.factors-table td:first-child {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
}
.factor-icon {
  margin-right: 0.5rem;
}
.factor-name {
  font-weight: 600;
}
.factor-desc {
  font-size: 0.7rem;
  color: #B8BECC;
  display: block;
}
.factor-value,
.factor-contribution {
  font-weight: 600;
  font-family: "Monaco", "Menlo", monospace;
}
.factor-value.positive,
.factor-contribution.positive {
  color: #00FF85;
}
.factor-value.negative,
.factor-contribution.negative {
  color: #FF3B4E;
}
.factor-weight {
  color: #B8BECC;
  font-size: 0.8rem;
}
/* Factor Charts */
.factor-charts-section {
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid #2A2F3A;
}
.chart-controls {
  display: flex;
  gap: 1rem;
  margin-bottom: 1rem;
  flex-wrap: wrap;
  align-items: center;
}
.chart-controls label {
  font-size: 0.875rem;
  color: #B8BECC;
}
.chart-controls select {
  padding: 0.25rem 0.5rem;
  border: 1px solid #2A2F3A;
  border-radius: 0.25rem;
  font-size: 0.875rem;
  background: #171726;
  color: #F5F7FF;
}
.btn-sm {
  padding: 0.25rem 0.75rem;
  font-size: 0.8rem;
}
.charts-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
}
.chart-container {
  background: #0A0A0F;
  border-radius: 0.5rem;
  padding: 1rem;
}
.chart-title {
  font-size: 0.875rem;
  font-weight: 600;
  margin-bottom: 0.75rem;
  color: #F5F7FF;
}
.chart-container canvas {
  width: 100%;
  height: 200px;
  border-radius: 0.25rem;
}
.chart-legend {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  margin-top: 1rem;
  justify-content: center;
}
.legend-item {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.75rem;
  color: #B8BECC;
}
.legend-color {
  width: 12px;
  height: 12px;
  border-radius: 2px;
}
/* Source metadata in timeline */
.timeline-source-info {
  font-size: 0.7rem;
  color: #B8BECC;
  margin-top: 0.25rem;
}
.timeline-source-info .collector {
  background: #0A0A0F;
  padding: 0.125rem 0.375rem;
  border-radius: 0.25rem;
  margin-right: 0.5rem;
}
.timeline-collected {
  font-style: italic;
}
/* Responsive */
@media (max-width: 768px) {
  .charts-grid {
    grid-template-columns: 1fr;
  }
  .factors-table {
    font-size: 0.75rem;
  }
  .factors-table th,
  .factors-table td {
    padding: 0.5rem;
  }
  .chart-controls {
    flex-direction: column;
    align-items: flex-start;
  }
}
/* Data Sources Settings */
.data-source-card {
  background: #0A0A0F;
  border-radius: 0.5rem;
  padding: 1rem;
  margin-bottom: 1rem;
  border: 1px solid #2A2F3A;
}
.data-source-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.5rem;
}
.data-source-title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.data-source-title h4 {
  margin: 0;
  font-size: 1rem;
}
.data-source-icon {
  font-size: 1.25rem;
}
.data-source-desc {
  font-size: 0.8rem;
  color: #B8BECC;
  margin-bottom: 1rem;
}
.data-source-settings {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 0.75rem;
  margin-bottom: 1rem;
}
.setting-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.setting-row label {
  font-size: 0.8rem;
  color: #B8BECC;
  white-space: nowrap;
}
.setting-row input[type=number],
.setting-row select {
  padding: 0.25rem 0.5rem;
  border: 1px solid #2A2F3A;
  border-radius: 0.25rem;
  font-size: 0.8rem;
  background: #171726;
  color: #F5F7FF;
  flex: 1;
  max-width: 120px;
}
.data-source-toggles {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}
.mini-toggle {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.75rem;
  color: #B8BECC;
  cursor: pointer;
}
.mini-toggle input[type=checkbox] {
  width: 14px;
  height: 14px;
  cursor: pointer;
}
.data-source-status {
  margin-top: 0.75rem;
  padding-top: 0.75rem;
  border-top: 1px solid #2A2F3A;
  font-size: 0.75rem;
  color: #B8BECC;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.error-badge {
  background: #FF3B4E;
  color: white;
  padding: 0.125rem 0.5rem;
  border-radius: 0.25rem;
  font-size: 0.7rem;
}
/* Toggle Switch */
.toggle-switch {
  position: relative;
  display: inline-block;
  width: 44px;
  height: 24px;
}
.toggle-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}
.toggle-slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  transition: 0.3s;
  border-radius: 24px;
}
.toggle-slider:before {
  position: absolute;
  content: "";
  height: 18px;
  width: 18px;
  left: 3px;
  bottom: 3px;
  background-color: white;
  transition: 0.3s;
  border-radius: 50%;
}
.toggle-switch input:checked + .toggle-slider {
  background-color: #00FF85;
}
.toggle-switch input:checked + .toggle-slider:before {
  transform: translateX(20px);
}
/* Forecasts Section */
.forecasts-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1rem;
  margin-top: 1rem;
}
.forecast-card {
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.15) 0%, rgba(99, 102, 241, 0.1) 100%);
  border: 1px solid rgba(139, 92, 246, 0.3);
  border-radius: 0.75rem;
  padding: 1.25rem;
}
.forecast-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.75rem;
}
.forecast-horizon {
  font-weight: 700;
  font-size: 1.125rem;
  color: #a78bfa;
}
.forecast-confidence {
  font-size: 0.75rem;
  padding: 0.25rem 0.75rem;
  border-radius: 9999px;
  font-weight: 600;
}
.forecast-confidence.high {
  background: rgba(0, 255, 133, 0.2);
  color: #00FF85;
}
.forecast-confidence.medium {
  background: rgba(255, 209, 102, 0.2);
  color: #FFD166;
}
.forecast-confidence.low {
  background: rgba(255, 59, 78, 0.2);
  color: #FF3B4E;
}
.forecast-dates {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.8rem;
  color: #B8BECC;
  margin-bottom: 1rem;
}
.forecast-predictions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem;
  margin-bottom: 1rem;
}
.prediction-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.5rem 0.75rem;
  background: #0A0A0F;
  border-radius: 0.375rem;
}
.pred-label {
  font-size: 0.75rem;
  color: #B8BECC;
}
.pred-value {
  font-weight: 700;
  font-family: "Monaco", "Menlo", monospace;
}
.pred-value.positive {
  color: #00FF85;
}
.pred-value.negative {
  color: #FF3B4E;
}
.forecast-factors {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
  margin-bottom: 1rem;
}
.factor-pill {
  font-size: 0.7rem;
  padding: 0.25rem 0.5rem;
  background: #0A0A0F;
  border-radius: 0.25rem;
  border: 1px solid #2A2F3A;
  color: #B8BECC;
}
.forecast-summary {
  font-size: 0.875rem;
  color: #F5F7FF;
  line-height: 1.5;
  margin-bottom: 0.75rem;
  padding: 0.75rem;
  background: #0A0A0F;
  border-radius: 0.375rem;
}
.key-factors-list {
  margin-bottom: 0.75rem;
}
.factors-label {
  font-size: 0.75rem;
  font-weight: 600;
  color: #B8BECC;
  margin-right: 0.5rem;
}
.factor-tag {
  display: inline-block;
  font-size: 0.7rem;
  padding: 0.125rem 0.5rem;
  background: rgba(139, 92, 246, 0.2);
  color: #a78bfa;
  border-radius: 0.25rem;
  margin-right: 0.375rem;
  margin-bottom: 0.25rem;
}
.forecast-meta {
  font-size: 0.7rem;
  color: #B8BECC;
  text-align: right;
}
/* De-sensationalized / Factual Content */
.timeline-item.has-factual .timeline-content {
  border-left: 3px solid #10b981;
}
.factual-badge {
  display: inline-block;
  font-size: 0.625rem;
  font-weight: 600;
  padding: 0.125rem 0.375rem;
  background: rgba(16, 185, 129, 0.2);
  color: #6ee7b7;
  border-radius: 0.25rem;
  margin-left: 0.5rem;
}
.original-headline {
  font-size: 0.75rem;
  color: #B8BECC;
  margin: 0.25rem 0;
  padding: 0.375rem 0.5rem;
  background: #10101A;
  border-radius: 0.25rem;
}
.key-facts {
  margin: 0.75rem 0;
  padding: 0.75rem;
  background: rgba(16, 185, 129, 0.1);
  border-radius: 0.375rem;
  border: 1px solid rgba(16, 185, 129, 0.3);
}
.key-facts-label {
  font-size: 0.75rem;
  font-weight: 600;
  color: #10b981;
  display: block;
  margin-bottom: 0.5rem;
}
.key-facts-list {
  margin: 0;
  padding-left: 1.25rem;
}
.key-facts-list li {
  font-size: 0.8rem;
  color: #F5F7FF;
  margin-bottom: 0.25rem;
  line-height: 1.4;
}
/* Article Scores on Timeline */
.article-scores {
  display: flex;
  gap: 0.5rem;
  margin: 0.5rem 0;
  flex-wrap: wrap;
}
.article-score {
  font-size: 0.7rem;
  padding: 0.25rem 0.5rem;
  background: #0A0A0F;
  border-radius: 0.25rem;
  font-weight: 600;
}
/* Section description */
.section-description {
  font-size: 0.875rem;
  color: #B8BECC;
  margin-bottom: 0.5rem;
}
/* Risk Register Styles */
.risk-register-controls {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 1.5rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid #2A2F3A;
}
.risk-filters {
  display: flex;
  gap: 0.75rem;
  align-items: center;
  flex-wrap: wrap;
}
.risk-filters select {
  padding: 0.5rem 0.75rem;
  border: 1px solid #2A2F3A;
  border-radius: 0.375rem;
  font-size: 0.875rem;
  background: #171726;
  color: #F5F7FF;
}
.risk-filters .toggle-label {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.875rem;
  cursor: pointer;
}
.risk-summary {
  display: flex;
  gap: 1rem;
}
.risk-stats {
  display: flex;
  gap: 1rem;
}
.risk-stat {
  font-size: 0.875rem;
  padding: 0.375rem 0.75rem;
  background: #10101A;
  border-radius: 0.375rem;
}
.risk-stat strong {
  font-weight: 700;
}
.risk-stat.active {
  background: rgba(59, 130, 246, 0.2);
  color: #3b82f6;
}
.risk-stat.critical {
  background: rgba(239, 68, 68, 0.2);
  color: #ef4444;
}
.risk-register-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
  gap: 1rem;
}
.risk-register-card {
  background: #171726;
  border: 1px solid #2A2F3A;
  border-radius: 0.75rem;
  padding: 1.25rem;
  transition: all 0.2s;
  position: relative;
}
.risk-register-card:hover {
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.03), 0 20px 40px rgba(0, 0, 0, 0.5);
}
/* Severity borders */
.risk-register-card.severity-critical {
  border-left: 4px solid #dc2626;
}
.risk-register-card.severity-high {
  border-left: 4px solid #ea580c;
}
.risk-register-card.severity-medium {
  border-left: 4px solid #ca8a04;
}
.risk-register-card.severity-low {
  border-left: 4px solid #16a34a;
}
/* Archived state */
.risk-register-card.status-archived {
  opacity: 0.7;
  background: #10101A;
}
.risk-register-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 0.75rem;
}
.risk-category-badge {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.75rem;
  padding: 0.25rem 0.625rem;
  background: #10101A;
  border-radius: 9999px;
  color: #B8BECC;
}
.category-icon {
  font-size: 0.875rem;
}
.risk-badges {
  display: flex;
  gap: 0.375rem;
}
.risk-severity-badge {
  font-size: 0.625rem;
  font-weight: 700;
  padding: 0.25rem 0.5rem;
  border-radius: 0.25rem;
  letter-spacing: 0.025em;
}
.risk-severity-badge.critical {
  background: rgba(239, 68, 68, 0.2);
  color: #ef4444;
}
.risk-severity-badge.high {
  background: rgba(249, 115, 22, 0.2);
  color: #f97316;
}
.risk-severity-badge.medium {
  background: rgba(245, 158, 11, 0.2);
  color: #f59e0b;
}
.risk-severity-badge.low {
  background: rgba(16, 185, 129, 0.2);
  color: #10b981;
}
.risk-archived-badge {
  font-size: 0.625rem;
  font-weight: 600;
  padding: 0.25rem 0.5rem;
  background: #2A2F3A;
  color: #B8BECC;
  border-radius: 0.25rem;
}
.risk-register-title {
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
  color: #F5F7FF;
  line-height: 1.3;
}
.risk-register-desc {
  font-size: 0.875rem;
  color: #B8BECC;
  margin-bottom: 1rem;
  line-height: 1.5;
}
.risk-assessment-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem;
  margin-bottom: 1rem;
  padding: 0.75rem;
  background: #10101A;
  border-radius: 0.5rem;
}
.risk-assessment-item {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.assessment-label {
  font-size: 0.7rem;
  font-weight: 600;
  color: #B8BECC;
  text-transform: uppercase;
  letter-spacing: 0.025em;
}
.assessment-bar {
  height: 6px;
  background: #2A2F3A;
  border-radius: 3px;
  overflow: hidden;
}
.assessment-fill {
  height: 100%;
  border-radius: 3px;
  transition: width 0.3s;
}
.assessment-value {
  font-size: 0.875rem;
  font-weight: 700;
  font-family: "Monaco", "Menlo", monospace;
}
.assessment-tag {
  font-size: 0.7rem;
  padding: 0.25rem 0.5rem;
  border-radius: 0.25rem;
  font-weight: 500;
}
.assessment-tag.likelihood-very_low,
.assessment-tag.impact-negligible {
  background: rgba(34, 197, 94, 0.15);
  color: #4ade80;
}
.assessment-tag.likelihood-low,
.assessment-tag.impact-minor {
  background: rgba(34, 197, 94, 0.2);
  color: #86efac;
}
.assessment-tag.likelihood-moderate,
.assessment-tag.impact-moderate {
  background: rgba(234, 179, 8, 0.2);
  color: #fbbf24;
}
.assessment-tag.likelihood-high,
.assessment-tag.impact-major {
  background: rgba(249, 115, 22, 0.2);
  color: #fb923c;
}
.assessment-tag.likelihood-very_high,
.assessment-tag.likelihood-certain,
.assessment-tag.impact-severe,
.assessment-tag.impact-catastrophic {
  background: rgba(239, 68, 68, 0.2);
  color: #f87171;
}
.impact-value.negative {
  color: #dc2626;
}
.impact-value.positive {
  color: #16a34a;
}
.risk-time-horizon {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.8rem;
  padding: 0.5rem 0.75rem;
  background: rgba(59, 130, 246, 0.15);
  border-radius: 0.375rem;
  margin-bottom: 0.75rem;
}
.time-icon {
  font-size: 0.875rem;
}
.time-label {
  color: #B8BECC;
}
.time-value {
  color: #93c5fd;
  font-weight: 500;
}
.time-value {
  font-weight: 600;
  color: #1e40af;
}
.risk-triggers,
.risk-warnings,
.risk-impact-detail {
  margin-bottom: 0.75rem;
  padding: 0.625rem;
  border-radius: 0.375rem;
  font-size: 0.8rem;
}
.risk-triggers {
  background: rgba(239, 68, 68, 0.15);
  border: 1px solid rgba(239, 68, 68, 0.3);
}
.risk-warnings {
  background: rgba(245, 158, 11, 0.15);
  border: 1px solid rgba(245, 158, 11, 0.3);
}
.risk-impact-detail {
  background: rgba(168, 85, 247, 0.15);
  border: 1px solid rgba(168, 85, 247, 0.3);
}
.triggers-header,
.warnings-header,
.impact-header {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  margin-bottom: 0.375rem;
}
.trigger-label,
.warning-label,
.impact-label {
  font-weight: 600;
  font-size: 0.75rem;
}
.trigger-text,
.warning-text,
.impact-text {
  color: #F5F7FF;
  line-height: 1.4;
  margin: 0;
}
.risk-register-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 0.75rem;
  padding-top: 0.75rem;
  border-top: 1px solid #2A2F3A;
}
.risk-meta {
  display: flex;
  gap: 1rem;
  font-size: 0.75rem;
  color: #B8BECC;
}
.risk-actions {
  display: flex;
  gap: 0.375rem;
}
.risk-action-btn {
  background: none;
  border: 1px solid #2A2F3A;
  border-radius: 0.25rem;
  padding: 0.25rem 0.5rem;
  cursor: pointer;
  transition: all 0.2s;
  text-decoration: none;
  font-size: 0.875rem;
}
.risk-action-btn:hover {
  background: #10101A;
  border-color: #B8BECC;
}
/* ============================================================================
   Scheduler Controls
   ============================================================================ */
.scheduler-status {
  background: #0A0A0F;
  border-radius: 0.5rem;
  padding: 1rem;
  margin: 1rem 0;
}
.scheduler-status-row {
  display: flex;
  justify-content: space-between;
  padding: 0.5rem 0;
  border-bottom: 1px solid #2A2F3A;
}
.scheduler-status-row:last-child {
  border-bottom: none;
}
.status-label {
  font-weight: 500;
  color: #B8BECC;
}
.status-value {
  font-weight: 600;
}
.status-badge {
  padding: 0.25rem 0.75rem;
  border-radius: 1rem;
  font-size: 0.875rem;
}
.status-badge.active {
  background: rgba(16, 185, 129, 0.2);
  color: #10b981;
}
.status-badge.running {
  background: rgba(245, 158, 11, 0.2);
  color: #f59e0b;
}
.status-badge.inactive {
  background: #10101A;
  color: #B8BECC;
}
.scheduler-controls {
  margin-top: 1.5rem;
}
.control-row {
  margin-bottom: 1rem;
}
.control-row label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.control-row.button-row {
  display: flex;
  gap: 1rem;
  margin-top: 1.5rem;
}
.error-text {
  color: #FF3B4E;
}
/* ============================================================================
   Stock Discovery
   ============================================================================ */
.discovery-filters {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem;
  margin: 1rem 0;
}
.filter-row {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.filter-row label {
  font-size: 0.875rem;
  font-weight: 500;
  color: #B8BECC;
}
.discovery-actions {
  margin: 1.5rem 0;
}
.discovery-results {
  margin-top: 1.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid #2A2F3A;
}
.discovery-results h4 {
  margin-bottom: 1rem;
}
.discovery-list {
  max-height: 400px;
  overflow-y: auto;
  border: 1px solid #2A2F3A;
  border-radius: 0.5rem;
}
.discovery-item {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid #2A2F3A;
  transition: background 0.2s;
}
.discovery-item:last-child {
  border-bottom: none;
}
.discovery-item:hover {
  background: #0A0A0F;
}
.discovery-checkbox {
  flex-shrink: 0;
}
.discovery-checkbox input {
  width: 1.25rem;
  height: 1.25rem;
  cursor: pointer;
}
.discovery-info {
  flex: 1;
  min-width: 0;
}
.discovery-symbol {
  font-weight: 700;
  color: #FF5A1F;
  margin-right: 0.5rem;
}
.discovery-name {
  color: #B8BECC;
  font-size: 0.875rem;
}
.discovery-stats {
  display: flex;
  gap: 1rem;
  font-size: 0.75rem;
  color: #B8BECC;
}
.discovery-stats .stat {
  white-space: nowrap;
}
.discovery-bulk-actions {
  display: flex;
  gap: 1rem;
  margin-top: 1rem;
}
.btn-sm {
  padding: 0.375rem 0.75rem;
  font-size: 0.75rem;
}
.btn-success {
  background-color: #00FF85;
  color: white;
}
.btn-success:hover {
  background-color: #059669;
}
/* ============================================================================
   Bootstrap Options
   ============================================================================ */
.bootstrap-options {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1.5rem;
  margin-top: 1rem;
}
.bootstrap-option {
  background: #0A0A0F;
  border-radius: 0.5rem;
  padding: 1.25rem;
  border: 1px solid #2A2F3A;
}
.bootstrap-option h4 {
  margin-bottom: 0.5rem;
  color: #F5F7FF;
}
.bootstrap-option p {
  font-size: 0.875rem;
  color: #B8BECC;
  margin-bottom: 1rem;
}
.bootstrap-option .btn {
  width: 100%;
}
/* ============================================================================
   API Key Settings
   ============================================================================ */
.api-key-section {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}
.api-key-item {
  background: #0A0A0F;
  border-radius: 0.5rem;
  padding: 1rem;
  border: 1px solid #2A2F3A;
}
.api-key-item label {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.5rem;
}
.api-key-help {
  font-size: 0.75rem;
  color: #B8BECC;
}
.api-key-help a {
  color: #FF5A1F;
}
.api-key-form {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  flex-wrap: wrap;
}
.api-key-input {
  flex: 1;
  min-width: 200px;
  padding: 0.5rem;
  border: 1px solid #2A2F3A;
  border-radius: 0.375rem;
  font-size: 0.875rem;
}
.api-key-status {
  font-size: 0.75rem;
  padding: 0.25rem 0.5rem;
  border-radius: 0.25rem;
  margin-left: 0.5rem;
}
.api-key-status.success {
  color: #00FF85;
  background: rgba(16, 185, 129, 0.1);
}
.api-key-status.error {
  color: #FF3B4E;
  background: rgba(239, 68, 68, 0.1);
}
.api-key-status.warning {
  color: #FFD166;
  background: rgba(245, 158, 11, 0.1);
}
.status-message {
  font-size: 0.875rem;
  margin-left: 1rem;
}
.status-message.success {
  color: #00FF85;
}
.status-message.error {
  color: #FF3B4E;
}
.btn-xs {
  padding: 0.2rem 0.4rem;
  font-size: 0.7rem;
}
/* ============================================================================
   User Data Sources View (Read-Only)
   ============================================================================ */
.user-data-sources-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1rem;
}
.user-data-source-card {
  background: #0A0A0F;
  border: 1px solid #2A2F3A;
  border-radius: 0.75rem;
  padding: 1.25rem;
}
.user-data-source-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1rem;
}
.user-data-source-icon {
  font-size: 1.5rem;
}
.user-data-source-name {
  flex: 1;
  font-weight: 600;
  color: #F5F7FF;
}
.user-data-source-status {
  font-size: 0.75rem;
  padding: 0.25rem 0.5rem;
  border-radius: 0.25rem;
  font-weight: 600;
}
.user-data-source-status.active {
  background: rgba(16, 185, 129, 0.15);
  color: #22c55e;
}
.user-data-source-status.inactive {
  background: rgba(239, 68, 68, 0.15);
  color: #ef4444;
}
.user-data-source-stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.75rem;
  margin-bottom: 1rem;
}
.user-data-source-stat {
  display: flex;
  flex-direction: column;
}
.user-data-source-stat .stat-label {
  font-size: 0.75rem;
  color: #7F8799;
  margin-bottom: 0.25rem;
}
.user-data-source-stat .stat-value {
  font-weight: 600;
  color: #F5F7FF;
}
.user-data-source-desc {
  font-size: 0.85rem;
  color: #B8BECC;
  margin-top: 0.5rem;
}
.user-data-source-card:hover {
  border-color: #FF5A1F;
  background: #171726;
  transition: all 0.2s ease;
}
.user-data-source-link {
  font-size: 0.8rem;
  color: #FF5A1F;
  text-align: right;
  margin-top: 0.75rem;
  opacity: 0;
  transition: opacity 0.2s ease;
}
.user-data-source-card:hover .user-data-source-link {
  opacity: 1;
}
/* ============================================================================
   Data Status Card (User Dashboard)
   ============================================================================ */
.data-status-card {
  margin-bottom: 1.5rem;
}
.data-status-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
}
.data-status-header h3 {
  color: #F5F7FF;
  font-size: 1.1rem;
}
.data-status-indicator {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.status-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #7F8799;
}
.status-dot.running {
  background: #22c55e;
  animation: pulse 1.5s infinite;
}
.status-dot.idle {
  background: #7F8799;
}
.status-dot.error {
  background: #ef4444;
}
@keyframes pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}
.status-label {
  color: #F5F7FF;
  font-weight: 500;
}
.data-status-info {
  display: flex;
  gap: 2rem;
  flex-wrap: wrap;
}
.data-status-item {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.data-status-label {
  font-size: 0.8rem;
  color: #7F8799;
}
.data-status-value {
  color: #F5F7FF;
  font-weight: 500;
}
.data-status-value.status-active {
  color: #22c55e;
}
.data-status-value.status-inactive {
  color: #7F8799;
}
.data-status-value.status-warning {
  color: #f59e0b;
}
/* Status Indicator (colored dot) for data status table */
.status-indicator {
  font-size: 1.1rem;
  line-height: 1;
}
.status-indicator.status-green {
  color: #22c55e;
}
.status-indicator.status-yellow {
  color: #f59e0b;
}
.status-indicator.status-red {
  color: #ef4444;
}
.status-indicator.status-gray {
  color: #7F8799;
}
/* Data Status Table */
.data-status-table {
  background: transparent;
}
.data-status-table th {
  color: #7F8799;
  font-weight: 500;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.data-status-table td {
  color: #B8BECC;
}
/* Admin Link in Nav */
.admin-link {
  background: #FF5A1F;
  color: white !important;
  padding: 0.375rem 0.75rem;
  border-radius: 0.375rem;
  font-size: 0.85rem;
}
.admin-link:hover {
  background: #FF6C3A;
  color: white !important;
}
/* ============================================================================
   Options Trading Module
   ============================================================================ */
#options-container {
  padding: 1rem 0;
}
#options-api-status {
  margin-bottom: 1rem;
  padding: 0.75rem 1rem;
  background: #10101A;
  border-radius: 10px;
}
#options-api-status.warning {
  background: rgba(255, 90, 31, 0.1);
  border: 1px solid #FF5A1F;
}
#options-api-status .status-ok {
  color: #00FF85;
}
#options-api-status .status-warning {
  color: #FFD166;
}
#options-api-status .status-error {
  color: #FF3B4E;
}
#options-api-status .status-error a {
  color: #FF5A1F;
  text-decoration: underline;
}
.options-filters {
  display: flex;
  gap: 1rem;
  margin-bottom: 1.5rem;
  flex-wrap: wrap;
  align-items: center;
}
.options-filters .form-group {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.options-filters .form-group label {
  font-size: 0.75rem;
  color: #7F8799;
  text-transform: uppercase;
}
.options-filters .form-group input, .options-filters .form-group select {
  padding: 0.5rem 0.75rem;
  background: #0A0A0F;
  border: 1px solid #3A4050;
  border-radius: 10px;
  color: #F5F7FF;
  font-size: 0.9rem;
  min-width: 100px;
}
.options-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
}
.options-table th, .options-table td {
  padding: 0.75rem 1rem;
  text-align: left;
  border-bottom: 1px solid #2A2F3A;
}
.options-table th {
  background: #10101A;
  color: #7F8799;
  font-weight: 500;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.options-table tbody tr {
  transition: background 140ms ease;
  cursor: pointer;
}
.options-table tbody tr:hover {
  background: #1e1e32;
}
.options-table .symbol {
  font-weight: 600;
  color: #F5F7FF;
}
.options-table .type {
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
  font-size: 0.75rem;
  font-weight: 600;
  text-align: center;
}
.options-table .type.bullish {
  background: rgba(0, 255, 133, 0.15);
  color: #00FF85;
}
.options-table .type.bearish {
  background: rgba(255, 59, 78, 0.15);
  color: #FF3B4E;
}
.options-table .score {
  font-weight: 600;
}
.options-table .score.excellent {
  color: #00FF85;
}
.options-table .score.good {
  color: #FFD166;
}
.options-table .score.fair {
  color: #7F8799;
}
.options-table .greeks {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  font-size: 0.8rem;
  color: #7F8799;
}
.options-table .greeks span {
  margin-right: 0.5rem;
}
.options-opportunity-card {
  background: #171726;
  border-radius: 14px;
  padding: 1.25rem;
  margin-bottom: 1rem;
  border: 1px solid #2A2F3A;
  transition: all 140ms ease;
}
.options-opportunity-card:hover {
  border-color: #FF5A1F;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.03), 0 10px 28px rgba(0, 0, 0, 0.45);
}
.opp-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 1rem;
}
.opp-symbol-info {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.opp-symbol {
  font-size: 1.25rem;
  font-weight: 700;
  color: #F5F7FF;
}
.opp-type-badge {
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
}
.opp-type-badge.call {
  background: rgba(0, 255, 133, 0.15);
  color: #00FF85;
}
.opp-type-badge.put {
  background: rgba(255, 59, 78, 0.15);
  color: #FF3B4E;
}
.opp-score-badge {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 1.5rem;
  font-weight: 700;
}
.opp-score-badge.excellent {
  color: #00FF85;
}
.opp-score-badge.good {
  color: #FFD166;
}
.opp-score-badge.fair {
  color: #7F8799;
}
.opp-details {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 1rem;
  margin-bottom: 1rem;
}
.opp-detail {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.opp-detail-label {
  font-size: 0.75rem;
  color: #7F8799;
  text-transform: uppercase;
}
.opp-detail-value {
  font-size: 1rem;
  font-weight: 500;
  color: #F5F7FF;
}
.opp-scores {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-top: 0.75rem;
  padding-top: 0.75rem;
  border-top: 1px solid #2A2F3A;
}
.score-pill {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.25rem 0.5rem;
  background: #10101A;
  border-radius: 999px;
  font-size: 0.75rem;
}
.score-pill .score-label {
  color: #7F8799;
}
.score-pill .score-value {
  font-weight: 600;
  color: #F5F7FF;
}
/* Options Chain View */
.options-chain-container {
  margin-top: 1.5rem;
}
.chain-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
}
.chain-expiration-tabs {
  display: flex;
  gap: 0.5rem;
}
.chain-exp-tab {
  padding: 0.5rem 1rem;
  background: #10101A;
  border: 1px solid #2A2F3A;
  border-radius: 10px;
  color: #B8BECC;
  cursor: pointer;
  transition: all 140ms ease;
}
.chain-exp-tab:hover, .chain-exp-tab.active {
  background: #FF5A1F;
  border-color: #FF5A1F;
  color: white;
}
.implied-move-badge {
  background: #10101A;
  padding: 0.5rem 1rem;
  border-radius: 10px;
  font-size: 0.9rem;
}
.implied-move-badge .implied-label {
  color: #7F8799;
  margin-right: 0.5rem;
}
.implied-move-badge .implied-value {
  font-weight: 600;
  color: #FF5A1F;
}
/* Notification Toasts */
.notification {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  padding: 1rem 1.5rem;
  border-radius: 10px;
  color: white;
  font-weight: 500;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.03), 0 20px 40px rgba(0, 0, 0, 0.5);
  z-index: 1000;
  animation: slideIn 0.3s ease;
}
.notification.success {
  background: #00FF85;
  color: #0A0A0F;
}
.notification.error {
  background: #FF3B4E;
}
.notification.info {
  background: #66A6FF;
}
@keyframes slideIn {
  from {
    transform: translateX(100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}
/* Placeholder container */
.placeholder-container {
  text-align: center;
  padding: 3rem 1rem;
}
.placeholder-container .placeholder {
  margin-bottom: 1.5rem;
}
/* Loading spinner */
.spinner {
  display: inline-block;
  width: 1rem;
  height: 1rem;
  border: 2px solid transparent;
  border-top-color: currentColor;
  border-radius: 50%;
  animation: spin 0.6s linear infinite;
}
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}
/* ========================================================================
   CATALYST & OPPORTUNITY STYLES
   ======================================================================== */
/* Catalyst Indicator on Symbol */
.catalyst-indicator {
  margin-left: 0.375rem;
  font-size: 0.875rem;
  animation: pulse 2s infinite;
}
.catalyst-indicator.urgent {
  animation: pulse-urgent 1s infinite;
}
.catalyst-indicator.hot {
  animation: pulse 1.5s infinite;
}
@keyframes pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.6;
  }
}
@keyframes pulse-urgent {
  0%, 100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.8;
    transform: scale(1.1);
  }
}
/* Watchlist Item with Catalyst */
.watchlist-item.has-catalyst {
  border-left: 3px solid #FF5A1F;
}
.watchlist-item.has-catalyst:hover {
  border-left-color: #00FF85;
}
/* Catalyst Badge on Watchlist Item */
.watchlist-catalyst {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem;
  margin-bottom: 0.5rem;
  background: rgba(255, 90, 31, 0.1);
  border-radius: 0.375rem;
  font-size: 0.75rem;
}
.watchlist-catalyst.imminent {
  background: rgba(255, 90, 31, 0.2);
  border: 1px solid rgba(255, 90, 31, 0.3);
}
.catalyst-icon {
  font-size: 1rem;
}
.catalyst-type {
  color: #F5F7FF;
  font-weight: 500;
  text-transform: capitalize;
}
.catalyst-date {
  color: #B8BECC;
}
.catalyst-more {
  font-size: 0.625rem;
  background: #2A2F3A;
  padding: 0.125rem 0.375rem;
  border-radius: 0.25rem;
  color: #7F8799;
}
.news-count {
  font-size: 0.75rem;
  color: #B8BECC;
}
/* ========================================================================
   OPPORTUNITIES SECTION
   ======================================================================== */
.opp-empty {
  text-align: center;
  padding: 3rem 1rem;
}
.opp-empty-icon {
  font-size: 3rem;
  margin-bottom: 1rem;
  opacity: 0.6;
}
.opp-empty-title {
  font-size: 1.25rem;
  font-weight: 600;
  color: #F5F7FF;
  margin-bottom: 0.5rem;
}
.opp-empty-subtitle {
  color: #B8BECC;
  margin-bottom: 0.5rem;
}
.opp-empty-hint {
  font-size: 0.875rem;
  color: #7F8799;
}
/* Opportunity Controls */
.opp-controls {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 1rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid #2A2F3A;
}
.opp-sort-group,
.opp-filter-group {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.opp-label {
  font-size: 0.875rem;
  color: #B8BECC;
  font-weight: 500;
}
.opp-btn {
  padding: 0.375rem 0.75rem;
  font-size: 0.75rem;
  background: #0A0A0F;
  color: #B8BECC;
  border: 1px solid #2A2F3A;
  border-radius: 0.25rem;
  cursor: pointer;
  transition: all 0.2s;
}
.opp-btn:hover {
  border-color: #FF5A1F;
  color: #FF5A1F;
}
.opp-btn.active {
  background: #FF5A1F;
  color: white;
  border-color: #FF5A1F;
}
.opp-results-count {
  font-size: 0.875rem;
  color: #7F8799;
  margin-bottom: 1rem;
}
/* Opportunity Grid */
.opp-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1rem;
}
/* Opportunity Card */
.opp-card {
  background: #171726;
  border-radius: 14px;
  padding: 1rem;
  cursor: pointer;
  transition: all 0.2s ease;
  border: 1px solid transparent;
}
.opp-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.03), 0 20px 40px rgba(0, 0, 0, 0.5);
  border-color: #FF5A1F;
}
.opp-card.urgency-critical {
  border-left: 4px solid #FF3B4E;
  background: linear-gradient(135deg, rgba(255, 59, 78, 0.1) 0%, #171726 30%);
}
.opp-card.urgency-high {
  border-left: 4px solid #FFD166;
  background: linear-gradient(135deg, rgba(255, 209, 102, 0.08) 0%, #171726 30%);
}
.opp-card.urgency-medium {
  border-left: 4px solid #FF5A1F;
}
.opp-card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 0.75rem;
}
.opp-symbol-info {
  display: flex;
  flex-direction: column;
}
.opp-symbol {
  font-size: 1.25rem;
  font-weight: 700;
  color: #FF5A1F;
}
.opp-name {
  font-size: 0.75rem;
  color: #B8BECC;
  max-width: 180px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.opp-score-badge {
  font-size: 1.25rem;
  font-weight: 700;
  padding: 0.375rem 0.75rem;
  border-radius: 0.5rem;
  min-width: 50px;
  text-align: center;
}
.opp-score-badge.score-high {
  background: rgba(0, 255, 133, 0.2);
  color: #00FF85;
}
.opp-score-badge.score-medium {
  background: rgba(255, 209, 102, 0.2);
  color: #FFD166;
}
.opp-score-badge.score-low {
  background: rgba(184, 190, 204, 0.15);
  color: #B8BECC;
}
/* Event Display */
.opp-event {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.625rem 0.75rem;
  background: #10101A;
  border-radius: 0.5rem;
  margin-bottom: 0.75rem;
}
.opp-event-icon {
  font-size: 1.25rem;
}
.opp-event-info {
  flex: 1;
  display: flex;
  flex-direction: column;
}
.opp-event-type {
  font-size: 0.875rem;
  font-weight: 500;
  color: #F5F7FF;
}
.opp-event-date {
  font-size: 0.75rem;
  color: #B8BECC;
}
.opp-urgency-badge {
  font-size: 0.625rem;
  font-weight: 700;
  padding: 0.25rem 0.5rem;
  border-radius: 0.25rem;
  background: #FF3B4E;
  color: white;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
/* Score Grid */
.opp-scores-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}
.opp-score-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.375rem 0.5rem;
  background: #0A0A0F;
  border-radius: 0.25rem;
}
.opp-score-label {
  font-size: 0.625rem;
  color: #7F8799;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.opp-score-value {
  font-size: 0.875rem;
  font-weight: 600;
  color: #F5F7FF;
}
.opp-score-value.bullish {
  color: #00FF85;
}
.opp-score-value.bearish {
  color: #FF3B4E;
}
.opp-score-value.neutral {
  color: #B8BECC;
}
/* Historical Info */
.opp-historical {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.5rem;
  background: rgba(102, 166, 255, 0.1);
  border-radius: 0.25rem;
  margin-bottom: 0.75rem;
}
.opp-hist-label {
  font-size: 0.75rem;
  color: #B8BECC;
}
.opp-hist-value {
  font-size: 0.875rem;
  font-weight: 600;
  color: #66A6FF;
}
/* Card Footer */
.opp-card-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 0.5rem;
  border-top: 1px solid #2A2F3A;
}
.opp-sector {
  font-size: 0.75rem;
  color: #7F8799;
}
.opp-news-count {
  font-size: 0.75rem;
  color: #B8BECC;
}
.opp-view-details {
  font-size: 0.75rem;
  color: #FF5A1F;
  font-weight: 600;
  cursor: pointer;
  transition: 140ms ease;
}
.opp-view-details:hover {
  color: #FF6C3A;
}
/* Settings Button */
.opp-settings-btn {
  margin-left: auto !important;
  background: transparent !important;
  border: 1px solid #2A2F3A !important;
}
.opp-settings-btn:hover {
  background: #171726 !important;
  border-color: #FF5A1F !important;
}
/* Config Modal */
.opp-config-modal {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  backdrop-filter: blur(4px);
}
.opp-config-content {
  background: #10101A;
  border-radius: 18px;
  border: 1px solid #2A2F3A;
  padding: 1.5rem;
  width: 90%;
  max-width: 720px;
  max-height: 85vh;
  overflow-y: auto;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.03), 0 20px 40px rgba(0, 0, 0, 0.5);
}
.opp-config-content h3 {
  font-size: 1.25rem;
  margin-bottom: 0.25rem;
  color: #F5F7FF;
}
.opp-config-content h4 {
  font-size: 0.875rem;
  color: #FF5A1F;
  margin-bottom: 0.75rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.opp-config-content h5 {
  font-size: 0.8rem;
  color: #B8BECC;
  margin-bottom: 0.5rem;
}
.opp-config-subtitle {
  font-size: 0.8rem;
  color: #7F8799;
  margin-bottom: 1.5rem;
}
.opp-config-sections {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1.5rem;
  margin-bottom: 1.5rem;
}
.opp-config-section {
  background: #171726;
  border-radius: 14px;
  padding: 1rem;
  border: 1px solid #2A2F3A;
}
.opp-config-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.5rem;
}
.opp-config-row:last-child {
  margin-bottom: 0;
}
.opp-config-row label {
  font-size: 0.8rem;
  color: #B8BECC;
}
.opp-config-row input {
  width: 80px;
  padding: 0.375rem 0.5rem;
  background: #0A0A0F;
  border: 1px solid #3A4050;
  border-radius: 10px;
  color: #F5F7FF;
  font-size: 0.875rem;
  text-align: right;
}
.opp-config-row input:focus {
  outline: none;
  border-color: #FF5A1F;
  box-shadow: 0 0 0 2px rgba(0, 255, 133, 0.45);
}
.opp-config-weights {
  background: #171726;
  border-radius: 14px;
  padding: 1rem;
  border: 1px solid #2A2F3A;
  margin-bottom: 1.5rem;
}
.opp-weights-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}
.opp-weight-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 80px;
}
.opp-weight-item label {
  font-size: 0.7rem;
  color: #7F8799;
  margin-bottom: 0.25rem;
}
.opp-weight-item .opp-weight-value {
  font-size: 1rem;
  font-weight: 600;
  color: #66A6FF;
}
.opp-config-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.75rem;
}
.opp-config-btn {
  padding: 0.5rem 1.25rem;
  border-radius: 10px;
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 140ms ease;
}
.opp-config-btn.secondary {
  background: transparent;
  border: 1px solid #2A2F3A;
  color: #B8BECC;
}
.opp-config-btn.secondary:hover {
  background: #171726;
  color: #F5F7FF;
}
.opp-config-btn.primary {
  background: #FF5A1F;
  border: 1px solid #FF5A1F;
  color: #fff;
}
.opp-config-btn.primary:hover {
  background: #FF6C3A;
}
/* Expanded Card (Options Details) */
.opp-card-expanded {
  grid-column: 1/-1;
  background: #10101A;
  border-radius: 14px;
  border: 1px solid #FF5A1F;
  padding: 1.25rem;
  margin-top: -0.5rem;
  animation: slideDown 0.2s ease-out;
}
@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.opp-loading {
  text-align: center;
  padding: 2rem;
  color: #7F8799;
}
.opp-no-options {
  text-align: center;
  padding: 2rem;
  color: #7F8799;
}
.opp-no-options p {
  margin-bottom: 0.5rem;
}
.opp-no-options .hint {
  font-size: 0.8rem;
  color: #7F8799;
}
.opp-options-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 1rem;
}
.opp-options-header h4 {
  font-size: 1rem;
  color: #F5F7FF;
}
.opp-options-meta {
  display: flex;
  gap: 1rem;
  font-size: 0.75rem;
  color: #7F8799;
}
.opp-options-summary {
  display: flex;
  gap: 1.5rem;
  margin-bottom: 1rem;
  padding: 0.75rem;
  background: #171726;
  border-radius: 10px;
}
.opp-summary-stat {
  display: flex;
  flex-direction: column;
}
.opp-summary-stat .opp-stat-label {
  font-size: 0.7rem;
  color: #7F8799;
  text-transform: uppercase;
}
.opp-summary-stat .opp-stat-value {
  font-size: 1.125rem;
  font-weight: 600;
  color: #F5F7FF;
}
.opp-summary-stat .opp-stat-value.opp-passed {
  color: #00FF85;
}
.opp-summary-stat .opp-stat-value.opp-rejected {
  color: #FF3B4E;
}
.opp-options-table {
  overflow-x: auto;
  margin-bottom: 1rem;
}
.opp-options-table table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.8rem;
}
.opp-options-table thead {
  background: #171726;
}
.opp-options-table thead th {
  padding: 0.5rem 0.75rem;
  text-align: left;
  font-weight: 500;
  color: #7F8799;
  text-transform: uppercase;
  font-size: 0.7rem;
  border-bottom: 1px solid #2A2F3A;
  white-space: nowrap;
}
.opp-options-table tbody tr {
  border-bottom: 1px solid rgba(42, 47, 58, 0.5);
}
.opp-options-table tbody tr:hover {
  background: rgba(23, 23, 38, 0.5);
}
.opp-options-table tbody tr.rejected {
  opacity: 0.5;
}
.opp-options-table tbody tr td {
  padding: 0.625rem 0.75rem;
  color: #B8BECC;
  white-space: nowrap;
}
.contract-type {
  font-size: 1rem;
  margin-right: 0.25rem;
}
.contract-symbol {
  font-weight: 500;
  font-size: 0.7rem;
  color: #7F8799;
}
.days-hint {
  font-size: 0.7rem;
  color: #7F8799;
  margin-left: 0.25rem;
}
.bid-ask {
  color: #F5F7FF;
}
.spread-pct {
  font-size: 0.7rem;
  color: #7F8799;
  margin-left: 0.25rem;
}
.score-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  padding: 0.125rem 0.375rem;
  border-radius: 4px;
  font-weight: 600;
  font-size: 0.75rem;
}
.score-pill.liq-high {
  background: rgba(0, 255, 133, 0.15);
  color: #00FF85;
}
.score-pill.liq-medium {
  background: rgba(255, 209, 102, 0.15);
  color: #FFD166;
}
.score-pill.liq-low {
  background: rgba(255, 59, 78, 0.15);
  color: #FF3B4E;
}
.move-ratio {
  font-weight: 600;
}
.move-ratio.good {
  color: #00FF85;
}
.move-ratio.ok {
  color: #FFD166;
}
.move-ratio.warn {
  color: #FF3B4E;
}
.score-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  padding: 0.25rem 0.5rem;
  border-radius: 10px;
  font-weight: 700;
  font-size: 0.875rem;
}
.score-badge.score-high {
  background: #00FF85;
  color: #000;
}
.score-badge.score-medium {
  background: #FFD166;
  color: #000;
}
.score-badge.score-low {
  background: rgba(127, 135, 153, 0.3);
  color: #B8BECC;
}
.opp-rejections {
  margin-bottom: 1rem;
}
.opp-rejection-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.opp-rejection-chip {
  display: inline-flex;
  padding: 0.25rem 0.5rem;
  background: rgba(255, 59, 78, 0.1);
  border: 1px solid rgba(255, 59, 78, 0.3);
  border-radius: 4px;
  font-size: 0.7rem;
  color: #FF3B4E;
  text-transform: capitalize;
}
.opp-options-footer {
  display: flex;
  justify-content: flex-end;
}
.opp-view-stock {
  color: #FF5A1F;
  text-decoration: none;
  font-size: 0.8rem;
  font-weight: 500;
}
.opp-view-stock:hover {
  text-decoration: underline;
}
/* Scoring Info in Empty State */
.opp-scoring-info {
  text-align: left;
  background: #171726;
  border-radius: 14px;
  padding: 1.25rem;
  margin-top: 1.5rem;
  border: 1px solid #2A2F3A;
  max-width: 500px;
  margin-left: auto;
  margin-right: auto;
}
.opp-scoring-info h4 {
  font-size: 0.85rem;
  color: #B8BECC;
  margin-bottom: 0.75rem;
  margin-top: 1rem;
}
.opp-scoring-info h4:first-child {
  margin-top: 0;
}
.opp-event-types {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.opp-event-chip {
  display: inline-flex;
  padding: 0.25rem 0.625rem;
  background: rgba(102, 166, 255, 0.1);
  border: 1px solid rgba(102, 166, 255, 0.3);
  border-radius: 999px;
  font-size: 0.75rem;
  color: #66A6FF;
}
.opp-weights-display {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
}
.opp-weight {
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
  min-width: 140px;
  padding: 0.375rem 0;
  border-bottom: 1px solid rgba(42, 47, 58, 0.5);
}
.opp-weight .label {
  font-size: 0.75rem;
  color: #7F8799;
}
.opp-weight .value {
  font-size: 0.8rem;
  font-weight: 600;
  color: #FF5A1F;
}
.opp-info-text {
  flex: 1;
}
.opp-info-text .opp-label {
  font-size: 0.8rem;
  color: #7F8799;
}
.hidden {
  display: none !important;
}
.block {
  display: block;
}
.inline {
  display: inline;
}
.inline-block {
  display: inline-block;
}
.flex {
  display: flex;
}
.grid {
  display: grid;
}
.flex-1 {
  flex: 1;
}
.flex-wrap {
  flex-wrap: wrap;
}
.items-center {
  align-items: center;
}
.items-start {
  align-items: flex-start;
}
.items-end {
  align-items: flex-end;
}
.justify-center {
  justify-content: center;
}
.justify-between {
  justify-content: space-between;
}
.justify-end {
  justify-content: flex-end;
}
.gap-1 {
  gap: 0.25rem;
}
.gap-2 {
  gap: 0.5rem;
}
.gap-3 {
  gap: 0.75rem;
}
.gap-4 {
  gap: 1rem;
}
.text-center {
  text-align: center;
}
.text-right {
  text-align: right;
}
.text-left {
  text-align: left;
}
.text-primary {
  color: #F5F7FF;
}
.text-secondary {
  color: #B8BECC;
}
.text-muted {
  color: #7F8799;
}
.text-success {
  color: #00FF85;
}
.text-danger {
  color: #FF3B4E;
}
.text-warning {
  color: #FFD166;
}
.font-mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
}
.font-bold {
  font-weight: 700;
}
.font-medium {
  font-weight: 500;
}
.m-0 {
  margin: 0;
}
.mt-1 {
  margin-top: 0.25rem;
}
.mt-2 {
  margin-top: 0.5rem;
}
.mt-3 {
  margin-top: 0.75rem;
}
.mt-4 {
  margin-top: 1rem;
}
.mb-1 {
  margin-bottom: 0.25rem;
}
.mb-2 {
  margin-bottom: 0.5rem;
}
.mb-3 {
  margin-bottom: 0.75rem;
}
.mb-4 {
  margin-bottom: 1rem;
}
.p-0 {
  padding: 0;
}
.p-2 {
  padding: 0.5rem;
}
.p-3 {
  padding: 0.75rem;
}
.p-4 {
  padding: 1rem;
}
.w-full {
  width: 100%;
}
.h-full {
  height: 100%;
}
.rounded {
  border-radius: 10px;
}
.rounded-md {
  border-radius: 14px;
}
.rounded-lg {
  border-radius: 18px;
}
.rounded-full {
  border-radius: 9999px;
}
.border {
  border: 1px solid #2A2F3A;
}
.bg-primary {
  background-color: #0A0A0F;
}
.bg-secondary {
  background-color: #10101A;
}
.bg-card {
  background-color: #171726;
}
.truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.scrollable {
  overflow-y: auto;
}
.scrollable::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
.scrollable::-webkit-scrollbar-track {
  background: #10101A;
}
.scrollable::-webkit-scrollbar-thumb {
  background: #2A2F3A;
  border-radius: 4px;
}
.scrollable::-webkit-scrollbar-thumb:hover {
  background: #7F8799;
}
.placeholder {
  color: #7F8799;
  font-style: italic;
  padding: 1rem;
  text-align: center;
}
.placeholder.error {
  color: #FF3B4E;
}
.spinner {
  width: 20px;
  height: 20px;
  border: 2px solid #2A2F3A;
  border-top-color: #FF5A1F;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}
.positive {
  color: #00FF85;
}
.negative {
  color: #FF3B4E;
}
.change.positive {
  color: #00FF85;
}
.change.negative {
  color: #FF3B4E;
}