            <!-- BMI Calculator View -->
            <div id="calc-bmi"
                class="calculator-view hidden opacity-0 h-full flex flex-col transition-opacity duration-300">
                <div class="mb-6 flex flex-col sm:flex-row sm:items-center justify-between gap-4">
                    <div>
                        <h2 class="text-3xl font-bold tracking-tight text-slate-800 dark:text-white mb-1">BMI <span
                                class="text-rose-500 font-light">Calculator</span></h2>
                        <p class="text-sm text-slate-500 dark:text-slate-400">Calculate Body Mass Index</p>
                    </div>
                    <div
                        class="bg-rose-100/50 dark:bg-rose-900/20 text-rose-600 dark:text-rose-400 px-4 py-2 rounded-xl text-sm font-semibold flex items-center gap-2 border border-rose-200 dark:border-rose-800/50 shadow-sm self-start sm:self-auto">
                        <i class="fas fa-weight"></i> Health
                    </div>
                </div>

                <div class="w-full max-w-2xl mx-auto flex-1 flex flex-col justify-start mt-4">
                    <!-- Config -->
                    <div class="glass-display rounded-3xl p-6 mb-6 shadow-sm">
                        <h3
                            class="text-sm font-semibold text-slate-700 dark:text-slate-300 mb-4 flex items-center gap-2 uppercase tracking-wider">
                            <i class="fas fa-sliders-h text-rose-500"></i> Settings
                        </h3>
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                            <div>
                                <label
                                    class="block text-xs font-semibold text-slate-500 uppercase tracking-wider mb-2">Units</label>
                                <select id="bmi-unit"
                                    class="w-full perc-input focus:ring-rose-100 dark:focus:ring-rose-900/30 focus:border-rose-400 dark:focus:border-rose-500 font-medium">
                                    <option value="metric">Metric (kg / cm)</option>
                                    <option value="imperial">Imperial (lbs / in)</option>
                                </select>
                            </div>
                        </div>
                    </div>

                    <!-- Input Grid -->
                    <div
                        class="glass-display rounded-3xl p-6 lg:p-8 mb-6 shadow-md border-t-4 border-t-rose-400 relative overflow-hidden">
                        <div class="absolute -right-10 -top-10 text-rose-500/5 text-9xl"><i
                                class="fas fa-stethoscope"></i></div>
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-6 relative z-10">
                            <div>
                                <label
                                    class="block text-sm font-semibold text-slate-700 dark:text-slate-300 mb-2">Weight</label>
                                <div class="relative">
                                    <input type="number" id="bmi-weight"
                                        class="w-full perc-input focus:ring-rose-100 dark:focus:ring-rose-900/30 focus:border-rose-400 dark:focus:border-rose-500 font-bold text-lg"
                                        placeholder="0" min="0" step="any">
                                    <span class="absolute right-4 top-1/2 -translate-y-1/2 font-semibold text-slate-400"
                                        id="bmi-weight-label">kg</span>
                                </div>
                            </div>
                            <div>
                                <label
                                    class="block text-sm font-semibold text-slate-700 dark:text-slate-300 mb-2">Height</label>
                                <div class="relative">
                                    <input type="number" id="bmi-height"
                                        class="w-full perc-input focus:ring-rose-100 dark:focus:ring-rose-900/30 focus:border-rose-400 dark:focus:border-rose-500 font-bold text-lg"
                                        placeholder="0" min="0" step="any">
                                    <span class="absolute right-4 top-1/2 -translate-y-1/2 font-semibold text-slate-400"
                                        id="bmi-height-label">cm</span>
                                </div>
                            </div>
                        </div>
                        <button id="calc-btn-bmi"
                            class="w-full mt-6 bg-gradient-to-r from-rose-500 to-rose-600 hover:from-rose-600 hover:to-rose-700 text-white font-semibold py-4 rounded-xl shadow-lg shadow-rose-500/30 hover:-translate-y-1 transition-all duration-300">Calculate
                            BMI</button>
                    </div>

                    <!-- Output Area -->
                    <div id="bmi-results-area"
                        class="glass-display rounded-3xl p-6 lg:p-8 relative hidden opacity-0 transition-opacity duration-500 border-l-4 border-l-rose-500">
                        <button
                            class="copy-trigger absolute top-4 right-4 text-slate-400 hover:text-rose-500 transition-colors opacity-100 focus:opacity-100"
                            data-target="bmi-output-val" aria-label="Copy result" title="Copy result"><i
                                class="fas fa-copy text-lg"></i></button>
                        <h3 class="text-sm font-semibold text-slate-500 uppercase tracking-wider mb-2">Your Body Mass
                            Index</h3>
                        <div class="flex flex-col sm:flex-row sm:items-end gap-3 mb-3">
                            <span id="bmi-output-val"
                                class="text-5xl font-bold tracking-tight text-slate-800 dark:text-white">--</span>
                            <span id="bmi-output-cat"
                                class="text-xl font-semibold px-3 py-1 rounded-lg pb-1 bg-slate-100 dark:bg-slate-800 text-slate-600 dark:text-slate-300">--</span>
                        </div>
                        <div class="w-full bg-slate-200 dark:bg-slate-700 h-2 mt-4 rounded-full overflow-hidden flex">
                            <div class="h-full bg-blue-400 w-1/4"></div>
                            <div class="h-full bg-emerald-400 w-1/4"></div>
                            <div class="h-full bg-orange-400 w-1/4"></div>
                            <div class="h-full bg-rose-500 w-1/4"></div>
                        </div>
                        <div
                            class="flex justify-between mt-2 text-[10px] font-bold text-slate-400 uppercase tracking-widest">
                            <span>18.5</span>
                            <span>25.0</span>
                            <span>30.0</span>
                        </div>
                    </div>
                </div>
            </div>