Final version 1

core/market_utils.py

@@ -0,0 +1,204 @@
+import yfinance as yf
+import pandas as pd
+import numpy as np
+from textblob import TextBlob
+import feedparser
+import httpx
+from typing import List, Tuple, Dict, Any
+import warnings
+
+# Suppress yfinance multi-index warning for cleaner logs
+warnings.filterwarnings("ignore", category=FutureWarning)
+
+class MarkovChain:
+    def __init__(self, symbol: str, bins: int = 5):
+        self.symbol = symbol
+        self.bins = bins
+
+    def fetch_data(self) -> pd.DataFrame:
+        try:
+            # Using period="1y" and auto_adjust=True
+            data = yf.download(self.symbol, period="1y", interval="1d", progress=False)
+            if data.empty:
+                return None
+            data["returns"] = data["Close"].pct_change()
+            return data.dropna()
+        except Exception:
+            return None
+
+    def build_states(self, data: pd.DataFrame) -> pd.DataFrame:
+        data["state"] = pd.qcut(
+            data["returns"],
+            self.bins,
+            labels=False,
+            duplicates="drop"
+        )
+        return data
+
+    def prob_matrix(self) -> Tuple[np.ndarray, int]:
+        data = self.fetch_data()
+        if data is None:
+            return None, None
+
+        data = self.build_states(data)
+        states = data["state"].astype(int).values
+        
+        unique_states = np.unique(states)
+        bins = len(unique_states)
+        transition_matrix = np.zeros((bins, bins))
+
+        for i in range(len(states) - 1):
+            current_state = states[i]
+            next_state = states[i + 1]
+            transition_matrix[current_state][next_state] += 1
+
+        row_sums = transition_matrix.sum(axis=1, keepdims=True)
+        # Fix the np.divide warning by providing 'out' and making it single-line/cleaner
+        transition_matrix = np.divide(
+            transition_matrix, 
+            row_sums, 
+            out=np.zeros_like(transition_matrix), 
+            where=row_sums != 0
+        )
+
+        recent_state = int(states[-1])
+        return transition_matrix, recent_state
+
+def add_moving_averages(data: pd.DataFrame, fast: int = 20, slow: int = 50) -> pd.DataFrame:
+    data["SMA_fast"] = data["Close"].rolling(window=fast).mean()
+    data["SMA_slow"] = data["Close"].rolling(window=slow).mean()
+    return data
+
+def add_crossover_signals(data: pd.DataFrame) -> pd.DataFrame:
+    data["signal"] = 0
+    data.loc[data["SMA_fast"] > data["SMA_slow"], "signal"] = 1
+    data["position_change"] = data["signal"].diff()
+
+    data["event"] = ""
+    data.loc[data["position_change"] == 1, "event"] = "Bullish Crossover"
+    data.loc[data["position_change"] == -1, "event"] = "Bearish Crossover"
+    return data
+
+def fetch_news() -> List[str]:
+    feeds = [
+        "https://feeds.bbci.co.uk/news/business/rss.xml",
+        "https://feeds.reuters.com/reuters/businessNews",
+    ]
+    headlines = []
+    for url in feeds:
+        try:
+            feed = feedparser.parse(url)
+            for entry in feed.entries[:10]: # reduced to 10 per feed for speed
+                headlines.append(entry.title)
+        except Exception:
+            continue
+    return list(set(headlines))
+
+def analyze_sentiment(headlines: List[str]) -> List[Tuple[str, float, str]]:
+    results = []
+    for h in headlines:
+        polarity = TextBlob(h).sentiment.polarity
+        if polarity > 0:
+            label = "Positive"
+        elif polarity < 0:
+            label = "Negative"
+        else:
+            label = "Neutral"
+        results.append((h, polarity, label))
+    return sorted(results, key=lambda x: x[1], reverse=True)
+
+def get_market_analysis(symbol: str) -> Dict[str, Any]:
+    # Markov Analysis
+    mc = MarkovChain(symbol)
+    matrix, recent_state = mc.prob_matrix()
+    markov_data = None
+    if matrix is not None:
+        next_probs = matrix[recent_state]
+        predicted_state = int(np.argmax(next_probs))
+        probability = float(next_probs[predicted_state])
+        
+        if predicted_state > recent_state:
+            bias = "Bullish"
+            color = "success"
+        elif predicted_state < recent_state:
+            bias = "Bearish"
+            color = "danger"
+        else:
+            bias = "Neutral"
+            color = "secondary"
+        
+        markov_data = {
+            "current_state": recent_state,
+            "predicted_state": predicted_state,
+            "probability": f"{probability:.2%}",
+            "bias": bias,
+            "color": color,
+            "state_labels": [
+                {"id": 0, "label": "Strong Bearish", "color": "vibrant-red"},
+                {"id": 1, "label": "Bearish", "color": "text-muted"},
+                {"id": 2, "label": "Neutral", "color": "text-light"},
+                {"id": 3, "label": "Bullish", "color": "cyber-blue"},
+                {"id": 4, "label": "Strong Bullish", "color": "neon-green"}
+            ]
+        }
+
+    # Technical Analysis
+    data = yf.download(symbol, period="6mo", interval="1d", progress=False)
+    tech_data = None
+    if not data.empty:
+        data = add_moving_averages(data)
+        data = add_crossover_signals(data)
+        latest = data.iloc[-1]
+        
+        # In newer yfinance versions, 'Close' can be a series if it's a MultiIndex (even with 1 symbol)
+        close_val = float(latest['Close'].iloc[0]) if hasattr(latest['Close'], 'iloc') else float(latest['Close'])
+        sma_fast = float(latest['SMA_fast'].iloc[0]) if hasattr(latest['SMA_fast'], 'iloc') else float(latest['SMA_fast'])
+        sma_slow = float(latest['SMA_slow'].iloc[0]) if hasattr(latest['SMA_slow'], 'iloc') else float(latest['SMA_slow'])
+
+        if sma_fast > sma_slow:
+            trend = "Bullish"
+            color = "success"
+        else:
+            trend = "Bearish"
+            color = "danger"
+        
+        last_event = data[data["event"] != ""]
+        last_event_msg = last_event.iloc[-1]["event"] if not last_event.empty else "No recent crossover"
+
+        tech_data = {
+            "latest_close": f"${close_val:.2f}",
+            "sma_20": f"${sma_fast:.2f}",
+            "sma_50": f"${sma_slow:.2f}",
+            "trend": trend,
+            "color": color,
+            "last_event": last_event_msg
+        }
+
+    # News Sentiment
+    headlines = fetch_news()
+    sentiment_results = analyze_sentiment(headlines)
+    avg_sentiment = float(np.mean([x[1] for x in sentiment_results])) if sentiment_results else 0.0
+
+    if avg_sentiment > 0:
+        overall = "Positive"
+        color = "success"
+    elif avg_sentiment < 0:
+        overall = "Negative"
+        color = "danger"
+    else:
+        overall = "Neutral"
+        color = "secondary"
+
+    sentiment_data = {
+        "avg_sentiment": f"{avg_sentiment:.2f}",
+        "overall": overall,
+        "color": color,
+        "top_headlines": [{"title": h, "label": l, "polarity": f"{p:.2f}"} for h, p, l in sentiment_results[:5]]
+    }
+
+    return {
+        "symbol": symbol.upper(),
+        "markov": markov_data,
+        "tech": tech_data,
+        "sentiment": sentiment_data
+    }

