Upload 9 files

all files for ipl-prediction site

Dockerfile

@@ -0,0 +1,20 @@
+# Use an official Python runtime as a parent image
+FROM python:3.10-slim
+
+# Set the working directory directly in the Hugging Face container
+WORKDIR /app
+
+# Copy the requirements file first to build the environment
+COPY requirements.txt .
+
+# Install the Python hacker packages we used
+RUN pip install --no-cache-dir -r requirements.txt
+
+# Copy all the HTML, CSS, JS, and Python scripts into the container
+COPY . .
+
+# Expose the standard port used by Hugging Face Spaces
+EXPOSE 7860
+
+# Command to run the FastAPI app via Uvicorn
+CMD ["uvicorn", "main:app", "--host", "0.0.0.0", "--port", "7860"]

app.js

@@ -0,0 +1,133 @@
+// Real-time Mock Engine Outcomes
+const liveOutcomes = [
+    { delivery: "Inswinger, Good Length", outcome: "Defends - No Run", probD: 82, probO: 76 },
+    { delivery: "Yorker, Middle & Leg", outcome: "Squeezes to Point - 1 Run", probD: 65, probO: 58 },
+    { delivery: "Bouncer, At the Body", outcome: "Hook Shot - SIX over Fine Leg!!!", probD: 45, probO: 32 },
+    { delivery: "Slower Ball, Outside Off", outcome: "Swings and Misses - Dot Ball", probD: 78, probO: 81 },
+    { delivery: "Outswinger, Full Length", outcome: "Cover Drive - FOUR Runs!", probD: 60, probO: 55 },
+    { delivery: "Wide Yorker", outcome: "Slashes to Third Man - FOUR Runs", probD: 53, probO: 44 }
+];
+
+document.addEventListener('DOMContentLoaded', () => {
+    // Top Bar Elements
+    const statusBadge = document.getElementById('matchStatusBadge');
+    const team1El = document.getElementById('team1Text');
+    const team2El = document.getElementById('team2Text');
+    const scoreEl = document.getElementById('liveScoreText');
+    const overEl = document.getElementById('liveOverText');
+    const apiIndicator = document.getElementById('apiStatus');
+
+    // Context Panels
+    const venueEl = document.getElementById('venueText');
+    const subEl = document.getElementById('matchSubtitle');
+
+    // UI Panes
+    const liveBox = document.getElementById('livePredictorBox');
+    const upcBox = document.getElementById('upcomingPredictorBox');
+    const titleEl = document.getElementById('predictionTitle');
+
+    // Instantly bypass external API and load reliable presentation data
+    apiIndicator.innerText = "LOCAL ENGINE: ACTIVE";
+    apiIndicator.style.color = "var(--accent-green)";
+
+    // Set Presentation Match Data directly
+    const t1 = "LSG";
+    const t2 = "KKR";
+
+    // Choose mode: true for Live Dashboard, false for Upcoming Dashboard
+    const IS_LIVE = true;
+
+    if (IS_LIVE) {
+        statusBadge.innerText = "🔥 MATCH IN PROGRESS";
+        statusBadge.style.color = "#ef4444";
+        statusBadge.style.borderColor = "#ef4444";
+        statusBadge.style.backgroundColor = "rgba(239, 68, 68, 0.1)";
+
+        team1El.innerText = t1;
+        team2El.innerText = t2;
+        venueEl.innerText = "Ekana Sports City";
+        subEl.innerText = "IPL Presentation Match";
+
+        scoreEl.innerText = "142 / 4";
+        overEl.innerText = "15.2 Overs";
+        scoreEl.classList.remove('hidden');
+        overEl.classList.remove('hidden');
+
+        document.getElementById('contextLabel1').innerText = "Striker";
+        document.getElementById('contextValue1').innerText = "KL Rahul (58* off 42)";
+        document.getElementById('contextLabel2').innerText = "Bowler";
+        document.getElementById('contextValue2').innerText = "Sunil Narine (1/24 in 3 ov)";
+        document.getElementById('pitchText').innerText = "Slow, Turning Track";
+
+        titleEl.innerText = "LIVE BALL PREDICTIONS ACTIVE";
+        liveBox.classList.remove('hidden');
+        upcBox.classList.add('hidden');
+
+        cycleLivePredictions();
+    } else {
+        statusBadge.innerText = "⏳ UPCOMING FIXTURE";
+        statusBadge.style.color = "var(--accent-cyan)";
+
+        team1El.innerText = t1;
+        team2El.innerText = t2;
+        venueEl.innerText = "Ekana Sports City";
+        subEl.innerText = "Upcoming Schedule";
+
+        document.getElementById('pitchText').innerText = "AI awaiting toss data...";
+
+        liveBox.classList.add('hidden');
+        upcBox.classList.remove('hidden');
+        titleEl.innerText = "UPCOMING MATCH AI OVERVIEW";
+
+        const p1 = document.getElementById('winProbBar');
+        const fT = document.getElementById('favoredTeamText');
+        const pT = document.getElementById('winProbText');
+
+        const winProb = 64;
+        fT.innerText = t1;
+        pT.innerText = `${winProb}% Probability to Win`;
+
+        setTimeout(() => { p1.style.width = `${winProb}%`; }, 300);
+
+        document.getElementById('factor1').innerText = `AI historical data shows ${t1} has a +15% dominance matrix on home turf.`;
+        document.getElementById('factor2').innerText = `Weather and ground toss dynamics inherently favor the chasing team by 14%.`;
+    }
+
+    function cycleLivePredictions() {
+        const dOut = document.getElementById('deliveryOut');
+        const oOut = document.getElementById('outcomeOut');
+        const dProbBar = document.getElementById('delProbBar');
+        const oProbBar = document.getElementById('outProbBar');
+        const dProbText = document.getElementById('delProbText');
+        const oProbText = document.getElementById('outProbText');
+
+        // Let's increment balls visually
+        let curScore = 142;
+        let balls = 2; // starting 15.2
+
+        setInterval(() => {
+            dProbBar.style.width = '0%';
+            oProbBar.style.width = '0%';
+            dOut.innerHTML = "<span style='color: var(--text-muted); font-size: 1.2rem'>AI Re-calculating Next Ball...</span>";
+            oOut.innerHTML = "...";
+
+            setTimeout(() => {
+                const p = liveOutcomes[Math.floor(Math.random() * liveOutcomes.length)];
+
+                // update fake score
+                balls++;
+                if (balls > 6) { balls = 1; }
+                overEl.innerText = `15.${balls} Overs`;
+
+                dOut.innerText = p.delivery;
+                oOut.innerText = p.outcome;
+
+                dProbBar.style.width = `${p.probD}%`;
+                oProbBar.style.width = `${p.probO}%`;
+
+                dProbText.innerText = `${p.probD}% Probability`;
+                oProbText.innerText = `${p.probO}% Probability`;
+            }, 1000);
+        }, 5000); // Cycles continuously every 5 seconds
+    }
+});

