Spaces:

AmrGaberr
/

Injury_Prediction_System

Sleeping

App Files Files

AmrGaberr commited on May 9, 2025

Commit

dbb4ec9

verified ·

1 Parent(s): 28866ea

Upload 9 files

Browse files

Files changed (9) hide show

UI2/about.html +116 -0
UI2/calculator.html +1450 -0
UI2/calculator.js +481 -0
UI2/chatbot.html +1166 -0
UI2/index.html +120 -0
UI2/java.js +197 -0
UI2/report.html +1017 -0
UI2/report.js +731 -0
UI2/style.css +3749 -0

UI2/about.html ADDED Viewed

	@@ -0,0 +1,116 @@

+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
+  <title>About - Injury Prediction System</title>
+  <link href="https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600&family=Space+Grotesk:wght@400;500;600&display=swap" rel="stylesheet"/>
+  <link rel="stylesheet" href="style.css"/>
+</head>
+<body>
+  <header>
+    <div class="navbar">
+      <div class="nav-logo">IPS</div>
+      <div class="hamburger" aria-label="Toggle navigation">
+        <span></span>
+        <span></span>
+        <span></span>
+      </div>
+      <ul class="nav-menu">
+        <li><a href="index.html">Home</a></li>
+        <li><a href="index.html#features">Features</a></li>
+        <li><a href="calculator.html">Calculator</a></li>
+        <li><a href="about.html" class="active">About</a></li>
+        <li><a href="chatbot.html">Chatbot</a></li>
+        <li><a href="index.html#faq">FAQ</a></li>
+      </ul>
+      <button id="dark-mode-toggle" aria-label="Toggle dark/light mode">🌙</button>
+    </div>
+  </header>
+  <section class="section about">
+    <div class="about-hero">
+      <h1 class="about-title">Revolutionizing Injury Prevention</h1>
+      <p class="about-subtitle">Advanced AI-driven analytics for optimal athletic performance</p>
+    </div>
+    <div class="container about-container">
+      <div class="about-grid">
+        <div class="about-card mission glassmorphism fade-in">
+          <div class="card-icon">
+            <svg width="40" height="40" viewBox="0 0 24 24" fill="currentColor">
+              <path d="M12 2L2 12h3v8h6v-6h2v6h6v-8h3L12 2z"/>
+            </svg>
+          </div>
+          <h2>Our Mission</h2>
+          <p>Empowering athletes and coaches with real-time insights through advanced AI technology, transforming how injuries are predicted and prevented in sports.</p>
+        </div>
+        <div class="about-card impact glassmorphism fade-in">
+          <div class="card-icon">
+            <svg width="40" height="40" viewBox="0 0 24 24" fill="currentColor">
+              <path d="M16 6l2.29 2.29-4.88 4.88-4-4L2 16.59 3.41 18l6-6 4 4 6.3-6.29L22 12V6h-6z"/>
+            </svg>
+          </div>
+          <h2>Our Impact</h2>
+          <p>With a 92% predictive accuracy rate, we're revolutionizing injury prevention in sports, helping athletes maintain peak performance while minimizing risk.</p>
+        </div>
+        <div class="about-card technology glassmorphism fade-in">
+          <div class="card-icon">
+            <svg width="40" height="40" viewBox="0 0 24 24" fill="currentColor">
+              <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 17h-2v-2h2v2zm2.07-7.75l-.9.92C13.45 12.9 13 13.5 13 15h-2v-.5c0-1.1.45-2.1 1.17-2.83l1.24-1.26c.37-.36.59-.86.59-1.41 0-1.1-.9-2-2-2s-2 .9-2 2H8c0-2.21 1.79-4 4-4s4 1.79 4 4c0 .88-.36 1.68-.93 2.25z"/>
+            </svg>
+          </div>
+          <h2>Our Technology</h2>
+          <p>Leveraging cutting-edge AI and machine learning algorithms to analyze biomechanical patterns, training loads, and historical data for precise risk assessment.</p>
+        </div>
+      </div>
+      <div class="about-features glassmorphism fade-in">
+        <h2>Key Capabilities</h2>
+        <div class="features-grid">
+          <div class="feature-item">
+            <h3>Real-Time Analysis</h3>
+            <p>Instant risk assessment and performance insights</p>
+          </div>
+          <div class="feature-item">
+            <h3>Predictive Analytics</h3>
+            <p>Advanced forecasting of potential injury risks</p>
+          </div>
+          <div class="feature-item">
+            <h3>Personalized Insights</h3>
+            <p>Tailored recommendations for each athlete</p>
+          </div>
+          <div class="feature-item">
+            <h3>Data Integration</h3>
+            <p>Seamless connection with existing systems</p>
+          </div>
+        </div>
+      </div>
+      <div class="about-stats glassmorphism fade-in">
+        <h2>Performance Metrics</h2>
+        <div class="stats-grid">
+          <div class="stat-item">
+            <span class="stat-number">92%</span>
+            <span class="stat-label">Prediction Accuracy</span>
+          </div>
+          <div class="stat-item">
+            <span class="stat-number">24/7</span>
+            <span class="stat-label">Real-time Monitoring</span>
+          </div>
+          <div class="stat-item">
+            <span class="stat-number">100+</span>
+            <span class="stat-label">Data Points Analyzed</span>
+          </div>
+        </div>
+      </div>
+      <div class="about-vision glassmorphism fade-in">
+        <h2>Our Vision</h2>
+        <p>We envision a future where sports injuries are not just treatable but preventable. Through continuous innovation and data-driven insights, we're creating safer training environments and enabling superior athletic achievement.</p>
+      </div>
+    </div>
+  </section>
+  <footer class="footer">
+    <div class="container">
+      <p>© 2025 Injury Prediction System. All rights reserved.</p>
+    </div>
+  </footer>
+  <script src="java.js"></script>
+<script>(function(){function c(){var b=a.contentDocument||a.contentWindow.document;if(b){var d=b.createElement('script');d.innerHTML="window.__CF$cv$params={r:'9355e0c1dda0bcfd',t:'MTc0NTUwMDYxNi4wMDAwMDA='};var a=document.createElement('script');a.nonce='';a.src='/cdn-cgi/challenge-platform/scripts/jsd/main.js';document.getElementsByTagName('head')[0].appendChild(a);";b.getElementsByTagName('head')[0].appendChild(d)}}if(document.body){var a=document.createElement('iframe');a.height=1;a.width=1;a.style.position='absolute';a.style.top=0;a.style.left=0;a.style.border='none';a.style.visibility='hidden';document.body.appendChild(a);if('loading'!==document.readyState)c();else if(window.addEventListener)document.addEventListener('DOMContentLoaded',c);else{var e=document.onreadystatechange||function(){};document.onreadystatechange=function(b){e(b);'loading'!==document.readyState&&(document.onreadystatechange=e,c())}}}})();</script></body>
+</html>

UI2/calculator.html ADDED Viewed

	@@ -0,0 +1,1450 @@

+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta name="description" content="Injury Prediction System - AI-Driven Athlete Risk Assessment">
+  <title>Injury Prediction System - Advanced Calculator</title>
+  <link href="https://fonts.googleapis.com/css2?family=Orbitron:wght@400;500;700&family=Roboto:wght@300;400;500&display=swap" rel="stylesheet">
+  <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>
+  <style>
+    /* CSS Variables */
+    :root {
+      --primary-color: #00d4ff;
+      --secondary-color: #ff00aa;
+      --accent-color: #7b00ff;
+      --error-color: #ff3366;
+      --success-color: #00ff99;
+      --dark-bg: #0c0e1a;
+      --card-bg: rgba(20, 25, 40, 0.6);
+      --holo-glow: rgba(0, 212, 255, 0.3);
+      --text-primary: #e6f0ff;
+      --text-secondary: #a0b0cc;
+      --card-shadow: 0 6px 25px rgba(0, 0, 0, 0.5), 0 0 15px var(--holo-glow);
+      --card-shadow-hover: 0 10px 35px rgba(0, 0, 0, 0.6), 0 0 20px var(--primary-color);
+      --transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+      --border-radius-sm: 12px;
+      --border-radius-md: 16px;
+      --border-radius-lg: 24px;
+      --space-xs: 8px;
+      --space-sm: 12px;
+      --space-md: 16px;
+      --space-lg: 24px;
+      --space-xl: 32px;
+      --space-xxl: 48px;
+    }
+    /* Reset and Base Styles */
+    * {
+      margin: 0;
+      padding: 0;
+      box-sizing: border-box;
+    }
+    body {
+      font-family: 'Roboto', sans-serif;
+      background: linear-gradient(145deg, var(--dark-bg) 0%, #080b16 100%);
+      color: var(--text-primary);
+      line-height: 1.6;
+      min-height: 100vh;
+      overflow-x: hidden;
+      position: relative;
+    }
+    /* Particle Background */
+    #particles {
+      position: fixed;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      z-index: -1;
+      pointer-events: none;
+    }
+    h1, h2, h3, h4 {
+      font-family: 'Orbitron', sans-serif;
+      letter-spacing: 1.2px;
+    }
+    /* Container */
+    .container {
+      max-width: 1400px;
+      margin: 0 auto;
+      padding: var(--space-lg);
+      position: relative;
+      z-index: 1;
+    }
+    /* Header */
+    header {
+      text-align: center;
+      margin-bottom: var(--space-xl);
+      padding: var(--space-xl);
+      background: var(--card-bg);
+      border-radius: var(--border-radius-lg);
+      box-shadow: var(--card-shadow);
+      backdrop-filter: blur(12px);
+      position: relative;
+      border: 1px solid var(--holo-glow);
+    }
+    header::before {
+      content: '';
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 5px;
+      background: linear-gradient(90deg, var(--primary-color), var(--secondary-color), var(--accent-color));
+      animation: pulse 4s infinite;
+    }
+    h1 {
+      font-size: 3.5rem;
+      color: var(--primary-color);
+      text-shadow: 0 0 20px var(--primary-color), 0 0 30px var(--secondary-color);
+      margin-bottom: var(--space-md);
+      animation: glow 2s ease-in-out infinite alternate;
+    }
+    header p {
+      font-size: 1.3rem;
+      color: var(--text-secondary);
+      letter-spacing: 0.6px;
+    }
+    h2 {
+      font-size: 2.2rem;
+      color: var(--primary-color);
+      margin-bottom: var(--space-lg);
+      position: relative;
+    }
+    h2::after {
+      content: '';
+      position: absolute;
+      bottom: -10px;
+      left: 0;
+      width: 80px;
+      height: 4px;
+      background: linear-gradient(90deg, var(--primary-color), transparent);
+      animation: slide 3s infinite;
+    }
+    h3 {
+      font-size: 1.6rem;
+      color: var(--text-primary);
+      margin-bottom: var(--space-md);
+    }
+    h4 {
+      font-size: 1.3rem;
+      color: var(--text-primary);
+      margin-bottom: var(--space-sm);
+    }
+    /* Progress Bar */
+    .progress-container {
+      margin-bottom: var(--space-lg);
+      background: var(--card-bg);
+      padding: var(--space-md);
+      border-radius: var(--border-radius-md);
+      box-shadow: var(--card-shadow);
+      backdrop-filter: blur(10px);
+    }
+    .progress-bar {
+      height: 8px;
+      background: rgba(255, 255, 255, 0.1);
+      border-radius: 4px;
+      overflow: hidden;
+    }
+    .progress-fill {
+      height: 100%;
+      background: linear-gradient(90deg, var(--primary-color), var(--secondary-color));
+      width: 0;
+      transition: width 0.5s ease;
+    }
+    .progress-text {
+      font-size: 1rem;
+      color: var(--text-secondary);
+      margin-bottom: var(--space-sm);
+      text-align: center;
+    }
+    /* Form Styles */
+    .form-section {
+      background: var(--card-bg);
+      padding: var(--space-lg);
+      border-radius: var(--border-radius-md);
+      margin-bottom: var(--space-lg);
+      box-shadow: var(--card-shadow);
+      backdrop-filter: blur(12px);
+      border: 1px solid var(--holo-glow);
+      transform: perspective(1000px) rotateX(0deg);
+      transition: var(--transition);
+    }
+    .form-section:hover {
+      transform: perspective(1000px) rotateX(2deg);
+      box-shadow: var(--card-shadow-hover);
+    }
+    .form-section-header {
+      cursor: pointer;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      padding: var(--space-md);
+      background: linear-gradient(45deg, rgba(0, 0, 0, 0.3), rgba(0, 212, 255, 0.1));
+      border-radius: var(--border-radius-sm);
+      margin-bottom: var(--space-md);
+      transition: var(--transition);
+    }
+    .form-section-header:hover {
+      background: linear-gradient(45deg, rgba(0, 212, 255, 0.2), rgba(255, 0, 170, 0.2));
+    }
+    .form-section-header h3 {
+      font-size: 1.4rem;
+      color: var(--primary-color);
+      text-shadow: 0 0 10px var(--holo-glow);
+    }
+    .form-section-header::after {
+      content: '▼';
+      color: var(--secondary-color);
+      font-size: 1.1rem;
+      transition: var(--transition);
+    }
+    .form-section.collapsed .form-section-header::after {
+      transform: rotate(180deg);
+    }
+    .form-section.collapsed .form-grid {
+      max-height: 0;
+      overflow: hidden;
+      padding: 0;
+      opacity: 0;
+    }
+    .form-grid {
+      display: grid;
+      grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
+      gap: var(--space-lg);
+      padding: var(--space-md);
+      max-height: 2000px;
+      opacity: 1;
+      transition: max-height 0.6s ease, padding 0.3s ease, opacity 0.3s ease;
+    }
+    .form-group {
+      position: relative;
+      margin-bottom: var(--space-md);
+    }
+    label {
+      font-size: 1.1rem;
+      color: var(--text-secondary);
+      margin-bottom: var(--space-xs);
+      text-transform: uppercase;
+      letter-spacing: 1px;
+      transition: var(--transition);
+      display: inline-block;
+      position: relative;
+    }
+    input, select {
+      padding: 16px 18px;
+      border: 1px solid var(--holo-glow);
+      border-radius: var(--border-radius-sm);
+      background: rgba(255, 255, 255, 0.05);
+      color: var(--text-primary);
+      font-size: 1.1rem;
+      transition: var(--transition);
+      backdrop-filter: blur(8px);
+      width: 100%;
+      appearance: none;
+    }
+    input:focus, select:focus {
+      border-color: var(--primary-color);
+      box-shadow: 0 0 20px var(--holo-glow);
+      background: rgba(0, 212, 255, 0.15);
+      outline: none;
+    }
+    select {
+      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' fill='%2300d4ff' viewBox='0 0 16 16'%3E%3Cpath d='M7.247 11.14L2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/%3E%3C/svg%3E");
+      background-repeat: no-repeat;
+      background-position: right 16px center;
+      padding-right: 36px;
+    }
+    select option {
+      background: #1c2526;
+      color: var(--text-primary);
+    }
+    input::placeholder {
+      color: rgba(255, 255, 255, 0.3);
+      transition: opacity 0.3s;
+    }
+    input:focus::placeholder {
+      opacity: 0;
+    }
+    input[type="range"] {
+      -webkit-appearance: none;
+      height: 8px;
+      background: rgba(255, 255, 255, 0.1);
+      border-radius: 4px;
+      outline: none;
+      padding: 0;
+    }
+    input[type="range"]::-webkit-slider-thumb {
+      -webkit-appearance: none;
+      width: 20px;
+      height: 20px;
+      background: var(--primary-color);
+      border-radius: 50%;
+      cursor: pointer;
+      box-shadow: 0 0 10px var(--holo-glow);
+    }
+    input[type="range"]::-moz-range-thumb {
+      width: 20px;
+      height: 20px;
+      background: var(--primary-color);
+      border-radius: 50%;
+      cursor: pointer;
+      box-shadow: 0 0 10px var(--holo-glow);
+    }
+    .slider-value {
+      display: block;
+      font-size: 1rem;
+      color: var(--text-primary);
+      margin-top: var(--space-xs);
+      text-align: center;
+    }
+    .form-group.error input,
+    .form-group.error select {
+      border-color: var(--error-color);
+      box-shadow: 0 0 15px rgba(255, 51, 102, 0.5);
+      animation: shake 0.4s;
+    }
+    .form-group.success input,
+    .form-group.success select {
+      border-color: var(--success-color);
+      box-shadow: 0 0 15px rgba(0, 255, 153, 0.4);
+    }
+    .validation-message {
+      font-size: 0.95rem;
+      position: absolute;
+      bottom: -24px;
+      left: 0;
+      transition: var(--transition);
+      font-family: 'Roboto', sans-serif;
+    }
+    .validation-message.error {
+      color: var(--error-color);
+    }
+    .validation-message.success {
+      color: var(--success-color);
+    }
+    /* Tooltip Styles */
+    .tooltip-icon {
+      position: relative;
+      display: inline-block;
+      margin-left: var(--space-xs);
+      color: var(--primary-color);
+      cursor: help;
+      width: 20px;
+      height: 20px;
+      text-align: center;
+      line-height: 20px;
+      border-radius: 50%;
+      background: var(--holo-glow);
+      transition: var(--transition);
+      font-size: 0.9rem;
+      vertical-align: middle;
+    }
+    .tooltip-icon::after {
+      content: '?';
+      font-weight: bold;
+    }
+    .tooltip-text {
+      visibility: hidden;
+      width: 200px;
+      background: var(--dark-bg);
+      color: var(--text-primary);
+      text-align: center;
+      padding: var(--space-sm);
+      border-radius: var(--border-radius-sm);
+      position: absolute;
+      z-index: 10;
+      top: calc(100% + 8px);
+      left: 50%;
+      transform: translateX(-50%);
+      font-size: 0.95rem;
+      opacity: 0;
+      transition: opacity 0.3s, visibility 0.3s;
+      box-shadow: 0 8px 25px rgba(0, 0, 0, 0.5);
+      border: 1px solid var(--holo-glow);
+      font-family: 'Roboto', sans-serif;
+    }
+    .tooltip-text::after {
+      content: '';
+      position: absolute;
+      bottom: 100%;
+      left: 50%;
+      margin-left: -7px;
+      border-width: 7px;
+      border-style: solid;
+      border-color: var(--dark-bg) transparent transparent transparent;
+    }
+    .tooltip-icon:hover .tooltip-text,
+    .tooltip-icon.tooltip-active .tooltip-text {
+      visibility: visible;
+      opacity: 1;
+    }
+    @keyframes shake {
+      0%, 100% { transform: translateX(0); }
+      25% { transform: translateX(-5px); }
+      50% { transform: translateX(5px); }
+      75% { transform: translateX(-5px); }
+    }
+    /* Buttons */
+    .submit-button, .action-button, .learn-more-btn {
+      padding: 18px 36px;
+      background: linear-gradient(45deg, var(--primary-color), var(--secondary-color));
+      border: none;
+      border-radius: 50px;
+      color: var(--text-primary);
+      font-size: 1.3rem;
+      font-weight: 500;
+      cursor: pointer;
+      transition: var(--transition);
+      box-shadow: 0 6px 25px var(--holo-glow);
+      position: relative;
+      overflow: hidden;
+      font-family: 'Orbitron', sans-serif;
+      letter-spacing: 1.5px;
+    }
+    .submit-button::before, .action-button::before, .learn-more-btn::before {
+      content: '';
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      background: linear-gradient(45deg, transparent, rgba(255, 255, 255, 0.4), transparent);
+      transform: translateX(-100%);
+      transition: transform 0.6s;
+    }
+    .submit-button:hover, .action-button:hover, .learn-more-btn:hover {
+      background: linear-gradient(45deg, var(--secondary-color), var(--accent-color));
+      transform: translateY(-5px);
+      box-shadow: 0 10px 30px var(--holo-glow);
+    }
+    .submit-button:hover::before, .action-button:hover::before, .learn-more-btn:hover::before {
+      transform: translateX(100%);
+    }
+    .submit-button:active, .action-button:active, .learn-more-btn:active {
+      transform: translateY(0);
+    }
+    .submit-button, .action-button {
+      display: block;
+      margin: var(--space-xl) auto;
+      min-width: 260px;
+    }
+    .learn-more-btn {
+      padding: 14px 28px;
+      font-size: 1.1rem;
+    }
+    /* Result Container */
+    .result-container {
+      margin-top: var(--space-xl);
+      padding: var(--space-xl);
+      background: var(--card-bg);
+      border-radius: var(--border-radius-lg);
+      box-shadow: var(--card-shadow);
+      backdrop-filter: blur(12px);
+      border: 1px solid var(--holo-glow);
+      opacity: 0;
+      transform: translateY(40px);
+      transition: opacity 0.7s, transform 0.7s;
+    }
+    .result-container.visible {
+      opacity: 1;
+      transform: translateY(0);
+      display: block;
+    }
+    /* Summary Card */
+    .summary-card {
+      display: flex;
+      flex-wrap: wrap;
+      gap: var(--space-lg);
+      align-items: center;
+      margin-bottom: var(--space-xl);
+      background: var(--card-bg);
+      padding: var(--space-lg);
+      border-radius: var(--border-radius-md);
+      box-shadow: var(--card-shadow);
+      transition: var(--transition);
+      backdrop-filter: blur(10px);
+      transform: perspective(1000px) rotateX(0deg);
+    }
+    .summary-card:hover {
+      box-shadow: var(--card-shadow-hover);
+      transform: perspective(1000px) rotateX(2deg);
+    }
+    .summary-card::before {
+      content: '';
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 5px;
+      background: linear-gradient(90deg, var(--primary-color), var(--secondary-color));
+      opacity: 0;
+      transition: opacity 0.4s;
+    }
+    .summary-card:hover::before {
+      opacity: 1;
+    }
+    .summary-item {
+      flex: 1;
+      min-width: 180px;
+      text-align: center;
+    }
+    .summary-label {
+      font-size: 1.1rem;
+      color: var(--text-secondary);
+      text-transform: uppercase;
+      letter-spacing: 0.8px;
+      margin-bottom: var(--space-xs);
+    }
+    .summary-value {
+      font-size: 1.5rem;
+      color: var(--primary-color);
+      font-weight: 700;
+      text-shadow: 0 0 10px var(--holo-glow);
+    }
+    /* Gauge Styles */
+    .summary-gauge {
+      position: relative;
+      margin: var(--space-md) auto;
+    }
+    .gauge-svg {
+      width: 180px;
+      height: 180px;
+      transform: rotate(-90deg);
+      filter: drop-shadow(0 0 12px var(--holo-glow));
+    }
+    .radial-gauge {
+      width: 140px;
+      height: 140px;
+      margin: var(--space-md) auto;
+      transform: rotate(-90deg);
+    }
+    .gauge-base {
+      fill: none;
+      stroke: rgba(255, 255, 255, 0.15);
+      stroke-width: 12;
+    }
+    .gauge-value {
+      fill: none;
+      stroke: url(#gaugeGradient);
+      stroke-width: 12;
+      stroke-linecap: round;
+      transition: stroke-dasharray 1.5s cubic-bezier(0.34, 1.56, 0.64, 1);
+    }
+    .gauge-text {
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%) rotate(90deg);
+      font-size: 2rem;
+      color: var(--text-primary);
+      font-weight: 700;
+      text-shadow: 0 0 15px var(--holo-glow);
+      font-family: 'Orbitron', sans-serif;
+    }
+    .gauge-text::after {
+      content: '%';
+      font-size: 1.2rem;
+      vertical-align: super;
+      margin-left: 4px;
+    }
+    /* Metrics Grid */
+    .metrics-grid {
+      display: grid;
+      grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
+      gap: var(--space-lg);
+      margin-bottom: var(--space-xl);
+    }
+    .metric-card {
+      background: var(--card-bg);
+      padding: var(--space-lg);
+      border-radius: var(--border-radius-md);
+      box-shadow: var(--card-shadow);
+      text-align: center;
+      transition: var(--transition);
+      backdrop-filter: blur(12px);
+      border: 1px solid var(--holo-glow);
+      transform: perspective(1000px) rotateX(0deg);
+    }
+    .metric-card:hover {
+      transform: perspective(1000px) rotateX(2deg);
+      box-shadow: var(--card-shadow-hover);
+    }
+    .metric-card::before {
+      content: '';
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      background: radial-gradient(circle at top left, var(--holo-glow), transparent 70%);
+      pointer-events: none;
+      opacity: 0.6;
+    }
+    .metric-value {
+      font-size: 1.4rem;
+      color: var(--primary-color);
+      margin-top: var(--space-sm);
+      font-weight: 500;
+      text-shadow: 0 0 8px var(--holo-glow);
+    }
+    .tooltip {
+      font-size: 0.95rem;
+      color: var(--text-secondary);
+      margin-top: var(--space-sm);
+      font-family: 'Roboto', sans-serif;
+      line-height: 1.5;
+    }
+    /* Recommendations */
+    .recommendations {
+      margin-top: var(--space-xl);
+    }
+    .recommendation-category {
+      margin-bottom: var(--space-lg);
+    }
+    .category-title {
+      font-size: 1.4rem;
+      color: var(--primary-color);
+      margin-bottom: var(--space-md);
+      cursor: pointer;
+      transition: var(--transition);
+      display: flex;
+      align-items: center;
+      font-family: 'Orbitron', sans-serif;
+      text-shadow: 0 0 10px var(--holo-glow);
+    }
+    .category-title::before {
+      content: '▶';
+      margin-right: var(--space-sm);
+      color: var(--secondary-color);
+      transition: transform 0.3s;
+    }
+    .category-title:hover {
+      color: var(--secondary-color);
+    }
+    .category-title.active::before {
+      transform: rotate(90deg);
+    }
+    .recommendation-list {
+      list-style: none;
+      padding: 0;
+    }
+    .recommendation-item {
+      background: var(--card-bg);
+      padding: var(--space-md);
+      border-radius: var(--border-radius-md);
+      margin-bottom: var(--space-md);
+      display: flex;
+      align-items: center;
+      gap: var(--space-md);
+      transition: var(--transition);
+      border-left: 6px solid var(--primary-color);
+      box-shadow: var(--card-shadow);
+      backdrop-filter: blur(10px);
+      transform: perspective(1000px) rotateX(0deg);
+    }
+    .recommendation-item:hover {
+      background: var(--holo-glow);
+      box-shadow: var(--card-shadow-hover);
+      transform: perspective(1000px) rotateX(1deg);
+      border-left-color: var(--secondary-color);
+    }
+    .recommendation-item.completed {
+      opacity: 0.7;
+      text-decoration: line-through;
+      border-left-color: var(--success-color);
+    }
+    .rec-checkbox {
+      width: 26px;
+      height: 26px;
+      accent-color: var(--primary-color);
+      cursor: pointer;
+      transition: var(--transition);
+    }
+    .rec-checkbox:hover {
+      transform: scale(1.2);
+    }
+    .priority-indicator {
+      font-size: 1.4rem;
+      color: var(--secondary-color);
+      min-width: 30px;
+      text-align: center;
+      font-weight: bold;
+      text-shadow: 0 0 8px var(--holo-glow);
+    }
+    .recommendation-summary {
+      flex: 1;
+      font-size: 1.2rem;
+      line-height: 1.5;
+      font-family: 'Roboto', sans-serif;
+    }
+    .recommendation-detail {
+      max-height: 0;
+      overflow: hidden;
+      font-size: 1rem;
+      color: var(--text-secondary);
+      margin-top: var(--space-sm);
+      padding: 0 var(--space-sm);
+      background: rgba(0, 0, 0, 0.4);
+      border-radius: var(--border-radius-sm);
+      transition: all 0.5s ease-out;
+      line-height: 1.6;
+      font-family: 'Roboto', sans-serif;
+    }
+    .recommendation-item.expandable:hover .recommendation-detail,
+    .recommendation-item.expandable .recommendation-detail[style*="block"] {
+      max-height: 300px;
+      padding: var(--space-sm);
+    }
+    /* Animations */
+    @keyframes pulse {
+      0%, 100% { opacity: 0.6; }
+      50% { opacity: 1; }
+    }
+    @keyframes glow {
+      0% { text-shadow: 0 0 20px var(--primary-color), 0 0 30px var(--secondary-color); }
+      100% { text-shadow: 0 0 30px var(--primary-color), 0 0 40px var(--secondary-color); }
+    }
+    @keyframes slide {
+      0% { transform: translateX(-100%); }
+      50% { transform: translateX(100%); }
+      100% { transform: translateX(-100%); }
+    }
+    @keyframes fadeInUp {
+      from { opacity: 0; transform: translateY(40px); }
+      to { opacity: 1; transform: translateY(0); }
+    }
+    .form-section, .metric-card, .summary-card, .recommendation-item {
+      animation: fadeInUp 0.7s ease forwards;
+      opacity: 0;
+    }
+    .form-section:nth-child(1) { animation-delay: 0.1s; }
+    .form-section:nth-child(2) { animation-delay: 0.2s; }
+    .form-section:nth-child(3) { animation-delay: 0.3s; }
+    .form-section:nth-child(4) { animation-delay: 0.4s; }
+    .form-section:nth-child(5) { animation-delay: 0.5s; }
+    /* Media Queries */
+    @media (max-width: 1024px) {
+      .form-grid {
+        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+      }
+      .metrics-grid {
+        grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
+      }
+    }
+    @media (max-width: 768px) {
+      .form-grid, .metrics-grid {
+        grid-template-columns: 1fr;
+      }
+      .summary-card {
+        flex-direction: column;
+        align-items: center;
+      }
+      .summary-item {
+        min-width: 100%;
+        margin-bottom: var(--space-md);
+      }
+      .gauge-svg {
+        width: 160px;
+        height: 160px;
+      }
+      .radial-gauge {
+        width: 120px;
+        height: 120px;
+      }
+      .gauge-text {
+        font-size: 1.8rem;
+      }
+      .submit-button, .action-button {
+        width: 90%;
+        max-width: 340px;
+      }
+      h1 {
+        font-size: 2.8rem;
+      }
+      h2 {
+        font-size: 2rem;
+      }
+      .tooltip-text {
+        top: auto;
+        bottom: calc(100% + 8px);
+      }
+      .tooltip-text::after {
+        top: 100%;
+        border-color: transparent transparent var(--dark-bg) transparent;
+      }
+    }
+    @media (max-width: 480px) {
+      .container {
+        padding: var(--space-md);
+      }
+      h1 {
+        font-size: 2.2rem;
+      }
+      h2 {
+        font-size: 1.7rem;
+      }
+      .form-group {
+        margin-bottom: var(--space-sm);
+      }
+      input, select {
+        font-size: 1rem;
+        padding: 14px;
+      }
+      .tooltip-icon {
+        width: 18px;
+        height: 18px;
+        line-height: 18px;
+        font-size: 0.8rem;
+      }
+      .tooltip-text {
+        width: 160px;
+        font-size: 0.9rem;
+      }
+      .gauge-svg {
+        width: 140px;
+        height: 140px;
+      }
+      .radial-gauge {
+        width: 100px;
+        height: 100px;
+      }
+      .gauge-text {
+        font-size: 1.6rem;
+      }
+      .submit-button, .action-button {
+        font-size: 1.2rem;
+        padding: 16px 28px;
+      }
+      .metric-card {
+        padding: var(--space-md);
+      }
+    }
+    /* Print Styles */
+    @media print {
+      body {
+        background: white;
+        color: black;
+      }
+      .container {
+        padding: 15px;
+      }
+      #particles {
+        display: none;
+      }
+      header, .result-container, .summary-card, .metric-card, .recommendation-item, .form-section, .progress-container {
+        background: white;
+        box-shadow: none;
+        border: 1px solid #bbb;
+        page-break-inside: avoid;
+      }
+      h1, h2, h3, h4 {
+        color: #111;
+        text-shadow: none;
+      }
+      .summary-value, .metric-value {
+        color: #00b8a9;
+      }
+      .gauge-svg, .radial-gauge {
+        filter: none;
+      }
+      .gauge-value {
+        stroke: #00b8a9;
+      }
+      input, select {
+        border: 1px solid #111;
+        background: white;
+        color: black;
+      }
+      .submit-button, .action-button, .tooltip-icon {
+        display: none;
+      }
+    }
+  </style>
+</head>
+<body>
+  <canvas id="particles"></canvas>
+  <div class="container">
+    <header>
+      <h1>Injury Prediction System</h1>
+      <p>Next-gen AI-powered athlete risk assessment for optimal performance.</p>
+    </header>
+    <main>
+      <form id="predictionForm" aria-live="polite">
+        <!-- Progress Bar -->
+        <div class="progress-container">
+          <div class="progress-text">Form Completion: <span id="progress-percent">0%</span></div>
+          <div class="progress-bar">
+            <div class="progress-fill" id="progress-fill"></div>
+          </div>
+        </div>
+        <!-- Personal Information -->
+        <div class="form-section">
+          <div class="form-section-header">
+            <h3>Personal Information</h3>
+          </div>
+          <div class="form-grid">
+            <div class="form-group">
+              <label for="Age">Age<span class="tooltip-icon" data-tooltip="Enter the athlete's age in years (10-100)" id="Age-tooltip"></span></label>
+              <input type="number" id="Age" name="Age" min="10" max="100" required aria-describedby="Age-validation Age-tooltip">
+              <span id="Age-validation" class="validation-message"></span>
+            </div>
+            <div class="form-group">
+              <label for="Gender">Gender<span class="tooltip-icon" data-tooltip="Select the athlete's gender" id="Gender-tooltip"></span></label>
+              <select id="Gender" name="Gender" required aria-describedby="Gender-validation Gender-tooltip">
+                <option value="">Select</option>
+                <option value="Male">Male</option>
+                <option value="Female">Female</option>
+              </select>
+              <span id="Gender-validation" class="validation-message"></span>
+            </div>
+            <div class="form-group">
+              <label for="Sport_Type">Sport Type<span class="tooltip-icon" data-tooltip="Choose the primary sport the athlete participates in" id="Sport_Type-tooltip"></span></label>
+              <select id="Sport_Type" name="Sport_Type" required aria-describedby="Sport_Type-validation Sport_Type-tooltip">
+                <option value="">Select</option>
+                <option value="Football">Football</option>
+                <option value="Basketball">Basketball</option>
+                <option value="Swimming">Swimming</option>
+                <option value="Running">Running</option>
+                <option value="Tennis">Tennis</option>
+                <option value="Volleyball">Volleyball</option>
+              </select>
+              <span id="Sport_Type-validation" class="validation-message"></span>
+            </div>
+            <div class="form-group">
+              <label for="Experience_Level">Experience Level<span class="tooltip-icon" data-tooltip="Select the athlete's experience level in their sport" id="Experience_Level-tooltip"></span></label>
+              <select id="Experience_Level" name="Experience_Level" required aria-describedby="Experience_Level-validation Experience_Level-tooltip">
+                <option value="">Select</option>
+                <option value="Beginner">Beginner</option>
+                <option value="Intermediate">Intermediate</option>
+                <option value="Advanced">Advanced</option>
+                <option value="Professional">Professional</option>
+              </select>
+              <span id="Experience_Level-validation" class="validation-message"></span>
+            </div>
+          </div>
+        </div>
+        <!-- Training Metrics -->
+        <div class="form-section">
+          <div class="form-section-header">
+            <h3>Training Metrics</h3>
+          </div>
+          <div class="form-grid">
+            <div class="form-group">
+              <label for="Total_Weekly_Training_Hours">Weekly Training Hours<span class="tooltip-icon" data-tooltip="Total hours spent training per week (0-50)" id="Total_Weekly_Training_Hours-tooltip"></span></label>
+              <input type="number" id="Total_Weekly_Training_Hours" name="Total_Weekly_Training_Hours" min="0" max="50" step="0.5" required aria-describedby="Total_Weekly_Training_Hours-validation Total_Weekly_Training_Hours-tooltip">
+              <span id="Total_Weekly_Training_Hours-validation" class="validation-message"></span>
+            </div>
+            <div class="form-group">
+              <label for="High_Intensity_Training_Hours">High-Intensity Hours<span class="tooltip-icon" data-tooltip="Hours spent on high-intensity training per week (0-20)" id="High_Intensity_Training_Hours-tooltip"></span></label>
+              <input type="number" id="High_Intensity_Training_Hours" name="High_Intensity_Training_Hours" min="0" max="20" step="0.5" required aria-describedby="High_Intensity_Training_Hours-validation High_Intensity_Training_Hours-tooltip">
+              <span id="High_Intensity_Training_Hours-validation" class="validation-message"></span>
+            </div>
+            <div class="form-group">
+              <label for="Training_Load_Score">Training Load Score (0-100)<span class="tooltip-icon" data-tooltip="Subjective score of training intensity (0-100)" id="Training_Load_Score-tooltip"></span></label>
+              <input type="number" id="Training_Load_Score" name="Training_Load_Score" min="0" max="100" required aria-describedby="Training_Load_Score-validation Training_Load_Score-tooltip">
+              <span id="Training_Load_Score-validation" class="validation-message"></span>
+            </div>
+            <div class="form-group">
+              <label for="Strength_Training_Frequency">Strength Training (days/week)<span class="tooltip-icon" data-tooltip="Number of strength training sessions per week (0-7)" id="Strength_Training_Frequency-tooltip"></span></label>
+              <input type="number" id="Strength_Training_Frequency" name="Strength_Training_Frequency" min="0" max="7" required aria-describedby="Strength_Training_Frequency-validation Strength_Training_Frequency-tooltip">
+              <span id="Strength_Training_Frequency-validation" class="validation-message"></span>
+            </div>
+          </div>
+        </div>
+        <!-- Recovery Metrics -->
+        <div class="form-section">
+          <div class="form-section-header">
+            <h3>Recovery Metrics</h3>
+          </div>
+          <div class="form-grid">
+            <div class="form-group">
+              <label for="Recovery_Time_Between_Sessions">Recovery Time (hrs)<span class="tooltip-icon" data-tooltip="Average recovery time between training sessions in hours (0-48)" id="Recovery_Time_Between_Sessions-tooltip"></span></label>
+              <input type="number" id="Recovery_Time_Between_Sessions" name="Recovery_Time_Between_Sessions" min="0" max="48" step="0.5" required aria-describedby="Recovery_Time_Between_Sessions-validation Recovery_Time_Between_Sessions-tooltip">
+              <span id="Recovery_Time_Between_Sessions-validation" class="validation-message"></span>
+            </div>
+            <div class="form-group">
+              <label for="Fatigue_Level">Fatigue Level (0-10)<span class="tooltip-icon" data-tooltip="Subjective fatigue level (0 = none, 10 = extreme)" id="Fatigue_Level-tooltip"></span></label>
+              <input type="range" id="Fatigue_Level" name="Fatigue_Level" min="0" max="10" value="0" required aria-describedby="Fatigue_Level-validation Fatigue_Level-tooltip">
+              <span id="Fatigue_Level-value" class="slider-value">0</span>
+              <span id="Fatigue_Level-validation" class="validation-message"></span>
+            </div>
+          </div>
+        </div>
+        <!-- Performance Metrics -->
+        <div class="form-section">
+          <div class="form-section-header">
+            <h3>Performance Metrics</h3>
+          </div>
+          <div class="form-grid">
+            <div class="form-group">
+              <label for="Endurance_Score">Endurance Score (0-10)<span class="tooltip-icon" data-tooltip="Subjective endurance performance (0 = poor, 10 = excellent)" id="Endurance_Score-tooltip"></span></label>
+              <input type="range" id="Endurance_Score" name="Endurance_Score" min="0" max="10" value="0" required aria-describedby="Endurance_Score-validation Endurance_Score-tooltip">
+              <span id="Endurance_Score-value" class="slider-value">0</span>
+              <span id="Endurance_Score-validation" class="validation-message"></span>
+            </div>
+            <div class="form-group">
+              <label for="Sprint_Speed">Sprint Speed (m/s)<span class="tooltip-icon" data-tooltip="Average sprint speed in meters per second (0-20)" id="Sprint_Speed-tooltip"></span></label>
+              <input type="number" id="Sprint_Speed" name="Sprint_Speed" min="0" max="20" step="0.1" required aria-describedby="Sprint_Speed-validation Sprint_Speed-tooltip">
+              <span id="Sprint_Speed-validation" class="validation-message"></span>
+            </div>
+            <div class="form-group">
+              <label for="Agility_Score">Agility Score (0-10)<span class="tooltip-icon" data-tooltip="Subjective agility performance (0 = poor, 10 = excellent)" id="Agility_Score-tooltip"></span></label>
+              <input type="range" id="Agility_Score" name="Agility_Score" min="0" max="10" value="0" required aria-describedby="Agility_Score-validation Agility_Score-tooltip">
+              <span id="Agility_Score-value" class="slider-value">0</span>
+              <span id="Agility_Score-validation" class="validation-message"></span>
+            </div>
+            <div class="form-group">
+              <label for="Flexibility_Score">Flexibility Score (0-10)<span class="tooltip-icon" data-tooltip="Subjective flexibility performance (0 = poor, 10 = excellent)" id="Flexibility_Score-tooltip"></span></label>
+              <input type="range" id="Flexibility_Score" name="Flexibility_Score" min="0" max="10" value="0" required aria-describedby="Flexibility_Score-validation Flexibility_Score-tooltip">
+              <span id="Flexibility_Score-value" class="slider-value">0</span>
+              <span id="Flexibility_Score-validation" class="validation-message"></span>
+            </div>
+          </div>
+        </div>
+        <!-- Injury History -->
+        <div class="form-section">
+          <div class="form-section-header">
+            <h3>Injury History</h3>
+          </div>
+          <div class="form-grid">
+            <div class="form-group">
+              <label for="Previous_Injury_Count">Previous Injuries<span class="tooltip-icon" data-tooltip="Number of previous injuries (0-10)" id="Previous_Injury_Count-tooltip"></span></label>
+              <input type="number" id="Previous_Injury_Count" name="Previous_Injury_Count" min="0" max="10" required aria-describedby="Previous_Injury_Count-validation Previous_Injury_Count-tooltip">
+              <span id="Previous_Injury_Count-validation" class="validation-message"></span>
+            </div>
+            <div class="form-group">
+              <label for="Previous_Injury_Type">Previous Injury Type<span class="tooltip-icon" data-tooltip="Type of the most significant previous injury" id="Previous_Injury_Type-tooltip"></span></label>
+              <select id="Previous_Injury_Type" name="Previous_Injury_Type" required aria-describedby="Previous_Injury_Type-validation Previous_Injury_Type-tooltip">
+                <option value="">Select</option>
+                <option value="None">None</option>
+                <option value="Sprain">Sprain</option>
+                <option value="Ligament Tear">Ligament Tear</option>
+                <option value="Tendonitis">Tendonitis</option>
+                <option value="Strain">Strain</option>
+                <option value="Fracture">Fracture</option>
+              </select>
+              <span id="Previous_Injury_Type-validation" class="validation-message"></span>
+            </div>
+          </div>
+        </div>
+        <button type="submit" class="submit-button">Predict Injury Risk</button>
+      </form>
+      <div id="result-container" class="result-container">
+        <h2>Risk Assessment Results</h2>
+        <div class="summary-card">
+          <div class="summary-item">
+            <span class="summary-label">Risk Level</span>
+            <span id="risk-level" class="summary-value"></span>
+          </div>
+          <div class="summary-item">
+            <span class="summary-label">Likelihood</span>
+            <span id="likelihood-percent" class="summary-value"></span>
+          </div>
+          <div class="summary-gauge">
+            <svg class="gauge-svg" viewBox="0 0 120 120">
+              <defs>
+                <linearGradient id="gaugeGradient" x1="0%" y1="0%" x2="100%" y2="100%">
+                  <stop offset="0%" style="stop-color:#00ff99;stop-opacity:1" />
+                  <stop offset="50%" style="stop-color:#ffd700;stop-opacity:1" />
+                  <stop offset="100%" style="stop-color:#ff3366;stop-opacity:1" />
+                </linearGradient>
+              </defs>
+              <circle class="gauge-base" r="54" cx="60" cy="60"></circle>
+              <circle class="gauge-value" r="54" cx="60" cy="60"></circle>
+            </svg>
+            <span class="gauge-text"></span>
+          </div>
+        </div>
+        <div class="metrics-grid">
+          <div class="metric-card">
+            <h4>Training Load</h4>
+            <svg class="radial-gauge" viewBox="0 0 100 100">
+              <defs>
+                <linearGradient id="gaugeGradient" x1="0%" y1="0%" x2="100%" y2="100%">
+                  <stop offset="0%" style="stop-color:#00ff99;stop-opacity:1" />
+                  <stop offset="50%" style="stop-color:#ffd700;stop-opacity:1" />
+                  <stop offset="100%" style="stop-color:#ff3366;stop-opacity:1" />
+                </linearGradient>
+              </defs>
+              <circle class="gauge-base" r="40" cx="50" cy="50"></circle>
+              <circle id="training-load-gauge" class="gauge-value" r="40" cx="50" cy="50"></circle>
+            </svg>
+            <span id="training-load-text" class="metric-value"></span>
+            <span id="training-load-tooltip" class="tooltip"></span>
+          </div>
+          <div class="metric-card">
+            <h4>Recovery Status</h4>
+            <svg class="radial-gauge" viewBox="0 0 100 100">
+              <defs>
+                <linearGradient id="gaugeGradient" x1="0%" y1="0%" x2="100%" y2="100%">
+                  <stop offset="0%" style="stop-color:#00ff99;stop-opacity:1" />
+                  <stop offset="50%" style="stop-color:#ffd700;stop-opacity:1" />
+                  <stop offset="100%" style="stop-color:#ff3366;stop-opacity:1" />
+                </linearGradient>
+              </defs>
+              <circle class="gauge-base" r="40" cx="50" cy="50"></circle>
+              <circle id="recovery-gauge" class="gauge-value" r="40" cx="50" cy="50"></circle>
+            </svg>
+            <span id="recovery-text" class="metric-value"></span>
+            <span id="recovery-tooltip" class="tooltip"></span>
+          </div>
+          <div class="metric-card">
+            <h4>Injury History</h4>
+            <svg class="radial-gauge" viewBox="0 0 100 100">
+              <defs>
+                <linearGradient id="gaugeGradient" x1="0%" y1="0%" x2="100%" y2="100%">
+                  <stop offset="0%" style="stop-color:#00ff99;stop-opacity:1" />
+                  <stop offset="50%" style="stop-color:#ffd700;stop-opacity:1" />
+                  <stop offset="100%" style="stop-color:#ff3366;stop-opacity:1" />
+                </linearGradient>
+              </defs>
+              <circle class="gauge-base" r="40" cx="50" cy="50"></circle>
+              <circle id="injury-history-gauge" class="gauge-value" r="40" cx="50" cy="50"></circle>
+            </svg>
+            <span id="injury-history-text" class="metric-value"></span>
+            <span id="injury-history-tooltip" class="tooltip"></span>
+          </div>
+        </div>
+        <div class="recommendations">
+          <h3>Personalized Recommendations</h3>
+          <ul class="recommendation-list"></ul>
+        </div>
+        <button class="action-button" onclick="exportPDF()">Export Results as PDF</button>
+      </div>
+    </main>
+  </div>
+  <script>
+    // Collapsible Form Sections
+    document.querySelectorAll('.form-section-header').forEach(header => {
+      header.addEventListener('click', () => {
+        const section = header.parentElement;
+        section.classList.toggle('collapsed');
+      });
+    });
+    // Progress Bar Logic
+    const form = document.getElementById('predictionForm');
+    const progressFill = document.getElementById('progress-fill');
+    const progressPercent = document.getElementById('progress-percent');
+    const inputs = form.querySelectorAll('input, select');
+    const totalFields = inputs.length;
+    function updateProgress() {
+      let filledFields = 0;
+      inputs.forEach(input => {
+        if (input.value !== '' && (!input.required || input.checkValidity())) {
+          filledFields++;
+        }
+      });
+      const percentage = Math.round((filledFields / totalFields) * 100);
+      progressFill.style.width = `${percentage}%`;
+      progressPercent.textContent = `${percentage}%`;
+    }
+    inputs.forEach(input => {
+      input.addEventListener('input', updateProgress);
+      input.addEventListener('change', updateProgress);
+    });
+    // Slider Value Display
+    const sliders = form.querySelectorAll('input[type="range"]');
+    sliders.forEach(slider => {
+      const valueSpan = document.getElementById(`${slider.id}-value`);
+      valueSpan.textContent = slider.value;
+      slider.addEventListener('input', () => {
+        valueSpan.textContent = slider.value;
+      });
+    });
+    // Tooltip Functionality
+    document.querySelectorAll('.tooltip-icon').forEach(icon => {
+      // Create tooltip text element
+      const tooltipText = document.createElement('span');
+      tooltipText.classList.add('tooltip-text');
+      tooltipText.textContent = icon.getAttribute('data-tooltip');
+      icon.appendChild(tooltipText);
+      // Show tooltip on hover
+      icon.addEventListener('mouseenter', () => {
+        tooltipText.style.visibility = 'visible';
+        tooltipText.style.opacity = '1';
+      });
+      icon.addEventListener('mouseleave', () => {
+        tooltipText.style.visibility = 'hidden';
+        tooltipText.style.opacity = '0';
+      });
+    });
+    // Particle Background
+    const canvas = document.getElementById('particles');
+    const ctx = canvas.getContext('2d');
+    canvas.width = window.innerWidth;
+    canvas.height = window.innerHeight;
+    const particlesArray = [];
+    const numberOfParticles = 100;
+    class Particle {
+      constructor() {
+        this.x = Math.random() * canvas.width;
+        this.y = Math.random() * canvas.height;
+        this.size = Math.random() * 2 + 1;
+        this.speedX = Math.random() * 0.5 - 0.25;
+        this.speedY = Math.random() * 0.5 - 0.25;
+      }
+      update() {
+        this.x += this.speedX;
+        this.y += this.speedY;
+        if (this.x < 0 || this.x > canvas.width) this.speedX *= -1;
+        if (this.y < 0 || this.y > canvas.height) this.speedY *= -1;
+      }
+      draw() {
+        ctx.fillStyle = 'rgba(0, 212, 255, 0.3)';
+        ctx.beginPath();
+        ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);
+        ctx.fill();
+      }
+    }
+    function initParticles() {
+      for (let i = 0; i < numberOfParticles; i++) {
+        particlesArray.push(new Particle());
+      }
+    }
+    function animateParticles() {
+      ctx.clearRect(0, 0, canvas.width, canvas.height);
+      particlesArray.forEach(particle => {
+        particle.update();
+        particle.draw();
+      });
+      requestAnimationFrame(animateParticles);
+    }
+    initParticles();
+    animateParticles();
+    window.addEventListener('resize', () => {
+      canvas.width = window.innerWidth;
+      canvas.height = window.innerHeight;
+    });
+    // PDF Export Function
+    function exportPDF() {
+      const { jsPDF } = window.jspdf;
+      const doc = new jsPDF({
+        orientation: 'portrait',
+        unit: 'mm',
+        format: 'a4'
+      });
+      // Styling
+      const primaryColor = '#00d4ff';
+      const secondaryColor = '#ff00aa';
+      doc.setFont('Helvetica', 'bold');
+      // Header
+      doc.setFillColor(primaryColor);
+      doc.rect(0, 0, 210, 20, 'F');
+      doc.setTextColor('#ffffff');
+      doc.setFontSize(20);
+      doc.text('Injury Prediction System Report', 105, 12, { align: 'center' });
+      // Summary
+      doc.setTextColor('#000000');
+      doc.setFontSize(16);
+      doc.text('Risk Assessment Summary', 20, 30);
+      doc.setDrawColor(primaryColor);
+      doc.setLineWidth(0.5);
+      doc.line(20, 32, 190, 32);
+      doc.setFontSize(12);
+      doc.setFont('Helvetica', 'normal');
+      const riskLevel = document.getElementById('risk-level').textContent || 'N/A';
+      const likelihood = document.getElementById('likelihood-percent').textContent || 'N/A';
+      const gaugeText = document.querySelector('.gauge-text').textContent || '0%';
+      doc.text(`Risk Level: ${riskLevel}`, 20, 40);
+      doc.text(`Likelihood: ${likelihood}`, 20, 48);
+      doc.text(`Risk Score: ${gaugeText}`, 20, 56);
+      // Metrics
+      doc.setFontSize(16);
+      doc.text('Key Metrics', 20, 70);
+      doc.line(20, 72, 190, 72);
+      doc.setFontSize(12);
+      const trainingLoad = document.getElementById('training-load-text').textContent || 'N/A';
+      const recovery = document.getElementById('recovery-text').textContent || 'N/A';
+      const injuryHistory = document.getElementById('injury-history-text').textContent || 'N/A';
+      doc.text(`Training Load: ${trainingLoad}`, 20, 80);
+      doc.text(`Recovery Status: ${recovery}`, 20, 88);
+      doc.text(`Injury History: ${injuryHistory}`, 20, 96);
+      // Recommendations
+      doc.setFontSize(16);
+      doc.text('Recommendations', 20, 110);
+      doc.line(20, 112, 190, 112);
+      doc.setFontSize(12);
+      const recommendations = document.querySelectorAll('.recommendation-item');
+      let y = 120;
+      recommendations.forEach((rec, index) => {
+        const summary = rec.querySelector('.recommendation-summary')?.textContent || 'N/A';
+        doc.text(`${index + 1}. ${summary}`, 20, y);
+        y += 8;
+        if (y > 270) {
+          doc.addPage();
+          y = 20;
+        }
+      });
+      // Footer
+      doc.setFillColor(secondaryColor);
+      doc.rect(0, 280, 210, 17, 'F');
+      doc.setTextColor('#ffffff');
+      doc.setFontSize(10);
+      doc.text('Generated by Injury Prediction System', 105, 290, { align: 'center' });
+      // Save PDF
+      doc.save('Injury_Prediction_Report.pdf');
+    }
+  </script>
+  <script src="calculator.js"></script>
+</body>
+</html>

