* {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }
    body {
      font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
      background-color: #0f1114;
      color: #ffffff;
      line-height: 1.4;
      padding: 16px;
    }
    .container {
      max-width: 1400px;
      margin: 0 auto;
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
      gap: 16px;
      align-items: start;
    }
    .alert-banner {
      grid-column: 1 / -1;
      background-color: rgba(255, 69, 58, 0.1);
      color: #ff453a;
      padding: 12px 16px;
      border-radius: 8px;
      font-size: 14px;
      display: flex;
      align-items: center;
      gap: 10px;
      margin-bottom: 16px;
    }
    /* Banner for Unusual Options Activity */
    .alert-banner.unusual {
      background-color: rgba(255, 159, 10, 0.1);
      color: #ff9f0a;
    }
    .card {
      background-color: #1c1d21;
      border-radius: 12px;
      padding: 16px;
      box-shadow: 0 4px 6px rgba(0,0,0,0.1);
      border: 1px solid #2c2d33;
      transition: transform 0.3s ease;
      display: flex;
      flex-direction: column;
      height: 100%;
    }
    .card:hover {
      transform: scale(1.02);
    }
    .stock-card {
      display: flex;
      flex-direction: column;
      height: 100%;
    }
    .stock-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 16px;
    }
    .stock-symbol {
      font-size: 16px;
      font-weight: 700;
      display: flex;
      align-items: center;
      gap: 10px;
    }
    .stock-price {
      font-size: 14px;
    }
    .positive { color: #32d74b; }
    .negative { color: #ff453a; }
    .setup-tag {
      padding: 4px 8px;
      border-radius: 6px;
      font-size: 12px;
      font-weight: 600;
    }
    .bullish {
      background-color: rgba(50, 215, 75, 0.1);
      color: #32d74b;
    }
    .bearish {
      background-color: rgba(255, 69, 58, 0.1);
      color: #ff453a;
    }
    .action-point {
      background-color: rgba(59, 130, 246, 0.1);
      border-radius: 8px;
      padding: 12px;
      color: #60a5fa;
      font-size: 14px;
      margin: 12px 0;
      flex-grow: 1;
    }
    .section {
      border-top: 1px solid #2c2d33;
      padding-top: 12px;
      margin-top: 12px;
    }
    .section-title {
      color: #8e8e93;
      font-size: 14px;
      margin-bottom: 10px;
      display: flex;
      align-items: center;
      gap: 8px;
    }
    .section-title::before {
      content: '';
      display: inline-block;
      width: 6px;
      height: 6px;
      border-radius: 50%;
    }
    .target-title::before { background-color: #32d74b; }
    .risk-title::before { background-color: #ff453a; }
    .level-row {
      display: flex;
      justify-content: space-between;
      margin: 6px 0;
      font-size: 14px;
    }
    .level-label {
      color: #8e8e93;
      font-size: 12px;
    }
    .price-detail {
      font-size: 12px;
      color: #8e8e93;
    }
    .news-section, .tweets-section {
      display: flex;
      flex-direction: column;
      gap: 12px;
    }
    .news-item, .tweet {
      background-color: #1c1d21;
      border-radius: 8px;
      padding: 12px;
      border: 1px solid #2c2d33;
    }
    .tweet-header {
      display: flex;
      align-items: center;
      gap: 8px;
      margin-bottom: 8px;
    }
    .tweet-author {
      font-weight: 600;
      font-size: 14px;
    }
    .tweet-handle {
      color: #8e8e93;
      font-size: 12px;
    }
    .tweet-content {
      font-size: 14px;
      margin-bottom: 8px;
    }
    .tweet-meta {
      display: flex;
      justify-content: space-between;
      color: #8e8e93;
      font-size: 12px;
    }
    .news-item-title {
      font-size: 15px;
      font-weight: 600;
      margin-bottom: 8px;
    }
    .news-item-summary {
      color: #8e8e93;
      font-size: 13px;
      margin-bottom: 8px;
    }
    .news-item-footer {
      display: flex;
      justify-content: space-between;
      font-size: 12px;
      color: #8e8e93;
    }
    .read-more-btn {
      background-color: rgba(59, 130, 246, 0.1);
      color: #60a5fa;
      border: none;
      padding: 8px 12px;
      border-radius: 6px;
      font-size: 13px;
      cursor: pointer;
      transition: background-color 0.3s ease;
    }
    .read-more-btn:hover {
      background-color: rgba(59, 130, 246, 0.2);
    }
    /* Progress bar styling */
    .progress-bar {
      background-color: #2c2d33;
      height: 8px;
      border-radius: 4px;
      position: relative;
      overflow: hidden;
      margin-top: 4px;
      margin-bottom: 8px;
    }
    .progress-bar-fill {
      background-color: #60a5fa;
      height: 100%;
      border-radius: 4px;
      transition: width 0.3s ease;
    }
    .ai-market-intel-item {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 10px;
    }
    .ai-market-intel-label {
      font-size: 14px;
      font-weight: 600;
    }
    .ai-market-intel-value {
      font-size: 14px;
      display: flex;
      align-items: center;
      gap: 6px;
    }
    .change-value {
      font-size: 12px;
    }
    .change-value.positive {
      color: #32d74b;
    }
    .change-value.negative {
      color: #ff453a;
    }
    /* Fear & Greed Index */
    .fear-greed-score {
      font-size: 48px;
      font-weight: 700;
      margin-bottom: 8px;
    }
    .fear-greed-label {
      font-size: 14px;
      text-transform: uppercase;
      letter-spacing: 1px;
    }

  /* Add these new styles to make the news and tweets sections scrollable */
.news-section, .tweets-section, .tweets-container {
  max-height: 1300px;
  overflow-y: auto;
  padding-right: 6px;
  margin-top: 0;
  /* Styling the scrollbar */
  scrollbar-width: thin;
  scrollbar-color: #60a5fa #2c2d33;
}

/* Webkit scrollbar styling (for Chrome, Safari, Edge) */
.news-section::-webkit-scrollbar, 
.tweets-section::-webkit-scrollbar,
.tweets-container::-webkit-scrollbar {
  width: 6px;
}

.news-section::-webkit-scrollbar-track, 
.tweets-section::-webkit-scrollbar-track,
.tweets-container::-webkit-scrollbar-track {
  background: #2c2d33;
  border-radius: 3px;
}

.news-section::-webkit-scrollbar-thumb, 
.tweets-section::-webkit-scrollbar-thumb,
.tweets-container::-webkit-scrollbar-thumb {
  background-color: #60a5fa;
  border-radius: 3px;
}

/* Make news items and tweets more compact */
.news-item, .tweet {
  padding: 10px;
  margin-bottom: 8px;
}

/* Remove gap in the parent container */
.news-section, .tweets-section {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.news-item-title {
  font-size: 14px;
  margin-bottom: 6px;
}

.news-item-summary {
  font-size: 12px;
  margin-bottom: 6px;
  line-height: 1.3;
}

.news-item-footer {
  font-size: 11px;
  margin-top: 4px;
}

.tweet-header {
  margin-bottom: 6px;
}

.tweet-content {
  font-size: 13px;
  margin-bottom: 6px;
  line-height: 1.3;
}

.tweet-meta {
  font-size: 11px;
}

.read-more-btn {
  padding: 6px 10px;
  font-size: 12px;
  margin-top: 4px;
}

/* Make the entire container more compact */
.container {
  gap: 12px;
}

.card {
  padding: 12px;
}


/* Add these CSS styles to your stylesheet */

/* Add these CSS styles to your stylesheet */
.sector-header {
  margin-bottom: 15px;
}

.sector-header .subtitle {
  color: #888;
  font-size: 14px;
  margin-top: -5px;
  margin-bottom: 5px;
}

.insights-card {
  padding: 15px;
  background-color: #1c1d21;
  margin-bottom: 15px;
}

.insights-list {
  list-style-type: none;
  padding: 0;
  margin: 0;
}

.insights-list li {
  margin-bottom: 10px;
  font-size: 14px;
  color: #ddd;
}

.highlight {
  font-weight: 600;
  margin-right: 5px;
}

.highlight.green {
  color: #32d74b;
}

.highlight.red {
  color: #ff453a;
}

.highlight.blue {
  color: #0a84ff;
}

.highlight.yellow {
  color: #ffd60a;
}

/* Full-Screen Stock Analysis Overlay */
.stock-analysis-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: #121212;
  z-index: 2000;
  animation: overlayFadeIn 0.3s ease-out;
  overflow-y: auto;
}

@keyframes overlayFadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes tooltipFadeIn {
  from {
    opacity: 0;
    transform: translateX(-50%) translateY(5px);
  }
  to {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
}

/* Overlay Header */
.overlay-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 32px;
  background: #1c1d21;
  border-bottom: 1px solid #333640;
  position: sticky;
  top: 0;
  z-index: 10;
}

.overlay-title {
  display: flex;
  align-items: center;
  gap: 16px;
}

.stock-symbol-large {
  background: #0a84ff;
  color: white;
  padding: 12px 20px;
  border-radius: 8px;
  font-weight: 700;
  font-size: 20px;
  letter-spacing: 0.5px;
}

.stock-company-name {
  color: #ffffff;
  font-size: 24px;
  font-weight: 600;
}

.stock-sector {
  color: #8e8e93;
  font-size: 16px;
  margin-left: 8px;
}

.close-overlay-btn {
  background: #333640;
  border: none;
  color: #8e8e93;
  width: 44px;
  height: 44px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 18px;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.close-overlay-btn:hover {
  background: #404553;
  color: #ffffff;
}

/* Main Content Grid */
.overlay-content {
  padding: 32px;
  max-width: 1400px;
  margin: 0 auto;
}

.analysis-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 24px;
  margin-bottom: 32px;
}

.analysis-widget {
  background: #1c1d21;
  border: 1px solid #333640;
  border-radius: 12px;
  padding: 20px;
  transition: all 0.2s ease;
}

.analysis-widget:hover {
  border-color: #404553;
  background: #202227;
}

.widget-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

.widget-title {
  color: #ffffff;
  font-size: 18px;
  font-weight: 600;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}

.widget-value {
  color: #0a84ff;
  font-size: 16px;
  font-weight: 500;
}

/* Price Widget */
.price-display {
  text-align: center;
  padding: 20px 0;
}

.current-price {
  font-size: 48px;
  font-weight: 700;
  color: #ffffff;
  margin: 0;
}

.price-change {
  font-size: 18px;
  font-weight: 600;
  margin: 8px 0;
}

.price-change.positive {
  color: #32d74b;
}

.price-change.negative {
  color: #ff453a;
}

.price-metrics {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-top: 20px;
}

.metric-item {
  text-align: center;
}

.metric-label {
  color: #8e8e93;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 4px;
}

.metric-value {
  color: #ffffff;
  font-size: 16px;
  font-weight: 600;
}

/* Sentiment Widget */
.sentiment-score-large {
  text-align: center;
  margin-bottom: 20px;
}

.sentiment-number {
  font-size: 36px;
  font-weight: 700;
  color: #ffffff;
}

.sentiment-label-large {
  display: block;
  font-size: 16px;
  font-weight: 600;
  margin-top: 8px;
}

.sentiment-label-large.bullish {
  color: #32d74b;
}

.sentiment-label-large.bearish {
  color: #ff453a;
}

.sentiment-label-large.neutral {
  color: #ffd60a;
}

.sentiment-sources {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

.source-item {
  flex: 1;
  text-align: center;
  padding: 12px;
  background: #2a2d35;
  border-radius: 8px;
}

.source-platform {
  font-size: 14px;
  color: #8e8e93;
  margin-bottom: 4px;
}

.source-score {
  font-size: 18px;
  font-weight: 600;
  color: #ffffff;
}

/* News Widget */
.news-item-compact {
  display: flex;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid #333640;
}

.news-item-compact:last-child {
  border-bottom: none;
}

.news-sentiment-indicator {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-top: 6px;
  flex-shrink: 0;
}

.news-sentiment-indicator.positive {
  background: #32d74b;
}

.news-sentiment-indicator.negative {
  background: #ff453a;
}

.news-sentiment-indicator.neutral {
  background: #ffd60a;
}

.news-content-compact {
  flex: 1;
}

.news-headline {
  color: #ffffff;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.4;
  margin: 0 0 4px 0;
}

.news-meta-compact {
  display: flex;
  gap: 8px;
  font-size: 12px;
  color: #8e8e93;
}

/* Full News Section */
.full-news-section {
  margin-top: 32px;
}

.section-title {
  color: #ffffff;
  font-size: 24px;
  font-weight: 600;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.news-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}

.news-article {
  background: #1c1d21;
  border: 1px solid #333640;
  border-radius: 12px;
  padding: 20px;
  transition: all 0.2s ease;
}

.news-article:hover {
  border-color: #404553;
  background: #202227;
}

.article-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 12px;
}

.article-title {
  color: #ffffff;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.3;
  margin: 0;
  flex: 1;
}

.article-sentiment {
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 500;
  text-transform: uppercase;
  margin-left: 12px;
}

.article-sentiment.positive {
  background: rgba(50, 215, 75, 0.2);
  color: #32d74b;
}

.article-sentiment.negative {
  background: rgba(255, 69, 58, 0.2);
  color: #ff453a;
}

.article-sentiment.neutral {
  background: rgba(255, 214, 10, 0.2);
  color: #ffd60a;
}

.article-meta {
  display: flex;
  gap: 16px;
  margin-bottom: 12px;
  font-size: 14px;
}

.article-source {
  color: #0a84ff;
  font-weight: 500;
}

.article-time {
  color: #8e8e93;
}

.article-summary {
  color: #c7c7cc;
  font-size: 14px;
  line-height: 1.5;
  margin: 0;
}

/* Social Media Feed Section */
.social-feed-section {
  margin-top: 32px;
}

.social-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}

.social-feed-widget {
  background: #1c1d21;
  border: 1px solid #333640;
  border-radius: 12px;
  padding: 20px;
  max-height: 600px;
  overflow-y: auto;
}

.social-feed-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
  padding-bottom: 12px;
  border-bottom: 1px solid #333640;
}

.social-platform-title {
  color: #ffffff;
  font-size: 18px;
  font-weight: 600;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}

.tweet-count {
  color: #8e8e93;
  font-size: 14px;
}

/* Tweet Card Styles */
.tweet-card {
  background: #2a2d35;
  border: 1px solid #333640;
  border-radius: 8px;
  padding: 16px;
  margin-bottom: 12px;
  transition: all 0.2s ease;
}

.tweet-card:hover {
  border-color: #404553;
  background: #2f3238;
}

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

.tweet-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: linear-gradient(135deg, #0a84ff, #5ac8fa);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-weight: 600;
  font-size: 14px;
}

.tweet-user-info {
  flex: 1;
}

.tweet-username {
  color: #ffffff;
  font-weight: 600;
  font-size: 14px;
  margin: 0 0 2px 0;
}

.tweet-handle {
  color: #8e8e93;
  font-size: 12px;
}

.tweet-time {
  color: #8e8e93;
  font-size: 12px;
}

.tweet-content {
  color: #ffffff;
  font-size: 14px;
  line-height: 1.4;
  margin: 8px 0;
}

.tweet-ticker {
  color: #0a84ff;
  font-weight: 600;
}

.tweet-hashtag {
  color: #0a84ff;
}

.tweet-metrics {
  display: flex;
  gap: 16px;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid #404553;
}

.tweet-metric {
  display: flex;
  align-items: center;
  gap: 4px;
  color: #8e8e93;
  font-size: 12px;
}

.tweet-sentiment {
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 500;
  text-transform: uppercase;
}

.tweet-sentiment.bullish {
  background: rgba(50, 215, 75, 0.2);
  color: #32d74b;
}

.tweet-sentiment.bearish {
  background: rgba(255, 69, 58, 0.2);
  color: #ff453a;
}

.tweet-sentiment.neutral {
  background: rgba(255, 214, 10, 0.2);
  color: #ffd60a;
}

/* Reddit Post Styles */
.reddit-post {
  background: #2a2d35;
  border: 1px solid #333640;
  border-radius: 8px;
  padding: 16px;
  margin-bottom: 12px;
  transition: all 0.2s ease;
}

.reddit-post:hover {
  border-color: #404553;
  background: #2f3238;
}

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

.reddit-info {
  color: #8e8e93;
  font-size: 12px;
}

.reddit-title {
  color: #ffffff;
  font-weight: 600;
  font-size: 14px;
  line-height: 1.3;
  margin: 0 0 8px 0;
}

.reddit-content {
  color: #c7c7cc;
  font-size: 13px;
  line-height: 1.4;
  margin: 8px 0;
}

.reddit-metrics {
  display: flex;
  gap: 16px;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid #404553;
  font-size: 12px;
  color: #8e8e93;
}

.reddit-upvotes {
  color: #ff6b35;
}

.reddit-comments {
  color: #8e8e93;
}

/* AI Analysis Section */
.ai-analysis-section {
  margin-top: 32px;
  margin-bottom: 32px;
}

.ai-analysis-widget {
  background: linear-gradient(135deg, #1c1d21 0%, #2a2d35 100%);
  border: 2px solid #0a84ff;
  border-radius: 16px;
  padding: 24px;
  box-shadow: 0 8px 24px rgba(10, 132, 255, 0.2);
}

.ai-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24px;
  padding-bottom: 16px;
  border-bottom: 1px solid #333640;
}

.ai-title {
  color: #ffffff;
  font-size: 24px;
  font-weight: 700;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 12px;
}

.ai-badge {
  background: linear-gradient(135deg, #0a84ff, #5ac8fa);
  color: white;
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
}

.ai-prediction-summary {
  background: #2a2d35;
  border-radius: 12px;
  padding: 20px;
  margin-bottom: 24px;
}

.ai-verdict {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

.ai-verdict-label {
  color: #ffffff;
  font-size: 20px;
  font-weight: 600;
}

.ai-verdict-value {
  padding: 8px 16px;
  border-radius: 8px;
  font-size: 18px;
  font-weight: 700;
  text-transform: uppercase;
}

.ai-verdict-value.strong-buy {
  background: rgba(50, 215, 75, 0.2);
  color: #32d74b;
  border: 1px solid #32d74b;
}

.ai-verdict-value.buy {
  background: rgba(50, 215, 75, 0.1);
  color: #32d74b;
  border: 1px solid rgba(50, 215, 75, 0.5);
}

.ai-verdict-value.hold {
  background: rgba(255, 214, 10, 0.2);
  color: #ffd60a;
  border: 1px solid #ffd60a;
}

.ai-verdict-value.sell {
  background: rgba(255, 69, 58, 0.2);
  color: #ff453a;
  border: 1px solid #ff453a;
}

.ai-confidence {
  display: flex;
  align-items: center;
  gap: 16px;
}

.confidence-label {
  color: #8e8e93;
  font-size: 14px;
}

.confidence-bar {
  flex: 1;
  height: 8px;
  background: #404553;
  border-radius: 4px;
  overflow: hidden;
  position: relative;
}

.confidence-fill {
  height: 100%;
  background: linear-gradient(90deg, #0a84ff, #5ac8fa);
  border-radius: 4px;
  transition: width 0.5s ease;
}

.confidence-value {
  color: #0a84ff;
  font-weight: 600;
  font-size: 16px;
}

.ai-insights-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-bottom: 24px;
}

.ai-insight-card {
  background: #2a2d35;
  border-radius: 8px;
  padding: 16px;
  border: 1px solid #333640;
  transition: all 0.2s ease;
}

.ai-insight-card:hover {
  border-color: #0a84ff;
  background: #2f3238;
}

.insight-icon {
  font-size: 24px;
  margin-bottom: 8px;
}

.insight-title {
  color: #ffffff;
  font-weight: 600;
  font-size: 16px;
  margin: 0 0 8px 0;
}

.insight-content {
  color: #c7c7cc;
  font-size: 14px;
  line-height: 1.4;
}

.ai-levels {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-bottom: 24px;
}

.level-card {
  background: #2a2d35;
  border-radius: 8px;
  padding: 16px;
}

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

.level-title {
  color: #ffffff;
  font-weight: 600;
  font-size: 16px;
  margin: 0;
}

.level-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.level-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px;
  background: #1c1d21;
  border-radius: 4px;
}

.level-price {
  color: #ffffff;
  font-weight: 600;
  font-size: 16px;
}

.level-description {
  color: #8e8e93;
  font-size: 12px;
}

.target-levels .level-price {
  color: #32d74b;
}

.risk-levels .level-price {
  color: #ff453a;
}

.ai-explanation {
  background: #2a2d35;
  border-radius: 12px;
  padding: 20px;
}

.explanation-title {
  color: #ffffff;
  font-size: 18px;
  font-weight: 600;
  margin: 0 0 16px 0;
  display: flex;
  align-items: center;
  gap: 8px;
}

.explanation-text {
  color: #c7c7cc;
  font-size: 14px;
  line-height: 1.6;
  margin: 0;
}

.highlight-ticker {
  color: #0a84ff;
  font-weight: 600;
}

.highlight-positive {
  color: #32d74b;
  font-weight: 600;
}

.highlight-negative {
  color: #ff453a;
  font-weight: 600;
}

/* Responsive Design */
@media (max-width: 1200px) {
  .analysis-grid {
    grid-template-columns: 1fr 1fr;
  }
  
  .news-grid {
    grid-template-columns: 1fr;
  }
  
  .social-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  .analysis-grid {
    grid-template-columns: 1fr;
  }
  
  .overlay-content {
    padding: 16px;
  }
  
  .overlay-header {
    padding: 16px 20px;
  }
  
  .stock-company-name {
    font-size: 20px;
  }
  
  .current-price {
    font-size: 36px;
  }
}

/* Modern Summary Cards */
.summary-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
  padding: 24px 32px;
  margin-bottom: 20px;
}

.summary-card {
  background: #1c1d21;
  border: 1px solid #333640;
  border-radius: 12px;
  padding: 20px;
  display: flex;
  align-items: center;
  gap: 16px;
  transition: all 0.3s ease;
}

.summary-card:hover {
  border-color: #4f7eff;
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(79, 126, 255, 0.15);
}

.card-icon {
  font-size: 32px;
  width: 60px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(79, 126, 255, 0.1);
  border-radius: 12px;
  flex-shrink: 0;
}

.card-content {
  flex: 1;
}

.card-title {
  font-size: 14px;
  color: #888;
  margin: 0 0 8px 0;
  font-weight: 500;
}

.card-value {
  font-size: 24px;
  font-weight: 700;
  color: #ffffff;
  margin: 0 0 4px 0;
}

.card-change {
  font-size: 14px;
  font-weight: 600;
}

.card-change.positive {
  color: #32d74b;
}

.card-change.negative {
  color: #ff453a;
}

.card-change.bullish {
  color: #32d74b;
}

.card-change.bearish {
  color: #ff453a;
}

.card-change.neutral {
  color: #ffd60a;
}

/* AI Analysis Section */
.ai-analysis-section {
  margin: 0 32px 24px 32px;
  background: #1c1d21;
  border: 1px solid #333640;
  border-radius: 12px;
  overflow: hidden;
}

.section-header {
  padding: 20px 24px;
  border-bottom: 1px solid #333640;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.section-title {
  font-size: 20px;
  font-weight: 700;
  color: #ffffff;
  margin: 0 0 12px 0;
}

.section-badge {
  background: rgba(79, 126, 255, 0.15);
  color: #4f7eff;
  padding: 6px 12px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
}

.ai-content {
  padding: 24px;
}

.ai-summary {
  margin-bottom: 24px;
}

.ai-summary-title {
  font-size: 18px;
  font-weight: 600;
  color: #ffffff;
  margin: 0 0 12px 0;
}

.ai-summary-text {
  font-size: 16px;
  line-height: 1.6;
  color: #ddd;
  margin: 0;
}

.price-levels {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-top: 24px;
}

@media (max-width: 768px) {
  .price-levels {
    grid-template-columns: 1fr;
  }
}

.level-section {
  background: rgba(255, 255, 255, 0.03);
  border-radius: 8px;
  padding: 16px;
}

.level-title {
  font-size: 16px;
  font-weight: 600;
  color: #ffffff;
  margin: 0 0 12px 0;
}

.level-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.level-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 12px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.05);
}