core/templates/base.html

@@ -1,25 +1,57 @@
 <!DOCTYPE html>
 <html lang="en">
-
 <head>
     <meta charset="UTF-8">
-  <title>{% block title %}Knowledge Base{% endblock %}</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  {% if project_description %}
+    <title>{% block title %}Market Intelligence Dashboard{% endblock %}</title>
-  <meta name="description" content="{{ project_description }}">
+    <meta name="description" content="{% block description %}Analyze stock market data using Markov Chains, Moving Averages, and Sentiment Analysis.{% endblock %}">
-  <meta property="og:description" content="{{ project_description }}">
+    
-  <meta property="twitter:description" content="{{ project_description }}">
+    <!-- Bootstrap 5 CSS -->
-  {% endif %}
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
-  {% if project_image_url %}
+    <!-- Google Fonts -->
-  <meta property="og:image" content="{{ project_image_url }}">
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;800&family=Montserrat:wght@700;800&display=swap" rel="stylesheet">
-  <meta property="twitter:image" content="{{ project_image_url }}">
+    <!-- Bootstrap Icons -->
-  {% endif %}
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.1/font/bootstrap-icons.css">
+    
     {% load static %}
-  <link rel="stylesheet" href="{% static 'css/custom.css' %}?v={{ deployment_timestamp }}">
+    <link rel="stylesheet" href="{% static 'css/custom.css' %}?v={% now 'U' %}">
-  {% block head %}{% endblock %}
+    
+    {% block extra_head %}{% endblock %}
 </head>
