You are a senior front-end UI/UX engineer.

Your task is to recreate and *visually improve* my entire UI while keeping all
functionalities, IDs, events, and JavaScript compatibility intact.

🎯 GOALS
- Make my UI look 10× more modern, clean, premium, and professional.
- Use a futuristic glass-morphism + neon cyber-dashboard style.
- Improve spacing, alignment, contrast, color palette, and readability.
- Make every widget (cards, gauges, charts, logs, MQTT indicators, sliders, buttons)
look highly polished.
- Keep all functionality identical.
- Keep ALL element IDs exactly the same because my JS depends on them.
- You may reorganize layout using grid/flex for better design.
- Add smooth animations, hover effects, glow effects, blurred backgrounds.
- Add consistent fonts and improve typography.
- Keep everything fully responsive for all screen sizes.
- Final output must give:
1. index.html
2. style.css
3. (optional) small UI-animation improvements in JS (no logic changes)

⚠️ IMPORTANT RULES
- DO NOT modify or remove any existing IDs.
- DO NOT change the JavaScript logic flow.
- Only redesign the VISUAL UI.
- You can wrap elements in new containers to improve layout.

🧠 HERE IS MY CURRENT CODE (HTML + CSS + JS).
Use this ONLY as structure reference.
Redesign it completely into a polished, beautiful UI:

-----------------------------------
PASTE START
-----------------------------------

/* PASTE YOUR FULL CODE HERE */

/* app.js — Full AirSense dashboard logic (HiveMQ WSS + gauges + conversion + alarms)
Requirements:
- gauges.js must be loaded first (defines window.Gauge)
- This file will dynamically load mqtt.min.js (mqtt.js browser bundle) if not already present
- Exposes window._AirSense for debugging
*/

/* ================== CONFIG ================== */
const CONFIG = {
// HiveMQ Cloud WSS (browser websocket)
MQTT: {
HOST_WS: 'wss://26b1337297f546aca14cdeed96ef0d24.s1.eu.hivemq.cloud:8884/mqtt',
USER: 'vikhyatesp32',
PASS: 'Vikhyat1234',
TOPIC: 'airsense/vikhy/device1/data',
CLIENT_PREFIX: 'dash_browser_'
},

// Gauge definitions & thresholds (ppm)
GAUGES: {
co2: { label: 'CO₂', unit: 'ppm', min: 0, max: 5000, ranges: { safe: 400, warn: 1000 } }, // user: 400/1000/2000
co: { label: 'CO', unit: 'ppm', min: 0, max: 1000, ranges: { safe: 50, warn: 300 } }, // user: 50/300/700
voc: { label: 'VOC', unit: 'ppm', min: 0, max: 2000, ranges: { safe: 220, warn: 400 } },
smoke:{ label: 'Smoke',unit:'ppm', min: 0, max: 2000, ranges: { safe: 150, warn: 300 } }
},

UI_THROTTLE_MS: 500, // throttle UI updates
SIREN_ON_CRITICAL: true,
OFFLINE_TIMEOUT_MS: 10000,
BATTERY_CONSUMPTION_MAH: 40,
CHART_MAX_DATA_POINTS: 50 // Max points to show on chart
};

/* ================== STATE ================== */
const state = {
mqttClient: null,
mqttConnected: false,
devices: {},
selectedDeviceId: null,
lastUIUpdate: 0,
forcedAlarm: null,
sirenPlaying: false,
sirenNodes: null,
aqiChart: null // To hold the chart instance
};