.level-item.target {
  border-left: 3px solid #32d74b;
}

.level-item.risk {
  border-left: 3px solid #ff453a;
}

.level-price {
  font-weight: 700;
  color: #ffffff;
  font-size: 14px;
}

.level-detail {
  font-size: 12px;
  color: #888;
  text-align: right;
}

/* Individual News Widgets */
.news-widgets-section {
  margin: 0 32px 24px 32px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.news-widget {
  background: #1c1d21;
  border: 1px solid #333640;
  border-radius: 12px;
  overflow: hidden;
  transition: all 0.3s ease;
}

.news-widget:hover {
  border-color: #4f7eff;
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(79, 126, 255, 0.15);
}

.news-widget-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 20px 12px 20px;
  border-bottom: 1px solid #333640;
  background: rgba(255, 255, 255, 0.02);
}

.news-widget-icon {
  font-size: 20px;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(79, 126, 255, 0.1);
  border-radius: 8px;
  flex-shrink: 0;
}

.news-widget-meta {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.news-widget-source {
  font-size: 14px;
  font-weight: 600;
  color: #ffffff;
}

.news-widget-time {
  font-size: 12px;
  color: #888;
}

.news-widget-sentiment {
  padding: 6px 12px;
  border-radius: 12px;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  flex-shrink: 0;
}

.news-widget-sentiment.bullish,
.news-widget-sentiment.positive {
  background: rgba(50, 215, 75, 0.15);
  color: #32d74b;
}

.news-widget-sentiment.bearish,
.news-widget-sentiment.negative {
  background: rgba(255, 69, 58, 0.15);
  color: #ff453a;
}

.news-widget-sentiment.neutral {
  background: rgba(255, 214, 10, 0.15);
  color: #ffd60a;
}

.news-widget-content {
  padding: 16px 20px 20px 20px;
}

.news-widget-title {
  font-size: 16px;
  font-weight: 600;
  color: #ffffff;
  margin: 0 0 12px 0;
  line-height: 1.4;
}

.news-widget-summary {
  font-size: 14px;
  color: #aaa;
  line-height: 1.6;
  margin: 0;
}

/* Tab Navigation */
.overlay-tabs {
  display: flex;
  background: #1c1d21;
  border-bottom: 1px solid #333640;
  padding: 0 32px;
  gap: 4px;
}

.tab-button {
  background: transparent;
  border: none;
  color: #888;
  padding: 16px 24px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  transition: all 0.2s ease;
  border-bottom: 2px solid transparent;
}

.tab-button.active {
  color: #0a84ff;
  border-bottom-color: #0a84ff;
}

.tab-button:hover {
  color: #ddd;
  background: rgba(255, 255, 255, 0.05);
}

/* Financial Metrics */
.financials-section {
  padding: 20px 0;
}

.financial-quarter {
  background: #1c1d21;
  padding: 20px;
  border-radius: 8px;
  margin-bottom: 20px;
}

.financial-quarter h3 {
  color: #0a84ff;
  margin-bottom: 15px;
}

.financial-metrics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 15px;
}