-
 <body>
-  {% block content %}{% endblock %}
+    <nav class="navbar navbar-expand-lg navbar-dark bg-dark border-bottom border-secondary">
-</body>
+        <div class="container">
+            <a class="navbar-brand brand-font d-flex align-items-center gap-2" href="/">
+                <span class="fs-4">📊</span> MarketInsight
+            </a>
+            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
+                <span class="navbar-toggler-icon"></span>
+            </button>
+            <div class="collapse navbar-collapse" id="navbarNav">
+                <ul class="navbar-nav ms-auto">
+                    <li class="nav-item">
+                        <a class="nav-link active" href="/">Dashboard</a>
+                    </li>
+                    <li class="nav-item">
+                        <a class="nav-link" href="/admin/">Admin</a>
+                    </li>
+                </ul>
+            </div>
+        </div>
+    </nav>
 
+    <main>
+        {% block content %}{% endblock %}
+    </main>
+
+    <footer class="bg-dark text-muted py-4 border-top border-secondary mt-5">
+        <div class="container text-center">
+            <p class="mb-0">&copy; {% now 'Y' %} Market Insight Dashboard. All rights reserved.</p>
+        </div>
+    </footer>
+
+    <!-- Bootstrap 5 JS -->
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
+    {% block extra_js %}{% endblock %}
+</body>
 </html>

core/templates/core/index.html

@@ -1,145 +1,157 @@
-{% extends "base.html" %}
+{% extends 'base.html' %}
-
+{% load static %}
-{% block title %}{{ project_name }}{% endblock %}
-
-{% block head %}
-<link rel="preconnect" href="https://fonts.googleapis.com">
-<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap" rel="stylesheet">
-<style>
-  :root {
-    --bg-color-start: #6a11cb;
-    --bg-color-end: #2575fc;
-    --text-color: #ffffff;
-    --card-bg-color: rgba(255, 255, 255, 0.01);
-    --card-border-color: rgba(255, 255, 255, 0.1);
-  }
-
-  * {
-    box-sizing: border-box;
-  }
-
-  body {
-    margin: 0;
-    font-family: 'Inter', sans-serif;
-    background: linear-gradient(45deg, var(--bg-color-start), var(--bg-color-end));
-    color: var(--text-color);
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    min-height: 100vh;
-    text-align: center;
-    overflow: hidden;
-    position: relative;
-  }
-
-  body::before {
-    content: '';
-    position: absolute;
-    inset: 0;
-    background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100'><path d='M-10 10L110 10M10 -10L10 110' stroke-width='1' stroke='rgba(255,255,255,0.05)'/></svg>");
-    animation: bg-pan 20s linear infinite;
-    z-index: -1;
-  }
-
-  @keyframes bg-pan {
-    0% {
-      background-position: 0% 0%;
-    }
-
-    100% {
-      background-position: 100% 100%;
-    }
-  }
-
-  main {
-    padding: 2rem;
-  }
-
-  .card {
-    background: var(--card-bg-color);
-    border: 1px solid var(--card-border-color);
-    border-radius: 16px;
-    padding: 2.5rem 2rem;
-    backdrop-filter: blur(20px);
-    -webkit-backdrop-filter: blur(20px);
-    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.25);
-  }
-
-  h1 {
-    font-size: clamp(2.2rem, 3vw + 1.2rem, 3.2rem);
-    font-weight: 700;
-    margin: 0 0 1.2rem;
-    letter-spacing: -0.02em;
-  }
-
-  p {
-    margin: 0.5rem 0;
-    font-size: 1.1rem;
-    opacity: 0.92;
-  }
-
-  .loader {
-    margin: 1.5rem auto;
-    width: 56px;
-    height: 56px;
-    border: 4px solid rgba(255, 255, 255, 0.25);
-    border-top-color: #fff;
-    border-radius: 50%;
-    animation: spin 1s linear infinite;
-  }
-
-  @keyframes spin {
-    to {
-      transform: rotate(360deg);
-    }
-  }
-
-  .runtime code {
-    background: rgba(0, 0, 0, 0.25);
-    padding: 0.15rem 0.45rem;
-    border-radius: 4px;
-    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
-  }
-
-  .sr-only {
-    position: absolute;
-    width: 1px;
-    height: 1px;
-    padding: 0;
-    margin: -1px;
-    overflow: hidden;
-    clip: rect(0, 0, 0, 0);
-    border: 0;
-  }
-
-  footer {
-    position: absolute;
-    bottom: 1rem;
-    width: 100%;
-    text-align: center;
-    font-size: 0.85rem;
-    opacity: 0.75;
-  }
-</style>
-{% endblock %}
 
 {% block content %}
