<template>
<div id="app" class="flex flex-col h-screen overflow-hidden">
        <!-- 頂部導覽列 -->
        <header
            class="bg-white dark:bg-dark border-b border-slate-200 dark:border-gray-800 p-4 shadow-md flex justify-between items-center z-10">
            <div class="flex items-center gap-3">
                <img :src="'/ui/logo.png'" alt="Logo" class="h-10 w-10 object-contain rounded-lg shadow-sm">
                <h1
                    class="text-xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-blue-600 to-emerald-600 dark:from-blue-400 dark:to-emerald-400">
                    差分方程式分析 (Difference Equation Analyzer)</h1>
            </div>
            <div class="flex items-center gap-4">
                <!-- 模式切換按鈕 -->
                <button @click="toggleDarkMode"
                    class="p-2 rounded-lg bg-slate-100 dark:bg-gray-800 hover:bg-slate-200 dark:hover:bg-gray-700 transition-colors shadow-sm">
                    <svg v-if="isDarkMode" class="w-5 h-5 text-yellow-400" fill="currentColor" viewBox="0 0 20 20">
                        <path d="M10 12a2 2 0 100-4 2 2 0 000 4z" />
                        <path fill-rule="evenodd"
                            d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-13a1 1 0 10-2 0 1 1 0 002 0zM2 10a1 1 0 011-1h1a1 1 0 110 2H3a1 1 0 01-1-1zm14 0a1 1 0 011-1h1a1 1 0 110 2h-1a1 1 0 01-1-1zM5.05 5.05a1 1 0 011.414 0l.707.707a1 1 0 11-1.414 1.414l-.707-.707a1 1 0 010-1.414zm9.9 9.9a1 1 0 011.414 0l.707.707a1 1 0 11-1.414 1.414l-.707-.707a1 1 0 010-1.414zM5.05 14.95a1 1 0 010-1.414l.707-.707a1 1 0 011.414 1.414l-.707.707a1 1 0 01-1.414 0zm9.9-9.9a1 1 0 010-1.414l.707-.707a1 1 0 011.414 1.414l-.707.707a1 1 0 01-1.414 0z"
                            clip-rule="evenodd" />
                    </svg>
                    <svg v-else class="w-5 h-5 text-slate-700" fill="currentColor" viewBox="0 0 20 20">
                        <path d="M17.293 13.293A8 8 0 016.707 2.707a8.001 8.001 0 1010.586 10.586z" />
                    </svg>
                </button>
            </div>
        </header>
        <!-- 手機版頁籤列 (桌面版隱藏) -->
        <div
            class="lg:hidden flex border-b border-slate-200 dark:border-gray-800 bg-white dark:bg-dark z-10 flex-shrink-0">
            <button @click="mobileTab = 'settings'" :class="mobileTab === 'settings'
                    ? 'border-b-2 border-blue-500 text-blue-600 dark:text-blue-400 bg-blue-50 dark:bg-blue-900/20'
                    : 'text-slate-500 dark:text-gray-400 hover:text-slate-700 dark:hover:text-gray-200'"
                class="flex-1 flex items-center justify-center gap-2 py-3 text-sm font-semibold transition-colors">
                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                        d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z">
                    </path>
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                        d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path>
                </svg>
                設定
            </button>
            <button @click="mobileTab = 'chart'" :class="mobileTab === 'chart'
                    ? 'border-b-2 border-emerald-500 text-emerald-600 dark:text-emerald-400 bg-emerald-50 dark:bg-emerald-900/20'
                    : 'text-slate-500 dark:text-gray-400 hover:text-slate-700 dark:hover:text-gray-200'"
                class="flex-1 flex items-center justify-center gap-2 py-3 text-sm font-semibold transition-colors">
                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                        d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z">
                    </path>
                </svg>
                圖表
                <span v-if="loadingBode" class="w-2 h-2 rounded-full bg-blue-500 animate-ping"></span>
            </button>
        </div>
        <div class="flex flex-col lg:flex-row flex-1 overflow-hidden">
            <!-- 左側控制面板 (RWD: 手機版=設定頁籤全螢幕，桌面版=左側邊欄) -->
            <aside :class="mobileTab === 'settings' ? 'flex' : 'hidden'"
                class="lg:flex flex-col w-full lg:w-96 h-full bg-white dark:bg-dark border-b lg:border-b-0 lg:border-r border-slate-200 dark:border-gray-800 overflow-y-auto p-5 gap-5 custom-scrollbar transition-colors duration-300">

                <!-- 濾波器設計工具 -->
                <section>
                    <h2
                        class="text-sm font-semibold text-slate-500 dark:text-gray-400 uppercase tracking-wider mb-3 flex items-center justify-between">
                        <div class="flex items-center gap-2">
                            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                    d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z">
                                </path>
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                    d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path>
                            </svg>
                            濾波器設計
                        </div>
                        <button @click="resetFilterParams"
                            class="text-[10px] font-bold bg-amber-100 dark:bg-amber-900/30 text-amber-700 dark:text-amber-300 hover:bg-amber-200 dark:hover:bg-amber-800/50 px-2 py-1 rounded transition-colors uppercase">重設設計</button>
                    </h2>
                    <select v-model="filterType" @change="onFilterTypeChange"
                        class="w-full bg-slate-50 dark:bg-gray-800 border border-slate-200 dark:border-gray-700 rounded-lg p-3 text-base focus:border-blue-500 focus:ring-1 focus:ring-blue-500 outline-none transition-all mb-3 text-slate-900 dark:text-gray-100 truncate">
                        <option v-for="opt in filterOptions" :key="opt" :value="opt">{{ opt }}</option>
                    </select>

                    <!-- 動態參數區 -->
                    <div v-if="filterType !== '(無) 手動自訂'"
                        class="space-y-3 bg-slate-100 dark:bg-gray-900 p-4 rounded-lg border border-slate-200 dark:border-gray-800 shadow-inner">
                        <!-- Lowpass / Highpass -->
                        <div v-if="['Lowpass (低通)', 'Highpass (高通)'].includes(filterType)">
                            <label class="text-sm text-slate-500 dark:text-gray-400 flex justify-between mb-1"><span>截止頻率
                                    f_c (Hz)</span><span class="text-emerald-600 dark:text-emerald-400">{{
                                    formatK(params.fc) }}</span></label>
                            <input type="range" v-model.number="params.fc" @input="debouncedApply" :min="1" :max="fs/2"
                                class="w-full accent-blue-500 mb-2">
                            <input type="number" v-model.number="params.fc" @change="applyFilterDesign"
                                class="w-full bg-white dark:bg-gray-800 border border-slate-200 dark:border-gray-700 rounded p-3 text-base focus:border-blue-500 outline-none text-slate-900 dark:text-gray-100">
                            <label class="text-sm text-slate-500 dark:text-gray-400 mt-3 mb-2 block">階數 Order</label>
                            <div class="flex gap-2">
                                <button v-for="o in [1,2,3]" :key="o" @click="params.order = o; applyFilterDesign()"
                                    :class="params.order === o ? 'bg-blue-600 text-white border-blue-500' : 'bg-slate-200 dark:bg-gray-800 text-slate-600 dark:text-gray-400 border-slate-300 dark:border-gray-700'"
                                    class="flex-1 rounded py-2.5 text-base font-medium border transition-colors">{{ o
                                    }}</button>
                            </div>
                        </div>
                        <!-- Bandpass -->
                        <div v-if="filterType === 'Bandpass (帶通)'">
                            <label class="text-sm text-slate-500 dark:text-gray-400 flex justify-between mb-1"><span>下截止頻率
                                    f_low (Hz)</span><span class="text-emerald-600 dark:text-emerald-400">{{
                                    formatK(params.bp_f_low) }}</span></label>
                            <input type="number" v-model.number="params.bp_f_low" @change="applyFilterDesign"
                                class="w-full bg-white dark:bg-gray-800 border border-slate-200 dark:border-gray-700 rounded p-3 text-base mb-2 text-slate-900 dark:text-gray-100">
                            <label class="text-sm text-slate-500 dark:text-gray-400 flex justify-between mb-1"><span>上截止頻率
                                    f_high (Hz)</span><span class="text-emerald-600 dark:text-emerald-400">{{
                                    formatK(params.bp_f_high) }}</span></label>
                            <input type="number" v-model.number="params.bp_f_high" @change="applyFilterDesign"
                                class="w-full bg-white dark:bg-gray-800 border border-slate-200 dark:border-gray-700 rounded p-3 text-base mb-2 text-slate-900 dark:text-gray-100">
                            <label class="text-sm text-slate-500 dark:text-gray-400 mt-2 mb-2 block">階數 Order</label>
                            <div class="flex gap-2">
                                <button v-for="o in [1,2,3]" :key="o" @click="params.bp_order = o; applyFilterDesign()"
                                    :class="params.bp_order === o ? 'bg-blue-600 text-white border-blue-500' : 'bg-slate-200 dark:bg-gray-800 text-slate-600 dark:text-gray-400 border-slate-300 dark:border-gray-700'"
                                    class="flex-1 rounded py-1.5 text-sm border transition-colors">{{ o }}</button>
                            </div>
                        </div>
                        <!-- Notch -->
                        <div v-if="filterType === 'Notch (陷波器)'" class="space-y-3">
                            <div><label class="text-sm text-slate-500 dark:text-gray-400 mb-2 block">中心頻率 f_0
                                    (Hz)</label><input type="number" v-model.number="params.notch_f0"
                                    @change="applyFilterDesign"
                                    class="w-full bg-white dark:bg-gray-800 border border-slate-200 dark:border-gray-700 rounded p-3 text-base text-slate-900 dark:text-gray-100">
                            </div>
                            <div><label class="text-sm text-slate-500 dark:text-gray-400 mb-2 block">品質因數
                                    Q</label><input type="number" v-model.number="params.notch_q"
                                    @change="applyFilterDesign" step="0.1"
                                    class="w-full bg-white dark:bg-gray-800 border border-slate-200 dark:border-gray-700 rounded p-3 text-base text-slate-900 dark:text-gray-100">
                            </div>
                        </div>
                        <!-- 1P1Z -->
                        <div v-if="filterType === '1P1Z (一極一零)'" class="space-y-3">
                            <div><label class="text-sm text-slate-500 dark:text-gray-400 mb-2 block">零點頻率 Freq_z
                                    (Hz)</label><input type="number" v-model.number="params.opoz_fz"
                                    @change="applyFilterDesign"
                                    class="w-full bg-white dark:bg-gray-800 border border-slate-200 dark:border-gray-700 rounded p-3 text-base text-slate-900 dark:text-gray-100">
                            </div>
                            <div><label class="text-sm text-slate-500 dark:text-gray-400 mb-2 block">極點頻率 Freq_p
                                    (Hz)</label><input type="number" v-model.number="params.opoz_fp"
                                    @change="applyFilterDesign"
                                    class="w-full bg-white dark:bg-gray-800 border border-slate-200 dark:border-gray-700 rounded p-3 text-base text-slate-900 dark:text-gray-100">
                            </div>
                        </div>
                        <!-- 2P2Z -->
                        <div v-if="filterType === '2P2Z (二極二零)'" class="space-y-3">
                            <div><label class="text-sm text-slate-500 dark:text-gray-400 mb-2 block">零點頻率 1 Freq_z1
                                    (Hz)</label><input type="number" v-model.number="params.tptz_fz1"
                                    @change="applyFilterDesign"
                                    class="w-full bg-white dark:bg-gray-800 border border-slate-200 dark:border-gray-700 rounded p-3 text-base text-slate-900 dark:text-gray-100">
                            </div>
                            <div><label class="text-sm text-slate-500 dark:text-gray-400 mb-2 block">零點頻率 2 Freq_z2
                                    (Hz)</label><input type="number" v-model.number="params.tptz_fz2"
                                    @change="applyFilterDesign"
                                    class="w-full bg-white dark:bg-gray-800 border border-slate-200 dark:border-gray-700 rounded p-3 text-base text-slate-900 dark:text-gray-100">
                            </div>
                            <div><label class="text-sm text-slate-500 dark:text-gray-400 mb-2 block">極點頻率 1 Freq_p1
                                    (Hz)</label><input type="number" v-model.number="params.tptz_fp1"
                                    @change="applyFilterDesign"
                                    class="w-full bg-white dark:bg-gray-800 border border-slate-200 dark:border-gray-700 rounded p-3 text-base text-slate-900 dark:text-gray-100">
                            </div>
                            <div><label class="text-sm text-slate-500 dark:text-gray-400 mb-2 block">極點頻率 2 Freq_p2
                                    (Hz)</label><input type="number" v-model.number="params.tptz_fp2"
                                    @change="applyFilterDesign"
                                    class="w-full bg-white dark:bg-gray-800 border border-slate-200 dark:border-gray-700 rounded p-3 text-base text-slate-900 dark:text-gray-100">
                            </div>
                        </div>
                        <!-- PID -->
                        <div v-if="filterType === 'PID 控制器'" class="space-y-3">
                            <div v-for="k in [{key:'kp',label:'比例增益 Kp'},{key:'ki',label:'積分增益 Ki'},{key:'kd',label:'微分增益 Kd'}]"
                                :key="k.key">
                                <label class="text-sm font-medium text-slate-500 dark:text-gray-400 mb-1 block">{{
                                    k.label
                                    }}</label>
                                <input type="number" v-model.number="params[k.key]" @change="applyFilterDesign"
                                    step="0.0001"
                                    class="w-full bg-white dark:bg-gray-800 border border-slate-200 dark:border-gray-700 rounded p-3 text-base focus:border-blue-500 outline-none text-slate-900 dark:text-gray-100">
                            </div>
                        </div>
                        <!-- SOGI -->
                        <div v-if="filterType === 'SOGI-Alpha (帶通)' || filterType === 'SOGI-Beta (低通)'"
                            class="space-y-3">
                            <div><label class="text-xs text-slate-500 dark:text-gray-400 mb-1 block">中心頻率 f_0
                                    (Hz)</label><input type="number" v-model.number="params.sogi_f0"
                                    @change="applyFilterDesign"
                                    class="w-full bg-white dark:bg-gray-800 border border-slate-200 dark:border-gray-700 rounded p-2 text-sm text-slate-900 dark:text-gray-100">
                            </div>
                            <div><label class="text-xs text-slate-500 dark:text-gray-400 mb-1 block">阻尼因數
                                    k</label><input type="number" v-model.number="params.sogi_k"
                                    @change="applyFilterDesign" step="0.001"
                                    class="w-full bg-white dark:bg-gray-800 border border-slate-200 dark:border-gray-700 rounded p-2 text-sm text-slate-900 dark:text-gray-100">
                            </div>
                        </div>
                        <!-- 提示資訊 -->
                        <div
                            class="bg-blue-100 dark:bg-blue-900/30 border border-blue-200 dark:border-blue-800/50 rounded-lg p-3 text-sm text-blue-700 dark:text-blue-300 mt-2">
                            💡 調整上方參數會自動覆寫 a, b 係數。你也可以隨時手動修改下方係數進行微調！
                        </div>
                    </div>
                </section>

                <hr class="border-slate-200 dark:border-gray-800">

                <!-- 系統參數 -->
                <section>
                    <h2 class="text-sm font-semibold text-slate-500 dark:text-gray-400 uppercase tracking-wider mb-3">
                        系統參數</h2>
                    <div class="space-y-3">
                        <div>
                            <label class="text-sm text-slate-500 dark:text-gray-400 flex justify-between mb-1"><span>取樣頻率
                                    fs
                                    (Hz)</span><span class="text-emerald-600 dark:text-emerald-400">{{ formatK(fs)
                                    }}</span></label>
                            <input type="number" v-model.number="fs" @input="debouncedApply" @keydown="onlyNumberKey"
                                class="w-full bg-white dark:bg-gray-800 border border-slate-200 dark:border-gray-700 rounded-lg p-3 text-base focus:border-blue-500 outline-none transition-all text-slate-900 dark:text-gray-100">
                        </div>
                        <div>
                            <label class="text-sm text-slate-500 dark:text-gray-400 flex justify-between mb-1"><span>系統增益
                                    K (System Gain)</span><span class="text-blue-600 dark:text-blue-400">{{ systemGain
                                    }}x</span></label>
                            <input type="number" v-model.number="systemGain" @input="onGainChange" step="0.1"
                                @keydown="onlyNumberKey"
                                class="w-full bg-white dark:bg-gray-800 border border-slate-200 dark:border-gray-700 rounded-lg p-3 text-base focus:border-blue-500 outline-none transition-all text-slate-900 dark:text-gray-100">
                        </div>
                    </div>
                </section>

                <hr class="border-slate-200 dark:border-gray-800">

                <!-- 係數手動設定 -->
                <section>
                    <h2
                        class="text-sm font-semibold text-slate-500 dark:text-gray-400 uppercase tracking-wider mb-3 flex justify-between items-center">
                        <span>濾波器係數設定</span>
                        <div class="flex items-center gap-2">
                            <button v-if="isManualDirty" @click="clearManualAdjustments"
                                class="text-[10px] font-bold bg-slate-200 dark:bg-gray-800 hover:bg-slate-300 dark:hover:bg-gray-700 px-2 py-1 rounded text-slate-500 transition-colors uppercase mr-1">重設</button>
                            <button @click="updateFromText"
                                class="text-[10px] font-bold bg-blue-600 hover:bg-blue-500 text-white px-3 py-1 rounded transition-colors uppercase shadow-sm">套用</button>
                        </div>
                    </h2>
                    <div class="mb-3">
                        <label class="text-sm text-slate-500 dark:text-gray-400 mb-1 block">前饋分子係數 b (b0 ~ b6)</label>
                        <!-- b 係數標記顯示 -->
                        <div class="flex flex-wrap gap-1 mb-2">
                            <div v-for="item in floatingCoeffs.b" :key="item.label"
                                class="bg-blue-50 dark:bg-blue-900/30 px-1.5 py-0.5 rounded border border-blue-100 dark:border-blue-800/20 flex gap-1 items-center">
                                <span class="text-[9px] text-blue-500 font-bold">{{ item.label }}:</span>
                                <span class="text-[10px] font-mono text-blue-800 dark:text-blue-300">{{ item.val
                                    }}</span>
                            </div>
                        </div>
                        <textarea v-model="b_str" @input="debouncedUpdateFromText('b')" @keydown="onlyNumberKey"
                            rows="2"
                            class="w-full bg-slate-50 dark:bg-gray-900 border border-slate-200 dark:border-gray-700 rounded-lg p-3 text-sm focus:border-blue-500 outline-none font-mono resize-none leading-relaxed text-blue-700 dark:text-blue-300"></textarea>
                    </div>
                    <!-- b 係數倍率微調 -->
                    <details
                        class="mb-3 bg-slate-50 dark:bg-gray-900 border border-slate-200 dark:border-gray-800 rounded-lg">
                        <summary
                            class="text-sm text-slate-500 dark:text-gray-400 px-3 py-3 cursor-pointer hover:text-slate-600 dark:hover:text-gray-300">
                            b 係數倍率微調</summary>
                        <div class="px-3 pb-3">
                            <div class="flex items-center gap-2 mb-2 mt-1">
                                <span class="text-xs text-slate-400 dark:text-gray-500">靈敏度:</span>
                                <button v-for="s in ['1%','2x','10x']" :key="s" @click="sense_b = s"
                                    :class="sense_b === s ? 'bg-blue-600 text-white' : 'bg-slate-200 dark:bg-gray-800 text-slate-500 dark:text-gray-400'"
                                    class="btn-small px-3 py-1.5 rounded text-xs font-medium border border-slate-300 dark:border-gray-700">{{
                                    s }}</button>
                                <button @click="resetSlidersB"
                                    class="btn-small ml-auto px-3 py-1.5 rounded text-xs font-medium bg-slate-200 dark:bg-gray-800 text-slate-500 dark:text-gray-400 border border-slate-300 dark:border-gray-700 hover:bg-slate-300 dark:hover:bg-gray-700">重置</button>
                            </div>
                            <template v-for="i in 7" :key="'bs'+i">
                                <div v-if="baseB[i-1] !== 0">
                                    <label class="text-xs text-slate-400 dark:text-gray-500 flex justify-between mt-1">
                                        <span>b{{ i-1 }} (基準: {{ (baseB[i-1] * (systemGain || 1.0)).toPrecision(6)
                                            }})</span>
                                        <span v-if="outOfRangeB[i-1]" class="text-amber-500 font-bold animate-pulse">⚠️
                                            超出滑桿範圍</span>
                                    </label>
                                    <input type="range" v-model.number="bSliders[i-1]" @input="updateFromControls"
                                        :min="-maxLogB" :max="maxLogB" :step="maxLogB/100"
                                        class="w-full accent-blue-500">
                                </div>
                            </template>
                        </div>
                    </details>
                    <div class="mb-3">
                        <label class="text-sm text-slate-500 dark:text-gray-400 mb-1 block">回饋分母係數 a (a0=1, a1 ~
                            a6)</label>
                        <!-- a 係數標記顯示 -->
                        <div class="flex flex-wrap gap-1 mb-2">
                            <div v-for="item in floatingCoeffs.a" :key="item.label"
                                class="bg-orange-50 dark:bg-orange-900/30 px-1.5 py-0.5 rounded border border-orange-100 dark:border-orange-800/20 flex gap-1 items-center">
                                <span class="text-[9px] text-orange-500 font-bold">{{ item.label }}:</span>
                                <span class="text-[10px] font-mono text-orange-800 dark:text-orange-300">{{ item.val
                                    }}</span>
                            </div>
                        </div>
                        <textarea v-model="a_str" @input="debouncedUpdateFromText('a')" @keydown="onlyNumberKey"
                            rows="2"
                            class="w-full bg-slate-50 dark:bg-gray-900 border border-slate-200 dark:border-gray-700 rounded-lg p-3 text-sm focus:border-blue-500 outline-none font-mono resize-none leading-relaxed text-orange-700 dark:text-orange-300"></textarea>
                    </div>
                    <!-- a 係數倍率微調 -->
                    <details
                        class="bg-slate-50 dark:bg-gray-900 border border-slate-200 dark:border-gray-800 rounded-lg">
                        <summary
                            class="text-sm text-slate-500 dark:text-gray-400 px-3 py-3 cursor-pointer hover:text-slate-600 dark:hover:text-gray-300">
                            a 係數倍率微調</summary>
                        <div class="px-3 pb-3">
                            <div class="flex items-center gap-2 mb-2 mt-1">
                                <span class="text-xs text-slate-400 dark:text-gray-500">靈敏度:</span>
                                <button v-for="s in ['1%','2x','10x']" :key="s" @click="sense_a = s"
                                    :class="sense_a === s ? 'bg-blue-600 text-white' : 'bg-slate-200 dark:bg-gray-800 text-slate-500 dark:text-gray-400'"
                                    class="px-3 py-1.5 rounded text-xs font-medium border border-slate-300 dark:border-gray-700">{{
                                    s }}</button>
                                <button @click="resetSlidersA"
                                    class="btn-small ml-auto px-3 py-1.5 rounded text-xs font-medium bg-slate-200 dark:bg-gray-800 text-slate-500 dark:text-gray-400 border border-slate-300 dark:border-gray-700 hover:bg-slate-300 dark:hover:bg-gray-700">重置</button>
                            </div>
                            <template v-for="i in 6" :key="'as'+i">
                                <div v-if="baseA[i] !== 0">
                                    <label class="text-xs text-slate-400 dark:text-gray-500 flex justify-between mt-1">
                                        <span>a{{ i }} (基準: {{ baseA[i].toPrecision(6) }})</span>
                                        <span v-if="outOfRangeA[i]" class="text-amber-500 font-bold animate-pulse">⚠️
                                            超出滑桿範圍</span>
                                    </label>
                                    <input type="range" v-model.number="aSliders[i]" @input="updateFromControls"
                                        :min="-maxLogA" :max="maxLogA" :step="maxLogA/100"
                                        class="w-full accent-orange-500">
                                </div>
                            </template>
                        </div>
                    </details>
                    
                    <!-- 進階 a1/a2 微調 -->
                    <div class="mt-4">
                        <button v-if="!showAdvancedAdjustment" @click="enableAdvancedAdjustment"
                            class="w-full py-3 border-2 border-dashed border-slate-200 dark:border-gray-800 rounded-xl text-slate-400 dark:text-gray-500 text-xs font-bold hover:bg-slate-50 dark:hover:bg-gray-800/50 hover:border-indigo-300 dark:hover:border-indigo-900 transition-all flex items-center justify-center gap-2">
                            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6V4m0 2a2 2 0 100 4m0-4a2 2 0 110 4m-6 8a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4m6 6v10m6-2a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4"></path>
                            </svg>
                            開啟 a1/a2 步階微調
                        </button>

                        <div v-if="showAdvancedAdjustment" class="p-4 bg-slate-50 dark:bg-gray-900 border border-slate-200 dark:border-gray-800 rounded-xl shadow-inner">
                            <h3 class="text-xs font-bold text-slate-500 dark:text-gray-400 uppercase tracking-widest mb-4 flex items-center gap-2">
                                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"></path>
                                </svg>
                                a1/a2 步階微調
                            </h3>

                            <div class="mb-4">
                                <div class="text-[11px] font-semibold text-slate-400 dark:text-gray-500 mb-2">
                                    {{ isTouchInput ? '觸控拖曳微調' : '直接輸入 / 滾動微調' }}
                                </div>
                                <div class="grid grid-cols-2 gap-2">
                                    <label v-if="!isTouchInput" class="block">
                                        <span class="text-[9px] text-slate-400 block uppercase font-bold mb-1">a1</span>
                                        <input type="number" :value="formatFineCoeff(currentA1)" step="0.001"
                                            @change="setAFineDirect(1, $event.target.value)" @keydown="onlyNumberKey"
                                            @wheel.prevent="handleAFineWheel(1, $event)"
                                            class="w-full bg-white dark:bg-gray-800 border border-slate-200 dark:border-gray-700 rounded-lg p-3 text-sm font-mono text-center text-indigo-700 dark:text-indigo-300">
                                    </label>
                                    <button v-else type="button" @pointerdown.prevent="startAFineDrag(1, $event)"
                                        class="touch-none select-none w-28 mx-auto bg-white dark:bg-gray-800 border border-slate-200 dark:border-gray-700 rounded-lg p-3 text-center active:border-indigo-400 active:ring-2 active:ring-indigo-400/20">
                                        <span class="text-[9px] text-slate-400 block uppercase font-bold mb-1">a1</span>
                                        <span class="text-lg font-mono font-bold text-indigo-700 dark:text-indigo-300">{{ formatFineCoeff(currentA1) }}</span>
                                    </button>
                                    <label v-if="!isTouchInput" class="block">
                                        <span class="text-[9px] text-slate-400 block uppercase font-bold mb-1">a2</span>
                                        <input type="number" :value="formatFineCoeff(currentA2)" step="0.001"
                                            @change="setAFineDirect(2, $event.target.value)" @keydown="onlyNumberKey"
                                            @wheel.prevent="handleAFineWheel(2, $event)"
                                            class="w-full bg-white dark:bg-gray-800 border border-slate-200 dark:border-gray-700 rounded-lg p-3 text-sm font-mono text-center text-emerald-700 dark:text-emerald-300">
                                    </label>
                                    <button v-else type="button" @pointerdown.prevent="startAFineDrag(2, $event)"
                                        class="touch-none select-none w-28 mx-auto bg-white dark:bg-gray-800 border border-slate-200 dark:border-gray-700 rounded-lg p-3 text-center active:border-emerald-400 active:ring-2 active:ring-emerald-400/20">
                                        <span class="text-[9px] text-slate-400 block uppercase font-bold mb-1">a2</span>
                                        <span class="text-lg font-mono font-bold text-emerald-700 dark:text-emerald-300">{{ formatFineCoeff(currentA2) }}</span>
                                    </button>
                                </div>
                            </div>

                            <div class="grid grid-cols-2 gap-2 mb-4">
                                <div class="bg-white dark:bg-gray-800 border border-slate-100 dark:border-gray-700 rounded-lg p-2 text-center shadow-sm">
                                    <span class="text-[9px] text-slate-400 block uppercase font-bold mb-1">目前 a1</span>
                                    <span class="text-sm font-mono font-bold text-indigo-600 dark:text-indigo-400">{{ formatFineCoeff(currentA1) }}</span>
                                </div>
                                <div class="bg-white dark:bg-gray-800 border border-slate-100 dark:border-gray-700 rounded-lg p-2 text-center shadow-sm">
                                    <span class="text-[9px] text-slate-400 block uppercase font-bold mb-1">目前 a2</span>
                                    <span class="text-sm font-mono font-bold text-emerald-600 dark:text-emerald-400">{{ formatFineCoeff(currentA2) }}</span>
                                </div>
                                <div class="bg-white dark:bg-gray-800 border border-slate-100 dark:border-gray-700 rounded-lg p-2 text-center shadow-sm">
                                    <span class="text-[9px] text-slate-400 block uppercase font-bold mb-1">差值 a1-a2</span>
                                    <span class="text-xs font-mono text-slate-600 dark:text-gray-300">{{ formatFineCoeff(currentA1A2Diff) }}</span>
                                </div>
                                <div class="bg-white dark:bg-gray-800 border border-slate-100 dark:border-gray-700 rounded-lg p-2 text-center shadow-sm">
                                    <span class="text-[9px] text-slate-400 block uppercase font-bold mb-1">總和 a1+a2</span>
                                    <span class="text-xs font-mono text-slate-600 dark:text-gray-300">{{ formatFineCoeff(currentA1A2Sum) }}</span>
                                </div>
                            </div>

                            <div class="space-y-3 mb-4">
                                <div>
                                    <div class="text-[11px] font-semibold text-slate-400 dark:text-gray-500 mb-1">共同平移</div>
                                    <div class="grid grid-cols-2 gap-2">
                                        <button @pointerdown.prevent="startA1A2Repeat('common', -1)" @pointerup="stopA1A2Repeat" @pointerleave="stopA1A2Repeat" @pointercancel="stopA1A2Repeat"
                                            class="rounded-lg bg-slate-200 dark:bg-gray-800 hover:bg-slate-300 dark:hover:bg-gray-700 text-slate-700 dark:text-gray-300 py-2 text-xs font-bold transition-colors">a1 - 0.001, a2 - 0.001</button>
                                        <button @pointerdown.prevent="startA1A2Repeat('common', 1)" @pointerup="stopA1A2Repeat" @pointerleave="stopA1A2Repeat" @pointercancel="stopA1A2Repeat"
                                            class="rounded-lg bg-slate-200 dark:bg-gray-800 hover:bg-slate-300 dark:hover:bg-gray-700 text-slate-700 dark:text-gray-300 py-2 text-xs font-bold transition-colors">a1 + 0.001, a2 + 0.001</button>
                                    </div>
                                </div>
                                <div>
                                    <div class="text-[11px] font-semibold text-slate-400 dark:text-gray-500 mb-1">差值調整</div>
                                    <div class="grid grid-cols-2 gap-2">
                                        <button @pointerdown.prevent="startA1A2Repeat('spread', 1)" @pointerup="stopA1A2Repeat" @pointerleave="stopA1A2Repeat" @pointercancel="stopA1A2Repeat"
                                            class="rounded-lg bg-indigo-100 dark:bg-indigo-900/30 hover:bg-indigo-200 dark:hover:bg-indigo-900/50 text-indigo-700 dark:text-indigo-300 py-2 text-xs font-bold transition-colors">展開差值</button>
                                        <button @pointerdown.prevent="startA1A2Repeat('converge', 1)" @pointerup="stopA1A2Repeat" @pointerleave="stopA1A2Repeat" @pointercancel="stopA1A2Repeat"
                                            class="rounded-lg bg-emerald-100 dark:bg-emerald-900/30 hover:bg-emerald-200 dark:hover:bg-emerald-900/50 text-emerald-700 dark:text-emerald-300 py-2 text-xs font-bold transition-colors">收斂差值</button>
                                    </div>
                                </div>
                            </div>

                            <div class="bg-amber-50 dark:bg-amber-900/20 border border-amber-100 dark:border-amber-800/30 rounded-lg p-3">
                                <p class="text-[10px] text-amber-700 dark:text-amber-400 leading-relaxed">
                                    <span class="font-bold">運算說明：</span><br>
                                    係數固定對齊到小數點後第三位。微調後請按「套用」更新圖表；觸控時按住數值面板上下拖曳。
                                </p>
                            </div>
                        </div>
                    </div>
                </section>

                <hr class="border-slate-200 dark:border-gray-800">

                <!-- 定點數轉換 -->
                <section>
                    <h2
                        class="text-sm font-semibold text-slate-500 dark:text-gray-400 uppercase tracking-wider mb-3 flex justify-between items-center">
                        <div class="flex items-center gap-2">
                            <span>定點數係數轉換</span>
                            <span
                                class="text-xs bg-blue-100 dark:bg-blue-900/30 text-blue-700 dark:text-blue-300 px-2 py-1 rounded">b Q{{
                                shiftBitsB }}</span>
                            <span
                                class="text-xs bg-orange-100 dark:bg-orange-900/30 text-orange-700 dark:text-orange-300 px-2 py-1 rounded">a Q{{
                                shiftBitsA }}</span>
                        </div>
                        <div class="flex items-center gap-2">
                            <button
                                v-if="Object.keys(fixedOverrides.a).length > 0 || Object.keys(fixedOverrides.b).length > 0"
                                @click="clearFixedOverrides"
                                class="text-[10px] font-bold bg-slate-200 dark:bg-gray-800 hover:bg-slate-300 dark:hover:bg-gray-700 px-2 py-1 rounded text-slate-500 transition-colors uppercase mr-1">重設</button>
                            <button @click="updateBodePlot"
                                class="text-[10px] font-bold bg-emerald-600 hover:bg-emerald-500 text-white px-3 py-1 rounded transition-colors uppercase shadow-sm">套用</button>
                        </div>
                    </h2>

                    <div class="mb-4 grid grid-cols-1 sm:grid-cols-2 gap-3">
                        <div>
                            <label class="text-sm text-slate-500 dark:text-gray-400 mb-1 block">b 左移位元數 (Shift Bits)</label>
                            <input v-if="!isTouchInput" type="number" :value="shiftBitsB" min="0"
                                @change="setShiftBits('b', $event.target.value)" @keydown="onlyNumberKey"
                                @wheel.prevent="handleShiftBitWheel('b', $event)"
                                class="w-full bg-white dark:bg-gray-800 border border-slate-200 dark:border-gray-700 rounded-lg p-3 text-base focus:border-blue-500 outline-none transition-all text-slate-900 dark:text-gray-100">
                            <button v-else type="button" @pointerdown.prevent="startShiftBitDrag('b', $event)"
                                class="touch-none select-none block w-24 mx-auto bg-white dark:bg-gray-800 border border-slate-200 dark:border-gray-700 rounded-lg p-3 text-center active:border-blue-400 active:ring-2 active:ring-blue-400/20">
                                <span class="text-lg font-mono font-bold text-blue-700 dark:text-blue-300">{{ shiftBitsB }}</span>
                            </button>
                            <p class="text-[10px] text-slate-400 mt-1">b scaling: 2^{{ shiftBitsB }} ({{
                                Math.pow(2, shiftBitsB) }})</p>
                        </div>
                        <div>
                            <label class="text-sm text-slate-500 dark:text-gray-400 mb-1 block">a 左移位元數 (Shift Bits)</label>
                            <input v-if="!isTouchInput" type="number" :value="shiftBitsA" min="0"
                                @change="setShiftBits('a', $event.target.value)" @keydown="onlyNumberKey"
                                @wheel.prevent="handleShiftBitWheel('a', $event)"
                                class="w-full bg-white dark:bg-gray-800 border border-slate-200 dark:border-gray-700 rounded-lg p-3 text-base focus:border-blue-500 outline-none transition-all text-slate-900 dark:text-gray-100">
                            <button v-else type="button" @pointerdown.prevent="startShiftBitDrag('a', $event)"
                                class="touch-none select-none block w-24 mx-auto bg-white dark:bg-gray-800 border border-slate-200 dark:border-gray-700 rounded-lg p-3 text-center active:border-orange-400 active:ring-2 active:ring-orange-400/20">
                                <span class="text-lg font-mono font-bold text-orange-700 dark:text-orange-300">{{ shiftBitsA }}</span>
                            </button>
                            <p class="text-[10px] text-slate-400 mt-1">a scaling: 2^{{ shiftBitsA }} ({{
                                Math.pow(2, shiftBitsA) }})</p>
                        </div>
                    </div>

                    <div class="space-y-4">
                        <div>
                            <label class="text-sm text-slate-500 dark:text-gray-400 mb-1 block">定點分子係數 b
                                (Integers)</label>
                            <div class="flex flex-wrap gap-1 mb-2">
                                <div v-for="(item, idx) in fixedPointCoeffs.b" :key="item.label"
                                    :class="item.isOverridden ? 'border-blue-400 ring-1 ring-blue-400/20' : 'border-blue-100 dark:border-blue-800/30'"
                                    class="bg-blue-50 dark:bg-blue-900/20 px-1.5 py-0.5 rounded border flex items-center gap-1 transition-all">
                                    <span class="text-[9px] text-blue-400 font-bold">{{ item.label }}:</span>
                                    <span class="text-[10px] font-mono text-blue-700 dark:text-blue-300 font-bold"
                                        :class="{ 'italic': !item.isOverridden }">{{ item.val }}</span>
                                </div>
                            </div>
                            <textarea v-model="b_int_str" @keydown="onlyNumberKey($event, false)" rows="2"
                                class="w-full bg-slate-50 dark:bg-gray-900 border border-slate-200 dark:border-gray-700 rounded-lg p-3 text-sm focus:border-blue-500 outline-none font-mono resize-none leading-relaxed text-blue-700 dark:text-blue-300"></textarea>
                        </div>
                        <div>
                            <label class="text-sm text-slate-500 dark:text-gray-400 mb-1 block">定點分母係數 a
                                (Integers)</label>
                            <div class="flex flex-wrap gap-1 mb-2">
                                <div v-for="(item, idx) in fixedPointCoeffs.a" :key="item.label"
                                    :class="item.isOverridden ? 'border-orange-400 ring-1 ring-orange-400/20' : 'border-orange-100 dark:border-orange-800/30'"
                                    class="bg-orange-50 dark:bg-orange-900/20 px-1.5 py-0.5 rounded border flex items-center gap-1 transition-all">
                                    <span class="text-[9px] text-orange-400 font-bold">{{ item.label }}:</span>
                                    <span class="text-[10px] font-mono text-orange-700 dark:text-orange-300 font-bold"
                                        :class="{ 'italic': !item.isOverridden }">{{ item.val }}</span>
                                </div>
                            </div>
                            <textarea v-model="a_int_str" @keydown="onlyNumberKey($event, false)" rows="2"
                                class="w-full bg-slate-50 dark:bg-gray-900 border border-slate-200 dark:border-gray-700 rounded-lg p-3 text-sm focus:border-blue-500 outline-none font-mono resize-none leading-relaxed text-orange-700 dark:text-orange-300"></textarea>
                        </div>
                    </div>
                    <p class="text-[10px] text-slate-400 dark:text-gray-500 mt-3 italic">註：b 係數乘以 2^{{ shiftBitsB }}，a
                        係數乘以 2^{{ shiftBitsA }} 後四捨五入，可用於定點數 DSP 實作。</p>
                </section>

            </aside>

            <!-- 右側主視窗 (RWD: 手機版=圖表頁籤全螢幕，桌面版=右側主區) -->
            <main :class="mobileTab === 'chart' ? 'flex bg-white dark:bg-[#0f0f0f] !p-0' : 'hidden'"
                class="lg:flex flex-1 flex-col overflow-y-auto bg-slate-50 dark:bg-[#0f0f0f] lg:p-6 gap-0 lg:gap-6 custom-scrollbar relative transition-colors duration-300">
                <div v-if="globalError"
                    class="absolute top-4 right-6 bg-red-100 dark:bg-red-900 border border-red-200 dark:border-red-700 text-red-700 dark:text-white px-4 py-3 rounded-lg shadow-lg text-base z-50 flex items-center gap-2">
                    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                            d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                    </svg>
                    {{ globalError }}
                    <button @click="globalError = null"
                        class="ml-2 hover:text-red-900 dark:hover:text-red-200">&times;</button>
                </div>

                <!-- Bode Plot -->
                <div
                    class="bg-white dark:bg-dark lg:rounded-xl border-b lg:border border-slate-100 lg:border-slate-200 dark:border-gray-800 lg:dark:border-gray-800 lg:shadow-md p-0 lg:p-1 flex-shrink-0 relative transition-colors duration-300">
                    <div
                        class="hidden lg:block absolute inset-0 bg-gradient-to-br from-blue-500/5 to-purple-500/5 pointer-events-none">
                    </div>
                    <div
                        class="px-5 py-4 border-b border-slate-100 dark:border-gray-800 flex justify-between items-center bg-white dark:bg-dark backdrop-blur-sm z-10 relative">
                        <h3 class="font-bold text-slate-800 dark:text-gray-200 tracking-wide">1. 頻率響應 (Frequency
                            Response)</h3>
                        <div v-if="loadingBode"
                            class="text-sm text-blue-600 dark:text-blue-400 bg-blue-50 dark:bg-blue-900/30 px-3 py-1.5 rounded border border-blue-100 dark:border-blue-800/50 flex items-center gap-2">
                            <span class="w-2 h-2 rounded-full bg-blue-500 dark:bg-blue-400 animate-ping"></span>
                            重新計算中...
                        </div>
                    </div>
                    <!-- 只有圖表繪圖區可水平滾動，卡片外框不動 -->
                    <div class="overflow-x-auto bg-white dark:bg-dark">
                        <div id="bodePlot" class="min-w-[580px] w-full h-[800px] z-10 relative bg-white dark:bg-dark">
                        </div>
                    </div>
                </div>

                <!-- 時域分析 -->
                <div
                    class="bg-white dark:bg-white lg:dark:bg-dark lg:rounded-xl border-b lg:border border-slate-100 lg:border-slate-200 dark:border-gray-100 lg:dark:border-gray-800 lg:shadow-md p-0 lg:p-1 flex-shrink-0 relative transition-colors duration-300">
                    <div
                        class="px-5 py-4 border-b border-slate-100 dark:border-gray-800 bg-white dark:bg-dark backdrop-blur-sm z-10 relative">
                        <h3 class="font-bold text-slate-800 dark:text-gray-200 tracking-wide">2. 時域訊號探討</h3>
                    </div>
                    <div class="p-6 z-10 relative bg-white dark:bg-dark transition-colors duration-300">
                        <p class="text-base text-slate-500 dark:text-gray-400 mb-4">請上傳包含時域訊號的 CSV 檔案，系統會套用上述設定的差分濾波器。
                        </p>
                        <div
                            class="flex items-center flex-wrap gap-4 mb-6 p-4 bg-slate-50 dark:bg-gray-900/50 rounded-lg border border-slate-100 dark:border-gray-800">
                            <label
                                class="cursor-pointer bg-blue-600 hover:bg-blue-500 text-white px-5 py-3 rounded-lg text-base font-semibold transition-all shadow-md hover:shadow-blue-500/20 flex items-center gap-2">
                                <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                        d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-8l-4-4m0 0L8 8m4-4v12"></path>
                                </svg>
                                上傳輸入訊號 (CSV)
                                <input type="file" ref="fileInput" accept=".csv" @change="handleFileUpload"
                                    class="hidden">
                            </label>
                            <span v-if="csvFile" class="text-base text-emerald-600 dark:text-emerald-400 font-mono">{{
                                csvFile.name }}</span>

                            <div v-if="csvColumns.length > 0"
                                class="h-8 border-l border-slate-200 dark:border-gray-700 mx-2"></div>

                            <div v-if="csvColumns.length > 0" class="flex items-center gap-2">
                                <span class="text-sm text-slate-400">訊號欄位:</span>
                                <select v-model="selectedColumn"
                                    class="bg-white dark:bg-gray-800 border border-slate-200 dark:border-gray-700 rounded-lg p-3 text-base focus:border-blue-500 outline-none text-slate-900 dark:text-gray-100">
                                    <option v-for="(col, idx) in csvColumns" :key="idx" :value="idx">{{ col }}</option>
                                </select>
                            </div>

                            <button v-if="csvFile" @click="processFilter"
                                class="bg-emerald-600 hover:bg-emerald-500 text-white px-6 py-3 rounded-lg text-base font-semibold transition-all shadow-md hover:shadow-emerald-500/20 disabled:opacity-50 disabled:cursor-not-allowed"
                                :disabled="loadingFilter">
                                {{ loadingFilter ? '處理中...' : '套用當前濾波器' }}
                            </button>

                            <button v-if="filterDone" @click="downloadCsv"
                                class="ml-auto bg-slate-700 hover:bg-slate-600 text-white px-5 py-3 rounded-lg text-base font-semibold transition-all flex items-center gap-2">
                                <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                        d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"></path>
                                </svg>
                                匯出結果
                            </button>
                        </div>

                        <!-- 資料預覽 -->
                        <div v-if="csvPreview.length > 0" class="mb-6">
                            <h4
                                class="text-sm font-semibold text-slate-500 dark:text-gray-400 mb-2 uppercase tracking-tight">
                                資料預覽 (前五筆):</h4>
                            <div
                                class="overflow-x-auto rounded-xl border border-slate-100 dark:border-gray-800 shadow-inner">
                                <table class="w-full text-sm text-left">
                                    <thead>
                                        <tr class="bg-slate-50 dark:bg-gray-800/50">
                                            <th v-for="col in csvColumns" :key="col"
                                                class="px-4 py-3 font-semibold text-slate-700 dark:text-gray-300">{{ col
                                                }}</th>
                                        </tr>
                                    </thead>
                                    <tbody class="divide-y divide-slate-100 dark:divide-gray-800">
                                        <tr v-for="(row, ri) in csvPreview" :key="ri"
                                            class="hover:bg-slate-50/50 dark:hover:bg-gray-800/30 transition-colors">
                                            <td v-for="(val, ci) in row" :key="ci"
                                                class="px-4 py-2 font-mono text-slate-600 dark:text-gray-400">{{ val }}
                                            </td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>

                        <!-- 波形比較圖 -->
                        <h4 v-if="filterDone" class="text-base font-bold text-slate-800 dark:text-gray-200 mb-3">波形比較圖
                        </h4>
                        <!-- 只有圖表繪圖區可水平滾動，卡片外框不動 -->
                        <div class="overflow-x-auto bg-white dark:bg-dark">
                            <div id="timePlot" class="min-w-[580px] w-full h-[400px] bg-white dark:bg-dark"
                                v-show="filterDone"></div>
                        </div>

                        <div v-if="!filterDone && !loadingFilter && csvPreview.length === 0"
                            class="h-[300px] flex flex-col items-center justify-center text-slate-400 dark:text-gray-500 border-2 border-dashed border-slate-200 dark:border-gray-800 rounded-xl bg-slate-50/50 dark:bg-gray-900/30">
                            <svg class="w-12 h-12 mb-3 opacity-50" fill="none" stroke="currentColor"
                                viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"
                                    d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z">
                                </path>
                            </svg>
                            <p>請上傳包含時間序列的 CSV 檔案進行測試</p>
                        </div>
                    </div>
                </div>
            </main>
        </div>
        <!-- 全域置底版權宣告 -->
        <footer
            class="bg-white dark:bg-dark border-t border-slate-200 dark:border-gray-800 py-2 text-center z-20 transition-colors duration-300">
            <p class="text-xs text-slate-400 dark:text-gray-600">© 2026 喆富創新科技股份有限公司. All rights reserved.</p>
        </footer>
    </div>
</template>

<script src="./app-options.js"></script>