history.html

@@ -0,0 +1,51 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Match History | IPL AI Predictor</title>
+    <link rel="stylesheet" href="style.css">
+    <link href="https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;600;800&display=swap" rel="stylesheet">
+</head>
+
+<body>
+    <nav class="navbar">
+        <div class="logo">
+            <span class="ai-glow">Predict</span>IPL
+        </div>
+        <ul class="nav-links">
+            <li><a href="index.html">Live Prediction</a></li>
+            <li><a href="history.html" class="active">Match History</a></li>
+        </ul>
+    </nav>
+
+    <main class="dashboard history-dashboard">
+        <header class="section-header">
+            <h2>AI Prediction History</h2>
+            <p>Session initialized today. Awaiting current match completion.</p>
+        </header>
+
+        <section class="history-container" style="display: flex; justify-content: center; width: 100%;">
+            <div class="ball-history-panel panel"
+                style="width: 100%; max-width: 800px; text-align: center; padding: 4rem;">
+                <h3 style="margin-bottom: 1.5rem; color: var(--accent-cyan); font-size: 1.5rem; border: none;">
+                    Initialize Sequence: Day 1</h3>
+                <p style="color: var(--text-main); font-size: 1.1rem; line-height: 1.8;">
+                    The prediction model's memory state was wiped and initialized <strong>today</strong>.<br>
+                    There are currently <span style="color: #ef4444; font-weight: bold;">0</span> past matches recorded
+                    in the system.<br><br>
+                </p>
+                <p style="color: var(--text-muted); font-size: 0.95rem;">
+                    Live ball-by-ball accuracy tracking will begin saving to the database dynamically as soon as today's
+                    live predictions conclude.
+                </p>
+                <div class="spinner" style="margin: 3rem auto; border-top-color: var(--accent-green);"></div>
+            </div>
+        </section>
+    </main>
+
+    <script src="history.js"></script>
+</body>
+
+</html>

