diff --git a/index.html b/index.html
index 8e74278..7d6b028 100644
--- a/index.html
+++ b/index.html
@@ -1,396 +1,512 @@
 <!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="Professional stress testing tool for simulating realistic traffic to production websites">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta
+      name="description"
+      content="Professional stress testing tool for simulating realistic traffic to production websites"
+    />
     <title>Beyond Cloud Technology - Website Stress Test</title>
-    <link rel="icon" type="image/png" href="Logo.png">
-    <link rel="stylesheet" href="styles.css">
+    <link rel="icon" type="image/png" href="Logo.png" />
+    <link rel="stylesheet" href="styles.css" />
     <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.min.js"></script>
-</head>
+  </head>
 
-<body>
+  <body>
     <div class="container">
-        <!-- Header -->
-        <header class="header">
-            <div class="header-content">
-                <h1 class="title">
-                    <img src="Logo.png" alt="BCT Logo" class="title-icon">
-                    Beyond Cloud Technology - Website Stress Test
-                </h1>
-                <p class="subtitle">Simulate realistic traffic patterns to test your production websites</p>
-                <a href="https://www.youtube.com/@beyondcloudtechnology" target="_blank" rel="noopener noreferrer"
-                    class="youtube-link">
-                    <svg class="youtube-icon" viewBox="0 0 24 24" fill="currentColor">
-                        <path
-                            d="M23.498 6.186a3.016 3.016 0 0 0-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 0 0 .502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 0 0 2.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 0 0 2.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z" />
-                    </svg>
-                    Watch on YouTube @beyondcloudtechnology
-                </a>
-            </div>
-            <div class="header-controls">
-                <button type="button" class="btn btn-secondary btn-sm" id="themeToggle" title="Toggle Theme">
-                    🌓 Theme
-                </button>
-            </div>
-        </header>
+      <!-- Header -->
+      <header class="header">
+        <div class="header-content">
+          <h1 class="title">
+            <img src="Logo.png" alt="BCT Logo" class="title-icon" />
+            Beyond Cloud Technology - Website Stress Test
+          </h1>
+          <p class="subtitle">
+            Simulate realistic traffic patterns to test your production websites
+          </p>
+          <a
+            href="https://www.youtube.com/@beyondcloudtechnology"
+            target="_blank"
+            rel="noopener noreferrer"
+            class="youtube-link"
+          >
+            <svg class="youtube-icon" viewBox="0 0 24 24" fill="currentColor">
+              <path
+                d="M23.498 6.186a3.016 3.016 0 0 0-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 0 0 .502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 0 0 2.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 0 0 2.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z"
+              />
+            </svg>
+            Watch on YouTube @beyondcloudtechnology
+          </a>
+        </div>
+        <div class="header-controls">
+          <button
+            type="button"
+            class="btn btn-secondary btn-sm"
+            id="themeToggle"
+            title="Toggle Theme"
+          >
+            🌓 Theme
+          </button>
+        </div>
+      </header>
 
-        <!-- Test Presets -->
-        <div class="panel full-width">
-            <div class="panel-header">
-                <div class="panel-icon">⚡</div>
-                <h2 class="panel-title">Quick Start</h2>
+      <!-- Test Presets -->
+      <div class="panel full-width">
+        <div class="panel-header">
+          <div class="panel-icon">⚡</div>
+          <h2 class="panel-title">Quick Start</h2>
+        </div>
+        <div class="preset-controls">
+          <select id="presetSelect" class="form-select">
+            <option value="">Select a preset...</option>
+            <option value="light">🟢 Light Load (10 users, 30s)</option>
+            <option value="medium">🟡 Medium Load (100 users, 60s)</option>
+            <option value="heavy">🔴 Heavy Load (500 users, 120s)</option>
+            <option value="spike">💥 Spike Test (200 users, burst)</option>
+          </select>
+          <button type="button" class="btn btn-secondary" id="saveConfigBtn">
+            💾 Save Current Config
+          </button>
+        </div>
+        <div class="keyboard-shortcuts">
+          <small
+            ><strong>Keyboard Shortcuts:</strong> S = Start | P = Pause/Resume |
+            X = Stop</small
+          >
+        </div>
+      </div>
+
+      <!-- Main Grid -->
+      <div class="main-grid">
+        <!-- Configuration Panel -->
+        <div class="panel">
+          <div class="panel-header">
+            <div class="panel-icon">⚙️</div>
+            <h2 class="panel-title">Configuration</h2>
+          </div>
+
+          <form id="configForm">
+            <!-- Target URL -->
+            <div class="form-group">
+              <label class="form-label" for="targetUrl">Target URL</label>
+              <input
+                type="url"
+                id="targetUrl"
+                class="form-input"
+                placeholder="https://example.com"
+                required
+              />
             </div>
-            <div class="preset-controls">
-                <select id="presetSelect" class="form-select">
-                    <option value="">Select a preset...</option>
-                    <option value="light">🟢 Light Load (10 users, 30s)</option>
-                    <option value="medium">🟡 Medium Load (100 users, 60s)</option>
-                    <option value="heavy">🔴 Heavy Load (500 users, 120s)</option>
-                    <option value="spike">💥 Spike Test (200 users, burst)</option>
-                </select>
-                <button type="button" class="btn btn-secondary" id="saveConfigBtn">💾 Save Current Config</button>
+
+            <!-- Number of Users -->
+            <div class="form-group">
+              <label class="form-label" for="userCount">
+                Concurrent Users
+                <span class="range-value" id="userCountValue">100</span>
+              </label>
+              <input
+                type="range"
+                id="userCount"
+                class="form-range"
+                min="1"
+                max="5000"
+                value="100"
+              />
             </div>
-            <div class="keyboard-shortcuts">
-                <small><strong>Keyboard Shortcuts:</strong> S = Start | P = Pause/Resume | X = Stop</small>
+
+            <!-- Test Duration -->
+            <div class="form-group">
+              <label class="form-label" for="duration">
+                Duration (seconds)
+                <span class="range-value" id="durationValue">60</span>
+              </label>
+              <input
+                type="range"
+                id="duration"
+                class="form-range"
+                min="10"
+                max="600"
+                value="60"
+                step="10"
+              />
             </div>
+
+            <!-- Traffic Pattern -->
+            <div class="form-group">
+              <label class="form-label" for="trafficPattern"
+                >Traffic Pattern</label
+              >
+              <select id="trafficPattern" class="form-select">
+                <option value="steady">Steady Load (Constant RPS)</option>
+                <option value="burst">Burst Mode (Traffic Spikes)</option>
+                <option value="rampup">Ramp-Up (Gradual Increase)</option>
+                <option value="random">Random (Realistic Users)</option>
+              </select>
+            </div>
+
+            <!-- Crawler Mode -->
+            <div class="form-group crawler-section">
+              <label class="checkbox-label">
+                <input
+                  type="checkbox"
+                  id="crawlerEnabled"
+                  class="form-checkbox"
+                />
+                <span>🕷️ Enable Crawler Mode (Simulate Real Users)</span>
+              </label>
+              <small class="help-text"
+                >Randomly navigate through website links like real users</small
+              >
+            </div>
+
+            <!-- Crawler Settings (shown when enabled) -->
+            <div
+              class="crawler-settings"
+              id="crawlerSettings"
+              style="display: none"
+            >
+              <div class="form-group">
+                <label class="form-label" for="crawlDepth">
+                  Crawl Depth
+                  <span class="range-value" id="crawlDepthValue">2</span>
+                </label>
+                <input
+                  type="range"
+                  id="crawlDepth"
+                  class="form-range"
+                  min="1"
+                  max="5"
+                  value="2"
+                />
+                <small class="help-text"
+                  >Maximum number of page hops per user</small
+                >
+              </div>
+
+              <div class="form-group">
+                <label class="form-label" for="linksPerPage">
+                  Links Per Page
+                  <span class="range-value" id="linksPerPageValue">10</span>
+                </label>
+                <input
+                  type="range"
+                  id="linksPerPage"
+                  class="form-range"
+                  min="1"
+                  max="50"
+                  value="10"
+                />
+                <small class="help-text"
+                  >Maximum links to extract from each page</small
+                >
+              </div>
+            </div>
+
+            <!-- Advanced Options Accordion -->
+            <div class="accordion">
+              <button
+                type="button"
+                class="accordion-header"
+                id="advancedToggle"
+              >
+                <span>Advanced Options</span>
+                <span class="accordion-icon">▼</span>
+              </button>
+              <div class="accordion-content" id="advancedContent">
+                <!-- HTTP Method -->
+                <div class="form-group">
+                  <label class="form-label" for="httpMethod">HTTP Method</label>
+                  <select id="httpMethod" class="form-select">
+                    <option value="GET">GET</option>
+                    <option value="POST">POST</option>
+                    <option value="PUT">PUT</option>
+                    <option value="DELETE">DELETE</option>
+                    <option value="PATCH">PATCH</option>
+                  </select>
+                </div>
+
+                <!-- Request Headers -->
+                <div class="form-group">
+                  <label class="form-label" for="customHeaders"
+                    >Custom Headers (JSON)</label
+                  >
+                  <textarea
+                    id="customHeaders"
+                    class="form-textarea"
+                    placeholder='{"Authorization": "Bearer token", "Content-Type": "application/json"}'
+                  ></textarea>
+                </div>
+
+                <!-- Request Body -->
+                <div class="form-group">
+                  <label class="form-label" for="requestBody"
+                    >Request Body (JSON)</label
+                  >
+                  <textarea
+                    id="requestBody"
+                    class="form-textarea"
+                    placeholder='{"key": "value"}'
+                  ></textarea>
+                </div>
+
+                <!-- Think Time -->
+                <div class="form-group">
+                  <label class="form-label" for="thinkTime">
+                    Think Time (ms)
+                    <span class="range-value" id="thinkTimeValue">1000</span>
+                  </label>
+                  <input
+                    type="range"
+                    id="thinkTime"
+                    class="form-range"
+                    min="0"
+                    max="5000"
+                    value="1000"
+                    step="100"
+                  />
+                  <small class="help-text"
+                    >Delay between requests per user</small
+                  >
+                </div>
+              </div>
+            </div>
+          </form>
         </div>
 