UI2/calculator.js ADDED Viewed

	@@ -0,0 +1,481 @@

+document.addEventListener('DOMContentLoaded', () => {
+  const form = document.getElementById("predictionForm");
+  const resultContainer = document.getElementById("result-container");
+  if (resultContainer) {
+    resultContainer.style.display = 'none';
+  }
+  // Validation helper
+  const validateField = (input) => {
+    const value = input.value.trim();
+    const min = parseFloat(input.min);
+    const max = parseFloat(input.max);
+    if (!value) return false;
+    if (input.type === 'number') {
+      const numValue = parseFloat(value);
+      return !isNaN(numValue) && numValue >= min && numValue <= max;
+    }
+    return true;
+  };
+  // Add validation feedback
+  const addValidationFeedback = (input) => {
+    const validateInput = () => {
+      const formGroup = input.closest('.form-group');
+      const value = input.value.trim();
+      const isValid = value !== '' && validateField(input);
+      formGroup.classList.remove('error', 'success');
+      formGroup.classList.add(isValid ? 'success' : 'error');
+      const existingMessage = formGroup.querySelector('.validation-message');
+      if (existingMessage) existingMessage.remove();
+      const message = document.createElement('div');
+      message.className = `validation-message ${isValid ? 'success' : 'error'}`;
+      message.textContent = value === '' ? 'This field is required' :
+                           (isValid ? 'Valid input' : 'Please check the value');
+      formGroup.appendChild(message);
+      return isValid;
+    };
+    input.addEventListener('input', validateInput);
+    input.addEventListener('blur', validateInput);
+  };
+  document.querySelectorAll('input, select').forEach(addValidationFeedback);
+  // Animate counter
+  function animateCounter(element, target) {
+    let start = 0;
+    const duration = 1000;
+    const stepTime = Math.abs(Math.floor(duration / target));
+    const timer = setInterval(() => {
+      start++;
+      element.textContent = start + '%';
+      if (start >= target) clearInterval(timer);
+    }, stepTime);
+  }
+  // Update gauge SVG
+  function updateGauge(elementId, percent, textId, tooltipId, tooltipMessages) {
+    const gauge = document.querySelector(elementId);
+    const text = document.querySelector(textId);
+    const tooltip = document.querySelector(tooltipId);
+    const radius = elementId.includes('radial') ? 40 : 54;
+    const circumference = 2 * Math.PI * radius;
+    const offset = circumference - (percent / 100) * circumference;
+    gauge.style.strokeDasharray = `${circumference} ${circumference}`;
+    gauge.style.strokeDashoffset = offset;
+    if (text) text.textContent = `${Math.round(percent)}%`;
+    if (tooltip && tooltipMessages) {
+      if (percent >= 75) {
+        tooltip.textContent = tooltipMessages.high;
+      } else if (percent >= 50) {
+        tooltip.textContent = tooltipMessages.medium;
+      } else {
+        tooltip.textContent = tooltipMessages.low;
+      }
+    }
+  }
+  // Mapping of recommendation keywords to professional resources
+  const resourceLinks = {
+    'training': {
+      url: 'https://www.acsm.org/docs/default-source/files-for-resource-library/acsms-guidelines-for-exercise-testing-and-prescription-(10th-ed.).pdf',
+      source: 'American College of Sports Medicine'
+    },
+    'intensity': {
+      url: 'https://www.mayoclinic.org/healthy-lifestyle/fitness/in-depth/exercise-intensity/art-20046887',
+      source: 'Mayo Clinic'
+    },
+    'recovery': {
+      url: 'https://www.ncbi.nlm.nih.gov/pmc/articles/PMC5592286/',
+      source: 'PubMed - Sports Medicine Journal'
+    },
+    'rest': {
+      url: 'https://www.sleepfoundation.org/physical-activity/athletic-performance-and-sleep',
+      source: 'Sleep Foundation'
+    },
+    'injury': {
+      url: 'https://orthoinfo.aaos.org/en/diseases--conditions/sports-injuries/',
+      source: 'American Academy of Orthopaedic Surgeons'
+    },
+    'prevention': {
+      url: 'https://www.nata.org/professional-interests/safe-sports-environments/injury-prevention',
+      source: 'National Athletic Trainers\' Association'
+    }
+  };
+  // Enhanced recommendation processing
+  function enhanceRecommendations(recommendations, factorData, featureImportance) {
+    const categories = {
+      'Training Adjustments': [],
+      'Recovery Strategies': [],
+      'Injury Prevention': []
+    };
+    recommendations.forEach((rec, index) => {
+      let category = 'Injury Prevention';
+      if (rec.toLowerCase().includes('training') || rec.toLowerCase().includes('intensity')) {
+        category = 'Training Adjustments';
+      } else if (rec.toLowerCase().includes('recovery') || rec.toLowerCase().includes('rest')) {
+        category = 'Recovery Strategies';
+      }
+      const priority = calculatePriority(rec, factorData, featureImportance);
+      // Find the most relevant resource link
+      let resource = { url: 'https://www.healthline.com/health/sports-injuries', source: 'Healthline' };
+      for (const [keyword, link] of Object.entries(resourceLinks)) {
+        if (rec.toLowerCase().includes(keyword)) {
+          resource = link;
+          break;
+        }
+      }
+      categories[category].push({
+        id: `rec-${index}`,
+        text: rec,
+        priority: priority,
+        details: generateDetails(rec, factorData),
+        completed: false,
+        resourceUrl: resource.url,
+        resourceSource: resource.source
+      });
+    });
+    Object.keys(categories).forEach(category => {
+      categories[category].sort((a, b) => b.priority - a.priority);
+    });
+    return categories;
+  }
+  function calculatePriority(recommendation, factorData, featureImportance) {
+    let priority = 0.5;
+    const keywords = {
+      'Training_Load_Score': ['training', 'intensity'],
+      'Fatigue_Level': ['fatigue', 'rest'],
+      'Recovery_Time_Between_Sessions': ['recovery', 'rest'],
+      'Previous_Injury_Count': ['injury', 'prevention']
+    };
+    Object.keys(keywords).forEach(key => {
+      if (keywords[key].some(kw => recommendation.toLowerCase().includes(kw))) {
+        const impact = (factorData[key] || 0) * (featureImportance[key] || 0);
+        priority = Math.max(priority, impact);
+      }
+    });
+    return Math.min(1, Math.max(0, priority));
+  }
+  function generateDetails(recommendation, factorData) {
+    if (recommendation.toLowerCase().includes('training') && factorData.High_Intensity_Training_Hours > 10) {
+      return `Reduce high-intensity sessions by 1-2 hours/week to lower training load.`;
+    } else if (recommendation.toLowerCase().includes('recovery') && factorData.Recovery_Time_Between_Sessions < 12) {
+      return `Increase rest periods to at least 12 hours between sessions.`;
+    } else if (recommendation.toLowerCase().includes('injury') && factorData.Previous_Injury_Count > 2) {
+      return `Consult a physiotherapist to address recurring injury risks.`;
+    }
+    return `Follow this recommendation consistently for optimal results.`;
+  }
+  function loadCompletedRecommendations() {
+    const stored = localStorage.getItem('completedRecommendations');
+    return stored ? JSON.parse(stored) : {};
+  }
+  function saveCompletedRecommendations(completed) {
+    localStorage.setItem('completedRecommendations', JSON.stringify(completed));
+  }
+  if (form) {
+    form.addEventListener("submit", async (e) => {
+      e.preventDefault();
+      document.querySelectorAll('.validation-message').forEach(msg => msg.remove());
+      document.querySelectorAll('.form-group').forEach(group => group.classList.remove('error'));
+      const inputs = form.querySelectorAll('input, select');
+      let isValid = true;
+      inputs.forEach(input => {
+        const value = input.value.trim();
+        const formGroup = input.closest('.form-group');
+        if (value === '') {
+          isValid = false;
+          formGroup.classList.add('error');
+          const message = document.createElement('div');
+          message.className = 'validation-message error';
+          message.innerHTML = `<strong>Required:</strong> Please fill out this field`;
+          formGroup.appendChild(message);
+          input.classList.add('shake');
+          setTimeout(() => input.classList.remove('shake'), 500);
+          input.style.borderColor = '#ef4444';
+          input.style.boxShadow = '0 0 10px rgba(239, 68, 68, 0.3)';
+        }
+      });
+      if (!isValid) {
+        const firstError = form.querySelector('.form-group.error');
+        if (firstError) {
+          firstError.scrollIntoView({ behavior: 'smooth', block: 'center' });
+        }
+        return;
+      }
+      const rawData = Object.fromEntries(new FormData(form).entries());
+      const formData = new FormData(form);
+      const data = Object.fromEntries(formData.entries());
+      const genderMap = { "Male": 0, "Female": 1 };
+      const experienceMap = {
+        "Beginner": 0,
+        "Intermediate": 1,
+        "Advanced": 2,
+        "Professional": 3
+      };
+      const injuryTypeMap = {
+        "None": 0,
+        "Sprain": 1,
+        "Ligament Tear": 2,
+        "Tendonitis": 3,
+        "Strain": 4,
+        "Fracture": 5
+      };
+      const sportTypeMap = {
+        "Football": 0,
+        "Basketball": 1,
+        "Swimming": 2,
+        "Running": 3,
+        "Tennis": 4,
+        "Volleyball": 5
+      };
+      data.Gender = genderMap[data.Gender] ?? 0;
+      data.Experience_Level = experienceMap[data.Experience_Level] ?? 0;
+      data.Previous_Injury_Type = injuryTypeMap[data.Previous_Injury_Type] ?? 0;
+      data.Sport_Type = sportTypeMap[data.Sport_Type] ?? 0;
+      Object.keys(data).forEach(key => {
+        data[key] = isNaN(data[key]) ? 0 : parseFloat(data[key]);
+      });
+      const outlierWarnings = [];
+      if (data.Age < 18 && data.Total_Weekly_Training_Hours > 40) {
+        outlierWarnings.push('Unusual training hours for age under 18. Consider reducing to prevent burnout.');
+      }
+      if (data.Sprint_Speed > 10 && data.Age > 50) {
+        outlierWarnings.push('Sprint speed seems high for age over 50. Please verify this value.');
+      }
+      if (data.Fatigue_Level > 8 && data.Recovery_Time_Between_Sessions < 12) {
+        outlierWarnings.push('High fatigue with low recovery time may skew results. Consider adjusting inputs.');
+      }
+      if (outlierWarnings.length > 0) {
+        const warningDiv = document.createElement('div');
+        warningDiv.style.color = '#facc15';
+        warningDiv.style.marginBottom = '20px';
+        warningDiv.innerHTML = `<strong>Warning:</strong><ul>${outlierWarnings.map(w => `<li>${w}</li>`).join('')}</ul>`;
+        form.appendChild(warningDiv);
+      }
+      try {
+        console.log('Sending prediction request to server:', data);
+        const response = await fetch("http://127.0.0.1:8000/predict", {
+          method: "POST",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify(data),
+        });
+        if (!response.ok) throw new Error("Prediction failed");
+        const result = await response.json();
+        console.log('Received prediction result:', result);
+        const {
+          predicted_risk_level,
+          injury_likelihood_percent,
+          model_class_probability,
+          recommendations,
+          feature_importance
+        } = result;
+        if (!predicted_risk_level || typeof injury_likelihood_percent !== 'number' || !Array.isArray(recommendations)) {
+          throw new Error("Invalid API response format");
+        }
+        const trainingLoad = Math.min(100, Math.max(0, (parseFloat(data.Training_Load_Score) / 100) * 100));
+        const recoveryStatus = Math.min(100, Math.max(0, (parseFloat(data.Recovery_Time_Between_Sessions) / 48) * 100));
+        const injuryImpact = Math.min(100, Math.max(0, (parseFloat(data.Previous_Injury_Count) / 10) * 100));
+        const recoveryPerTraining = data.Total_Weekly_Training_Hours > 0
+          ? Math.min(100, Math.max(0, (parseFloat(data.Recovery_Time_Between_Sessions) / parseFloat(data.Total_Weekly_Training_Hours)) * 100))
+          : 0;
+        const totalWeeklyHours = Math.min(100, Math.max(0, (parseFloat(data.Total_Weekly_Training_Hours) / 50) * 100));
+        const fatigueLevel = Math.min(100, Math.max(0, (parseFloat(data.Fatigue_Level) / 10) * 100));
+        const highIntensityHours = Math.min(100, Math.max(0, (parseFloat(data.High_Intensity_Training_Hours) / 20) * 100));
+        const experienceLevel = Math.min(100, Math.max(0, (data.Experience_Level / 3) * 100));
+        const defaultFeatureImportance = {
+          Training_Load_Score: 0.22,
+          Recovery_Per_Training: 0.18,
+          Total_Weekly_Training_Hours: 0.16,
+          Fatigue_Level: 0.14,
+          Recovery_Time_Between_Sessions: 0.12,
+          High_Intensity_Training_Hours: 0.10
+        };
+        const finalFeatureImportance = feature_importance || defaultFeatureImportance;
+        const enhancedRecommendations = enhanceRecommendations(recommendations, {
+          Training_Load_Score: trainingLoad,
+          Recovery_Per_Training: recoveryPerTraining,
+          Total_Weekly_Training_Hours: totalWeeklyHours,
+          Fatigue_Level: fatigueLevel,
+          Recovery_Time_Between_Sessions: recoveryStatus,
+          High_Intensity_Training_Hours: highIntensityHours,
+          Previous_Injury_Count: injuryImpact
+        }, finalFeatureImportance);
+        const fullReportData = {
+          predicted_risk_level,
+          injury_likelihood_percent,
+          model_class_probability,
+          recommendations: enhancedRecommendations,
+          feature_importance: finalFeatureImportance,
+          factorData: {
+            Training_Load_Score: trainingLoad,
+            Recovery_Per_Training: recoveryPerTraining,
+            Total_Weekly_Training_Hours: totalWeeklyHours,
+            Fatigue_Level: fatigueLevel,
+            Recovery_Time_Between_Sessions: recoveryStatus,
+            High_Intensity_Training_Hours: highIntensityHours,
+            Experience_Level: experienceLevel,
+            Intensity_Ratio: data.High_Intensity_Training_Hours > 0
+              ? Math.min(100, Math.max(0, (parseFloat(data.High_Intensity_Training_Hours) / parseFloat(data.Total_Weekly_Training_Hours)) * 100))
+              : 0,
+            Endurance_Score: Math.min(100, Math.max(0, (parseFloat(data.Endurance_Score) / 10) * 100)),
+            Sprint_Speed: Math.min(100, Math.max(0, (parseFloat(data.Sprint_Speed) / 20) * 100)),
+            Agility_Score: Math.min(100, Math.max(0, (parseFloat(data.Agility_Score) / 10) * 100)),
+            Flexibility_Score: Math.min(100, Math.max(0, (parseFloat(data.Flexibility_Score) / 10) * 100)),
+            Age: Math.min(100, Math.max(0, (parseFloat(data.Age) / 80) * 100)),
+            Strength_Training_Frequency: Math.min(100, Math.max(0, (parseFloat(data.Strength_Training_Frequency) / 7) * 100)),
+            Sport_Type: Math.min(100, Math.max(0, data.Sport_Type * 20)),
+            Gender: data.Gender * 100,
+            Previous_Injury_Count: injuryImpact,
+            Previous_Injury_Type: Math.min(100, Math.max(0, data.Previous_Injury_Type * 20))
+          },
+          profile: {
+            age: rawData.Age,
+            gender: rawData.Gender,
+            sport: rawData.Sport_Type
+          },
+          timestamp: new Date().toISOString(),
+          version: '1.1.0'
+        };
+        console.log('Storing prediction data in localStorage:', fullReportData);
+        localStorage.setItem('predictionData', JSON.stringify(fullReportData));
+        document.getElementById('risk-level').textContent = predicted_risk_level;
+        document.getElementById('likelihood-percent').textContent = `${Math.round(injury_likelihood_percent)}%`;
+        updateGauge('.summary-gauge .gauge-value', injury_likelihood_percent, '.summary-gauge .gauge-text', null, null);
+        updateGauge('#training-load-gauge', trainingLoad, '#training-load-text', '#training-load-tooltip', {
+          high: 'High training load may significantly increase injury risk.',
+          medium: 'Moderate training load; monitor closely.',
+          low: 'Low training load; risk appears minimal.'
+        });
+        updateGauge('#recovery-gauge', recoveryStatus, '#recovery-text', '#recovery-tooltip', {
+          high: 'Excellent recovery time; low risk from this factor.',
+          medium: 'Moderate recovery; consider increasing rest.',
+          low: 'Insufficient recovery may elevate injury risk.'
+        });
+        updateGauge('#injury-history-gauge', injuryImpact, '#injury-history-text', '#injury-history-tooltip', {
+          high: 'Significant injury history; high risk of recurrence.',
+          medium: 'Moderate injury history; take preventive measures.',
+          low: 'Minimal injury history; low risk from this factor.'
+        });
+        const recommendationListEl = document.querySelector('.recommendation-list');
+        const completedRecs = loadCompletedRecommendations();
+        recommendationListEl.innerHTML = Object.keys(enhancedRecommendations).map(category => `
+          <div class="recommendation-category">
+            <h5 class="category-title">${category}</h5>
+            ${enhancedRecommendations[category].map(rec => `
+              <li class="recommendation-item expandable ${completedRecs[rec.id] ? 'completed' : ''}">
+                <input type="checkbox" class="rec-checkbox" data-id="${rec.id}" ${completedRecs[rec.id] ? 'checked' : ''}>
+                <span class="priority-indicator" style="color: ${rec.priority > 0.7 ? '#ef4444' : rec.priority > 0.4 ? '#facc15' : '#22c55e'}">
+                  ${rec.priority > 0.7 ? '🛑' : rec.priority > 0.4 ? '⚠️' : '✅'}
+                </span>
+                <span class="recommendation-summary">${rec.text}</span>
+                <span class="tooltip-icon">ℹ️
+                  <span class="tooltip-text">${rec.details}</span>
+                </span>
+                <div class="recommendation-detail">${rec.details}</div>
+                <button class="learn-more-btn" data-url="${rec.resourceUrl}" title="Source: ${rec.resourceSource}">Learn More</button>
+              </li>
+            `).join('')}
+          </div>
+        `).join('');
+        document.querySelectorAll('.rec-checkbox').forEach(checkbox => {
+          checkbox.addEventListener('change', () => {
+            const recId = checkbox.dataset.id;
+            const completedRecs = loadCompletedRecommendations();
+            completedRecs[recId] = checkbox.checked;
+            saveCompletedRecommendations(completedRecs);
+            checkbox.closest('.recommendation-item').classList.toggle('completed', checkbox.checked);
+          });
+        });
+        document.querySelectorAll('.recommendation-item.expandable').forEach(item => {
+          item.addEventListener('click', (e) => {
+            if (e.target.classList.contains('rec-checkbox') || e.target.classList.contains('learn-more-btn')) return;
+            const detail = item.querySelector('.recommendation-detail');
+            if (detail.style.display === "none" || detail.style.display === "") {
+              detail.style.display = "block";
+              detail.style.maxHeight = detail.scrollHeight + "px";
+            } else {
+              detail.style.display = "none";
+              detail.style.maxHeight = "0";
+            }
+          });
+        });
+        document.querySelectorAll('.learn-more-btn').forEach(btn => {
+          btn.addEventListener('click', () => {
+            const url = btn.dataset.url;
+            window.open(url, '_blank');
+          });
+        });
+        resultContainer.style.display = 'block';
+        resultContainer.classList.remove("hidden");
+        setTimeout(() => {
+          resultContainer.classList.add("visible");
+        }, 100);
+        resultContainer.scrollIntoView({ behavior: "smooth" });
+        const reportActions = document.createElement('div');
+        reportActions.className = 'report-actions';
+        reportActions.innerHTML = `
+          <button onclick="window.location.href='report.html'" class="action-button">
+            View Detailed Analysis
+          </button>
+        `;
+        resultContainer.appendChild(reportActions);
+      } catch (err) {
+        console.error('Prediction error:', err.message);
+        const resultOutput = document.createElement('div');
+        resultOutput.innerHTML = `<p style="color: red;">Error: ${err.message}. Please ensure the prediction server is running and try again.</p>`;
+        form.appendChild(resultOutput);
+      }
+    });
+  }
+});