history.js

@@ -0,0 +1,5 @@
+// Emptied because the model was initialized today 
+// Real history will be generated after today's logic.
+document.addEventListener('DOMContentLoaded', () => {
+    // Memory wiped
+});

index.html

@@ -0,0 +1,146 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>IPL AI Predictor | Live Match</title>
+    <link rel="stylesheet" href="style.css">
+    <link href="https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;600;800&display=swap" rel="stylesheet">
+</head>
+
+<body>
+    <nav class="navbar">
+        <div class="logo">
+            <span class="ai-glow">Predict</span>IPL
+        </div>
+        <ul class="nav-links">
+            <li><a href="index.html" class="active">Live Prediction</a></li>
+            <li><a href="history.html">Match History</a></li>
+        </ul>
+    </nav>
+
+    <main class="dashboard">
+        <header class="match-header">
+            <div class="team" id="team1Text">--</div>
+            <div class="score-container">
+                <div id="matchStatusBadge" class="status-badge">FETCHING LIVE API DATA...</div>
+                <h1 id="liveScoreText" class="hidden">-- / --</h1>
+                <p id="liveOverText" class="hidden">-- Overs</p>
+                <div class="run-rate hidden" id="matchRunRateText">CRR: --</div>
+            </div>
+            <div class="team" id="team2Text">--</div>
+            <div id="apiStatus" class="api-status">API: CONNECTING</div>
+        </header>
+
+        <div class="grid-container">
+            <!-- Left Column: Context -->
+            <section class="context-panel panel">
+                <h3>Match Context</h3>
+                <div class="stats-row">
+                    <span class="label">Match Subtitle</span>
+                    <span class="value" id="matchSubtitle">Scanning...</span>
+                </div>
+                <div class="stats-row">
+                    <span class="label" id="contextLabel1">-</span>
+                    <span class="value" id="contextValue1">-</span>
+                </div>
+                <div class="stats-row">
+                    <span class="label" id="contextLabel2">-</span>
+                    <span class="value" id="contextValue2">-</span>
+                </div>
+                <hr>
+                <div class="stats-row">
+                    <span class="label">Ground</span>
+                    <span class="value" id="venueText">Predicting Database Venue...</span>
+                </div>
+                <div class="stats-row">
+                    <span class="label">Pitch Condition</span>
+                    <span class="value highlight" id="pitchText">Analysing AI Model...</span>
+                </div>
+            </section>
+
+            <!-- Center Column: Prediction Box -->
+            <section class="prediction-panel panel emphasis">
+                <div class="live-indicator">
+                    <div class="pulse" id="pulseIndicator"></div>
+                    <span id="predictionTitle">INITIALIZING MODEL NETWORK...</span>
+                </div>
+
+                <!-- LIVE PREDICTION UI -->
+                <div id="livePredictorBox" class="prediction-box hidden">
+                    <div id="predictionResult" class="result">
+                        <h3 class="upcoming-ball-badge">⚡ NEXT BALL PREDICTION ⚡</h3>
+                        <div class="prediction-item">
+                            <h4>Model's Expected Delivery</h4>
+                            <h2 class="cyan-text" id="deliveryOut">...</h2>
+                            <div class="prob-bar">
+                                <div class="fill cyan" id="delProbBar" style="width: 0%"></div>
+                            </div>
+                            <span class="prob-text" id="delProbText">--% Probability</span>
+                        </div>
+                        <div class="prediction-item mt-2">
+                            <h4>Batter Reaction & Outcome</h4>
+                            <h2 class="green-text" id="outcomeOut">...</h2>
+                            <div class="prob-bar">
+                                <div class="fill green" id="outProbBar" style="width: 0%"></div>
+                            </div>
+                            <span class="prob-text" id="outProbText">--% Probability</span>
+                        </div>
+                    </div>
+                </div>
+
+                <!-- UPCOMING MATCH PREDICTION UI -->
+                <div id="upcomingPredictorBox" class="prediction-box hidden">
+                    <div class="result">
+                        <div class="prediction-item">
+                            <h4>AI Overall Match Winner Prediction</h4>
+                            <h2 class="cyan-text" id="favoredTeamText">...</h2>
+                            <div class="prob-bar">
+                                <div class="fill cyan" id="winProbBar" style="width: 0%"></div>
+                            </div>
+                            <span class="prob-text" id="winProbText">--% Win Probability</span>
+                        </div>
+                        <div class="prediction-item mt-2">
+                            <h4>Key Deciding Variables</h4>
+                            <div
+                                style="text-align: left; margin-top: 15px; color: var(--text-main); font-size: 1.1rem; line-height: 1.5;">
+                                🏏 <span id="factor1">Calculating team head-to-head metrics...</span><br><br>
+                                🏟️ <span id="factor2">Scanning stadium ground history...</span>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </section>
+
+            <!-- Right Column: Model Stats -->
+            <section class="model-stats-panel panel">
+                <h3>Model Health</h3>
+                <div class="accuracy-circle">
+                    <svg viewBox="0 0 36 36" class="circular-chart green">
+                        <path class="circle-bg"
+                            d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831" />
+                        <path class="circle" stroke-dasharray="87, 100"
+                            d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831" />
+                        <text x="18" y="20.35" class="percentage">94%</text>
+                    </svg>
+                </div>
+                <p class="accuracy-desc">Current Dataset Confidence</p>
+                <div class="mini-stats">
+                    <div class="mini-stat">
+                        <span class="val">Live</span>
+                        <span class="lbl">Hook State</span>
+                    </div>
+                    <div class="mini-stat">
+                        <span class="val" id="modelLat">12ms</span>
+                        <span class="lbl">Latency</span>
+                    </div>
+                </div>
+            </section>
+        </div>
+    </main>
+
+    <script src="app.js"></script>
+</body>
+
+</html>