.metric-item {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 15px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 6px;
}

.metric-label {
  font-size: 12px;
  color: #888;
  text-transform: uppercase;
}

.metric-value {
  font-size: 18px;
  font-weight: bold;
  color: #fff;
}

.metric-change {
  font-size: 12px;
}

.metric-change.positive {
  color: #32d74b;
}

.metric-change.negative {
  color: #ff453a;
}

.dividends-section {
  margin-top: 30px;
}

.dividends-section h3 {
  color: #ffd60a;
  margin-bottom: 15px;
}

/* Analysis Section */
.analysis-section {
  padding: 20px 0;
}

.analyst-consensus {
  background: #1c1d21;
  padding: 20px;
  border-radius: 8px;
}

.consensus-rating h3 {
  color: #0a84ff;
  margin-bottom: 10px;
}

.target-price {
  font-size: 16px;
  color: #32d74b;
  font-weight: bold;
}

.analyst-ratings-list {
  margin-top: 20px;
}

.analyst-ratings-list h4 {
  color: #888;
  margin-bottom: 15px;
}

.rating-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid #333640;
}

.rating-firm {
  font-weight: bold;
  color: #fff;
}

.rating-details {
  display: flex;
  gap: 15px;
  align-items: center;
}

.rating-action {
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: bold;
  text-transform: uppercase;
}

