SOURCE_CODE

This repository contains the source code for the AI BATTERY OPTIMIZER Android app designed to extend smartphone battery life by learning from user behavior and applying adaptive optimizations in real-time.

ai-battery-optimizer/app.js

@@ -0,0 +1,899 @@
+// Futuristic Battery Optimizer App - JavaScript
+class BatteryOptimizerApp {
+    constructor() {
+        this.data = {
+            batteryStatus: {
+                level: 73,
+                isCharging: false,
+                timeRemaining: "8h 42m",
+                health: "Excellent",
+                cycleCount: 432,
+                temperature: 32.1
+            },
+            aiPredictions: {
+                nextApp: {
+                    name: "Instagram",
+                    confidence: 87,
+                    timeToLaunch: "~15 min",
+                    icon: "📸"
+                },
+                alternatives: [
+                    {"name": "YouTube", "confidence": 72, "icon": "📺"},
+                    {"name": "Gaming", "confidence": 68, "icon": "🎮"},
+                    {"name": "Messages", "confidence": 45, "icon": "💬"}
+                ]
+            },
+            performance: {
+                currentFPS: 60,
+                availableFPS: [30, 60, 90, 120],
+                mode: "Balanced",
+                cpuUsage: 45,
+                gpuUsage: 32,
+                temperature: 38.5
+            },
+            backgroundApps: [
+                {"name": "Spotify", "status": "optimized", "powerUsage": "Low", "icon": "🎵"},
+                {"name": "WhatsApp", "status": "normal", "powerUsage": "Medium", "icon": "💬"},
+                {"name": "Facebook", "status": "restricted", "powerUsage": "High", "icon": "📘"},
+                {"name": "Instagram", "status": "optimized", "powerUsage": "Medium", "icon": "📸"},
+                {"name": "YouTube", "status": "normal", "powerUsage": "High", "icon": "📺"}
+            ],
+            brightness: {
+                current: 65,
+                auto: true,
+                gazeDetected: true,
+                ambientLight: 240,
+                userPresent: true
+            },
+            stats: {
+                powerSavedToday: "2h 34m",
+                appsOptimized: 12,
+                efficiencyScore: 94,
+                predictionAccuracy: 91
+            },
+            batteryHistory: [
+                {"time": "00:00", "level": 100},
+                {"time": "06:00", "level": 92},
+                {"time": "12:00", "level": 85},
+                {"time": "18:00", "level": 73},
+                {"time": "24:00", "level": 65}
+            ],
+            appUsageData: [
+                {"app": "Social Media", "usage": 3.2, "prediction": 3.8},
+                {"app": "Gaming", "usage": 2.1, "prediction": 2.3},
+                {"app": "Video", "usage": 1.8, "prediction": 2.1},
+                {"app": "Productivity", "usage": 1.5, "prediction": 1.2},
+                {"app": "Music", "usage": 0.9, "prediction": 1.1}
+            ]
+        };
+        
+        this.charts = {};
+        this.updateIntervals = [];
+        
+        this.init();
+    }
+
+    init() {
+        this.setupTabNavigation();
+        this.setupCharts();
+        this.setupControls();
+        this.setupRealTimeUpdates();
+        this.setupPredictionPanelNavigation();
+        this.animateElements();
+    }
+
+    setupTabNavigation() {
+        const navButtons = document.querySelectorAll('.nav-btn');
+        const tabContents = document.querySelectorAll('.tab-content');
+
+        navButtons.forEach(button => {
+            button.addEventListener('click', () => {
+                const targetTab = button.getAttribute('data-tab');
+                
+                // Remove active classes
+                navButtons.forEach(btn => btn.classList.remove('active'));
+                tabContents.forEach(tab => tab.classList.remove('active'));
+                
+                // Add active classes
+                button.classList.add('active');
+                document.getElementById(targetTab).classList.add('active');
+                
+                // Trigger tab-specific animations
+                this.animateTabContent(targetTab);
+            });
+        });
+    }
+
+    setupPredictionPanelNavigation() {
+        const predictionWidget = document.querySelector('.prediction-widget');
+        if (predictionWidget) {
+            predictionWidget.addEventListener('click', () => {
+                // Navigate to predictions tab
+                const predictionsNavBtn = document.querySelector('[data-tab="predictions"]');
+                if (predictionsNavBtn) {
+                    predictionsNavBtn.click();
+                }
+            });
+
+            // Add visual feedback for clickability
+            predictionWidget.style.cursor = 'pointer';
+            predictionWidget.addEventListener('mouseenter', () => {
+                predictionWidget.style.transform = 'translateY(-2px)';
+            });
+            predictionWidget.addEventListener('mouseleave', () => {
+                predictionWidget.style.transform = 'translateY(0)';
+            });
+        }
+    }
+
+    setupCharts() {
+        this.createBatteryChart();
+        this.createBatteryHistoryChart();
+        this.createAppUsageChart();
+    }
+
+    createBatteryChart() {
+        const ctx = document.getElementById('batteryChart');
+        if (!ctx) return;
+
+        this.charts.battery = new Chart(ctx, {
+            type: 'doughnut',
+            data: {
+                datasets: [{
+                    data: [this.data.batteryStatus.level, 100 - this.data.batteryStatus.level],
+                    backgroundColor: [
+                        'rgba(0, 212, 255, 0.8)',
+                        'rgba(255, 255, 255, 0.1)'
+                    ],
+                    borderWidth: 0,
+                    cutout: '80%'
+                }]
+            },
+            options: {
+                responsive: true,
+                maintainAspectRatio: true,
+                plugins: {
+                    legend: {
+                        display: false
+                    }
+                },
+                animation: {
+                    animateRotate: true,
+                    duration: 2000
+                }
+            }
+        });
+    }
+
+    createBatteryHistoryChart() {
+        const ctx = document.getElementById('batteryHistoryChart');
+        if (!ctx) return;
+
+        const gradient = ctx.getContext('2d').createLinearGradient(0, 0, 0, 200);
+        gradient.addColorStop(0, 'rgba(0, 212, 255, 0.4)');
+        gradient.addColorStop(1, 'rgba(0, 212, 255, 0.1)');
+
+        this.charts.batteryHistory = new Chart(ctx, {
+            type: 'line',
+            data: {
+                labels: this.data.batteryHistory.map(item => item.time),
+                datasets: [{
+                    label: 'Battery Level',
+                    data: this.data.batteryHistory.map(item => item.level),
+                    borderColor: '#00d4ff',
+                    backgroundColor: gradient,
+                    borderWidth: 3,
+                    fill: true,
+                    tension: 0.4,
+                    pointBackgroundColor: '#00d4ff',
+                    pointBorderColor: '#ffffff',
+                    pointBorderWidth: 2,
+                    pointRadius: 6,
+                    pointHoverRadius: 8
+                }]
+            },
+            options: {
+                responsive: true,
+                maintainAspectRatio: false,
+                plugins: {
+                    legend: {
+                        display: false
+                    }
+                },
+                scales: {
+                    x: {
+                        grid: {
+                            color: 'rgba(255, 255, 255, 0.1)'
+                        },
+                        ticks: {
+                            color: 'rgba(255, 255, 255, 0.7)'
+                        }
+                    },
+                    y: {
+                        grid: {
+                            color: 'rgba(255, 255, 255, 0.1)'
+                        },
+                        ticks: {
+                            color: 'rgba(255, 255, 255, 0.7)'
+                        },
+                        min: 0,
+                        max: 100
+                    }
+                },
+                animation: {
+                    duration: 2000,
+                    easing: 'easeOutCubic'
+                }
+            }
+        });
+    }
+
+    createAppUsageChart() {
+        const ctx = document.getElementById('appUsageChart');
+        if (!ctx) return;
+
+        this.charts.appUsage = new Chart(ctx, {
+            type: 'bar',
+            data: {
+                labels: this.data.appUsageData.map(item => item.app),
+                datasets: [
+                    {
+                        label: 'Actual Usage',
+                        data: this.data.appUsageData.map(item => item.usage),
+                        backgroundColor: '#1FB8CD',
+                        borderRadius: 6
+                    },
+                    {
+                        label: 'AI Prediction',
+                        data: this.data.appUsageData.map(item => item.prediction),
+                        backgroundColor: '#FFC185',
+                        borderRadius: 6
+                    }
+                ]
+            },
+            options: {
+                responsive: true,
+                maintainAspectRatio: false,
+                plugins: {
+                    legend: {
+                        display: true,
+                        position: 'top',
+                        labels: {
+                            color: 'rgba(255, 255, 255, 0.8)',
+                            usePointStyle: true,
+                            pointStyle: 'rectRounded'
+                        }
+                    }
+                },
+                scales: {
+                    x: {
+                        grid: {
+                            color: 'rgba(255, 255, 255, 0.1)'
+                        },
+                        ticks: {
+                            color: 'rgba(255, 255, 255, 0.7)'
+                        }
+                    },
+                    y: {
+                        grid: {
+                            color: 'rgba(255, 255, 255, 0.1)'
+                        },
+                        ticks: {
+                            color: 'rgba(255, 255, 255, 0.7)'
+                        },
+                        beginAtZero: true
+                    }
+                },
+                animation: {
+                    duration: 1500,
+                    easing: 'easeOutCubic'
+                }
+            }
+        });
+    }
+
+    setupControls() {
+        this.setupFPSControl();
+        this.setupPerformanceModes();
+        this.setupBrightnessControl();
+        this.setupAppToggles();
+        this.setupOptimizeButton();
+        this.setupSwitches();
+    }
+
+    setupFPSControl() {
+        const fpsButtons = document.querySelectorAll('.fps-btn');
+        const fpsValue = document.querySelector('.fps-value');
+        const smartToggle = document.getElementById('smartFpsToggle');
+
+        fpsButtons.forEach(button => {
+            button.addEventListener('click', () => {
+                if (smartToggle && smartToggle.checked) return; // Don't allow manual control in smart mode
+
+                const fps = parseInt(button.getAttribute('data-fps'));
+                
+                // Update UI
+                fpsButtons.forEach(btn => btn.classList.remove('active'));
+                button.classList.add('active');
+                
+                // Animate FPS value change
+                this.animateNumberChange(fpsValue, this.data.performance.currentFPS, fps);
+                this.data.performance.currentFPS = fps;
+            });
+        });
+
+        if (smartToggle) {
+            smartToggle.addEventListener('change', (e) => {
+                const fpsOptions = document.querySelector('.fps-options');
+                if (e.target.checked) {
+                    fpsOptions.style.opacity = '0.5';
+                    fpsOptions.style.pointerEvents = 'none';
+                } else {
+                    fpsOptions.style.opacity = '1';
+                    fpsOptions.style.pointerEvents = 'auto';
+                }
+            });
+        }
+    }
+
+    setupPerformanceModes() {
+        const modeButtons = document.querySelectorAll('.mode-btn');
+
+        modeButtons.forEach(button => {
+            button.addEventListener('click', () => {
+                const mode = button.getAttribute('data-mode');
+                
+                // Update UI
+                modeButtons.forEach(btn => btn.classList.remove('active'));
+                button.classList.add('active');
+                
+                // Update data and trigger performance changes
+                this.data.performance.mode = mode;
+                this.updatePerformanceMetrics(mode);
+            });
+        });
+    }
+
+    setupBrightnessControl() {
+        const brightnessSlider = document.getElementById('brightnessSlider');
+        const brightnessValue = document.querySelector('.brightness-value');
+        const autoToggle = document.getElementById('autoBrightnessToggle');
+
+        if (brightnessSlider) {
+            brightnessSlider.addEventListener('input', (e) => {
+                const value = parseInt(e.target.value);
+                brightnessValue.textContent = value + '%';
+                this.data.brightness.current = value;
+                
+                // Disable auto brightness when manually adjusted
+                if (autoToggle && autoToggle.checked) {
+                    autoToggle.checked = false;
+                    this.data.brightness.auto = false;
+                }
+            });
+        }
+
+        if (autoToggle) {
+            autoToggle.addEventListener('change', (e) => {
+                this.data.brightness.auto = e.target.checked;
+                if (e.target.checked) {
+                    // Simulate auto brightness adjustment
+                    this.simulateAutoBrightness();
+                }
+            });
+        }
+    }
+
+    setupAppToggles() {
+        const appToggles = document.querySelectorAll('.app-toggle');
+
+        appToggles.forEach((toggle, index) => {
+            toggle.addEventListener('click', () => {
+                const app = this.data.backgroundApps[index];
+                
+                // Cycle through statuses
+                const statuses = ['normal', 'optimized', 'restricted'];
+                const currentIndex = statuses.indexOf(app.status);
+                const nextIndex = (currentIndex + 1) % statuses.length;
+                app.status = statuses[nextIndex];
+
+                // Update UI
+                toggle.className = `app-toggle ${app.status}`;
+                const statusElement = toggle.previousElementSibling;
+                statusElement.className = `app-status ${app.status}`;
+                statusElement.textContent = app.status.charAt(0).toUpperCase() + app.status.slice(1);
+                
+                // Add animation
+                toggle.style.transform = 'scale(0.9)';
+                setTimeout(() => {
+                    toggle.style.transform = 'scale(1)';
+                }, 150);
+            });
+        });
+    }
+
+    setupOptimizeButton() {
+        const optimizeBtn = document.getElementById('optimizeNowBtn');
+        if (optimizeBtn) {
+            optimizeBtn.addEventListener('click', () => {
+                this.runOptimization();
+            });
+        }
+    }
+
+    setupSwitches() {
+        const switches = document.querySelectorAll('.switch input[type="checkbox"]');
+        
+        switches.forEach(switchInput => {
+            switchInput.addEventListener('change', (e) => {
+                // Add animation to slider
+                const slider = e.target.nextElementSibling;
+                slider.style.transform = 'scale(0.95)';
+                setTimeout(() => {
+                    slider.style.transform = 'scale(1)';
+                }, 100);
+            });
+        });
+    }
+
+    setupRealTimeUpdates() {
+        // Update time every second
+        const updateTime = () => {
+            const now = new Date();
+            const timeString = now.toLocaleTimeString('en-US', { 
+                hour12: false, 
+                hour: '2-digit', 
+                minute: '2-digit' 
+            });
+            const timeElement = document.querySelector('.time');
+            if (timeElement) {
+                timeElement.textContent = timeString;
+            }
+        };
+        
+        updateTime();
+        this.updateIntervals.push(setInterval(updateTime, 1000));
+
+        // Simulate battery drain
+        this.updateIntervals.push(setInterval(() => {
+            if (!this.data.batteryStatus.isCharging && this.data.batteryStatus.level > 0) {
+                this.data.batteryStatus.level = Math.max(0, this.data.batteryStatus.level - 0.1);
+                this.updateBatteryDisplay();
+            }
+        }, 30000)); // Update every 30 seconds
+
+        // Simulate AI predictions updates
+        this.updateIntervals.push(setInterval(() => {
+            this.updateAIPredictions();
+        }, 45000)); // Update every 45 seconds
+
+        // Simulate gaze detection
+        this.updateIntervals.push(setInterval(() => {
+            this.simulateGazeDetection();
+        }, 3000)); // Update every 3 seconds
+
+        // Update performance metrics
+        this.updateIntervals.push(setInterval(() => {
+            this.updateSystemMetrics();
+        }, 5000)); // Update every 5 seconds
+    }
+
+    updateBatteryDisplay() {
+        const batteryPercentage = document.querySelector('.battery-percentage');
+        const batteryLevel = document.querySelector('.battery-level');
+        
+        const level = Math.round(this.data.batteryStatus.level);
+        
+        if (batteryPercentage) {
+            batteryPercentage.textContent = level + '%';
+        }
+        
+        if (batteryLevel) {
+            batteryLevel.textContent = level + '%';
+        }
+
+        // Update battery chart
+        if (this.charts.battery) {
+            this.charts.battery.data.datasets[0].data = [level, 100 - level];
+            this.charts.battery.update('none');
+        }
+    }
+
+    updateAIPredictions() {
+        const predictions = [
+            { name: "Instagram", icon: "📸", confidence: 87 },
+            { name: "YouTube", icon: "📺", confidence: 82 },
+            { name: "Gaming", icon: "🎮", confidence: 75 },
+            { name: "Messages", icon: "💬", confidence: 68 },
+            { name: "Music", icon: "🎵", confidence: 62 }
+        ];
+
+        const randomPrediction = predictions[Math.floor(Math.random() * predictions.length)];
+        this.data.aiPredictions.nextApp = {
+            ...randomPrediction,
+            timeToLaunch: `~${Math.floor(Math.random() * 30) + 5} min`
+        };
+
+        // Update UI
+        const appIcon = document.querySelector('.next-app-prediction .app-icon');
+        const appName = document.querySelector('.prediction-info h4');
+        const confidenceFill = document.querySelector('.confidence-fill');
+        const confidenceText = document.querySelector('.confidence-text');
+        const launchTime = document.querySelector('.launch-time');
+
+        if (appIcon) appIcon.textContent = randomPrediction.icon;
+        if (appName) appName.textContent = `Next App: ${randomPrediction.name}`;
+        if (confidenceFill) {
+            confidenceFill.style.width = randomPrediction.confidence + '%';
+        }
+        if (confidenceText) confidenceText.textContent = randomPrediction.confidence + '% confidence';
+        if (launchTime) launchTime.textContent = `Expected in ${this.data.aiPredictions.nextApp.timeToLaunch}`;
+    }
+
+    simulateGazeDetection() {
+        const userPresent = Math.random() > 0.3; // 70% chance user is present
+        const gazeDetected = userPresent && Math.random() > 0.2; // 80% chance gaze is detected when present
+        
+        this.data.brightness.userPresent = userPresent;
+        this.data.brightness.gazeDetected = gazeDetected;
+
+        // Update UI
+        const faceIndicator = document.querySelector('.face-indicator');
+        const statusIndicators = document.querySelectorAll('.gaze-status .status-indicator');
+
+        if (faceIndicator) {
+            if (gazeDetected) {
+                faceIndicator.classList.add('active');
+            } else {
+                faceIndicator.classList.remove('active');
+            }
+        }
+
+        // Update status indicators
+        if (statusIndicators.length >= 2) {
+            statusIndicators[0].classList.toggle('active', userPresent);
+            statusIndicators[1].classList.toggle('active', gazeDetected);
+        }
+
+        // Auto-adjust brightness based on gaze
+        if (this.data.brightness.auto) {
+            const targetBrightness = gazeDetected ? 
+                Math.max(50, this.data.brightness.current) : 
+                Math.max(20, this.data.brightness.current * 0.6);
+            
+            this.animateBrightnessChange(targetBrightness);
+        }
+    }
+
+    updateSystemMetrics() {
+        // Simulate realistic system metrics
+        const baseTemp = 35 + Math.random() * 10;
+        const baseCPU = 20 + Math.random() * 60;
+        const baseGPU = 15 + Math.random() * 50;
+
+        this.data.performance.temperature = Math.round(baseTemp * 10) / 10;
+        this.data.performance.cpuUsage = Math.round(baseCPU);
+        this.data.performance.gpuUsage = Math.round(baseGPU);
+
+        // Update UI
+        const metricFills = document.querySelectorAll('.metric-fill');
+        const metricValues = document.querySelectorAll('.metric-value');
+
+        if (metricFills.length >= 3 && metricValues.length >= 3) {
+            // CPU
+            metricFills[0].style.width = this.data.performance.cpuUsage + '%';
+            metricValues[0].textContent = this.data.performance.cpuUsage + '%';
+            
+            // GPU
+            metricFills[1].style.width = this.data.performance.gpuUsage + '%';
+            metricValues[1].textContent = this.data.performance.gpuUsage + '%';
+            
+            // Temperature
+            const tempPercentage = Math.min(100, (this.data.performance.temperature - 30) * 2);
+            metricFills[2].style.width = tempPercentage + '%';
+            metricValues[2].textContent = this.data.performance.temperature + '°C';
+        }
+    }
+
+    updatePerformanceMetrics(mode) {
+        let cpuMultiplier = 1;
+        let gpuMultiplier = 1;
+        let fpsTarget = 60;
+
+        switch (mode) {
+            case 'ultra-low':
+                cpuMultiplier = 0.6;
+                gpuMultiplier = 0.5;
+                fpsTarget = 30;
+                break;
+            case 'balanced':
+                cpuMultiplier = 1;
+                gpuMultiplier = 1;
+                fpsTarget = 60;
+                break;
+            case 'performance':
+                cpuMultiplier = 1.3;
+                gpuMultiplier = 1.4;
+                fpsTarget = 90;
+                break;
+        }
+
+        // Auto-adjust FPS if smart mode is enabled
+        const smartToggle = document.getElementById('smartFpsToggle');
+        if (smartToggle && smartToggle.checked) {
+            const fpsValue = document.querySelector('.fps-value');
+            const fpsButtons = document.querySelectorAll('.fps-btn');
+            
+            this.animateNumberChange(fpsValue, this.data.performance.currentFPS, fpsTarget);
+            this.data.performance.currentFPS = fpsTarget;
+            
+            // Update active FPS button
+            fpsButtons.forEach(btn => btn.classList.remove('active'));
+            const targetBtn = document.querySelector(`[data-fps="${fpsTarget}"]`);
+            if (targetBtn) targetBtn.classList.add('active');
+        }
+
+        // Simulate performance changes
+        setTimeout(() => {
+            this.data.performance.cpuUsage = Math.round(this.data.performance.cpuUsage * cpuMultiplier);
+            this.data.performance.gpuUsage = Math.round(this.data.performance.gpuUsage * gpuMultiplier);
+            this.updateSystemMetrics();
+        }, 500);
+    }
+
+    simulateAutoBrightness() {
+        const ambientLight = 180 + Math.random() * 120; // 180-300 lux
+        this.data.brightness.ambientLight = Math.round(ambientLight);
+        
+        // Calculate target brightness based on ambient light
+        const targetBrightness = Math.round(Math.min(100, Math.max(20, ambientLight / 4)));
+        
+        this.animateBrightnessChange(targetBrightness);
+
+        // Update ambient light display
+        const ambientValue = document.querySelector('.ambient-value');
+        if (ambientValue) {
+            ambientValue.textContent = this.data.brightness.ambientLight + ' lux';
+        }
+    }
+
+    runOptimization() {
+        const optimizeBtn = document.getElementById('optimizeNowBtn');
+        if (!optimizeBtn) return;
+
+        // Show loading state
+        optimizeBtn.innerHTML = '<span class="btn-icon">⏳</span>Optimizing...';
+        optimizeBtn.disabled = true;
+
+        // Simulate optimization process
+        setTimeout(() => {
+            // Update app statuses
+            this.data.backgroundApps.forEach((app, index) => {
+                if (app.powerUsage === 'High' && Math.random() > 0.5) {
+                    app.status = 'optimized';
+                    const appToggle = document.querySelectorAll('.app-toggle')[index];
+                    const statusElement = document.querySelectorAll('.app-status')[index];
+                    if (appToggle && statusElement) {
+                        appToggle.className = 'app-toggle optimized';
+                        statusElement.className = 'app-status optimized';
+                        statusElement.textContent = 'Optimized';
+                    }
+                }
+            });
+
+            // Update stats
+            this.data.stats.appsOptimized += 3;
+            this.data.stats.efficiencyScore = Math.min(100, this.data.stats.efficiencyScore + 2);
+
+            // Update UI
+            const appsOptimizedElement = document.querySelector('.stats-grid .stat-card:nth-child(2) .stat-value');
+            const efficiencyElement = document.querySelector('.stats-grid .stat-card:nth-child(3) .stat-value');
+            
+            if (appsOptimizedElement) {
+                this.animateNumberChange(appsOptimizedElement, 
+                    parseInt(appsOptimizedElement.textContent), 
+                    this.data.stats.appsOptimized);
+            }
+            
+            if (efficiencyElement) {
+                this.animateNumberChange(efficiencyElement, 
+                    parseInt(efficiencyElement.textContent.replace('%', '')), 
+                    this.data.stats.efficiencyScore, '%');
+            }
+
+            // Reset button
+            optimizeBtn.innerHTML = '<span class="btn-icon">✅</span>Optimization Complete!';
+            
+            setTimeout(() => {
+                optimizeBtn.innerHTML = '<span class="btn-icon">🚀</span>Optimize Now';
+                optimizeBtn.disabled = false;
+            }, 2000);
+        }, 3000);
+    }
+
+    animateTabContent(tabId) {
+        const tab = document.getElementById(tabId);
+        if (!tab) return;
+
+        const cards = tab.querySelectorAll('.card');
+        cards.forEach((card, index) => {
+            card.style.opacity = '0';
+            card.style.transform = 'translateY(20px)';
+            
+            setTimeout(() => {
+                card.style.transition = 'all 0.6s ease-out';
+                card.style.opacity = '1';
+                card.style.transform = 'translateY(0)';
+            }, index * 100);
+        });
+    }
+
+    animateElements() {
+        // Initial page load animations
+        const cards = document.querySelectorAll('.card');
+        cards.forEach((card, index) => {
+            card.style.opacity = '0';
+            card.style.transform = 'translateY(30px)';
+            
+            setTimeout(() => {
+                card.classList.add('loading');
+                card.style.transition = 'all 0.8s cubic-bezier(0.16, 1, 0.3, 1)';
+                card.style.opacity = '1';
+                card.style.transform = 'translateY(0)';
+            }, index * 150);
+        });
+
+        // Animate confidence bars
+        setTimeout(() => {
+            const confidenceFills = document.querySelectorAll('.confidence-fill');
+            confidenceFills.forEach(fill => {
+                const width = fill.style.width;
+                fill.style.width = '0%';
+                setTimeout(() => {
+                    fill.style.width = width;
+                }, 500);
+            });
+        }, 1000);
+    }
+
+    animateNumberChange(element, from, to, suffix = '') {
+        const duration = 1000;
+        const steps = 60;
+        const increment = (to - from) / steps;
+        let current = from;
+        let step = 0;
+
+        const animate = () => {
+            if (step < steps) {
+                current += increment;
+                element.textContent = Math.round(current) + suffix;
+                step++;
+                requestAnimationFrame(animate);
+            } else {
+                element.textContent = to + suffix;
+            }
+        };
+
+        animate();
+    }
+
+    animateBrightnessChange(targetBrightness) {
+        const brightnessValue = document.querySelector('.brightness-value');
+        const brightnessSlider = document.getElementById('brightnessSlider');
+        
+        if (brightnessValue && brightnessSlider) {
+            const currentBrightness = this.data.brightness.current;
+            this.animateNumberChange(brightnessValue, currentBrightness, targetBrightness, '%');
+            
+            // Animate slider
+            const steps = 30;
+            const increment = (targetBrightness - currentBrightness) / steps;
+            let current = currentBrightness;
+            let step = 0;
+
+            const animateSlider = () => {
+                if (step < steps) {
+                    current += increment;
+                    brightnessSlider.value = Math.round(current);
+                    step++;
+                    requestAnimationFrame(animateSlider);
+                } else {
+                    brightnessSlider.value = targetBrightness;
+                    this.data.brightness.current = targetBrightness;
+                }
+            };
+
+            animateSlider();
+        }
+    }
+
+    destroy() {
+        // Clean up intervals
+        this.updateIntervals.forEach(interval => clearInterval(interval));
+        
+        // Destroy charts
+        Object.values(this.charts).forEach(chart => {
+            if (chart && typeof chart.destroy === 'function') {
+                chart.destroy();
+            }
+        });
+    }
+}
+
+// Initialize the app when the DOM is loaded
+document.addEventListener('DOMContentLoaded', () => {
+    const app = new BatteryOptimizerApp();
+    
+    // Make app globally accessible for debugging
+    window.batteryApp = app;
+    
+    // Handle page unload
+    window.addEventListener('beforeunload', () => {
+        app.destroy();
+    });
+});
+
+// Add some utility functions for enhanced UX
+function addHapticFeedback() {
+    if ('vibrate' in navigator) {
+        navigator.vibrate(50);
+    }
+}
+
+// Add haptic feedback to buttons
+document.addEventListener('click', (e) => {
+    if (e.target.matches('button, .nav-btn, .app-toggle, .fps-btn, .mode-btn')) {
+        addHapticFeedback();
+    }
+});
+
+// Add swipe gesture support for tab navigation
+let startX = 0;
+let startY = 0;
+let isSwipingHorizontally = false;
+
+document.addEventListener('touchstart', (e) => {
+    startX = e.touches[0].clientX;
+    startY = e.touches[0].clientY;
+    isSwipingHorizontally = false;
+});
+
+document.addEventListener('touchmove', (e) => {
+    if (!startX || !startY) return;
+    
+    const currentX = e.touches[0].clientX;
+    const currentY = e.touches[0].clientY;
+    
+    const diffX = Math.abs(currentX - startX);
+    const diffY = Math.abs(currentY - startY);
+    
+    if (diffX > diffY && diffX > 50) {
+        isSwipingHorizontally = true;
+        e.preventDefault(); // Prevent scrolling
+    }
+});
+
+document.addEventListener('touchend', (e) => {
+    if (!startX || !isSwipingHorizontally) return;
+    
+    const endX = e.changedTouches[0].clientX;
+    const diff = startX - endX;
+    
+    const activeTab = document.querySelector('.nav-btn.active');
+    const tabs = Array.from(document.querySelectorAll('.nav-btn'));
+    const currentIndex = tabs.indexOf(activeTab);
+    
+    if (Math.abs(diff) > 100) { // Minimum swipe distance
+        if (diff > 0 && currentIndex < tabs.length - 1) {
+            // Swipe left - next tab
+            tabs[currentIndex + 1].click();
+        } else if (diff < 0 && currentIndex > 0) {
+            // Swipe right - previous tab
+            tabs[currentIndex - 1].click();
+        }
+    }
+    
+    startX = 0;
+    startY = 0;
+    isSwipingHorizontally = false;
+});