/* ================== DOM refs ================== */
const dom = {
connRibbon: document.getElementById('connRibbon'),
deviceSelect: document.getElementById('deviceSelect'),
deviceId: document.getElementById('deviceId'),
lastUpdate: document.getElementById('lastUpdate'),
batteryPercent: document.getElementById('batteryPercent'),
batteryLevelBar: document.getElementById('batteryLevelBar'),
hoursLeft: document.getElementById('hoursLeft'),
deviceStatus: document.getElementById('deviceStatus'),
deviceAlarm: document.getElementById('deviceAlarm'),
deviceSignal: document.getElementById('deviceSignal'),
sampleRate: document.getElementById('sampleRate'),
eventsList: document.getElementById('eventsList'),
ledGreen: document.getElementById('ledGreen'),
ledYellow: document.getElementById('ledYellow'),
ledRed: document.getElementById('ledRed'),
ledGreenWrap: document.getElementById('ledGreenWrap'),
ledYellowWrap: document.getElementById('ledYellowWrap'),
ledRedWrap: document.getElementById('ledRedWrap'),
fullscreenAlarm: document.getElementById('fullscreenAlarm'),
alarmDesc: document.getElementById('alarmDesc'),
alarmStop: document.getElementById('alarmStop'),
alarmAck: document.getElementById('alarmAck'),
alarmToggle: document.getElementById('alarmToggle'),
testAlarmBtn: document.getElementById('testAlarmBtn'),

// Chart canvas
aqiHistoryChart: document.getElementById('aqiHistoryChart'),

// Export Button
exportDataBtn: document.getElementById('exportDataBtn')
};

/* ================== Load MQTT lib dynamically if needed ================== */
function ensureMqttLib() {
return new Promise((resolve, reject) => {
if (window.mqtt) return resolve(window.mqtt);
const url = 'https://unpkg.com/mqtt/dist/mqtt.min.js';
const s = document.createElement('script');
s.src = url;
s.async = true;
s.onload = () => {
if (window.mqtt) resolve(window.mqtt);
else reject(new Error('mqtt lib loaded but window.mqtt missing'));
};
s.onerror = (e) => reject(new Error('Failed to load mqtt lib: ' + e));
document.head.appendChild(s);
});
}

/* ================== Gauges init ================== */
const gaugeContainers = {
co2: document.getElementById('gauge-co2'),
co: document.getElementById('gauge-co'),
voc: document.getElementById('gauge-voc'),
smoke: document.getElementById('gauge-smoke')
};
const gauges = {};
Object.keys(CONFIG.GAUGES).forEach(k => {
const cfg = CONFIG.GAUGES[k];
gauges[k] = new Gauge(gaugeContainers[k], {
label: cfg.label, unit: cfg.unit, min: cfg.min, max: cfg.max, ranges: cfg.ranges,
width: 300, height: 300,
colors: { safe: '#2ecc71', warn: '#e67e22', danger: '#e74c3c', track: 'rgba(255,255,255,0.04)' }
});
});

/* ================== Helpers ================== */
function pushEvent(txt) {
// Gracefully handle if eventsList is missing
if (!dom.eventsList) {
console.log("Event:", txt);
return;
}
const li = document.createElement('li');
const now = new Date();
li.innerHTML = `<div><strong>${txt}</strong><div class="time muted">${now.toLocaleString()}</div></div>`;
dom.eventsList.prepend(li);
while (dom.eventsList.children.length > 60) dom.eventsList.removeChild(dom.eventsList.lastChild);
}

function shouldUpdateUI() {
if (Date.now() - state.lastUIUpdate >= CONFIG.UI_THROTTLE_MS) {
state.lastUIUpdate = Date.now();
return true;
}
return false;
}

function valueToPpmFromVoltage(sensorKey, volts) {
// Basic conversion heuristics (approximate). You told me earlier conversions may be done in website.
// These are linear scalings chosen to map expected voltage ranges to ppm ranges used by gauges above.
// If you have calibration data replace these formulas with accurate mappings.
if (!isFinite(volts)) return 0;
switch (sensorKey) {
case 'voc': // MQ-2 -> VOC (combined)
// assume 0..5V -> 0..2000 ppm
return (volts / 5.0) * 2000;
case 'smoke': // MQ-2 + MQ-3 assist -> smoke ppm
return (volts / 5.0) * 2000;
case 'co': // MQ-7
// assume 0..5V -> 0..1000 ppm (MQ-7 often lower but use wider range)
return (volts / 5.0) * 1000;
case 'co2': // MQ-135
// assume 0..5V -> 0..5000 ppm
return (volts / 5.0) * 5000;
default:
return (volts / 5.0) * 1000;
}
}