UI2/chatbot.html ADDED Viewed

	@@ -0,0 +1,1166 @@

+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>AthleteGuard AI</title>
+  <link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Outfit:wght@300;400;500;600&display=swap" rel="stylesheet" />
+</head>
+<body class="nebula">
+  <!-- Loader -->
+  <div class="loader-wrapper">
+    <div class="loader">
+      <div class="space-robot-loader">
+        <div class="robot-core"></div>
+        <div class="robot-panel panel-1"></div>
+        <div class="robot-panel panel-2"></div>
+        <div class="robot-eye"></div>
+        <div class="shockwave"></div>
+        <div class="pulse-ring"></div>
+      </div>
+      <div class="progress-bar">
+        <div class="progress-arc"></div>
+      </div>
+      <span>Initializing AI...</span>
+    </div>
+  </div>
+  <!-- Header -->
+  <header>
+    <div class="navbar">
+      <div class="nav-logo">
+        <svg class="space-robot-logo" viewBox="0 0 40 40" aria-label=".team
+        Space Robot Logo">
+          <circle cx="20" cy="20" r="15" fill="url(#robotGradient)" />
+          <circle cx="15" cy="15" r="4" fill="#f0f0ff" />
+          <path d="M10 20 L8 18 M30 20 L32 18" stroke="#c0c0c0" stroke-width="1" />
+          <circle cx="20" cy="20" r="18" fill="none" stroke="#c0c0c0" stroke-width="0.5" opacity="0.5" />
+          <defs>
+            <radialGradient id="robotGradient" cx="0.5" cy="0.5" r="0.5">
+              <stop offset="0%" stop-color="#c0c0c0" />
+              <stop offset="100%" stop-color="#3c2f5f" />
+            </radialGradient>
+          </defs>
+        </svg>
+      </div>
+      <div class="hamburger" aria-label="Toggle navigation">
+        <span></span>
+        <span></span>
+        <span></span>
+      </div>
+      <ul class="nav-menu">
+        <li><a href="index.html">Home</a></li>
+        <li><a href="index.html#features">Features</a></li>
+        <li><a href="calculator.html">Calculator</a></li>
+        <li><a href="about.html">About</a></li>
+        <li><a href="chatbot.html" class="active">Chatbot</a></li>
+        <li><a href="index.html#faq">FAQ</a></li>
+      </ul>
+      <select id="theme-toggle" aria-label="Select theme">
+        <option value="nebula">Nebula</option>
+        <option value="starlight">Starlight</option>
+        <option value="void">Void</option>
+      </select>
+    </div>
+  </header>
+  <!-- Chatbot Section -->
+  <section class="section chatbot-section">
+    <canvas id="starfield-canvas"></canvas>
+    <div class="container">
+      <h1 class="header">AthleteGuard AI</h1>
+      <p class="description">Your intelligent assistant for training and injury prevention.</p>
+      <div class="chatbot-container glassmorphism" id="chatbotContainer">
+        <div class="chat-header">
+          <div class="space-robot"></div>
+          <span>AthleteGuard AI</span>
+        </div>
+        <div class="chat-body" id="chat-output"></div>
+        <div class="chat-input-wrapper">
+          <input type="text" id="user-input" placeholder="Ask about training, nutrition, or injuries..." aria-label="Chat input" />
+          <button id="sendButton" aria-label="Send message">➤</button>
+        </div>
+      </div>
+    </div>
+  </section>
+  <!-- Footer -->
+  <footer class="footer">
+    <div class="container">
+      <p>© 2025 AthleteGuard AI. All rights reserved.</p>
+    </div>
+  </footer>
+  <!-- Embedded CSS -->
+  <style>
+    * {
+      margin: 0;
+      padding: 0;
+      box-sizing: border-box;
+    }
+    body {
+      font-family: 'Outfit', sans-serif;
+      background: linear-gradient(135deg, #0a0a23 0%, #1a1a3d 100%);
+      color: #f0f0ff;
+      line-height: 1.6;
+      overflow-x: hidden;
+      visibility: visible;
+    }
+    /* Loader */
+    .loader-wrapper {
+      position: fixed;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      background: #0a0a23;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      z-index: 1000;
+      transition: opacity 0.5s ease;
+    }
+    .loader {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      gap: 15px;
+    }
+    .space-robot-loader {
+      width: 80px;
+      height: 80px;
+      position: relative;
+      animation: loaderAssemble 3s linear forwards;
+    }
+    .robot-core {
+      width: 50px;
+      height: 50px;
+      background: radial-gradient(circle, #c0c0c0 50%, #3c2f5f 100%);
+      border-radius: 50%;
+      position: absolute;
+      top: 15px;
+      left: 15px;
+      opacity: 0;
+      animation: coreFade 1s ease forwards;
+    }
+    .robot-panel {
+      width: 20px;
+      height: 20px;
+      background: #c0c0c0;
+      position: absolute;
+      opacity: 0;
+    }
+    .panel-1 {
+      top: 10px;
+      left: 10px;
+      transform: rotate(45deg);
+      animation: panelSlide 1s ease 1s forwards;
+    }
+    .panel-2 {
+      bottom: 10px;
+      right: 10px;
+      transform: rotate(-45deg);
+      animation: panelSlide 1s ease 1.5s forwards;
+    }
+    .robot-eye {
+      width: 12px;
+      height: 12px;
+      background: #f0f0ff;
+      border-radius: 50%;
+      position: absolute;
+      top: 25px;
+      left: 25px;
+      opacity: 0;
+      animation: eyeGlow 0.5s ease 2s forwards;
+    }
+    .shockwave {
+      width: 100px;
+      height: 100px;
+      border: 2px solid #c0c0c0;
+      border-radius: 50%;
+      position: absolute;
+      top: -10px;
+      left: -10px;
+      opacity: 0;
+      animation: shockwaveExpand 0.8s ease 2.5s infinite;
+    }
+    .pulse-ring {
+      width: 120px;
+      height: 120px;
+      border: 3px solid rgba(192, 192, 192, 0.3);
+      border-radius: 50%;
+      position: absolute;
+      top: -20px;
+      left: -20px;
+      opacity: 0;
+      animation: pulseRing 1.5s ease 3s infinite;
+    }
+    @keyframes loaderAssemble {
+      0% { transform: scale(0.5) rotate(0deg); }
+      100% { transform: scale(1) rotate(360deg); }
+    }
+    @keyframes coreFade {
+      0% { opacity: 0; transform: scale(0.5); }
+      100% { opacity: 1; transform: scale(1); }
+    }
+    @keyframes panelSlide {
+      0% { opacity: 0; transform: translateX(-20px) rotate(45deg); }
+      100% { opacity: 1; transform: translateX(0) rotate(45deg); }
+    }
+    @keyframes eyeGlow {
+      0% { opacity: 0; transform: scale(0.5); }
+      100% { opacity: 1; transform: scale(1); }
+    }
+    @keyframes shockwaveExpand {
+      0% { opacity: 0.5; transform: scale(0.8); }
+      100% { opacity: 0; transform: scale(1.8); }
+    }
+    @keyframes pulseRing {
+      0% { opacity: 0.3; transform: scale(0.7); }
+      50% { opacity: 0.6; transform: scale(1.2); }
+      100% { opacity: 0; transform: scale(1.5); }
+    }
+    .progress-bar {
+      width: 120px;
+      height: 12px;
+      background: rgba(255, 255, 255, 0.1);
+      border-radius: 6px;
+      overflow: hidden;
+      position: relative;
+    }
+    .progress-arc {
+      width: 0;
+      height: 100%;
+      background: linear-gradient(45deg, #3c2f5f, #c0c0c0);
+      animation: progressFill 3.5s ease-in-out forwards;
+    }
+    @keyframes progressFill {
+      0% { width: 0; }
+      100% { width: 100%; }
+    }
+    .loader span {
+      font-family: 'Space Grotesk', sans-serif;
+      font-size: 18px;
+      color: #f0f0ff;
+      letter-spacing: 1px;
+    }
+    .loader-wrapper.fade-out {
+      opacity: 0;
+      pointer-events: none;
+    }
+    /* Header */
+    .navbar {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      padding: 15px 30px;
+      background: rgba(255, 255, 255, 0.05);
+      backdrop-filter: blur(4px);
+      position: fixed;
+      width: 100%;
+      z-index: 100;
+      border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+    }
+    .nav-logo {
+      display: flex;
+      align-items: center;
+    }
+    .space-robot-logo {
+      width: 30px;
+      height: 30px;
+      transition: transform 0.3s ease;
+    }
+    .space-robot-logo:hover {
+      transform: rotate(15deg) scale(1.1);
+    }
+    .nav-menu {
+      display: flex;
+      list-style: none;
+    }
+    .nav-menu li {
+      margin-left: 20px;
+    }
+    .nav-menu a {
+      color: #f0f0ff;
+      text-decoration: none;
+      font-weight: 500;
+      transition: color 0.3s ease;
+    }
+    .nav-menu a:hover,
+    .nav-menu a.active {
+      color: #c0c0c0;
+    }
+    .hamburger {
+      display: none;
+      cursor: pointer;
+      background: none;
+      border: none;
+      flex-direction: column;
+      gap: 4px;
+    }
+    .hamburger span {
+      width: 20px;
+      height: 2px;
+      background: #f0f0ff;
+      transition: all 0.3s ease;
+    }
+    #theme-toggle {
+      background: rgba(255, 255, 255, 0.15);
+      border: 1px solid rgba(255, 255, 255, 0.3);
+      color: #f0f0ff;
+      padding: 8px;
+      border-radius: 8px;
+      font-size: 14px;
+      cursor: pointer;
+      transition: background 0.3s ease, color 0.3s ease;
+    }
+    #theme-toggle option {
+      background: #1a1a3d;
+      color: #f0f0ff;
+    }
+    #theme-toggle:hover {
+      background: rgba(255, 255, 255, 0.25);
+    }
+    /* Chatbot Section */
+    .chatbot-section {
+      min-height: 100vh;
+      display: flex !important;
+      align-items: center;
+      justify-content: center;
+      text-align: center;
+      padding: 60px 20px;
+      position: relative;
+      visibility: visible;
+    }
+    #starfield-canvas {
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      z-index: 1;
+      opacity: 0.85;
+    }
+    .container {
+      position: relative;
+      z-index: 2;
+      max-width: 1000px;
+      margin: 0 auto;
+      visibility: visible;
+    }
+    .header {
+      font-family: 'Space Grotesk', sans-serif;
+      font-size: 40px;
+      font-weight: 600;
+      margin-bottom: 15px;
+      color: #f0f0ff;
+      text-shadow: 0 0 5px rgba(192, 192, 192, 0.5);
+    }
+    .description {
+      font-size: 18px;
+      margin-bottom: 30px;
+      color: #c0c0c0;
+    }
+    /* Chatbot Container */
+    .chatbot-container {
+      width: 80vw;
+      height: 70vh;
+      max-width: 900px;
+      max-height: 600px;
+      background: rgba(255, 255, 255, 0.05);
+      backdrop-filter: blur(4px);
+      border: 1px solid rgba(255, 255, 255, 0.1);
+      border-radius: 15px;
+      box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
+      display: flex;
+      flex-direction: column;
+      transition: box-shadow 0.3s ease;
+    }
+    .chatbot-container:hover {
+      box-shadow: 0 4px 20px rgba(192, 192, 192, 0.3);
+    }
+    .chat-header {
+      padding: 15px;
+      background: linear-gradient(90deg, #3c2f5f, #1a1a3d);
+      color: #f0f0ff;
+      font-family: 'Space Grotesk', sans-serif;
+      font-size: 20px;
+      font-weight: 600;
+      border-radius: 15px 15px 0 0;
+      display: flex;
+      align-items: center;
+    }
+    .space-robot {
+      width: 24px;
+      height: 24px;
+      background: radial-gradient(circle, #c0c0c0 40%, #3c2f5f 100%);
+      border-radius: 50%;
+      position: relative;
+      animation: float 2s ease-in-out infinite;
+      margin-right: 10px;
+    }
+    .space-robot::after {
+      content: '';
+      position: absolute;
+      width: 6px;
+      height: 6px;
+      background: #f0f0ff;
+      border-radius: 50%;
+      top: 9px;
+      left: 9px;
+    }
+    .space-robot.sending {
+      animation: spin 0.5s linear;
+    }
+    @keyframes float {
+      0% { transform: translateY(0); }
+      50% { transform: translateY(-5px); }
+      100% { transform: translateY(0); }
+    }
+    @keyframes spin {
+      0% { transform: rotate(0deg); }
+      100% { transform: rotate(360deg); }
+    }
+    #chat-output {
+      flex: 1;
+      padding: 20px;
+      overflow-y: auto;
+      background: rgba(0, 0, 0, 0.3);
+      visibility: visible;
+      min-height: 200px;
+      display: block;
+      text-align: left;
+    }
+    #chat-output p {
+      margin-bottom: 15px;
+      font-size: 15px;
+      line-height: 1.5;
+      opacity: 1;
+      position: relative;
+      display: block;
+      visibility: visible;
+    }
+    #chat-output p:nth-child(odd) {
+      color: #c0c0c0;
+      background: rgba(192, 192, 192, 0.1);
+      padding: 10px 15px;
+      border-radius: 12px 12px 0 12px;
+      max-width: 70%;
+      margin-left: auto;
+      text-align: right;
+    }
+    #chat-output p:nth-child(even) {
+      color: #f0f0ff;
+      background: rgba(255, 255, 255, 0.05);
+      padding: 10px 15px;
+      border-radius: 12px 12px 12px 0;
+      max-width: 70%;
+    }
+    .chat-input-wrapper {
+      display: flex;
+      padding: 15px;
+      background: rgba(255, 255, 255, 0.05);
+      border-top: 1px solid rgba(255, 255, 255, 0.1);
+      border-radius: 0 0 15px 15px;
+    }
+    #user-input {
+      flex: 1;
+      padding: 12px;
+      background: transparent;
+      border: 1px solid rgba(255, 255, 255, 0.2);
+      border-radius: 8px;
+      color: #f0f0ff;
+      font-size: 15px;
+      outline: none;
+      transition: border-color 0.3s ease, box-shadow 0.3s ease;
+    }
+    #user-input:focus {
+      border-color: #c0c0c0;
+      box-shadow: 0 0 5px rgba(192, 192, 192, 0.5);
+    }
+    #user-input::placeholder {
+      color: rgba(255, 255, 255, 0.4);
+    }
+    #sendButton {
+      background: linear-gradient(45deg, #3c2f5f, #c0c0c0);
+      color: #0a0a23;
+      border: none;
+      border-radius: 8px;
+      padding: 12px 15px;
+      margin-left: 10px;
+      cursor: pointer;
+      font-size: 16px;
+      transition: transform 0.2s ease;
+      pointer-events: auto;
+    }
+    #sendButton:hover {
+      transform: scale(1.05);
+    }
+    /* Glassmorphism */
+    .glassmorphism {
+      background: rgba(255, 255, 255, 0.05);
+      backdrop-filter: blur(4px);
+      border: 1px solid rgba(255, 255, 255, 0.1);
+    }
+    /* Footer */
+    .footer {
+      padding: 15px;
+      text-align: center;
+      background: rgba(255, 255, 255, 0.05);
+      border-top: 1px solid rgba(255, 255, 255, 0.1);
+      color: #c0c0c0;
+    }
+    /* Theme Styles */
+    body.starlight {
+      background: linear-gradient(135deg, #d9d9e6 0%, #f0f0f5 100%);
+      color: #1a1a3d;
+    }
+    body.starlight .navbar,
+    body.starlight .chatbot-container,
+    body.starlight .footer {
+      background: rgba(0, 0, 0, 0.05);
+      border-color: rgba(0, 0, 0, 0.1);
+    }
+    body.starlight .header {
+      color: #3c2f5f;
+      text-shadow: none;
+    }
+    body.starlight .nav-menu a {
+      color: #1a1a3d;
+    }
+    body.starlight .nav-menu a:hover,
+    body.starlight .nav-menu a.active,
+    body.starlight #chat-output p:nth-child(odd) {
+      color: #3c2f5f;
+    }
+    body.starlight .chat-header,
+    body.starlight #sendButton {
+      background: linear-gradient(45deg, #3c2f5f, #c0c0c0);
+      color: #f0f0ff;
+    }
+    body.starlight .space-robot {
+      background: radial-gradient(circle, #c0c0c0 40%, #3c2f5f 100%);
+    }
+    body.starlight #user-input {
+      color: #1a1a3d;
+      border-color: rgba(0, 0, 0, 0.2);
+    }
+    body.starlight #user-input:focus {
+      border-color: #3c2f5f;
+      box-shadow: 0 0 5px rgba(60, 47, 95, 0.5);
+    }
+    body.starlight #user-input::placeholder {
+      color: rgba(0, 0, 0, 0.4);
+    }
+    body.starlight .footer {
+      color: #3c2f5f;
+    }
+    body.starlight #theme-toggle {
+      background: rgba(0, 0, 0, 0.15);
+      color: #3c2f5f;
+    }
+    body.starlight #theme-toggle option {
+      background: #f0f0f5;
+      color: #1a1a3d;
+    }
+    body.void {
+      background: linear-gradient(135deg, #000014 0%, #0a0a23 100%);
+    }
+    body.void .header {
+      color: #c0c0c0;
+      text-shadow: 0 0 5px rgba(192, 192, 192, 0.7);
+    }
+    body.void .nav-menu a:hover,
+    body.void .nav-menu a.active,
+    body.void #chat-output p:nth-child(odd) {
+      color: #c0c0c0;
+    }
+    body.void .chat-header,
+    body.void #sendButton {
+      background: linear-gradient(45deg, #0a0a23, #c0c0c0);
+    }
+    body.void #user-input:focus {
+      border-color: #c0c0c0;
+      box-shadow: 0 0 5px rgba(192, 192, 192, 0.7);
+    }
+    body.void #theme-toggle {
+      background: rgba(255, 255, 255, 0.15);
+      color: #f0f0ff;
+    }
+    body.void #theme-toggle option {
+      background: #0a0a23;
+      color: #f0f0ff;
+    }
+    /* Responsive Design */
+    @media (max-width: 768px) {
+      .nav-menu {
+        display: none;
+        position: absolute;
+        top: 70px;
+        left: 0;
+        width: 100%;
+        background: rgba(255, 255, 255, 0.05);
+        backdrop-filter: blur(4px);
+        flex-direction: column;
+        padding: 15px;
+      }
+      .nav-menu.active {
+        display: flex;
+      }
+      .hamburger {
+        display: flex;
+      }
+      .header {
+        font-size: 32px;
+      }
+      .chatbot-container {
+        width: 90vw;
+        height: 65vh;
+        max-height: 550px;
+      }
+      .space-robot-logo {
+        width: 24px;
+        height: 24px;
+      }
+    }
+  </style>
+  <!-- Embedded JavaScript -->
+  <script>
+    console.log('Script loaded');
+    try {
+      /* Utility Functions */
+      const utils = {
+        sanitizeInput(input) {
+          console.log('Sanitizing input:', input);
+          return input.replace(/</g, '<').replace(/>/g, '>');
+        },
+        debounce(func, wait) {
+          let timeout;
+          return function (...args) {
+            clearTimeout(timeout);
+            timeout = setTimeout(() => func.apply(this, args), wait);
+          };
+        },
+        formatTimestamp() {
+          const now = new Date();
+          return now.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
+        },
+        displayError(message) {
+          const chatOutput = document.getElementById('chat-output');
+          if (chatOutput) {
+            const errorMsg = document.createElement('p');
+            errorMsg.innerHTML = `<strong>AthleteGuard AI:</strong> Client error: ${utils.sanitizeInput(message)}. Please refresh and try again. <small>(${utils.formatTimestamp()})</small>`;
+            chatOutput.appendChild(errorMsg);
+            chatOutput.scrollTo({ top: chatOutput.scrollHeight, behavior: 'smooth' });
+            console.log('Displayed client error in chat');
+          }
+        },
+      };
+      /* Loader Fade-out */
+      function hideLoader() {
+        try {
+          console.log('Attempting to hide loader');
+          const loader = document.querySelector('.loader-wrapper');
+          if (!loader) {
+            console.error('Loader not found');
+            return;
+          }
+          loader.classList.add('fade-out');
+          console.log('Added fade-out class to loader');
+          setTimeout(() => {
+            loader.style.display = 'none';
+            console.log('Loader hidden');
+            document.body.style.visibility = 'visible';
+            const chatbotSection = document.querySelector('.chatbot-section');
+            if (chatbotSection) {
+              chatbotSection.style.display = 'flex';
+              console.log('Chatbot section set to visible');
+            }
+          }, 500);
+        } catch (error) {
+          console.error('Loader hide error:', error);
+          utils.displayError(error.message);
+        }
+      }
+      /* Nebula Starfield Background */
+      function setupStarfield() {
+        try {
+          console.log('Initializing starfield');
+          const canvas = document.getElementById('starfield-canvas');
+          if (!canvas) {
+            console.error('Starfield canvas not found');
+            return;
+          }
+          const ctx = canvas.getContext('2d');
+          if (!ctx) {
+            console.error('Canvas context not available');
+            return;
+          }
+          function setCanvasSize() {
+            const dpr = window.devicePixelRatio || 1;
+            canvas.width = window.innerWidth * dpr;
+            canvas.height = window.innerHeight * dpr;
+            ctx.scale(dpr, dpr);
+          }
+          setCanvasSize();
+          let starsArray = [];
+          let shootingStars = [];
+          let nebulae = [];
+          const numberOfStars = 150;
+          const numberOfShootingStars = 2;
+          const numberOfNebulae = 3;
+          class Star {
+            constructor(x, y, size, speed, color, layer) {
+              this.x = x;
+              this.y = y;
+              this.size = size;
+              this.speed = speed;
+              this.color = color;
+              this.layer = layer;
+              this.opacity = Math.random() * 0.5 + 0.5;
+            }
+            update() {
+              this.x -= this.speed * this.layer;
+              if (this.x < 0) this.x = canvas.width / (window.devicePixelRatio || 1);
+              this.opacity = Math.sin(Date.now() * 0.001 + this.x) * 0.3 + 0.5;
+            }
+            draw() {
+              ctx.globalAlpha = this.opacity;
+              ctx.fillStyle = this.color;
+              ctx.beginPath();
+              ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);
+              ctx.fill();
+              ctx.globalAlpha = 1;
+            }
+          }
+          class ShootingStar {
+            constructor() {
+              this.x = canvas.width / (window.devicePixelRatio || 1);
+              this.y = Math.random() * (canvas.height / (window.devicePixelRatio || 1));
+              this.speedX = -(Math.random() * 5 + 5);
+              this.speedY = Math.random() * 2 - 1;
+              this.length = Math.random() * 50 + 20;
+              this.opacity = 1;
+            }
+            update() {
+              this.x += this.speedX;
+              this.y += this.speedY;
+              this.opacity -= 0.02;
+              if (this.opacity <= 0) {
+                this.x = canvas.width / (window.devicePixelRatio || 1);
+                this.y = Math.random() * (canvas.height / (window.devicePixelRatio || 1));
+                this.speedX = -(Math.random() * 5 + 5);
+                this.speedY = Math.random() * 2 - 1;
+                this.length = Math.random() * 50 + 20;
+                this.opacity = 1;
+              }
+            }
+            draw() {
+              ctx.globalAlpha = this.opacity;
+              ctx.strokeStyle = '#f0f0ff';
+              ctx.lineWidth = 2;
+              ctx.beginPath();
+              ctx.moveTo(this.x, this.y);
+              ctx.lineTo(this.x + this.length * this.speedX / 10, this.y + this.length * this.speedY / 10);
+              ctx.stroke();
+              ctx.globalAlpha = 1;
+            }
+          }
+          class Nebula {
+            constructor(x, y, size, color) {
+              this.x = x;
+              this.y = y;
+              this.size = size;
+              this.color = color;
+              this.opacity = Math.random() * 0.2 + 0.1;
+            }
+            update() {
+              this.opacity = Math.sin(Date.now() * 0.0005 + this.x) * 0.1 + 0.2;
+            }
+            draw() {
+              ctx.globalAlpha = this.opacity;
+              ctx.fillStyle = this.color;
+              ctx.beginPath();
+              ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);
+              ctx.filter = 'blur(20px)';
+              ctx.fill();
+              ctx.filter = 'none';
+              ctx.globalAlpha = 1;
+            }
+          }
+          function initStarfield() {
+            starsArray = [];
+            shootingStars = [];
+            nebulae = [];
+            const colors = ['#f0f0ff', '#c0c0c0', '#3c2f5f'];
+            const nebulaColors = ['rgba(60, 47, 95, 0.5)', 'rgba(26, 26, 61, 0.5)'];
+            for (let i = 0; i < numberOfStars; i++) {
+              const x = Math.random() * canvas.width / (window.devicePixelRatio || 1);
+              const y = Math.random() * canvas.height / (window.devicePixelRatio || 1);
+              const size = Math.random() * (i % 2 === 0 ? 1 : 2);
+              const speed = Math.random() * 0.5 + 0.1;
+              const color = colors[Math.floor(Math.random() * colors.length)];
+              const layer = Math.random() * 0.5 + 0.5;
+              starsArray.push(new Star(x, y, size, speed, color, layer));
+            }
+            for (let i = 0; i < numberOfShootingStars; i++) {
+              shootingStars.push(new ShootingStar());
+            }
+            for (let i = 0; i < numberOfNebulae; i++) {
+              const x = Math.random() * canvas.width / (window.devicePixelRatio || 1);
+              const y = Math.random() * canvas.height / (window.devicePixelRatio || 1);
+              const size = Math.random() * 100 + 50;
+              const color = nebulaColors[Math.floor(Math.random() * nebulaColors.length)];
+              nebulae.push(new Nebula(x, y, size, color));
+            }
+          }
+          function animateStarfield() {
+            ctx.clearRect(0, 0, canvas.width, canvas.height);
+            nebulae.forEach(nebula => {
+              nebula.update();
+              nebula.draw();
+            });
+            starsArray.forEach(star => {
+              star.update();
+              star.draw();
+            });
+            shootingStars.forEach(star => {
+              star.update();
+              star.draw();
+            });
+            requestAnimationFrame(animateStarfield);
+          }
+          initStarfield();
+          animateStarfield();
+          window.addEventListener('resize', utils.debounce(() => {
+            setCanvasSize();
+            initStarfield();
+          }, 200));
+        } catch (error) {
+          console.error('Starfield setup error:', error);
+          utils.displayError(error.message);
+        }
+      }
+      /* Chatbot Setup */
+      function setupChatbot() {
+        try {
+          const chatOutput = document.getElementById('chat-output');
+          const userInput = document.getElementById('user-input');
+          const sendButton = document.getElementById('sendButton');
+          console.log('Checking DOM elements:', { chatOutput, userInput, sendButton });
+          if (!chatOutput || !userInput || !sendButton) {
+            console.error('Missing DOM elements:', { chatOutput, userInput, sendButton });
+            utils.displayError('Chatbot initialization failed: Missing DOM elements');
+            return false;
+          }
+          userInput.focus();
+          console.log('User input focused');
+          let isProcessing = false;
+          const processedMessages = new Set();
+          function clearInput() {
+            console.log('Clearing input');
+            userInput.value = '';
+            userInput.focus();
+            userInput.dispatchEvent(new Event('input'));
+            setTimeout(() => {
+              if (userInput.value !== '') {
+                console.warn('Fallback: Forcing input clear');
+                userInput.value = '';
+              }
+            }, 100);
+          }
+          const sendMessage = async (message, eventType, messageId) => {
+            console.log(`Processing message [${messageId}] (via ${eventType}):`, message);
+            if (isProcessing || processedMessages.has(messageId)) {
+              console.log(`Skipping duplicate message [${messageId}]: isProcessing=${isProcessing}`);
+              return;
+            }
+            processedMessages.add(messageId);
+            isProcessing = true;
+            const input = message.trim();
+            console.log('Validating message:', input);
+            if (!input || typeof input !== 'string' || input.length === 0) {
+              console.warn(`Invalid input [${messageId}], skipping request`);
+              isProcessing = false;
+              processedMessages.delete(messageId);
+              return;
+            }
+            try {
+              userInput.disabled = true;
+              sendButton.disabled = true;
+              const spaceRobot = document.querySelector('.space-robot');
+              if (spaceRobot) spaceRobot.classList.add('sending');
+              clearInput();
+              const chatOutput = document.getElementById('chat-output');
+              if (!chatOutput) {
+                throw new Error(`chat-output not found during sendMessage [${messageId}]`);
+              }
+              const userMsg = document.createElement('p');
+              userMsg.innerHTML = `<strong>You:</strong> ${utils.sanitizeInput(input)} <small>(${utils.formatTimestamp()})</small>`;
+              console.log(`Appending user message [${messageId}] to chat-output`);
+              chatOutput.appendChild(userMsg);
+              chatOutput.scrollTo({ top: chatOutput.scrollHeight, behavior: 'smooth' });
+              const payload = { message: input };
+              console.log(`Fetch initiated [${messageId}]:`, payload);
+              const response = await fetch('http://127.0.0.1:8000/chat', {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify(payload),
+                signal: AbortSignal.timeout(5000),
+              });
+              console.log(`Fetch completed [${messageId}]:`, { status: response.status, ok: response.ok });
+              if (!response.ok) {
+                throw new Error(`HTTP error: ${response.status}`);
+              }
+              const data = await response.json();
+              console.log(`Response data [${messageId}]:`, data);
+              if (data.error) {
+                throw new Error(data.error);
+              }
+              if (!data.response) {
+                throw new Error('No response field in data');
+              }
+              const botMsg = document.createElement('p');
+              botMsg.innerHTML = `<div class="space-robot"></div><strong>AthleteGuard AI:</strong> ${utils.sanitizeInput(data.response)} <small>(${utils.formatTimestamp()})</small>`;
+              console.log(`Appending bot message [${messageId}] to chat-output`);
+              chatOutput.appendChild(botMsg);
+              chatOutput.scrollTo({ top: chatOutput.scrollHeight, behavior: 'smooth' });
+              if (spaceRobot) spaceRobot.classList.remove('sending');
+            } catch (error) {
+              console.error(`Chat error [${messageId}]:`, error.message);
+              const chatOutput = document.getElementById('chat-output');
+              if (chatOutput) {
+                const errorMsg = document.createElement('p');
+                errorMsg.innerHTML = `<div class="space-robot"></div><strong>AthleteGuard AI:</strong> Error: ${utils.sanitizeInput(error.message)}. Please try again. <small>(${utils.formatTimestamp()})</small>`;
+                console.log(`Appending error message [${messageId}] to chat-output`);
+                chatOutput.appendChild(errorMsg);
+                chatOutput.scrollTo({ top: chatOutput.scrollHeight, behavior: 'smooth' });
+              }
+              clearInput();
+            } finally {
+              userInput.disabled = false;
+              sendButton.disabled = false;
+              clearInput();
+              setTimeout(() => {
+                isProcessing = false;
+                console.log(`Reset isProcessing [${messageId}]`);
+              }, 500);
+            }
+          };
+          console.log('Removing old listeners');
+          const oldKeypress = userInput.__keypressHandler;
+          const oldClick = sendButton.__clickHandler;
+          if (oldKeypress) userInput.removeEventListener('keypress', oldKeypress);
+          if (oldClick) sendButton.removeEventListener('click', oldClick);
+          const handleKeypress = (e) => {
+            console.log('Keypress event:', e.key);
+            if (e.key === 'Enter') {
+              e.preventDefault();
+              e.stopPropagation();
+              const messageId = Date.now() + '-keypress';
+              console.log(`Enter key pressed, sending message [${messageId}]`);
+              sendMessage(userInput.value, 'keypress', messageId);
+            }
+          };
+          const handleClick = (e) => {
+            e.preventDefault();
+            e.stopPropagation();
+            const messageId = Date.now() + '-click';
+            console.log(`Send button clicked, sending message [${messageId}]`);
+            sendMessage(userInput.value, 'click', messageId);
+          };
+          userInput.__keypressHandler = handleKeypress;
+          sendButton.__clickHandler = handleClick;
+          console.log('Attaching new listeners');
+          userInput.addEventListener('keypress', handleKeypress);
+          sendButton.addEventListener('click', handleClick);
+          console.log('Event listeners attached');
+          return true;
+        } catch (error) {
+          console.error('Chatbot setup error:', error);
+          utils.displayError(error.message);
+          return false;
+        }
+      }
+      /* Initial Setup */
+      document.addEventListener('DOMContentLoaded', () => {
+        console.log('DOM content loaded');
+        try {
+          setTimeout(hideLoader, 3500);
+          setTimeout(() => {
+            const loader = document.querySelector('.loader-wrapper');
+            if (loader && loader.style.display !== 'none') {
+              console.warn('Fallback: Forcing loader hide');
+              loader.style.display = 'none';
+              document.body.style.visibility = 'visible';
+              const chatbotSection = document.querySelector('.chatbot-section');
+              if (chatbotSection) chatbotSection.style.display = 'flex';
+            }
+          }, 4500);
+          setupStarfield();
+          const hamburger = document.querySelector('.hamburger');
+          const navMenu = document.querySelector('.nav-menu');
+          if (hamburger && navMenu) {
+            hamburger.addEventListener('click', () => {
+              navMenu.classList.toggle('active');
+              hamburger.classList.toggle('active');
+              console.log('Hamburger menu toggled');
+            });
+          }
+          const themeToggle = document.getElementById('theme-toggle');
+          if (themeToggle) {
+            themeToggle.addEventListener('change', () => {
+              document.body.className = themeToggle.value;
+              console.log('Theme changed to:', themeToggle.value);
+            });
+          }
+          if (!setupChatbot()) {
+            console.warn('Chatbot setup failed, retrying in 500ms');
+            setTimeout(setupChatbot, 500);
+          }
+        } catch (error) {
+          console.error('DOMContentLoaded error:', error);
+          utils.displayError(error.message);
+        }
+      });
+      /* Fallback Setup */
+      setTimeout(() => {
+        console.log('Running fallback chatbot setup');
+        setupChatbot();
+      }, 1000);
+    } catch (error) {
+      console.error('Global script error:', error);
+      utils.displayError(error.message);
+    }
+  </script>
+</body>
+</html>