-<main>
+<div class="hero-gradient py-5">
-  <div class="card">
+    <div class="container py-4">
-    <h1>Analyzing your requirements and generating your app…</h1>
+        <header class="text-center mb-5">
-    <div class="loader" role="status" aria-live="polite" aria-label="Applying initial changes">
+            <h1 class="display-4 fw-bold mb-2">📊 <span class="text-cyber">Market</span> Intelligence</h1>
-      <span class="sr-only">Loading…</span>
+            <p class="lead text-muted">Markov Chains • Moving Averages • News Sentiment</p>
+        </header>
+
+        <div class="row justify-content-center mb-5">
+            <div class="col-md-8 text-center">
+                <form method="GET" class="d-flex flex-column flex-sm-row justify-content-center align-items-center gap-3">
+                    <input type="text" name="symbol" value="{{ symbol }}" class="ticker-input" placeholder="Enter Stock Symbol (e.g. TSLA)" required>
+                    <button type="submit" class="btn btn-cyber">Run Analysis</button>
+                </form>
             </div>
-    <p class="hint">AppWizzy AI is collecting your requirements and applying the first changes.</p>
-    <p class="hint">This page will refresh automatically as the plan is implemented.</p>
-    <p class="runtime">
-      Runtime: Django <code>{{ django_version }}</code> · Python <code>{{ python_version }}</code>
-      — UTC <code>{{ current_time|date:"Y-m-d H:i:s" }}</code>
-    </p>
         </div>