function severityFromGases(gases) {
// returns 'none' | 'warning' | 'critical'
let sev = 0;
if (!gases) return 'none';
// CO thresholds (user provided)
const co = Number(gases.co ?? 0);
if (co > 700) sev = Math.max(sev, 2);
else if (co > 300) sev = Math.max(sev, 1);

// CO2 thresholds (user provided)
const co2 = Number(gases.co2 ?? 0);
if (co2 > 2000) sev = Math.max(sev, 2);
else if (co2 > 1000) sev = Math.max(sev, 1);

// VOC / Smoke thresholds - use gauge ranges (approx)
const voc = Number(gases.voc ?? 0);
if (voc > (CONFIG.GAUGES.voc.ranges?.warn || 400)) sev = Math.max(sev, 1);
// treat high voc > 1200 as critical
if (voc > 1200) sev = Math.max(sev, 2);

const smoke = Number(gases.smoke ?? 0);
if (smoke > (CONFIG.GAUGES.smoke.ranges?.warn || 300)) sev = Math.max(sev, 1);
if (smoke > 1200) sev = Math.max(sev, 2);

return sev === 2 ? 'critical' : (sev === 1 ? 'warning' : 'none');
}

/* LED visuals */
function clearLEDs() { [dom.ledGreen, dom.ledYellow, dom.ledRed].forEach(el => el.classList.remove('led-active-green','led-active-yellow','led-active-red','led-pulse')); }
function setLEDState(level) {
clearLEDs();
if (state.forcedAlarm) level = state.forcedAlarm;
let pulseSpeed = 1.6;
if (level === 'none') { dom.ledGreen.classList.add('led-active-green', 'led-pulse'); pulseSpeed = 2.4; }
else if (level === 'warning') { dom.ledYellow.classList.add('led-active-yellow', 'led-pulse'); pulseSpeed = 1.1; }
else if (level === 'critical') { dom.ledRed.classList.add('led-active-red', 'led-pulse'); pulseSpeed = 0.6; }
[dom.ledGreen, dom.ledYellow, dom.ledRed].forEach(el => { if (el.classList.contains('led-pulse')) el.style.animationDuration = `${pulseSpeed}s`; });
}

/* Battery UI (keeps simple) */
function updateBatteryUI(battPercent) {
dom.batteryPercent.textContent = `${battPercent}%`;
dom.batteryLevelBar.style.width = `${battPercent}%`;
if (battPercent > 50) dom.batteryLevelBar.style.background = 'linear-gradient(90deg,var(--green), #28b463)';
else if (battPercent > 20) dom.batteryLevelBar.style.background = 'linear-gradient(90deg,var(--orange), #f39c12)';
else dom.batteryLevelBar.style.background = 'linear-gradient(90deg,var(--red), #e74c3c)';

const consumption = CONFIG.BATTERY_CONSUMPTION_MAH || 40;
const hoursLeft = ((battPercent/100) * 1000) / consumption;
dom.hoursLeft.textContent = `${Math.max(0, Math.round(hoursLeft*10)/10)} hrs left`;
}

/* ================== NEW: AQI Calculation ================== */