main.py

@@ -0,0 +1,36 @@
+from fastapi import FastAPI
+from fastapi.staticfiles import StaticFiles
+import uvicorn
+import threading
+import time
+
+# You can import the bypass function from your scraper.py when you're ready
+# from scraper import bypass_firewall
+
+app = FastAPI()
+
+# This tells the server to statically serve your HTML, CSS, and JS exactly as they are without breaking the design.
+app.mount("/", StaticFiles(directory=".", html=True), name="static")
+
+# ==============================================================================
+# HUGGING FACE BACKGROUND TASK ARCHITECTURE
+# When you activate this, the cloud computer will automatically run your hacker script
+# in the background 24/7 independently of the website viewers.
+# ==============================================================================
+def autonomous_data_heist():
+    while True:
+        try:
+            print("Background Cloud Server: Attempting ESPNcricinfo Bypass Check...")
+            # bypass_firewall() # Trigger the scraper
+        except Exception as e:
+            print("Routine network reset.")
+            
+        time.sleep(30) # Rips the database every 30 seconds to prevent bans
+
+# Start the background task as a ghost thread
+threading.Thread(target=autonomous_data_heist, daemon=True).start()
+
+if __name__ == "__main__":
+    # Hugging Face Spaces strictly requires servers to broadcast on port 7860
+    print("Initializing Hugging Face Server on Port 7860...")
+    uvicorn.run(app, host="0.0.0.0", port=7860)

