// Define page variables
$pageTitle = "Calculator Hub - GST, Discount, BMI - StudioTools Pro";
$pageDescription = "Free online Calculator Hub with EMI, CGPA, GST, Discount, BMI & Inflation Calculators. University grade point calculator, loan EMI, tax calculator and more.";
$pageKeywords = "GST calculator, tax calculator, discount calculator, percentage calculator, BMI calculator, body mass index, Indian GST, reverse GST calculation";
$pageThemeColor = "#f59e0b"; // Amber color for calculator
$bodyClass = "min-h-screen flex flex-col bg-gradient-to-br from-slate-50 via-amber-50/30 to-orange-50/30 dark:from-slate-950 dark:via-slate-900 dark:to-slate-950 transition-colors duration-300";

// Define extra head content (styles/scripts specific to this page)
$extraHead = '
    <style>
        .calc-tab { transition: all 0.2s ease; }
        .calc-tab.active { background: linear-gradient(135deg, #f59e0b, #d97706); color: white; box-shadow: 0 4px 15px rgba(245, 158, 11, 0.3); }
        .result-highlight { animation: pulse 0.3s ease; }
        @keyframes pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.02); } }
        .bmi-bar { height: 8px; border-radius: 4px; background: linear-gradient(to right, #3b82f6, #22c55e, #eab308, #f97316, #ef4444); }
    </style>
    <script>
        function toggleTheme() {
            document.documentElement.classList.toggle(\'dark\');
            localStorage.setItem(\'theme\', document.documentElement.classList.contains(\'dark\') ? \'dark\' : \'light\');
            lucide.createIcons();
        }
    </script>
';

require_once __DIR__ . '/includes/config.php';
require_once __DIR__ . '/includes/functions.php';
require_once __DIR__ . '/includes/head.php';
?>

    
    <main class="flex-grow pt-20 pb-8 px-4">
        <div class="max-w-5xl mx-auto">
            
            <!-- Header -->
            <div class="bg-white dark:bg-slate-900 rounded-3xl p-5 shadow-xl border border-slate-100 dark:border-slate-800 mb-6 flex flex-wrap items-center justify-between gap-4">
                <div class="flex items-center gap-4">
                    <div class="bg-gradient-to-br from-amber-500 to-orange-600 w-14 h-14 rounded-2xl flex items-center justify-center text-white shadow-lg shadow-amber-500/30">
                        <i data-lucide="calculator" class="w-7 h-7"></i>
                    </div>
                    <div>
                        <h1 class="text-2xl font-bold text-slate-800 dark:text-white font-brand">Calculator Hub</h1>
                        <p class="text-sm text-slate-500 dark:text-slate-400">EMI, CGPA, GST, Discount, BMI & Inflation</p>
                    </div>
                </div>
                <button onclick="toggleTheme()" class="w-10 h-10 flex items-center justify-center rounded-xl bg-slate-100 dark:bg-slate-800 text-slate-600 dark:text-yellow-400 hover:scale-105 transition-all">
                    <i data-lucide="moon" class="w-5 h-5 block dark:hidden"></i>
                    <i data-lucide="sun" class="w-5 h-5 hidden dark:block"></i>
                </button>
            </div>

            <!-- Calculator Tabs -->
            <div class="flex gap-2 mb-6 overflow-x-auto pb-2">
                <button onclick="showCalc('gst')" id="tab-gst" class="calc-tab active flex-1 min-w-[140px] p-4 rounded-2xl font-bold text-sm flex items-center justify-center gap-2 bg-slate-100 dark:bg-slate-800 text-slate-600 dark:text-slate-400">
                    <span class="text-xl">🧾</span> GST / Tax
                </button>
                <button onclick="showCalc('discount')" id="tab-discount" class="calc-tab flex-1 min-w-[140px] p-4 rounded-2xl font-bold text-sm flex items-center justify-center gap-2 bg-slate-100 dark:bg-slate-800 text-slate-600 dark:text-slate-400">
                    <span class="text-xl">🏷️</span> Discount
                </button>
                <button onclick="showCalc('bmi')" id="tab-bmi" class="calc-tab flex-1 min-w-[120px] p-4 rounded-2xl font-bold text-sm flex items-center justify-center gap-2 bg-slate-100 dark:bg-slate-800 text-slate-600 dark:text-slate-400">
                    <span class="text-xl">⚖️</span> BMI
                </button>
                <button onclick="showCalc('emi')" id="tab-emi" class="calc-tab flex-1 min-w-[120px] p-4 rounded-2xl font-bold text-sm flex items-center justify-center gap-2 bg-slate-100 dark:bg-slate-800 text-slate-600 dark:text-slate-400">
                    <span class="text-xl">🏦</span> EMI
                </button>
                <button onclick="showCalc('inflation')" id="tab-inflation" class="calc-tab flex-1 min-w-[120px] p-4 rounded-2xl font-bold text-sm flex items-center justify-center gap-2 bg-slate-100 dark:bg-slate-800 text-slate-600 dark:text-slate-400">
                    <span class="text-xl">📈</span> Inflation
                </button>
                <button onclick="showCalc('cgpa')" id="tab-cgpa" class="calc-tab flex-1 min-w-[120px] p-4 rounded-2xl font-bold text-sm flex items-center justify-center gap-2 bg-slate-100 dark:bg-slate-800 text-slate-600 dark:text-slate-400">
                    <span class="text-xl">🎓</span> CGPA
                </button>
            </div>

            <!-- GST Calculator -->
            <div id="calc-gst" class="calc-section">
                <div class="bg-white dark:bg-slate-900 rounded-3xl p-6 shadow-xl border border-slate-100 dark:border-slate-800 mb-6">
                    <div class="flex items-center gap-3 mb-6">
                        <span class="text-3xl">🧾</span>
                        <div>
                            <h2 class="text-xl font-bold text-slate-800 dark:text-white">GST / Tax Calculator</h2>
                            <p class="text-sm text-slate-500">Calculate GST or reverse calculate from total</p>
                        </div>
                    </div>
                    
                    <!-- Mode Toggle -->
                    <div class="flex gap-2 mb-6">
                        <button onclick="setGstMode('add')" id="gst-mode-add" class="flex-1 p-3 rounded-xl font-medium text-sm border-2 transition-all bg-amber-50 dark:bg-amber-900/20 border-amber-500 text-amber-700 dark:text-amber-400">
                            ➕ Add GST to Amount
                        </button>
                        <button onclick="setGstMode('reverse')" id="gst-mode-reverse" class="flex-1 p-3 rounded-xl font-medium text-sm border-2 transition-all bg-slate-50 dark:bg-slate-800 border-slate-200 dark:border-slate-700 text-slate-600 dark:text-slate-400">
                            🔄 Reverse (Extract GST)
                        </button>
                    </div>
                    
                    <div class="grid md:grid-cols-2 gap-6">
                        <div class="space-y-4">
                            <div>
                                <label class="block text-xs font-bold text-slate-500 uppercase mb-2" id="gst-amount-label">Base Amount (₹)</label>
                                <input type="number" id="gst-amount" class="w-full p-4 rounded-xl text-lg font-bold bg-slate-50 dark:bg-slate-800 border-2 border-slate-200 dark:border-slate-700 focus:border-amber-500 outline-none transition-all" placeholder="0" oninput="calculateGst()">
                            </div>
                            <div>
                                <label class="block text-xs font-bold text-slate-500 uppercase mb-2">GST Rate (%)</label>
                                <div class="flex gap-2 flex-wrap">
                                    <button onclick="setGstRate(5)" class="gst-rate px-4 py-2 rounded-lg bg-slate-100 dark:bg-slate-800 text-slate-600 dark:text-slate-400 font-medium hover:bg-amber-100 hover:text-amber-600 transition-all">5%</button>
                                    <button onclick="setGstRate(12)" class="gst-rate px-4 py-2 rounded-lg bg-slate-100 dark:bg-slate-800 text-slate-600 dark:text-slate-400 font-medium hover:bg-amber-100 hover:text-amber-600 transition-all">12%</button>
                                    <button onclick="setGstRate(18)" class="gst-rate px-4 py-2 rounded-lg bg-amber-100 dark:bg-amber-900/30 text-amber-600 font-bold">18%</button>
                                    <button onclick="setGstRate(28)" class="gst-rate px-4 py-2 rounded-lg bg-slate-100 dark:bg-slate-800 text-slate-600 dark:text-slate-400 font-medium hover:bg-amber-100 hover:text-amber-600 transition-all">28%</button>
                                    <input type="number" id="gst-custom-rate" class="w-20 px-3 py-2 rounded-lg bg-slate-50 dark:bg-slate-800 border border-slate-200 dark:border-slate-700 text-center" placeholder="Custom" oninput="setGstRate(this.value)">
                                </div>
                            </div>
                        </div>
                        
                        <div class="bg-gradient-to-br from-amber-50 to-orange-50 dark:from-amber-900/20 dark:to-orange-900/20 p-5 rounded-2xl border border-amber-200 dark:border-amber-800/50">
                            <h3 class="text-sm font-bold text-amber-600 uppercase mb-4">Result</h3>
                            <div class="space-y-3">
                                <div class="flex justify-between items-center">
                                    <span class="text-slate-600 dark:text-slate-400">Base Amount:</span>
                                    <span id="gst-result-base" class="text-lg font-bold text-slate-800 dark:text-white">₹0.00</span>
                                </div>
                                <div class="flex justify-between items-center">
                                    <span class="text-slate-600 dark:text-slate-400">CGST (<span id="gst-cgst-rate">9</span>%):</span>
                                    <span id="gst-result-cgst" class="text-lg font-bold text-amber-600">₹0.00</span>
                                </div>
                                <div class="flex justify-between items-center">
                                    <span class="text-slate-600 dark:text-slate-400">SGST (<span id="gst-sgst-rate">9</span>%):</span>
                                    <span id="gst-result-sgst" class="text-lg font-bold text-amber-600">₹0.00</span>
                                </div>
                                <div class="border-t border-amber-200 dark:border-amber-800 pt-3 flex justify-between items-center">
                                    <span class="text-slate-800 dark:text-white font-bold">Total Amount:</span>
                                    <span id="gst-result-total" class="text-2xl font-bold text-green-600">₹0.00</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Discount Calculator -->
            <div id="calc-discount" class="calc-section hidden">
                <div class="bg-white dark:bg-slate-900 rounded-3xl p-6 shadow-xl border border-slate-100 dark:border-slate-800 mb-6">
                    <div class="flex items-center gap-3 mb-6">
                        <span class="text-3xl">🏷️</span>
                        <div>
                            <h2 class="text-xl font-bold text-slate-800 dark:text-white">Discount & Percentage Calculator</h2>
                            <p class="text-sm text-slate-500">Calculate discounts, percentages & marks</p>
                        </div>
                    </div>
                    
                    <!-- Discount Sub-tabs -->
                    <div class="flex gap-2 mb-6 flex-wrap">
                        <button onclick="setDiscountMode('discount')" id="disc-mode-discount" class="flex-1 min-w-[120px] p-3 rounded-xl font-medium text-sm border-2 transition-all bg-pink-50 dark:bg-pink-900/20 border-pink-500 text-pink-700 dark:text-pink-400">
                            💰 Price Discount
                        </button>
                        <button onclick="setDiscountMode('percent')" id="disc-mode-percent" class="flex-1 min-w-[120px] p-3 rounded-xl font-medium text-sm border-2 transition-all bg-slate-50 dark:bg-slate-800 border-slate-200 dark:border-slate-700 text-slate-600 dark:text-slate-400">
                            📊 Percentage
                        </button>
                        <button onclick="setDiscountMode('marks')" id="disc-mode-marks" class="flex-1 min-w-[120px] p-3 rounded-xl font-medium text-sm border-2 transition-all bg-slate-50 dark:bg-slate-800 border-slate-200 dark:border-slate-700 text-slate-600 dark:text-slate-400">
                            🎓 Marks Calculator
                        </button>
                    </div>
                    
                    <!-- Discount Mode -->
                    <div id="discount-panel-discount" class="grid md:grid-cols-2 gap-6">
                        <div class="space-y-4">
                            <div>
                                <label class="block text-xs font-bold text-slate-500 uppercase mb-2">Original Price (₹)</label>
                                <input type="number" id="disc-original" class="w-full p-4 rounded-xl text-lg font-bold bg-slate-50 dark:bg-slate-800 border-2 border-slate-200 dark:border-slate-700 focus:border-pink-500 outline-none transition-all" placeholder="0" oninput="calculateDiscount()">
                            </div>
                            <div>
                                <label class="block text-xs font-bold text-slate-500 uppercase mb-2">Discount (%)</label>
                                <input type="number" id="disc-percent" class="w-full p-4 rounded-xl text-lg font-bold bg-slate-50 dark:bg-slate-800 border-2 border-slate-200 dark:border-slate-700 focus:border-pink-500 outline-none transition-all" placeholder="0" oninput="calculateDiscount()">
                                <div class="flex gap-2 mt-2 flex-wrap">
                                    <button onclick="setDiscPercent(10)" class="px-3 py-1 text-xs rounded-lg bg-slate-100 dark:bg-slate-800 hover:bg-pink-100 hover:text-pink-600 transition-all">10%</button>
                                    <button onclick="setDiscPercent(20)" class="px-3 py-1 text-xs rounded-lg bg-slate-100 dark:bg-slate-800 hover:bg-pink-100 hover:text-pink-600 transition-all">20%</button>
                                    <button onclick="setDiscPercent(25)" class="px-3 py-1 text-xs rounded-lg bg-slate-100 dark:bg-slate-800 hover:bg-pink-100 hover:text-pink-600 transition-all">25%</button>
                                    <button onclick="setDiscPercent(50)" class="px-3 py-1 text-xs rounded-lg bg-slate-100 dark:bg-slate-800 hover:bg-pink-100 hover:text-pink-600 transition-all">50%</button>
                                </div>
                            </div>
                        </div>
                        <div class="bg-gradient-to-br from-pink-50 to-rose-50 dark:from-pink-900/20 dark:to-rose-900/20 p-5 rounded-2xl border border-pink-200 dark:border-pink-800/50">
                            <h3 class="text-sm font-bold text-pink-600 uppercase mb-4">Result</h3>
                            <div class="space-y-3">
                                <div class="flex justify-between items-center">
                                    <span class="text-slate-600 dark:text-slate-400">Original Price:</span>
                                    <span id="disc-result-original" class="text-lg font-bold text-slate-800 dark:text-white">₹0.00</span>
                                </div>
                                <div class="flex justify-between items-center">
                                    <span class="text-slate-600 dark:text-slate-400">You Save:</span>
                                    <span id="disc-result-save" class="text-lg font-bold text-pink-600">₹0.00</span>
                                </div>
                                <div class="border-t border-pink-200 dark:border-pink-800 pt-3 flex justify-between items-center">
                                    <span class="text-slate-800 dark:text-white font-bold">Final Price:</span>
                                    <span id="disc-result-final" class="text-2xl font-bold text-green-600">₹0.00</span>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- Percentage Mode -->
                    <div id="discount-panel-percent" class="hidden grid md:grid-cols-2 gap-6">
                        <div class="space-y-4">
                            <div>
                                <label class="block text-xs font-bold text-slate-500 uppercase mb-2">Value</label>
                                <input type="number" id="perc-value" class="w-full p-4 rounded-xl text-lg font-bold bg-slate-50 dark:bg-slate-800 border-2 border-slate-200 dark:border-slate-700 focus:border-blue-500 outline-none transition-all" placeholder="0" oninput="calculatePercent()">
                            </div>
                            <div>
                                <label class="block text-xs font-bold text-slate-500 uppercase mb-2">Total / Base</label>
                                <input type="number" id="perc-total" class="w-full p-4 rounded-xl text-lg font-bold bg-slate-50 dark:bg-slate-800 border-2 border-slate-200 dark:border-slate-700 focus:border-blue-500 outline-none transition-all" placeholder="0" oninput="calculatePercent()">
                            </div>
                        </div>
                        <div class="bg-gradient-to-br from-blue-50 to-indigo-50 dark:from-blue-900/20 dark:to-indigo-900/20 p-5 rounded-2xl border border-blue-200 dark:border-blue-800/50 flex items-center justify-center">
                            <div class="text-center">
                                <p class="text-slate-500 mb-2">Percentage</p>
                                <span id="perc-result" class="text-5xl font-bold text-blue-600">0%</span>
                            </div>
                        </div>
                    </div>
                    
                    <!-- Marks Mode -->
                    <div id="discount-panel-marks" class="hidden grid md:grid-cols-2 gap-6">
                        <div class="space-y-4">
                            <div>
                                <label class="block text-xs font-bold text-slate-500 uppercase mb-2">Marks Obtained</label>
                                <input type="number" id="marks-obtained" class="w-full p-4 rounded-xl text-lg font-bold bg-slate-50 dark:bg-slate-800 border-2 border-slate-200 dark:border-slate-700 focus:border-green-500 outline-none transition-all" placeholder="0" oninput="calculateMarks()">
                            </div>
                            <div>
                                <label class="block text-xs font-bold text-slate-500 uppercase mb-2">Total Marks</label>
                                <input type="number" id="marks-total" class="w-full p-4 rounded-xl text-lg font-bold bg-slate-50 dark:bg-slate-800 border-2 border-slate-200 dark:border-slate-700 focus:border-green-500 outline-none transition-all" placeholder="100" value="100" oninput="calculateMarks()">
                            </div>
                        </div>
                        <div class="bg-gradient-to-br from-green-50 to-emerald-50 dark:from-green-900/20 dark:to-emerald-900/20 p-5 rounded-2xl border border-green-200 dark:border-green-800/50">
                            <h3 class="text-sm font-bold text-green-600 uppercase mb-4">Result</h3>
                            <div class="text-center mb-4">
                                <span id="marks-percent" class="text-4xl font-bold text-green-600">0%</span>
                            </div>
                            <div class="flex justify-center">
                                <span id="marks-grade" class="px-4 py-2 rounded-full text-lg font-bold bg-slate-200 text-slate-600">-</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- BMI Calculator -->
            <div id="calc-bmi" class="calc-section hidden">
                <div class="bg-white dark:bg-slate-900 rounded-3xl p-6 shadow-xl border border-slate-100 dark:border-slate-800 mb-6">
                    <div class="flex items-center gap-3 mb-6">
                        <span class="text-3xl">⚖️</span>
                        <div>
                            <h2 class="text-xl font-bold text-slate-800 dark:text-white">BMI Calculator</h2>
                            <p class="text-sm text-slate-500">Calculate Body Mass Index from height & weight</p>
                        </div>
                    </div>
                    
                    <div class="grid md:grid-cols-2 gap-6">
                        <div class="space-y-4">
                            <div>
                                <label class="block text-xs font-bold text-slate-500 uppercase mb-2">Height</label>
                                <div class="flex gap-2">
                                    <div class="flex-1">
                                        <input type="number" id="bmi-height-ft" class="w-full p-4 rounded-xl text-lg font-bold bg-slate-50 dark:bg-slate-800 border-2 border-slate-200 dark:border-slate-700 focus:border-purple-500 outline-none transition-all" placeholder="5" oninput="calculateBmi()">
                                        <span class="text-xs text-slate-400 mt-1 block text-center">Feet</span>
                                    </div>
                                    <div class="flex-1">
                                        <input type="number" id="bmi-height-in" class="w-full p-4 rounded-xl text-lg font-bold bg-slate-50 dark:bg-slate-800 border-2 border-slate-200 dark:border-slate-700 focus:border-purple-500 outline-none transition-all" placeholder="6" oninput="calculateBmi()">
                                        <span class="text-xs text-slate-400 mt-1 block text-center">Inches</span>
                                    </div>
                                </div>
                                <p class="text-xs text-slate-400 mt-2">Or enter in cm:</p>
                                <input type="number" id="bmi-height-cm" class="w-full p-3 rounded-xl bg-slate-50 dark:bg-slate-800 border border-slate-200 dark:border-slate-700 focus:border-purple-500 outline-none transition-all" placeholder="170 cm" oninput="calculateBmiFromCm()">
                            </div>
                            <div>
                                <label class="block text-xs font-bold text-slate-500 uppercase mb-2">Weight (kg)</label>
                                <input type="number" id="bmi-weight" class="w-full p-4 rounded-xl text-lg font-bold bg-slate-50 dark:bg-slate-800 border-2 border-slate-200 dark:border-slate-700 focus:border-purple-500 outline-none transition-all" placeholder="70" oninput="calculateBmi()">
                            </div>
                        </div>
                        
                        <div class="bg-gradient-to-br from-purple-50 to-violet-50 dark:from-purple-900/20 dark:to-violet-900/20 p-5 rounded-2xl border border-purple-200 dark:border-purple-800/50">
                            <h3 class="text-sm font-bold text-purple-600 uppercase mb-4">Your BMI</h3>
                            <div class="text-center mb-6">
                                <span id="bmi-result" class="text-5xl font-bold text-purple-600">0.0</span>
                                <p id="bmi-category" class="text-lg font-medium text-slate-600 dark:text-slate-400 mt-2">Enter your details</p>
                            </div>
                            
                            <!-- BMI Scale -->
                            <div class="mb-4">
                                <div class="bmi-bar w-full relative">
                                    <div id="bmi-indicator" class="absolute w-3 h-3 bg-white border-2 border-slate-800 rounded-full -top-0.5 transition-all" style="left: 0%"></div>
                                </div>
                                <div class="flex justify-between text-xs text-slate-500 mt-2">
                                    <span>Underweight</span>
                                    <span>Normal</span>
                                    <span>Overweight</span>
                                    <span>Obese</span>
                                </div>
                            </div>
                            
                            <!-- BMI Categories -->
                            <div class="grid grid-cols-2 gap-2 text-xs">
                                <div class="p-2 rounded-lg bg-blue-100 dark:bg-blue-900/30 text-blue-700 dark:text-blue-400">
                                    <strong>&lt; 18.5</strong> Underweight
                                </div>
                                <div class="p-2 rounded-lg bg-green-100 dark:bg-green-900/30 text-green-700 dark:text-green-400">
                                    <strong>18.5 - 24.9</strong> Normal
                                </div>
                                <div class="p-2 rounded-lg bg-yellow-100 dark:bg-yellow-900/30 text-yellow-700 dark:text-yellow-400">
                                    <strong>25 - 29.9</strong> Overweight
                                </div>
                                <div class="p-2 rounded-lg bg-red-100 dark:bg-red-900/30 text-red-700 dark:text-red-400">
                                    <strong>≥ 30</strong> Obese
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- EMI Calculator -->
            <div id="calc-emi" class="calc-section hidden">
                <div class="bg-white dark:bg-slate-900 rounded-3xl p-6 shadow-xl border border-slate-100 dark:border-slate-800 mb-6">
                    <div class="flex items-center gap-3 mb-6">
                        <span class="text-3xl">🏦</span>
                        <div>
                            <h2 class="text-xl font-bold text-slate-800 dark:text-white">EMI Calculator</h2>
                            <p class="text-sm text-slate-500">Calculate Equated Monthly Installment for loans</p>
                        </div>
                    </div>
                    
                    <div class="grid md:grid-cols-2 gap-6">
                        <div class="space-y-4">
                            <div>
                                <label class="block text-xs font-bold text-slate-500 uppercase mb-2">Loan Amount (₹)</label>
                                <input type="number" id="emi-principal" class="w-full p-4 rounded-xl text-lg font-bold bg-slate-50 dark:bg-slate-800 border-2 border-slate-200 dark:border-slate-700 focus:border-indigo-500 outline-none transition-all" placeholder="500000" oninput="calculateEmi()">
                                <div class="flex gap-2 mt-2 flex-wrap">
                                    <button onclick="setEmiPrincipal(100000)" class="px-3 py-1 text-xs rounded-lg bg-slate-100 dark:bg-slate-800 hover:bg-indigo-100 hover:text-indigo-600 transition-all">1L</button>
                                    <button onclick="setEmiPrincipal(500000)" class="px-3 py-1 text-xs rounded-lg bg-slate-100 dark:bg-slate-800 hover:bg-indigo-100 hover:text-indigo-600 transition-all">5L</button>
                                    <button onclick="setEmiPrincipal(1000000)" class="px-3 py-1 text-xs rounded-lg bg-slate-100 dark:bg-slate-800 hover:bg-indigo-100 hover:text-indigo-600 transition-all">10L</button>
                                    <button onclick="setEmiPrincipal(2500000)" class="px-3 py-1 text-xs rounded-lg bg-slate-100 dark:bg-slate-800 hover:bg-indigo-100 hover:text-indigo-600 transition-all">25L</button>
                                    <button onclick="setEmiPrincipal(5000000)" class="px-3 py-1 text-xs rounded-lg bg-slate-100 dark:bg-slate-800 hover:bg-indigo-100 hover:text-indigo-600 transition-all">50L</button>
                                </div>
                            </div>
                            <div>
                                <label class="block text-xs font-bold text-slate-500 uppercase mb-2">Interest Rate (% per year)</label>
                                <input type="number" id="emi-rate" class="w-full p-4 rounded-xl text-lg font-bold bg-slate-50 dark:bg-slate-800 border-2 border-slate-200 dark:border-slate-700 focus:border-indigo-500 outline-none transition-all" placeholder="8.5" step="0.1" oninput="calculateEmi()">
                                <div class="flex gap-2 mt-2 flex-wrap">
                                    <button onclick="setEmiRate(7)" class="px-3 py-1 text-xs rounded-lg bg-slate-100 dark:bg-slate-800 hover:bg-indigo-100 hover:text-indigo-600 transition-all">7%</button>
                                    <button onclick="setEmiRate(8.5)" class="px-3 py-1 text-xs rounded-lg bg-slate-100 dark:bg-slate-800 hover:bg-indigo-100 hover:text-indigo-600 transition-all">8.5%</button>
                                    <button onclick="setEmiRate(10)" class="px-3 py-1 text-xs rounded-lg bg-slate-100 dark:bg-slate-800 hover:bg-indigo-100 hover:text-indigo-600 transition-all">10%</button>
                                    <button onclick="setEmiRate(12)" class="px-3 py-1 text-xs rounded-lg bg-slate-100 dark:bg-slate-800 hover:bg-indigo-100 hover:text-indigo-600 transition-all">12%</button>
                                </div>
                            </div>
                            <div>
                                <label class="block text-xs font-bold text-slate-500 uppercase mb-2">Loan Tenure</label>
                                <div class="flex gap-2">
                                    <input type="number" id="emi-tenure" class="flex-1 p-4 rounded-xl text-lg font-bold bg-slate-50 dark:bg-slate-800 border-2 border-slate-200 dark:border-slate-700 focus:border-indigo-500 outline-none transition-all" placeholder="5" oninput="calculateEmi()">
                                    <select id="emi-tenure-type" class="p-4 rounded-xl bg-slate-50 dark:bg-slate-800 border-2 border-slate-200 dark:border-slate-700" onchange="calculateEmi()">
                                        <option value="years">Years</option>
                                        <option value="months">Months</option>
                                    </select>
                                </div>
                            </div>
                        </div>
                        
                        <div class="bg-gradient-to-br from-indigo-50 to-violet-50 dark:from-indigo-900/20 dark:to-violet-900/20 p-5 rounded-2xl border border-indigo-200 dark:border-indigo-800/50">
                            <h3 class="text-sm font-bold text-indigo-600 uppercase mb-4">EMI Result</h3>
                            <div class="text-center mb-6">
                                <p class="text-slate-500 text-sm mb-1">Monthly EMI</p>
                                <span id="emi-result" class="text-4xl font-bold text-indigo-600">₹0</span>
                            </div>
                            <div class="space-y-3">
                                <div class="flex justify-between items-center">
                                    <span class="text-slate-600 dark:text-slate-400">Principal Amount:</span>
                                    <span id="emi-result-principal" class="text-lg font-bold text-slate-800 dark:text-white">₹0</span>
                                </div>
                                <div class="flex justify-between items-center">
                                    <span class="text-slate-600 dark:text-slate-400">Total Interest:</span>
                                    <span id="emi-result-interest" class="text-lg font-bold text-red-500">₹0</span>
                                </div>
                                <div class="border-t border-indigo-200 dark:border-indigo-800 pt-3 flex justify-between items-center">
                                    <span class="text-slate-800 dark:text-white font-bold">Total Payable:</span>
                                    <span id="emi-result-total" class="text-2xl font-bold text-green-600">₹0</span>
                                </div>
                            </div>
                            
                            <!-- Visual breakdown -->
                            <div class="mt-4 pt-4 border-t border-indigo-200 dark:border-indigo-800">
                                <div class="flex gap-2 h-4 rounded-full overflow-hidden">
                                    <div id="emi-bar-principal" class="bg-indigo-500 transition-all" style="width: 50%"></div>
                                    <div id="emi-bar-interest" class="bg-red-400 transition-all" style="width: 50%"></div>
                                </div>
                                <div class="flex justify-between text-xs mt-2">
                                    <span class="text-indigo-600">● Principal</span>
                                    <span class="text-red-500">● Interest</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Inflation Calculator -->
            <div id="calc-inflation" class="calc-section hidden">
                <div class="bg-white dark:bg-slate-900 rounded-3xl p-6 shadow-xl border border-slate-100 dark:border-slate-800 mb-6">
                    <div class="flex items-center gap-3 mb-6">
                        <span class="text-3xl">📈</span>
                        <div>
                            <h2 class="text-xl font-bold text-slate-800 dark:text-white">Inflation Calculator</h2>
                            <p class="text-sm text-slate-500">Calculate future value or past purchasing power</p>
                        </div>
                    </div>
                    
                    <!-- Mode Toggle -->
                    <div class="flex gap-2 mb-6">
                        <button onclick="setInflationMode('future')" id="inf-mode-future" class="flex-1 p-3 rounded-xl font-medium text-sm border-2 transition-all bg-teal-50 dark:bg-teal-900/20 border-teal-500 text-teal-700 dark:text-teal-400">
                            📈 Future Value
                        </button>
                        <button onclick="setInflationMode('past')" id="inf-mode-past" class="flex-1 p-3 rounded-xl font-medium text-sm border-2 transition-all bg-slate-50 dark:bg-slate-800 border-slate-200 dark:border-slate-700 text-slate-600 dark:text-slate-400">
                            ⏪ Past Purchasing Power
                        </button>
                    </div>
                    
                    <div class="grid md:grid-cols-2 gap-6">
                        <div class="space-y-4">
                            <div>
                                <label class="block text-xs font-bold text-slate-500 uppercase mb-2" id="inf-amount-label">Current Amount (₹)</label>
                                <input type="number" id="inf-amount" class="w-full p-4 rounded-xl text-lg font-bold bg-slate-50 dark:bg-slate-800 border-2 border-slate-200 dark:border-slate-700 focus:border-teal-500 outline-none transition-all" placeholder="100000" oninput="calculateInflation()">
                            </div>
                            <div>
                                <label class="block text-xs font-bold text-slate-500 uppercase mb-2">Inflation Rate (% per year)</label>
                                <input type="number" id="inf-rate" class="w-full p-4 rounded-xl text-lg font-bold bg-slate-50 dark:bg-slate-800 border-2 border-slate-200 dark:border-slate-700 focus:border-teal-500 outline-none transition-all" placeholder="6" step="0.1" value="6" oninput="calculateInflation()">
                                <div class="flex gap-2 mt-2 flex-wrap">
                                    <button onclick="setInfRate(4)" class="px-3 py-1 text-xs rounded-lg bg-slate-100 dark:bg-slate-800 hover:bg-teal-100 hover:text-teal-600 transition-all">4%</button>
                                    <button onclick="setInfRate(5)" class="px-3 py-1 text-xs rounded-lg bg-slate-100 dark:bg-slate-800 hover:bg-teal-100 hover:text-teal-600 transition-all">5%</button>
                                    <button onclick="setInfRate(6)" class="px-3 py-1 text-xs rounded-lg bg-teal-100 dark:bg-teal-900/30 text-teal-600 font-bold">6%</button>
                                    <button onclick="setInfRate(7)" class="px-3 py-1 text-xs rounded-lg bg-slate-100 dark:bg-slate-800 hover:bg-teal-100 hover:text-teal-600 transition-all">7%</button>
                                    <button onclick="setInfRate(8)" class="px-3 py-1 text-xs rounded-lg bg-slate-100 dark:bg-slate-800 hover:bg-teal-100 hover:text-teal-600 transition-all">8%</button>
                                </div>
                            </div>
                            <div>
                                <label class="block text-xs font-bold text-slate-500 uppercase mb-2">Time Period (Years)</label>
                                <input type="number" id="inf-years" class="w-full p-4 rounded-xl text-lg font-bold bg-slate-50 dark:bg-slate-800 border-2 border-slate-200 dark:border-slate-700 focus:border-teal-500 outline-none transition-all" placeholder="10" oninput="calculateInflation()">
                                <div class="flex gap-2 mt-2 flex-wrap">
                                    <button onclick="setInfYears(5)" class="px-3 py-1 text-xs rounded-lg bg-slate-100 dark:bg-slate-800 hover:bg-teal-100 hover:text-teal-600 transition-all">5Y</button>
                                    <button onclick="setInfYears(10)" class="px-3 py-1 text-xs rounded-lg bg-slate-100 dark:bg-slate-800 hover:bg-teal-100 hover:text-teal-600 transition-all">10Y</button>
                                    <button onclick="setInfYears(15)" class="px-3 py-1 text-xs rounded-lg bg-slate-100 dark:bg-slate-800 hover:bg-teal-100 hover:text-teal-600 transition-all">15Y</button>
                                    <button onclick="setInfYears(20)" class="px-3 py-1 text-xs rounded-lg bg-slate-100 dark:bg-slate-800 hover:bg-teal-100 hover:text-teal-600 transition-all">20Y</button>
                                </div>
                            </div>
                        </div>
                        
                        <div class="bg-gradient-to-br from-teal-50 to-cyan-50 dark:from-teal-900/20 dark:to-cyan-900/20 p-5 rounded-2xl border border-teal-200 dark:border-teal-800/50">
                            <h3 class="text-sm font-bold text-teal-600 uppercase mb-4">Result</h3>
                            <div class="text-center mb-4">
                                <p id="inf-result-label" class="text-slate-500 text-sm mb-1">Future Value</p>
                                <span id="inf-result" class="text-4xl font-bold text-teal-600">₹0</span>
                            </div>
                            <div class="space-y-3">
                                <div class="flex justify-between items-center">
                                    <span class="text-slate-600 dark:text-slate-400">Original Amount:</span>
                                    <span id="inf-result-original" class="text-lg font-bold text-slate-800 dark:text-white">₹0</span>
                                </div>
                                <div class="flex justify-between items-center">
                                    <span id="inf-diff-label" class="text-slate-600 dark:text-slate-400">Inflation Impact:</span>
                                    <span id="inf-result-diff" class="text-lg font-bold text-red-500">₹0</span>
                                </div>
                                <div class="flex justify-between items-center">
                                    <span class="text-slate-600 dark:text-slate-400">Total % Change:</span>
                                    <span id="inf-result-percent" class="text-lg font-bold text-teal-600">0%</span>
                                </div>
                            </div>
                            
                            <div class="mt-4 p-3 bg-teal-100 dark:bg-teal-900/40 rounded-xl">
                                <p id="inf-explanation" class="text-sm text-teal-800 dark:text-teal-300">Enter values to see the calculation</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- CGPA Calculator -->
            <div id="calc-cgpa" class="calc-section hidden">
                <div class="bg-white dark:bg-slate-900 rounded-3xl p-6 shadow-xl border border-slate-100 dark:border-slate-800 mb-6">
                    <div class="flex items-center justify-between mb-6">
                        <div class="flex items-center gap-3">
                            <span class="text-3xl">🎓</span>
                            <div>
                                <h2 class="text-xl font-bold text-slate-800 dark:text-white">CGPA Calculator</h2>
                                <p class="text-sm text-slate-500">University Marksheet Grade Point Calculator</p>
                            </div>
                        </div>
                        <select id="cgpa-scale" class="px-4 py-2 rounded-xl bg-slate-50 dark:bg-slate-800 border-2 border-slate-200 dark:border-slate-700 text-sm font-medium" onchange="calculateCgpa()">
                            <option value="10">10-Point Scale (India)</option>
                            <option value="4">4-Point Scale (US)</option>
                        </select>
                    </div>
                    
                    <!-- Subjects Table -->
                    <div class="overflow-x-auto mb-4">
                        <table class="w-full">
                            <thead>
                                <tr class="text-xs font-bold text-slate-500 uppercase">
                                    <th class="text-left p-2 w-8">#</th>
                                    <th class="text-left p-2">Subject / Course Name</th>
                                    <th class="text-center p-2 w-24">Credits</th>
                                    <th class="text-center p-2 w-32">Grade</th>
                                    <th class="text-center p-2 w-24">Points</th>
                                    <th class="text-center p-2 w-16"></th>
                                </tr>
                            </thead>
                            <tbody id="cgpa-subjects">
                                <!-- Rows added dynamically -->
                            </tbody>
                        </table>
                    </div>
                    
                    <button onclick="addCgpaSubject()" class="w-full p-3 rounded-xl border-2 border-dashed border-slate-300 dark:border-slate-700 text-slate-500 hover:border-rose-400 hover:text-rose-500 transition-all flex items-center justify-center gap-2 mb-6">
                        <i data-lucide="plus" class="w-4 h-4"></i> Add Subject
                    </button>
                    
                    <!-- Result -->
                    <div class="grid md:grid-cols-3 gap-4">
                        <div class="bg-gradient-to-br from-rose-50 to-pink-50 dark:from-rose-900/20 dark:to-pink-900/20 p-5 rounded-2xl border border-rose-200 dark:border-rose-800/50 text-center">
                            <p class="text-slate-500 text-sm mb-1">Total Credits</p>
                            <span id="cgpa-total-credits" class="text-3xl font-bold text-rose-600">0</span>
                        </div>
                        <div class="bg-gradient-to-br from-violet-50 to-purple-50 dark:from-violet-900/20 dark:to-purple-900/20 p-5 rounded-2xl border border-violet-200 dark:border-violet-800/50 text-center">
                            <p class="text-slate-500 text-sm mb-1">Total Grade Points</p>
                            <span id="cgpa-total-points" class="text-3xl font-bold text-violet-600">0</span>
                        </div>
                        <div class="bg-gradient-to-br from-emerald-50 to-green-50 dark:from-emerald-900/20 dark:to-green-900/20 p-5 rounded-2xl border border-emerald-200 dark:border-emerald-800/50 text-center">
                            <p class="text-slate-500 text-sm mb-1">Your CGPA</p>
                            <span id="cgpa-result" class="text-4xl font-bold text-emerald-600">0.00</span>
                            <p id="cgpa-classification" class="text-sm font-medium text-emerald-700 mt-1">-</p>
                        </div>
                    </div>
                    
                    <!-- Grade Reference -->
                    <div class="mt-6 pt-6 border-t border-slate-100 dark:border-slate-800">
                        <p class="text-xs font-bold text-slate-500 uppercase mb-3">Grade Reference (10-Point Scale)</p>
                        <div class="flex flex-wrap gap-2" id="cgpa-grade-ref">
                            <span class="px-3 py-1 rounded-lg bg-emerald-100 text-emerald-700 text-xs font-medium">O (10) = 90-100%</span>
                            <span class="px-3 py-1 rounded-lg bg-green-100 text-green-700 text-xs font-medium">A+ (9) = 80-89%</span>
                            <span class="px-3 py-1 rounded-lg bg-blue-100 text-blue-700 text-xs font-medium">A (8) = 70-79%</span>
                            <span class="px-3 py-1 rounded-lg bg-cyan-100 text-cyan-700 text-xs font-medium">B+ (7) = 60-69%</span>
                            <span class="px-3 py-1 rounded-lg bg-yellow-100 text-yellow-700 text-xs font-medium">B (6) = 50-59%</span>
                            <span class="px-3 py-1 rounded-lg bg-orange-100 text-orange-700 text-xs font-medium">C (5) = 45-49%</span>
                            <span class="px-3 py-1 rounded-lg bg-red-100 text-red-700 text-xs font-medium">P (4) = 40-44%</span>
                            <span class="px-3 py-1 rounded-lg bg-slate-200 text-slate-600 text-xs font-medium">F (0) = Below 40%</span>
                        </div>
                    </div>
                </div>
            </div>

            <!-- SEO Content -->
            <div class="bg-white dark:bg-slate-900 rounded-3xl p-6 shadow-lg border border-slate-100 dark:border-slate-800">
                <div class="grid md:grid-cols-6 gap-4">
                    <div>
                        <h2 class="text-base font-bold text-slate-800 dark:text-white mb-2 flex items-center gap-2">
                            🧾 GST
                        </h2>
                        <p class="text-xs text-slate-600 dark:text-slate-400 leading-relaxed">
                            Indian GST with CGST & SGST.
                        </p>
                    </div>
                    <div>
                        <h2 class="text-base font-bold text-slate-800 dark:text-white mb-2 flex items-center gap-2">
                            🏷️ Discount
                        </h2>
                        <p class="text-xs text-slate-600 dark:text-slate-400 leading-relaxed">
                            Price discounts & percentages.
                        </p>
                    </div>
                    <div>
                        <h2 class="text-base font-bold text-slate-800 dark:text-white mb-2 flex items-center gap-2">
                            ⚖️ BMI
                        </h2>
                        <p class="text-xs text-slate-600 dark:text-slate-400 leading-relaxed">
                            Body Mass Index calculator.
                        </p>
                    </div>
                    <div>
                        <h2 class="text-base font-bold text-slate-800 dark:text-white mb-2 flex items-center gap-2">
                            🏦 EMI
                        </h2>
                        <p class="text-xs text-slate-600 dark:text-slate-400 leading-relaxed">
                            Loan EMI & interest.
                        </p>
                    </div>
                    <div>
                        <h2 class="text-base font-bold text-slate-800 dark:text-white mb-2 flex items-center gap-2">
                            📈 Inflation
                        </h2>
                        <p class="text-xs text-slate-600 dark:text-slate-400 leading-relaxed">
                            Future value calculator.
                        </p>
                    </div>
                    <div>
                        <h2 class="text-base font-bold text-slate-800 dark:text-white mb-2 flex items-center gap-2">
                            🎓 CGPA
                        </h2>
                        <p class="text-xs text-slate-600 dark:text-slate-400 leading-relaxed">
                            University grade points.
                        </p>
                    </div>
                </div>
                
                <!-- Related Tags -->
                <div class="mt-6 pt-6 border-t border-slate-100 dark:border-slate-800">
                    <div class="flex flex-wrap gap-2">
                        <span class="px-3 py-1.5 bg-slate-100 dark:bg-slate-800 text-slate-600 dark:text-slate-400 rounded-full text-xs">#GSTCalculator</span>
                        <span class="px-3 py-1.5 bg-slate-100 dark:bg-slate-800 text-slate-600 dark:text-slate-400 rounded-full text-xs">#TaxCalculator</span>
                        <span class="px-3 py-1.5 bg-slate-100 dark:bg-slate-800 text-slate-600 dark:text-slate-400 rounded-full text-xs">#DiscountCalculator</span>
                        <span class="px-3 py-1.5 bg-slate-100 dark:bg-slate-800 text-slate-600 dark:text-slate-400 rounded-full text-xs">#PercentageCalculator</span>
                        <span class="px-3 py-1.5 bg-slate-100 dark:bg-slate-800 text-slate-600 dark:text-slate-400 rounded-full text-xs">#BMICalculator</span>
                        <span class="px-3 py-1.5 bg-slate-100 dark:bg-slate-800 text-slate-600 dark:text-slate-400 rounded-full text-xs">#IndianGST</span>
                        <span class="px-3 py-1.5 bg-slate-100 dark:bg-slate-800 text-slate-600 dark:text-slate-400 rounded-full text-xs">#MarksCalculator</span>
                        <span class="px-3 py-1.5 bg-slate-100 dark:bg-slate-800 text-slate-600 dark:text-slate-400 rounded-full text-xs">#EMICalculator</span>
                        <span class="px-3 py-1.5 bg-slate-100 dark:bg-slate-800 text-slate-600 dark:text-slate-400 rounded-full text-xs">#LoanCalculator</span>
                        <span class="px-3 py-1.5 bg-slate-100 dark:bg-slate-800 text-slate-600 dark:text-slate-400 rounded-full text-xs">#InflationCalculator</span>
                        <span class="px-3 py-1.5 bg-slate-100 dark:bg-slate-800 text-slate-600 dark:text-slate-400 rounded-full text-xs">#CGPACalculator</span>
                        <span class="px-3 py-1.5 bg-slate-100 dark:bg-slate-800 text-slate-600 dark:text-slate-400 rounded-full text-xs">#GradePointAverage</span>
                    </div>
                </div>
            </div>
        </div>
    </main>

    
    <script src="js/common.js"></script>
    <script>
        let gstMode = 'add';
        let gstRate = 18;
        let discountMode = 'discount';
        
        // Tab switching
        function showCalc(calc) {
            document.querySelectorAll('.calc-section').forEach(el => el.classList.add('hidden'));
            document.querySelectorAll('.calc-tab').forEach(el => el.classList.remove('active'));
            document.getElementById('calc-' + calc).classList.remove('hidden');
            document.getElementById('tab-' + calc).classList.add('active');
        }
        
        // ========== GST Calculator ==========
        function setGstMode(mode) {
            gstMode = mode;
            document.getElementById('gst-mode-add').className = mode === 'add'
                ? 'flex-1 p-3 rounded-xl font-medium text-sm border-2 transition-all bg-amber-50 dark:bg-amber-900/20 border-amber-500 text-amber-700 dark:text-amber-400'
                : 'flex-1 p-3 rounded-xl font-medium text-sm border-2 transition-all bg-slate-50 dark:bg-slate-800 border-slate-200 dark:border-slate-700 text-slate-600 dark:text-slate-400';
            document.getElementById('gst-mode-reverse').className = mode === 'reverse'
                ? 'flex-1 p-3 rounded-xl font-medium text-sm border-2 transition-all bg-amber-50 dark:bg-amber-900/20 border-amber-500 text-amber-700 dark:text-amber-400'
                : 'flex-1 p-3 rounded-xl font-medium text-sm border-2 transition-all bg-slate-50 dark:bg-slate-800 border-slate-200 dark:border-slate-700 text-slate-600 dark:text-slate-400';
            document.getElementById('gst-amount-label').innerText = mode === 'add' ? 'Base Amount (₹)' : 'Total Amount (₹)';
            calculateGst();
        }
        
        function setGstRate(rate) {
            gstRate = parseFloat(rate) || 0;
            document.querySelectorAll('.gst-rate').forEach(btn => {
                btn.className = 'gst-rate px-4 py-2 rounded-lg bg-slate-100 dark:bg-slate-800 text-slate-600 dark:text-slate-400 font-medium hover:bg-amber-100 hover:text-amber-600 transition-all';
            });
            if ([5, 12, 18, 28].includes(gstRate)) {
                event.target.className = 'gst-rate px-4 py-2 rounded-lg bg-amber-100 dark:bg-amber-900/30 text-amber-600 font-bold';
            }
            calculateGst();
        }
        
        function calculateGst() {
            const amount = parseFloat(document.getElementById('gst-amount').value) || 0;
            let base, cgst, sgst, total;
            
            const halfRate = gstRate / 2;
            document.getElementById('gst-cgst-rate').innerText = halfRate;
            document.getElementById('gst-sgst-rate').innerText = halfRate;
            
            if (gstMode === 'add') {
                base = amount;
                cgst = base * (halfRate / 100);
                sgst = base * (halfRate / 100);
                total = base + cgst + sgst;
            } else {
                total = amount;
                base = total / (1 + gstRate / 100);
                cgst = base * (halfRate / 100);
                sgst = base * (halfRate / 100);
            }
            
            document.getElementById('gst-result-base').innerText = '₹' + base.toFixed(2);
            document.getElementById('gst-result-cgst').innerText = '₹' + cgst.toFixed(2);
            document.getElementById('gst-result-sgst').innerText = '₹' + sgst.toFixed(2);
            document.getElementById('gst-result-total').innerText = '₹' + total.toFixed(2);
        }
        
        // ========== Discount Calculator ==========
        function setDiscountMode(mode) {
            discountMode = mode;
            ['discount', 'percent', 'marks'].forEach(m => {
                document.getElementById('disc-mode-' + m).className = m === mode
                    ? 'flex-1 min-w-[120px] p-3 rounded-xl font-medium text-sm border-2 transition-all bg-pink-50 dark:bg-pink-900/20 border-pink-500 text-pink-700 dark:text-pink-400'
                    : 'flex-1 min-w-[120px] p-3 rounded-xl font-medium text-sm border-2 transition-all bg-slate-50 dark:bg-slate-800 border-slate-200 dark:border-slate-700 text-slate-600 dark:text-slate-400';
                document.getElementById('discount-panel-' + m).classList.toggle('hidden', m !== mode);
            });
        }
        
        function setDiscPercent(p) {
            document.getElementById('disc-percent').value = p;
            calculateDiscount();
        }
        
        function calculateDiscount() {
            const original = parseFloat(document.getElementById('disc-original').value) || 0;
            const percent = parseFloat(document.getElementById('disc-percent').value) || 0;
            const save = original * (percent / 100);
            const final = original - save;
            
            document.getElementById('disc-result-original').innerText = '₹' + original.toFixed(2);
            document.getElementById('disc-result-save').innerText = '₹' + save.toFixed(2);
            document.getElementById('disc-result-final').innerText = '₹' + final.toFixed(2);
        }
        
        function calculatePercent() {
            const value = parseFloat(document.getElementById('perc-value').value) || 0;
            const total = parseFloat(document.getElementById('perc-total').value) || 0;
            const percent = total > 0 ? (value / total * 100) : 0;
            document.getElementById('perc-result').innerText = percent.toFixed(2) + '%';
        }
        
        function calculateMarks() {
            const obtained = parseFloat(document.getElementById('marks-obtained').value) || 0;
            const total = parseFloat(document.getElementById('marks-total').value) || 100;
            const percent = total > 0 ? (obtained / total * 100) : 0;
            
            let grade = '-', gradeClass = 'bg-slate-200 text-slate-600';
            if (percent >= 90) { grade = 'A+'; gradeClass = 'bg-green-500 text-white'; }
            else if (percent >= 80) { grade = 'A'; gradeClass = 'bg-green-400 text-white'; }
            else if (percent >= 70) { grade = 'B+'; gradeClass = 'bg-blue-500 text-white'; }
            else if (percent >= 60) { grade = 'B'; gradeClass = 'bg-blue-400 text-white'; }
            else if (percent >= 50) { grade = 'C'; gradeClass = 'bg-yellow-500 text-white'; }
            else if (percent >= 40) { grade = 'D'; gradeClass = 'bg-orange-500 text-white'; }
            else if (percent > 0) { grade = 'F'; gradeClass = 'bg-red-500 text-white'; }
            
            document.getElementById('marks-percent').innerText = percent.toFixed(1) + '%';
            document.getElementById('marks-grade').innerText = grade;
            document.getElementById('marks-grade').className = 'px-4 py-2 rounded-full text-lg font-bold ' + gradeClass;
        }
        
        // ========== BMI Calculator ==========
        function calculateBmi() {
            const ft = parseFloat(document.getElementById('bmi-height-ft').value) || 0;
            const inches = parseFloat(document.getElementById('bmi-height-in').value) || 0;
            const totalInches = (ft * 12) + inches;
            const cm = totalInches * 2.54;
            document.getElementById('bmi-height-cm').value = cm > 0 ? cm.toFixed(0) : '';
            computeBmi(cm);
        }
        
        function calculateBmiFromCm() {
            const cm = parseFloat(document.getElementById('bmi-height-cm').value) || 0;
            const totalInches = cm / 2.54;
            const ft = Math.floor(totalInches / 12);
            const inches = Math.round(totalInches % 12);
            document.getElementById('bmi-height-ft').value = ft > 0 ? ft : '';
            document.getElementById('bmi-height-in').value = inches > 0 ? inches : '';
            computeBmi(cm);
        }
        
        function computeBmi(heightCm) {
            const weight = parseFloat(document.getElementById('bmi-weight').value) || 0;
            const heightM = heightCm / 100;
            
            if (heightM <= 0 || weight <= 0) {
                document.getElementById('bmi-result').innerText = '0.0';
                document.getElementById('bmi-category').innerText = 'Enter your details';
                document.getElementById('bmi-indicator').style.left = '0%';
                return;
            }
            
            const bmi = weight / (heightM * heightM);
            document.getElementById('bmi-result').innerText = bmi.toFixed(1);
            
            let category, color, indicatorPos;
            if (bmi < 18.5) {
                category = 'Underweight'; color = 'text-blue-600'; indicatorPos = (bmi / 18.5) * 25;
            } else if (bmi < 25) {
                category = 'Normal Weight'; color = 'text-green-600'; indicatorPos = 25 + ((bmi - 18.5) / 6.5) * 25;
            } else if (bmi < 30) {
                category = 'Overweight'; color = 'text-yellow-600'; indicatorPos = 50 + ((bmi - 25) / 5) * 25;
            } else {
                category = 'Obese'; color = 'text-red-600'; indicatorPos = Math.min(100, 75 + ((bmi - 30) / 10) * 25);
            }
            
            document.getElementById('bmi-category').innerText = category;
            document.getElementById('bmi-category').className = 'text-lg font-bold ' + color + ' mt-2';
            document.getElementById('bmi-result').className = 'text-5xl font-bold ' + color;
            document.getElementById('bmi-indicator').style.left = indicatorPos + '%';
        }
        
        // ========== EMI Calculator ==========
        function setEmiPrincipal(val) {
            document.getElementById('emi-principal').value = val;
            calculateEmi();
        }
        
        function setEmiRate(val) {
            document.getElementById('emi-rate').value = val;
            calculateEmi();
        }
        
        function calculateEmi() {
            const principal = parseFloat(document.getElementById('emi-principal').value) || 0;
            const annualRate = parseFloat(document.getElementById('emi-rate').value) || 0;
            let tenure = parseFloat(document.getElementById('emi-tenure').value) || 0;
            const tenureType = document.getElementById('emi-tenure-type').value;
            
            // Convert to months
            const months = tenureType === 'years' ? tenure * 12 : tenure;
            
            if (principal <= 0 || annualRate <= 0 || months <= 0) {
                document.getElementById('emi-result').innerText = '₹0';
                document.getElementById('emi-result-principal').innerText = '₹0';
                document.getElementById('emi-result-interest').innerText = '₹0';
                document.getElementById('emi-result-total').innerText = '₹0';
                return;
            }
            
            const monthlyRate = annualRate / 12 / 100;
            const emi = principal * monthlyRate * Math.pow(1 + monthlyRate, months) / (Math.pow(1 + monthlyRate, months) - 1);
            const totalPayable = emi * months;
            const totalInterest = totalPayable - principal;
            
            document.getElementById('emi-result').innerText = '₹' + Math.round(emi).toLocaleString('en-IN');
            document.getElementById('emi-result-principal').innerText = '₹' + principal.toLocaleString('en-IN');
            document.getElementById('emi-result-interest').innerText = '₹' + Math.round(totalInterest).toLocaleString('en-IN');
            document.getElementById('emi-result-total').innerText = '₹' + Math.round(totalPayable).toLocaleString('en-IN');
            
            // Update visual bar
            const principalPercent = (principal / totalPayable) * 100;
            document.getElementById('emi-bar-principal').style.width = principalPercent + '%';
            document.getElementById('emi-bar-interest').style.width = (100 - principalPercent) + '%';
        }
        
        // ========== Inflation Calculator ==========
        let inflationMode = 'future';
        
        function setInflationMode(mode) {
            inflationMode = mode;
            document.getElementById('inf-mode-future').className = mode === 'future'
                ? 'flex-1 p-3 rounded-xl font-medium text-sm border-2 transition-all bg-teal-50 dark:bg-teal-900/20 border-teal-500 text-teal-700 dark:text-teal-400'
                : 'flex-1 p-3 rounded-xl font-medium text-sm border-2 transition-all bg-slate-50 dark:bg-slate-800 border-slate-200 dark:border-slate-700 text-slate-600 dark:text-slate-400';
            document.getElementById('inf-mode-past').className = mode === 'past'
                ? 'flex-1 p-3 rounded-xl font-medium text-sm border-2 transition-all bg-teal-50 dark:bg-teal-900/20 border-teal-500 text-teal-700 dark:text-teal-400'
                : 'flex-1 p-3 rounded-xl font-medium text-sm border-2 transition-all bg-slate-50 dark:bg-slate-800 border-slate-200 dark:border-slate-700 text-slate-600 dark:text-slate-400';
            
            document.getElementById('inf-amount-label').innerText = mode === 'future' ? 'Current Amount (₹)' : 'Amount from Past (₹)';
            document.getElementById('inf-result-label').innerText = mode === 'future' ? 'Future Value Needed' : 'Today\'s Purchasing Power';
            document.getElementById('inf-diff-label').innerText = mode === 'future' ? 'Extra Needed:' : 'Value Lost:';
            calculateInflation();
        }
        
        function setInfRate(val) {
            document.getElementById('inf-rate').value = val;
            calculateInflation();
        }
        
        function setInfYears(val) {
            document.getElementById('inf-years').value = val;
            calculateInflation();
        }
        
        function calculateInflation() {
            const amount = parseFloat(document.getElementById('inf-amount').value) || 0;
            const rate = parseFloat(document.getElementById('inf-rate').value) || 0;
            const years = parseFloat(document.getElementById('inf-years').value) || 0;
            
            if (amount <= 0 || years <= 0) {
                document.getElementById('inf-result').innerText = '₹0';
                document.getElementById('inf-result-original').innerText = '₹0';
                document.getElementById('inf-result-diff').innerText = '₹0';
                document.getElementById('inf-result-percent').innerText = '0%';
                document.getElementById('inf-explanation').innerText = 'Enter values to see the calculation';
                return;
            }
            
            let result, diff, explanation;
            const factor = Math.pow(1 + rate / 100, years);
            
            if (inflationMode === 'future') {
                // What will today's amount be worth in future (need more to maintain purchasing power)
                result = amount * factor;
                diff = result - amount;
                explanation = `To maintain the purchasing power of ₹${amount.toLocaleString('en-IN')} after ${years} years at ${rate}% inflation, you will need ₹${Math.round(result).toLocaleString('en-IN')}.`;
            } else {
                // What is the past amount worth today (purchasing power decreased)
                result = amount / factor;
                diff = amount - result;
                explanation = `₹${amount.toLocaleString('en-IN')} from ${years} years ago is equivalent to only ₹${Math.round(result).toLocaleString('en-IN')} in today's purchasing power at ${rate}% inflation.`;
            }
            
            const percentChange = ((factor - 1) * 100);
            
            document.getElementById('inf-result').innerText = '₹' + Math.round(result).toLocaleString('en-IN');
            document.getElementById('inf-result-original').innerText = '₹' + amount.toLocaleString('en-IN');
            document.getElementById('inf-result-diff').innerText = '₹' + Math.round(diff).toLocaleString('en-IN');
            document.getElementById('inf-result-percent').innerText = percentChange.toFixed(1) + '%';
            document.getElementById('inf-explanation').innerText = explanation;
        }
        
        // ========== CGPA Calculator ==========
        let cgpaSubjectId = 0;
        
        const grades10Point = [
            { label: 'O (Outstanding)', value: 10 },
            { label: 'A+ (Excellent)', value: 9 },
            { label: 'A (Very Good)', value: 8 },
            { label: 'B+ (Good)', value: 7 },
            { label: 'B (Above Avg)', value: 6 },
            { label: 'C (Average)', value: 5 },
            { label: 'P (Pass)', value: 4 },
            { label: 'F (Fail)', value: 0 }
        ];
        
        const grades4Point = [
            { label: 'A+ (4.0)', value: 4.0 },
            { label: 'A (4.0)', value: 4.0 },
            { label: 'A- (3.7)', value: 3.7 },
            { label: 'B+ (3.3)', value: 3.3 },
            { label: 'B (3.0)', value: 3.0 },
            { label: 'B- (2.7)', value: 2.7 },
            { label: 'C+ (2.3)', value: 2.3 },
            { label: 'C (2.0)', value: 2.0 },
            { label: 'C- (1.7)', value: 1.7 },
            { label: 'D+ (1.3)', value: 1.3 },
            { label: 'D (1.0)', value: 1.0 },
            { label: 'F (0.0)', value: 0 }
        ];
        
        function getGradeOptions() {
            const scale = document.getElementById('cgpa-scale').value;
            const grades = scale === '10' ? grades10Point : grades4Point;
            return grades.map(g => `<option value="${g.value}">${g.label}</option>`).join('');
        }
        
        function addCgpaSubject(name = '', credits = '', grade = '') {
            cgpaSubjectId++;
            const tbody = document.getElementById('cgpa-subjects');
            const row = document.createElement('tr');
            row.id = `cgpa-row-${cgpaSubjectId}`;
            row.className = 'border-b border-slate-100 dark:border-slate-800';
            row.innerHTML = `
                <td class="p-2 text-slate-400 text-sm">${cgpaSubjectId}</td>
                <td class="p-2">
                    <input type="text" class="w-full p-2 rounded-lg bg-slate-50 dark:bg-slate-800 border border-slate-200 dark:border-slate-700 text-sm" placeholder="e.g. Mathematics" value="${name}" oninput="calculateCgpa()">
                </td>
                <td class="p-2">
                    <input type="number" class="w-full p-2 rounded-lg bg-slate-50 dark:bg-slate-800 border border-slate-200 dark:border-slate-700 text-sm text-center cgpa-credits" placeholder="3" value="${credits}" min="1" max="10" oninput="calculateCgpa()">
                </td>
                <td class="p-2">
                    <select class="w-full p-2 rounded-lg bg-slate-50 dark:bg-slate-800 border border-slate-200 dark:border-slate-700 text-sm cgpa-grade" onchange="calculateCgpa()">
                        <option value="">Select</option>
                        ${getGradeOptions()}
                    </select>
                </td>
                <td class="p-2 text-center cgpa-points font-bold text-slate-600">-</td>
                <td class="p-2 text-center">
                    <button onclick="removeCgpaSubject(${cgpaSubjectId})" class="w-8 h-8 rounded-lg bg-red-50 text-red-500 hover:bg-red-100 transition-all flex items-center justify-center mx-auto">
                        <i data-lucide="trash-2" class="w-4 h-4"></i>
                    </button>
                </td>
            `;
            tbody.appendChild(row);
            lucide.createIcons();
            calculateCgpa();
        }
        
        function removeCgpaSubject(id) {
            const row = document.getElementById(`cgpa-row-${id}`);
            if (row) {
                row.remove();
                renumberCgpaRows();
                calculateCgpa();
            }
        }
        
        function renumberCgpaRows() {
            const rows = document.querySelectorAll('#cgpa-subjects tr');
            rows.forEach((row, index) => {
                row.querySelector('td:first-child').innerText = index + 1;
            });
        }
        
        function calculateCgpa() {
            const rows = document.querySelectorAll('#cgpa-subjects tr');
            let totalCredits = 0;
            let totalPoints = 0;
            const scale = parseFloat(document.getElementById('cgpa-scale').value);
            
            rows.forEach(row => {
                const creditsInput = row.querySelector('.cgpa-credits');
                const gradeSelect = row.querySelector('.cgpa-grade');
                const pointsCell = row.querySelector('.cgpa-points');
                
                const credits = parseFloat(creditsInput.value) || 0;
                const gradeValue = parseFloat(gradeSelect.value);
                
                if (credits > 0 && !isNaN(gradeValue)) {
                    const points = credits * gradeValue;
                    totalCredits += credits;
                    totalPoints += points;
                    pointsCell.innerText = points.toFixed(1);
                    pointsCell.className = 'p-2 text-center cgpa-points font-bold text-green-600';
                } else {
                    pointsCell.innerText = '-';
                    pointsCell.className = 'p-2 text-center cgpa-points font-bold text-slate-400';
                }
            });
            
            const cgpa = totalCredits > 0 ? (totalPoints / totalCredits) : 0;
            
            document.getElementById('cgpa-total-credits').innerText = totalCredits;
            document.getElementById('cgpa-total-points').innerText = totalPoints.toFixed(1);
            document.getElementById('cgpa-result').innerText = cgpa.toFixed(2);
            
            // Classification
            let classification = '-';
            if (scale === 10) {
                if (cgpa >= 9) classification = 'Outstanding';
                else if (cgpa >= 8) classification = 'Excellent';
                else if (cgpa >= 7) classification = 'Very Good';
                else if (cgpa >= 6) classification = 'Good';
                else if (cgpa >= 5) classification = 'Average';
                else if (cgpa >= 4) classification = 'Pass';
                else if (cgpa > 0) classification = 'Fail';
            } else {
                if (cgpa >= 3.7) classification = 'Summa Cum Laude';
                else if (cgpa >= 3.5) classification = 'Magna Cum Laude';
                else if (cgpa >= 3.0) classification = 'Cum Laude';
                else if (cgpa >= 2.0) classification = 'Good Standing';
                else if (cgpa >= 1.0) classification = 'Pass';
                else if (cgpa > 0) classification = 'Fail';
            }
            document.getElementById('cgpa-classification').innerText = classification;
        }
        
        function updateGradeOptions() {
            const selects = document.querySelectorAll('.cgpa-grade');
            selects.forEach(select => {
                const currentValue = select.value;
                select.innerHTML = `<option value="">Select</option>${getGradeOptions()}`;
                select.value = currentValue;
            });
            
            // Update grade reference
            const scale = document.getElementById('cgpa-scale').value;
            const refDiv = document.getElementById('cgpa-grade-ref');
            if (scale === '10') {
                refDiv.innerHTML = `
                    <span class="px-3 py-1 rounded-lg bg-emerald-100 text-emerald-700 text-xs font-medium">O (10) = 90-100%</span>
                    <span class="px-3 py-1 rounded-lg bg-green-100 text-green-700 text-xs font-medium">A+ (9) = 80-89%</span>
                    <span class="px-3 py-1 rounded-lg bg-blue-100 text-blue-700 text-xs font-medium">A (8) = 70-79%</span>
                    <span class="px-3 py-1 rounded-lg bg-cyan-100 text-cyan-700 text-xs font-medium">B+ (7) = 60-69%</span>
                    <span class="px-3 py-1 rounded-lg bg-yellow-100 text-yellow-700 text-xs font-medium">B (6) = 50-59%</span>
                    <span class="px-3 py-1 rounded-lg bg-orange-100 text-orange-700 text-xs font-medium">C (5) = 45-49%</span>
                    <span class="px-3 py-1 rounded-lg bg-red-100 text-red-700 text-xs font-medium">P (4) = 40-44%</span>
                    <span class="px-3 py-1 rounded-lg bg-slate-200 text-slate-600 text-xs font-medium">F (0) = Below 40%</span>
                `;
            } else {
                refDiv.innerHTML = `
                    <span class="px-3 py-1 rounded-lg bg-emerald-100 text-emerald-700 text-xs font-medium">A/A+ (4.0)</span>
                    <span class="px-3 py-1 rounded-lg bg-green-100 text-green-700 text-xs font-medium">A- (3.7)</span>
                    <span class="px-3 py-1 rounded-lg bg-blue-100 text-blue-700 text-xs font-medium">B+ (3.3)</span>
                    <span class="px-3 py-1 rounded-lg bg-cyan-100 text-cyan-700 text-xs font-medium">B (3.0)</span>
                    <span class="px-3 py-1 rounded-lg bg-yellow-100 text-yellow-700 text-xs font-medium">C+ (2.3)</span>
                    <span class="px-3 py-1 rounded-lg bg-orange-100 text-orange-700 text-xs font-medium">C (2.0)</span>
                    <span class="px-3 py-1 rounded-lg bg-red-100 text-red-700 text-xs font-medium">D (1.0)</span>
                    <span class="px-3 py-1 rounded-lg bg-slate-200 text-slate-600 text-xs font-medium">F (0.0)</span>
                `;
            }
            calculateCgpa();
        }
        
        // Override scale change
        document.getElementById('cgpa-scale')?.addEventListener('change', updateGradeOptions);
        
        document.addEventListener('DOMContentLoaded', () => {
            lucide.createIcons();
            // Initialize with 5 empty subjects
            for (let i = 0; i < 5; i++) {
                addCgpaSubject();
            }
        });
    </script>
</body>
</html>