.rating-action.buy {
  background: #32d74b;
  color: #000;
}

.rating-action.hold {
  background: #ffd60a;
  color: #000;
}

.rating-action.sell {
  background: #ff453a;
  color: #fff;
}

.rating-target {
  color: #32d74b;
  font-weight: bold;
}

.rating-previous {
  color: #888;
  font-size: 12px;
}

.rating-date {
  color: #888;
  font-size: 12px;
}

/* Technical Section */
.technical-section {
  padding: 20px 0;
}

.technical-indicators {
  background: #1c1d21;
  padding: 20px;
  border-radius: 8px;
}

.indicator-group {
  margin-bottom: 25px;
}

.indicator-group h3 {
  color: #0a84ff;
  margin-bottom: 15px;
}

.indicator-items {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.indicator-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 15px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 6px;
}

.indicator-label {
  color: #888;
  font-size: 14px;
}

.indicator-value {
  color: #fff;
  font-weight: bold;
}

.indicator-diff {
  font-size: 12px;
}

.indicator-diff.positive {
  color: #32d74b;
}

.indicator-diff.negative {
  color: #ff453a;
}

.momentum-status {
  padding: 10px 20px;
  border-radius: 20px;
  text-align: center;
  font-weight: bold;
  text-transform: uppercase;
}