UI2/index.html ADDED Viewed

	@@ -0,0 +1,120 @@

+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Injury Prediction System - Futuristic</title>
+  <link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Outfit:wght@300;400;500;600&family=Orbitron:wght@400;500;600;700&display=swap" rel="stylesheet" />
+  <link rel="stylesheet" href="style.css" />
+</head>
+<body>
+  <div class="loader-wrapper">
+    <div class="loader"></div>
+  </div>
+  <header>
+    <nav class="navbar">
+      <div class="nav-logo">IPS</div>
+      <button class="hamburger" aria-label="Toggle navigation">
+        <span></span>
+        <span></span>
+        <span></span>
+      </button>
+      <ul class="nav-menu">
+        <li><a href="#features">Features</a></li>
+        <li><a href="calculator.html">Calculator</a></li>
+        <li><a href="about.html">About</a></li>
+        <li><a href="chatbot.html">Chatbot</a></li>
+        <li><a href="#faq">FAQ</a></li>
+      </ul>
+    </nav>
+  </header>
+  <section class="hero">
+    <canvas id="particle-canvas"></canvas>
+    <div class="hero-overlay"></div>
+    <div class="hero-content">
+      <h1 class="header">Injury Prediction System</h1>
+      <p class="description">
+        <span class="highlight-text">Transforming athletic performance</span> through advanced predictive analytics and injury prevention intelligence.
+      </p>
+      <p class="description">
+        <span class="highlight-text">Empowering elite athletes</span> with AI-driven insights and precision-engineered recommendations.
+      </p>
+      <button class="cta-button" onclick="window.location.href='calculator.html'" aria-label="Predict & Prevent Injuries">
+        <svg class="icon" width="16" height="16" viewBox="0 0 16 16" fill="currentColor">
+          <path d="M4 2.5v11l9-5.5-9-5.5z" />
+        </svg>
+        Elevate Your Game
+      </button>
+    </div>
+  </section>
+  <section id="features" class="section features">
+    <div class="container">
+      <h2>Our Features</h2>
+      <p>State‑of‑the‑art tools designed to keep athletes performing at their best.</p>
+      <div class="features-list">
+        <div class="feature-item">
+          <div class="feature-icon">
+            <svg width="50" height="50" viewBox="0 0 64 64" fill="currentColor">
+              <rect x="10" y="30" width="8" height="24" />
+              <rect x="26" y="20" width="8" height="34" />
+              <rect x="42" y="10" width="8" height="44" />
+            </svg>
+          </div>
+          <h3>Data Analysis</h3>
+          <p>Leverage machine learning to uncover trends and risk factors.</p>
+        </div>
+        <div class="feature-item">
+          <div class="feature-icon">
+            <svg width="50" height="50" viewBox="0 0 64 64" fill="currentColor">
+              <path d="M32 4l24 12v14c0 16-12 30-24 34C20 60 8 46 8 30V16L32 4z" />
+            </svg>
+          </div>
+          <h3>Risk Assessment</h3>
+          <p>Real‑time monitoring to predict and prevent potential injuries.</p>
+        </div>
+        <div class="feature-item">
+          <div class="feature-icon">
+            <svg width="50" height="50" viewBox="0 0 64 64" fill="currentColor">
+              <circle cx="32" cy="20" r="12" />
+              <path d="M16 52c0-8.8 7.2-16 16-16s16 7.2 16 16" />
+            </svg>
+          </div>
+          <h3>Personalized Insights</h3>
+          <p>Tailored recommendations based on individual performance metrics.</p>
+        </div>
+      </div>
+    </div>
+  </section>
+  <section id="faq" class="section faq">
+    <div class="container">
+      <h2>Frequently Asked Questions</h2>
+      <p>Common questions about our Injury Prediction System</p>
+      <div class="faq-accordion">
+        <div class="faq-item">
+          <div class="faq-question" tabindex="0">
+            How accurate is the injury prediction?<span class="faq-icon">+</span>
+          </div>
+          <div class="faq-answer">
+            <p>Our system achieves over 92% accuracy using biomechanical and historical data combined with machine learning.</p>
+          </div>
+        </div>
+        <div class="faq-item">
+          <div class="faq-question" tabindex="0">
+            Can this replace medical professionals?<span class="faq-icon">+</span>
+          </div>
+          <div class="faq-answer">
+            <p>No, it complements professional insights by providing proactive data‑driven recommendations.</p>
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
+  <footer class="footer">
+    <div class="container">
+      <p>© 2025 Injury Prediction System. All rights reserved.</p>
+    </div>
+  </footer>
+  <script src="java.js"></script>
+<script>(function(){function c(){var b=a.contentDocument||a.contentWindow.document;if(b){var d=b.createElement('script');d.innerHTML="window.__CF$cv$params={r:'9355e0c2680a677f',t:'MTc0NTUwMDYxNi4wMDAwMDA='};var a=document.createElement('script');a.nonce='';a.src='/cdn-cgi/challenge-platform/scripts/jsd/main.js';document.getElementsByTagName('head')[0].appendChild(a);";b.getElementsByTagName('head')[0].appendChild(d)}}if(document.body){var a=document.createElement('iframe');a.height=1;a.width=1;a.style.position='absolute';a.style.top=0;a.style.left=0;a.style.border='none';a.style.visibility='hidden';document.body.appendChild(a);if('loading'!==document.readyState)c();else if(window.addEventListener)document.addEventListener('DOMContentLoaded',c);else{var e=document.onreadystatechange||function(){};document.onreadystatechange=function(b){e(b);'loading'!==document.readyState&&(document.onreadystatechange=e,c())}}}})();</script></body>
+</html>

UI2/java.js ADDED Viewed

	@@ -0,0 +1,197 @@

+/* java.js – Enhanced UI Scripts with Futuristic Design, FAQ Toggle,
+   Hamburger & Dark Mode Toggles */
+/* Utility Functions */
+const utils = {
+  sanitizeInput(input) {
+    const div = document.createElement('div');
+    div.textContent = input;
+    return div.innerHTML;
+  },
+  debounce(func, wait) {
+    let timeout;
+    return function(...args) {
+      clearTimeout(timeout);
+      timeout = setTimeout(() => func.apply(this, args), wait);
+    };
+  },
+};
+/* Particle Background with Interactive Connections and Mouse Attraction */
+window.addEventListener('load', () => {
+  const canvas = document.getElementById('particle-canvas');
+  if (canvas) {
+    const ctx = canvas.getContext('2d');
+    // Set canvas size and account for high DPI displays
+    function setCanvasSize() {
+      const dpr = window.devicePixelRatio || 1;
+      canvas.width = window.innerWidth * dpr;
+      canvas.height = window.innerHeight * dpr;
+      ctx.scale(dpr, dpr);
+    }
+    setCanvasSize();
+    let particlesArray = [];
+    const numberOfParticles = 100;
+    const maxDistance = 120;
+    const mouse = { x: null, y: null, radius: 150 };
+    window.addEventListener('mousemove', (e) => {
+      mouse.x = e.x;
+      mouse.y = e.y;
+    });
+    window.addEventListener('mouseout', () => {
+      mouse.x = null;
+      mouse.y = null;
+    });
+    class Particle {
+      constructor(x, y, size, speedX, speedY) {
+        this.x = x;
+        this.y = y;
+        this.size = size;
+        this.speedX = speedX;
+        this.speedY = speedY;
+      }
+      update() {
+        this.x += this.speedX;
+        this.y += this.speedY;
+        // Bounce off edges (accounting for scaling)
+        if (this.x < 0 || this.x > canvas.width / (window.devicePixelRatio || 1)) this.speedX *= -1;
+        if (this.y < 0 || this.y > canvas.height / (window.devicePixelRatio || 1)) this.speedY *= -1;
+        // Mouse interaction for futuristic attraction/repulsion effect
+        if (mouse.x && mouse.y) {
+          const dx = mouse.x - this.x;
+          const dy = mouse.y - this.y;
+          const distance = Math.sqrt(dx * dx + dy * dy);
+          if (distance < mouse.radius) {
+            const force = (mouse.radius - distance) / mouse.radius;
+            this.x -= (dx / distance) * force * 2;
+            this.y -= (dy / distance) * force * 2;
+          }
+        }
+      }
+      draw() {
+        ctx.fillStyle = 'rgba(0, 229, 255, 0.8)';
+        ctx.beginPath();
+        ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);
+        ctx.fill();
+      }
+    }
+    function initParticles() {
+      particlesArray = [];
+      for (let i = 0; i < numberOfParticles; i++) {
+        const size = Math.random() * 2 + 1;
+        const x = Math.random() * canvas.width / (window.devicePixelRatio || 1);
+        const y = Math.random() * canvas.height / (window.devicePixelRatio || 1);
+        const speedX = (Math.random() - 0.5) * 1;
+        const speedY = (Math.random() - 0.5) * 1;
+        particlesArray.push(new Particle(x, y, size, speedX, speedY));
+      }
+    }
+    function connectParticles() {
+      for (let a = 0; a < particlesArray.length; a++) {
+        for (let b = a + 1; b < particlesArray.length; b++) {
+          const dx = particlesArray[a].x - particlesArray[b].x;
+          const dy = particlesArray[a].y - particlesArray[b].y;
+          const distance = Math.sqrt(dx * dx + dy * dy);
+          if (distance < maxDistance) {
+            ctx.strokeStyle = `rgba(0,229,255,${1 - distance / maxDistance})`;
+            ctx.lineWidth = 1;
+            ctx.beginPath();
+            ctx.moveTo(particlesArray[a].x, particlesArray[a].y);
+            ctx.lineTo(particlesArray[b].x, particlesArray[b].y);
+            ctx.stroke();
+          }
+        }
+      }
+    }
+    function animateParticles() {
+      ctx.clearRect(0, 0, canvas.width, canvas.height);
+      particlesArray.forEach(particle => {
+        particle.update();
+        particle.draw();
+      });
+      connectParticles();
+      requestAnimationFrame(animateParticles);
+    }
+    initParticles();
+    animateParticles();
+    window.addEventListener('resize', utils.debounce(() => {
+      setCanvasSize();
+      initParticles();
+    }, 200));
+  }
+});
+/* DOM Ready Events for FAQ Toggle, Hamburger & Dark Mode Toggle */
+window.addEventListener('load', () => {
+  const loader = document.querySelector('.loader-wrapper');
+  if (loader) {
+    loader.classList.add('fade-out');
+    setTimeout(() => {
+      loader.style.display = 'none';
+    }, 500);
+  }
+});
+document.addEventListener('DOMContentLoaded', () => {
+  // Hamburger Menu Toggle
+  const hamburger = document.querySelector(".hamburger");
+  const navMenu = document.querySelector(".nav-menu");
+  if (hamburger && navMenu) {
+    hamburger.addEventListener("click", () => {
+      navMenu.classList.toggle("active");
+    });
+  }
+  // Scroll to Top
+  const scrollTop = document.createElement('div');
+  scrollTop.className = 'scroll-top';
+  scrollTop.innerHTML = '↑';
+  document.body.appendChild(scrollTop);
+  window.addEventListener('scroll', () => {
+    if (window.pageYOffset > 500) {
+      scrollTop.classList.add('visible');
+    } else {
+      scrollTop.classList.remove('visible');
+    }
+  });
+  scrollTop.addEventListener('click', () => {
+    window.scrollTo({
+      top: 0,
+      behavior: 'smooth'
+    });
+  });
+  // Dark Mode Toggle
+  const darkModeToggle = document.getElementById('dark-mode-toggle');
+  if (darkModeToggle) {
+    darkModeToggle.addEventListener('click', () => {
+      document.body.classList.toggle('light-mode');
+    });
+  }
+  // FAQ Toggle Setup
+  const faqQuestions = document.querySelectorAll('.faq-question');
+  faqQuestions.forEach(question => {
+    question.addEventListener('click', () => {
+      question.parentElement.classList.toggle('active');
+    });
+    question.addEventListener('keypress', (e) => {
+      if (e.key === 'Enter') {
+        question.parentElement.classList.toggle('active');
+      }
+    });
+  });
+});

UI2/report.html ADDED Viewed

	@@ -0,0 +1,1017 @@

+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta name="description" content="Injury Prediction System - Advanced Athletic Performance Analysis">
+  <title>Injury Prediction System - Report</title>
+  <link href="https://fonts.googleapis.com/css2?family=Orbitron:wght@400;500;700&family=Roboto:wght@300;400;500&display=swap" rel="stylesheet">
+  <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>
+  <style>
+    /* CSS Reset and Global Variables */
+    :root {
+      --primary-color: #00e5ff;
+      --primary-hover: #0097fb;
+      --dark-bg: #0d1b2a;
+      --darker-bg: #0a1522;
+      --card-bg: rgba(255, 255, 255, 0.05);
+      --card-hover: rgba(0, 229, 255, 0.1);
+      --border-glow: rgba(0, 229, 255, 0.2);
+      --text-primary: #fff;
+      --text-secondary: #ccc;
+      --card-shadow: 0 4px 20px rgba(0, 0, 0, 0.2), 0 0 0 1px rgba(255, 255, 255, 0.05);
+      --card-shadow-hover: 0 8px 25px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(0, 229, 255, 0.2);
+      --transition-normal: all 0.3s ease;
+      --border-radius-sm: 8px;
+      --border-radius-md: 10px;
+      --border-radius-lg: 15px;
+      --space-xs: 5px;
+      --space-sm: 10px;
+      --space-md: 15px;
+      --space-lg: 20px;
+      --space-xl: 25px;
+      --space-xxl: 40px;
+    }
+    * {
+      margin: 0;
+      padding: 0;
+      box-sizing: border-box;
+    }
+    /* Base Styles */
+    body {
+      font-family: 'Roboto', sans-serif;
+      background: linear-gradient(135deg, var(--dark-bg) 0%, var(--darker-bg) 100%);
+      color: var(--text-primary);
+      line-height: 1.6;
+      min-height: 100vh;
+      overflow-x: hidden;
+    }
+    h1, h2, h3, h4, h5, h6 {
+      font-family: 'Orbitron', sans-serif;
+      letter-spacing: 0.5px;
+    }
+    /* Layout Containers */
+    .container {
+      max-width: 1400px;
+      margin: 0 auto;
+      padding: var(--space-lg);
+      width: 100%;
+    }
+    .dashboard-container {
+      padding: var(--space-xxl) var(--space-lg);
+    }
+    /* Header Styles */
+    header {
+      text-align: center;
+      margin-bottom: var(--space-xxl);
+      padding: var(--space-xl) var(--space-lg);
+      border-bottom: 1px solid rgba(0, 229, 255, 0.2);
+      position: relative;
+    }
+    header::before {
+      content: '';
+      position: absolute;
+      bottom: -2px;
+      left: 50%;
+      width: 100px;
+      height: 3px;
+      background: linear-gradient(90deg, transparent, var(--primary-color), transparent);
+      transform: translateX(-50%);
+    }
+    h1 {
+      font-size: 2.8rem;
+      color: var(--primary-color);
+      text-shadow: 0 0 10px rgba(0, 229, 255, 0.5), 0 0 20px rgba(0, 229, 255, 0.3);
+      letter-spacing: 2px;
+      margin-bottom: var(--space-md);
+      font-weight: 700;
+    }
+    h3 {
+      color: var(--text-primary);
+      font-size: 1.4rem;
+      margin-bottom: var(--space-md);
+      letter-spacing: 0.8px;
+      position: relative;
+      display: inline-block;
+    }
+    h3::after {
+      content: '';
+      position: absolute;
+      bottom: -5px;
+      left: 0;
+      width: 100%;
+      height: 2px;
+      background: linear-gradient(90deg, var(--primary-color), transparent);
+    }
+    h5 {
+      color: var(--text-primary);
+      margin-bottom: var(--space-sm);
+      font-weight: 500;
+    }
+    .report-meta {
+      font-size: 0.95rem;
+      color: var(--text-secondary);
+      margin-top: var(--space-lg);
+      display: flex;
+      justify-content: center;
+      flex-wrap: wrap;
+      gap: var(--space-md);
+    }
+    .report-meta span {
+      padding: var(--space-xs) var(--space-md);
+      background: rgba(0, 229, 255, 0.1);
+      border-radius: var(--border-radius-sm);
+      backdrop-filter: blur(5px);
+      transition: var(--transition-normal);
+    }
+    .report-meta span:hover {
+      background: rgba(0, 229, 255, 0.2);
+      transform: translateY(-2px);
+    }
+    /* Dashboard Grid Layout */
+    .dashboard-grid {
+      display: grid;
+      grid-template-columns: repeat(12, 1fr);
+      gap: var(--space-xl);
+    }
+    /* Card Sizing Classes */
+    .card-col-3 {
+      grid-column: span 3;
+    }
+    .card-col-4 {
+      grid-column: span 4;
+    }
+    .card-col-6 {
+      grid-column: span 6;
+    }
+    .card-col-8 {
+      grid-column: span 8;
+    }
+    .card-col-12 {
+      grid-column: span 12;
+    }
+    /* Cards */
+    .card {
+      background: var(--card-bg);
+      padding: var(--space-xl);
+      border-radius: var(--border-radius-lg);
+      box-shadow: var(--card-shadow);
+      transition: var(--transition-normal);
+      position: relative;
+      overflow: hidden;
+      height: 100%;
+      backdrop-filter: blur(10px);
+      border: 1px solid rgba(255, 255, 255, 0.05);
+    }
+    .card:hover {
+      transform: translateY(-5px);
+      box-shadow: var(--card-shadow-hover);
+    }
+    .card::before {
+      content: '';
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      background: radial-gradient(circle at top right, rgba(0, 229, 255, 0.05), transparent 70%);
+      pointer-events: none;
+    }
+    .card::after {
+      content: '';
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 3px;
+      background: linear-gradient(90deg, transparent, var(--primary-color), transparent);
+      opacity: 0;
+      transition: opacity 0.3s;
+    }
+    .card:hover::after {
+      opacity: 1;
+    }
+    /* Risk Summary Styles */
+    .risk-summary .gauge-container {
+      position: relative;
+      margin: var(--space-xl) auto;
+      width: 180px;
+      height: 180px;
+    }
+    .risk-metrics {
+      display: flex;
+      flex-wrap: wrap;
+      gap: var(--space-lg);
+      justify-content: space-around;
+      margin-top: var(--space-xl);
+    }
+    .metric-item {
+      flex: 1;
+      min-width: 120px;
+      text-align: center;
+      padding: var(--space-sm) var(--space-md);
+      background: rgba(0, 229, 255, 0.05);
+      border-radius: var(--border-radius-sm);
+      transition: transform 0.2s, background 0.2s;
+      border: 1px solid rgba(255, 255, 255, 0.05);
+    }
+    .metric-item:hover {
+      transform: translateY(-3px);
+      background: rgba(0, 229, 255, 0.1);
+      border-color: rgba(0, 229, 255, 0.2);
+    }
+    .metric-label {
+      font-size: 0.9rem;
+      color: var(--text-secondary);
+      display: block;
+      margin-bottom: var(--space-xs);
+      text-transform: uppercase;
+      letter-spacing: 0.5px;
+    }
+    .metric-value {
+      font-size: 1.3rem;
+      color: var(--primary-color);
+      font-weight: 700;
+      text-shadow: 0 0 5px rgba(0, 229, 255, 0.3);
+    }
+    /* Gauge Styles */
+    .gauge-svg {
+      width: 180px;
+      height: 180px;
+      position: relative;
+      filter: drop-shadow(0 0 8px rgba(0, 229, 255, 0.5));
+      transform: rotate(-90deg);
+    }
+    .gauge-base {
+      fill: none;
+      stroke: rgba(255, 255, 255, 0.1);
+      stroke-width: 12;
+      r: 54;
+      cx: 60;
+      cy: 60;
+    }
+    .gauge-value {
+      fill: none;
+      stroke: url(#gaugeGradient);
+      stroke-width: 12;
+      stroke-linecap: round;
+      r: 54;
+      cx: 60;
+      cy: 60;
+      transition: stroke-dasharray 1.5s cubic-bezier(0.34, 1.56, 0.64, 1);
+    }
+    .gauge-text {
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%) rotate(90deg);
+      font-size: 1.8rem;
+      color: var(--text-primary);
+      font-weight: 700;
+      text-shadow: 0 0 10px rgba(0, 229, 255, 0.5);
+      font-family: 'Orbitron', sans-serif;
+    }
+    .gauge-text::after {
+      content: '%';
+      font-size: 0.9rem;
+      vertical-align: super;
+      margin-left: 2px;
+    }
+    /* Stats and Insights */
+    .stats-grid {
+      display: grid;
+      gap: var(--space-md);
+    }
+    .stat-item {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      padding: var(--space-sm) var(--space-md);
+      border-radius: var(--border-radius-sm);
+      background: rgba(255, 255, 255, 0.05);
+      transition: var(--transition-normal);
+      border-left: 3px solid transparent;
+    }
+    .stat-item:hover {
+      background: rgba(0, 229, 255, 0.1);
+      border-left-color: var(--primary-color);
+      transform: translateX(3px);
+    }
+    .stat-label {
+      font-size: 0.95rem;
+      color: var(--text-secondary);
+    }
+    .stat-value {
+      font-size: 1.05rem;
+      color: var(--primary-color);
+      font-weight: 500;
+      letter-spacing: 0.5px;
+    }
+    .insights-list {
+      list-style: none;
+      padding: 0;
+    }
+    .insights-list li {
+      margin-bottom: var(--space-md);
+      font-size: 0.95rem;
+      padding: var(--space-md);
+      background: rgba(255, 255, 255, 0.05);
+      border-radius: var(--border-radius-sm);
+      border-left: 3px solid var(--primary-color);
+      transition: var(--transition-normal);
+      position: relative;
+      overflow: hidden;
+    }
+    .insights-list li::before {
+      content: '';
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 3px;
+      height: 100%;
+      background: var(--primary-color);
+      transition: var(--transition-normal);
+    }
+    .insights-list li:hover {
+      background: rgba(0, 229, 255, 0.1);
+      transform: translateX(5px);
+    }
+    .insights-list li:hover::before {
+      width: 5px;
+    }
+    /* Recommendations */
+    .recommendation-category {
+      margin-bottom: var(--space-xl);
+    }
+    .category-title {
+      font-size: 1.2rem;
+      color: var(--primary-color);
+      margin-bottom: var(--space-md);
+      cursor: pointer;
+      transition: var(--transition-normal);
+      display: flex;
+      align-items: center;
+      font-family: 'Orbitron', sans-serif;
+    }
+    .category-title::before {
+      content: '▸';
+      margin-right: var(--space-sm);
+      transition: transform 0.3s;
+    }
+    .category-title:hover {
+      color: var(--primary-hover);
+    }
+    .category-title.active::before {
+      transform: rotate(90deg);
+    }
+    .recommendations-list {
+      list-style: none;
+      padding: 0;
+    }
+    .recommendation-item {
+      background: rgba(0, 229, 255, 0.08);
+      padding: var(--space-md);
+      border-radius: var(--border-radius-md);
+      margin-bottom: var(--space-md);
+      display: flex;
+      align-items: center;
+      gap: var(--space-md);
+      cursor: pointer;
+      transition: var(--transition-normal);
+      border-left: 4px solid transparent;
+      position: relative;
+      overflow: hidden;
+    }
+    .recommendation-item::before {
+      content: '';
+      position: absolute;
+      top: 0;
+      right: 0;
+      bottom: 0;
+      width: 30px;
+      background: linear-gradient(to right, transparent, rgba(0, 229, 255, 0.1));
+      opacity: 0;
+      transition: var(--transition-normal);
+    }
+    .recommendation-item:hover {
+      background: rgba(0, 229, 255, 0.15);
+      box-shadow: 0 0 15px rgba(0, 229, 255, 0.2);
+      border-left-color: var(--primary-color);
+      transform: translateY(-2px);
+    }
+    .recommendation-item:hover::before {
+      opacity: 1;
+    }
+    .recommendation-item.completed {
+      opacity: 0.7;
+      text-decoration: line-through;
+      background: rgba(255, 255, 255, 0.05);
+    }
+    .rec-checkbox {
+      width: 22px;
+      height: 22px;
+      accent-color: var(--primary-color);
+      cursor: pointer;
+      transition: var(--transition-normal);
+    }
+    .rec-checkbox:hover {
+      transform: scale(1.1);
+    }
+    .priority-indicator {
+      font-size: 1.2rem;
+      color: var(--primary-color);
+      min-width: 24px;
+      text-align: center;
+      font-weight: bold;
+    }
+    .recommendation-text {
+      flex: 1;
+      font-size: 1rem;
+      line-height: 1.4;
+    }
+    .recommendation-detail {
+      display: none;
+      max-height: 0;
+      overflow: hidden;
+      font-size: 0.9rem;
+      color: var(--text-secondary);
+      margin-top: var(--space-sm);
+      padding: var(--space-sm);
+      background: rgba(0, 0, 0, 0.2);
+      border-radius: var(--border-radius-sm);
+      transition: all 0.3s ease-out;
+      line-height: 1.6;
+    }
+    .recommendation-item.expandable .recommendation-detail {
+      display: block;
+      max-height: 0;
+    }
+    .recommendation-item.expandable:hover .recommendation-detail,
+    .recommendation-item.expandable.expanded .recommendation-detail {
+      max-height: 200px;
+      padding: var(--space-sm);
+    }
+    /* Tooltips */
+    .tooltip-icon {
+      position: relative;
+      color: var(--primary-color);
+      cursor: help;
+      display: inline-block;
+      width: 22px;
+      height: 22px;
+      text-align: center;
+      line-height: 22px;
+      border-radius: 50%;
+      background: rgba(0, 229, 255, 0.1);
+      transition: var(--transition-normal);
+      margin-left: var(--space-xs);
+    }
+    .tooltip-icon:hover {
+      background: rgba(0, 229, 255, 0.2);
+      transform: scale(1.1);
+    }
+    .tooltip-icon::after {
+      content: 'i';
+      font-style: italic;
+      font-weight: bold;
+    }
+    .tooltip-text {
+      visibility: hidden;
+      width: 220px;
+      background: #222;
+      color: #fff;
+      text-align: center;
+      padding: var(--space-sm) var(--space-md);
+      border-radius: var(--border-radius-sm);
+      position: absolute;
+      z-index: 10;
+      bottom: 125%;
+      left: 50%;
+      transform: translateX(-50%);
+      font-size: 0.9rem;
+      opacity: 0;
+      transition: opacity 0.3s, visibility 0.3s;
+      box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
+      border: 1px solid rgba(0, 229, 255, 0.2);
+      line-height: 1.5;
+    }
+    .tooltip-text::after {
+      content: '';
+      position: absolute;
+      top: 100%;
+      left: 50%;
+      margin-left: -5px;
+      border-width: 5px;
+      border-style: solid;
+      border-color: #222 transparent transparent transparent;
+    }
+    .tooltip-icon:hover .tooltip-text {
+      visibility: visible;
+      opacity: 1;
+    }
+    /* Buttons */
+    .learn-more-btn {
+      font-size: 0.9rem;
+      padding: var(--space-sm) var(--space-md);
+      background: var(--primary-color);
+      border: none;
+      border-radius: var(--border-radius-sm);
+      color: var(--darker-bg);
+      font-weight: bold;
+      cursor: pointer;
+      transition: var(--transition-normal);
+      display: inline-block;
+      margin-top: var(--space-sm);
+    }
+    .learn-more-btn:hover {
+      background: var(--primary-hover);
+      transform: translateY(-2px);
+      box-shadow: 0 3px 10px rgba(0, 151, 251, 0.3);
+    }
+    /* Chart Styles */
+    .chart-card {
+      padding-bottom: var(--space-xl);
+      min-height: 400px;
+      display: flex;
+      flex-direction: column;
+    }
+    .chart-container {
+      flex: 1;
+      position: relative;
+      width: 100%;
+      height: 100%;
+      min-height: 300px;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      margin-top: var(--space-lg);
+    }
+    .chart-card canvas {
+      max-width: 100%;
+      height: auto !important;
+    }
+    /* Report Actions */
+    .report-actions {
+      text-align: center;
+      margin-top: var(--space-xxl);
+      padding: var(--space-xl);
+      background: rgba(255, 255, 255, 0.05);
+      border-radius: var(--border-radius-md);
+      backdrop-filter: blur(10px);
+      border: 1px solid rgba(255, 255, 255, 0.1);
+    }
+    .action-button {
+      padding: 14px 28px;
+      background: linear-gradient(45deg, var(--primary-color), var(--primary-hover));
+      border: none;
+      border-radius: 30px;
+      color: #fff;
+      font-size: 1.1rem;
+      font-weight: 500;
+      letter-spacing: 1px;
+      cursor: pointer;
+      margin: 0 var(--space-md);
+      transition: var(--transition-normal);
+      box-shadow: 0 4px 15px rgba(0, 229, 255, 0.3);
+      position: relative;
+      overflow: hidden;
+    }
+    .action-button::before {
+      content: '';
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      background: linear-gradient(45deg, transparent, rgba(255, 255, 255, 0.2), transparent);
+      transform: translateX(-100%);
+      transition: transform 0.6s;
+    }
+    .action-button:hover {
+      background: linear-gradient(45deg, var(--primary-hover), var(--primary-color));
+      transform: translateY(-3px);
+      box-shadow: 0 6px 20px rgba(0, 151, 251, 0.4);
+    }
+    .action-button:hover::before {
+      transform: translateX(100%);
+    }
+    .action-button:active {
+      transform: translateY(1px);
+    }
+    /* Animation for loading elements */
+    @keyframes fadeIn {
+      from { opacity: 0; transform: translateY(20px); }
+      to { opacity: 1; transform: translateY(0); }
+    }
+    .card {
+      animation: fadeIn 0.5s ease forwards;
+      opacity: 0;
+    }
+    .card:nth-child(1) { animation-delay: 0.1s; }
+    .card:nth-child(2) { animation-delay: 0.15s; }
+    .card:nth-child(3) { animation-delay: 0.2s; }
+    .card:nth-child(4) { animation-delay: 0.25s; }
+    .card:nth-child(5) { animation-delay: 0.3s; }
+    .card:nth-child(6) { animation-delay: 0.35s; }
+    .card:nth-child(7) { animation-delay: 0.4s; }
+    .card:nth-child(8) { animation-delay: 0.45s; }
+    .card:nth-child(9) { animation-delay: 0.5s; }
+    .card:nth-child(10) { animation-delay: 0.55s; }
+    .card:nth-child(11) { animation-delay: 0.6s; }
+    .card:nth-child(12) { animation-delay: 0.65s; }
+    .card:nth-child(13) { animation-delay: 0.7s; }
+    .card:nth-child(14) { animation-delay: 0.75s; }
+    .card:nth-child(15) { animation-delay: 0.8s; }
+    /* Media Queries */
+    @media (max-width: 1400px) {
+      .card-col-3, .card-col-4 {
+        grid-column: span 6;
+      }
+      .card-col-8 {
+        grid-column: span 12;
+      }
+    }
+    @media (max-width: 1100px) {
+      .card-col-6 {
+        grid-column: span 12;
+      }
+    }
+    @media (max-width: 768px) {
+      .card-col-3, .card-col-4, .card-col-6, .card-col-8, .card-col-12 {
+        grid-column: span 12;
+      }
+      .risk-metrics {
+        flex-direction: column;
+      }
+      .metric-item {
+        margin: var(--space-xs) 0;
+      }
+      h1 {
+        font-size: 2.2rem;
+      }
+      .action-button {
+        margin: var(--space-sm);
+        width: 80%;
+        max-width: 300px;
+      }
+      .gauge-svg {
+        width: 140px;
+        height: 140px;
+      }
+      .gauge-container {
+        width: 140px;
+        height: 140px;
+      }
+      .gauge-base, .gauge-value {
+        r: 46;
+        cx: 60;
+        cy: 60;
+      }
+      .gauge-text {
+        font-size: 1.5rem;
+      }
+      .recommendation-item {
+        flex-wrap: wrap;
+      }
+      .report-meta span {
+        margin: var(--space-xs);
+      }
+      .chart-container {
+        min-height: 250px;
+      }
+    }
+    @media (max-width: 480px) {
+      .card {
+        padding: var(--space-md);
+      }
+      h1 {
+        font-size: 1.8rem;
+      }
+      h3 {
+        font-size: 1.2rem;
+      }
+      .metric-item {
+        min-width: 100%;
+      }
+      .chart-container {
+        min-height: 200px;
+      }
+      .gauge-svg {
+        width: 120px;
+        height: 120px;
+      }
+      .gauge-container {
+        width: 120px;
+        height: 120px;
+      }
+      .gauge-base, .gauge-value {
+        r: 40;
+        cx: 60;
+        cy: 60;
+      }
+      .gauge-text {
+        font-size: 1.3rem;
+      }
+      .action-button {
+        font-size: 1rem;
+        padding: 12px 24px;
+      }
+    }
+    /* Print styles */
+    @media print {
+      body {
+        background: white;
+        color: black;
+      }
+      .card {
+        break-inside: avoid;
+        background: white;
+        box-shadow: none;
+        border: 1px solid #ddd;
+        page-break-inside: avoid;
+      }
+      .report-actions {
+        display: none;
+      }
+      h1, h3 {
+        color: #333;
+        text-shadow: none;
+      }
+      .metric-value, .stat-value {
+        color: #0097fb;
+      }
+      .chart-card {
+        page-break-inside: avoid;
+      }
+      .gauge-svg {
+        filter: none;
+      }
+      .gauge-value {
+        stroke: #0097fb;
+      }
+    }
+  </style>
+</head>
+<body>
+  <div class="container dashboard-container">
+    <header>
+      <h1>Injury Prediction Report</h1>
+      <div class="report-meta">
+        <span id="reportDate">Loading...</span>
+        <span id="reportId">Loading...</span>
+      </div>
+    </header>
+    <main>
+      <div class="dashboard-grid">
+        <!-- Risk Summary -->
+        <div class="card risk-summary card-col-4">
+          <h3>Risk Summary</h3>
+          <div class="gauge-container">
+            <svg class="gauge-svg" viewBox="0 0 120 120">
+              <defs>
+                <linearGradient id="gaugeGradient" x1="0%" y1="0%" x2="100%" y2="100%">
+                  <stop offset="0%" style="stop-color:#22c55e;stop-opacity:1" />
+                  <stop offset="50%" style="stop-color:#facc15;stop-opacity:1" />
+                  <stop offset="100%" style="stop-color:#ef4444;stop-opacity:1" />
+                </linearGradient>
+              </defs>
+              <circle class="gauge-base" r="54" cx="60" cy="60"></circle>
+              <circle class="gauge-value" r="54" cx="60" cy="60"></circle>
+            </svg>
+            <span class="gauge-text">0</span>
+          </div>
+          <div class="risk-metrics">
+            <div class="metric-item">
+              <span class="metric-label">Risk Level</span>
+              <span id="riskLevel" class="metric-value">Unknown</span>
+            </div>
+            <div class="metric-item">
+              <span class="metric-label">Likelihood</span>
+              <span id="likelihoodPercent" class="metric-value">0%</span>
+            </div>
+            <div class="metric-item">
+              <span class="metric-label">Confidence</span>
+              <span id="confidencePercent" class="metric-value">0%</span>
+            </div>
+          </div>
+        </div>
+        <!-- Profile Card -->
+        <div class="card profile-card card-col-4">
+          <h3>Profile</h3>
+          <div id="profileCard" class="stats-grid"></div>
+        </div>
+        <!-- Summary Card -->
+        <div class="card summary-card card-col-4">
+          <h3>Summary</h3>
+          <div id="summaryCard" class="stats-grid"></div>
+        </div>
+        <!-- AI Smart Insights -->
+        <div class="card insights-card card-col-6">
+          <h3>AI Smart Insights</h3>
+          <ul id="insightsList" class="insights-list"></ul>
+        </div>
+        <!-- Risk Contribution Breakdown -->
+        <div class="card chart-card card-col-6">
+          <h3>Risk Contribution Breakdown</h3>
+          <div class="chart-container">
+            <canvas id="trendAnalysisChart"></canvas>
+          </div>
+        </div>
+        <!-- Factor Impact -->
+        <div class="card chart-card card-col-6">
+          <h3>Factor Impact</h3>
+          <div class="chart-container">
+            <canvas id="factorImpactChart"></canvas>
+          </div>
+        </div>
+        <!-- Feature Impact on Risk -->
+        <div class="card chart-card card-col-6">
+          <h3>Feature Impact on Risk</h3>
+          <div class="chart-container">
+            <canvas id="featureImportanceChart"></canvas>
+          </div>
+        </div>
+        <!-- Feature Importance -->
+        <div class="card chart-card card-col-6">
+          <h3>Feature Importance</h3>
+          <div class="chart-container">
+            <canvas id="riskBreakdownChart"></canvas>
+          </div>
+        </div>
+        <!-- Risk Severity Distribution -->
+        <div class="card chart-card card-col-4">
+          <h3>Risk Severity Distribution</h3>
+          <div class="chart-container">
+            <canvas id="riskDonutChart"></canvas>
+          </div>
+        </div>
+        <!-- Top Contributors -->
+        <div class="card chart-card card-col-8">
+          <h3>Top Contributors</h3>
+          <div class="chart-container">
+            <canvas id="riskHorizontalBar"></canvas>
+          </div>
+        </div>
+        <!-- Model Confidence -->
+        <div class="card chart-card card-col-4">
+          <h3>Model Confidence</h3>
+          <div class="chart-container">
+            <canvas id="confidenceGaugeChart"></canvas>
+          </div>
+        </div>
+        <!-- Training vs Recovery -->
+        <div class="card chart-card card-col-4">
+          <h3>Training vs Recovery</h3>
+          <div class="chart-container">
+            <canvas id="trainingRecoveryChart"></canvas>
+          </div>
+        </div>
+        <!-- Performance Stability -->
+        <div class="card chart-card card-col-4">
+          <h3>Performance Stability</h3>
+          <div class="chart-container">
+            <canvas id="performanceScoreChart"></canvas>
+          </div>
+        </div>
+        <!-- Fatigue Risk -->
+        <div class="card chart-card card-col-4">
+          <h3>Fatigue Risk</h3>
+          <div class="chart-container">
+            <canvas id="fatigueMeterChart"></canvas>
+          </div>
+        </div>
+        <!-- Personalized Recommendations -->
+        <div class="card recommendations-card card-col-12">
+          <h3>Personalized Recommendations</h3>
+          <div id="recommendationsList" class="recommendations-list"></div>
+        </div>
+      </div>
+      <!-- Report Actions -->
+      <div class="report-actions">
+        <button class="action-button" id="downloadPDF">Download PDF</button>
+        <button class="action-button" id="printReport">Print Report</button>
+      </div>
+    </main>
+  </div>
+  <script src="report.js"></script>
+</body>
+</html>