-        <!-- Main Grid -->
-        <div class="main-grid">
-            <!-- Configuration Panel -->
-            <div class="panel">
-                <div class="panel-header">
-                    <div class="panel-icon">⚙️</div>
-                    <h2 class="panel-title">Configuration</h2>
-                </div>
+        <!-- Control Panel -->
+        <div class="panel">
+          <div class="panel-header">
+            <div class="panel-icon">🎮</div>
+            <h2 class="panel-title">Control Panel</h2>
+          </div>
 
-                <form id="configForm">
-                    <!-- Target URL -->
-                    <div class="form-group">
-                        <label class="form-label" for="targetUrl">Target URL</label>
-                        <input type="url" id="targetUrl" class="form-input" placeholder="https://example.com" required>
-                    </div>
+          <!-- Status Badge -->
+          <div class="text-center mb-3">
+            <span class="status-badge status-idle" id="statusBadge">Idle</span>
+          </div>
 
-                    <!-- Number of Users -->
-                    <div class="form-group">
-                        <label class="form-label" for="userCount">
-                            Concurrent Users
-                            <span class="range-value" id="userCountValue">100</span>
-                        </label>
-                        <input type="range" id="userCount" class="form-range" min="1" max="5000" value="100">
-                    </div>
+          <!-- Progress Bar -->
+          <div class="progress-container">
+            <div class="progress-bar" id="progressBar" style="width: 0%"></div>
+          </div>
 
-                    <!-- Test Duration -->
-                    <div class="form-group">
-                        <label class="form-label" for="duration">
-                            Duration (seconds)
-                            <span class="range-value" id="durationValue">60</span>
-                        </label>
-                        <input type="range" id="duration" class="form-range" min="10" max="600" value="60" step="10">
-                    </div>
+          <!-- Control Buttons -->
+          <div class="btn-group mt-4">
+            <button type="button" class="btn btn-success" id="startBtn">
+              ▶️ Start Test
+            </button>
+            <button
+              type="button"
+              class="btn btn-warning"
+              id="pauseBtn"
+              disabled
+            >
+              ⏸️ Pause
+            </button>
+            <button type="button" class="btn btn-danger" id="stopBtn" disabled>
+              ⏹️ Stop
+            </button>
+          </div>
 
-                    <!-- Traffic Pattern -->
-                    <div class="form-group">
-                        <label class="form-label" for="trafficPattern">Traffic Pattern</label>
-                        <select id="trafficPattern" class="form-select">
-                            <option value="steady">Steady Load (Constant RPS)</option>
-                            <option value="burst">Burst Mode (Traffic Spikes)</option>
-                            <option value="rampup">Ramp-Up (Gradual Increase)</option>
-                            <option value="random">Random (Realistic Users)</option>
-                        </select>
-                    </div>
-
-                    <!-- Crawler Mode -->
-                    <div class="form-group crawler-section">
-                        <label class="checkbox-label">
-                            <input type="checkbox" id="crawlerEnabled" class="form-checkbox">
-                            <span>🕷️ Enable Crawler Mode (Simulate Real Users)</span>
-                        </label>
-                        <small class="help-text">Randomly navigate through website links like real users</small>
-                    </div>
-
-                    <!-- Crawler Settings (shown when enabled) -->
-                    <div class="crawler-settings" id="crawlerSettings" style="display: none;">
-                        <div class="form-group">
-                            <label class="form-label" for="crawlDepth">
-                                Crawl Depth
-                                <span class="range-value" id="crawlDepthValue">2</span>
-                            </label>
-                            <input type="range" id="crawlDepth" class="form-range" min="1" max="5" value="2">
-                            <small class="help-text">Maximum number of page hops per user</small>
-                        </div>
-
-                        <div class="form-group">
-                            <label class="form-label" for="linksPerPage">
-                                Links Per Page
-                                <span class="range-value" id="linksPerPageValue">10</span>
-                            </label>
-                            <input type="range" id="linksPerPage" class="form-range" min="1" max="50" value="10">
-                            <small class="help-text">Maximum links to extract from each page</small>
-                        </div>
-                    </div>
-
-                    <!-- Advanced Options Accordion -->
-                    <div class="accordion">
-                        <button type="button" class="accordion-header" id="advancedToggle">
-                            <span>Advanced Options</span>
-                            <span class="accordion-icon">▼</span>
-                        </button>
-                        <div class="accordion-content" id="advancedContent">
-                            <!-- HTTP Method -->
-                            <div class="form-group">
-                                <label class="form-label" for="httpMethod">HTTP Method</label>
-                                <select id="httpMethod" class="form-select">
-                                    <option value="GET">GET</option>
-                                    <option value="POST">POST</option>
-                                    <option value="PUT">PUT</option>
-                                    <option value="DELETE">DELETE</option>
-                                    <option value="PATCH">PATCH</option>
-                                </select>
-                            </div>
-
-                            <!-- Request Headers -->
-                            <div class="form-group">
-                                <label class="form-label" for="customHeaders">Custom Headers (JSON)</label>
-                                <textarea id="customHeaders" class="form-textarea"
-                                    placeholder='{"Authorization": "Bearer token", "Content-Type": "application/json"}'></textarea>
-                            </div>
-
-                            <!-- Request Body -->
-                            <div class="form-group">
-                                <label class="form-label" for="requestBody">Request Body (JSON)</label>
-                                <textarea id="requestBody" class="form-textarea"
-                                    placeholder='{"key": "value"}'></textarea>
-                            </div>
-
-                            <!-- Think Time -->
-                            <div class="form-group">
-                                <label class="form-label" for="thinkTime">
-                                    Think Time (ms)
-                                    <span class="range-value" id="thinkTimeValue">1000</span>
-                                </label>
-                                <input type="range" id="thinkTime" class="form-range" min="0" max="5000" value="1000"
-                                    step="100">
-                                <small class="help-text">Delay between requests per user</small>
-                            </div>
-                        </div>
-                    </div>
-                </form>
+          <!-- Quick Stats -->
+          <div class="stats-grid mt-4">
+            <div class="stat-card">
+              <div class="stat-label">Elapsed Time</div>
+              <div class="stat-value" id="elapsedTime">0s</div>
             </div>
-
-            <!-- Control Panel -->
-            <div class="panel">
-                <div class="panel-header">
-                    <div class="panel-icon">🎮</div>
-                    <h2 class="panel-title">Control Panel</h2>
-                </div>
-
-                <!-- Status Badge -->
-                <div class="text-center mb-3">
-                    <span class="status-badge status-idle" id="statusBadge">Idle</span>
-                </div>
-
-                <!-- Progress Bar -->
-                <div class="progress-container">
-                    <div class="progress-bar" id="progressBar" style="width: 0%"></div>
-                </div>
-
-                <!-- Control Buttons -->
-                <div class="btn-group mt-4">
-                    <button type="button" class="btn btn-success" id="startBtn">▶️ Start Test</button>
-                    <button type="button" class="btn btn-warning" id="pauseBtn" disabled>⏸️ Pause</button>
-                    <button type="button" class="btn btn-danger" id="stopBtn" disabled>⏹️ Stop</button>
-                </div>
-
-                <!-- Quick Stats -->
-                <div class="stats-grid mt-4">
-                    <div class="stat-card">
-                        <div class="stat-label">Elapsed Time</div>
-                        <div class="stat-value" id="elapsedTime">0s</div>
-                    </div>
-                    <div class="stat-card">
-                        <div class="stat-label">Remaining</div>
-                        <div class="stat-value" id="remainingTime">0s</div>
-                    </div>
-                </div>
+            <div class="stat-card">
+              <div class="stat-label">Remaining</div>
+              <div class="stat-value" id="remainingTime">0s</div>
             </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- Live Statistics -->
+      <div class="panel full-width">
+        <div class="panel-header">
+          <div class="panel-icon">📊</div>
+          <h2 class="panel-title">Live Statistics</h2>
         </div>
 