.momentum-status.bullish {
  background: rgba(50, 215, 75, 0.2);
  color: #32d74b;
}

.momentum-status.bearish {
  background: rgba(255, 69, 58, 0.2);
  color: #ff453a;
}

.momentum-status.neutral {
  background: rgba(142, 142, 147, 0.2);
  color: #8e8e93;
}

/* Ownership Section */
.ownership-section {
  padding: 20px 0;
}

.ownership-breakdown {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-bottom: 30px;
}

.ownership-type {
  background: #1c1d21;
  padding: 20px;
  border-radius: 8px;
  text-align: center;
}

.ownership-type h3 {
  color: #0a84ff;
  margin-bottom: 10px;
}

.ownership-percentage {
  font-size: 28px;
  font-weight: bold;
  color: #fff;
}

.insider-transactions {
  background: #1c1d21;
  padding: 20px;
  border-radius: 8px;
}

.insider-transactions h3 {
  color: #ffd60a;
  margin-bottom: 15px;
}

.transaction-item {
  padding: 15px 0;
  border-bottom: 1px solid #333640;
}

.transaction-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 8px;
}

.transaction-name {
  font-weight: bold;
  color: #fff;
}

.transaction-position {
  color: #888;
  font-size: 12px;
}

.transaction-details {
  display: flex;
  gap: 15px;
  flex-wrap: wrap;
  align-items: center;
}