/**
* Maps a value from one range to an AQI-like index (0-500).
* "warn" threshold maps to 100.
* "max" threshold maps to 500.
*/
function mapToSubIndex(value, warn, max) {
const v = Number(value) || 0;
const w = Number(warn) || 1; // Avoid division by zero
const m

README.md

@@ -1,10 +1,13 @@
 ---
-title: Airsense Cyberdash 3000
-emoji: 😻
-colorFrom: green
-colorTo: red
+title: AirSense CyberDash 3000  🚀
+colorFrom: blue
+colorTo: yellow
+emoji: 🐳
 sdk: static
 pinned: false
+tags:
+  - deepsite-v3
 ---
 
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+# Welcome to your new DeepSite project!
+This project was created with [DeepSite](https://huggingface.co/deepsite).

index.html

@@ -1,19 +1,232 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>AirSense CyberDash 3000</title>
+  <link rel="stylesheet" href="style.css">
+  <script src="https://cdn.tailwindcss.com"></script>
+  <script src="https://unpkg.com/feather-icons"></script>
+  <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
+  <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600;700&family=Orbitron:wght@400;600&display=swap" rel="stylesheet">
+  <script src="components/navbar.js"></script>
+  <script src="components/footer.js"></script>
+</head>
+<body class="bg-gray-900 text-white font-sans">
+  <custom-navbar></custom-navbar>
+
+  <main class="container mx-auto px-4 py-8 grid grid-cols-1 lg:grid-cols-12 gap-6">
+    <!-- Left Column -->
+    <div class="lg:col-span-3 space-y-6">
+      <!-- Device Card -->
+      <div class="glass-card p-6 rounded-xl backdrop-blur-lg border border-opacity-20 border-white">
+        <h2 class="text-xl font-bold mb-4 flex items-center">
+          <i data-feather="cpu" class="mr-2"></i> Device Status
+        </h2>
+        <div class="space-y-4">
+          <div>
+            <p class="text-sm text-gray-400">Device ID</p>
+            <p id="deviceId" class="text-lg font-mono">No device connected</p>
+          </div>
+          <div>
+            <p class="text-sm text-gray-400">Last Update</p>
+            <p id="lastUpdate" class="text-sm">Waiting for data</p>
+          </div>
+        </div>
+
+        <div class="mt-6">
+          <div class="flex justify-between items-center mb-1">
+            <span class="text-sm text-gray-400">Battery</span>
+            <span id="batteryPercent" class="text-sm">—%</span>
+          </div>
+          <div class="w-full bg-gray-800 rounded-full h-2.5">
+            <div id="batteryLevelBar" class="h-2.5 rounded-full bg-gradient-to-r from-green-400 to-blue-500" style="width: 0%"></div>
+          </div>
+          <p id="hoursLeft" class="text-xs text-gray-400 mt-1">— hrs left</p>
+        </div>
+
+        <div class="grid grid-cols-2 gap-4 mt-6">
+          <div>
+            <p class="text-sm text-gray-400">Status</p>
+            <p id="deviceStatus" class="text-sm">idle</p>
+          </div>
+          <div>
+            <p class="text-sm text-gray-400">Alarm</p>
+            <p id="deviceAlarm" class="text-sm">none</p>
+          </div>
+          <div>
+            <p class="text-sm text-gray-400">Signal</p>
+            <p id="deviceSignal" class="text-sm">—</p>
+          </div>
+          <div>
+            <p class="text-sm text-gray-400">Sample</p>
+            <p id="sampleRate" class="text-sm">—</p>
+          </div>
+        </div>
+
+        <div class="flex space-x-2 mt-6">
+          <button id="alarmToggle" class="flex-1 bg-gradient-to-r from-purple-600 to-blue-500 hover:from-purple-700 hover:to-blue-600 text-white py-2 px-4 rounded-lg transition-all disabled:opacity-50" disabled>
+            Alarm: OFF
+          </button>
+          <button id="testAlarmBtn" class="bg-gradient-to-r from-red-500 to-pink-500 hover:from-red-600 hover:to-pink-600 text-white py-2 px-4 rounded-lg transition-all disabled:opacity-50" disabled>
+            Test
+          </button>
+        </div>
+      </div>
+
+      <!-- LED Indicators -->
+      <div class="glass-card p-6 rounded-xl backdrop-blur-lg border border-opacity-20 border-white">
+        <h2 class="text-xl font-bold mb-4 flex items-center">
+          <i data-feather="alert-triangle" class="mr-2"></i> Status Indicators
+        </h2>
+        <div class="flex justify-between">
+          <div id="ledGreenWrap" class="text-center cursor-pointer">
+            <div id="ledGreen" class="led led-green mx-auto"></div>
+            <p class="text-sm mt-2">OK</p>
+          </div>
+          <div id="ledYellowWrap" class="text-center cursor-pointer">
+            <div id="ledYellow" class="led led-yellow mx-auto"></div>
+            <p class="text-sm mt-2">Warning</p>
+          </div>
+          <div id="ledRedWrap" class="text-center cursor-pointer">
+            <div id="ledRed" class="led led-red mx-auto"></div>
+            <p class="text-sm mt-2">Critical</p>
+          </div>
+        </div>
+      </div>
+
+      <!-- Events Log -->
+      <div class="glass-card p-6 rounded-xl backdrop-blur-lg border border-opacity-20 border-white h-96 overflow-hidden">
+        <h2 class="text-xl font-bold mb-4 flex items-center">
+          <i data-feather="activity" class="mr-2"></i> Event Log
+        </h2>
+        <ul id="eventsList" class="space-y-2 overflow-y-auto h-80 pr-2">
+          <!-- Events will be added here dynamically -->
+        </ul>
+      </div>
+    </div>
+
+    <!-- Middle Column -->
+    <div class="lg:col-span-6 space-y-6">
+      <!-- Gauges Grid -->
+      <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
+        <div id="gauge-co2" class="glass-card p-4 rounded-xl backdrop-blur-lg border border-opacity-20 border-white"></div>
+        <div id="gauge-co" class="glass-card p-4 rounded-xl backdrop-blur-lg border border-opacity-20 border-white"></div>
+        <div id="gauge-voc" class="glass-card p-4 rounded-xl backdrop-blur-lg border border-opacity-20 border-white"></div>
+        <div id="gauge-smoke" class="glass-card p-4 rounded-xl backdrop-blur-lg border border-opacity-20 border-white"></div>
+      </div>
+
+      <!-- AQI Chart -->
+      <div class="glass-card p-6 rounded-xl backdrop-blur-lg border border-opacity-20 border-white">
+        <div class="flex justify-between items-center mb-4">
+          <h2 class="text-xl font-bold flex items-center">
+            <i data-feather="bar-chart-2" class="mr-2"></i> AQI History
+          </h2>
+          <button id="exportDataBtn" class="text-sm bg-gray-800 hover:bg-gray-700 px-3 py-1 rounded-lg transition-all">
+            Export Data
+          </button>
+        </div>
+        <div class="h-64">
+          <canvas id="aqiHistoryChart"></canvas>
+        </div>
+      </div>
+    </div>
+
+    <!-- Right Column -->
+    <div class="lg:col-span-3 space-y-6">
+      <!-- Connection Status -->
+      <div class="glass-card p-6 rounded-xl backdrop-blur-lg border border-opacity-20 border-white">
+        <h2 class="text-xl font-bold mb-4 flex items-center">
+          <i data-feather="wifi" class="mr-2"></i> Connection
+        </h2>
+        <div class="flex items-center justify-between mb-4">
+          <span class="text-sm">MQTT Status</span>
+          <span id="connRibbon" class="px-3 py-1 rounded-full text-xs font-medium bg-gray-800">Idle</span>
+        </div>
+        <div class="mt-6">
+          <label for="deviceSelect" class="block text-sm text-gray-400 mb-2">Select Device</label>
+          <select id="deviceSelect" class="w-full bg-gray-800 border border-gray-700 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500">
+            <option value="">No device</option>
+          </select>
+        </div>
+      </div>
+
+      <!-- Quick Actions -->
+      <div class="glass-card p-6 rounded-xl backdrop-blur-lg border border-opacity-20 border-white">
+        <h2 class="text-xl font-bold mb-4 flex items-center">
+          <i data-feather="zap" class="mr-2"></i> Quick Actions
+        </h2>
+        <div class="space-y-3">
+          <button id="testAlarmBtn" class="w-full bg-gradient-to-r from-red-500 to-pink-500 hover:from-red-600 hover:to-pink-600 text-white py-2 px-4 rounded-lg transition-all disabled:opacity-50" disabled>
+            Test Alarm
+          </button>
+          <button class="w-full bg-gray-800 hover:bg-gray-700 text-white py-2 px-4 rounded-lg transition-all">
+            Force Refresh
+          </button>
+          <button class="w-full bg-gray-800 hover:bg-gray-700 text-white py-2 px-4 rounded-lg transition-all">
+            Settings
+          </button>
+        </div>
+      </div>
+
+      <!-- System Info -->
+      <div class="glass-card p-6 rounded-xl backdrop-blur-lg border border-opacity-20 border-white">
+        <h2 class="text-xl font-bold mb-4 flex items-center">
+          <i data-feather="info" class="mr-2"></i> System Info
+        </h2>
+        <div class="space-y-2 text-sm">
+          <div class="flex justify-between">
+            <span class="text-gray-400">Version</span>
+            <span>v3.0.0</span>
+          </div>
+          <div class="flex justify-between">
+            <span class="text-gray-400">Last Sync</span>
+            <span>Just now</span>
+          </div>
+          <div class="flex justify-between">
+            <span class="text-gray-400">Uptime</span>
+            <span>00:12:45</span>
+          </div>
+        </div>
+      </div>
+    </div>
+  </main>
+
+  <!-- Alarm Modal -->
+  <div id="fullscreenAlarm" class="fixed inset-0 z-50 flex items-center justify-center hidden" aria-hidden="true">
+    <div class="absolute inset-0 bg-black bg-opacity-70 backdrop-blur-sm"></div>
+    <div class="relative bg-gradient-to-br from-red-900 to-red-800 rounded-2xl p-8 max-w-md w-full mx-4 shadow-2xl border border-red-500 border-opacity-50">
+      <div class="text-center">
+        <div class="flex justify-center mb-4">
+          <div class="p-3 bg-red-500 bg-opacity-20 rounded-full">
+            <i data-feather="alert-octagon" class="w-12 h-12 text-red-400"></i>
+          </div>
+        </div>
+        <h2 id="alarmTitle" class="text-2xl font-bold mb-2">CRITICAL ALERT</h2>
+        <div id="alarmIndicator" class="inline-block px-3 py-1 mb-4 text-sm font-semibold rounded-full bg-red-500 text-white">CRITICAL</div>
+        <p id="alarmDesc" class="text-gray-300 mb-6">Dangerous gas levels detected. Stop or acknowledge to silence the siren.</p>
+        <div class="flex space-x-3 justify-center">
+          <button id="alarmStop" class="px-6 py-2 bg-red-600 hover:bg-red-700 rounded-lg transition-all">Stop Alarm</button>
+          <button id="alarmAck" class="px-6 py-2 bg-gray-700 hover:bg-gray-600 rounded-lg transition-all">Acknowledge</button>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <custom-footer></custom-footer>
+
+  <script src="gauges.js"></script>
+  <script src="app.js"></script>
+  <script>
+    feather.replace();
+    document.addEventListener('DOMContentLoaded', () => {
+      // Initialize tooltips
+      const tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
+      tooltipTriggerList.map(function (tooltipTriggerEl) {
+        return new bootstrap.Tooltip(tooltipTriggerEl);
+      });
+    });
+  </script>
+<script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>
+</body>
+</html>

style.css

@@ -1,28 +1,177 @@
+@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600;700&family=Orbitron:wght@400;600&display=swap');
+
+:root {
+  --primary: #6366f1;
+  --primary-dark: #4f46e5;
+  --secondary: #10b981;
+  --danger: #ef4444;
+  --warning: #f59e0b;
+  --success: #10b981;
+  --info: #3b82f6;
+  --dark: #1e293b;
+  --light: #f8fafc;
+  --muted: #64748b;
+}
+
 body {
-	padding: 2rem;
-	font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
+  font-family: 'Poppins', sans-serif;
+  background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
+  min-height: 100vh;
+  color: white;
+}
+
+.glass-card {
+  background: rgba(15, 23, 42, 0.7);
+  backdrop-filter: blur(10px);
+  -webkit-backdrop-filter: blur(10px);
+  box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.1);
+  transition: all 0.3s ease;
+}
+
+.glass-card:hover {
+  box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.2);
+  transform: translateY(-2px);
+}
+
+.led {
+  width: 24px;
+  height: 24px;
+  border-radius: 50%;
+  position: relative;
+  transition: all 0.3s ease;
+  box-shadow: 0 0 10px rgba(255, 255, 255, 0);
+}
+
+.led-green {
+  background-color: #10b981;
+}
+
+.led-yellow {
+  background-color: #f59e0b;
+}
+
+.led-red {
+  background-color: #ef4444;
+}
+
+.led-active-green {
+  box-shadow: 0 0 15px #10b981;
+}
+
+.led-active-yellow {
+  box-shadow: 0 0 15px #f59e0b;
+}
+
+.led-active-red {
+  box-shadow: 0 0 15px #ef4444;
+}
+
+.led-pulse {
+  animation: pulse 1.5s infinite;
+}
+
+@keyframes pulse {
+  0% {
+    box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.7);
+  }
+  70% {
+    box-shadow: 0 0 0 10px rgba(239, 68, 68, 0);
+  }
+  100% {
+    box-shadow: 0 0 0 0 rgba(239, 68, 68, 0);
+  }
+}
+
+.gauge-wrapper {
+  position: relative;
+  text-align: center;
 }
 