-</main>
+
-<footer>
+        {% if error %}
-  Page updated: {{ current_time|date:"Y-m-d H:i:s" }} (UTC)
+        <div class="alert alert-danger bg-dark text-danger border-danger rounded-4 mb-5" role="alert">
-</footer>
+            {{ error }}
+        </div>
+        {% endif %}
+
+        {% if analysis %}
+        <div class="row g-4">
+            <!-- Markov Forecast -->
+            <div class="col-lg-4 col-md-6">
+                <div class="glass-card">
+                    <h3 class="h5 mb-4 text-cyber"><i class="bi bi-cpu"></i> Markov Forecast</h3>
+                    {% if analysis.markov %}
+                    <div class="mb-4">
+                        <div class="metric-label">Current State</div>
+                        <div class="metric-value">{{ analysis.markov.current_state }}</div>
+                    </div>
+                    <div class="mb-4">
+                        <div class="metric-label">Predicted State</div>
+                        <div class="metric-value">{{ analysis.markov.predicted_state }}</div>
+                    </div>
+                    <div class="mb-4">
+                        <div class="metric-label">Probability</div>
+                        <div class="metric-value text-cyber">{{ analysis.markov.probability }}</div>
+                    </div>
+                    <div class="mt-4 pt-3 border-top border-secondary">
+                        <div class="d-flex justify-content-between align-items-center mb-3">
+                            <span class="text-muted small">Market Bias:</span>
+                            <span class="badge-{{ analysis.markov.color }} sentiment-badge text-uppercase">{{ analysis.markov.bias }}</span>
+                        </div>
+                        
+                        <!-- State Key -->
+                        <div class="state-key mt-3">
+                            <div class="text-white small mb-2 text-uppercase fw-bold" style="letter-spacing: 1px;">State Key:</div>
+                            <div class="d-flex flex-wrap gap-2">
+                                {% for state in analysis.markov.state_labels %}
+                                <div class="state-key-item d-flex align-items-center gap-1">
+                                    <span class="state-id text-white">{{ state.id }}:</span>
+                                    <span class="state-label small text-white">{{ state.label }}</span>
+                                </div>
+                                {% endfor %}
+                            </div>
+                        </div>
+                    </div>
+                    {% else %}
+                    <p class="text-muted">Insufficient data for Markov analysis.</p>
+                    {% endif %}
+                </div>
+            </div>
+
+            <!-- Technical Trend -->
+            <div class="col-lg-4 col-md-6">
+                <div class="glass-card">
+                    <h3 class="h5 mb-4 text-cyber"><i class="bi bi-graph-up-arrow"></i> Technical Trend</h3>
+                    {% if analysis.tech %}
+                    <div class="mb-4">
+                        <div class="metric-label">Latest Close</div>
+                        <div class="metric-value">{{ analysis.tech.latest_close }}</div>
+                    </div>
+                    <div class="row mb-4">
+                        <div class="col-6">
+                            <div class="metric-label">SMA 20</div>
+                            <div class="h4 mb-0 fw-bold">{{ analysis.tech.sma_20 }}</div>
+                        </div>
+                        <div class="col-6">
+                            <div class="metric-label">SMA 50</div>
+                            <div class="h4 mb-0 fw-bold text-muted">{{ analysis.tech.sma_50 }}</div>
+                        </div>
+                    </div>
+                    <div class="mb-4">
+                        <div class="metric-label">Last Crossover</div>
+                        <div class="h6 mb-0">{{ analysis.tech.last_event }}</div>
+                    </div>
+                    <div class="mt-4 pt-3 border-top border-secondary">
+                        <div class="d-flex justify-content-between align-items-center">
+                            <span class="text-muted small">Trend:</span>
+                            <span class="badge-{{ analysis.tech.color }} sentiment-badge text-uppercase">{{ analysis.tech.trend }}</span>
+                        </div>
+                    </div>
+                    {% else %}
+                    <p class="text-muted">Unable to fetch price data.</p>
+                    {% endif %}
+                </div>
+            </div>
+
+            <!-- News Sentiment -->
+            <div class="col-lg-4 col-md-12">
+                <div class="glass-card">
+                    <h3 class="h5 mb-4 text-cyber"><i class="bi bi-newspaper"></i> News Sentiment</h3>
+                    {% if analysis.sentiment %}
+                    <div class="mb-4">
+                        <div class="metric-label">Average Sentiment</div>
+                        <div class="metric-value">{{ analysis.sentiment.avg_sentiment }}</div>
+                        <div class="d-flex align-items-center gap-2">
+                            <span class="text-muted small">Overall Bias:</span>
+                            <span class="badge-{{ analysis.sentiment.color }} sentiment-badge text-uppercase">{{ analysis.sentiment.overall }}</span>
+                        </div>
+                    </div>
+                    <div class="mt-4">
+                        <div class="metric-label mb-3">Top Headlines</div>
+                        {% for headline in analysis.sentiment.top_headlines %}
+                        <div class="headline-item">
+                            <div class="d-flex justify-content-between align-items-start gap-2">
+                                <span class="small fw-semibold">{{ headline.title }}</span>
+                                <span class="badge-{{ headline.label|lower|default:'secondary' }} sentiment-badge py-0 px-1" style="font-size: 0.65rem;">{{ headline.polarity }}</span>
+                            </div>
+                        </div>
+                        {% endfor %}
+                    </div>
+                    {% else %}
+                    <p class="text-muted">Unable to fetch news sentiment.</p>
+                    {% endif %}
+                </div>
+            </div>
+        </div>
+        {% endif %}
+    </div>
+</div>
+
+<style>
+.text-cyber { color: var(--cyber-blue); }
+.text-neon { color: var(--neon-green); }
+.state-key-item {
+    background: rgba(255, 255, 255, 0.03);
+    padding: 2px 8px;
+    border-radius: 4px;
+    border: 1px solid var(--glass-border);
+}
+.state-id {
+    font-weight: 800;
+    font-size: 0.8rem;
+}
+.state-label {
+    font-size: 0.7rem;
+}
+</style>
 {% endblock %}

core/urls.py

@@ -1,7 +1,6 @@
 from django.urls import path
-
+from . import views
-from .views import home
 
 urlpatterns = [
-    path("", home, name="home"),
+    path('', views.index, name='index'),
 ]

core/views.py

@@ -1,25 +1,24 @@
-import os
-import platform
-
-from django import get_version as django_version
 from django.shortcuts import render
-from django.utils import timezone
+from .market_utils import get_market_analysis
 
+def index(request):
+    symbol = request.GET.get("symbol", "AAPL").strip()
+    analysis = None
+    error = None
 