.transaction-action {
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: bold;
}

.transaction-action.buy {
  background: #32d74b;
  color: #000;
}

.transaction-action.sell {
  background: #ff453a;
  color: #fff;
}

.transaction-shares,
.transaction-price,
.transaction-value {
  color: #fff;
  font-size: 12px;
}

.transaction-date {
  color: #888;
  font-size: 12px;
}

/* Yahoo Finance Links */
.yahoo-links-section {
  margin-top: 30px;
  padding: 20px;
  background: #1c1d21;
  border-radius: 8px;
}

.yahoo-links-section h3 {
  color: #0a84ff;
  margin-bottom: 15px;
}

.yahoo-links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.yahoo-link {
  padding: 8px 16px;
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  text-decoration: none;
  border-radius: 6px;
  font-size: 12px;
  transition: all 0.2s ease;
}

.yahoo-link:hover {
  background: #0a84ff;
  color: #fff;
}

/* Analysis Lists */
.analysis-list ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.analysis-list li {
  padding: 8px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  color: #ddd;
}

.analysis-list li:last-child {
  border-bottom: none;
}

/* Badge Styling */
.section-badge.bullish {
  background: rgba(50, 215, 75, 0.2);
  color: #32d74b;
}

.section-badge.bearish {
  background: rgba(255, 69, 58, 0.2);
  color: #ff453a;
}