-        <!-- Live Statistics -->
-        <div class="panel full-width">
-            <div class="panel-header">
-                <div class="panel-icon">📊</div>
-                <h2 class="panel-title">Live Statistics</h2>
-            </div>
-
-            <div class="stats-grid">
-                <div class="stat-card">
-                    <div class="stat-label">Active Users</div>
-                    <div class="stat-value info" id="activeUsers">0</div>
-                </div>
-                <div class="stat-card">
-                    <div class="stat-label">Total Requests</div>
-                    <div class="stat-value" id="totalRequests">0</div>
-                </div>
-                <div class="stat-card">
-                    <div class="stat-label">Requests/Sec</div>
-                    <div class="stat-value info" id="requestsPerSec">0</div>
-                </div>
-                <div class="stat-card">
-                    <div class="stat-label">Success Rate</div>
-                    <div class="stat-value success" id="successRate">0%</div>
-                </div>
-                <div class="stat-card">
-                    <div class="stat-label">Failed Requests</div>
-                    <div class="stat-value danger" id="failedRequests">0</div>
-                </div>
-                <div class="stat-card">
-                    <div class="stat-label">Avg Response Time</div>
-                    <div class="stat-value warning" id="avgResponseTime">0ms</div>
-                </div>
-            </div>
-
-            <!-- Percentile Metrics -->
-            <div class="panel-section mt-4">
-                <h3 class="section-title">Response Time Percentiles</h3>
-                <div class="stats-grid">
-                    <div class="stat-card">
-                        <div class="stat-label">P50 (Median)</div>
-                        <div class="stat-value info" id="p50ResponseTime">0ms</div>
-                    </div>
-                    <div class="stat-card">
-                        <div class="stat-label">P95</div>
-                        <div class="stat-value warning" id="p95ResponseTime">0ms</div>
-                    </div>
-                    <div class="stat-card">
-                        <div class="stat-label">P99</div>
-                        <div class="stat-value danger" id="p99ResponseTime">0ms</div>
-                    </div>
-                </div>
-            </div>
-
-            <!-- Error Breakdown -->
-            <div class="panel-section mt-4">
-                <h3 class="section-title">Error Breakdown</h3>
-                <div class="stats-grid">
-                    <div class="stat-card">
-                        <div class="stat-label">4xx Errors</div>
-                        <div class="stat-value warning" id="errors4xx">0</div>
-                    </div>
-                    <div class="stat-card">
-                        <div class="stat-label">5xx Errors</div>
-                        <div class="stat-value danger" id="errors5xx">0</div>
-                    </div>
-                    <div class="stat-card">
-                        <div class="stat-label">Timeout Errors</div>
-                        <div class="stat-value danger" id="errorsTimeout">0</div>
-                    </div>
-                    <div class="stat-card">
-                        <div class="stat-label">Network Errors</div>
-                        <div class="stat-value danger" id="errorsNetwork">0</div>
-                    </div>
-                </div>
-            </div>
-
-            <!-- Bandwidth -->
-            <div class="panel-section mt-4">
-                <h3 class="section-title">Bandwidth Usage</h3>
-                <div class="stat-card-large">
-                    <div class="stat-label">Total Bandwidth</div>
-                    <div class="stat-value info" id="totalBandwidth">0 B</div>
-                </div>
-            </div>
-
-            <!-- Charts -->
-            <div class="main-grid mt-4">
-                <div class="chart-container">
-                    <canvas id="rpsChart"></canvas>
-                </div>
-                <div class="chart-container">
-                    <canvas id="responseTimeChart"></canvas>
-                </div>
-            </div>
-
-            <!-- User/Error Correlation Chart (Full Width) -->
-            <div class="chart-container" style="height: 350px; margin-top: var(--spacing-lg);">
-                <canvas id="userErrorChart"></canvas>
-            </div>
+        <div class="stats-grid">
+          <div class="stat-card">
+            <div class="stat-label">Active Users</div>
+            <div class="stat-value info" id="activeUsers">0</div>
+          </div>
+          <div class="stat-card">
+            <div class="stat-label">Total Requests</div>
+            <div class="stat-value" id="totalRequests">0</div>
+          </div>
+          <div class="stat-card">
+            <div class="stat-label">Requests/Sec</div>
+            <div class="stat-value info" id="requestsPerSec">0</div>
+          </div>
+          <div class="stat-card">
+            <div class="stat-label">Success Rate</div>
+            <div class="stat-value success" id="successRate">0%</div>
+          </div>
+          <div class="stat-card">
+            <div class="stat-label">Failed Requests</div>
+            <div class="stat-value danger" id="failedRequests">0</div>
+          </div>
+          <div class="stat-card">
+            <div class="stat-label">Avg Response Time</div>
+            <div class="stat-value warning" id="avgResponseTime">0ms</div>
+          </div>
         </div>
 
-        <!-- Request History Log -->
-        <div class="panel full-width">
-            <div class="panel-header">
-                <div class="panel-icon">📝</div>
-                <h2 class="panel-title">Request History (Last 100)</h2>
+        <!-- Percentile Metrics -->
+        <div class="panel-section mt-4">
+          <h3 class="section-title">Response Time Percentiles</h3>
+          <div class="stats-grid">
+            <div class="stat-card">
+              <div class="stat-label">P50 (Median)</div>
+              <div class="stat-value info" id="p50ResponseTime">0ms</div>
             </div>
-
-            <div class="request-history-container">
-                <table class="request-history-table">
-                    <thead>
-                        <tr>
-                            <th>Time</th>
-                            <th>URL</th>
-                            <th>Status</th>
-                            <th>Response Time</th>
-                        </tr>
-                    </thead>
-                    <tbody id="requestHistoryBody">
-                        <!-- Populated dynamically -->
-                    </tbody>
-                </table>
+            <div class="stat-card">
+              <div class="stat-label">P95</div>
+              <div class="stat-value warning" id="p95ResponseTime">0ms</div>
             </div>
+            <div class="stat-card">
+              <div class="stat-label">P99</div>
+              <div class="stat-value danger" id="p99ResponseTime">0ms</div>
+            </div>
+          </div>
         </div>
 
-        <!-- Results Panel -->
-        <div class="panel full-width" id="resultsPanel" style="display: none;">
-            <div class="panel-header">
-                <div class="panel-icon">📈</div>
-                <h2 class="panel-title">Test Results</h2>
+        <!-- Error Breakdown -->
+        <div class="panel-section mt-4">
+          <h3 class="section-title">Error Breakdown</h3>
+          <div class="stats-grid">
+            <div class="stat-card">
+              <div class="stat-label">4xx Errors</div>
+              <div class="stat-value warning" id="errors4xx">0</div>
             </div>
-
-            <div class="btn-group mb-3">
-                <button type="button" class="btn btn-primary" id="exportJsonBtn">💾 Export as JSON</button>
-                <button type="button" class="btn btn-primary" id="exportCsvBtn">📄 Export as CSV</button>
+            <div class="stat-card">
+              <div class="stat-label">5xx Errors</div>
+              <div class="stat-value danger" id="errors5xx">0</div>
             </div>
-
-            <table class="results-table">
-                <thead>
-                    <tr>
-                        <th>Metric</th>
-                        <th>Value</th>
-                    </tr>
-                </thead>
-                <tbody id="resultsTableBody">
-                    <!-- Results will be populated here -->
-                </tbody>
-            </table>
-
-            <div id="detailedResults" class="mt-4"></div>
+            <div class="stat-card">
+              <div class="stat-label">Timeout Errors</div>
+              <div class="stat-value danger" id="errorsTimeout">0</div>
+            </div>
+            <div class="stat-card">
+              <div class="stat-label">Network Errors</div>
+              <div class="stat-value danger" id="errorsNetwork">0</div>
+            </div>
+          </div>
         </div>
+
+        <!-- Bandwidth -->
+        <div class="panel-section mt-4">
+          <h3 class="section-title">Bandwidth Usage</h3>
+          <div class="stat-card-large">
+            <div class="stat-label">Total Bandwidth</div>
+            <div class="stat-value info" id="totalBandwidth">0 B</div>
+          </div>
+        </div>
+
+        <!-- Charts -->
+        <div class="main-grid mt-4">
+          <div class="chart-container">
+            <canvas id="rpsChart"></canvas>
+          </div>
+          <div class="chart-container">
+            <canvas id="responseTimeChart"></canvas>
+          </div>
+        </div>
+
+        <!-- User/Error Correlation Chart (Full Width) -->
+        <div
+          class="chart-container"
+          style="height: 350px; margin-top: var(--spacing-lg)"
+        >
+          <canvas id="userErrorChart"></canvas>
+        </div>
+      </div>
+
+      <!-- Request History Log -->
+      <div class="panel full-width">
+        <div class="panel-header">
+          <div class="panel-icon">📝</div>
+          <h2 class="panel-title">Request History (Last 100)</h2>
+        </div>
+
+        <div class="request-history-container">
+          <table class="request-history-table">
+            <thead>
+              <tr>
+                <th>Time</th>
+                <th>URL</th>
+                <th>Status</th>
+                <th>Response Time</th>
+              </tr>
+            </thead>
+            <tbody id="requestHistoryBody">
+              <!-- Populated dynamically -->
+            </tbody>
+          </table>
+        </div>
+      </div>
+
+      <!-- Results Panel -->
+      <div class="panel full-width" id="resultsPanel" style="display: none">
+        <div class="panel-header">
+          <div class="panel-icon">📈</div>
+          <h2 class="panel-title">Test Results</h2>
+        </div>
+
+        <div class="btn-group mb-3">
+          <button type="button" class="btn btn-primary" id="exportJsonBtn">
+            💾 Export as JSON
+          </button>
+          <button type="button" class="btn btn-primary" id="exportCsvBtn">
+            📄 Export as CSV
+          </button>
+        </div>
+
+        <table class="results-table">
+          <thead>
+            <tr>
+              <th>Metric</th>
+              <th>Value</th>
+            </tr>
+          </thead>
+          <tbody id="resultsTableBody">
+            <!-- Results will be populated here -->
+          </tbody>
+        </table>
+
+        <div id="detailedResults" class="mt-4"></div>
+      </div>
     </div>
 
     <footer class="footer">
-        <p>&copy; 2025 Beyond Cloud Technology. All rights reserved.</p>
+      <p>&copy; 2025 Beyond Cloud Technology. All rights reserved.</p>
     </footer>
 
+    <!-- Git Commit Info -->
+    <div id="gitInfo" class="git-info-pill" style="display: none">
+      <span class="git-commit" id="gitCommit"></span>
+      <span class="git-separator">•</span>
+      <span class="git-date" id="gitDate"></span>
+    </div>
+
     <script src="script.js"></script>
     <script>
-        // Show/hide crawler settings based on checkbox
-        document.addEventListener('DOMContentLoaded', () => {
-            const crawlerCheckbox = document.getElementById('crawlerEnabled');
-            const crawlerSettings = document.getElementById('crawlerSettings');
+      // Show/hide crawler settings based on checkbox
+      document.addEventListener("DOMContentLoaded", () => {
+        const crawlerCheckbox = document.getElementById("crawlerEnabled");
+        const crawlerSettings = document.getElementById("crawlerSettings");
 
-            if (crawlerCheckbox && crawlerSettings) {
-                crawlerCheckbox.addEventListener('change', (e) => {
-                    crawlerSettings.style.display = e.target.checked ? 'block' : 'none';
-                });
-            }
-        });
+        if (crawlerCheckbox && crawlerSettings) {
+          crawlerCheckbox.addEventListener("change", (e) => {
+            crawlerSettings.style.display = e.target.checked ? "block" : "none";
+          });
+        }
+      });
     </script>