-def home(request):
+    if symbol:
-    """Render the landing screen with loader and environment details."""
+        try:
-    host_name = request.get_host().lower()
+            analysis = get_market_analysis(symbol)
-    agent_brand = "AppWizzy" if host_name == "appwizzy.com" else "Flatlogic"
+            if not analysis.get("markov") and not analysis.get("tech"):
-    now = timezone.now()
+                error = f"Unable to fetch data for symbol: {symbol}"
+                analysis = None
+        except Exception as e:
+            error = f"An error occurred: {str(e)}"
+            analysis = None
 
     context = {
-        "project_name": "New Style",
+        "analysis": analysis,
-        "agent_brand": agent_brand,
+        "error": error,
-        "django_version": django_version(),
+        "symbol": symbol
-        "python_version": platform.python_version(),
-        "current_time": now,
-        "host_name": host_name,
-        "project_description": os.getenv("PROJECT_DESCRIPTION", ""),
-        "project_image_url": os.getenv("PROJECT_IMAGE_URL", ""),
     }
     return render(request, "core/index.html", context)

static/css/custom.css

@@ -1,4 +1,115 @@
-/* Custom styles for the application */
+:root {
-body {
+    --bg-dark: #121212;
-    font-family: system-ui, -apple-system, sans-serif;
+    --glass-bg: rgba(255, 255, 255, 0.05);
+    --glass-border: rgba(255, 255, 255, 0.1);
+    --cyber-blue: #00d2ff;
+    --neon-green: #39ff14;
+    --vibrant-red: #ff3131;
+    --text-muted: #888;
+    --text-light: #e0e0e0;
+}
+
+body {
+    background-color: var(--bg-dark);
+    color: var(--text-light);
+    font-family: 'Inter', sans-serif;
+    margin: 0;
+    padding: 0;
+}
+
+h1, h2, h3, h4, .brand-font {
+    font-family: 'Montserrat', sans-serif;
+    font-weight: 700;
+}
+
+.glass-card {
+    background: var(--glass-bg);
+    backdrop-filter: blur(10px);
+    border: 1px solid var(--glass-border);
+    border-radius: 16px;
+    padding: 24px;
+    height: 100%;
+    transition: transform 0.3s ease, box-shadow 0.3s ease;
+}
+
+.glass-card:hover {
+    transform: translateY(-5px);
+    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
+    border-color: var(--cyber-blue);
+}
+
+.metric-value {
+    font-size: 2.5rem;
+    font-weight: 800;
+    margin: 10px 0;
+    background: linear-gradient(45deg, var(--cyber-blue), #fff);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+}
+
+.metric-label {
+    color: var(--text-muted);
+    font-size: 0.9rem;
+    text-transform: uppercase;
+    letter-spacing: 1px;
+}
+
+.ticker-input {
+    background: rgba(255, 255, 255, 0.1);
+    border: 2px solid var(--glass-border);
+    border-radius: 12px;
+    color: #fff;
+    padding: 12px 20px;
+    font-size: 1.2rem;
+    width: 300px;
+    transition: border-color 0.3s ease;
+}
+
+.ticker-input:focus {
+    outline: none;
+    border-color: var(--cyber-blue);
+    background: rgba(255, 255, 255, 0.15);
+}
+
+.btn-cyber {
+    background: linear-gradient(45deg, #00d2ff, #3a7bd5);
+    border: none;
+    border-radius: 12px;
+    color: #fff;
+    padding: 12px 30px;
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 1px;
+    transition: all 0.3s ease;
+}
+
+.btn-cyber:hover {
+    box-shadow: 0 0 20px rgba(0, 210, 255, 0.4);
+    transform: scale(1.05);
+}
+
+.headline-item {
+    padding: 12px;
+    border-bottom: 1px solid var(--glass-border);
+    font-size: 0.95rem;
+}
+
+.headline-item:last-child {
+    border-bottom: none;
+}
+
+.sentiment-badge {
+    padding: 4px 8px;
+    border-radius: 6px;
+    font-size: 0.75rem;
+    font-weight: 700;
+}
+
+.badge-success { background: rgba(57, 255, 20, 0.2); color: var(--neon-green); border: 1px solid var(--neon-green); }
+.badge-danger { background: rgba(255, 49, 49, 0.2); color: var(--vibrant-red); border: 1px solid var(--vibrant-red); }
+.badge-secondary { background: rgba(136, 136, 136, 0.2); color: var(--text-muted); border: 1px solid var(--text-muted); }
+
+.hero-gradient {
+    background: radial-gradient(circle at top right, rgba(0, 210, 255, 0.1), transparent);
+    min-height: 100vh;
 }