.section-badge.mixed {
  background: rgba(255, 214, 10, 0.2);
  color: #ffd60a;
}

.section-badge.neutral {
  background: rgba(142, 142, 147, 0.2);
  color: #8e8e93;
}

/* Simplified Data Grid Layout */
.data-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-top: 20px;
}

.data-section {
  background: #1c1d21;
  padding: 20px;
  border-radius: 8px;
}

.data-section.full-width {
  grid-column: 1 / -1;
}

.data-section h3 {
  color: #0a84ff;
  margin-bottom: 15px;
  font-size: 16px;
}

.metric-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.metric-row:last-child {
  border-bottom: none;
}

.metric-row span:first-child {
  color: #888;
  font-size: 14px;
}

.metric-row span:last-child {
  color: #fff;
  font-weight: 500;
}

.metric-row small {
  margin-left: 8px;
  font-size: 12px;
}

.metric-row small.positive {
  color: #32d74b;
}

.metric-row small.negative {
  color: #ff453a;
}

/* Rating and Status Badges */
.rating-badge, .momentum-badge {
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: bold;
  text-transform: uppercase;
}

.rating-badge.buy, .momentum-badge.bullish {
  background: #32d74b;
  color: #000;
}

.rating-badge.hold {
  background: #ffd60a;
  color: #000;
}