-h1 {
-	font-size: 16px;
-	margin-top: 0;
+.gauge-readout {
+  margin-top: 1rem;
 }
 
-p {
-	color: rgb(107, 114, 128);
-	font-size: 15px;
-	margin-bottom: 10px;
-	margin-top: 5px;
+.gauge-value {
+  font-size: 1.5rem;
+  font-weight: bold;
+  font-family: 'Orbitron', sans-serif;
 }
 
-.card {
-	max-width: 620px;
-	margin: 0 auto;
-	padding: 16px;
-	border: 1px solid lightgray;
-	border-radius: 16px;
+.gauge-unit {
+  font-size: 0.9rem;
+  color: var(--muted);
 }
 
-.card p:last-child {
-	margin-bottom: 0;
+#eventsList {
+  max-height: 300px;
+  overflow-y: auto;
 }
+
+#eventsList li {
+  padding: 0.5rem 0;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
+}
+
+#eventsList li:first-child {
+  padding-top: 0;
+}
+
+#eventsList li:last-child {
+  border-bottom: none;
+}
+
+#fullscreenAlarm {
+  transition: all 0.3s ease;
+}
+
+/* Responsive adjustments */
+@media (max-width: 1024px) {
+  .glass-card {
+    padding: 1.5rem;
+  }
+}
+
+@media (max-width: 768px) {
+  .grid-cols-2 {
+    grid-template-columns: 1fr;
+  }
+  
+  .glass-card {
+    padding: 1rem;
+  }
+}
+
+/* Custom scrollbar */
+::-webkit-scrollbar {
+  width: 8px;
+}
+
+::-webkit-scrollbar-track {
+  background: rgba(255, 255, 255, 0.05);
+}
+
+::-webkit-scrollbar-thumb {
+  background: rgba(255, 255, 255, 0.2);
+  border-radius: 4px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: rgba(255, 255, 255, 0.3);
+}
+
+/* Animations */
+@keyframes fadeIn {
+  from { opacity: 0; transform: translateY(10px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+
+.animate-fade-in {
+  animation: fadeIn 0.5s ease forwards;
+}
+
+/* Glow effects */
+.glow-primary {
+  box-shadow: 0 0 15px rgba(99, 102, 241, 0.5);
+}
+
+.g