ai-battery-optimizer/index.html

@@ -0,0 +1,452 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>AI Battery Optimizer</title>
+    <link rel="stylesheet" href="style.css">
+    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
+</head>
+<body>
+    <div class="app-container">
+        <!-- Header -->
+        <header class="app-header">
+            <div class="status-bar">
+                <span class="time">20:00</span>
+                <div class="status-icons">
+                    <span class="signal-icon">📶</span>
+                    <span class="wifi-icon">📶</span>
+                    <span class="battery-icon">🔋</span>
+                    <span class="battery-percentage">73%</span>
+                </div>
+            </div>
+            <div class="header-content">
+                <h1 class="app-title">AI Battery Optimizer</h1>
+                <div class="optimization-status">
+                    <div class="status-indicator active"></div>
+                    <span>Smart Mode Active</span>
+                </div>
+            </div>
+        </header>
+
+        <!-- Main Content -->
+        <main class="main-content">
+            <!-- Dashboard Tab -->
+            <section class="tab-content active" id="dashboard">
+                <!-- Battery Status -->
+                <div class="battery-widget card">
+                    <div class="battery-circle" style="position: relative;">
+                        <canvas id="batteryChart" width="120" height="120"></canvas>
+                        <div class="battery-info">
+                            <span class="battery-level">73%</span>
+                            <span class="time-remaining">8h 42m</span>
+                        </div>
+                    </div>
+                    <div class="battery-details">
+                        <div class="detail-item">
+                            <span class="label">Health</span>
+                            <span class="value excellent">Excellent</span>
+                        </div>
+                        <div class="detail-item">
+                            <span class="label">Temperature</span>
+                            <span class="value">32.1°C</span>
+                        </div>
+                        <div class="detail-item">
+                            <span class="label">Cycles</span>
+                            <span class="value">432</span>
+                        </div>
+                    </div>
+                </div>
+
+                <!-- AI Prediction Widget -->
+                <div class="prediction-widget card">
+                    <div class="widget-header">
+                        <h3>🧠 Smart Prediction</h3>
+                        <div class="accuracy-badge">91% accurate</div>
+                    </div>
+                    <div class="next-app-prediction">
+                        <div class="app-icon">📸</div>
+                        <div class="prediction-info">
+                            <h4>Next App: Instagram</h4>
+                            <div class="confidence-bar">
+                                <div class="confidence-fill" style="width: 87%"></div>
+                                <span class="confidence-text">87% confidence</span>
+                            </div>
+                            <p class="launch-time">Expected in ~15 min</p>
+                        </div>
+                    </div>
+                    <div class="alternative-predictions">
+                        <div class="alt-app">
+                            <span class="app-icon">📺</span>
+                            <span class="app-name">YouTube</span>
+                            <span class="confidence">72%</span>
+                        </div>
+                        <div class="alt-app">
+                            <span class="app-icon">🎮</span>
+                            <span class="app-name">Gaming</span>
+                            <span class="confidence">68%</span>
+                        </div>
+                        <div class="alt-app">
+                            <span class="app-icon">💬</span>
+                            <span class="app-name">Messages</span>
+                            <span class="confidence">45%</span>
+                        </div>
+                    </div>
+                </div>
+
+                <!-- Quick Stats -->
+                <div class="stats-grid">
+                    <div class="stat-card card">
+                        <div class="stat-icon">⚡</div>
+                        <div class="stat-value">2h 34m</div>
+                        <div class="stat-label">Power Saved</div>
+                    </div>
+                    <div class="stat-card card">
+                        <div class="stat-icon">📱</div>
+                        <div class="stat-value">12</div>
+                        <div class="stat-label">Apps Optimized</div>
+                    </div>
+                    <div class="stat-card card">
+                        <div class="stat-icon">📊</div>
+                        <div class="stat-value">94%</div>
+                        <div class="stat-label">Efficiency Score</div>
+                    </div>
+                </div>
+
+                <!-- Battery Usage Chart -->
+                <div class="chart-widget card">
+                    <h3>Battery Usage Today</h3>
+                    <div class="chart-container" style="position: relative; height: 200px;">
+                        <canvas id="batteryHistoryChart"></canvas>
+                    </div>
+                </div>
+
+                <!-- Action Buttons -->
+                <div class="action-buttons">
+                    <button class="btn btn--primary btn--lg btn--full-width" id="optimizeNowBtn">
+                        <span class="btn-icon">🚀</span>
+                        Optimize Now
+                    </button>
+                </div>
+            </section>
+
+            <!-- Smart Prediction Tab -->
+            <section class="tab-content" id="predictions">
+                <div class="prediction-header card">
+                    <h2>🧠 Smart Predictions</h2>
+                    <p>AI learns your patterns to predict app usage</p>
+                </div>
+
+                <div class="usage-patterns card">
+                    <h3>Today's Usage Patterns</h3>
+                    <div class="patterns-list">
+                        <div class="pattern-item">
+                            <span class="pattern-time">6:00 AM</span>
+                            <div class="pattern-apps">
+                                <span class="app-tag">Clock</span>
+                                <span class="app-tag">Weather</span>
+                            </div>
+                            <span class="pattern-confidence">95%</span>
+                        </div>
+                        <div class="pattern-item">
+                            <span class="pattern-time">8:00 AM</span>
+                            <div class="pattern-apps">
+                                <span class="app-tag">Email</span>
+                                <span class="app-tag">News</span>
+                            </div>
+                            <span class="pattern-confidence">88%</span>
+                        </div>
+                        <div class="pattern-item">
+                            <span class="pattern-time">12:00 PM</span>
+                            <div class="pattern-apps">
+                                <span class="app-tag">Social</span>
+                                <span class="app-tag">Food</span>
+                            </div>
+                            <span class="pattern-confidence">92%</span>
+                        </div>
+                        <div class="pattern-item">
+                            <span class="pattern-time">6:00 PM</span>
+                            <div class="pattern-apps">
+                                <span class="app-tag">Entertainment</span>
+                                <span class="app-tag">Games</span>
+                            </div>
+                            <span class="pattern-confidence">85%</span>
+                        </div>
+                        <div class="pattern-item">
+                            <span class="pattern-time">10:00 PM</span>
+                            <div class="pattern-apps">
+                                <span class="app-tag">Reading</span>
+                                <span class="app-tag">Music</span>
+                            </div>
+                            <span class="pattern-confidence">78%</span>
+                        </div>
+                    </div>
+                </div>
+
+                <div class="app-usage-chart card">
+                    <h3>App Usage vs AI Predictions</h3>
+                    <div class="chart-container" style="position: relative; height: 250px;">
+                        <canvas id="appUsageChart"></canvas>
+                    </div>
+                </div>
+
+                <div class="learned-behaviors card">
+                    <h3>💡 Learned Behaviors</h3>
+                    <div class="behavior-list">
+                        <div class="behavior-item">
+                            <span class="behavior-icon">🎮</span>
+                            <span class="behavior-text">Usually games at 7PM</span>
+                        </div>
+                        <div class="behavior-item">
+                            <span class="behavior-icon">🍔</span>
+                            <span class="behavior-text">Social media during lunch</span>
+                        </div>
+                        <div class="behavior-item">
+                            <span class="behavior-icon">📧</span>
+                            <span class="behavior-text">Email check every 2 hours</span>
+                        </div>
+                        <div class="behavior-item">
+                            <span class="behavior-icon">��</span>
+                            <span class="behavior-text">Music before sleep</span>
+                        </div>
+                    </div>
+                </div>
+            </section>
+
+            <!-- Performance Tab -->
+            <section class="tab-content" id="performance">
+                <div class="performance-header card">
+                    <h2>⚡ Performance Control</h2>
+                    <p>Smart FPS and background app management</p>
+                </div>
+
+                <div class="fps-control card">
+                    <div class="control-header">
+                        <h3>🖥️ FPS Control</h3>
+                        <div class="mode-toggle">
+                            <label class="switch">
+                                <input type="checkbox" id="smartFpsToggle" checked>
+                                <span class="slider"></span>
+                            </label>
+                            <span>Smart Mode</span>
+                        </div>
+                    </div>
+                    <div class="fps-display">
+                        <div class="current-fps">
+                            <span class="fps-value">60</span>
+                            <span class="fps-label">FPS</span>
+                        </div>
+                        <div class="fps-options">
+                            <button class="fps-btn" data-fps="30">30</button>
+                            <button class="fps-btn active" data-fps="60">60</button>
+                            <button class="fps-btn" data-fps="90">90</button>
+                            <button class="fps-btn" data-fps="120">120</button>
+                        </div>
+                    </div>
+                </div>
+
+                <div class="performance-modes card">
+                    <h3>🔋 Performance Modes</h3>
+                    <div class="mode-selector">
+                        <button class="mode-btn" data-mode="ultra-low">Ultra-Low Power</button>
+                        <button class="mode-btn active" data-mode="balanced">Balanced</button>
+                        <button class="mode-btn" data-mode="performance">Performance</button>
+                    </div>
+                </div>
+
+                <div class="system-metrics card">
+                    <h3>📊 System Metrics</h3>
+                    <div class="metrics-grid">
+                        <div class="metric-item">
+                            <span class="metric-label">CPU Usage</span>
+                            <div class="metric-bar">
+                                <div class="metric-fill cpu" style="width: 45%"></div>
+                            </div>
+                            <span class="metric-value">45%</span>
+                        </div>
+                        <div class="metric-item">
+                            <span class="metric-label">GPU Usage</span>
+                            <div class="metric-bar">
+                                <div class="metric-fill gpu" style="width: 32%"></div>
+                            </div>
+                            <span class="metric-value">32%</span>
+                        </div>
+                        <div class="metric-item">
+                            <span class="metric-label">Temperature</span>
+                            <div class="metric-bar">
+                                <div class="metric-fill temp" style="width: 38%"></div>
+                            </div>
+                            <span class="metric-value">38.5°C</span>
+                        </div>
+                    </div>
+                </div>
+
+                <div class="background-apps card">
+                    <h3>📱 Background Apps</h3>
+                    <div class="apps-list">
+                        <div class="app-item">
+                            <span class="app-icon">🎵</span>
+                            <div class="app-info">
+                                <span class="app-name">Spotify</span>
+                                <span class="power-usage low">Low Power</span>
+                            </div>
+                            <div class="app-status optimized">Optimized</div>
+                            <button class="app-toggle optimized"></button>
+                        </div>
+                        <div class="app-item">
+                            <span class="app-icon">💬</span>
+                            <div class="app-info">
+                                <span class="app-name">WhatsApp</span>
+                                <span class="power-usage medium">Medium Power</span>
+                            </div>
+                            <div class="app-status normal">Normal</div>
+                            <button class="app-toggle normal"></button>
+                        </div>
+                        <div class="app-item">
+                            <span class="app-icon">📘</span>
+                            <div class="app-info">
+                                <span class="app-name">Facebook</span>
+                                <span class="power-usage high">High Power</span>
+                            </div>
+                            <div class="app-status restricted">Restricted</div>
+                            <button class="app-toggle restricted"></button>
+                        </div>
+                        <div class="app-item">
+                            <span class="app-icon">📸</span>
+                            <div class="app-info">
+                                <span class="app-name">Instagram</span>
+                                <span class="power-usage medium">Medium Power</span>
+                            </div>
+                            <div class="app-status optimized">Optimized</div>
+                            <button class="app-toggle optimized"></button>
+                        </div>
+                        <div class="app-item">
+                            <span class="app-icon">📺</span>
+                            <div class="app-info">
+                                <span class="app-name">YouTube</span>
+                                <span class="power-usage high">High Power</span>
+                            </div>
+                            <div class="app-status normal">Normal</div>
+                            <button class="app-toggle normal"></button>
+                        </div>
+                    </div>
+                </div>
+            </section>
+
+            <!-- Brightness Tab -->
+            <section class="tab-content" id="brightness">
+                <div class="brightness-header card">
+                    <h2>👁️ Smart Brightness</h2>
+                    <p>AI-powered gaze detection and adaptive brightness</p>
+                </div>
+
+                <div class="gaze-detection card">
+                    <h3>👀 Gaze Detection</h3>
+                    <div class="gaze-status">
+                        <div class="camera-preview">
+                            <div class="face-indicator active">
+                                <div class="eye left"></div>
+                                <div class="eye right"></div>
+                                <div class="mouth"></div>
+                            </div>
+                        </div>
+                        <div class="gaze-info">
+                            <div class="status-item">
+                                <span class="status-label">User Present</span>
+                                <div class="status-indicator active"></div>
+                            </div>
+                            <div class="status-item">
+                                <span class="status-label">Gaze Detected</span>
+                                <div class="status-indicator active"></div>
+                            </div>
+                            <div class="status-item">
+                                <span class="status-label">Auto Brightness</span>
+                                <label class="switch">
+                                    <input type="checkbox" id="autoBrightnessToggle" checked>
+                                    <span class="slider"></span>
+                                </label>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+                <div class="brightness-control card">
+                    <h3>💡 Brightness Control</h3>
+                    <div class="brightness-display">
+                        <div class="brightness-value">65%</div>
+                        <div class="brightness-slider-container">
+                            <input type="range" id="brightnessSlider" min="0" max="100" value="65" class="brightness-slider">
+                            <div class="brightness-labels">
+                                <span>🌑</span>
+                                <span>🌞</span>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="ambient-light">
+                        <span class="ambient-label">Ambient Light</span>
+                        <span class="ambient-value">240 lux</span>
+                    </div>
+                </div>
+
+                <div class="brightness-features card">
+                    <h3>⚙️ Smart Features</h3>
+                    <div class="feature-list">
+                        <div class="feature-item">
+                            <div class="feature-info">
+                                <span class="feature-name">Eye Tracking Mode</span>
+                                <span class="feature-desc">Adjust based on eye movement</span>
+                            </div>
+                            <label class="switch">
+                                <input type="checkbox" checked>
+                                <span class="slider"></span>
+                            </label>
+                        </div>
+                        <div class="feature-item">
+                            <div class="feature-info">
+                                <span class="feature-name">Blue Light Filter</span>
+                                <span class="feature-desc">Reduce strain during night</span>
+                            </div>
+                            <label class="switch">
+                                <input type="checkbox" checked>
+                                <span class="slider"></span>
+                            </label>
+                        </div>
+                        <div class="feature-item">
+                            <div class="feature-info">
+                                <span class="feature-name">Adaptive Dimming</span>
+                                <span class="feature-desc">Dim when user looks away</span>
+                            </div>
+                            <label class="switch">
+                                <input type="checkbox" checked>
+                                <span class="slider"></span>
+                            </label>
+                        </div>
+                    </div>
+                </div>
+            </section>
+        </main>
+
+        <!-- Bottom Navigation -->
+        <nav class="bottom-nav">
+            <button class="nav-btn active" data-tab="dashboard">
+                <span class="nav-icon">🏠</span>
+                <span class="nav-label">Dashboard</span>
+            </button>
+            <button class="nav-btn" data-tab="predictions">
+                <span class="nav-icon">🧠</span>
+                <span class="nav-label">Predictions</span>
+            </button>
+            <button class="nav-btn" data-tab="performance">
+                <span class="nav-icon">⚡</span>
+                <span class="nav-label">Performance</span>
+            </button>
+            <button class="nav-btn" data-tab="brightness">
+                <span class="nav-icon">💡</span>
+                <span class="nav-label">Brightness</span>
+            </button>
+        </nav>
+    </div>
+
+    <script src="app.js"></script>
+</body>
+</html>