requirements.txt

@@ -0,0 +1,4 @@
+fastapi==0.109.2
+uvicorn==0.27.1
+curl_cffi==0.15.0
+beautifulsoup4==4.12.3

scraper.py

@@ -0,0 +1,45 @@
+from curl_cffi import requests
+from bs4 import BeautifulSoup
+import json
+
+LIVE_MATCH_URL = "https://www.espncricinfo.com/series/indian-premier-league-2024-1411166/chennai-super-kings-vs-royal-challengers-bengaluru-1st-match-1422119/live-cricket-score"
+
+def bypass_firewall():
+    print("========================================")
+    print("   TLS FINGERPRINT SPOOFER ENGAGED      ")
+    print("========================================")
+    print("Deploying curl-cffi to impersonate Chrome 120 TLS handshake at the C-level...")
+    try:
+        # Instead of launching a whole physical browser, we use the specific encryption
+        # signature of Chrome 120. Cloudflare looks at the raw binary packet and is tricked.
+        response = requests.get(
+            LIVE_MATCH_URL, 
+            impersonate="chrome120",
+            headers={"User-Agent": "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/120.0.0.0 Safari/537.36"}
+        )
+        
+        soup = BeautifulSoup(response.text, 'html.parser')
+        title = soup.find('title')
+        
+        if title:
+            print(f"\n[TARGET TAB VISUAL]: {title.text}")
+            
+        if "Access Denied" in response.text or "Cloudflare" in response.text:
+           print("\n[!] TLS Spoofing failed. Our datacenter IP is likely blocked completely.")
+        else:
+           print("\n[+] SUCCESS! WE BROKE THE WALL.")
+           print("[+] Checking for Next.js internal JSON database...")
+           
+           next_data = soup.find('script', id='__NEXT_DATA__')
+           if next_data:
+               print("[+] INTERNAL DATABASE LOCATED!")
+               live_json = json.loads(next_data.string)
+               print("[+] RAW DATA ACQUIRED.")
+           else:
+               print("[-] We broke the wall, but they moved the data. HTML parsing required.")
+
+    except Exception as e:
+        print(f"\n[!] Critical Error: {e}")
+
+if __name__ == "__main__":
+    bypass_firewall()

style.css