-</body>
-
-</html>
\ No newline at end of file
+  </body>
+</html>
diff --git a/proxy-server.js b/proxy-server.js
index d6bf0f4..6e4c817 100644
--- a/proxy-server.js
+++ b/proxy-server.js
@@ -37,6 +37,26 @@ function getRandomUserAgent() {
     return CONFIG.userAgents[Math.floor(Math.random() * CONFIG.userAgents.length)];
 }
 
+const { exec } = require('child_process');
+
+// Helper to get git info
+const getGitInfo = () => {
+    return new Promise((resolve) => {
+        exec('git rev-parse --short HEAD && git log -1 --format=%cd --date=relative', (err, stdout) => {
+            if (err) {
+                console.error('Error fetching git info:', err);
+                resolve({ commit: 'Unknown', date: 'Unknown' });
+                return;
+            }
+            const parts = stdout.trim().split('\n');
+            resolve({ 
+                commit: parts[0] || 'Unknown', 
+                date: parts[1] || 'Unknown' 
+            });
+        });
+    });
+};
+
 // Create the proxy server
 const server = http.createServer((req, res) => {
     // Handle CORS preflight requests
@@ -47,6 +67,16 @@ const server = http.createServer((req, res) => {
         return;
     }
 
+    // Handle Git Info request
+    if (req.url === '/git-info' && req.method === 'GET') {
+        handleCORS(res);
+        getGitInfo().then(info => {
+            res.writeHead(200, { 'Content-Type': 'application/json' });
+            res.end(JSON.stringify(info));
+        });
+        return;
+    }
+
     // Only allow POST requests to the proxy
     if (req.method !== 'POST') {
         res.writeHead(405, { 'Content-Type': 'application/json' });
@@ -194,7 +224,7 @@ function handleProxyRequest(proxyRequest, clientRes) {
 // Add CORS headers to response
 function handleCORS(res) {
     res.setHeader('Access-Control-Allow-Origin', CONFIG.allowedOrigins);
-    res.setHeader('Access-Control-Allow-Methods', 'POST, OPTIONS');
+    res.setHeader('Access-Control-Allow-Methods', 'POST, GET, OPTIONS');
     res.setHeader('Access-Control-Allow-Headers', 'Content-Type');
 }
 
diff --git a/script.js b/script.js
index 70b0c1b..75a6e11 100644
--- a/script.js
+++ b/script.js
@@ -193,6 +193,7 @@ class StressTestingTool {
     this.loadTheme();
     this.loadSavedConfigs();
     this.setupKeyboardShortcuts();
+    this.fetchGitInfo();
   }
 
   bindElements() {
@@ -261,6 +262,11 @@ class StressTestingTool {
       themeToggle: document.getElementById("themeToggle"),
       presetSelect: document.getElementById("presetSelect"),
       saveConfigBtn: document.getElementById("saveConfigBtn"),
+
+      // Git Info
+      gitInfo: document.getElementById("gitInfo"),
+      gitCommit: document.getElementById("gitCommit"),
+      gitDate: document.getElementById("gitDate"),
     };
   }
 
@@ -452,6 +458,32 @@ class StressTestingTool {
     location.reload(); // Reload to update preset list
   }
 
+  async fetchGitInfo() {
+    try {
+      // Ensure we don't have double slashes if proxyUrl ends with slash (it shouldn't based on init logic)
+      const url = `${this.config.proxyUrl}/git-info`;
+      const response = await fetch(url);
+      if (response.ok) {
+        const data = await response.json();
+        if (data.commit && data.date && data.commit !== 'Unknown') {
+          if (this.elements.gitCommit) this.elements.gitCommit.textContent = data.commit;
+          if (this.elements.gitDate) {
+            let dateStr = data.date;
+            // Shorten to match screenshot style (approximate)
+            dateStr = dateStr.replace(/ days? ago/, 'd ago')
+                           .replace(/ hours? ago/, 'h ago')
+                           .replace(/ minutes? ago/, 'm ago')
+                           .replace(/ seconds? ago/, 's ago');
+            this.elements.gitDate.textContent = dateStr;
+          }
+          if (this.elements.gitInfo) this.elements.gitInfo.style.display = 'flex';
+        }
+      }
+    } catch (e) {
+      console.error('Failed to fetch git info:', e);
+    }
+  }
+
   initializeCharts() {
     const isDark =
       document.documentElement.getAttribute("data-theme") === "dark";
diff --git a/styles.css b/styles.css
index 3d6c2d6..14cccf1 100644
--- a/styles.css
+++ b/styles.css
@@ -4,1043 +4,1093 @@
    =================================== */
 
 /* Import Modern Typography */
-@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&display=swap');
+@import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&display=swap");
 
 /* ===================================
    CSS VARIABLES - DESIGN TOKENS
    =================================== */
 :root {
-    /* Dark Theme Colors */
-    --color-bg-primary: #0a0e1a;
-    --color-bg-secondary: #131829;
-    --color-bg-tertiary: #1a2035;
-    --color-bg-glass: rgba(26, 32, 53, 0.7);
-    --color-bg-glass-hover: rgba(26, 32, 53, 0.85);
+  /* Dark Theme Colors */
+  --color-bg-primary: #0a0e1a;
+  --color-bg-secondary: #131829;
+  --color-bg-tertiary: #1a2035;
+  --color-bg-glass: rgba(26, 32, 53, 0.7);
+  --color-bg-glass-hover: rgba(26, 32, 53, 0.85);
 
-    /* Accent Colors */
-    --color-accent-primary: #6366f1;
-    --color-accent-secondary: #8b5cf6;
-    --color-accent-success: #10b981;
-    --color-accent-warning: #f59e0b;
-    --color-accent-danger: #ef4444;
-    --color-accent-info: #3b82f6;
+  /* Accent Colors */
+  --color-accent-primary: #6366f1;
+  --color-accent-secondary: #8b5cf6;
+  --color-accent-success: #10b981;
+  --color-accent-warning: #f59e0b;
+  --color-accent-danger: #ef4444;
+  --color-accent-info: #3b82f6;
 
-    /* Gradients */
-    --gradient-primary: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
-    --gradient-success: linear-gradient(135deg, #10b981 0%, #059669 100%);
-    --gradient-danger: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
-    --gradient-warning: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
+  /* Gradients */
+  --gradient-primary: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
+  --gradient-success: linear-gradient(135deg, #10b981 0%, #059669 100%);
+  --gradient-danger: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
+  --gradient-warning: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
 
-    /* Text Colors */
-    --color-text-primary: #f8fafc;
-    --color-text-secondary: #cbd5e1;
-    --color-text-tertiary: #94a3b8;
-    --color-text-muted: #64748b;
+  /* Text Colors */
+  --color-text-primary: #f8fafc;
+  --color-text-secondary: #cbd5e1;
+  --color-text-tertiary: #94a3b8;
+  --color-text-muted: #64748b;
 
-    /* Border & Shadow */
-    --color-border: rgba(148, 163, 184, 0.1);
-    --color-border-hover: rgba(148, 163, 184, 0.2);
-    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.3);
-    --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.4);
-    --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.5);
-    --shadow-glow: 0 0 20px rgba(99, 102, 241, 0.3);
+  /* Border & Shadow */
+  --color-border: rgba(148, 163, 184, 0.1);
+  --color-border-hover: rgba(148, 163, 184, 0.2);
+  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.3);
+  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.4);
+  --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.5);
+  --shadow-glow: 0 0 20px rgba(99, 102, 241, 0.3);
 
-    /* Spacing */
-    --spacing-xs: 0.5rem;
-    --spacing-sm: 0.75rem;
-    --spacing-md: 1rem;
-    --spacing-lg: 1.5rem;
-    --spacing-xl: 2rem;
-    --spacing-2xl: 3rem;
+  /* Spacing */
+  --spacing-xs: 0.5rem;
+  --spacing-sm: 0.75rem;
+  --spacing-md: 1rem;
+  --spacing-lg: 1.5rem;
+  --spacing-xl: 2rem;
+  --spacing-2xl: 3rem;
 
-    /* Border Radius */
-    --radius-sm: 0.375rem;
-    --radius-md: 0.5rem;
-    --radius-lg: 0.75rem;
-    --radius-xl: 1rem;
+  /* Border Radius */
+  --radius-sm: 0.375rem;
+  --radius-md: 0.5rem;
+  --radius-lg: 0.75rem;
+  --radius-xl: 1rem;
 
-    /* Typography */
-    --font-primary: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
-    --font-mono: 'JetBrains Mono', 'Courier New', monospace;
+  /* Typography */
+  --font-primary: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI",
+    sans-serif;
+  --font-mono: "JetBrains Mono", "Courier New", monospace;
 
-    /* Transitions */
-    --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
-    --transition-base: 250ms cubic-bezier(0.4, 0, 0.2, 1);
-    --transition-slow: 350ms cubic-bezier(0.4, 0, 0.2, 1);
+  /* Transitions */
+  --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
+  --transition-base: 250ms cubic-bezier(0.4, 0, 0.2, 1);
+  --transition-slow: 350ms cubic-bezier(0.4, 0, 0.2, 1);
 }
 
 /* Light Theme */
 [data-theme="light"] {
-    --color-bg-primary: #f8fafc;
-    --color-bg-secondary: #f1f5f9;
-    --color-bg-tertiary: #e2e8f0;
-    --color-bg-glass: rgba(255, 255, 255, 0.8);
-    --color-bg-glass-hover: rgba(255, 255, 255, 0.95);
+  --color-bg-primary: #f8fafc;
+  --color-bg-secondary: #f1f5f9;
+  --color-bg-tertiary: #e2e8f0;
+  --color-bg-glass: rgba(255, 255, 255, 0.8);
+  --color-bg-glass-hover: rgba(255, 255, 255, 0.95);
 
-    --color-text-primary: #0f172a;
-    --color-text-secondary: #334155;
-    --color-text-tertiary: #475569;
-    --color-text-muted: #64748b;
+  --color-text-primary: #0f172a;
+  --color-text-secondary: #334155;
+  --color-text-tertiary: #475569;
+  --color-text-muted: #64748b;
 
-    --color-border: rgba(148, 163, 184, 0.2);
-    --color-border-hover: rgba(148, 163, 184, 0.3);
-    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.1);
-    --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.1);
-    --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.15);
+  --color-border: rgba(148, 163, 184, 0.2);
+  --color-border-hover: rgba(148, 163, 184, 0.3);
+  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.1);
+  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.1);
+  --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.15);
 }
 
 /* ===================================
    GLOBAL RESET & BASE STYLES
    =================================== */
 * {
-    margin: 0;
-    padding: 0;
-    box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
 }
 
 html {
-    font-size: 16px;
-    scroll-behavior: smooth;
+  font-size: 16px;
+  scroll-behavior: smooth;
 }
 
 body {
-    font-family: var(--font-primary);
-    background: var(--color-bg-primary);
-    color: var(--color-text-primary);
-    line-height: 1.6;
-    min-height: 100vh;
-    overflow-x: hidden;
-    position: relative;
-    transition: background var(--transition-base), color var(--transition-base);
+  font-family: var(--font-primary);
+  background: var(--color-bg-primary);
+  color: var(--color-text-primary);
+  line-height: 1.6;
+  min-height: 100vh;
+  overflow-x: hidden;
+  position: relative;
+  transition: background var(--transition-base), color var(--transition-base);
 }
 
 /* Animated Background */
 body::before {
-    content: '';
-    position: fixed;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    background:
-        radial-gradient(circle at 20% 30%, rgba(99, 102, 241, 0.1) 0%, transparent 50%),
-        radial-gradient(circle at 80% 70%, rgba(139, 92, 246, 0.1) 0%, transparent 50%);
-    pointer-events: none;
-    z-index: 0;
+  content: "";
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: radial-gradient(
+      circle at 20% 30%,
+      rgba(99, 102, 241, 0.1) 0%,
+      transparent 50%
+    ),
+    radial-gradient(
+      circle at 80% 70%,
+      rgba(139, 92, 246, 0.1) 0%,
+      transparent 50%
+    );
+  pointer-events: none;
+  z-index: 0;
 }
 
 /* ===================================
    LAYOUT STRUCTURE
    =================================== */
 .container {
-    max-width: 1400px;
-    margin: 0 auto;
-    padding: var(--spacing-xl);
-    position: relative;
-    z-index: 1;
+  max-width: 1400px;
+  margin: 0 auto;
+  padding: var(--spacing-xl);
+  position: relative;
+  z-index: 1;
 }
 
 /* Header */
 .header {
-    text-align: center;
-    margin-bottom: var(--spacing-lg);
-    animation: fadeInDown 0.6s ease-out;
-    position: relative;
-    display: block;
+  text-align: center;
+  margin-bottom: var(--spacing-lg);
+  animation: fadeInDown 0.6s ease-out;
+  position: relative;
+  display: block;
 }
 
 .header-content {
-    position: relative;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
 }
 
 .title {
-    font-size: 3rem;
-    font-weight: 700;
-    background: var(--gradient-primary);
-    -webkit-background-clip: text;
-    -webkit-text-fill-color: transparent;
-    background-clip: text;
-    margin-bottom: var(--spacing-xs);
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    gap: 0;
-    line-height: 1.2;
+  font-size: 3rem;
+  font-weight: 700;
+  background: var(--gradient-primary);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+  margin-bottom: var(--spacing-xs);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 0;
+  line-height: 1.2;
 }
 
 .title-icon {
-    width: 2.5rem;
-    height: 2.5rem;
-    stroke: url(#gradient);
-    /* Note: SVG needs defs for this, or we use currentColor */
-    color: var(--color-accent-primary);
-    filter: drop-shadow(0 0 10px rgba(99, 102, 241, 0.5));
-    margin-bottom: var(--spacing-xs);
+  width: 2.5rem;
+  height: 2.5rem;
+  stroke: url(#gradient);
+  /* Note: SVG needs defs for this, or we use currentColor */
+  color: var(--color-accent-primary);
+  filter: drop-shadow(0 0 10px rgba(99, 102, 241, 0.5));
+  margin-bottom: var(--spacing-xs);
 }
 
 .subtitle {
-    font-size: 1.125rem;
-    color: var(--color-text-secondary);
-    font-weight: 300;
-    margin-bottom: var(--spacing-sm);
+  font-size: 1.125rem;
+  color: var(--color-text-secondary);
+  font-weight: 300;
+  margin-bottom: var(--spacing-sm);
 }
 
 .header-controls {
-    position: absolute;
-    top: 0;
-    right: 0;
+  position: absolute;
+  top: 0;
+  right: 0;
 }
 
 /* YouTube Link */
 .youtube-link {
-    display: inline-flex;
-    align-items: center;
-    gap: var(--spacing-sm);
-    padding: var(--spacing-sm) var(--spacing-md);
-    background: linear-gradient(135deg, #FF0000 0%, #CC0000 100%);
-    color: white;
-    text-decoration: none;
-    border-radius: var(--radius-md);
-    font-weight: 600;
-    font-size: 0.875rem;
-    box-shadow: 0 2px 8px rgba(255, 0, 0, 0.3);
-    transition: all var(--transition-base);
-    animation: pulse-glow 2s ease-in-out infinite;
-    margin-top: var(--spacing-md);
+  display: inline-flex;
+  align-items: center;
+  gap: var(--spacing-sm);
+  padding: var(--spacing-sm) var(--spacing-md);
+  background: linear-gradient(135deg, #ff0000 0%, #cc0000 100%);
+  color: white;
+  text-decoration: none;
+  border-radius: var(--radius-md);
+  font-weight: 600;
+  font-size: 0.875rem;
+  box-shadow: 0 2px 8px rgba(255, 0, 0, 0.3);
+  transition: all var(--transition-base);
+  animation: pulse-glow 2s ease-in-out infinite;
+  margin-top: var(--spacing-md);
 }
 
 .youtube-link:hover {
-    transform: translateY(-2px) scale(1.03);
-    box-shadow: 0 4px 15px rgba(255, 0, 0, 0.5);
-    animation: none;
-    color: white;
+  transform: translateY(-2px) scale(1.03);
+  box-shadow: 0 4px 15px rgba(255, 0, 0, 0.5);
+  animation: none;
+  color: white;
 }
 
 .youtube-icon {
-    width: 1.25rem;
-    height: 1.25rem;
-    flex-shrink: 0;
+  width: 1.25rem;
+  height: 1.25rem;
+  flex-shrink: 0;
 }
 
 @keyframes pulse-glow {
+  0%,
+  100% {
+    box-shadow: 0 2px 8px rgba(255, 0, 0, 0.3);
+  }
 
-    0%,
-    100% {
-        box-shadow: 0 2px 8px rgba(255, 0, 0, 0.3);
-    }
-
-    50% {
-        box-shadow: 0 2px 15px rgba(255, 0, 0, 0.5);
-    }
+  50% {
+    box-shadow: 0 2px 15px rgba(255, 0, 0, 0.5);
+  }
 }
 
 /* Footer */
 .footer {
-    text-align: center;
-    margin-top: var(--spacing-2xl);
-    padding: var(--spacing-xl) 0;
-    border-top: 1px solid var(--color-border);
-    color: var(--color-text-muted);
-    font-size: 0.875rem;
+  text-align: center;
+  margin-top: var(--spacing-2xl);
+  padding: var(--spacing-xl) 0;
+  border-top: 1px solid var(--color-border);
+  color: var(--color-text-muted);
+  font-size: 0.875rem;
 }
 
 /* Main Grid Layout */
 .main-grid {
-    display: grid;
-    grid-template-columns: 1fr 1fr;
-    gap: var(--spacing-xl);
-    margin-bottom: var(--spacing-xl);
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: var(--spacing-xl);
+  margin-bottom: var(--spacing-xl);
 }
 
 /* ===================================
    GLASS PANEL COMPONENT
    =================================== */
 .panel {
-    background: var(--color-bg-glass);
-    backdrop-filter: blur(20px);
-    border: 1px solid var(--color-border);
-    border-radius: var(--radius-xl);
-    padding: var(--spacing-xl);
-    box-shadow: var(--shadow-md);
-    transition: all var(--transition-base);
+  background: var(--color-bg-glass);
+  backdrop-filter: blur(20px);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-xl);
+  padding: var(--spacing-xl);
+  box-shadow: var(--shadow-md);
+  transition: all var(--transition-base);
 }
 
 .panel:hover {
-    background: var(--color-bg-glass-hover);
-    border-color: var(--color-border-hover);
-    box-shadow: var(--shadow-lg);
+  background: var(--color-bg-glass-hover);
+  border-color: var(--color-border-hover);
+  box-shadow: var(--shadow-lg);
 }
 
 .panel-header {
-    display: flex;
-    align-items: center;
-    gap: var(--spacing-md);
-    margin-bottom: var(--spacing-lg);
-    padding-bottom: var(--spacing-md);
-    border-bottom: 1px solid var(--color-border);
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-md);
+  margin-bottom: var(--spacing-lg);
+  padding-bottom: var(--spacing-md);
+  border-bottom: 1px solid var(--color-border);
 }
 
 .panel-icon {
-    width: 2.5rem;
-    height: 2.5rem;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    background: var(--gradient-primary);
-    border-radius: var(--radius-md);
-    font-size: 1.25rem;
+  width: 2.5rem;
+  height: 2.5rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: var(--gradient-primary);
+  border-radius: var(--radius-md);
+  font-size: 1.25rem;
 }
 
 .panel-title {
-    font-size: 1.5rem;
-    font-weight: 700;
-    color: var(--color-text-primary);
+  font-size: 1.5rem;
+  font-weight: 700;
+  color: var(--color-text-primary);
 }
 
 .panel-section {
-    margin-top: var(--spacing-lg);
+  margin-top: var(--spacing-lg);
 }
 
 .section-title {
-    font-size: 1.125rem;
-    font-weight: 600;
-    color: var(--color-text-secondary);
-    margin-bottom: var(--spacing-md);
+  font-size: 1.125rem;
+  font-weight: 600;
+  color: var(--color-text-secondary);
+  margin-bottom: var(--spacing-md);
 }
 
 /* ===================================
    PRESET CONTROLS
    =================================== */
 .preset-controls {
-    display: flex;
-    gap: var(--spacing-md);
-    margin-bottom: var(--spacing-md);
+  display: flex;
+  gap: var(--spacing-md);
+  margin-bottom: var(--spacing-md);
 }
 
 .preset-controls select {
-    flex: 1;
+  flex: 1;
 }
 
 .keyboard-shortcuts {
-    padding: var(--spacing-sm);
-    background: var(--color-bg-tertiary);
-    border-radius: var(--radius-md);
-    text-align: center;
+  padding: var(--spacing-sm);
+  background: var(--color-bg-tertiary);
+  border-radius: var(--radius-md);
+  text-align: center;
 }
 
 .keyboard-shortcuts small {
-    color: var(--color-text-tertiary);
+  color: var(--color-text-tertiary);
 }
 
 /* ===================================
    FORM CONTROLS
    =================================== */
 .form-group {
-    margin-bottom: var(--spacing-lg);
+  margin-bottom: var(--spacing-lg);
 }
 
 .form-label {
-    display: block;
-    font-size: 0.875rem;
-    font-weight: 600;
-    color: var(--color-text-secondary);
-    margin-bottom: var(--spacing-xs);
-    text-transform: uppercase;
-    letter-spacing: 0.05em;
+  display: block;
+  font-size: 0.875rem;
+  font-weight: 600;
+  color: var(--color-text-secondary);
+  margin-bottom: var(--spacing-xs);
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
 }
 
 .form-input,
 .form-select,
 .form-textarea {
-    width: 100%;
-    padding: 0.75rem 1rem;
-    background: var(--color-bg-tertiary);
-    border: 1px solid var(--color-border);
-    border-radius: var(--radius-md);
-    color: var(--color-text-primary);
-    font-family: var(--font-primary);
-    font-size: 0.9375rem;
-    transition: all var(--transition-base);
+  width: 100%;
+  padding: 0.75rem 1rem;
+  background: var(--color-bg-tertiary);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-md);
+  color: var(--color-text-primary);
+  font-family: var(--font-primary);
+  font-size: 0.9375rem;
+  transition: all var(--transition-base);
 }
 
 .form-input:focus,
 .form-select:focus,
 .form-textarea:focus {
-    outline: none;
-    border-color: var(--color-accent-primary);
-    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
+  outline: none;
+  border-color: var(--color-accent-primary);
+  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
 }
 
 .form-input::placeholder {
-    color: var(--color-text-muted);
+  color: var(--color-text-muted);
 }
 
 .form-textarea {
-    resize: vertical;
-    min-height: 100px;
-    font-family: var(--font-mono);
-    font-size: 0.875rem;
+  resize: vertical;
+  min-height: 100px;
+  font-family: var(--font-mono);
+  font-size: 0.875rem;
 }
 
 .help-text {
-    display: block;
-    margin-top: var(--spacing-xs);
-    font-size: 0.8rem;
-    color: var(--color-text-muted);
+  display: block;
+  margin-top: var(--spacing-xs);
+  font-size: 0.8rem;
+  color: var(--color-text-muted);
 }
 
 /* Checkbox */
 .checkbox-label {
-    display: flex;
-    align-items: center;
-    gap: var(--spacing-sm);
-    cursor: pointer;
-    font-weight: 500;
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-sm);
+  cursor: pointer;
+  font-weight: 500;
 }
 
 .form-checkbox {
-    width: 1.25rem;
-    height: 1.25rem;
-    cursor: pointer;
+  width: 1.25rem;
+  height: 1.25rem;
+  cursor: pointer;
 }
 
 /* Crawler Section */
 .crawler-section {
-    background: var(--color-bg-tertiary);
-    padding: var(--spacing-md);
-    border-radius: var(--radius-md);
-    border: 1px solid var(--color-border);
+  background: var(--color-bg-tertiary);
+  padding: var(--spacing-md);
+  border-radius: var(--radius-md);
+  border: 1px solid var(--color-border);
 }
 
 .crawler-settings {
-    margin-top: var(--spacing-md);
-    padding: var(--spacing-md);
-    background: var(--color-bg-secondary);
-    border-radius: var(--radius-md);
-    border: 1px dashed var(--color-border);
+  margin-top: var(--spacing-md);
+  padding: var(--spacing-md);
+  background: var(--color-bg-secondary);
+  border-radius: var(--radius-md);
+  border: 1px dashed var(--color-border);
 }
 
 /* Range Slider */
 .form-range {
-    width: 100%;
-    height: 6px;
-    background: var(--color-bg-tertiary);
+  width: 100%;
+  height: 6px;
+  background: var(--color-bg-tertiary);
 }
 
 .form-range::-moz-range-thumb {
-    width: 20px;
-    height: 20px;
-    background: var(--gradient-primary);
-    border-radius: 50%;
-    cursor: pointer;
-    border: none;
-    box-shadow: var(--shadow-sm);
-    transition: all var(--transition-fast);
+  width: 20px;
+  height: 20px;
+  background: var(--gradient-primary);
+  border-radius: 50%;
+  cursor: pointer;
+  border: none;
+  box-shadow: var(--shadow-sm);
+  transition: all var(--transition-fast);
 }
 
 .range-value {
-    display: inline-block;
-    margin-left: var(--spacing-sm);
-    padding: 0.25rem 0.75rem;
-    background: var(--color-bg-tertiary);
-    border-radius: var(--radius-sm);
-    font-weight: 600;
-    font-size: 0.875rem;
-    color: var(--color-accent-primary);
+  display: inline-block;
+  margin-left: var(--spacing-sm);
+  padding: 0.25rem 0.75rem;
+  background: var(--color-bg-tertiary);
+  border-radius: var(--radius-sm);
+  font-weight: 600;
+  font-size: 0.875rem;
+  color: var(--color-accent-primary);
 }
 
 /* ===================================
    BUTTONS
    =================================== */
 .btn {
-    padding: 0.875rem 1.75rem;
-    border: none;
-    border-radius: var(--radius-md);
-    font-family: var(--font-primary);
-    font-size: 0.9375rem;
-    font-weight: 600;
-    cursor: pointer;
-    transition: all var(--transition-base);
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    gap: var(--spacing-xs);
-    text-transform: uppercase;
-    letter-spacing: 0.05em;
+  padding: 0.875rem 1.75rem;
+  border: none;
+  border-radius: var(--radius-md);
+  font-family: var(--font-primary);
+  font-size: 0.9375rem;
+  font-weight: 600;
+  cursor: pointer;
+  transition: all var(--transition-base);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--spacing-xs);
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
 }
 
 .btn:disabled {
-    opacity: 0.5;
-    cursor: not-allowed;
+  opacity: 0.5;
+  cursor: not-allowed;
 }
 
 .btn-sm {
-    padding: 0.5rem 1rem;
-    font-size: 0.875rem;
+  padding: 0.5rem 1rem;
+  font-size: 0.875rem;
 }
 
 .btn-primary {
-    background: var(--gradient-primary);
-    color: white;
-    box-shadow: var(--shadow-sm);
+  background: var(--gradient-primary);
+  color: white;
+  box-shadow: var(--shadow-sm);
 }
 
 .btn-primary:hover:not(:disabled) {
-    transform: translateY(-2px);
-    box-shadow: var(--shadow-glow), var(--shadow-md);
+  transform: translateY(-2px);
+  box-shadow: var(--shadow-glow), var(--shadow-md);
 }
 
 .btn-primary:active:not(:disabled) {
-    transform: translateY(0);
+  transform: translateY(0);
 }
 
 .btn-success {
-    background: var(--gradient-success);
-    color: white;
-    box-shadow: var(--shadow-sm);
+  background: var(--gradient-success);
+  color: white;
+  box-shadow: var(--shadow-sm);
 }
 
 .btn-success:hover:not(:disabled) {
-    transform: translateY(-2px);
-    box-shadow: 0 0 20px rgba(16, 185, 129, 0.3), var(--shadow-md);
+  transform: translateY(-2px);
+  box-shadow: 0 0 20px rgba(16, 185, 129, 0.3), var(--shadow-md);
 }
 
 .btn-danger {
-    background: var(--gradient-danger);
-    color: white;
-    box-shadow: var(--shadow-sm);
+  background: var(--gradient-danger);
+  color: white;
+  box-shadow: var(--shadow-sm);
 }
 
 .btn-danger:hover:not(:disabled) {
-    transform: translateY(-2px);
-    box-shadow: 0 0 20px rgba(239, 68, 68, 0.3), var(--shadow-md);
+  transform: translateY(-2px);
+  box-shadow: 0 0 20px rgba(239, 68, 68, 0.3), var(--shadow-md);
 }
 
 .btn-warning {
-    background: var(--gradient-warning);
-    color: white;
-    box-shadow: var(--shadow-sm);
+  background: var(--gradient-warning);
+  color: white;
+  box-shadow: var(--shadow-sm);
 }
 
 .btn-warning:hover:not(:disabled) {
-    transform: translateY(-2px);
-    box-shadow: 0 0 20px rgba(245, 158, 11, 0.3), var(--shadow-md);
+  transform: translateY(-2px);
+  box-shadow: 0 0 20px rgba(245, 158, 11, 0.3), var(--shadow-md);
 }
 
 .btn-secondary {
-    background: var(--color-bg-tertiary);
-    color: var(--color-text-primary);
-    border: 1px solid var(--color-border);
+  background: var(--color-bg-tertiary);
+  color: var(--color-text-primary);
+  border: 1px solid var(--color-border);
 }
 
 .btn-secondary:hover:not(:disabled) {
-    background: var(--color-bg-glass);
-    border-color: var(--color-border-hover);
+  background: var(--color-bg-glass);
+  border-color: var(--color-border-hover);
 }
 
 /* Button Group */
 .btn-group {
-    display: flex;
-    gap: var(--spacing-md);
-    flex-wrap: wrap;
+  display: flex;
+  gap: var(--spacing-md);
+  flex-wrap: wrap;
 }
 
 /* ===================================
    STATISTICS CARDS
    =================================== */
 .stats-grid {
-    display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
-    gap: var(--spacing-md);
-    margin-bottom: var(--spacing-xl);
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+  gap: var(--spacing-md);
+  margin-bottom: var(--spacing-xl);
 }
 
 .stat-card {
-    background: var(--color-bg-tertiary);
-    border: 1px solid var(--color-border);
-    border-radius: var(--radius-lg);
-    padding: var(--spacing-lg);
-    transition: all var(--transition-base);
+  background: var(--color-bg-tertiary);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-lg);
+  padding: var(--spacing-lg);
+  transition: all var(--transition-base);
 }
 
 .stat-card:hover {
-    border-color: var(--color-border-hover);
-    transform: translateY(-2px);
-    box-shadow: var(--shadow-md);
+  border-color: var(--color-border-hover);
+  transform: translateY(-2px);
+  box-shadow: var(--shadow-md);
 }
 
 .stat-card-large {
-    background: var(--color-bg-tertiary);
-    border: 1px solid var(--color-border);
-    border-radius: var(--radius-lg);
-    padding: var(--spacing-xl);
-    text-align: center;
+  background: var(--color-bg-tertiary);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-lg);
+  padding: var(--spacing-xl);
+  text-align: center;
 }
 
 .stat-label {
-    font-size: 0.75rem;
-    font-weight: 600;
-    color: var(--color-text-tertiary);
-    text-transform: uppercase;
-    letter-spacing: 0.05em;
-    margin-bottom: var(--spacing-xs);
+  font-size: 0.75rem;
+  font-weight: 600;
+  color: var(--color-text-tertiary);
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  margin-bottom: var(--spacing-xs);
 }
 
 .stat-value {
-    font-size: 2rem;
-    font-weight: 800;
-    color: var(--color-text-primary);
-    line-height: 1;
+  font-size: 2rem;
+  font-weight: 800;
+  color: var(--color-text-primary);
+  line-height: 1;
 }
 
 .stat-value.success {
-    color: var(--color-accent-success);
+  color: var(--color-accent-success);
 }
 
 .stat-value.danger {
-    color: var(--color-accent-danger);
+  color: var(--color-accent-danger);
 }
 
 .stat-value.warning {
-    color: var(--color-accent-warning);
+  color: var(--color-accent-warning);
 }
 
 .stat-value.info {
-    color: var(--color-accent-info);
+  color: var(--color-accent-info);
 }
 
 /* ===================================
    CHARTS & VISUALIZATIONS
    =================================== */
 .chart-container {
-    position: relative;
-    height: 300px;
-    margin-top: var(--spacing-lg);
-    padding: var(--spacing-md);
-    background: var(--color-bg-tertiary);
-    border-radius: var(--radius-lg);
-    border: 1px solid var(--color-border);
+  position: relative;
+  height: 300px;
+  margin-top: var(--spacing-lg);
+  padding: var(--spacing-md);
+  background: var(--color-bg-tertiary);
+  border-radius: var(--radius-lg);
+  border: 1px solid var(--color-border);
 }
 
 /* ===================================
    REQUEST HISTORY TABLE
    =================================== */
 .request-history-container {
-    max-height: 400px;
-    overflow-y: auto;
-    border-radius: var(--radius-md);
-    border: 1px solid var(--color-border);
+  max-height: 400px;
+  overflow-y: auto;
+  border-radius: var(--radius-md);
+  border: 1px solid var(--color-border);
 }
 
 .request-history-table {
-    width: 100%;
-    border-collapse: collapse;
-    font-size: 0.875rem;
+  width: 100%;
+  border-collapse: collapse;
+  font-size: 0.875rem;
 }
 
 .request-history-table thead {
-    position: sticky;
-    top: 0;
-    background: var(--color-bg-tertiary);
-    z-index: 10;
+  position: sticky;
+  top: 0;
+  background: var(--color-bg-tertiary);
+  z-index: 10;
 }
 
 .request-history-table th {
-    padding: var(--spacing-md);
-    text-align: left;
-    font-weight: 600;
-    color: var(--color-text-secondary);
-    text-transform: uppercase;
-    letter-spacing: 0.05em;
-    font-size: 0.75rem;
-    border-bottom: 2px solid var(--color-border);
+  padding: var(--spacing-md);
+  text-align: left;
+  font-weight: 600;
+  color: var(--color-text-secondary);
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  font-size: 0.75rem;
+  border-bottom: 2px solid var(--color-border);
 }
 
 .request-history-table td {
-    padding: var(--spacing-sm) var(--spacing-md);
-    border-bottom: 1px solid var(--color-border);
-    color: var(--color-text-primary);
+  padding: var(--spacing-sm) var(--spacing-md);
+  border-bottom: 1px solid var(--color-border);
+  color: var(--color-text-primary);
 }
 
 .request-history-table tr.success-row {
-    background: rgba(16, 185, 129, 0.05);
+  background: rgba(16, 185, 129, 0.05);
 }
 
 .request-history-table tr.error-row {
-    background: rgba(239, 68, 68, 0.05);
+  background: rgba(239, 68, 68, 0.05);
 }
 
 .request-history-table tr:hover {
-    background: var(--color-bg-glass);
+  background: var(--color-bg-glass);
 }
 
 .url-cell {
-    max-width: 300px;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
+  max-width: 300px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 
 .status-code {
-    display: inline-block;
-    padding: 0.25rem 0.5rem;
-    border-radius: var(--radius-sm);
-    font-weight: 600;
-    font-size: 0.75rem;
+  display: inline-block;
+  padding: 0.25rem 0.5rem;
+  border-radius: var(--radius-sm);
+  font-weight: 600;
+  font-size: 0.75rem;
 }
 
 .status-code.success {
-    background: rgba(16, 185, 129, 0.1);
-    color: var(--color-accent-success);
+  background: rgba(16, 185, 129, 0.1);
+  color: var(--color-accent-success);
 }
 
 .status-code.error {
-    background: rgba(239, 68, 68, 0.1);
-    color: var(--color-accent-danger);
+  background: rgba(239, 68, 68, 0.1);
+  color: var(--color-accent-danger);
 }
 
 /* ===================================
    STATUS INDICATORS
    =================================== */
 .status-badge {
-    display: inline-flex;
-    align-items: center;
-    gap: var(--spacing-xs);
-    padding: 0.375rem 0.875rem;
-    border-radius: var(--radius-lg);
-    font-size: 0.875rem;
-    font-weight: 600;
-    text-transform: uppercase;
-    letter-spacing: 0.05em;
+  display: inline-flex;
+  align-items: center;
+  gap: var(--spacing-xs);
+  padding: 0.375rem 0.875rem;
+  border-radius: var(--radius-lg);
+  font-size: 0.875rem;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
 }
 
 .status-badge::before {
-    content: '';
-    width: 8px;
-    height: 8px;
-    border-radius: 50%;
-    animation: pulse 2s infinite;
+  content: "";
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  animation: pulse 2s infinite;
 }
 
 .status-idle {
-    background: rgba(148, 163, 184, 0.1);
-    color: var(--color-text-tertiary);
+  background: rgba(148, 163, 184, 0.1);
+  color: var(--color-text-tertiary);
 }
 
 .status-idle::before {
-    background: var(--color-text-tertiary);
+  background: var(--color-text-tertiary);
 }
 
 .status-running {
-    background: rgba(16, 185, 129, 0.1);
-    color: var(--color-accent-success);
+  background: rgba(16, 185, 129, 0.1);
+  color: var(--color-accent-success);
 }
 
 .status-running::before {
-    background: var(--color-accent-success);
+  background: var(--color-accent-success);
 }
 
 .status-paused {
-    background: rgba(245, 158, 11, 0.1);
-    color: var(--color-accent-warning);
+  background: rgba(245, 158, 11, 0.1);
+  color: var(--color-accent-warning);
 }
 
 .status-paused::before {
-    background: var(--color-accent-warning);
+  background: var(--color-accent-warning);
 }
 
 .status-error {
-    background: rgba(239, 68, 68, 0.1);
-    color: var(--color-accent-danger);
+  background: rgba(239, 68, 68, 0.1);
+  color: var(--color-accent-danger);
 }
 
 .status-error::before {
-    background: var(--color-accent-danger);
+  background: var(--color-accent-danger);
 }
 
 /* ===================================
    PROGRESS BAR
    =================================== */
 .progress-container {
-    width: 100%;
-    height: 8px;
-    background: var(--color-bg-tertiary);
-    border-radius: var(--radius-lg);
-    overflow: hidden;
-    margin-top: var(--spacing-md);
+  width: 100%;
+  height: 8px;
+  background: var(--color-bg-tertiary);
+  border-radius: var(--radius-lg);
+  overflow: hidden;
+  margin-top: var(--spacing-md);
 }
 
 .progress-bar {
-    height: 100%;
-    background: var(--gradient-primary);
-    border-radius: var(--radius-lg);
-    transition: width var(--transition-base);
-    position: relative;
-    overflow: hidden;
+  height: 100%;
+  background: var(--gradient-primary);
+  border-radius: var(--radius-lg);
+  transition: width var(--transition-base);
+  position: relative;
+  overflow: hidden;
 }
 
 .progress-bar::after {
-    content: '';
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    background: linear-gradient(90deg,
-            transparent,
-            rgba(255, 255, 255, 0.3),
-            transparent);
-    animation: shimmer 2s infinite;
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: linear-gradient(
+    90deg,
+    transparent,
+    rgba(255, 255, 255, 0.3),
+    transparent
+  );
+  animation: shimmer 2s infinite;
 }
 
 /* ===================================
    RESULTS TABLE
    =================================== */
 .results-table {
-    width: 100%;
-    border-collapse: collapse;
-    margin-top: var(--spacing-lg);
-    font-size: 0.875rem;
+  width: 100%;
+  border-collapse: collapse;
+  margin-top: var(--spacing-lg);
+  font-size: 0.875rem;
 }
 
 .results-table th {
-    background: var(--color-bg-tertiary);
-    padding: var(--spacing-md);
-    text-align: left;
-    font-weight: 600;
-    color: var(--color-text-secondary);
-    text-transform: uppercase;
-    letter-spacing: 0.05em;
-    font-size: 0.75rem;
-    border-bottom: 2px solid var(--color-border);
+  background: var(--color-bg-tertiary);
+  padding: var(--spacing-md);
+  text-align: left;
+  font-weight: 600;
+  color: var(--color-text-secondary);
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  font-size: 0.75rem;
+  border-bottom: 2px solid var(--color-border);
 }
 
 .results-table td {
-    padding: var(--spacing-md);
-    border-bottom: 1px solid var(--color-border);
-    color: var(--color-text-primary);
+  padding: var(--spacing-md);
+  border-bottom: 1px solid var(--color-border);
+  color: var(--color-text-primary);
 }
 
 .results-table tr:hover {
-    background: var(--color-bg-tertiary);
+  background: var(--color-bg-tertiary);
 }
 
 .results-table code {
-    font-family: var(--font-mono);
-    font-size: 0.8125rem;
-    color: var(--color-accent-primary);
+  font-family: var(--font-mono);
+  font-size: 0.8125rem;
+  color: var(--color-accent-primary);
 }
 
 /* ===================================
    ACCORDION
    =================================== */
 .accordion {
-    margin-bottom: var(--spacing-md);
+  margin-bottom: var(--spacing-md);
 }
 
 .accordion-header {
-    width: 100%;
-    padding: var(--spacing-md);
-    background: var(--color-bg-tertiary);
-    border: 1px solid var(--color-border);
-    border-radius: var(--radius-md);
-    color: var(--color-text-primary);
-    font-family: var(--font-primary);
-    font-size: 0.9375rem;
-    font-weight: 600;
-    cursor: pointer;
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    transition: all var(--transition-base);
+  width: 100%;
+  padding: var(--spacing-md);
+  background: var(--color-bg-tertiary);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-md);
+  color: var(--color-text-primary);
+  font-family: var(--font-primary);
+  font-size: 0.9375rem;
+  font-weight: 600;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  transition: all var(--transition-base);
 }
 
 .accordion-header:hover {
-    background: var(--color-bg-glass);
-    border-color: var(--color-border-hover);
+  background: var(--color-bg-glass);
+  border-color: var(--color-border-hover);
 }
 
 .accordion-icon {
-    transition: transform var(--transition-base);
+  transition: transform var(--transition-base);
 }
 
 .accordion-header.active .accordion-icon {
-    transform: rotate(180deg);
+  transform: rotate(180deg);
 }
 
 .accordion-content {
-    max-height: 0;
-    overflow: hidden;
-    transition: max-height var(--transition-slow);
+  max-height: 0;
+  overflow: hidden;
+  transition: max-height var(--transition-slow);
 }
 
 .accordion-content.active {
-    max-height: 1000px;
-    padding-top: var(--spacing-md);
+  max-height: 1000px;
+  padding-top: var(--spacing-md);
 }
 
 /* ===================================
    ANIMATIONS
    =================================== */
 @keyframes pulse {
+  0%,
+  100% {
+    opacity: 1;
+  }
 
-    0%,
-    100% {
-        opacity: 1;
-    }
-
-    50% {
-        opacity: 0.5;
-    }
+  50% {
+    opacity: 0.5;
+  }
 }
 
 @keyframes shimmer {
-    0% {
-        transform: translateX(-100%);
-    }
+  0% {
+    transform: translateX(-100%);
+  }
 
-    100% {
-        transform: translateX(100%);
-    }
+  100% {
+    transform: translateX(100%);
+  }
 }
 
 @keyframes fadeIn {
-    from {
-        opacity: 0;
-        transform: translateY(10px);
-    }
+  from {
+    opacity: 0;
+    transform: translateY(10px);
+  }
 
-    to {
-        opacity: 1;
-        transform: translateY(0);
-    }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
 }
 
 @keyframes fadeInDown {
-    from {
-        opacity: 0;
-        transform: translateY(-20px);
-    }
+  from {
+    opacity: 0;
+    transform: translateY(-20px);
+  }
 
-    to {
-        opacity: 1;
-        transform: translateY(0);
-    }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
 }
 
 .fade-in {
-    animation: fadeIn var(--transition-base) ease-out;
+  animation: fadeIn var(--transition-base) ease-out;
 }
 
 /* ===================================
    RESPONSIVE DESIGN
    =================================== */
 @media (max-width: 1024px) {
-    .main-grid {
-        grid-template-columns: 1fr;
-    }
+  .main-grid {
+    grid-template-columns: 1fr;
+  }
 
-    .stats-grid {
-        grid-template-columns: repeat(2, 1fr);
-    }
+  .stats-grid {
+    grid-template-columns: repeat(2, 1fr);
+  }
 
-    .header {
-        flex-direction: column;
-        align-items: flex-start;
-        gap: var(--spacing-md);
-    }
+  .header {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: var(--spacing-md);
+  }
 
-    .preset-controls {
-        flex-direction: column;
-    }
+  .preset-controls {
+    flex-direction: column;
+  }
 }
 
 @media (max-width: 640px) {
-    .container {
-        padding: var(--spacing-md);
-    }
+  .container {
+    padding: var(--spacing-md);
+  }
 
-    .header h1 {
-        font-size: 2rem;
-    }
+  .header h1 {
+    font-size: 2rem;
+  }
 
-    .header p {
-        font-size: 1rem;
-    }
+  .header p {
+    font-size: 1rem;
+  }
 
-    .panel {
-        padding: var(--spacing-md);
-    }
+  .panel {
+    padding: var(--spacing-md);
+  }
 
-    .stats-grid {
-        grid-template-columns: 1fr;
-    }
+  .stats-grid {
+    grid-template-columns: 1fr;
+  }
 
-    .btn-group {
-        flex-direction: column;
-    }
+  .btn-group {
+    flex-direction: column;
+  }
 
-    .btn {
-        width: 100%;
-    }
+  .btn {
+    width: 100%;
+  }
 
-    .request-history-table {
-        font-size: 0.75rem;
-    }
+  .request-history-table {
+    font-size: 0.75rem;
+  }
 
-    .request-history-table th,
-    .request-history-table td {
-        padding: var(--spacing-xs);
-    }
+  .request-history-table th,
+  .request-history-table td {
+    padding: var(--spacing-xs);
+  }
 }
 
 /* ===================================
    UTILITY CLASSES
    =================================== */
 .text-center {
-    text-align: center;
+  text-align: center;
 }
 
 .mt-1 {
-    margin-top: var(--spacing-xs);
+  margin-top: var(--spacing-xs);
 }
 
 .mt-2 {
-    margin-top: var(--spacing-sm);
+  margin-top: var(--spacing-sm);
 }
 
 .mt-3 {
-    margin-top: var(--spacing-md);
+  margin-top: var(--spacing-md);
 }
 
 .mt-4 {
-    margin-top: var(--spacing-lg);
+  margin-top: var(--spacing-lg);
 }
 
 .mb-1 {
-    margin-bottom: var(--spacing-xs);
+  margin-bottom: var(--spacing-xs);
 }
 
 .mb-2 {
-    margin-bottom: var(--spacing-sm);
+  margin-bottom: var(--spacing-sm);
 }
 
 .mb-3 {
-    margin-bottom: var(--spacing-md);
+  margin-bottom: var(--spacing-md);
 }
 
 .mb-4 {
-    margin-bottom: var(--spacing-lg);
+  margin-bottom: var(--spacing-lg);
 }
 
 .hidden {
-    display: none;
+  display: none;
 }
 
 .full-width {
-    grid-column: 1 / -1;
-}
\ No newline at end of file
+  grid-column: 1 / -1;
+}
+
+/* ===================================
+   GIT INFO PILL
+   =================================== */
+.git-info-pill {
+  position: fixed;
+  bottom: 20px;
+  right: 20px;
+  background-color: var(--color-bg-secondary);
+  border: 1px solid var(--color-border);
+  padding: 8px 16px;
+  border-radius: 9999px;
+  font-family: var(--font-mono);
+  font-size: 0.875rem;
+  color: var(--color-text-muted);
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  box-shadow: var(--shadow-md);
+  z-index: 1000;
+  backdrop-filter: blur(10px);
+  transition: all var(--transition-base);
+}
+
+.git-info-pill:hover {
+  border-color: var(--color-accent-secondary);
+  box-shadow: var(--shadow-lg);
+  transform: translateY(-2px);
+}
+
+.git-commit {
+  color: var(--color-accent-secondary);
+  font-weight: 600;
+}
+
+.git-separator {
+  color: var(--color-text-tertiary);
+}
+
+.git-date {
+  color: var(--color-text-tertiary);
+}