UI2/report.js ADDED Viewed

	@@ -0,0 +1,731 @@

+document.addEventListener('DOMContentLoaded', () => {
+  console.log('report.js loaded at:', new Date().toISOString());
+  const isDataFresh = (timestamp) => {
+    if (!timestamp) return false;
+    const dataTime = new Date(timestamp);
+    const currentTime = new Date();
+    const diffInMinutes = (currentTime - dataTime) / (1000 * 60);
+    return diffInMinutes <= 60;
+  };
+  function loadCompletedRecommendations() {
+    const stored = localStorage.getItem('completedRecommendations');
+    return stored ? JSON.parse(stored) : {};
+  }
+  function saveCompletedRecommendations(completed) {
+    localStorage.setItem('completedRecommendations', JSON.stringify(completed));
+  }
+  let data;
+  try {
+    console.log('Attempting to retrieve predictionData from localStorage...');
+    const predictionData = JSON.parse(localStorage.getItem('predictionData'));
+    console.log('Retrieved predictionData:', predictionData);
+    if (!predictionData) {
+      throw new Error('No prediction data found in localStorage');
+    }
+    if (predictionData.timestamp && !isDataFresh(predictionData.timestamp)) {
+      throw new Error('Prediction data is outdated. Please recalculate.');
+    }
+    data = predictionData;
+    if (data.factorData) {
+      Object.keys(data.factorData).forEach(key => {
+        data.factorData[key] = Math.min(100, Math.max(0, parseFloat(data.factorData[key]) || 0));
+      });
+    } else {
+      data.factorData = {};
+    }
+    data.injury_likelihood_percent = parseFloat(data.injury_likelihood_percent) || 0;
+    data.model_class_probability = parseFloat(data.model_class_probability) || 0;
+    data.predicted_risk_level = data.predicted_risk_level || 'Unknown';
+    data.recommendations = data.recommendations || { 'Injury Prevention': [] };
+    data.profile = data.profile || { age: 'N/A', gender: 'N/A', sport: 'N/A' };
+    data.feature_importance = data.feature_importance || {
+      Training_Load_Score: 0.22,
+      Recovery_Per_Training: 0.18,
+      Total_Weekly_Training_Hours: 0.16,
+      Fatigue_Level: 0.14,
+      Recovery_Time_Between_Sessions: 0.12,
+      High_Intensity_Training_Hours: 0.10,
+      Intensity_Ratio: 0.08,
+      Endurance_Score: 0.06,
+      Sprint_Speed: 0.05,
+      Agility_Score: 0.04,
+      Flexibility_Score: 0.03,
+      Age: 0.03,
+      Strength_Training_Frequency: 0.02,
+      Sport_Type: 0.02,
+      Gender: 0.01,
+      Previous_Injury_Count: 0.01,
+      Previous_Injury_Type: 0.01
+    };
+    data.timestamp = data.timestamp || new Date().toISOString();
+    data.version = data.version || '1.0.0';
+    console.log('Validated and normalized data:', data);
+  } catch (error) {
+    console.error('Error loading prediction data:', error.message);
+    data = {
+      predicted_risk_level: 'Unknown',
+      injury_likelihood_percent: 0,
+      model_class_probability: 0,
+      recommendations: { 'Injury Prevention': [{ id: 'rec-0', text: 'Please complete the assessment form to generate a report.', priority: 0.5, details: '', completed: false }] },
+      factorData: {
+        Training_Load_Score: 0,
+        Recovery_Per_Training: 0,
+        Total_Weekly_Training_Hours: 0,
+        Fatigue_Level: 0,
+        Recovery_Time_Between_Sessions: 0,
+        High_Intensity_Training_Hours: 0,
+        Experience_Level: 0,
+        Intensity_Ratio: 0,
+        Endurance_Score: 0,
+        Sprint_Speed: 0,
+        Agility_Score: 0,
+        Flexibility_Score: 0,
+        Age: 0,
+        Strength_Training_Frequency: 0,
+        Sport_Type: 0,
+        Gender: 0,
+        Previous_Injury_Count: 0,
+        Previous_Injury_Type: 0
+      },
+      profile: { age: 'N/A', gender: 'N/A', sport: 'N/A' },
+      feature_importance: {
+        Training_Load_Score: 0.22,
+        Recovery_Per_Training: 0.18,
+        Total_Weekly_Training_Hours: 0.16,
+        Fatigue_Level: 0.14,
+        Recovery_Time_Between_Sessions: 0.12,
+        High_Intensity_Training_Hours: 0.10,
+        Intensity_Ratio: 0.08,
+        Endurance_Score: 0.06,
+        Sprint_Speed: 0.05,
+        Agility_Score: 0.04,
+        Flexibility_Score: 0.03,
+        Age: 0.03,
+        Strength_Training_Frequency: 0.02,
+        Sport_Type: 0.02,
+        Gender: 0.01,
+        Previous_Injury_Count: 0.01,
+        Previous_Injury_Type: 0.01
+      },
+      timestamp: new Date().toISOString(),
+      version: '1.1.0'
+    };
+    const dashboardContainer = document.querySelector('.dashboard-container');
+    if (dashboardContainer) {
+      const warningDiv = document.createElement('div');
+      warningDiv.style.color = '#ef4444';
+      warningDiv.style.marginBottom = '20px';
+      warningDiv.style.textAlign = 'center';
+      warningDiv.innerHTML = `⚠️ ${error.message} <br><a href="calculator.html" style="color: #00e5ff;">Return to Calculator</a>`;
+      dashboardContainer.prepend(warningDiv);
+      console.log('Appended warning message to dashboard-container');
+    } else {
+      console.error('Dashboard container not found in the DOM');
+    }
+  }
+  const reportDateEl = document.getElementById('reportDate');
+  if (reportDateEl) {
+    reportDateEl.textContent = new Date().toLocaleDateString('en-US', {
+      weekday: 'long', year: 'numeric', month: 'long', day: 'numeric'
+    });
+  } else {
+    console.error('Element #reportDate not found');
+  }
+  const reportIdEl = document.getElementById('reportId');
+  if (reportIdEl) {
+    reportIdEl.textContent = 'Report ID: ' + Math.random().toString(36).slice(2, 9).toUpperCase();
+  } else {
+    console.error('Element #reportId not found');
+  }
+  const riskLevelEl = document.getElementById('riskLevel');
+  if (riskLevelEl) {
+    riskLevelEl.textContent = data.predicted_risk_level;
+  } else {
+    console.error('Element #riskLevel not found');
+  }
+  const likelihoodPercentEl = document.getElementById('likelihoodPercent');
+  if (likelihoodPercentEl) {
+    likelihoodPercentEl.textContent = `${data.injury_likelihood_percent.toFixed(1)}%`;
+  } else {
+    console.error('Element #likelihoodPercent not found');
+  }
+  const confidencePercentEl = document.getElementById('confidencePercent');
+  if (confidencePercentEl) {
+    confidencePercentEl.textContent = `${data.model_class_probability.toFixed(1)}%`;
+  } else {
+    console.error('Element #confidencePercent not found');
+  }
+  const percent = Math.min(Math.max(data.injury_likelihood_percent, 0), 100);
+  const gauge = document.querySelector('.gauge-value');
+  const gaugeText = document.querySelector('.gauge-text');
+  if (gauge && gaugeText) {
+    const radius = 54;
+    const circumference = 2 * Math.PI * radius;
+    const offset = circumference - (percent / 100) * circumference;
+    gauge.style.transition = 'stroke-dashoffset 1s ease-in-out';
+    gauge.style.strokeDasharray = `${circumference} ${circumference}`;
+    gauge.style.strokeDashoffset = offset;
+    const getRiskColor = (value) => {
+      if (value > 70) return '#ef4444';
+      if (value > 40) return '#facc15';
+      return '#22c55e';
+    };
+    gauge.style.stroke = getRiskColor(percent);
+    gaugeText.textContent = `${percent.toFixed(1)}%`;
+  } else {
+    console.error('Gauge elements (.gauge-value or .gauge-text) not found');
+  }
+  const profileCardEl = document.getElementById('profileCard');
+  if (profileCardEl) {
+    const profile = data.profile;
+    profileCardEl.innerHTML = `
+      <div class="stat-item"><span class="stat-label">Age</span><span class="stat-value">${profile.age}</span></div>
+      <div class="stat-item"><span class="stat-label">Gender</span><span class="stat-value">${profile.gender}</span></div>
+      <div class="stat-item"><span class="stat-label">Sport</span><span class="stat-value">${profile.sport}</span></div>
+    `;
+  } else {
+    console.error('Element #profileCard not found');
+  }
+  const summaryCardEl = document.getElementById('summaryCard');
+  if (summaryCardEl) {
+    const riskSummary = data.predicted_risk_level.toLowerCase();
+    const summaryInsight = riskSummary === 'high' ? 'Immediate action required to reduce risk.' :
+                          riskSummary === 'medium' ? 'Monitor and adjust training.' :
+                          riskSummary === 'low' ? 'Maintain current regimen.' : 'Complete assessment for insights.';
+    summaryCardEl.innerHTML = `
+      <div class="stat-item"><span class="stat-label">Risk Overview</span><span class="stat-value">${data.predicted_risk_level}</span></div>
+      <div class="stat-item"><span class="stat-label">Key Insight</span><span class="stat-value">${summaryInsight}</span></div>
+      <div class="stat-item"><span class="stat-label">Data Confidence</span><span class="stat-value">${data.model_class_probability >= 90 ? 'High' : data.model_class_probability >= 70 ? 'Moderate' : 'Low'}</span></div>
+    `;
+  } else {
+    console.error('Element #summaryCard not found');
+  }
+  const insightsListEl = document.getElementById('insightsList');
+  if (insightsListEl) {
+    const topFactors = [
+      { key: 'Training_Load_Score', value: data.factorData.Training_Load_Score || 0, importance: data.feature_importance.Training_Load_Score || 0 },
+      { key: 'Recovery_Per_Training', value: data.factorData.Recovery_Per_Training || 0, importance: data.feature_importance.Recovery_Per_Training || 0 },
+      { key: 'Total_Weekly_Training_Hours', value: data.factorData.Total_Weekly_Training_Hours || 0, importance: data.feature_importance.Total_Weekly_Training_Hours || 0 },
+      { key: 'Fatigue_Level', value: data.factorData.Fatigue_Level || 0, importance: data.feature_importance.Fatigue_Level || 0 }
+    ];
+    insightsListEl.innerHTML = topFactors.map(f => {
+      const impact = (f.value * f.importance).toFixed(1);
+      const status = f.value > 70 ? '⚠️ High' : f.value > 40 ? '🟡 Moderate' : '✅ Low';
+      return `<li><strong>${f.key.replace(/_/g, ' ')}</strong>: <span style="color:#00e5ff;">${f.value.toFixed(1)}%</span> (${status}, Impact: ${impact}%)</li>`;
+    }).join('');
+  } else {
+    console.error('Element #insightsList not found');
+  }
+  const recommendationsListEl = document.getElementById('recommendationsList');
+  if (recommendationsListEl) {
+    const completedRecs = loadCompletedRecommendations();
+    recommendationsListEl.innerHTML = Object.keys(data.recommendations).map(category => `
+      <div class="recommendation-category">
+        <h5 class="category-title">${category}</h5>
+        ${data.recommendations[category].map(rec => `
+          <div class="recommendation-item expandable ${completedRecs[rec.id] ? 'completed' : ''}">
+            <input type="checkbox" class="rec-checkbox" data-id="${rec.id}" ${completedRecs[rec.id] ? 'checked' : ''}>
+            <span class="priority-indicator" style="color: ${rec.priority > 0.7 ? '#ef4444' : rec.priority > 0.4 ? '#facc15' : '#22c55e'}">
+              ${rec.priority > 0.7 ? '🛑' : rec.priority > 0.4 ? '⚠️' : '✅'}
+            </span>
+            <span class="recommendation-text">${rec.text}</span>
+            <span class="tooltip-icon">ℹ️
+              <span class="tooltip-text">${rec.details}</span>
+            </span>
+            <div class="recommendation-detail">${rec.details}</div>
+            <button class="learn-more-btn" data-topic="${rec.text.toLowerCase().replace(/\s+/g, '-')}">Learn More</button>
+          </div>
+        `).join('')}
+      </div>
+    `).join('');
+    document.querySelectorAll('.rec-checkbox').forEach(checkbox => {
+      checkbox.addEventListener('change', () => {
+        const recId = checkbox.dataset.id;
+        const completedRecs = loadCompletedRecommendations();
+        completedRecs[recId] = checkbox.checked;
+        saveCompletedRecommendations(completedRecs);
+        checkbox.closest('.recommendation-item').classList.toggle('completed', checkbox.checked);
+      });
+    });
+    document.querySelectorAll('.recommendation-item.expandable').forEach(item => {
+      item.addEventListener('click', (e) => {
+        if (e.target.classList.contains('rec-checkbox') || e.target.classList.contains('learn-more-btn')) return;
+        const detail = item.querySelector('.recommendation-detail');
+        if (detail.style.display === "none" || detail.style.display === "") {
+          detail.style.display = "block";
+          detail.style.maxHeight = detail.scrollHeight + "px";
+        } else {
+          detail.style.display = "none";
+          detail.style.maxHeight = "0";
+        }
+      });
+    });
+    document.querySelectorAll('.learn-more-btn').forEach(btn => {
+      btn.addEventListener('click', () => {
+        const topic = btn.dataset.topic;
+        window.open(`https://www.healthline.com/search?q=${encodeURIComponent(topic)}`, '_blank');
+      });
+    });
+  } else {
+    console.error('Element #recommendationsList not found');
+  }
+  const chartDefaults = {
+    font: { family: 'Orbitron', size: 12 },
+    color: '#fff'
+  };
+  Chart.defaults.font = chartDefaults.font;
+  Chart.defaults.color = chartDefaults.color;
+  const makeChart = (id, config) => {
+    const ctx = document.getElementById(id);
+    if (!ctx) {
+      console.error(`Chart element #${id} not found`);
+      return null;
+    }
+    return new Chart(ctx, config);
+  };
+  const topFeatureKeys = [
+    'Training_Load_Score',
+    'Recovery_Per_Training',
+    'Total_Weekly_Training_Hours',
+    'Fatigue_Level',
+    'Recovery_Time_Between_Sessions',
+    'High_Intensity_Training_Hours',
+    'Previous_Injury_Count'
+  ];
+  const contributions = topFeatureKeys.map(key => ({
+    key,
+    value: ((data.factorData[key] || 0) * (data.feature_importance[key] || 0))
+  }));
+  const totalRawContribution = contributions.reduce((sum, c) => sum + c.value, 0);
+  const scalingFactor = totalRawContribution > 0 ? data.injury_likelihood_percent / totalRawContribution : 0;
+  const scaledContributions = contributions.map(c => ({
+    key: c.key,
+    value: c.value * scalingFactor
+  }));
+  const datasets = scaledContributions.map((c, index) => ({
+    label: c.key.replace(/_/g, ' '),
+    data: [c.value],
+    backgroundColor: ['#ef4444', '#facc15', '#22c55e', '#3b82f6', '#a855f7', '#f97316', '#10b981'][index % 7],
+    borderWidth: 0
+  }));
+  console.log('Risk Contribution Breakdown data:', scaledContributions);
+  makeChart('trendAnalysisChart', {
+    type: 'bar',
+    data: {
+      labels: ['Risk Contribution'],
+      datasets: datasets
+    },
+    options: {
+      indexAxis: 'x',
+      plugins: {
+        legend: { labels: { font: { size: 12 } } },
+        tooltip: {
+          backgroundColor: 'rgba(0, 0, 0, 0.8)',
+          callbacks: {
+            label: (ctx) => `${ctx.dataset.label}: ${ctx.raw.toFixed(1)}%`
+          }
+        },
+        title: {
+          display: true,
+          text: 'Risk Contribution Breakdown',
+          font: { size: 16 },
+          color: '#fff',
+          padding: { top: 10, bottom: 10 }
+        }
+      },
+      scales: {
+        x: {
+          stacked: true,
+          ticks: { font: { size: 12 } },
+          grid: { display: false }
+        },
+        y: {
+          stacked: true,
+          ticks: { font: { size: 12 } },
+          beginAtZero: true,
+          max: 100,
+          grid: { color: 'rgba(255, 255, 255, 0.1)' },
+          title: {
+            display: true,
+            text: 'Contribution to Risk (%)',
+            font: { size: 14 },
+            color: '#fff'
+          }
+        }
+      },
+      animation: { duration: 1500 }
+    }
+  });
+  makeChart('factorImpactChart', {
+    type: 'radar',
+    data: {
+      labels: topFeatureKeys.map(k => k.replace(/_/g, ' ')),
+      datasets: [{
+        label: 'Factor Impact',
+        data: topFeatureKeys.map(k => data.factorData[k] || 0),
+        backgroundColor: 'rgba(0, 229, 255, 0.3)',
+        borderColor: '#00e5ff',
+        pointBackgroundColor: '#00e5ff',
+        borderWidth: 2,
+        pointRadius: 6,
+        pointHoverRadius: 10
+      }]
+    },
+    options: {
+      responsive: true,
+      maintainAspectRatio: false,
+      layout: {
+        padding: {
+          top: 20,
+          bottom: 20,
+          left: 20,
+          right: 20
+        }
+      },
+      scales: {
+        r: {
+          angleLines: {
+            color: 'rgba(255, 255, 255, 0.2)',
+            lineWidth: 2
+          },
+          grid: {
+            color: 'rgba(255, 255, 255, 0.2)',
+            lineWidth: 2
+          },
+          ticks: {
+            backdropColor: 'transparent',
+            font: { size: 16 },
+            stepSize: 20,
+            padding: 10
+          },
+          suggestedMin: 0,
+          suggestedMax: 100,
+          pointLabels: {
+            font: { size: 18 },
+            padding: 20
+          },
+          startAngle: 0,
+          offset: false
+        }
+      },
+      plugins: {
+        legend: {
+          labels: {
+            font: { size: 16 }
+          },
+          position: 'top'
+        },
+        tooltip: {
+          backgroundColor: 'rgba(0, 0, 0, 0.8)',
+          titleFont: { size: 16 },
+          bodyFont: { size: 14 },
+          callbacks: {
+            label: (ctx) => `${ctx.label}: ${ctx.raw.toFixed(1)}% (Importance: ${(data.feature_importance[topFeatureKeys[ctx.dataIndex]] * 100).toFixed(1)}%)`
+          }
+        }
+      }
+    }
+  });
+  const featureImpact = topFeatureKeys.map(k => ((data.factorData[k] || 0) * (data.feature_importance[k] || 0)).toFixed(1));
+  makeChart('riskBreakdownChart', {
+    type: 'bar',
+    data: {
+      labels: topFeatureKeys.map(k => k.replace(/_/g, ' ')),
+      datasets: [{
+        label: 'Impact on Risk',
+        data: featureImpact,
+        backgroundColor: featureImpact.map(val => val > 15 ? '#ef4444' : val > 10 ? '#facc15' : '#22c55e'),
+        borderWidth: 0
+      }]
+    },
+    options: {
+      plugins: {
+        legend: { display: false },
+        tooltip: {
+          callbacks: {
+            label: (ctx) => `${ctx.label}: ${ctx.raw}%`
+          }
+        }
+      },
+      scales: {
+        x: { ticks: { font: { size: 10 } }, maxRotation: 45, minRotation: 45, grid: { display: false } },
+        y: { ticks: { font: { size: 12 } }, beginAtZero: true, max: 25, grid: { color: 'rgba(255,255,255,0.1)' } }
+      }
+    }
+  });
+  const allFeatureKeys = Object.keys(data.feature_importance);
+  makeChart('featureImportanceChart', {
+    type: 'bar',
+    data: {
+      labels: allFeatureKeys.map(k => k.replace(/_/g, ' ')),
+      datasets: [{
+        label: 'Feature Importance',
+        data: allFeatureKeys.map(k => data.feature_importance[k]),
+        backgroundColor: '#3b82f6',
+        borderWidth: 0
+      }]
+    },
+    options: {
+      indexAxis: 'y',
+      plugins: {
+        legend: { display: false },
+        tooltip: {
+          callbacks: {
+            label: (ctx) => `Importance: ${(ctx.raw * 100).toFixed(1)}%`
+          }
+        }
+      },
+      scales: {
+        x: { ticks: { font: { size: 12 } }, beginAtZero: true, max: 0.25, grid: { color: 'rgba(255,255,255,0.1)' } },
+        y: { ticks: { font: { size: 10 } }, grid: { display: false } }
+      }
+    }
+  });
+  const calculateRiskProbabilities = (likelihood, riskLevel) => {
+    let low = 0, medium = 0, high = 0;
+    const normalizedLikelihood = Math.min(100, Math.max(0, parseFloat(likelihood) || 0));
+    switch (riskLevel.toLowerCase()) {
+      case 'high':
+        high = Math.min(normalizedLikelihood, 70);
+        medium = Math.max(0, normalizedLikelihood - high);
+        low = Math.max(0, 100 - high - medium);
+        break;
+      case 'medium':
+        medium = Math.min(normalizedLikelihood, 60);
+        low = Math.max(0, 100 - normalizedLikelihood);
+        high = Math.max(0, normalizedLikelihood - medium);
+        break;
+      case 'low':
+      default:
+        low = Math.min(100 - normalizedLikelihood, 80);
+        medium = Math.max(0, normalizedLikelihood);
+        high = 0;
+        break;
+    }
+    const total = low + medium + high;
+    if (total !== 100) {
+      const adjustment = 100 - total;
+      if (high > 0) high += adjustment;
+      else if (medium > 0) medium += adjustment;
+      else low += adjustment;
+    }
+    return { Low: low, Medium: medium, High: high };
+  };
+  const probabilities = calculateRiskProbabilities(data.injury_likelihood_percent, data.predicted_risk_level);
+  console.log('Risk Severity Probabilities:', probabilities);
+  makeChart('riskDonutChart', {
+    type: 'doughnut',
+    data: {
+      labels: ['Low', 'Medium', 'High'],
+      datasets: [{
+        data: [probabilities.Low, probabilities.Medium, probabilities.High],
+        backgroundColor: ['#22c55e', '#facc15', '#ef4444'],
+        borderWidth: 0
+      }]
+    },
+    options: {
+      cutout: '65%',
+      plugins: {
+        legend: { labels: { font: { size: 12 } } },
+        tooltip: {
+          backgroundColor: 'rgba(0, 0, 0, 0.8)',
+          callbacks: {
+            label: (ctx) => `${ctx.label}: ${ctx.raw.toFixed(1)}%`
+          }
+        },
+        title: {
+          display: true,
+          text: 'Risk Severity Distribution',
+          font: { size: 16 },
+          color: '#fff',
+          padding: { top: 10, bottom: 10 }
+        }
+      },
+      animation: { duration: 1500 }
+    }
+  });
+  makeChart('riskHorizontalBar', {
+    type: 'bar',
+    data: {
+      labels: topFeatureKeys.map(k => k.replace(/_/g, ' ')),
+      datasets: [{
+        data: topFeatureKeys.map(k => data.factorData[k] || 0),
+        backgroundColor: topFeatureKeys.map(k => (data.factorData[k] || 0) > 70 ? '#ef4444' : (data.factorData[k] || 0) > 40 ? '#facc15' : '#22c55e'),
+        borderWidth: 0
+      }]
+    },
+    options: {
+      indexAxis: 'y',
+      plugins: {
+        legend: { display: false },
+        tooltip: {
+          callbacks: {
+            label: (ctx) => `${ctx.label}: ${ctx.raw.toFixed(1)}%`
+          }
+        }
+      },
+      scales: {
+        x: { ticks: { font: { size: 12 } }, beginAtZero: true, max: 100, grid: { color: 'rgba(255,255,255,0.1)' } },
+        y: { ticks: { font: { size: 12 } }, grid: { display: false } }
+      }
+    }
+  });
+  const confidenceVal = data.model_class_probability;
+  makeChart('confidenceGaugeChart', {
+    type: 'doughnut',
+    data: {
+      datasets: [{
+        data: [confidenceVal, 100 - confidenceVal],
+        backgroundColor: [confidenceVal >= 90 ? '#22c55e' : confidenceVal >= 70 ? '#facc15' : '#ef4444', 'rgba(255,255,255,0.05)'],
+        borderWidth: 0
+      }]
+    },
+    options: {
+      rotation: -90,
+      circumference: 180,
+      cutout: '70%',
+      plugins: {
+        legend: { display: false },
+        tooltip: {
+          callbacks: {
+            label: (ctx) => `Confidence: ${ctx.raw.toFixed(1)}%`
+          }
+        }
+      }
+    }
+  });
+  makeChart('trainingRecoveryChart', {
+    type: 'bar',
+    data: {
+      labels: ['Training Load', 'Recovery'],
+      datasets: [{
+        data: [data.factorData.Training_Load_Score || 0, data.factorData.Recovery_Per_Training || 0],
+        backgroundColor: [(data.factorData.Training_Load_Score || 0) > 70 ? '#ef4444' : '#00e5ff', (data.factorData.Recovery_Per_Training || 0) < 40 ? '#ef4444' : '#10b981'],
+        borderWidth: 0
+      }]
+    },
+    options: {
+      plugins: {
+        legend: { display: false },
+        tooltip: {
+          callbacks: {
+            label: (ctx) => `${ctx.label}: ${ctx.raw.toFixed(1)}%`
+          }
+        }
+      },
+      scales: {
+        x: { ticks: { font: { size: 12 } } },
+        y: { ticks: { font: { size: 12 } }, beginAtZero: true, max: 100, grid: { color: 'rgba(255,255,255,0.1)' } }
+      }
+    }
+  });
+  makeChart('performanceScoreChart', {
+    type: 'doughnut',
+    data: {
+      datasets: [{
+        data: [data.factorData.Experience_Level || 0, 100 - (data.factorData.Experience_Level || 0)],
+        backgroundColor: [(data.factorData.Experience_Level || 0) > 70 ? '#22c55e' : '#facc15', 'rgba(255,255,255,0.05)'],
+        borderWidth: 0
+      }]
+    },
+    options: {
+      cutout: '75%',
+      plugins: {
+        legend: { display: false },
+        tooltip: {
+          callbacks: {
+            label: (ctx) => `Stability: ${ctx.raw.toFixed(1)}%`
+          }
+        }
+      }
+    }
+  });
+  makeChart('fatigueMeterChart', {
+    type: 'doughnut',
+    data: {
+      datasets: [{
+        data: [data.factorData.Fatigue_Level || 0, 100 - (data.factorData.Fatigue_Level || 0)],
+        backgroundColor: [(data.factorData.Fatigue_Level || 0) > 70 ? '#ef4444' : (data.factorData.Fatigue_Level || 0) > 40 ? '#facc15' : '#22c55e', 'rgba(255,255,255,0.05)'],
+        borderWidth: 0
+      }]
+    },
+    options: {
+      rotation: -90,
+      circumference: 180,
+      cutout: '70%',
+      plugins: {
+        legend: { display: false },
+        tooltip: {
+          callbacks: {
+            label: (ctx) => `Fatigue Risk: ${ctx.raw.toFixed(1)}%`
+          }
+        }
+      }
+    }
+  });
+  const downloadPDFBtn = document.getElementById('downloadPDF');
+  if (downloadPDFBtn) {
+    downloadPDFBtn.addEventListener('click', () => window.print());
+  } else {
+    console.error('Element #downloadPDF not found');
+  }
+  const printReportBtn = document.getElementById('printReport');
+  if (printReportBtn) {
+    printReportBtn.addEventListener('click', () => window.print());
+  } else {
+    console.error('Element #printReport not found');
+  }
+  console.log('Dashboard rendering completed');
+});