@@ -0,0 +1,333 @@
+:root {
+    --bg-dark: #0f172a;
+    --panel-bg: #1e293b;
+    --accent-cyan: #06b6d4;
+    --accent-cyan-glow: rgba(6, 182, 212, 0.4);
+    --accent-green: #10b981;
+    --text-main: #f8fafc;
+    --text-muted: #94a3b8;
+    --border-color: #334155;
+}
+
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+    font-family: 'Outfit', sans-serif;
+}
+
+body {
+    background-color: var(--bg-dark);
+    color: var(--text-main);
+    min-height: 100vh;
+}
+
+/* Navbar */
+.navbar {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 1rem 3rem;
+    background-color: rgba(15, 23, 42, 0.8);
+    backdrop-filter: blur(10px);
+    border-bottom: 1px solid var(--border-color);
+    position: sticky;
+    top: 0;
+    z-index: 100;
+}
+
+.logo {
+    font-size: 1.5rem;
+    font-weight: 800;
+    letter-spacing: 1px;
+}
+
+.ai-glow {
+    color: var(--accent-cyan);
+    text-shadow: 0 0 10px var(--accent-cyan-glow);
+}
+
+.nav-links {
+    list-style: none;
+    display: flex;
+    gap: 2rem;
+}
+
+.nav-links a {
+    color: var(--text-muted);
+    text-decoration: none;
+    font-weight: 600;
+    transition: color 0.3s;
+}
+
+.nav-links a:hover,
+.nav-links a.active {
+    color: var(--accent-cyan);
+}
+
+/* Dashboard Layout */
+.dashboard {
+    padding: 2rem 3rem;
+    max-width: 1400px;
+    margin: 0 auto;
+}
+
+.match-header {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    gap: 4rem;
+    margin-bottom: 3rem;
+}
+
+.team {
+    font-size: 2.5rem;
+    font-weight: 800;
+    color: var(--text-muted);
+}
+
+.score-container {
+    text-align: center;
+}
+
+.score-container h1 {
+    font-size: 3.5rem;
+    color: var(--text-main);
+}
+
+.score-container p {
+    color: var(--accent-cyan);
+    font-size: 1.2rem;
+    font-weight: 600;
+}
+
+.run-rate {
+    margin-top: 0.5rem;
+    font-size: 0.9rem;
+    color: var(--text-muted);
+}
+
+.grid-container {
+    display: grid;
+    grid-template-columns: 1fr 2fr 1fr;
+    gap: 1.5rem;
+}
+
+.panel {
+    background-color: var(--panel-bg);
+    border-radius: 16px;
+    padding: 1.5rem;
+    border: 1px solid var(--border-color);
+}
+
+.panel h3 {
+    font-size: 1.2rem;
+    margin-bottom: 1.5rem;
+    color: var(--text-muted);
+    border-bottom: 1px solid var(--border-color);
+    padding-bottom: 0.5rem;
+}
+
+/* Context Panel */
+.stats-row {
+    display: flex;
+    flex-direction: column;
+    margin-bottom: 1rem;
+}
+
+.stats-row .label {
+    font-size: 0.85rem;
+    color: var(--text-muted);
+}
+
+.stats-row .value {
+    font-size: 1.1rem;
+    font-weight: 600;
+}
+
+.stats-row .highlight {
+    color: var(--accent-cyan);
+}
+
+hr {
+    border: 0;
+    border-top: 1px solid var(--border-color);
+    margin: 1.5rem 0;
+}
+
+/* Prediction Panel */
+.prediction-panel {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+
+.prediction-panel.emphasis {
+    background: linear-gradient(180deg, var(--panel-bg) 0%, rgba(30, 41, 59, 0.4) 100%);
+    border: 1px solid var(--accent-cyan);
+    box-shadow: 0 0 30px rgba(6, 182, 212, 0.1);
+}
+
+.live-indicator {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    color: var(--accent-cyan);
+    font-weight: 600;
+    margin-bottom: 2rem;
+    letter-spacing: 1px;
+}
+
+.pulse {
+    width: 10px;
+    height: 10px;
+    background-color: var(--accent-cyan);
+    border-radius: 50%;
+    box-shadow: 0 0 10px var(--accent-cyan);
+    animation: pulse 1.5s infinite;
+}
+
+@keyframes pulse {
+    0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(6, 182, 212, 0.7); }
+    70% { transform: scale(1); box-shadow: 0 0 0 10px rgba(6, 182, 212, 0); }
+    100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(6, 182, 212, 0); }
+}
+
+.prediction-box {
+    width: 100%;
+    min-height: 250px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    text-align: center;
+}
+
+.processing {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 1rem;
+}
+
+.spinner {
+    width: 40px;
+    height: 40px;
+    border: 4px solid var(--border-color);
+    border-top: 4px solid var(--accent-cyan);
+    border-radius: 50%;
+    animation: spin 1s linear infinite;
+}
+
+@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
+
+.result {
+    width: 100%;
+    animation: fadein 0.5s ease;
+}
+
+@keyframes fadein { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
+
+.hidden { display: none !important; }
+
+.prediction-item {
+    background: rgba(0, 0, 0, 0.2);
+    padding: 1.5rem;
+    border-radius: 12px;
+}
+
+.prediction-item h4 {
+    color: var(--text-muted);
+    font-weight: 400;
+    margin-bottom: 0.5rem;
+}
+
+.prediction-item h2 {
+    font-size: 1.8rem;
+    margin-bottom: 1rem;
+}
+
+.cyan-text { color: var(--accent-cyan); }
+.green-text { color: var(--accent-green); }
+.mt-2 { margin-top: 1rem; }
+
+.prob-bar {
+    width: 100%;
+    height: 6px;
+    background: var(--border-color);
+    border-radius: 3px;
+    overflow: hidden;
+    margin-bottom: 0.5rem;
+}
+
+.prob-bar .fill {
+    height: 100%;
+    border-radius: 3px;
+    transition: width 1s ease-out;
+}
+
+.fill.cyan { background-color: var(--accent-cyan); box-shadow: 0 0 10px var(--accent-cyan); }
+.fill.green { background-color: var(--accent-green); box-shadow: 0 0 10px var(--accent-green); }
+
+.prob-text {
+    font-size: 0.8rem;
+    color: var(--text-muted);
+}
+
+.action-btn {
+    margin-top: 2rem;
+    padding: 0.8rem 2rem;
+    background: transparent;
+    border: 1px solid var(--accent-cyan);
+    color: var(--accent-cyan);
+    border-radius: 30px;
+    cursor: pointer;
+    font-weight: 600;
+    transition: all 0.3s;
+}
+
+.action-btn:hover {
+    background: var(--accent-cyan);
+    color: var(--bg-dark);
+    box-shadow: 0 0 15px var(--accent-cyan-glow);
+}
+
+/* Model stats panel */
+.accuracy-circle { margin: 2rem auto; width: 120px; }
+.circular-chart { display: block; max-height: 250px; }
+.circle-bg { fill: none; stroke: var(--border-color); stroke-width: 2.5; }
+.circle { fill: none; stroke-width: 2.5; stroke-linecap: round; animation: progress 1s ease-out forwards; }
+@keyframes progress { 0% { stroke-dasharray: 0 100; } }
+.circular-chart.green .circle { stroke: var(--accent-green); }
+.percentage { fill: #fff; font-family: sans-serif; font-size: 0.5em; text-anchor: middle; font-weight: bold; }
+
+.accuracy-desc { text-align: center; color: var(--text-muted); font-size: 0.9rem; margin-bottom: 2rem; }
+.mini-stats { display: flex; justify-content: space-around; }
+.mini-stat { display: flex; flex-direction: column; align-items: center; }
+.mini-stat .val { font-size: 1.2rem; font-weight: 600; color: var(--text-main); }
+.mini-stat .lbl { font-size: 0.8rem; color: var(--text-muted); }
+
+/* History Page specific */
+.section-header { text-align: center; margin-bottom: 3rem; }
+.section-header h2 { font-size: 2.5rem; }
+.section-header p { color: var(--text-muted); margin-top: 0.5rem; }
+
+.history-container { display: grid; grid-template-columns: 300px 1fr; gap: 2rem; }
+.match-card { background: var(--panel-bg); border: 1px solid var(--border-color); border-radius: 12px; padding: 1.2rem; margin-bottom: 1rem; cursor: pointer; transition: all 0.3s; }
+.match-card:hover { border-color: var(--accent-cyan); }
+.match-card.active { border-color: var(--accent-cyan); background: rgba(30, 41, 59, 0.8); }
+.match-info h3 { font-size: 1.1rem; color: var(--text-main); margin-bottom: 0.3rem; }
+.match-info p { font-size: 0.85rem; color: var(--text-muted); }
+.match-accuracy { margin-top: 1rem; font-size: 0.9rem; color: var(--accent-green); }
+
+.history-table { width: 100%; border-collapse: collapse; text-align: left; }
+.history-table th, .history-table td { padding: 1rem; border-bottom: 1px solid var(--border-color); }
+.history-table th { color: var(--text-muted); font-weight: 600; font-size: 0.9rem; }
+.history-table td { font-size: 0.95rem; }
+.history-table tr:last-child td { border-bottom: none; }
+.match-yes { color: var(--accent-green); font-weight: bold; }
+.match-no { color: #ef4444; font-weight: bold; }
+
+@media (max-width: 1024px) {
+    .grid-container, .history-container { grid-template-columns: 1fr; }
+}