ai-battery-optimizer/style.css

@@ -0,0 +1,1849 @@
+:root {
+  /* Primitive Color Tokens */
+  --color-white: rgba(255, 255, 255, 1);
+  --color-black: rgba(0, 0, 0, 1);
+  --color-cream-50: rgba(252, 252, 249, 1);
+  --color-cream-100: rgba(255, 255, 253, 1);
+  --color-gray-200: rgba(245, 245, 245, 1);
+  --color-gray-300: rgba(167, 169, 169, 1);
+  --color-gray-400: rgba(119, 124, 124, 1);
+  --color-slate-500: rgba(98, 108, 113, 1);
+  --color-brown-600: rgba(94, 82, 64, 1);
+  --color-charcoal-700: rgba(31, 33, 33, 1);
+  --color-charcoal-800: rgba(38, 40, 40, 1);
+  --color-slate-900: rgba(19, 52, 59, 1);
+  --color-teal-300: rgba(50, 184, 198, 1);
+  --color-teal-400: rgba(45, 166, 178, 1);
+  --color-teal-500: rgba(33, 128, 141, 1);
+  --color-teal-600: rgba(29, 116, 128, 1);
+  --color-teal-700: rgba(26, 104, 115, 1);
+  --color-teal-800: rgba(41, 150, 161, 1);
+  --color-red-400: rgba(255, 84, 89, 1);
+  --color-red-500: rgba(192, 21, 47, 1);
+  --color-orange-400: rgba(230, 129, 97, 1);
+  --color-orange-500: rgba(168, 75, 47, 1);
+
+  /* RGB versions for opacity control */
+  --color-brown-600-rgb: 94, 82, 64;
+  --color-teal-500-rgb: 33, 128, 141;
+  --color-slate-900-rgb: 19, 52, 59;
+  --color-slate-500-rgb: 98, 108, 113;
+  --color-red-500-rgb: 192, 21, 47;
+  --color-red-400-rgb: 255, 84, 89;
+  --color-orange-500-rgb: 168, 75, 47;
+  --color-orange-400-rgb: 230, 129, 97;
+
+  /* Background color tokens (Light Mode) */
+  --color-bg-1: rgba(59, 130, 246, 0.08); /* Light blue */
+  --color-bg-2: rgba(245, 158, 11, 0.08); /* Light yellow */
+  --color-bg-3: rgba(34, 197, 94, 0.08); /* Light green */
+  --color-bg-4: rgba(239, 68, 68, 0.08); /* Light red */
+  --color-bg-5: rgba(147, 51, 234, 0.08); /* Light purple */
+  --color-bg-6: rgba(249, 115, 22, 0.08); /* Light orange */
+  --color-bg-7: rgba(236, 72, 153, 0.08); /* Light pink */
+  --color-bg-8: rgba(6, 182, 212, 0.08); /* Light cyan */
+
+  /* Semantic Color Tokens (Light Mode) */
+  --color-background: var(--color-cream-50);
+  --color-surface: var(--color-cream-100);
+  --color-text: var(--color-slate-900);
+  --color-text-secondary: var(--color-slate-500);
+  --color-primary: var(--color-teal-500);
+  --color-primary-hover: var(--color-teal-600);
+  --color-primary-active: var(--color-teal-700);
+  --color-secondary: rgba(var(--color-brown-600-rgb), 0.12);
+  --color-secondary-hover: rgba(var(--color-brown-600-rgb), 0.2);
+  --color-secondary-active: rgba(var(--color-brown-600-rgb), 0.25);
+  --color-border: rgba(var(--color-brown-600-rgb), 0.2);
+  --color-btn-primary-text: var(--color-cream-50);
+  --color-card-border: rgba(var(--color-brown-600-rgb), 0.12);
+  --color-card-border-inner: rgba(var(--color-brown-600-rgb), 0.12);
+  --color-error: var(--color-red-500);
+  --color-success: var(--color-teal-500);
+  --color-warning: var(--color-orange-500);
+  --color-info: var(--color-slate-500);
+  --color-focus-ring: rgba(var(--color-teal-500-rgb), 0.4);
+  --color-select-caret: rgba(var(--color-slate-900-rgb), 0.8);
+
+  /* Common style patterns */
+  --focus-ring: 0 0 0 3px var(--color-focus-ring);
+  --focus-outline: 2px solid var(--color-primary);
+  --status-bg-opacity: 0.15;
+  --status-border-opacity: 0.25;
+  --select-caret-light: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23134252' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
+  --select-caret-dark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23f5f5f5' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
+
+  /* RGB versions for opacity control */
+  --color-success-rgb: 33, 128, 141;
+  --color-error-rgb: 192, 21, 47;
+  --color-warning-rgb: 168, 75, 47;
+  --color-info-rgb: 98, 108, 113;
+
+  /* Typography */
+  --font-family-base: "FKGroteskNeue", "Geist", "Inter", -apple-system,
+    BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+  --font-family-mono: "Berkeley Mono", ui-monospace, SFMono-Regular, Menlo,
+    Monaco, Consolas, monospace;
+  --font-size-xs: 11px;
+  --font-size-sm: 12px;
+  --font-size-base: 14px;
+  --font-size-md: 14px;
+  --font-size-lg: 16px;
+  --font-size-xl: 18px;
+  --font-size-2xl: 20px;
+  --font-size-3xl: 24px;
+  --font-size-4xl: 30px;
+  --font-weight-normal: 400;
+  --font-weight-medium: 500;
+  --font-weight-semibold: 550;
+  --font-weight-bold: 600;
+  --line-height-tight: 1.2;
+  --line-height-normal: 1.5;
+  --letter-spacing-tight: -0.01em;
+
+  /* Spacing */
+  --space-0: 0;
+  --space-1: 1px;
+  --space-2: 2px;
+  --space-4: 4px;
+  --space-6: 6px;
+  --space-8: 8px;
+  --space-10: 10px;
+  --space-12: 12px;
+  --space-16: 16px;
+  --space-20: 20px;
+  --space-24: 24px;
+  --space-32: 32px;
+
+  /* Border Radius */
+  --radius-sm: 6px;
+  --radius-base: 8px;
+  --radius-md: 10px;
+  --radius-lg: 12px;
+  --radius-full: 9999px;
+
+  /* Shadows */
+  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.02);
+  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.02);
+  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.04),
+    0 2px 4px -1px rgba(0, 0, 0, 0.02);
+  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.04),
+    0 4px 6px -2px rgba(0, 0, 0, 0.02);
+  --shadow-inset-sm: inset 0 1px 0 rgba(255, 255, 255, 0.15),
+    inset 0 -1px 0 rgba(0, 0, 0, 0.03);
+
+  /* Animation */
+  --duration-fast: 150ms;
+  --duration-normal: 250ms;
+  --ease-standard: cubic-bezier(0.16, 1, 0.3, 1);
+
+  /* Layout */
+  --container-sm: 640px;
+  --container-md: 768px;
+  --container-lg: 1024px;
+  --container-xl: 1280px;
+}
+
+/* Dark mode colors */
+@media (prefers-color-scheme: dark) {
+  :root {
+    /* RGB versions for opacity control (Dark Mode) */
+    --color-gray-400-rgb: 119, 124, 124;
+    --color-teal-300-rgb: 50, 184, 198;
+    --color-gray-300-rgb: 167, 169, 169;
+    --color-gray-200-rgb: 245, 245, 245;
+
+    /* Background color tokens (Dark Mode) */
+    --color-bg-1: rgba(29, 78, 216, 0.15); /* Dark blue */
+    --color-bg-2: rgba(180, 83, 9, 0.15); /* Dark yellow */
+    --color-bg-3: rgba(21, 128, 61, 0.15); /* Dark green */
+    --color-bg-4: rgba(185, 28, 28, 0.15); /* Dark red */
+    --color-bg-5: rgba(107, 33, 168, 0.15); /* Dark purple */
+    --color-bg-6: rgba(194, 65, 12, 0.15); /* Dark orange */
+    --color-bg-7: rgba(190, 24, 93, 0.15); /* Dark pink */
+    --color-bg-8: rgba(8, 145, 178, 0.15); /* Dark cyan */
+    
+    /* Semantic Color Tokens (Dark Mode) */
+    --color-background: var(--color-charcoal-700);
+    --color-surface: var(--color-charcoal-800);
+    --color-text: var(--color-gray-200);
+    --color-text-secondary: rgba(var(--color-gray-300-rgb), 0.7);
+    --color-primary: var(--color-teal-300);
+    --color-primary-hover: var(--color-teal-400);
+    --color-primary-active: var(--color-teal-800);
+    --color-secondary: rgba(var(--color-gray-400-rgb), 0.15);
+    --color-secondary-hover: rgba(var(--color-gray-400-rgb), 0.25);
+    --color-secondary-active: rgba(var(--color-gray-400-rgb), 0.3);
+    --color-border: rgba(var(--color-gray-400-rgb), 0.3);
+    --color-error: var(--color-red-400);
+    --color-success: var(--color-teal-300);
+    --color-warning: var(--color-orange-400);
+    --color-info: var(--color-gray-300);
+    --color-focus-ring: rgba(var(--color-teal-300-rgb), 0.4);
+    --color-btn-primary-text: var(--color-slate-900);
+    --color-card-border: rgba(var(--color-gray-400-rgb), 0.2);
+    --color-card-border-inner: rgba(var(--color-gray-400-rgb), 0.15);
+    --shadow-inset-sm: inset 0 1px 0 rgba(255, 255, 255, 0.1),
+      inset 0 -1px 0 rgba(0, 0, 0, 0.15);
+    --button-border-secondary: rgba(var(--color-gray-400-rgb), 0.2);
+    --color-border-secondary: rgba(var(--color-gray-400-rgb), 0.2);
+    --color-select-caret: rgba(var(--color-gray-200-rgb), 0.8);
+
+    /* Common style patterns - updated for dark mode */
+    --focus-ring: 0 0 0 3px var(--color-focus-ring);
+    --focus-outline: 2px solid var(--color-primary);
+    --status-bg-opacity: 0.15;
+    --status-border-opacity: 0.25;
+    --select-caret-light: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23134252' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
+    --select-caret-dark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23f5f5f5' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
+
+    /* RGB versions for dark mode */
+    --color-success-rgb: var(--color-teal-300-rgb);
+    --color-error-rgb: var(--color-red-400-rgb);
+    --color-warning-rgb: var(--color-orange-400-rgb);
+    --color-info-rgb: var(--color-gray-300-rgb);
+  }
+}
+
+/* Data attribute for manual theme switching */
+[data-color-scheme="dark"] {
+  /* RGB versions for opacity control (dark mode) */
+  --color-gray-400-rgb: 119, 124, 124;
+  --color-teal-300-rgb: 50, 184, 198;
+  --color-gray-300-rgb: 167, 169, 169;
+  --color-gray-200-rgb: 245, 245, 245;
+
+  /* Colorful background palette - Dark Mode */
+  --color-bg-1: rgba(29, 78, 216, 0.15); /* Dark blue */
+  --color-bg-2: rgba(180, 83, 9, 0.15); /* Dark yellow */
+  --color-bg-3: rgba(21, 128, 61, 0.15); /* Dark green */
+  --color-bg-4: rgba(185, 28, 28, 0.15); /* Dark red */
+  --color-bg-5: rgba(107, 33, 168, 0.15); /* Dark purple */
+  --color-bg-6: rgba(194, 65, 12, 0.15); /* Dark orange */
+  --color-bg-7: rgba(190, 24, 93, 0.15); /* Dark pink */
+  --color-bg-8: rgba(8, 145, 178, 0.15); /* Dark cyan */
+  
+  /* Semantic Color Tokens (Dark Mode) */
+  --color-background: var(--color-charcoal-700);
+  --color-surface: var(--color-charcoal-800);
+  --color-text: var(--color-gray-200);
+  --color-text-secondary: rgba(var(--color-gray-300-rgb), 0.7);
+  --color-primary: var(--color-teal-300);
+  --color-primary-hover: var(--color-teal-400);
+  --color-primary-active: var(--color-teal-800);
+  --color-secondary: rgba(var(--color-gray-400-rgb), 0.15);
+  --color-secondary-hover: rgba(var(--color-gray-400-rgb), 0.25);
+  --color-secondary-active: rgba(var(--color-gray-400-rgb), 0.3);
+  --color-border: rgba(var(--color-gray-400-rgb), 0.3);
+  --color-error: var(--color-red-400);
+  --color-success: var(--color-teal-300);
+  --color-warning: var(--color-orange-400);
+  --color-info: var(--color-gray-300);
+  --color-focus-ring: rgba(var(--color-teal-300-rgb), 0.4);
+  --color-btn-primary-text: var(--color-slate-900);
+  --color-card-border: rgba(var(--color-gray-400-rgb), 0.15);
+  --color-card-border-inner: rgba(var(--color-gray-400-rgb), 0.15);
+  --shadow-inset-sm: inset 0 1px 0 rgba(255, 255, 255, 0.1),
+    inset 0 -1px 0 rgba(0, 0, 0, 0.15);
+  --color-border-secondary: rgba(var(--color-gray-400-rgb), 0.2);
+  --color-select-caret: rgba(var(--color-gray-200-rgb), 0.8);
+
+  /* Common style patterns - updated for dark mode */
+  --focus-ring: 0 0 0 3px var(--color-focus-ring);
+  --focus-outline: 2px solid var(--color-primary);
+  --status-bg-opacity: 0.15;
+  --status-border-opacity: 0.25;
+  --select-caret-light: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23134252' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
+  --select-caret-dark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23f5f5f5' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
+
+  /* RGB versions for dark mode */
+  --color-success-rgb: var(--color-teal-300-rgb);
+  --color-error-rgb: var(--color-red-400-rgb);
+  --color-warning-rgb: var(--color-orange-400-rgb);
+  --color-info-rgb: var(--color-gray-300-rgb);
+}
+
+[data-color-scheme="light"] {
+  /* RGB versions for opacity control (light mode) */
+  --color-brown-600-rgb: 94, 82, 64;
+  --color-teal-500-rgb: 33, 128, 141;
+  --color-slate-900-rgb: 19, 52, 59;
+  
+  /* Semantic Color Tokens (Light Mode) */
+  --color-background: var(--color-cream-50);
+  --color-surface: var(--color-cream-100);
+  --color-text: var(--color-slate-900);
+  --color-text-secondary: var(--color-slate-500);
+  --color-primary: var(--color-teal-500);
+  --color-primary-hover: var(--color-teal-600);
+  --color-primary-active: var(--color-teal-700);
+  --color-secondary: rgba(var(--color-brown-600-rgb), 0.12);
+  --color-secondary-hover: rgba(var(--color-brown-600-rgb), 0.2);
+  --color-secondary-active: rgba(var(--color-brown-600-rgb), 0.25);
+  --color-border: rgba(var(--color-brown-600-rgb), 0.2);
+  --color-btn-primary-text: var(--color-cream-50);
+  --color-card-border: rgba(var(--color-brown-600-rgb), 0.12);
+  --color-card-border-inner: rgba(var(--color-brown-600-rgb), 0.12);
+  --color-error: var(--color-red-500);
+  --color-success: var(--color-teal-500);
+  --color-warning: var(--color-orange-500);
+  --color-info: var(--color-slate-500);
+  --color-focus-ring: rgba(var(--color-teal-500-rgb), 0.4);
+
+  /* RGB versions for light mode */
+  --color-success-rgb: var(--color-teal-500-rgb);
+  --color-error-rgb: var(--color-red-500-rgb);
+  --color-warning-rgb: var(--color-orange-500-rgb);
+  --color-info-rgb: var(--color-slate-500-rgb);
+}
+
+/* Base styles */
+html {
+  font-size: var(--font-size-base);
+  font-family: var(--font-family-base);
+  line-height: var(--line-height-normal);
+  color: var(--color-text);
+  background-color: var(--color-background);
+  -webkit-font-smoothing: antialiased;
+  box-sizing: border-box;
+}
+
+body {
+  margin: 0;
+  padding: 0;
+}
+
+*,
+*::before,
+*::after {
+  box-sizing: inherit;
+}
+
+/* Typography */
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  margin: 0;
+  font-weight: var(--font-weight-semibold);
+  line-height: var(--line-height-tight);
+  color: var(--color-text);
+  letter-spacing: var(--letter-spacing-tight);
+}
+
+h1 {
+  font-size: var(--font-size-4xl);
+}
+h2 {
+  font-size: var(--font-size-3xl);
+}
+h3 {
+  font-size: var(--font-size-2xl);
+}
+h4 {
+  font-size: var(--font-size-xl);
+}
+h5 {
+  font-size: var(--font-size-lg);
+}
+h6 {
+  font-size: var(--font-size-md);
+}
+
+p {
+  margin: 0 0 var(--space-16) 0;
+}
+
+a {
+  color: var(--color-primary);
+  text-decoration: none;
+  transition: color var(--duration-fast) var(--ease-standard);
+}
+
+a:hover {
+  color: var(--color-primary-hover);
+}
+
+code,
+pre {
+  font-family: var(--font-family-mono);
+  font-size: calc(var(--font-size-base) * 0.95);
+  background-color: var(--color-secondary);
+  border-radius: var(--radius-sm);
+}
+
+code {
+  padding: var(--space-1) var(--space-4);
+}
+
+pre {
+  padding: var(--space-16);
+  margin: var(--space-16) 0;
+  overflow: auto;
+  border: 1px solid var(--color-border);
+}
+
+pre code {
+  background: none;
+  padding: 0;
+}
+
+/* Buttons */
+.btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: var(--space-8) var(--space-16);
+  border-radius: var(--radius-base);
+  font-size: var(--font-size-base);
+  font-weight: 500;
+  line-height: 1.5;
+  cursor: pointer;
+  transition: all var(--duration-normal) var(--ease-standard);
+  border: none;
+  text-decoration: none;
+  position: relative;
+}
+
+.btn:focus-visible {
+  outline: none;
+  box-shadow: var(--focus-ring);
+}
+
+.btn--primary {
+  background: var(--color-primary);
+  color: var(--color-btn-primary-text);
+}
+
+.btn--primary:hover {
+  background: var(--color-primary-hover);
+}
+
+.btn--primary:active {
+  background: var(--color-primary-active);
+}
+
+.btn--secondary {
+  background: var(--color-secondary);
+  color: var(--color-text);
+}
+
+.btn--secondary:hover {
+  background: var(--color-secondary-hover);
+}
+
+.btn--secondary:active {
+  background: var(--color-secondary-active);
+}
+
+.btn--outline {
+  background: transparent;
+  border: 1px solid var(--color-border);
+  color: var(--color-text);
+}
+
+.btn--outline:hover {
+  background: var(--color-secondary);
+}
+
+.btn--sm {
+  padding: var(--space-4) var(--space-12);
+  font-size: var(--font-size-sm);
+  border-radius: var(--radius-sm);
+}
+
+.btn--lg {
+  padding: var(--space-10) var(--space-20);
+  font-size: var(--font-size-lg);
+  border-radius: var(--radius-md);
+}
+
+.btn--full-width {
+  width: 100%;
+}
+
+.btn:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+/* Form elements */
+.form-control {
+  display: block;
+  width: 100%;
+  padding: var(--space-8) var(--space-12);
+  font-size: var(--font-size-md);
+  line-height: 1.5;
+  color: var(--color-text);
+  background-color: var(--color-surface);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-base);
+  transition: border-color var(--duration-fast) var(--ease-standard),
+    box-shadow var(--duration-fast) var(--ease-standard);
+}
+
+textarea.form-control {
+  font-family: var(--font-family-base);
+  font-size: var(--font-size-base);
+}
+
+select.form-control {
+  padding: var(--space-8) var(--space-12);
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  background-image: var(--select-caret-light);
+  background-repeat: no-repeat;
+  background-position: right var(--space-12) center;
+  background-size: 16px;
+  padding-right: var(--space-32);
+}
+
+/* Add a dark mode specific caret */
+@media (prefers-color-scheme: dark) {
+  select.form-control {
+    background-image: var(--select-caret-dark);
+  }
+}
+
+/* Also handle data-color-scheme */
+[data-color-scheme="dark"] select.form-control {
+  background-image: var(--select-caret-dark);
+}
+
+[data-color-scheme="light"] select.form-control {
+  background-image: var(--select-caret-light);
+}
+
+.form-control:focus {
+  border-color: var(--color-primary);
+  outline: var(--focus-outline);
+}
+
+.form-label {
+  display: block;
+  margin-bottom: var(--space-8);
+  font-weight: var(--font-weight-medium);
+  font-size: var(--font-size-sm);
+}
+
+.form-group {
+  margin-bottom: var(--space-16);
+}
+
+/* Card component */
+.card {
+  background-color: var(--color-surface);
+  border-radius: var(--radius-lg);
+  border: 1px solid var(--color-card-border);
+  box-shadow: var(--shadow-sm);
+  overflow: hidden;
+  transition: box-shadow var(--duration-normal) var(--ease-standard);
+}
+
+.card:hover {
+  box-shadow: var(--shadow-md);
+}
+
+.card__body {
+  padding: var(--space-16);
+}
+
+.card__header,
+.card__footer {
+  padding: var(--space-16);
+  border-bottom: 1px solid var(--color-card-border-inner);
+}
+
+/* Status indicators - simplified with CSS variables */
+.status {
+  display: inline-flex;
+  align-items: center;
+  padding: var(--space-6) var(--space-12);
+  border-radius: var(--radius-full);
+  font-weight: var(--font-weight-medium);
+  font-size: var(--font-size-sm);
+}
+
+.status--success {
+  background-color: rgba(
+    var(--color-success-rgb, 33, 128, 141),
+    var(--status-bg-opacity)
+  );
+  color: var(--color-success);
+  border: 1px solid
+    rgba(var(--color-success-rgb, 33, 128, 141), var(--status-border-opacity));
+}
+
+.status--error {
+  background-color: rgba(
+    var(--color-error-rgb, 192, 21, 47),
+    var(--status-bg-opacity)
+  );
+  color: var(--color-error);
+  border: 1px solid
+    rgba(var(--color-error-rgb, 192, 21, 47), var(--status-border-opacity));
+}
+
+.status--warning {
+  background-color: rgba(
+    var(--color-warning-rgb, 168, 75, 47),
+    var(--status-bg-opacity)
+  );
+  color: var(--color-warning);
+  border: 1px solid
+    rgba(var(--color-warning-rgb, 168, 75, 47), var(--status-border-opacity));
+}
+
+.status--info {
+  background-color: rgba(
+    var(--color-info-rgb, 98, 108, 113),
+    var(--status-bg-opacity)
+  );
+  color: var(--color-info);
+  border: 1px solid
+    rgba(var(--color-info-rgb, 98, 108, 113), var(--status-border-opacity));
+}
+
+/* Container layout */
+.container {
+  width: 100%;
+  margin-right: auto;
+  margin-left: auto;
+  padding-right: var(--space-16);
+  padding-left: var(--space-16);
+}
+
+@media (min-width: 640px) {
+  .container {
+    max-width: var(--container-sm);
+  }
+}
+@media (min-width: 768px) {
+  .container {
+    max-width: var(--container-md);
+  }
+}
+@media (min-width: 1024px) {
+  .container {
+    max-width: var(--container-lg);
+  }
+}
+@media (min-width: 1280px) {
+  .container {
+    max-width: var(--container-xl);
+  }
+}
+
+/* Utility classes */
+.flex {
+  display: flex;
+}
+.flex-col {
+  flex-direction: column;
+}
+.items-center {
+  align-items: center;
+}
+.justify-center {
+  justify-content: center;
+}
+.justify-between {
+  justify-content: space-between;
+}
+.gap-4 {
+  gap: var(--space-4);
+}
+.gap-8 {
+  gap: var(--space-8);
+}
+.gap-16 {
+  gap: var(--space-16);
+}
+
+.m-0 {
+  margin: 0;
+}
+.mt-8 {
+  margin-top: var(--space-8);
+}
+.mb-8 {
+  margin-bottom: var(--space-8);
+}
+.mx-8 {
+  margin-left: var(--space-8);
+  margin-right: var(--space-8);
+}
+.my-8 {
+  margin-top: var(--space-8);
+  margin-bottom: var(--space-8);
+}
+
+.p-0 {
+  padding: 0;
+}
+.py-8 {
+  padding-top: var(--space-8);
+  padding-bottom: var(--space-8);
+}
+.px-8 {
+  padding-left: var(--space-8);
+  padding-right: var(--space-8);
+}
+.py-16 {
+  padding-top: var(--space-16);
+  padding-bottom: var(--space-16);
+}
+.px-16 {
+  padding-left: var(--space-16);
+  padding-right: var(--space-16);
+}
+
+.block {
+  display: block;
+}
+.hidden {
+  display: none;
+}
+
+/* Accessibility */
+.sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border-width: 0;
+}
+
+:focus-visible {
+  outline: var(--focus-outline);
+  outline-offset: 2px;
+}
+
+/* Dark mode specifics */
+[data-color-scheme="dark"] .btn--outline {
+  border: 1px solid var(--color-border-secondary);
+}
+
+@font-face {
+  font-family: 'FKGroteskNeue';
+  src: url('https://r2cdn.perplexity.ai/fonts/FKGroteskNeue.woff2')
+    format('woff2');
+}
+
+/* END PERPLEXITY DESIGN SYSTEM */
+/* Mobile-first futuristic battery optimizer app styles */
+
+.app-container {
+  max-width: 375px;
+  margin: 0 auto;
+  background: linear-gradient(135deg, #0a0a0f 0%, #1a1a2e 50%, #16213e 100%);
+  min-height: 100vh;
+  overflow-x: hidden;
+  position: relative;
+}
+
+/* Add subtle animated background particles */
+.app-container::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: 
+    radial-gradient(circle at 20% 30%, rgba(0, 212, 255, 0.1) 0%, transparent 50%),
+    radial-gradient(circle at 80% 70%, rgba(139, 92, 246, 0.1) 0%, transparent 50%),
+    radial-gradient(circle at 40% 80%, rgba(0, 212, 255, 0.05) 0%, transparent 50%);
+  pointer-events: none;
+  animation: backgroundPulse 8s ease-in-out infinite;
+}
+
+@keyframes backgroundPulse {
+  0%, 100% { opacity: 0.5; }
+  50% { opacity: 1; }
+}
+
+/* Header Styles */
+.app-header {
+  padding: var(--space-16) var(--space-20);
+  background: rgba(10, 10, 15, 0.9);
+  backdrop-filter: blur(20px);
+  border-bottom: 1px solid rgba(0, 212, 255, 0.2);
+  position: sticky;
+  top: 0;
+  z-index: 100;
+}
+
+.status-bar {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: var(--space-16);
+  font-size: var(--font-size-sm);
+  color: rgba(255, 255, 255, 0.8);
+}
+
+.status-icons {
+  display: flex;
+  align-items: center;
+  gap: var(--space-8);
+}
+
+.battery-percentage {
+  color: #00d4ff;
+  font-weight: var(--font-weight-bold);
+}
+
+.header-content {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.app-title {
+  font-size: var(--font-size-xl);
+  background: linear-gradient(135deg, #00d4ff 0%, #8b5cf6 100%);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+  font-weight: var(--font-weight-bold);
+}
+
+.optimization-status {
+  display: flex;
+  align-items: center;
+  gap: var(--space-8);
+  font-size: var(--font-size-sm);
+  color: rgba(255, 255, 255, 0.8);
+}
+
+.status-indicator {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background: #10b981;
+  animation: pulse 2s ease-in-out infinite;
+}
+
+.status-indicator.active {
+  background: #00d4ff;
+  box-shadow: 0 0 8px rgba(0, 212, 255, 0.5);
+}
+
+@keyframes pulse {
+  0%, 100% { opacity: 1; transform: scale(1); }
+  50% { opacity: 0.7; transform: scale(1.1); }
+}
+
+/* Main Content */
+.main-content {
+  padding: var(--space-20);
+  padding-bottom: 100px; /* Space for bottom nav */
+}
+
+/* Tab System */
+.tab-content {
+  display: none;
+  animation: fadeIn 0.3s ease-out;
+}
+
+.tab-content.active {
+  display: block;
+}
+
+@keyframes fadeIn {
+  from { opacity: 0; transform: translateY(10px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+
+/* Card Styles with Futuristic Design */
+.card {
+  background: rgba(26, 26, 46, 0.8);
+  border: 1px solid rgba(0, 212, 255, 0.2);
+  border-radius: var(--radius-lg);
+  padding: var(--space-20);
+  margin-bottom: var(--space-20);
+  backdrop-filter: blur(20px);
+  position: relative;
+  overflow: hidden;
+  transition: all var(--duration-normal) var(--ease-standard);
+}
+
+.card::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 1px;
+  background: linear-gradient(90deg, transparent, rgba(0, 212, 255, 0.8), transparent);
+  animation: shimmer 3s ease-in-out infinite;
+}
+
+@keyframes shimmer {
+  0% { transform: translateX(-100%); }
+  100% { transform: translateX(100%); }
+}
+
+.card:hover {
+  border-color: rgba(0, 212, 255, 0.4);
+  box-shadow: 0 8px 32px rgba(0, 212, 255, 0.1);
+  transform: translateY(-2px);
+}
+
+/* Battery Widget */
+.battery-widget {
+  display: flex;
+  gap: var(--space-24);
+  align-items: center;
+}
+
+.battery-circle {
+  position: relative;
+  flex-shrink: 0;
+}
+
+.battery-info {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  text-align: center;
+}
+
+.battery-level {
+  display: block;
+  font-size: var(--font-size-2xl);
+  font-weight: var(--font-weight-bold);
+  color: #00d4ff;
+  line-height: 1;
+}
+
+.time-remaining {
+  display: block;
+  font-size: var(--font-size-sm);
+  color: rgba(255, 255, 255, 0.7);
+  margin-top: var(--space-4);
+}
+
+.battery-details {
+  flex: 1;
+}
+
+.detail-item {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: var(--space-12);
+}
+
+.detail-item:last-child {
+  margin-bottom: 0;
+}
+
+.label {
+  color: rgba(255, 255, 255, 0.7);
+  font-size: var(--font-size-sm);
+}
+
+.value {
+  color: #ffffff;
+  font-weight: var(--font-weight-medium);
+}
+
+.value.excellent {
+  color: #10b981;
+}
+
+/* AI Prediction Widget */
+.prediction-widget .widget-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: var(--space-20);
+}
+
+.widget-header h3 {
+  color: #ffffff;
+  margin: 0;
+}
+
+.accuracy-badge {
+  background: rgba(139, 92, 246, 0.2);
+  color: #8b5cf6;
+  padding: var(--space-4) var(--space-8);
+  border-radius: var(--radius-full);
+  font-size: var(--font-size-xs);
+  border: 1px solid rgba(139, 92, 246, 0.3);
+}
+
+.next-app-prediction {
+  display: flex;
+  gap: var(--space-16);
+  align-items: center;
+  margin-bottom: var(--space-24);
+}
+
+.app-icon {
+  font-size: 32px;
+  width: 48px;
+  height: 48px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: rgba(0, 212, 255, 0.1);
+  border-radius: var(--radius-md);
+  border: 1px solid rgba(0, 212, 255, 0.3);
+}
+
+.prediction-info {
+  flex: 1;
+}
+
+.prediction-info h4 {
+  color: #ffffff;
+  margin: 0 0 var(--space-8) 0;
+  font-size: var(--font-size-lg);
+}
+
+.confidence-bar {
+  background: rgba(255, 255, 255, 0.1);
+  height: 6px;
+  border-radius: var(--radius-sm);
+  position: relative;
+  margin-bottom: var(--space-8);
+}
+
+.confidence-fill {
+  height: 100%;
+  background: linear-gradient(90deg, #00d4ff 0%, #10b981 100%);
+  border-radius: var(--radius-sm);
+  transition: width 1s ease-out;
+}
+
+.confidence-text {
+  position: absolute;
+  right: 0;
+  top: -20px;
+  font-size: var(--font-size-xs);
+  color: #00d4ff;
+  font-weight: var(--font-weight-bold);
+}
+
+.launch-time {
+  color: rgba(255, 255, 255, 0.7);
+  font-size: var(--font-size-sm);
+  margin: 0;
+}
+
+.alternative-predictions {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: var(--space-12);
+}
+
+.alt-app {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--space-4);
+  padding: var(--space-8);
+  background: rgba(255, 255, 255, 0.05);
+  border-radius: var(--radius-base);
+  border: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+.alt-app .app-icon {
+  font-size: 16px;
+  width: 24px;
+  height: 24px;
+}
+
+.alt-app .app-name {
+  font-size: var(--font-size-xs);
+  color: rgba(255, 255, 255, 0.8);
+}
+
+.alt-app .confidence {
+  font-size: var(--font-size-xs);
+  color: #00d4ff;
+  font-weight: var(--font-weight-bold);
+}
+
+/* Stats Grid */
+.stats-grid {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: var(--space-16);
+  margin-bottom: var(--space-20);
+}
+
+.stat-card {
+  text-align: center;
+  padding: var(--space-16);
+}
+
+.stat-icon {
+  font-size: 24px;
+  display: block;
+  margin-bottom: var(--space-8);
+}
+
+.stat-value {
+  display: block;
+  font-size: var(--font-size-lg);
+  font-weight: var(--font-weight-bold);
+  color: #00d4ff;
+  margin-bottom: var(--space-4);
+}
+
+.stat-label {
+  font-size: var(--font-size-xs);
+  color: rgba(255, 255, 255, 0.7);
+}
+
+/* Chart Container */
+.chart-widget h3 {
+  color: #ffffff;
+  margin: 0 0 var(--space-16) 0;
+}
+
+/* Action Buttons */
+.action-buttons {
+  margin-top: var(--space-32);
+}
+
+.btn-icon {
+  margin-right: var(--space-8);
+}
+
+/* Button Overrides for Futuristic Style */
+.btn--primary {
+  background: linear-gradient(135deg, #00d4ff 0%, #0099cc 100%);
+  border: 1px solid rgba(0, 212, 255, 0.5);
+  box-shadow: 0 0 20px rgba(0, 212, 255, 0.3);
+  color: #0a0a0f;
+  font-weight: var(--font-weight-bold);
+}
+
+.btn--primary:hover {
+  box-shadow: 0 0 30px rgba(0, 212, 255, 0.5);
+  transform: translateY(-2px);
+}
+
+/* Usage Patterns */
+.prediction-header {
+  text-align: center;
+}
+
+.prediction-header h2 {
+  color: #ffffff;
+  margin: 0 0 var(--space-8) 0;
+}
+
+.prediction-header p {
+  color: rgba(255, 255, 255, 0.7);
+  margin: 0;
+}
+
+.patterns-list {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-12);
+}
+
+.pattern-item {
+  display: flex;
+  align-items: center;
+  gap: var(--space-16);
+  padding: var(--space-12);
+  background: rgba(255, 255, 255, 0.05);
+  border-radius: var(--radius-base);
+  border: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+.pattern-time {
+  font-weight: var(--font-weight-bold);
+  color: #00d4ff;
+  min-width: 60px;
+}
+
+.pattern-apps {
+  flex: 1;
+  display: flex;
+  gap: var(--space-8);
+}
+
+.app-tag {
+  background: rgba(139, 92, 246, 0.2);
+  color: #8b5cf6;
+  padding: var(--space-2) var(--space-8);
+  border-radius: var(--radius-full);
+  font-size: var(--font-size-xs);
+  border: 1px solid rgba(139, 92, 246, 0.3);
+}
+
+.pattern-confidence {
+  color: #10b981;
+  font-weight: var(--font-weight-bold);
+  font-size: var(--font-size-sm);
+}
+
+/* Learned Behaviors */
+.behavior-list {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-12);
+}
+
+.behavior-item {
+  display: flex;
+  align-items: center;
+  gap: var(--space-12);
+  padding: var(--space-12);
+  background: rgba(255, 255, 255, 0.05);
+  border-radius: var(--radius-base);
+  border: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+.behavior-icon {
+  font-size: 20px;
+}
+
+.behavior-text {
+  color: rgba(255, 255, 255, 0.9);
+}
+
+/* Performance Tab Styles */
+.performance-header {
+  text-align: center;
+}
+
+.fps-control .control-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: var(--space-20);
+}
+
+.fps-control h3 {
+  color: #ffffff;
+  margin: 0;
+}
+
+.mode-toggle {
+  display: flex;
+  align-items: center;
+  gap: var(--space-8);
+  color: rgba(255, 255, 255, 0.8);
+  font-size: var(--font-size-sm);
+}
+
+.fps-display {
+  display: flex;
+  align-items: center;
+  gap: var(--space-24);
+}
+
+.current-fps {
+  text-align: center;
+}
+
+.fps-value {
+  display: block;
+  font-size: 48px;
+  font-weight: var(--font-weight-bold);
+  color: #00d4ff;
+  line-height: 1;
+}
+
+.fps-label {
+  display: block;
+  color: rgba(255, 255, 255, 0.7);
+  font-size: var(--font-size-sm);
+  margin-top: var(--space-4);
+}
+
+.fps-options {
+  display: flex;
+  gap: var(--space-8);
+  flex: 1;
+}
+
+.fps-btn {
+  flex: 1;
+  padding: var(--space-8);
+  background: rgba(255, 255, 255, 0.1);
+  border: 1px solid rgba(255, 255, 255, 0.2);
+  border-radius: var(--radius-base);
+  color: rgba(255, 255, 255, 0.8);
+  cursor: pointer;
+  transition: all var(--duration-fast) var(--ease-standard);
+}
+
+.fps-btn:hover {
+  background: rgba(0, 212, 255, 0.1);
+  border-color: rgba(0, 212, 255, 0.3);
+}
+
+.fps-btn.active {
+  background: rgba(0, 212, 255, 0.2);
+  border-color: #00d4ff;
+  color: #00d4ff;
+}
+
+/* Performance Modes */
+.mode-selector {
+  display: flex;
+  gap: var(--space-8);
+}
+
+.mode-btn {
+  flex: 1;
+  padding: var(--space-12);
+  background: rgba(255, 255, 255, 0.05);
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  border-radius: var(--radius-base);
+  color: rgba(255, 255, 255, 0.8);
+  cursor: pointer;
+  transition: all var(--duration-fast) var(--ease-standard);
+  font-size: var(--font-size-sm);
+}
+
+.mode-btn:hover {
+  background: rgba(139, 92, 246, 0.1);
+  border-color: rgba(139, 92, 246, 0.3);
+}
+
+.mode-btn.active {
+  background: rgba(139, 92, 246, 0.2);
+  border-color: #8b5cf6;
+  color: #8b5cf6;
+}
+
+/* System Metrics */
+.metrics-grid {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-16);
+}
+
+.metric-item {
+  display: flex;
+  align-items: center;
+  gap: var(--space-12);
+}
+
+.metric-label {
+  min-width: 80px;
+  color: rgba(255, 255, 255, 0.8);
+  font-size: var(--font-size-sm);
+}
+
+.metric-bar {
+  flex: 1;
+  height: 8px;
+  background: rgba(255, 255, 255, 0.1);
+  border-radius: var(--radius-sm);
+  overflow: hidden;
+  position: relative;
+}
+
+.metric-fill {
+  height: 100%;
+  border-radius: var(--radius-sm);
+  transition: width 1s ease-out;
+}
+
+.metric-fill.cpu {
+  background: linear-gradient(90deg, #10b981 0%, #00d4ff 100%);
+}
+
+.metric-fill.gpu {
+  background: linear-gradient(90deg, #8b5cf6 0%, #00d4ff 100%);
+}
+
+.metric-fill.temp {
+  background: linear-gradient(90deg, #f59e0b 0%, #ef4444 100%);
+}
+
+.metric-value {
+  min-width: 50px;
+  text-align: right;
+  color: #00d4ff;
+  font-weight: var(--font-weight-bold);
+  font-size: var(--font-size-sm);
+}
+
+/* Background Apps */
+.apps-list {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-12);
+}
+
+.app-item {
+  display: flex;
+  align-items: center;
+  gap: var(--space-12);
+  padding: var(--space-12);
+  background: rgba(255, 255, 255, 0.05);
+  border-radius: var(--radius-base);
+  border: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+.app-item .app-icon {
+  font-size: 20px;
+  width: 32px;
+  height: 32px;
+}
+
+.app-info {
+  flex: 1;
+}
+
+.app-name {
+  display: block;
+  color: #ffffff;
+  font-weight: var(--font-weight-medium);
+  margin-bottom: var(--space-2);
+}
+
+.power-usage {
+  font-size: var(--font-size-xs);
+}
+
+.power-usage.low {
+  color: #10b981;
+}
+
+.power-usage.medium {
+  color: #f59e0b;
+}
+
+.power-usage.high {
+  color: #ef4444;
+}
+
+.app-status {
+  padding: var(--space-4) var(--space-8);
+  border-radius: var(--radius-full);
+  font-size: var(--font-size-xs);
+  font-weight: var(--font-weight-medium);
+}
+
+.app-status.optimized {
+  background: rgba(16, 185, 129, 0.2);
+  color: #10b981;
+  border: 1px solid rgba(16, 185, 129, 0.3);
+}
+
+.app-status.normal {
+  background: rgba(245, 158, 11, 0.2);
+  color: #f59e0b;
+  border: 1px solid rgba(245, 158, 11, 0.3);
+}
+
+.app-status.restricted {
+  background: rgba(239, 68, 68, 0.2);
+  color: #ef4444;
+  border: 1px solid rgba(239, 68, 68, 0.3);
+}
+
+.app-toggle {
+  width: 40px;
+  height: 20px;
+  border-radius: var(--radius-full);
+  border: none;
+  cursor: pointer;
+  position: relative;
+  transition: all var(--duration-fast) var(--ease-standard);
+}
+
+.app-toggle::before {
+  content: '';
+  position: absolute;
+  width: 16px;
+  height: 16px;
+  border-radius: 50%;
+  background: #ffffff;
+  top: 2px;
+  left: 2px;
+  transition: all var(--duration-fast) var(--ease-standard);
+}
+
+.app-toggle.optimized {
+  background: #10b981;
+}
+
+.app-toggle.optimized::before {
+  transform: translateX(20px);
+}
+
+.app-toggle.normal {
+  background: rgba(255, 255, 255, 0.3);
+}
+
+.app-toggle.restricted {
+  background: #ef4444;
+}
+
+/* Brightness Tab Styles */
+.brightness-header {
+  text-align: center;
+}
+
+.gaze-detection h3 {
+  color: #ffffff;
+  margin: 0 0 var(--space-16) 0;
+}
+
+.gaze-status {
+  display: flex;
+  gap: var(--space-20);
+  align-items: center;
+}
+
+.camera-preview {
+  width: 100px;
+  height: 100px;
+  background: rgba(0, 0, 0, 0.5);
+  border: 2px solid rgba(0, 212, 255, 0.5);
+  border-radius: var(--radius-lg);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+  overflow: hidden;
+}
+
+.face-indicator {
+  position: relative;
+  width: 60px;
+  height: 60px;
+}
+
+.face-indicator.active {
+  animation: facePulse 2s ease-in-out infinite;
+}
+
+@keyframes facePulse {
+  0%, 100% { opacity: 0.8; }
+  50% { opacity: 1; }
+}
+
+.eye {
+  position: absolute;
+  width: 8px;
+  height: 8px;
+  background: #00d4ff;
+  border-radius: 50%;
+  top: 15px;
+  animation: blink 3s ease-in-out infinite;
+}
+
+.eye.left {
+  left: 15px;
+}
+
+.eye.right {
+  right: 15px;
+}
+
+@keyframes blink {
+  0%, 90%, 100% { transform: scaleY(1); }
+  95% { transform: scaleY(0.1); }
+}
+
+.mouth {
+  position: absolute;
+  width: 20px;
+  height: 10px;
+  border: 2px solid #00d4ff;
+  border-top: none;
+  border-radius: 0 0 20px 20px;
+  bottom: 15px;
+  left: 50%;
+  transform: translateX(-50%);
+}
+
+.gaze-info {
+  flex: 1;
+}
+
+.status-item {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: var(--space-12);
+}
+
+.status-item:last-child {
+  margin-bottom: 0;
+}
+
+.status-label {
+  color: rgba(255, 255, 255, 0.8);
+}
+
+/* Brightness Control */
+.brightness-display {
+  text-align: center;
+  margin-bottom: var(--space-20);
+}
+
+.brightness-value {
+  font-size: 48px;
+  font-weight: var(--font-weight-bold);
+  color: #00d4ff;
+  margin-bottom: var(--space-16);
+}
+
+.brightness-slider-container {
+  position: relative;
+  margin-bottom: var(--space-12);
+}
+
+.brightness-slider {
+  width: 100%;
+  height: 8px;
+  background: rgba(255, 255, 255, 0.1);
+  border-radius: var(--radius-sm);
+  outline: none;
+  -webkit-appearance: none;
+  appearance: none;
+}
+
+.brightness-slider::-webkit-slider-thumb {
+  -webkit-appearance: none;
+  width: 20px;
+  height: 20px;
+  border-radius: 50%;
+  background: #00d4ff;
+  cursor: pointer;
+  box-shadow: 0 0 10px rgba(0, 212, 255, 0.5);
+}
+
+.brightness-slider::-moz-range-thumb {
+  width: 20px;
+  height: 20px;
+  border-radius: 50%;
+  background: #00d4ff;
+  cursor: pointer;
+  border: none;
+  box-shadow: 0 0 10px rgba(0, 212, 255, 0.5);
+}
+
+.brightness-labels {
+  display: flex;
+  justify-content: space-between;
+  margin-top: var(--space-8);
+  font-size: 20px;
+}
+
+.ambient-light {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: var(--space-12);
+  background: rgba(255, 255, 255, 0.05);
+  border-radius: var(--radius-base);
+  border: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+.ambient-label {
+  color: rgba(255, 255, 255, 0.8);
+}
+
+.ambient-value {
+  color: #00d4ff;
+  font-weight: var(--font-weight-bold);
+}
+
+/* Smart Features */
+.feature-list {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-16);
+}
+
+.feature-item {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: var(--space-16);
+  background: rgba(255, 255, 255, 0.05);
+  border-radius: var(--radius-base);
+  border: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+.feature-info {
+  flex: 1;
+}
+
+.feature-name {
+  display: block;
+  color: #ffffff;
+  font-weight: var(--font-weight-medium);
+  margin-bottom: var(--space-4);
+}
+
+.feature-desc {
+  display: block;
+  color: rgba(255, 255, 255, 0.7);
+  font-size: var(--font-size-sm);
+}
+
+/* Switch Component */
+.switch {
+  position: relative;
+  display: inline-block;
+  width: 40px;
+  height: 20px;
+}
+
+.switch input {
+  opacity: 0;
+  width: 0;
+  height: 0;
+}
+
+.slider {
+  position: absolute;
+  cursor: pointer;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: rgba(255, 255, 255, 0.3);
+  transition: var(--duration-fast) var(--ease-standard);
+  border-radius: var(--radius-full);
+}
+
+.slider:before {
+  position: absolute;
+  content: "";
+  height: 16px;
+  width: 16px;
+  left: 2px;
+  bottom: 2px;
+  background-color: white;
+  transition: var(--duration-fast) var(--ease-standard);
+  border-radius: 50%;
+}
+
+input:checked + .slider {
+  background-color: #00d4ff;
+  box-shadow: 0 0 10px rgba(0, 212, 255, 0.5);
+}
+
+input:checked + .slider:before {
+  transform: translateX(20px);
+}
+
+/* Bottom Navigation */
+.bottom-nav {
+  position: fixed;
+  bottom: 0;
+  left: 50%;
+  transform: translateX(-50%);
+  width: 100%;
+  max-width: 375px;
+  background: rgba(10, 10, 15, 0.95);
+  backdrop-filter: blur(20px);
+  border-top: 1px solid rgba(0, 212, 255, 0.2);
+  display: flex;
+  padding: var(--space-12) var(--space-16);
+  z-index: 100;
+}
+
+.nav-btn {
+  flex: 1;
+  background: none;
+  border: none;
+  padding: var(--space-8);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--space-4);
+  cursor: pointer;
+  transition: all var(--duration-fast) var(--ease-standard);
+  border-radius: var(--radius-base);
+}
+
+.nav-btn:hover {
+  background: rgba(255, 255, 255, 0.1);
+}
+
+.nav-btn.active {
+  background: rgba(0, 212, 255, 0.1);
+  border: 1px solid rgba(0, 212, 255, 0.3);
+}
+
+.nav-icon {
+  font-size: 20px;
+  opacity: 0.7;
+  transition: opacity var(--duration-fast) var(--ease-standard);
+}
+
+.nav-btn.active .nav-icon {
+  opacity: 1;
+}
+
+.nav-label {
+  font-size: var(--font-size-xs);
+  color: rgba(255, 255, 255, 0.7);
+  transition: color var(--duration-fast) var(--ease-standard);
+}
+
+.nav-btn.active .nav-label {
+  color: #00d4ff;
+}
+
+/* Responsive Design */
+@media (max-width: 375px) {
+  .main-content {
+    padding: var(--space-16);
+  }
+  
+  .stats-grid {
+    grid-template-columns: 1fr;
+    gap: var(--space-12);
+  }
+  
+  .alternative-predictions {
+    grid-template-columns: 1fr;
+  }
+  
+  .battery-widget {
+    flex-direction: column;
+    text-align: center;
+  }
+  
+  .fps-display {
+    flex-direction: column;
+    gap: var(--space-16);
+  }
+  
+  .gaze-status {
+    flex-direction: column;
+    gap: var(--space-16);
+  }
+}
+
+/* Loading animations */
+.loading {
+  opacity: 0;
+  animation: fadeInLoad 0.5s ease-out forwards;
+}
+
+@keyframes fadeInLoad {
+  to { opacity: 1; }
+}