UI2/style.css ADDED Viewed

	@@ -0,0 +1,3749 @@

+/* Reset & Base Styles */
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+:root {
+  --primary: #6d28d9;
+  --primary-dark: #5b21b6;
+  --secondary: #8b5cf6;
+  --accent: #a78bfa;
+  --background: #0f172a;
+  --surface: #1e293b;
+  --text: #f8fafc;
+  --text-secondary: #e2e8f0;
+  --success: #10b981;
+  --warning: #f59e0b;
+  --error: #ef4444;
+  --glass: rgba(255, 255, 255, 0.07);
+  --glass-border: rgba(255, 255, 255, 0.15);
+  --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
+  --premium-gradient: linear-gradient(135deg, #6d28d9, #4f46e5);
+  --premium-glow: 0 0 20px rgba(139, 92, 246, 0.3);
+}
+body {
+  background: linear-gradient(135deg, var(--background), #000033);
+  font-family: 'Space Grotesk', sans-serif;
+}
+.glassmorphism {
+  background: var(--glass);
+  backdrop-filter: blur(10px);
+  border: 1px solid var(--glass-border);
+  box-shadow: var(--glass-shadow);
+}
+/* Progress Bar */
+.progress-bar {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 0;
+  height: 3px;
+  background: linear-gradient(to right, #00e5ff, #0097fb);
+  z-index: 1001;
+  transition: width 0.2s ease-out;
+}
+/* Loading Animation */
+.loader-wrapper {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: linear-gradient(180deg, #050533, #000022);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  z-index: 9999;
+  transition: opacity 0.5s;
+}
+.loader-wrapper.fade-out {
+  opacity: 0;
+}
+.loader {
+  width: 60px;
+  height: 60px;
+  border: 3px solid rgba(0, 229, 255, 0.3);
+  border-radius: 50%;
+  border-top-color: #00e5ff;
+  animation: spin 1s ease-in-out infinite;
+}
+@keyframes spin {
+  to { transform: rotate(360deg); }
+}
+body {
+  font-family: 'Roboto', sans-serif;
+  background: linear-gradient(180deg, #050533, #000022);
+  color: #ddd;
+  line-height: 1.6;
+  overflow-x: hidden;
+  position: relative;
+  min-height: 100vh;
+}
+/* Light Mode Overrides */
+body.light-mode {
+  background: #f5f5f5;
+  color: #222;
+}
+body.light-mode header {
+  background: #fff;
+  border-bottom: 1px solid #ccc;
+}
+body.light-mode .nav-logo {
+  color: #222;
+}
+body.light-mode .nav-menu a {
+  color: #222;
+}
+/* Navigation Bar */
+header {
+  position: sticky;
+  top: 0;
+  z-index: 1000;
+  background: rgba(0, 0, 0, 0.9);
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.5);
+  border-bottom: 1px solid rgba(0, 229, 255, 0.2);
+}
+.navbar {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  max-width: 1400px;
+  width: 100%;
+  margin: 0 auto;
+  padding: 1.2rem 2.5rem;
+  background: linear-gradient(to right, rgba(15, 23, 42, 0.98), rgba(30, 41, 59, 0.95));
+  backdrop-filter: blur(20px);
+  border-bottom: 1px solid var(--glass-border);
+  position: relative;
+  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.4);
+}
+.navbar::after {
+  content: '';
+  position: absolute;
+  bottom: -1px;
+  left: 0;
+  right: 0;
+  height: 1px;
+  background: linear-gradient(90deg, transparent, var(--accent), transparent);
+  opacity: 0.5;
+}
+.navbar::after {
+  content: '';
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  height: 1px;
+  background: linear-gradient(to right,
+    transparent,
+    var(--accent),
+    transparent
+  );
+  opacity: 0.3;
+}
+.nav-menu a {
+  position: relative;
+  padding: 0.5rem 1rem;
+  color: var(--text);
+  text-decoration: none;
+  font-weight: 500;
+  letter-spacing: 0.5px;
+  transition: all 0.3s ease;
+  background: linear-gradient(90deg,
+    transparent 0%,
+    transparent 50%,
+    rgba(0, 229, 255, 0.1) 50%,
+    transparent 100%
+  );
+  background-size: 200% 100%;
+}
+.nav-menu a:hover {
+  background-position: -100% 0;
+  color: #00e5ff;
+  text-shadow: 0 0 8px rgba(0, 229, 255, 0.5);
+}
+.nav-menu a::after {
+  content: '';
+  position: absolute;
+  bottom: -2px;
+  left: 0;
+  width: 100%;
+  height: 2px;
+  background: var(--accent);
+  transform: scaleX(0);
+  transition: transform 0.3s ease;
+}
+.nav-menu a:hover::after,
+.nav-menu a.active::after {
+  transform: scaleX(1);
+}
+.nav-logo {
+  font-family: 'Orbitron', sans-serif;
+  font-size: 1.8em;
+  color: #00e5ff;
+  text-shadow: 0 0 10px rgba(0, 229, 255, 0.5);
+  font-weight: 700;
+  letter-spacing: 1px;
+}
+.nav-menu {
+  list-style: none;
+  display: flex;
+  gap: 30px;
+}
+.nav-menu li {
+  margin: 0;
+  position: relative;
+}
+.nav-menu a {
+  color: #ddd;
+  text-decoration: none;
+  transition: all 0.3s;
+  font-size: 1.05rem;
+  font-weight: 500;
+  padding: 5px 10px;
+  letter-spacing: 0.5px;
+}
+.nav-menu a:hover {
+  color: #00e5ff;
+}
+.nav-menu a.active,
+.nav-menu a:hover {
+  color: #00e5ff;
+}
+.nav-menu a::after {
+  content: '';
+  position: absolute;
+  width: 0;
+  height: 2px;
+  bottom: -5px;
+  left: 0;
+  background-color: #00e5ff;
+  transition: width 0.3s;
+}
+.nav-menu a:hover::after,
+.nav-menu a.active::after {
+  width: 100%;
+}
+/* Hamburger Menu (Mobile) */
+.hamburger {
+  display: none;
+  flex-direction: column;
+  cursor: pointer;
+}
+.hamburger span {
+  width: 25px;
+  height: 3px;
+  background: #ddd;
+  margin-bottom: 4px;
+  transition: all 0.3s;
+}
+/* Hero Section */
+.hero {
+  position: relative;
+  min-height: 90vh;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+  padding: 40px 0;
+}
+#particle-canvas {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 0;
+}
+.hero-overlay {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(0, 0, 0, 0.7);
+  z-index: 1;
+}
+.hero-content {
+  position: relative;
+  z-index: 2;
+  max-width: 1000px;
+  text-align: center;
+  padding: 5.5rem 3.5rem;
+  background: linear-gradient(165deg,
+    rgba(10, 15, 30, 0.7),
+    rgba(20, 25, 45, 0.4)
+  );
+  border: 1px solid rgba(255, 255, 255, 0.08);
+  box-shadow:
+    0 25px 60px rgba(0, 0, 0, 0.3),
+    0 0 35px rgba(255, 255, 255, 0.05);
+  backdrop-filter: blur(15px);
+  border-radius: 12px;
+  transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
+}
+.hero-content:hover {
+  transform: perspective(1000px) rotateX(0deg) translateY(-10px);
+  box-shadow:
+    0 30px 60px rgba(0, 0, 0, 0.5),
+    0 0 50px rgba(0, 229, 255, 0.3),
+    inset 0 0 120px rgba(0, 229, 255, 0.15);
+}
+.header {
+  font-family: 'Space Grotesk', sans-serif;
+  font-size: 3.8em;
+  margin-bottom: 35px;
+  color: #fff;
+  font-weight: 300;
+  letter-spacing: -0.5px;
+  line-height: 1.1;
+  text-shadow: 0 2px 15px rgba(255, 255, 255, 0.1);
+}
+@keyframes glitchNeon {
+  0% {
+    text-shadow: 0 0 5px #00e5ff, 0 0 10px #00e5ff, 2px 2px #ff5722;
+  }
+  20% {
+    text-shadow: 0 0 10px #00e5ff, 0 0 15px #00e5ff, -2px -2px #ff5722;
+  }
+  40% {
+    text-shadow: 0 0 5px #00e5ff, 0 0 10px #00e5ff, 2px -2px #ff5722;
+  }
+  60% {
+    text-shadow: 0 0 10px #00e5ff, 0 0 15px #00e5ff, -2px 2px #ff5722;
+  }
+  80% {
+    text-shadow: 0 0 5px #00e5ff, 0 0 10px #00e5ff, 2px 2px #ff5722;
+  }
+  100% {
+    text-shadow: 0 0 10px #00e5ff, 0 0 15px #00e5ff, -2px -2px #ff5722;
+  }
+}
+.description {
+  font-size: 1.3em;
+  margin-bottom: 15px;
+  color: #eee;
+  animation: fadeIn 1.5s ease-in-out;
+  line-height: 1.8;
+  max-width: 90%;
+  margin-left: auto;
+  margin-right: auto;
+  font-family: 'Space Grotesk', sans-serif;
+  letter-spacing: 0.2px;
+  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
+}
+.highlight-text {
+  color: #00e5ff;
+  font-weight: 600;
+  position: relative;
+  display: inline-block;
+  padding: 0 5px;
+  background: linear-gradient(120deg, rgba(0, 229, 255, 0.1) 0%, rgba(0, 229, 255, 0.05) 100%);
+  border-radius: 4px;
+  text-shadow: 0 0 10px rgba(0, 229, 255, 0.5);
+}
+@keyframes fadeIn {
+  from { opacity: 0; transform: translateY(20px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+.cta-button {
+  position: relative;
+  overflow: hidden;
+  margin-top: 3rem;
+  padding: 1.4rem 3.5rem;
+  background: linear-gradient(135deg, #00e5ff, #0097fb);
+  border: none;
+  border-radius: 12px;
+  color: #000;
+  font-weight: 600;
+  font-family: 'Space Grotesk', sans-serif;
+  font-size: 1.1rem;
+  letter-spacing: 1.5px;
+  text-transform: uppercase;
+  cursor: pointer;
+  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+  box-shadow:
+    0 10px 25px rgba(0, 229, 255, 0.4),
+    0 0 40px rgba(0, 229, 255, 0.2);
+  backdrop-filter: blur(10px);
+  border: 1px solid rgba(255, 255, 255, 0.1);
+}
+.cta-button::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: -100%;
+  width: 100%;
+  height: 100%;
+  background: linear-gradient(
+    90deg,
+    transparent,
+    rgba(255, 255, 255, 0.3),
+    transparent
+  );
+  transition: 0.5s;
+  animation: shimmer 3s infinite;
+}
+.cta-button:hover {
+  transform: translateY(-5px) scale(1.02);
+  box-shadow:
+    0 15px 30px rgba(0, 229, 255, 0.6),
+    0 0 60px rgba(0, 229, 255, 0.3);
+  background: linear-gradient(135deg, #00e5ff, #00b0ff);
+  letter-spacing: 2px;
+}
+.cta-button:active {
+  transform: translateY(-2px) scale(0.98);
+  box-shadow:
+    0 5px 15px rgba(0, 229, 255, 0.4);
+}
+.cta-button .icon {
+  margin-right: 10px;
+  transition: transform 0.3s ease;
+}
+.cta-button:hover .icon {
+  transform: rotate(360deg) scale(1.2);
+}
+@keyframes shimmer {
+  0% { left: -100%; }
+  50% { left: 100%; }
+  100% { left: 100%; }
+}
+/* Action buttons styling */
+.action-button {
+  padding: 14px 28px;
+  border-radius: 12px;
+  font-family: 'Space Grotesk', sans-serif;
+  font-size: 1em;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  display: inline-flex;
+  align-items: center;
+  gap: 10px;
+  backdrop-filter: blur(10px);
+}
+.action-button.primary {
+  background: linear-gradient(135deg, #00e5ff, #0097fb);
+  color: #000;
+  box-shadow: 0 5px 15px rgba(0, 229, 255, 0.3);
+}
+.action-button.secondary {
+  background: rgba(0, 229, 255, 0.1);
+  color: #00e5ff;
+  border: 1px solid rgba(0, 229, 255, 0.2);
+}
+.action-button.tertiary {
+  background: rgba(255, 255, 255, 0.05);
+  color: #fff;
+}
+.action-button:hover {
+  transform: translateY(-3px);
+  filter: brightness(1.1);
+  box-shadow: 0 8px 25px rgba(0, 229, 255, 0.4);
+}
+.action-button:active {
+  transform: translateY(-1px);
+  filter: brightness(0.95);
+}
+.action-button .action-icon {
+  font-size: 1.2em;
+  transition: transform 0.3s ease;
+}
+.action-button:hover .action-icon {
+  transform: scale(1.2) rotate(10deg);
+}
+.cta-button::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: -100%;
+  width: 100%;
+  height: 100%;
+  background: linear-gradient(
+    90deg,
+    transparent,
+    rgba(255, 255, 255, 0.2),
+    transparent
+  );
+  transition: 0.5s;
+}
+.cta-button:hover::before {
+  left: 100%;
+}
+.cta-button:hover {
+  transform: translateY(-5px);
+  box-shadow:
+    0 15px 30px rgba(109, 40, 217, 0.5),
+    0 0 50px rgba(139, 92, 246, 0.3);
+}
+.cta-button:hover {
+  transform: translateY(-5px);
+  box-shadow:
+    0 15px 30px rgba(0, 229, 255, 0.4),
+    0 0 50px rgba(37, 99, 235, 0.3);
+  background: linear-gradient(135deg, #00e5ff, #2563eb);
+}
+.cta-button::before {
+  content: '';
+  position: absolute;
+  top: -2px;
+  left: -2px;
+  right: -2px;
+  bottom: -2px;
+  background: linear-gradient(270deg, #00e5ff, #2563eb, #00e5ff);
+  background-size: 400% 400%;
+  border-radius: 12px;
+  z-index: -1;
+  animation: borderAnimation 8s ease infinite;
+}
+@keyframes borderAnimation {
+  0% { background-position: 0% 50%; }
+  50% { background-position: 100% 50%; }
+  100% { background-position: 0% 50%; }
+}
+.cta-button:active {
+  transform: translateY(-2px);
+  box-shadow: 0 2px 10px rgba(0, 188, 212, 0.4);
+}
+.icon {
+  margin-right: 12px;
+}
+/* Ripple Effect for Button */
+.cta-button span.ripple {
+  position: absolute;
+  border-radius: 50%;
+  transform: scale(0);
+  animation: rippleEffect 0.6s linear;
+  background: rgba(255, 255, 255, 0.6);
+  pointer-events: none;
+}
+@keyframes rippleEffect {
+  to {
+    transform: scale(4);
+    opacity: 0;
+  }
+}
+/* Scroll Indicator */
+.scroll-indicator {
+  position: absolute;
+  bottom: 20px;
+  left: 50%;
+  transform: translateX(-50%);
+  z-index: 2;
+}
+.arrow {
+  display: block;
+  width: 24px;
+  height: 24px;
+  border-left: 2px solid #00e5ff;
+  border-bottom: 2px solid #00e5ff;
+  transform: rotate(-45deg);
+  animation: bounce 2s infinite;
+}
+@keyframes bounce {
+  0%, 20%, 50%, 80%, 100% { transform: translateX(-50%) translateY(0) rotate(-45deg); }
+  40% { transform: translateX(-50%) translateY(10px) rotate(-45deg); }
+  60% { transform: translateX(-50%) translateY(5px) rotate(-45deg); }
+}
+/* Sections General Styling */
+.section {
+  padding: 80px 20px;
+  position: relative;
+}
+.section::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: 1px;
+  background: linear-gradient(90deg, transparent, rgba(0, 229, 255, 0.3), transparent);
+}
+.container {
+  max-width: 1200px;
+  margin: 0 auto;
+  text-align: center;
+}
+.section h2 {
+  font-family: 'Orbitron', sans-serif;
+  font-size: 2.5em;
+  margin-bottom: 20px;
+  color: #fff;
+  position: relative;
+  display: inline-block;
+  padding-bottom: 15px;
+}
+.section h2::after {
+  content: '';
+  position: absolute;
+  bottom: 0;
+  left: 30%;
+  right: 30%;
+  height: 3px;
+  background: linear-gradient(90deg, transparent, #00e5ff, transparent);
+}
+.section p {
+  font-size: 1.2em;
+  line-height: 1.6;
+  margin: 0 auto 40px;
+  color: #bbb;
+  max-width: 800px;
+}
+/* Features Section */
+.section.features {
+  background: linear-gradient(180deg, #0a0a1a, #1a1a1a);
+}
+.features-list {
+  display: flex;
+  justify-content: center;
+  flex-wrap: wrap;
+  gap: 30px;
+  margin-top: 50px;
+}
+.feature-item {
+  flex: 1 1 300px;
+  max-width: 350px;
+  text-align: center;
+  padding: 3rem 2.5rem;
+  border-radius: 6px;
+  background: rgba(255, 255, 255, 0.02);
+  border: 1px solid rgba(255, 255, 255, 0.05);
+  box-shadow: var(--glass-shadow);
+  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+  position: relative;
+  overflow: hidden;
+}
+.feature-item::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: linear-gradient(45deg, transparent, var(--accent), transparent);
+  opacity: 0;
+  transition: opacity 0.4s ease;
+}
+.feature-item:hover::before {
+  opacity: 0.1;
+}
+.feature-item:hover {
+  transform: translateY(-8px) scale(1.02);
+  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4),
+              0 0 20px rgba(0, 229, 255, 0.2);
+  border-color: var(--accent);
+  background: linear-gradient(145deg,
+    rgba(30, 30, 63, 0.7),
+    rgba(30, 30, 63, 0.3)
+  );
+}
+.feature-item:hover {
+  transform: translateY(-5px);
+  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
+  border-color: var(--primary);
+}
+.feature-item:hover {
+  transform: translateY(-15px);
+  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.4), 0 0 20px rgba(0, 229, 255, 0.2);
+  border-color: rgba(0, 229, 255, 0.3);
+  background: rgba(0, 20, 40, 0.4);
+}
+.feature-icon {
+  margin-bottom: 25px;
+  color: #00e5ff;
+  transition: all 0.5s ease;
+  font-size: 1.2em;
+}
+.feature-item:hover .feature-icon {
+  transform: rotate(360deg) scale(1.2);
+  color: #00e5ff;
+  filter: drop-shadow(0 0 10px rgba(0, 229, 255, 0.8));
+}
+.feature-item h3 {
+  font-family: 'Orbitron', sans-serif;
+  font-size: 1.6em;
+  margin-bottom: 15px;
+  color: #fff;
+  letter-spacing: 1px;
+}
+.feature-item p {
+  font-size: 1.05em;
+  color: #ccc;
+  line-height: 1.6;
+  margin-bottom: 0;
+}
+/* Testimonials Section */
+.section.testimonials {
+  background: #0a0a1a;
+  padding: 60px 20px;
+}
+.testimonial-carousel {
+  position: relative;
+  max-width: 800px;
+  margin: 0 auto;
+  padding: 20px;
+}
+.testimonial-item {
+  display: none;
+  animation: fadeEffect 0.8s;
+  background: rgba(0, 0, 0, 0.4);
+  border-radius: 10px;
+  padding: 30px;
+  border: 1px solid #333;
+  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
+}
+.testimonial-item.active {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  text-align: center;
+}
+@keyframes fadeEffect {
+  from { opacity: 0.4; }
+  to { opacity: 1; }
+}
+.testimonial-avatar {
+  margin-bottom: 20px;
+}
+.avatar-placeholder {
+  width: 80px;
+  height: 80px;
+  border-radius: 50%;
+  background: linear-gradient(135deg, #00bcd4, #0097a7);
+  position: relative;
+  overflow: hidden;
+}
+.avatar-placeholder::before {
+  content: '';
+  position: absolute;
+  top: 20%;
+  left: 50%;
+  transform: translateX(-50%);
+  width: 40%;
+  height: 40%;
+  background: rgba(255, 255, 255, 0.2);
+  border-radius: 50%;
+}
+.testimonial-content p {
+  font-size: 1.1em;
+  line-height: 1.6;
+  margin-bottom: 20px;
+  color: #ddd;
+  font-style: italic;
+}
+.testimonial-content h4 {
+  font-family: 'Orbitron', sans-serif;
+  font-size: 1.2em;
+  margin-bottom: 5px;
+  color: #00e5ff;
+}
+.testimonial-content span {
+  font-size: 0.9em;
+  color: #aaa;
+}
+.testimonial-nav {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin-top: 30px;
+}
+.prev-btn, .next-btn {
+  background: none;
+  border: none;
+  color: #00e5ff;
+  font-size: 1.5em;
+  cursor: pointer;
+  margin: 0 15px;
+  transition: transform 0.3s;
+}
+.prev-btn:hover, .next-btn:hover {
+  transform: scale(1.2);
+}
+.indicator-dots {
+  display: flex;
+  justify-content: center;
+}
+.dot {
+  height: 12px;
+  width: 12px;
+  margin: 0 5px;
+  background-color: #555;
+  border-radius: 50%;
+  cursor: pointer;
+  transition: background-color 0.3s;
+}
+.dot.active {
+  background-color: #00e5ff;
+}
+/* Risk Calculator Section */
+.section.calculator {
+  background: linear-gradient(135deg, #111, #0a192f);
+  padding: 60px 20px;
+}
+/* Progress Stepper */
+.progress-stepper {
+  display: flex;
+  justify-content: space-between;
+  margin-bottom: 40px;
+  padding: 20px 40px;
+  position: relative;
+}
+.progress-stepper::before {
+  content: '';
+  position: absolute;
+  top: 50%;
+  left: 0;
+  right: 0;
+  height: 2px;
+  background: rgba(0, 229, 255, 0.2);
+  transform: translateY(-50%);
+  z-index: 1;
+}
+.step {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  position: relative;
+  z-index: 2;
+  transition: all 0.3s ease;
+}
+.step-number {
+  width: 40px;
+  height: 40px;
+  border-radius: 50%;
+  background: rgba(0, 229, 255, 0.1);
+  border: 2px solid rgba(0, 229, 255, 0.3);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-family: 'Space Grotesk', sans-serif;
+  font-weight: 600;
+  color: #fff;
+  margin-bottom: 10px;
+  transition: all 0.3s ease;
+}
+.step.active .step-number {
+  background: #00e5ff;
+  border-color: #00e5ff;
+  box-shadow: 0 0 20px rgba(0, 229, 255, 0.4);
+}
+.step-label {
+  font-size: 0.9em;
+  color: rgba(255, 255, 255, 0.7);
+  font-family: 'Space Grotesk', sans-serif;
+}
+.step.active .step-label {
+  color: #00e5ff;
+}
+/* Premium Form Styles */
+.form-group input,
+.form-group select {
+  background: linear-gradient(145deg, rgba(0, 20, 40, 0.4), rgba(0, 10, 30, 0.6));
+  border: 1px solid rgba(0, 229, 255, 0.2);
+  border-radius: 12px;
+  padding: 16px 20px;
+  font-family: 'Space Grotesk', sans-serif;
+  color: var(--text);
+  font-size: 1.05em;
+  letter-spacing: 0.5px;
+  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+  box-shadow:
+    inset 0 2px 4px rgba(0, 0, 0, 0.1),
+    0 0 10px rgba(0, 229, 255, 0.05);
+}
+.form-group input:hover,
+.form-group select:hover {
+  border-color: rgba(0, 229, 255, 0.4);
+  box-shadow:
+    inset 0 2px 4px rgba(0, 0, 0, 0.1),
+    0 0 15px rgba(0, 229, 255, 0.1);
+}
+.form-group input:focus,
+.form-group select:focus {
+  border-color: var(--accent);
+  outline: none;
+  background: linear-gradient(145deg, rgba(0, 30, 60, 0.4), rgba(0, 20, 50, 0.6));
+  box-shadow:
+    00 0 0 3px rgba(0, 229, 255, 0.1),
+    0 0 20px rgba(0, 229, 255, 0.2);
+}
+.form-group label {
+  font-weight: 500;
+  font-size: 1.1em;
+  color: var(--text);
+  margin-bottom: 12px;
+  display: flex;
+  align-items: center;
+  letter-spacing: 0.5px;
+}
+.form-group input:focus,
+.form-group select:focus {
+  border-color: #00e5ff;
+  box-shadow: 0 0 15px rgba(0, 229, 255, 0.2);
+  background: rgba(0, 20, 40, 0.5);
+}
+.form-group label {
+  margin-bottom: 10px;
+  display: flex;
+  align-items: center;
+  font-weight: 500;
+  color: rgba(255, 255, 255, 0.9);
+}
+/* Validation Styles */
+.form-group.error input,
+.form-group.error select {
+  border-color: #ef4444 !important;
+  box-shadow: 0 0 15px rgba(239, 68, 68, 0.2) !important;
+  background: rgba(239, 68, 68, 0.05) !important;
+  animation: shake 0.5s;
+}
+.form-group.error label {
+  color: #ef4444;
+}
+.validation-message.error {
+  color: #ef4444;
+  font-size: 0.85em;
+  margin-top: 8px;
+  padding: 8px 12px;
+  background: rgba(239, 68, 68, 0.1);
+  border-radius: 6px;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+.validation-message.error strong {
+  font-weight: 600;
+}
+@keyframes shake {
+  0%, 100% { transform: translateX(0); }
+  25% { transform: translateX(-8px); }
+  75% { transform: translateX(8px); }
+}
+.form-group.success input {
+  border-color: #22c55e;
+}
+.validation-message {
+  font-size: 0.85em;
+  margin-top: 5px;
+  display: flex;
+  align-items: center;
+  gap: 5px;
+}
+.validation-message.error {
+  color: #ef4444;
+}
+.validation-message.success {
+  color: #22c55e;
+}
+.calculator-container {
+  max-width: 800px;
+  margin: 0 auto;
+  background: rgba(26, 26, 26, 0.7);
+  border-radius: 10px;
+  padding: 30px;
+  border: 1px solid #333;
+  box-shadow: 0 0 20px rgba(0, 229, 255, 0.2);
+}
+.assessment-form {
+  margin-bottom: 30px;
+}
+.form-row {
+  display: flex;
+  justify-content: space-between;
+  flex-wrap: wrap;
+  margin-bottom: 20px;
+}
+.form-group {
+  flex: 0 0 48%;
+  margin-bottom: 15px;
+}
+.form-section-title {
+  width: 100%;
+  font-family: 'Orbitron', sans-serif;
+  color: #00e5ff;
+  margin: 20px 0 10px 0;
+  font-size: 1.2em;
+  border-bottom: 1px solid #333;
+  padding-bottom: 5px;
+}
+.form-group label {
+  display: block;
+  margin-bottom: 8px;
+  color: #ddd;
+  font-family: 'Orbitron', sans-serif;
+}
+.form-group input,
+.form-group select {
+  width: 100%;
+  padding: 10px;
+  border-radius: 5px;
+  border: 1px solid #444;
+  background: rgba(0, 0, 0, 0.3);
+  color: #fff;
+  font-size: 1em;
+}
+.form-group input:focus,
+.form-group select:focus {
+  outline: none;
+  border-color: #00e5ff;
+  box-shadow: 0 0 5px rgba(0, 229, 255, 0.5);
+}
+.calculate-btn {
+  width: 100%;
+  margin-top: 25px;
+  background: linear-gradient(135deg, #00bcd4, #0097a7);
+  border: none;
+}
+.calculate-btn:hover {
+  background: linear-gradient(135deg, #00e5ff, #00b0c7);
+}
+/* Premium Result Container Styles */
+.result-container {
+  margin-top: 35px;
+  padding: 30px;
+  max-width: 680px;
+  margin-left: auto;
+  margin-right: auto;
+  background: linear-gradient(165deg,
+    rgba(0, 20, 40, 0.95),
+    rgba(0, 10, 30, 0.98)
+  );
+  border-radius: 20px;
+  border: 2px solid rgba(0, 229, 255, 0.35);
+  box-shadow:
+    0 20px 40px rgba(0, 0, 0, 0.6),
+    0 0 80px rgba(0, 229, 255, 0.2),
+    inset 0 0 60px rgba(0, 229, 255, 0.1);
+  backdrop-filter: blur(20px);
+  transition: all 0.7s cubic-bezier(0.4, 0, 0.2, 1);
+  transform: translateY(20px) scale(0.95);
+  opacity: 0;
+  position: relative;
+  overflow: hidden;
+  display: grid;
+  gap: 25px;
+  grid-template-columns: 1fr;
+}
+.result-container::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: -100%;
+  width: 200%;
+  height: 100%;
+  background: linear-gradient(
+    90deg,
+    transparent,
+    rgba(0, 229, 255, 0.1),
+    transparent
+  );
+  animation: shimmer 8s infinite linear;
+}
+@keyframes shimmer {
+  0% { transform: translateX(-100%); }
+  100% { transform: translateX(100%); }
+}
+.result-container.visible {
+  transform: translateY(0) scale(1);
+  opacity: 1;
+  animation: resultAppear 1.2s cubic-bezier(0.4, 0, 0.2, 1);
+}
+.result-container:hover {
+  transform: translateY(-15px) scale(1.02);
+  box-shadow:
+    0 50px 100px rgba(0, 0, 0, 0.8),
+    0 0 200px rgba(0, 229, 255, 0.35),
+    inset 0 0 140px rgba(0, 229, 255, 0.25);
+  border-color: rgba(0, 229, 255, 0.8);
+  border-width: 2px;
+  background: linear-gradient(165deg,
+    rgba(0, 25, 50, 0.95),
+    rgba(0, 15, 35, 0.98)
+  );
+}
+.result-container::after {
+  content: '';
+  position: absolute;
+  inset: 0;
+  background: radial-gradient(
+    800px circle at var(--mouse-x, 50%) var(--mouse-y, 50%),
+    rgba(0, 229, 255, 0.06),
+    transparent 40%
+  );
+  opacity: 0;
+  transition: opacity 0.3s;
+}
+.result-container:hover::after {
+  opacity: 1;
+}
+.result-container.visible {
+  transform: translateY(0) scale(1);
+  opacity: 1;
+  animation: resultAppear 0.8s cubic-bezier(0.4, 0, 0.2, 1),
+             pulseGlow 3s infinite;
+}
+@keyframes pulseGlow {
+  0% { box-shadow: 0 20px 40px rgba(0, 0, 0, 0.6), 0 0 80px rgba(0, 229, 255, 0.2); }
+  50% { box-shadow: 0 20px 40px rgba(0, 0, 0, 0.6), 0 0 100px rgba(0, 229, 255, 0.3); }
+  100% { box-shadow: 0 20px 40px rgba(0, 0, 0, 0.6), 0 0 80px rgba(0, 229, 255, 0.2); }
+}
+.result-container:hover::after {
+  content: '';
+  position: absolute;
+  inset: 0;
+  background: radial-gradient(
+    circle at var(--x, 50%) var(--y, 50%),
+    rgba(0, 229, 255, 0.1) 0%,
+    transparent 50%
+  );
+  pointer-events: none;
+  transition: opacity 0.3s;
+}
+@keyframes resultAppear {
+  0% {
+    transform: translateY(40px) scale(0.95);
+    opacity: 0;
+  }
+  100% {
+    transform: translateY(0) scale(1);
+    opacity: 1;
+  }
+}
+.result-container::before {
+  content: '';
+  position: absolute;
+  top: -1px;
+  left: -1px;
+  right: -1px;
+  bottom: -1px;
+  background: linear-gradient(45deg,
+    transparent,
+    rgba(0, 229, 255, 0.1),
+    transparent
+  );
+  border-radius: 24px;
+  z-index: -1;
+  animation: borderGlow 6s linear infinite;
+}
+@keyframes borderGlow {
+  0%, 100% { opacity: 0.5; }
+  50% { opacity: 1; }
+}
+.premium-badge {
+  background: linear-gradient(135deg, #00e5ff, #0097fb);
+  padding: 6px 12px;
+  border-radius: 20px;
+  font-size: 0.9em;
+  font-weight: 500;
+  color: #000;
+  box-shadow: 0 2px 10px rgba(0, 229, 255, 0.3);
+}
+.update-badge {
+  background: linear-gradient(135deg, #22c55e, #16a34a);
+  padding: 4px 10px;
+  border-radius: 12px;
+  font-size: 0.8em;
+  color: #fff;
+}
+.chart-controls,
+.trend-period {
+  display: flex;
+  gap: 10px;
+  margin-bottom: 15px;
+}
+.chart-toggle,
+.period-toggle {
+  background: rgba(0, 229, 255, 0.1);
+  border: 1px solid rgba(0, 229, 255, 0.2);
+  padding: 8px 16px;
+  border-radius: 20px;
+  color: var(--text);
+  cursor: pointer;
+  transition: all 0.3s ease;
+}
+.chart-toggle.active,
+.period-toggle.active {
+  background: var(--accent);
+  color: #000;
+  box-shadow: 0 0 15px rgba(0, 229, 255, 0.3);
+}
+.insights-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+  gap: 20px;
+  margin-top: 20px;
+}
+.insight-card {
+  background: linear-gradient(145deg,
+    rgba(0, 20, 40, 0.4),
+    rgba(0, 10, 30, 0.6)
+  );
+  padding: 25px;
+  border-radius: 16px;
+  border: 1px solid rgba(0, 229, 255, 0.15);
+  transition: all 0.3s ease;
+}
+.insight-card:hover {
+  transform: translateY(-5px);
+  box-shadow: 0 10px 20px rgba(0, 229, 255, 0.1);
+  border-color: rgba(0, 229, 255, 0.3);
+}
+.insight-icon {
+  font-size: 2em;
+  margin-bottom: 15px;
+}
+.insight-card h5 {
+  color: var(--accent);
+  font-size: 1.2em;
+  margin-bottom: 10px;
+}
+.insight-card p {
+  color: var(--text-secondary);
+  font-size: 0.95em;
+  line-height: 1.6;
+}
+.result-container.visible {
+  transform: translateY(0);
+  opacity: 1;
+}
+.result-container:hover {
+  transform: translateY(-5px);
+  box-shadow:
+    0 25px 50px rgba(0, 0, 0, 0.5),
+    0 0 120px rgba(0, 229, 255, 0.15),
+    inset 0 0 80px rgba(0, 229, 255, 0.08);
+}
+.result-dashboard {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 30px;
+  animation: fadeInUp 0.8s ease-out;
+}
+@keyframes fadeInUp {
+  from {
+    opacity: 0;
+    transform: translateY(20px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+.result-card {
+  padding: 25px;
+  background: linear-gradient(145deg, rgba(0, 20, 40, 0.6), rgba(0, 10, 30, 0.8));
+  border-radius: 15px;
+  border: 1px solid rgba(0, 229, 255, 0.2);
+  transition: transform 0.3s ease, box-shadow 0.3s ease;
+}
+.result-card::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 2px;
+  background: linear-gradient(90deg, transparent, rgba(0, 229, 255, 0.5), transparent);
+  animation: shimmer 2s infinite;
+}
+.result-card:hover {
+  transform: translateY(-8px) scale(1.02);
+  box-shadow:
+    0 15px 30px rgba(0, 0, 0, 0.3),
+    0 0 20px rgba(0, 229, 255, 0.2);
+  border-color: rgba(0, 229, 255, 0.4);
+}
+.stat-item {
+  background: linear-gradient(145deg, rgba(0, 20, 40, 0.4), rgba(0, 10, 30, 0.6));
+  border-radius: 12px;
+  padding: 20px;
+  text-align: center;
+  transition: all 0.4s ease;
+  border: 1px solid rgba(0, 229, 255, 0.15);
+  position: relative;
+  overflow: hidden;
+}
+.stat-item::after {
+  content: '';
+  position: absolute;
+  top: -50%;
+  left: -50%;
+  width: 200%;
+  height: 200%;
+  background: radial-gradient(circle, rgba(0, 229, 255, 0.1) 0%, transparent 70%);
+  opacity: 0;
+  transition: opacity 0.4s ease;
+}
+.stat-item:hover::after {
+  opacity: 1;
+}
+.stat-value {
+  font-size: 2em;
+  font-weight: 600;
+  color: #00e5ff;
+  text-shadow: 0 0 10px rgba(0, 229, 255, 0.5);
+  margin: 10px 0;
+  font-family: 'Space Grotesk', sans-serif;
+}
+.recommendations {
+  grid-column: span 2;
+  background: linear-gradient(165deg, rgba(0, 20, 40, 0.5), rgba(0, 10, 30, 0.7));
+  border-radius: 15px;
+  padding: 30px;
+  border: 1px solid rgba(0, 229, 255, 0.2);
+}
+.recommendation-list li {
+  background: linear-gradient(145deg, rgba(0, 20, 40, 0.4), rgba(0, 10, 30, 0.6));
+  border-radius: 10px;
+  padding: 15px 20px;
+  margin: 10px 0;
+  border-left: 3px solid #00e5ff;
+  transition: all 0.3s ease;
+  display: flex;
+  align-items: center;
+  gap: 15px;
+}
+.recommendation-list li:hover {
+  transform: translateX(10px);
+  background: linear-gradient(145deg, rgba(0, 20, 40, 0.6), rgba(0, 10, 30, 0.8));
+  box-shadow: 0 5px 15px rgba(0, 229, 255, 0.1);
+}
+.result-dashboard {
+  display: flex;
+  flex-direction: column;
+  gap: 25px;
+}
+.result-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding-bottom: 15px;
+  border-bottom: 1px solid rgba(0, 229, 255, 0.2);
+}
+.result-header h3 {
+  font-family: 'Orbitron', sans-serif;
+  color: #00e5ff;
+  margin: 0;
+  font-size: 1.5em;
+}
+.timestamp {
+  color: #888;
+  font-size: 0.9em;
+}
+.result-grid {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 20px;
+  margin-top: 20px;
+}
+.result-card {
+  background: rgba(0, 20, 40, 0.3);
+  border-radius: 12px;
+  padding: 20px;
+  border: 1px solid rgba(0, 229, 255, 0.1);
+  transition: transform 0.3s ease, box-shadow 0.3s ease;
+}
+.result-card:hover {
+  transform: translateY(-5px);
+  box-shadow: 0 5px 15px rgba(0, 229, 255, 0.2);
+}
+.result-card h4 {
+  color: #fff;
+  margin: 0 0 15px 0;
+  font-family: 'Orbitron', sans-serif;
+  font-size: 1.1em;
+}
+.primary-metrics {
+  grid-column: span 2;
+  background: linear-gradient(135deg, rgba(0, 20, 40, 0.4), rgba(0, 40, 80, 0.4));
+}
+/* Gauge Styles */
+.gauge-container {
+  width: 100%;
+  max-width: 160px;
+  margin: 20px auto;
+  padding: 16px;
+  background: linear-gradient(145deg,
+    rgba(0, 15, 35, 0.4),
+    rgba(0, 10, 25, 0.6)
+  );
+  border-radius: 50%;
+  box-shadow:
+    0 10px 25px rgba(0, 0, 0, 0.3),
+    inset 0 0 30px rgba(0, 229, 255, 0.08);
+  border: 1px solid rgba(0, 229, 255, 0.15);
+  transition: transform 0.3s ease;
+}
+.gauge-container:hover {
+  transform: scale(1.05);
+  box-shadow:
+    0 15px 35px rgba(0, 0, 0, 0.4),
+    inset 0 0 40px rgba(0, 229, 255, 0.12);
+}
+.gauge {
+  width: 65%;
+  height: auto;
+}
+.gauge-background {
+  fill: none;
+  stroke: rgba(255, 255, 255, 0.1);
+  stroke-width: 12;
+}
+.gauge-value {
+  fill: none;
+  stroke: #00e5ff;
+  stroke-width: 12;
+  stroke-linecap: round;
+  transform: rotate(-90deg);
+  transform-origin: 60px 60px;
+  transition: stroke-dasharray 0.8s ease;
+}
+.gauge-text {
+  font-family: 'Orbitron', sans-serif;
+  font-size: 24px;
+  fill: #fff;
+  dominant-baseline: middle;
+}
+.recommendations-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+  gap: 15px;
+  margin-top: 15px;
+}
+.recommendation-item {
+  background: rgba(0, 229, 255, 0.1);
+  padding: 15px;
+  border-radius: 8px;
+  border-left: 3px solid #00e5ff;
+  transition: transform 0.3s ease;
+}
+.recommendation-item:hover {
+  transform: translateX(5px);
+}
+@media (max-width: 768px) {
+  .result-grid {
+    grid-template-columns: 1fr;
+  }
+  .primary-metrics {
+    grid-column: span 1;
+  }
+}
+.result-container.hidden {
+  display: none;
+}
+.prediction-result {
+  text-align: left;
+}
+.risk-stats {
+  display: flex;
+  justify-content: space-between;
+  margin: 25px 0;
+  gap: 20px;
+}
+.stat-item {
+  flex: 1;
+  padding: 15px;
+  background: rgba(0, 0, 0, 0.3);
+  border-radius: 10px;
+  text-align: center;
+  border: 1px solid rgba(0, 229, 255, 0.1);
+  transition: transform 0.3s ease;
+}
+.stat-item:hover {
+  transform: translateY(-5px);
+}
+.stat-item.low { border-color: #22c55e; }
+.stat-item.medium { border-color: #facc15; }
+.stat-item.high { border-color: #ef4444; }
+.stat-label {
+  display: block;
+  font-size: 0.9em;
+  color: #888;
+  margin-bottom: 5px;
+}
+.stat-value {
+  display: block;
+  font-size: 1.4em;
+  color: #00e5ff;
+  font-weight: bold;
+}
+.risk-visualization {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 25px;
+  margin: 30px 0;
+}
+.chart-container {
+  background: linear-gradient(145deg, rgba(0, 20, 40, 0.4), rgba(0, 10, 30, 0.6));
+  padding: 25px;
+  border-radius: 16px;
+  border: 1px solid rgba(0, 229, 255, 0.15);
+  transition: all 0.4s ease;
+}
+.chart-container:hover {
+  transform: translateY(-5px);
+  border-color: rgba(0, 229, 255, 0.3);
+  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
+}
+.chart-container h4 {
+  color: #fff;
+  margin-bottom: 20px;
+  font-family: 'Space Grotesk', sans-serif;
+  font-size: 1.2em;
+  text-align: center;
+}
+.recommendations-section {
+  margin-top: 35px;
+  padding: 25px;
+  background: rgba(0, 20, 40, 0.4);
+  border-radius: 12px;
+  border: 1px solid rgba(0, 229, 255, 0.15);
+}
+.recommendations-section h4 {
+  font-size: 1.3em;
+  color: #fff;
+  margin-bottom: 20px;
+  font-family: 'Space Grotesk', sans-serif;
+  letter-spacing: 0.5px;
+}
+.recommendation-list {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+  display: grid;
+  gap: 15px;
+}
+.recommendation-list li {
+  padding: 16px 20px;
+  background: linear-gradient(135deg,
+    rgba(0, 229, 255, 0.08),
+    rgba(0, 229, 255, 0.03)
+  );
+  border-radius: 10px;
+  border-left: 2px solid #00e5ff;
+  transition: all 0.3s ease;
+  display: flex;
+  align-items: flex-start;
+  gap: 12px;
+}
+.recommendation-list li:hover {
+  transform: translateX(5px);
+  background: rgba(0, 229, 255, 0.1);
+}
+.recommendation-icon {
+  font-size: 1.2em;
+  color: #00e5ff;
+}
+.recommendation-summary {
+  font-size: 1em;
+  color: #eee;
+  line-height: 1.5;
+}
+.recommendation-detail {
+  font-size: 0.9em;
+  color: #aaa;
+  margin-top: 10px;
+  padding-top: 10px;
+  border-top: 1px solid rgba(255, 255, 255, 0.1);
+}
+.professional-recommendations {
+  margin-top: 30px;
+  padding: 20px;
+  background: rgba(0, 20, 40, 0.4);
+  border-radius: 10px;
+  border: 1px solid rgba(0, 229, 255, 0.2);
+}
+.pro-recommendation-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+  gap: 20px;
+  margin-top: 20px;
+}
+.pro-recommendation-item {
+  background: rgba(0, 229, 255, 0.05);
+  padding: 20px;
+  border-radius: 10px;
+  text-align: center;
+  transition: transform 0.3s ease;
+}
+.pro-recommendation-item:hover {
+  transform: translateY(-5px);
+}
+.pro-icon {
+  font-size: 2em;
+  margin-bottom: 10px;
+  display: block;
+}
+.pro-recommendation-item h5 {
+  color: #00e5ff;
+  font-family: 'Orbitron', sans-serif;
+  margin: 10px 0;
+  font-size: 1.1em;
+}
+.pro-recommendation-item p {
+  color: #ddd;
+  font-size: 0.9em;
+  margin: 0;
+}
+@keyframes fadeIn {
+  from { opacity: 0; transform: translateY(10px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+.risk-meter {
+  margin-bottom: 30px;
+}
+.risk-indicator {
+  position: relative;
+  height: 15px;
+  background: linear-gradient(to right, #4CAF50, #FFC107, #F44336);
+  border-radius: 10px;
+  margin-bottom: 5px;
+}
+.indicator-marker {
+  position: absolute;
+  top: -10px;
+  width: 20px;
+  height: 35px;
+  background: #fff;
+  border-radius: 3px;
+  transform: translateX(-50%);
+  transition: left 0.5s ease-in-out;
+}
+.risk-labels {
+  display: flex;
+  justify-content: space-between;
+}
+.risk-labels span {
+  font-size: 0.8em;
+  color: #aaa;
+}
+.risk-summary {
+  text-align: left;
+}
+.risk-summary h3 {
+  font-family: 'Orbitron', sans-serif;
+  color: #fff;
+  margin-bottom: 15px;
+}
+.risk-summary p {
+  margin-bottom: 20px;
+  color: #ddd;
+}
+.recommendation-box {
+  background: rgba(0, 0, 0, 0.3);
+  border-radius: 5px;
+  padding: 15px;
+  border-left: 3px solid #00e5ff;
+}
+.recommendation-box h4 {
+  font-family: 'Orbitron', sans-serif;
+  color: #00e5ff;
+  margin-bottom: 10px;
+}
+.recommendation-box ul {
+  padding-left: 20px;
+  color: #ccc;
+}
+.recommendation-box li {
+  margin-bottom: 8px;
+}
+/* About Section */
+.section.about {
+  background: linear-gradient(180deg, #0a0a1a, #000022);
+  padding: 0 0 80px;
+}
+.about-hero {
+  background: linear-gradient(rgba(0,0,0,0.7), rgba(0,0,0,0.7)), url('https://images.unsplash.com/photo-1517836357463-d25dfeac3438?auto=format&fit=crop&w=1920&q=80');
+  background-size: cover;
+  background-position: center;
+  padding: 120px 20px;
+  text-align: center;
+  margin-bottom: 60px;
+}
+.about-title {
+  font-family: 'Space Grotesk', sans-serif;
+  font-size: 3.5em;
+  color: #fff;
+  margin-bottom: 20px;
+  text-shadow: 0 2px 10px rgba(0,229,255,0.3);
+}
+.about-subtitle {
+  font-family: 'Outfit', sans-serif;
+  font-size: 1.4em;
+  color: #00e5ff;
+  max-width: 600px;
+  margin: 0 auto;
+}
+.about-container {
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 0 20px;
+}
+.about-grid {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 30px;
+  margin-bottom: 60px;
+}
+.about-card {
+  padding: 40px 30px;
+  text-align: center;
+  transition: transform 0.3s ease;
+}
+.about-card:hover {
+  transform: translateY(-10px);
+}
+.card-icon {
+  font-size: 2.5em;
+  margin-bottom: 20px;
+}
+.about-card h2 {
+  font-family: 'Space Grotesk', sans-serif;
+  font-size: 1.8em;
+  color: #00e5ff;
+  margin-bottom: 20px;
+}
+.about-card p {
+  font-family: 'Outfit', sans-serif;
+  font-size: 1.1em;
+  line-height: 1.6;
+  color: #ddd;
+}
+.about-features {
+  padding: 50px 30px;
+  margin-bottom: 60px;
+}
+.about-features h2 {
+  font-family: 'Space Grotesk', sans-serif;
+  font-size: 2.2em;
+  color: #00e5ff;
+  margin-bottom: 40px;
+}
+.features-grid {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: 30px;
+}
+.feature-item {
+  text-align: center;
+}
+.feature-item h3 {
+  font-family: 'Space Grotesk', sans-serif;
+  font-size: 1.3em;
+  color: #fff;
+  margin-bottom: 15px;
+}
+.feature-item p {
+  font-family: 'Outfit', sans-serif;
+  font-size: 1em;
+  color: #bbb;
+}
+.about-stats {
+  padding: 50px 30px;
+  margin-bottom: 60px;
+}
+.about-stats h2 {
+  font-family: 'Space Grotesk', sans-serif;
+  font-size: 2.2em;
+  color: #00e5ff;
+  margin-bottom: 40px;
+}
+.stats-grid {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 30px;
+}
+.stat-item {
+  text-align: center;
+}
+.stat-number {
+  font-family: 'Space Grotesk', sans-serif;
+  font-size: 2.5em;
+  color: #00e5ff;
+  display: block;
+  margin-bottom: 10px;
+}
+.stat-label {
+  font-family: 'Outfit', sans-serif;
+  font-size: 1.1em;
+  color: #bbb;
+}
+.about-vision {
+  padding: 50px 30px;
+  text-align: center;
+}
+.about-vision h2 {
+  font-family: 'Space Grotesk', sans-serif;
+  font-size: 2.2em;
+  color: #00e5ff;
+  margin-bottom: 30px;
+}
+.about-vision p {
+  font-family: 'Outfit', sans-serif;
+  font-size: 1.2em;
+  line-height: 1.8;
+  color: #ddd;
+  max-width: 800px;
+  margin: 0 auto;
+}
+@media (max-width: 992px) {
+  .about-grid {
+    grid-template-columns: repeat(2, 1fr);
+  }
+  .features-grid {
+    grid-template-columns: repeat(2, 1fr);
+  }
+}
+@media (max-width: 768px) {
+  .about-hero {
+    padding: 80px 20px;
+  }
+  .about-title {
+    font-size: 2.5em;
+  }
+  .about-grid {
+    grid-template-columns: 1fr;
+  }
+  .features-grid {
+    grid-template-columns: 1fr;
+  }
+  .stats-grid {
+    grid-template-columns: 1fr;
+  }
+  .stat-item {
+    margin-bottom: 30px;
+  }
+}
+.section-title {
+  font-family: 'Orbitron', sans-serif;
+  font-size: 3em;
+  color: #fff;
+  margin-bottom: 30px;
+  text-shadow: 0 2px 10px rgba(0, 229, 255, 0.3);
+}
+.section-description {
+  font-size: 1.3em;
+  color: #bbb;
+  margin-bottom: 50px;
+  max-width: 800px;
+  margin-left: auto;
+  margin-right: auto;
+  line-height: 1.8;
+}
+.about-section {
+  text-align: left;
+  margin-bottom: 30px;
+  padding: 30px;
+  background: rgba(255, 255, 255, 0.05);
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  backdrop-filter: blur(10px);
+  box-shadow: 0 4px 15px rgba(0, 229, 255, 0.1);
+  border-radius: 10px;
+}
+.about-section h3 {
+  font-family: 'Orbitron', sans-serif;
+  font-size: 1.8em;
+  color: #00e5ff;
+  margin-bottom: 15px;
+  border-bottom: 2px solid rgba(0, 229, 255, 0.3);
+  padding-bottom: 5px;
+}
+.about-section p {
+  font-size: 1.1em;
+  color: #ddd;
+  line-height: 1.7;
+  margin-bottom: 15px;
+}
+.about-list {
+  list-style-type: disc;
+  margin-left: 20px;
+  color: #ddd;
+  font-size: 1.1em;
+  margin-top: 10px;
+}
+/* FAQ Section */
+.section.faq {
+  background: linear-gradient(180deg, #080818, #0a0a1a);
+  padding: 80px 20px;
+}
+.faq-accordion {
+  max-width: 850px;
+  margin: 30px auto 0;
+}
+.faq-item {
+  margin-bottom: 20px;
+  border: 1px solid #333;
+  border-radius: 10px;
+  overflow: hidden;
+  background: rgba(0, 10, 30, 0.4);
+  transition: all 0.4s ease;
+}
+.faq-item:hover {
+  box-shadow: 0 0 20px rgba(0, 229, 255, 0.2);
+  border-color: rgba(0, 229, 255, 0.2);
+}
+.faq-question {
+  padding: 20px 25px;
+  font-family: 'Orbitron', sans-serif;
+  color: #fff;
+  cursor: pointer;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  transition: all 0.3s ease;
+  letter-spacing: 0.5px;
+  font-size: 1.15em;
+}
+.faq-icon {
+  color: #00e5ff;
+  font-size: 1.5em;
+  transition: all 0.3s ease;
+}
+.faq-item:hover .faq-question {
+  color: #00e5ff;
+}
+.faq-answer {
+  max-height: 0;
+  overflow: hidden;
+  transition: max-height 0.5s ease, padding 0.5s ease;
+  background: rgba(0, 0, 0, 0.2);
+}
+.faq-item.active .faq-answer {
+  max-height: 500px;
+  padding: 5px 25px 25px;
+}
+.faq-item.active .faq-question {
+  background: rgba(0, 229, 255, 0.1);
+  border-bottom: 1px solid rgba(0, 229, 255, 0.1);
+}
+.faq-item.active .faq-icon {
+  transform: rotate(180deg);
+}
+.faq-answer p {
+  color: #ddd;
+  margin: 0;
+  text-align: left;
+  line-height: 1.7;
+  font-size: 1.05em;
+}
+/* Footer */
+.footer {
+  background: #080810;
+  padding: 30px 20px;
+  text-align: center;
+  color: #999;
+  font-size: 0.95em;
+  position: relative;
+  border-top: 1px solid rgba(0, 229, 255, 0.1);
+}
+.footer::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: 1px;
+  background: linear-gradient(90deg, transparent, rgba(0, 229, 255, 0.2), transparent);
+}
+.footer p {
+  margin: 0;
+}
+.footer a {
+  color: #00e5ff;
+  text-decoration: none;
+  transition: color 0.3s;
+}
+.footer a:hover {
+  color: #fff;
+}
+/* Scroll to Top Button */
+.scroll-top {
+  position: fixed;
+  bottom: 100px;
+  right: 30px;
+  background: linear-gradient(135deg, #00e5ff, #0097fb);
+  width: 45px;
+  height: 45px;
+  border-radius: 50%;
+  display: none;
+  justify-content: center;
+  align-items: center;
+  color: #fff;
+  cursor: pointer;
+  box-shadow: 0 2px 10px rgba(0, 229, 255, 0.3);
+  transition: all 0.3s ease;
+  z-index: 998;
+}
+.scroll-top:hover {
+  transform: translateY(-3px);
+  box-shadow: 0 4px 15px rgba(0, 229, 255, 0.5);
+}
+.scroll-top.visible {
+  display: flex;
+  animation: fadeIn 0.3s ease;
+}
+/* Responsive Design */
+/* Large screens */
+@media (min-width: 1200px) {
+  .navbar {
+    padding: 15px 2%;
+  }
+  .container {
+    width: 80%;
+  }
+  .hero-content {
+    max-width: 900px;
+  }
+}
+/* Medium screens */
+@media (max-width: 992px) {
+  .section {
+    padding: 60px 20px;
+  }
+  .hero-content {
+    padding: 30px 15px;
+  }
+  .header {
+    font-size: 2.8em;
+  }
+}
+/* Small screens */
+@media (max-width: 768px) {
+  .hero-content {
+    padding: 25px 15px;
+  }
+  .header {
+    font-size: 2.3em;
+  }
+  .description {
+    font-size: 1.1em;
+  }
+  .cta-button {
+    font-size: 1em;
+    padding: 12px 25px;
+  }
+  .section h2 {
+    font-size: 2em;
+  }
+  .features-list {
+    flex-direction: column;
+    align-items: center;
+  }
+  .feature-item {
+    max-width: 100%;
+    margin-bottom: 20px;
+  }
+  .faq-question {
+    font-size: 1em;
+    padding: 15px 20px;
+  }
+  .nav-menu {
+    display: none;
+    flex-direction: column;
+    position: absolute;
+    top: 70px;
+    right: 0;
+    background: rgba(0, 0, 20, 0.95);
+    width: 100%;
+    border-bottom: 1px solid rgba(0, 229, 255, 0.2);
+    padding: 10px 0;
+    margin-right: 0;
+    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
+    z-index: 1000;
+  }
+  .nav-menu li {
+    margin: 10px 0;
+  }
+  .nav-menu.active {
+    display: flex;
+  }
+  .hamburger {
+    display: flex;
+    z-index: 1001;
+  }
+  .hamburger span {
+    width: 25px;
+    height: 3px;
+    background: #ddd;
+    margin-bottom: 5px;
+    transition: all 0.3s;
+  }
+  .form-group {
+    flex: 0 0 100%;
+  }
+}
+/* Extra small screens */
+@media (max-width: 480px) {
+  .header {
+    font-size: 2em;
+  }
+  .hero-content {
+    padding: 20px 15px;
+  }
+  .cta-button {
+    font-size: 0.9em;
+    padding: 10px 20px;
+  }
+  .section {
+    padding: 40px 15px;
+  }
+  .section h2 {
+    font-size: 1.8em;
+  }
+}
+/* Chatbot Widget */
+#chatbot-widget {
+  position: fixed;
+  bottom: 80px;
+  right: 30px;
+  width: 380px;
+  height: 65vh;
+  max-height: 600px;
+  background: linear-gradient(165deg, rgba(0, 20, 40, 0.95), rgba(0, 10, 30, 0.98));
+  border: 1px solid rgba(0, 229, 255, 0.3);
+  border-radius: 20px;
+  box-shadow:
+    0 10px 40px rgba(0, 229, 255, 0.2),
+    0 20px 60px rgba(0, 0, 0, 0.5),
+    inset 0 0 100px rgba(0, 229, 255, 0.05);
+  display: flex;
+  flex-direction: column;
+  z-index: 9999;
+  overflow: hidden;
+  transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
+  backdrop-filter: blur(20px);
+  font-family: 'Space Grotesk', sans-serif;
+  transform-origin: bottom right;
+  transform: scale(0);
+  opacity: 0;
+}
+#chatbot-widget.open {
+  transform: scale(1);
+  opacity: 1;
+}
+.chat-widget.closed {
+  display: none;
+}
+#chat-toggle {
+  position: fixed;
+  bottom: 20px;
+  right: 30px;
+  background: linear-gradient(135deg, #00e5ff, #0097fb);
+  color: #000;
+  border: none;
+  border-radius: 50%;
+  width: 60px;
+  height: 60px;
+  font-size: 1.6em;
+  cursor: pointer;
+  z-index: 9999;
+  box-shadow: 0 4px 15px rgba(0,229,255,0.4);
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+#chat-toggle:hover {
+  transform: scale(1.1);
+  box-shadow: 0 6px 20px rgba(0,229,255,0.6);
+}
+#chat-toggle.active {
+  transform: rotate(45deg);
+}
+.chat-header {
+  padding: 20px;
+  background: linear-gradient(135deg, rgba(0, 229, 255, 0.15), rgba(0, 10, 30, 0.9));
+  color: #fff;
+  font-weight: 600;
+  text-align: center;
+  font-family: 'Space Grotesk', sans-serif;
+  border-bottom: 1px solid rgba(0, 229, 255, 0.15);
+  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
+  letter-spacing: 1.5px;
+  font-size: 1.2em;
+  position: relative;
+  overflow: hidden;
+}
+.chat-header::after {
+  content: '';
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  height: 1px;
+  background: linear-gradient(90deg, transparent, rgba(0, 229, 255, 0.5), transparent);
+}
+.ai-icon {
+  background: linear-gradient(135deg, #00e5ff, #0097fb);
+  padding: 4px 8px;
+  border-radius: 8px;
+  font-style: normal;
+  font-weight: 600;
+  font-size: 0.9em;
+  margin-right: 10px;
+  box-shadow: 0 2px 8px rgba(0, 229, 255, 0.3);
+}
+.chat-body {
+  flex: 1;
+  padding: 20px;
+  overflow-y: auto;
+  color: #eee;
+  font-size: 0.95em;
+  background: rgba(0,0,0,0.3);
+  font-family: 'Roboto', sans-serif;
+  scrollbar-width: thin;
+  scrollbar-color: rgba(0, 229, 255, 0.5) rgba(0, 0, 0, 0.2);
+}
+.chat-body::-webkit-scrollbar {
+  width: 6px;
+}
+.chat-body::-webkit-scrollbar-track {
+  background: rgba(0, 0, 0, 0.2);
+}
+.chat-body::-webkit-scrollbar-thumb {
+  background: rgba(0, 229, 255, 0.5);
+  border-radius: 3px;
+}
+#chatInput {
+  border: none;
+  border-top: 1px solid rgba(0, 229, 255, 0.2);
+  padding: 15px 20px;
+  background: rgba(0, 10, 40, 0.95);
+  color: #fff;
+  font-size: 1em;
+  font-family: 'Roboto', sans-serif;
+  transition: all 0.3s ease;
+}
+#chatInput:focus {
+  outline: none;
+  background: rgba(0, 20, 50, 0.95);
+  box-shadow: inset 0 1px 10px rgba(0, 229, 255, 0.1);
+}
+#chatInput:focus {
+  outline: none;
+  border-color: #00e5ff;
+}
+.chat-msg {
+  margin-bottom: 20px;
+  padding: 18px 22px;
+  word-wrap: break-word;
+  border-radius: 16px;
+  max-width: 85%;
+  position: relative;
+  animation: fadeIn 0.3s ease;
+  line-height: 1.6;
+  font-size: 0.95em;
+  backdrop-filter: blur(10px);
+  box-shadow:
+    0 4px 15px rgba(0, 0, 0, 0.2),
+    0 0 20px rgba(0, 229, 255, 0.05);
+  transition: all 0.3s ease;
+  border: 1px solid rgba(0, 229, 255, 0.1);
+}
+.chat-msg.user-msg {
+  background: linear-gradient(135deg, rgba(0, 229, 255, 0.15), rgba(0, 229, 255, 0.05));
+  margin-left: auto;
+  border-bottom-right-radius: 4px;
+}
+.chat-msg.bot-msg {
+  background: linear-gradient(135deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.02));
+  margin-right: auto;
+  border-bottom-left-radius: 4px;
+}
+#chatInput {
+  border: none;
+  border-top: 1px solid rgba(0, 229, 255, 0.15);
+  padding: 18px 25px;
+  background: rgba(0, 20, 50, 0.8);
+  color: #fff;
+  font-size: 1em;
+  font-family: 'Space Grotesk', sans-serif;
+  transition: all 0.3s ease;
+  box-shadow: inset 0 2px 15px rgba(0, 0, 0, 0.2);
+}
+#chatInput:focus {
+  outline: none;
+  background: rgba(0, 30, 60, 0.9);
+  box-shadow:
+    inset 0 2px 20px rgba(0, 0, 0, 0.3),
+    0 0 20px rgba(0, 229, 255, 0.1);
+}
+.chat-msg:hover {
+  transform: translateY(-2px);
+}
+.chat-msg.user-msg {
+  background: rgba(0, 229, 255, 0.1);
+  margin-left: auto;
+  border-bottom-right-radius: 4px;
+}
+.chat-msg.bot-msg {
+  background: rgba(255, 255, 255, 0.05);
+  margin-right: auto;
+  border-bottom-left-radius: 4px;
+}
+.chat-msg strong {
+  color: #00e5ff;
+  display: block;
+  margin-bottom: 5px;
+  font-size: 0.9em;
+}
+.ai-icon {
+  background: linear-gradient(135deg, #00bcd4, #0097a7);
+  padding: 2px 6px;
+  border-radius: 4px;
+  font-style: normal;
+  font-weight: 600;
+  font-size: 0.9em;
+  margin-right: 8px;
+}
+.chat-icon {
+  background: linear-gradient(135deg, #00bcd4, #0097a7);
+  padding: 4px 8px;
+  border-radius: 4px;
+  font-style: normal;
+  font-weight: 500;
+  font-size: 0.8em;
+}
+/* Shake Animation for Error Feedback */
+@keyframes shake {
+  0% { transform: translateX(0); }
+  25% { transform: translateX(-5px); }
+  50% { transform: translateX(5px); }
+  75% { transform: translateX(-5px); }
+  100% { transform: translateX(0); }
+}
+.shake {
+  animation: shake 0.5s;
+}
+.tooltip-icon {
+  position: relative;
+  display: inline-block;
+  width: 18px;
+  height: 18px;
+  line-height: 18px;
+  background: linear-gradient(135deg, #00bcd4, #0097a7);
+  color: #fff;
+  font-size: 12px;
+  font-weight: bold;
+  text-align: center;
+  border-radius: 50%;
+  margin-left: 8px;
+  cursor: help;
+  box-shadow: 0 2px 5px rgba(0, 229, 255, 0.3);
+  transition: all 0.3s ease;
+}
+.tooltip-icon:hover {
+  transform: scale(1.1);
+  box-shadow: 0 0 10px rgba(0, 229, 255, 0.5);
+}
+.tooltip-icon .tooltip-text {
+  visibility: hidden;
+  opacity: 0;
+  width: max-content;
+  background: rgba(0, 10, 20, 0.95);
+  color: #fff;
+  text-align: left;
+  padding: 8px 12px;
+  border-radius: 8px;
+  position: absolute;
+  z-index: 10;
+  top: 130%;
+  left: 50%;
+  transform: translateX(-50%);
+  white-space: nowrap;
+  font-size: 13px;
+  box-shadow: 0 4px 15px rgba(0, 229, 255, 0.2),
+              0 0 30px rgba(0, 229, 255, 0.1);
+  border: 1px solid rgba(0, 229, 255, 0.2);
+  backdrop-filter: blur(10px);
+  transition: all 0.3s ease;
+}
+.tooltip-icon:hover .tooltip-text {
+  visibility: visible;
+  opacity: 1;
+}
+/* New Risk Meter Section */
+#risk-meter-section {
+  padding: 40px 20px;
+  background: #111;
+  color: #fff;
+  text-align: center;
+}
+#risk-meter {
+  width: 300px;
+  height: 300px;
+  margin: 0 auto;
+  background: rgba(0, 0, 0, 0.5);
+  border: 2px solid #00e5ff;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+/* Pulse Animation for Risk Meter */
+@keyframes pulse {
+  0% { transform: scale(1); }
+  50% { transform: scale(1.05); }
+  100% { transform: scale(1); }
+}
+#risk-meter.active {
+  animation: pulse 1s infinite;
+}
+/* New Live Preview Charts Section */
+#live-charts-section {
+  padding: 40px 20px;
+  background: #0a0a1a;
+  color: #fff;
+  text-align: center;
+}
+#liveChart {
+  max-width: 100%;
+  margin: 20px auto;
+  background: #222;
+  border: 1px solid #00e5ff;
+  border-radius: 10px;
+  box-shadow: 0 0 10px rgba(0, 229, 255, 0.5);
+}
+/* RESULT SUMMARY CARD */
+.result-summary {
+  background: linear-gradient(165deg,
+    rgba(0, 25, 50, 0.92),
+    rgba(0, 15, 35, 0.98)
+  );
+  border: 1px solid rgba(0, 229, 255, 0.25);
+  border-radius: 16px;
+  padding: 32px;
+  margin: 30px auto;
+  max-width: 900px;
+  width: 92%;
+  box-shadow:
+    0 20px 40px rgba(0, 0, 0, 0.5),
+    0 0 100px rgba(0, 229, 255, 0.1),
+    inset 0 0 60px rgba(0, 229, 255, 0.05);
+  text-align: left;
+  animation: fadeInUp 0.6s cubic-bezier(0.4, 0, 0.2, 1);
+  position: relative;
+  overflow: hidden;
+  backdrop-filter: blur(12px);
+  transition: all 0.4s ease;
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: 24px;
+}
+.result-summary:hover {
+  transform: translateY(-5px);
+  box-shadow:
+    0 25px 50px rgba(0, 0, 0, 0.7),
+    0 0 120px rgba(0, 229,255, 0.2),
+    inset 0 0 100px rgba(0, 229, 255, 0.15);
+  border-color: rgba(0, 229, 255, 0.5);
+}
+.result-summary::before {
+  content: '';
+  position: absolute;
+  top: -50%;
+  left: -50%;
+  width: 200%;
+  height: 200%;
+  background: radial-gradient(circle, rgba(0, 229, 255, 0.1) 0%, transparent 70%);
+  transform: rotate(45deg);
+  animation: rotateGradient 10s linear infinite;
+}
+@keyframes rotateGradient {
+  from { transform: rotate(0deg); }
+  to { transform: rotate(360deg); }
+}
+.risk-details {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+  gap: 20px;
+  padding: 24px;
+  background: linear-gradient(145deg,
+    rgba(0, 20, 40, 0.4),
+    rgba(0, 10, 30, 0.6)
+  );
+  border-radius: 12px;
+  border: 1px solid rgba(0, 229, 255, 0.15);
+  position: relative;
+  overflow: hidden;
+}
+.risk-detail-item {
+  background: linear-gradient(145deg,
+    rgba(0, 25, 50, 0.4),
+    rgba(0, 15, 35, 0.6)
+  );
+  padding: 25px;
+  border-radius: 16px;
+  border: 1px solid rgba(0, 229, 255, 0.15);
+  transition: all 0.4s ease;
+  position: relative;
+  overflow: hidden;
+}
+.risk-detail-item:hover {
+  transform: translateY(-5px);
+  border-color: rgba(0, 229, 255, 0.3);
+  box-shadow:
+    0 10px 20px rgba(0, 0, 0, 0.3),
+    0 0 30px rgba(0, 229, 255, 0.1);
+}
+.risk-detail-label {
+  font-size: 0.95em;
+  color: rgba(255, 255, 255, 0.8);
+  margin-bottom: 12px;
+  font-family: 'Space Grotesk', sans-serif;
+  letter-spacing: 0.5px;
+}
+.risk-detail-value {
+  font-size: 1.8em;
+  color: #00e5ff;
+  font-weight: 600;
+  text-shadow: 0 0 15px rgba(0, 229, 255, 0.4);
+  font-family: 'Space Grotesk', sans-serif;
+}
+.risk-detail-item {
+  background: rgba(0, 229, 255, 0.05);
+  padding: 15px;
+  border-radius: 12px;
+  transition: all 0.3s ease;
+}
+.risk-detail-item:hover {
+  background: rgba(0, 229, 255, 0.1);
+  transform: translateY(-3px);
+}
+.risk-detail-label {
+  font-size: 0.9em;
+  color: rgba(255, 255, 255, 0.7);
+  margin-bottom: 8px;
+}
+.risk-detail-value {
+  font-size: 1.2em;
+  color: #00e5ff;
+  font-weight: 600;
+}
+.interactive-chart {
+  margin-top: 30px;
+  padding: 20px;
+  background: rgba(0, 20, 40, 0.3);
+  border-radius: 15px;
+  border: 1px solid rgba(0, 229, 255, 0.2);
+}
+.risk-breakdown {
+  padding: 20px;
+}
+.risk-breakdown h4 {
+  color: #fff;
+  margin-bottom: 20px;
+  font-family: 'Space Grotesk', sans-serif;
+  font-size: 1.2em;
+}
+.risk-factors {
+  display: grid;
+  gap: 15px;
+}
+.risk-factor {
+  display: grid;
+  gap: 8px;
+}
+.factor-label {
+  color: #eee;
+  font-size: 0.9em;
+  display: flex;
+  justify-content: space-between;
+}
+.factor-bar {
+  height: 12px;
+  background: rgba(0, 0, 0, 0.2);
+  border-radius: 6px;
+  overflow: hidden;
+}
+.factor-fill {
+  height: 100%;
+  background: linear-gradient(90deg, #00e5ff, #0097fb);
+  width: 0;
+  transition: width 1s ease-out;
+  border-radius: 6px;
+}
+.chart-controls {
+  display: flex;
+  justify-content: center;
+  gap: 15px;
+  margin-bottom: 20px;
+}
+.chart-control-btn {
+  padding: 8px 16px;
+  background: rgba(0, 229, 255, 0.1);
+  border: 1px solid rgba(0, 229, 255, 0.2);
+  border-radius: 20px;
+  color: #fff;
+  cursor: pointer;
+  transition: all 0.3s ease;
+}
+.chart-control-btn:hover {
+  background: rgba(0, 229, 255, 0.2);
+  transform: translateY(-2px);
+}
+.chart-control-btn.active {
+  background: #00e5ff;
+  color: #000;
+}
+.summary-badge {
+  font-family: 'Orbitron', sans-serif;
+  font-size: 1.2em;
+  font-weight: 600;
+  padding: 8px 16px;
+  border-radius: 20px;
+  background: var(--premium-gradient);
+  color: #000;
+  box-shadow: 0 0 15px rgba(0, 229, 255, 0.4);
+  margin-bottom: 10px;
+}
+.summary-percentage {
+  font-size: 2em;
+  font-weight: bold;
+  color: #00e5ff;
+  margin-bottom: 8px;
+}
+.summary-interpretation {
+  font-size: 1em;
+  color: #ccc;
+  font-family: 'Roboto', sans-serif;
+}
+/* Gauge Numeric Labels */
+.gauge-numeric-labels {
+  display: flex;
+  justify-content: space-between;
+  padding: 5px 15px 0;
+  font-size: 0.9em;
+  color: #00e5ff;
+}
+/* Expandable Recommendations */
+.recommendation-list .expandable {
+  cursor: pointer;
+  transition: background 0.3s ease;
+}
+.recommendation-list .expandable:hover {
+  background: rgba(0, 229, 255, 0.15);
+}
+.recommendation-detail {
+  font-size: 0.85em;
+  color: #aaa;
+  margin-top: 5px;
+  padding-left: 25px;
+  transition: max-height 0.3s ease;
+}
+/* Download Report Button */
+.download-report-container {
+  text-align: center;
+  margin-top: 25px;
+}
+.download-report {
+  padding: 12px 24px;
+  border: none;
+  border-radius: 8px;
+  background: linear-gradient(135deg, #22c55e, #16a34a);
+  color: #fff;
+  font-family: 'Space Grotesk', sans-serif;
+  font-size: 1em;
+  cursor: pointer;
+  transition: all 0.3s ease;
+  box-shadow: 0 5px 15px rgba(0, 229, 255, 0.2);
+}
+.download-report:hover {
+  transform: translateY(-3px);
+  box-shadow: 0 10px 20px rgba(0, 229, 255, 0.3);
+}
+/* RESULT SUMMARY ENHANCEMENTS */
+.result-summary {
+  background: linear-gradient(165deg, rgba(0, 25, 50, 0.92), rgba(0, 15, 35, 0.98));
+  border: 2px solid rgba(0, 229, 255, 0.3);
+  border-radius: 24px;
+  padding: 40px;
+  margin: 40px auto;
+  max-width: 800px;
+  width: 90%;
+  box-shadow:
+    0 25px 50px rgba(0, 0, 0, 0.7),
+    0 0 120px rgba(0, 229, 255, 0.2),
+    inset 0 0 80px rgba(0, 229, 255, 0.1);
+  text-align: center;
+  position: relative;
+  animation: fadeInUp 0.8s cubic-bezier(0.4, 0, 0.2, 1);
+  backdrop-filter: blur(15px);
+  overflow: hidden;
+}
+.result-summary::before {
+  content: '';
+  position: absolute;
+  inset: -1px;
+  background: linear-gradient(45deg,
+    transparent,
+    rgba(0, 229, 255, 0.2),
+    transparent
+  );
+  animation: borderGlow 4s linear infinite;
+}
+@keyframes borderGlow {
+  0%, 100% { opacity: 0.3; }
+  50% { opacity: 0.7; }
+}
+.summary-header h3 {
+  font-size: 1.4em;
+  color: #fff;
+  margin-bottom: 20px;
+  font-family: 'Space Grotesk', sans-serif;
+  letter-spacing: 0.5px;
+}
+.summary-badge {
+  display: inline-block;
+  padding: 6px 16px;
+  border-radius: 25px;
+  font-size: 0.95em;
+  font-weight: 600;
+  margin-bottom: 15px;
+  background: linear-gradient(135deg, #00e5ff, #0097fb);
+  color: #000;
+  letter-spacing: 0.5px;
+}
+.summary-percentage {
+  font-size: 2.4em;
+  font-weight: 700;
+  color: #00e5ff;
+  margin: 10px 0;
+  text-shadow: 0 0 12px rgba(0, 229, 255, 0.4);
+  font-family: 'Space Grotesk', sans-serif;
+}
+.summary-interpretation {
+  font-size: 0.95em;
+  color: #eee;
+  margin: 10px 0;
+  line-height: 1.4;
+}
+.summary-confidence {
+  font-size: 0.9em;
+  color: #aaa;
+  margin-top: 15px;
+  padding-top: 15px;
+  border-top: 1px solid rgba(255, 255, 255, 0.1);
+}
+.result-summary:hover::after {
+  content: attr(title);
+  position: absolute;
+  bottom: -30px;
+  left: 50%;
+  transform: translateX(-50%);
+  background: rgba(0,0,0,0.7);
+  color: #fff;
+  padding: 4px 8px;
+  border-radius: 4px;
+  font-size: 0.8em;
+}
+.summary-badge {
+  font-family: 'Orbitron', sans-serif;
+  font-size: 1.2em;
+  font-weight: 600;
+  padding: 8px 16px;
+  border-radius: 20px;
+  background: var(--premium-gradient);
+  color: #000;
+  box-shadow: 0 0 15px rgba(0, 229, 255, 0.4);
+  margin-bottom: 10px;
+}
+.summary-percentage {
+  font-size: 2em;
+  font-weight: bold;
+  color: #00e5ff;
+  margin-bottom: 8px;
+}
+.summary-interpretation {
+  font-size: 1em;
+  color: #ccc;
+  font-family: 'Roboto', sans-serif;
+}
+/* Gauge Numeric Labels (if not already defined) */
+.gauge-numeric-labels {
+  display: flex;
+  justify-content: space-between;
+  padding: 5px 15px 0;
+  font-size: 0.9em;
+  color: #00e5ff;
+}
+/* Expandable Recommendations */
+.recommendation-list .expandable {
+  cursor: pointer;
+  transition: background 0.3s ease;
+}
+.recommendation-list .expandable:hover {
+  background: rgba(0, 229, 255, 0.15);
+}
+.recommendation-detail {
+  font-size: 0.85em;
+  color: #aaa;
+  margin-top: 5px;
+  padding-left: 25px;
+  transition: max-height 0.3s ease;
+}
+/* Report Actions */
+.report-actions {
+  text-align: center;
+  margin-top: 20px;
+}
+.report-actions button {
+  margin: 0 10px;
+  padding: 10px 20px;
+  border: none;
+  border-radius: 8px;
+  font-family: 'Space Grotesk', sans-serif;
+  cursor: pointer;
+  transition: transform 0.3s ease, box-shadow 0.3s ease;
+}
+.download-report {
+  background: linear-gradient(135deg, #22c55e, #16a34a);
+  color: #fff;
+  box-shadow: 0 5px 15px rgba(0, 229, 255, 0.2);
+}
+.copy-link {
+  background: linear-gradient(135deg, #facc15, #eab308);
+  color: #000;
+  box-shadow: 0 5px 15px rgba(250, 204, 21, 0.2);
+}
+.email-report {
+  background: linear-gradient(135deg, #ef4444, #dc2626);
+  color: #fff;
+  box-shadow: 0 5px 15px rgba(239, 68, 68, 0.2);
+}
+.report-actions button:hover {
+  transform: translateY(-3px);
+  box-shadow: 0 10px 20px rgba(0, 229, 255, 0.3);
+}
+/* Enhanced Report Styles */
+.dashboard-container {
+  max-width: 1600px;
+  margin: 40px auto;
+  padding: 0 40px;
+}
+.dashboard-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 25px 35px;
+  margin-bottom: 40px;
+  border-radius: 20px;
+}
+.header-left .logo-title {
+  font-size: 2.2em;
+  margin-bottom: 8px;
+  background: linear-gradient(135deg, #00e5ff, #0097fb);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+}
+.report-meta {
+  display: flex;
+  gap: 15px;
+}
+.meta-tag {
+  background: rgba(0, 229, 255, 0.1);
+  padding: 6px 12px;
+  border-radius: 20px;
+  font-size: 0.9em;
+  color: #00e5ff;
+}
+.confidence-pill {
+  background: linear-gradient(135deg, rgba(0, 229, 255, 0.2), rgba(0, 151, 251, 0.2));
+  padding: 10px 20px;
+  border-radius: 25px;
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+.confidence-value {
+  font-size: 1.2em;
+  color: #00e5ff;
+  font-weight: 600;
+}
+.risk-overview-grid {
+  display: grid;
+  grid-template-columns: 2fr 1fr;
+  gap: 30px;
+  margin-bottom: 40px;
+}
+.overview-card {
+  padding: 30px;
+  border-radius: 20px;
+}
+.overview-card.primary-risk {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+.risk-level h3 {
+  font-size: 1.4em;
+  margin-bottom: 15px;
+  color: #fff;
+}
+.risk-value {
+  font-size: 3em;
+  font-weight: 700;
+  color: #00e5ff;
+  text-shadow: 0 0 20px rgba(0, 229, 255, 0.4);
+}
+.risk-gauge {
+  text-align: center;
+}
+.gauge {
+  width: 180px;
+  height: 180px;
+}
+.likelihood-value {
+  font-size: 2em;
+  color: #00e5ff;
+  margin-top: 15px;
+}
+.profile-grid {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 20px;
+}
+.analysis-grid {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 30px;
+  margin-bottom: 40px;
+}
+.analysis-card {
+  padding: 25px;
+  border-radius: 20px;
+}
+.analysis-card h3 {
+  margin-bottom: 20px;
+  color: #fff;
+  font-size: 1.3em;
+}
+.insights-section {
+  padding: 35px;
+  border-radius: 20px;
+  margin-bottom: 40px;
+}
+.insights-grid {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 30px;
+  margin-top: 25px;
+}
+.insight-card {
+  background: rgba(0, 229, 255, 0.05);
+  padding: 25px;
+  border-radius: 15px;
+  border: 1px solid rgba(0, 229, 255, 0.1);
+}
+.insight-card h4 {
+  color: #00e5ff;
+  margin-bottom: 20px;
+  font-size: 1.2em;
+}
+.insights-list li {
+  margin-bottom: 15px;
+  padding: 12px;
+  background: rgba(0, 229, 255, 0.05);
+  border-radius: 8px;
+  border-left: 3px solid #00e5ff;
+}
+.recommendations-list {
+  display: grid;
+  gap: 15px;
+}
+.report-actions {
+  display: flex;
+  justify-content: center;
+  gap: 20px;
+  padding: 25px;
+  border-radius: 20px;
+}
+.action-button {
+  padding: 12px 25px;
+  border-radius: 12px;
+  font-family: 'Space Grotesk', sans-serif;
+  font-size: 1em;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  cursor: pointer;
+  transition: all 0.3s ease;
+}
+.action-button.primary {
+  background: linear-gradient(135deg, #00e5ff, #0097fb);
+  color: #000;
+}
+.action-button.secondary {
+  background: rgba(0, 229, 255, 0.1);
+  color: #00e5ff;
+  border: 1px solid rgba(0, 229, 255, 0.2);
+}
+.action-button.tertiary {
+  background: rgba(255, 255, 255, 0.05);
+  color: #fff;
+}
+.action-button:hover {
+  transform: translateY(-3px);
+  box-shadow: 0 5px 15px rgba(0, 229, 255, 0.2);
+}
+@media (max-width: 1200px) {
+  .risk-overview-grid {
+    grid-template-columns: 1fr;
+  }
+  .analysis-grid {
+    grid-template-columns: 1fr;
+  }
+  .insights-grid {
+    grid-template-columns: 1fr;
+  }
+}
+@media (max-width: 768px) {
+  .dashboard-container {
+    padding: 20px;
+  }
+  .dashboard-header {
+    flex-direction: column;
+    text-align: center;
+    gap: 20px;
+  }
+  .report-actions {
+    flex-direction: column;
+  }
+}
+.report-header {
+  text-align: center;
+  margin-bottom: 40px;
+}
+.report-header h1 {
+  font-family: 'Space Grotesk', sans-serif;
+  font-size: 2.5em;
+  color: #00e5ff;
+  margin-bottom: 15px;
+}
+.report-meta {
+  color: #aaa;
+  font-size: 0.9em;
+}
+.report-meta span {
+  margin: 0 10px;
+}
+.visualization-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+  gap: 20px;
+  margin: 20px 0;
+  width: 100%;
+}
+.viz-card {
+  min-height: 300px;
+  max-height: 400px;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+}
+canvas {
+  max-width: 100% !important;
+  height: auto !important;
+  aspect-ratio: 16/9;
+  object-fit: contain;
+}
+.viz-card {
+  background: linear-gradient(145deg, rgba(0, 20, 40, 0.4), rgba(0, 10, 30, 0.6));
+  border-radius: 16px;
+  padding: 25px;
+  border: 1px solid rgba(0, 229, 255, 0.15);
+}
+.viz-card h3 {
+  color: #fff;
+  margin-bottom: 20px;
+  font-family: 'Space Grotesk', sans-serif;
+}
+.recommendations-panel {
+  background: linear-gradient(165deg, rgba(0, 20, 40, 0.5), rgba(0, 10, 30, 0.7));
+  border-radius: 16px;
+  padding: 30px;
+  margin: 40px 0;
+}
+.recommendation-item {
+  background: rgba(0, 229, 255, 0.05);
+  padding: 15px;
+  margin: 10px 0;
+  border-radius: 8px;
+  border-left: 3px solid #00e5ff;
+}
+.report-actions {
+  text-align: center;
+  margin-top: 40px;
+}
+.action-button {
+  background: linear-gradient(135deg, #00e5ff, #0097fb);
+  color: #000;
+  border: none;
+  padding: 12px 25px;
+  border-radius: 8px;
+  margin: 0 10px;
+  cursor: pointer;
+  font-family: 'Space Grotesk', sans-serif;
+  transition: all 0.3s ease;
+}
+.action-button:hover {
+  transform: translateY(-3px);
+  box-shadow: 0 5px 15px rgba(0, 229, 255, 0.3);
+}
+/* Media Queries */
+@media (max-width: 768px) {
+  .visualization-grid {
+    grid-template-columns: 1fr;
+  }
+  .report-page {
+    padding: 20px;
+  }
+}
+/* Media Queries for Result Container */
+@media (max-width: 600px) {
+  .result-dashboard {
+    grid-template-columns: 1fr;
+  }
+}
+/* Enhanced Dashboard Styles */
+.dashboard-container {
+  max-width: 1400px;
+  margin: 0 auto;
+  padding: 20px;
+  width: 100%;
+  box-sizing: border-box;
+  background: linear-gradient(165deg, rgba(0, 25, 50, 0.92), rgba(0, 15, 35, 0.98));
+  min-height: 100vh;
+  overflow: hidden;
+  position: relative;
+}
+.dashboard-card {
+  background: linear-gradient(145deg, rgba(0, 20, 40, 0.4), rgba(0, 10, 30, 0.6));
+  border-radius: 16px;
+  padding: 30px;
+  border: 1px solid rgba(0, 229, 255, 0.15);
+  box-shadow:
+    0 10px 30px rgba(0, 0, 0, 0.4),
+    0 0 60px rgba(0, 229, 255, 0.1);
+  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+  backdrop-filter: blur(10px);
+  position: relative;
+  overflow: hidden;
+}
+.dashboard-card:hover {
+  transform: translateY(-5px);
+  border-color: rgba(0, 229, 255, 0.3);
+  box-shadow:
+    0 15px 40px rgba(0, 0, 0, 0.5),
+    0 0 80px rgba(0, 229, 255, 0.2);
+}
+.dashboard-card h3 {
+  color: #00e5ff;
+  font-family: 'Space Grotesk', sans-serif;
+  font-size: 1.4em;
+  margin-bottom: 25px;
+  padding-bottom: 15px;
+  border-bottom: 1px solid rgba(0, 229, 255, 0.2);
+}
+.stat-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+  gap: 20px;
+  margin-top: 20px;
+}
+.stat-item {
+  background: linear-gradient(145deg, rgba(0, 25, 50, 0.4), rgba(0, 15, 35, 0.6));
+  padding: 20px;
+  border-radius: 12px;
+  border: 1px solid rgba(0, 229, 255, 0.1);
+  transition: all 0.3s ease;
+}
+.stat-item:hover {
+  transform: translateY(-3px);
+  border-color: rgba(0, 229, 255, 0.3);
+  box-shadow: 0 5px 15px rgba(0, 229, 255, 0.1);
+}
+.stat-label {
+  font-size: 0.9em;
+  color: #aaa;
+  display: block;
+  margin-bottom: 8px;
+}
+.stat-value {
+  font-size: 1.8em;
+  color: #00e5ff;
+  font-weight: 600;
+  display: block;
+  text-shadow: 0 0 10px rgba(0, 229, 255, 0.3);
+}
+.insights-list {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+  display: grid;
+  gap: 15px;
+}
+.insights-list li {
+  padding: 15px;
+  background: rgba(0, 229, 255, 0.05);
+  border-radius: 10px;
+  border-left: 3px solid #00e5ff;
+  transition: all 0.3s ease;
+}
+.insights-list li:hover {
+  transform: translateX(5px);
+  background: rgba(0, 229, 255, 0.1);
+}
+.action-button {
+  background: linear-gradient(135deg, #00e5ff, #0097fb);
+  color: #000;
+  border: none;
+  padding: 12px 25px;
+  border-radius: 12px;
+  font-family: 'Space Grotesk', sans-serif;
+  font-size: 1em;
+  cursor: pointer;
+  transition: all 0.3s ease;
+  margin: 0 10px;
+  box-shadow: 0 5px 15px rgba(0, 229, 255, 0.2);
+}
+.action-button:hover {
+  transform: translateY(-3px);
+  box-shadow: 0 8px 25px rgba(0, 229, 255, 0.3);
+}
+.gauge-container {
+  max-width: 200px;
+  margin: 20px auto;
+  position: relative;
+}
+canvas {
+  max-width: 100%;
+  height: auto;
+  margin: 15px 0;
+}
+@media (max-width: 768px) {
+  .dashboard-container {
+    padding: 20px;
+  }
+  .dashboard-grid {
+    grid-template-columns: 1fr;
+  }
+  .stat-grid {
+    grid-template-columns: 1fr;
+  }
+  .action-button {
+    width: 100%;
+    margin: 10px 0;
+  }
+}
+.glow-title {
+  text-align: center;
+  font-family: 'Orbitron', sans-serif;
+  color: #00e5ff;
+  font-size: 2.4rem;
+  text-shadow: 0 0 10px rgba(0, 229, 255, 0.7);
+  margin-bottom: 20px;
+}
+.dashboard-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(380px, 1fr));
+  gap: 30px;
+  margin-top: 30px;
+}
+.dashboard-card {
+  background: linear-gradient(145deg, rgba(0,20,40,0.5), rgba(0,10,30,0.7));
+  border-radius: 16px;
+  padding: 25px;
+  border: 1px solid rgba(0,229,255,0.15);
+  box-shadow: 0 10px 20px rgba(0, 229, 255, 0.1);
+  transition: 0.3s ease all;
+}
+.dashboard-card:hover {
+  transform: translateY(-4px);
+  box-shadow: 0 0 25px rgba(0, 229, 255, 0.15);
+}
+.stat-grid {
+  display: flex;
+  justify-content: space-between;
+  flex-wrap: wrap;
+  gap: 20px;
+}
+.stat-item {
+  flex: 1;
+  background: rgba(0,229,255,0.05);
+  padding: 15px;
+  border-radius: 12px;
+  text-align: center;
+  border: 1px solid rgba(0,229,255,0.1);
+}
+.stat-label {
+  font-size: 0.9em;
+  color: #aaa;
+}
+.stat-value {
+  font-size: 1.6em;
+  color: #00e5ff;
+  font-weight: bold;
+  margin-top: 6px;
+}
+.insights-list {
+  list-style: none;
+  padding-left: 0;
+  margin-top: 15px;
+}
+.insights-list li {
+  padding: 12px 16px;
+  margin-bottom: 12px;
+  background: rgba(0, 229, 255, 0.05);
+  border-left: 3px solid #00e5ff;
+  border-radius: 8px;
+  color: #ccc;
+  line-height: 1.6;
+}
+.dashboard-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  background: linear-gradient(145deg, #0a0a23, #141436);
+  padding: 20px 30px;
+  border-bottom: 2px solid rgba(0,229,255,0.15);
+  box-shadow: 0 4px 20px rgba(0,229,255,0.1);
+  border-radius: 12px;
+  margin-bottom: 20px;
+}
+.logo-title {
+  font-family: 'Orbitron', sans-serif;
+  font-size: 1.8rem;
+  color: #00e5ff;
+  text-shadow: 0 0 8px rgba(0,229,255,0.5);
+  margin: 0;
+}
+.meta-box {
+  text-align: right;
+  color: #bbb;
+  font-family: 'Space Grotesk', sans-serif;
+  font-size: 0.95rem;
+}
+.meta-item {
+  display: block;
+  margin-bottom: 4px;
+}
+body {
+  margin: 0;
+  padding: 0;
+  background: linear-gradient(to right, #0f0f1c, #090921);
+  font-family: 'Orbitron', sans-serif;
+  color: #fff;
+}
+.dashboard-container {
+  max-width: 1600px;
+  margin: auto;
+  padding: 30px;
+}
+.dashboard-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  background: linear-gradient(145deg, #0a0a23, #141436);
+  padding: 20px 30px;
+  border-bottom: 2px solid rgba(0,229,255,0.15);
+  box-shadow: 0 4px 20px rgba(0,229,255,0.1);
+  border-radius: 12px;
+  margin-bottom: 30px;
+}
+.logo-title {
+  font-size: 1.8rem;
+  color: #00e5ff;
+  text-shadow: 0 0 8px rgba(0,229,255,0.5);
+}
+.meta-box {
+  text-align: right;
+  font-size: 0.95rem;
+  color: #bbb;
+}
+.meta-item {
+  display: block;
+  margin-bottom: 4px;
+}
+.dashboard-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
+  gap: 30px;
+}
+.dashboard-card {
+  background: linear-gradient(145deg, rgba(0,20,40,0.5), rgba(0,10,30,0.7));
+  border-radius: 16px;
+  padding: 25px;
+  border: 1px solid rgba(0,229,255,0.15);
+  box-shadow: 0 10px 20px rgba(0, 229, 255, 0.1);
+  transition: 0.3s ease all;
+}
+.dashboard-card:hover {
+  transform: translateY(-4px);
+  box-shadow: 0 0 25px rgba(0, 229, 255, 0.15);
+}
+.risk-level-label {
+    text-align: center;
+    color: #fff;
+    margin-top: 10px;
+}
+.risk-level-value {
+    font-size: 2em;
+    color: #00e5ff;
+    text-align: center;
+    font-weight: bold;
+    margin-top: 5px;
+}
+.risk-level-indicator {
+  /* Add styles for risk level indicator here */
+}