.rating-badge.sell, .momentum-badge.bearish {
  background: #ff453a;
  color: #fff;
}

.momentum-badge.neutral {
  background: #8e8e93;
  color: #fff;
}

/* News Items */
.news-item {
  margin-bottom: 15px;
  padding-bottom: 15px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.news-item:last-child {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none;
}

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

.news-source {
  font-size: 12px;
  color: #0a84ff;
  font-weight: 500;
}

.news-date {
  font-size: 12px;
  color: #888;
}

.news-impact {
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: bold;
  text-transform: uppercase;
}

.news-impact.positive {
  background: rgba(50, 215, 75, 0.2);
  color: #32d74b;
}

.news-impact.negative {
  background: rgba(255, 69, 58, 0.2);
  color: #ff453a;
}

.news-impact.neutral {
  background: rgba(142, 142, 147, 0.2);
  color: #8e8e93;
}

.news-title {
  color: #fff;
  font-size: 14px;
  margin-bottom: 5px;
  line-height: 1.3;
}

.news-summary {
  color: #aaa;
  font-size: 13px;
  line-height: 1.4;
  margin: 0;
}

/* Loading Animation */
@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* Shimmer Animation */
@keyframes shimmer {
  0% { transform: translateX(-100%); }
  50% { transform: translateX(100%); }
  100% { transform: translateX(100%); }
}

/* Responsive Design */
@media (max-width: 768px) {
  .data-grid {
    grid-template-columns: 1fr;
    gap: 15px;
  }
  
  .summary-cards {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .overlay-content {
    padding: 16px;
  }
  
  .overlay-header {
    padding: 16px 20px;
  }
}

/* Insider Trading Table Styles */
.insider-table {
  width: 100%;
  border-collapse: collapse;
}

.insider-table th {
  padding: 12px;
  text-align: left;
  color: #888;
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.insider-table td {
  padding: 12px;
  vertical-align: top;
}

.insider-table tbody tr:hover {
  background-color: rgba(255, 255, 255, 0.02);
}

.insider-table tbody tr {
  transition: background-color 0.2s ease;
}

@media (max-width: 768px) {
  .insider-table {
    font-size: 12px;
  }
  
  .insider-table th,
  .insider-table td {
    padding: 8px;
  }
  
  /* Buy the Rumor, Sell the News mobile styles */
  .section-header h2 {
    font-size: 20px;
  }
  
  .section-header h2 span:first-child {
    font-size: 24px !important;
  }
  
  .section-header h2 span:nth-child(2) {
    font-size: 18px !important;
  }
  
  .section-header h2 span:last-child {
    margin-left: 5px !important;
    font-size: 10px !important;
  }
}
/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *


 */