<!-- Value Source Editor Modal -->
<div id="value-source-modal" class="modal" role="dialog" aria-modal="true" aria-labelledby="value-source-modal-title">
    <div class="modal-content">
        <div class="modal-header">
            <h2 id="value-source-modal-title" data-i18n="value_source.add">Add Value Source</h2>
            <button class="modal-close-btn" onclick="closeValueSourceModal()" data-i18n-aria-label="aria.close">&#x2715;</button>
        </div>
        <div class="modal-body">
            <form id="value-source-form" onsubmit="return false;">
                <input type="hidden" id="value-source-id">

                <div id="value-source-error" class="error-message" style="display: none;"></div>

                <!-- Name -->
                <div class="form-group">
                    <div class="label-row">
                        <label for="value-source-name" data-i18n="value_source.name">Name:</label>
                        <button type="button" class="hint-toggle" onclick="toggleHint(this)" title="?" data-i18n-aria-label="aria.hint">?</button>
                    </div>
                    <small class="input-hint" style="display:none" data-i18n="value_source.name.hint">A descriptive name for this value source</small>
                    <input type="text" id="value-source-name" data-i18n-placeholder="value_source.name.placeholder" placeholder="Brightness Pulse" required>
                    <div id="value-source-tags-container"></div>
                </div>

                <!-- Type (hidden in edit mode since type is immutable) -->
                <div id="value-source-type-group" class="form-group">
                    <div class="label-row">
                        <label for="value-source-type" data-i18n="value_source.type">Type:</label>
                        <button type="button" class="hint-toggle" onclick="toggleHint(this)" title="?" data-i18n-aria-label="aria.hint">?</button>
                    </div>
                    <small class="input-hint" style="display:none" data-i18n="value_source.type.hint">Static outputs a constant value. Animated cycles through a waveform. Audio reacts to sound input.</small>
                    <select id="value-source-type" onchange="onValueSourceTypeChange()">
                        <option value="static" data-i18n="value_source.type.static">Static</option>
                        <option value="animated" data-i18n="value_source.type.animated">Animated</option>
                        <option value="audio" data-i18n="value_source.type.audio">Audio</option>
                        <option value="adaptive_time" data-i18n="value_source.type.adaptive_time">Adaptive (Time of Day)</option>
                        <option value="adaptive_scene" data-i18n="value_source.type.adaptive_scene">Adaptive (Scene)</option>
                        <option value="daylight" data-i18n="value_source.type.daylight">Daylight Cycle</option>
                        <option value="static_color" data-i18n="value_source.type.static_color">Static Color</option>
                        <option value="animated_color" data-i18n="value_source.type.animated_color">Animated Color</option>
                        <option value="adaptive_time_color" data-i18n="value_source.type.adaptive_time_color">Time Color</option>
                        <option value="ha_entity" data-i18n="value_source.type.ha_entity">HA Entity</option>
                        <option value="gradient_map" data-i18n="value_source.type.gradient_map">Gradient Map</option>
                        <option value="css_extract" data-i18n="value_source.type.css_extract">Strip Extract</option>
                        <option value="system_metrics" data-i18n="value_source.type.system_metrics">System Metrics</option>
                    </select>
                </div>

                <!-- Static fields -->
                <div id="value-source-static-section">
                    <div class="form-group">
                        <div class="label-row">
                            <label for="value-source-value"><span data-i18n="value_source.value">Value:</span> <span id="value-source-value-display">1.0</span></label>
                            <button type="button" class="hint-toggle" onclick="toggleHint(this)" title="?" data-i18n-aria-label="aria.hint">?</button>
                        </div>
                        <small class="input-hint" style="display:none" data-i18n="value_source.value.hint">Constant output value (0.0 = off, 1.0 = full brightness)</small>
                        <input type="range" id="value-source-value" min="0" max="1" step="0.01" value="1.0"
                            oninput="document.getElementById('value-source-value-display').textContent = this.value">
                    </div>
                </div>

                <!-- Animated fields -->
                <div id="value-source-animated-section" style="display:none">
                    <div class="form-group">
                        <div class="label-row">
                            <label for="value-source-waveform" data-i18n="value_source.waveform">Waveform:</label>
                            <button type="button" class="hint-toggle" onclick="toggleHint(this)" title="?" data-i18n-aria-label="aria.hint">?</button>
                        </div>
                        <small class="input-hint" style="display:none" data-i18n="value_source.waveform.hint">Shape of the brightness animation cycle</small>
                        <select id="value-source-waveform">
                            <option value="sine" data-i18n="value_source.waveform.sine">Sine</option>
                            <option value="triangle" data-i18n="value_source.waveform.triangle">Triangle</option>
                            <option value="square" data-i18n="value_source.waveform.square">Square</option>
                            <option value="sawtooth" data-i18n="value_source.waveform.sawtooth">Sawtooth</option>
                        </select>
                        <canvas id="value-source-waveform-preview" width="200" height="60"
                            style="display:block;margin-top:8px;border-radius:6px;background:var(--surface-2,#1e1e2e);width:100%;max-width:200px;height:60px;"></canvas>
                    </div>

                    <div class="form-group">
                        <div class="label-row">
                            <label for="value-source-speed"><span data-i18n="value_source.speed">Speed (cpm):</span> <span id="value-source-speed-display">10</span></label>
                            <button type="button" class="hint-toggle" onclick="toggleHint(this)" title="?" data-i18n-aria-label="aria.hint">?</button>
                        </div>
                        <small class="input-hint" style="display:none" data-i18n="value_source.speed.hint">Cycles per minute — how fast the waveform repeats (1 = very slow, 120 = very fast)</small>
                        <input type="range" id="value-source-speed" min="1" max="120" step="1" value="10"
                            oninput="document.getElementById('value-source-speed-display').textContent = this.value">
                    </div>

                    <div class="form-group">
                        <div class="label-row">
                            <label for="value-source-min-value"><span data-i18n="value_source.min_value">Min Value:</span> <span id="value-source-min-value-display">0</span></label>
                            <button type="button" class="hint-toggle" onclick="toggleHint(this)" title="?" data-i18n-aria-label="aria.hint">?</button>
                        </div>
                        <small class="input-hint" style="display:none" data-i18n="value_source.min_value.hint">Minimum output of the waveform cycle</small>
                        <input type="range" id="value-source-min-value" min="0" max="1" step="0.01" value="0"
                            oninput="document.getElementById('value-source-min-value-display').textContent = this.value">
                    </div>

                    <div class="form-group">
                        <div class="label-row">
                            <label for="value-source-max-value"><span data-i18n="value_source.max_value">Max Value:</span> <span id="value-source-max-value-display">1</span></label>
                            <button type="button" class="hint-toggle" onclick="toggleHint(this)" title="?" data-i18n-aria-label="aria.hint">?</button>
                        </div>
                        <small class="input-hint" style="display:none" data-i18n="value_source.max_value.hint">Maximum output of the waveform cycle</small>
                        <input type="range" id="value-source-max-value" min="0" max="1" step="0.01" value="1"
                            oninput="document.getElementById('value-source-max-value-display').textContent = this.value">
                    </div>
                </div>

                <!-- Audio fields -->
                <div id="value-source-audio-section" style="display:none">
                    <div class="form-group">
                        <div class="label-row">
                            <label for="value-source-audio-source" data-i18n="value_source.audio_source">Audio Source:</label>
                            <button type="button" class="hint-toggle" onclick="toggleHint(this)" title="?" data-i18n-aria-label="aria.hint">?</button>
                        </div>
                        <small class="input-hint" style="display:none" data-i18n="value_source.audio_source.hint">Mono audio source to read audio levels from</small>
                        <select id="value-source-audio-source">
                            <!-- populated dynamically with mono audio sources -->
                        </select>
                    </div>

                    <div class="form-group">
                        <div class="label-row">
                            <label for="value-source-mode" data-i18n="value_source.mode">Mode:</label>
                            <button type="button" class="hint-toggle" onclick="toggleHint(this)" title="?" data-i18n-aria-label="aria.hint">?</button>
                        </div>
                        <small class="input-hint" style="display:none" data-i18n="value_source.mode.hint">RMS measures average volume. Peak tracks loudest moments. Beat triggers on rhythm.</small>
                        <select id="value-source-mode">
                            <option value="rms" data-i18n="value_source.mode.rms">RMS (Volume)</option>
                            <option value="peak" data-i18n="value_source.mode.peak">Peak</option>
                            <option value="beat" data-i18n="value_source.mode.beat">Beat</option>
                        </select>
                    </div>

                    <div class="form-group">
                        <div class="label-row">
                            <label for="value-source-auto-gain" data-i18n="value_source.auto_gain">Auto Gain:</label>
                            <button type="button" class="hint-toggle" onclick="toggleHint(this)" title="?" data-i18n-aria-label="aria.hint">?</button>
                        </div>
                        <small class="input-hint" style="display:none" data-i18n="value_source.auto_gain.hint">Automatically normalize audio levels so output uses the full range, regardless of input volume</small>
                        <label class="toggle-label">
                            <input type="checkbox" id="value-source-auto-gain">
                            <span data-i18n="value_source.auto_gain.enable">Enable auto-gain</span>
                        </label>
                    </div>

                    <div class="form-group">
                        <div class="label-row">
                            <label for="value-source-sensitivity"><span data-i18n="value_source.sensitivity">Sensitivity:</span> <span id="value-source-sensitivity-display">1.0</span></label>
                            <button type="button" class="hint-toggle" onclick="toggleHint(this)" title="?" data-i18n-aria-label="aria.hint">?</button>
                        </div>
                        <small class="input-hint" style="display:none" data-i18n="value_source.sensitivity.hint">Gain multiplier for the audio signal (higher = more reactive)</small>
                        <input type="range" id="value-source-sensitivity" min="0.1" max="20" step="0.1" value="1.0"
                            oninput="document.getElementById('value-source-sensitivity-display').textContent = this.value">
                    </div>

                    <div class="form-group">
                        <div class="label-row">
                            <label for="value-source-smoothing"><span data-i18n="value_source.smoothing">Smoothing:</span> <span id="value-source-smoothing-display">0.3</span></label>
                            <button type="button" class="hint-toggle" onclick="toggleHint(this)" title="?" data-i18n-aria-label="aria.hint">?</button>
                        </div>
                        <small class="input-hint" style="display:none" data-i18n="value_source.smoothing.hint">Temporal smoothing (0 = instant response, 1 = very smooth/slow)</small>
                        <input type="range" id="value-source-smoothing" min="0" max="1" step="0.05" value="0.3"
                            oninput="document.getElementById('value-source-smoothing-display').textContent = this.value">
                    </div>

                    <div class="form-group">
                        <div class="label-row">
                            <label for="value-source-audio-min-value"><span data-i18n="value_source.audio_min_value">Min Value:</span> <span id="value-source-audio-min-value-display">0</span></label>
                            <button type="button" class="hint-toggle" onclick="toggleHint(this)" title="?" data-i18n-aria-label="aria.hint">?</button>
                        </div>
                        <small class="input-hint" style="display:none" data-i18n="value_source.audio_min_value.hint">Output when audio is silent (e.g. 0.3 = 30% brightness floor)</small>
                        <input type="range" id="value-source-audio-min-value" min="0" max="1" step="0.01" value="0"
                            oninput="document.getElementById('value-source-audio-min-value-display').textContent = this.value">
                    </div>

                    <div class="form-group">
                        <div class="label-row">
                            <label for="value-source-audio-max-value"><span data-i18n="value_source.audio_max_value">Max Value:</span> <span id="value-source-audio-max-value-display">1</span></label>
                            <button type="button" class="hint-toggle" onclick="toggleHint(this)" title="?" data-i18n-aria-label="aria.hint">?</button>
                        </div>
                        <small class="input-hint" style="display:none" data-i18n="value_source.audio_max_value.hint">Output at maximum audio level</small>
                        <input type="range" id="value-source-audio-max-value" min="0" max="1" step="0.01" value="1"
                            oninput="document.getElementById('value-source-audio-max-value-display').textContent = this.value">
                    </div>
                </div>

                <!-- Adaptive Time of Day fields -->
                <div id="value-source-adaptive-time-section" style="display:none">
                    <div class="form-group">
                        <div class="label-row">
                            <label data-i18n="value_source.schedule">Schedule:</label>
                            <button type="button" class="hint-toggle" onclick="toggleHint(this)" title="?" data-i18n-aria-label="aria.hint">?</button>
                        </div>
                        <small class="input-hint" style="display:none" data-i18n="value_source.schedule.hint">Define at least 2 time points. Brightness interpolates linearly between them, wrapping at midnight.</small>
                        <div id="value-source-schedule-list" class="schedule-list"></div>
                        <button type="button" class="btn btn-secondary btn-sm" onclick="addSchedulePoint()" data-i18n="value_source.schedule.add">+ Add Point</button>
                    </div>
                </div>

                <!-- Adaptive Scene fields -->
                <div id="value-source-adaptive-scene-section" style="display:none">
                    <div class="form-group">
                        <div class="label-row">
                            <label for="value-source-picture-source" data-i18n="value_source.picture_source">Picture Source:</label>
                            <button type="button" class="hint-toggle" onclick="toggleHint(this)" title="?" data-i18n-aria-label="aria.hint">?</button>
                        </div>
                        <small class="input-hint" style="display:none" data-i18n="value_source.picture_source.hint">The picture source whose frames will be analyzed for average brightness.</small>
                        <select id="value-source-picture-source">
                            <!-- populated dynamically -->
                        </select>
                    </div>

                    <div class="form-group">
                        <div class="label-row">
                            <label for="value-source-scene-behavior" data-i18n="value_source.scene_behavior">Behavior:</label>
                            <button type="button" class="hint-toggle" onclick="toggleHint(this)" title="?" data-i18n-aria-label="aria.hint">?</button>
                        </div>
                        <small class="input-hint" style="display:none" data-i18n="value_source.scene_behavior.hint">Complement: dark scene = high brightness (ideal for ambient backlight). Match: bright scene = high brightness.</small>
                        <select id="value-source-scene-behavior">
                            <option value="complement" data-i18n="value_source.scene_behavior.complement">Complement (dark → bright)</option>
                            <option value="match" data-i18n="value_source.scene_behavior.match">Match (bright → bright)</option>
                        </select>
                    </div>

                    <div class="form-group">
                        <div class="label-row">
                            <label for="value-source-scene-sensitivity"><span data-i18n="value_source.sensitivity">Sensitivity:</span> <span id="value-source-scene-sensitivity-display">1.0</span></label>
                            <button type="button" class="hint-toggle" onclick="toggleHint(this)" title="?" data-i18n-aria-label="aria.hint">?</button>
                        </div>
                        <small class="input-hint" style="display:none" data-i18n="value_source.scene_sensitivity.hint">Gain multiplier for the luminance signal (higher = more reactive to brightness changes)</small>
                        <input type="range" id="value-source-scene-sensitivity" min="0.1" max="5" step="0.1" value="1.0"
                            oninput="document.getElementById('value-source-scene-sensitivity-display').textContent = this.value">
                    </div>

                    <div class="form-group">
                        <div class="label-row">
                            <label for="value-source-scene-smoothing"><span data-i18n="value_source.smoothing">Smoothing:</span> <span id="value-source-scene-smoothing-display">0.3</span></label>
                            <button type="button" class="hint-toggle" onclick="toggleHint(this)" title="?" data-i18n-aria-label="aria.hint">?</button>
                        </div>
                        <small class="input-hint" style="display:none" data-i18n="value_source.smoothing.hint">Temporal smoothing (0 = instant response, 1 = very smooth transitions)</small>
                        <input type="range" id="value-source-scene-smoothing" min="0" max="1" step="0.05" value="0.3"
                            oninput="document.getElementById('value-source-scene-smoothing-display').textContent = this.value">
                    </div>
                </div>

                <!-- Daylight fields -->
                <div id="value-source-daylight-section" style="display:none">
                    <div id="value-source-daylight-speed-group" class="form-group">
                        <div class="label-row">
                            <label for="value-source-daylight-speed"><span data-i18n="value_source.daylight.speed">Speed:</span> <span id="value-source-daylight-speed-display">1.0</span></label>
                            <button type="button" class="hint-toggle" onclick="toggleHint(this)" title="?" data-i18n-aria-label="aria.hint">?</button>
                        </div>
                        <small class="input-hint" style="display:none" data-i18n="value_source.daylight.speed.hint">Cycle speed multiplier. 1.0 = full day/night cycle in ~4 minutes.</small>
                        <input type="range" id="value-source-daylight-speed" min="0.1" max="10" step="0.1" value="1.0"
                            oninput="document.getElementById('value-source-daylight-speed-display').textContent = parseFloat(this.value).toFixed(1)">
                    </div>

                    <div class="form-group">
                        <div class="label-row">
                            <label for="value-source-daylight-real-time" data-i18n="value_source.daylight.use_real_time">Use Real Time:</label>
                            <button type="button" class="hint-toggle" onclick="toggleHint(this)" title="?" data-i18n-aria-label="aria.hint">?</button>
                        </div>
                        <small class="input-hint" style="display:none" data-i18n="value_source.daylight.use_real_time.hint">When enabled, brightness follows the actual time of day. Speed is ignored.</small>
                        <label class="toggle-label">
                            <input type="checkbox" id="value-source-daylight-real-time" onchange="onDaylightVSRealTimeChange()">
                            <span data-i18n="value_source.daylight.enable_real_time">Follow wall clock</span>
                        </label>
                    </div>

                    <div class="form-group">
                        <div class="label-row">
                            <label for="value-source-daylight-latitude"><span data-i18n="value_source.daylight.latitude">Latitude:</span> <span id="value-source-daylight-latitude-display">50</span>&deg;</label>
                            <button type="button" class="hint-toggle" onclick="toggleHint(this)" title="?" data-i18n-aria-label="aria.hint">?</button>
                        </div>
                        <small class="input-hint" style="display:none" data-i18n="value_source.daylight.latitude.hint">Your geographic latitude (-90 to 90). Affects sunrise/sunset timing in real-time mode.</small>
                        <input type="range" id="value-source-daylight-latitude" min="-90" max="90" step="1" value="50"
                            oninput="document.getElementById('value-source-daylight-latitude-display').textContent = parseInt(this.value)">
                    </div>
                </div>

                <!-- Static Color fields -->
                <div id="value-source-static-color-section" style="display:none">
                    <div class="form-group">
                        <div class="label-row">
                            <label data-i18n="value_source.static_color.color">Color:</label>
                        </div>
                        <input type="color" id="value-source-static-color" value="#ffffff">
                    </div>
                </div>

                <!-- Animated Color fields -->
                <div id="value-source-animated-color-section" style="display:none">
                    <div class="form-group">
                        <div class="label-row">
                            <label data-i18n="value_source.animated_color.colors">Colors:</label>
                        </div>
                        <div id="value-source-animated-color-list"></div>
                        <button type="button" class="btn btn-sm" onclick="addAnimatedColor()">+ Add Color</button>
                    </div>
                    <div class="form-group">
                        <div class="label-row">
                            <label for="value-source-animated-color-speed">
                                <span data-i18n="value_source.animated_color.speed">Speed (cpm):</span>
                                <span id="value-source-animated-color-speed-val">10.0</span>
                            </label>
                        </div>
                        <input type="range" id="value-source-animated-color-speed" min="0.1" max="120" step="0.1" value="10.0"
                            oninput="document.getElementById('value-source-animated-color-speed-val').textContent = parseFloat(this.value).toFixed(1)">
                    </div>
                    <div class="form-group">
                        <div class="label-row">
                            <label for="value-source-animated-color-easing" data-i18n="value_source.animated_color.easing">Easing:</label>
                        </div>
                        <select id="value-source-animated-color-easing">
                            <option value="linear">Linear</option>
                            <option value="step">Step</option>
                        </select>
                    </div>
                </div>

                <!-- Adaptive Time Color fields -->
                <div id="value-source-adaptive-time-color-section" style="display:none">
                    <div class="form-group">
                        <div class="label-row">
                            <label data-i18n="value_source.adaptive_time_color.schedule">Color Schedule:</label>
                        </div>
                        <div id="value-source-color-schedule-list"></div>
                        <button type="button" class="btn btn-sm" onclick="addColorSchedulePoint()">+ Add Point</button>
                    </div>
                </div>

                <!-- HA Entity fields -->
                <div id="value-source-ha-entity-section" style="display:none">
                    <div class="form-group">
                        <div class="label-row">
                            <label for="value-source-ha-source" data-i18n="value_source.ha_source">HA Connection:</label>
                            <button type="button" class="hint-toggle" onclick="toggleHint(this)" title="?" data-i18n-aria-label="aria.hint">?</button>
                        </div>
                        <small class="input-hint" style="display:none" data-i18n="value_source.ha_source.hint">Home Assistant connection to read entities from</small>
                        <select id="value-source-ha-source">
                        </select>
                    </div>

                    <div class="form-group">
                        <div class="label-row">
                            <label for="value-source-entity-id" data-i18n="value_source.entity_id">Entity:</label>
                            <button type="button" class="hint-toggle" onclick="toggleHint(this)" title="?" data-i18n-aria-label="aria.hint">?</button>
                        </div>
                        <small class="input-hint" style="display:none" data-i18n="value_source.entity_id.hint">HA entity ID (e.g. sensor.temperature)</small>
                        <select id="value-source-entity-id">
                        </select>
                    </div>

                    <div class="form-group">
                        <div class="label-row">
                            <label for="value-source-attribute" data-i18n="value_source.attribute">Attribute (optional):</label>
                            <button type="button" class="hint-toggle" onclick="toggleHint(this)" title="?" data-i18n-aria-label="aria.hint">?</button>
                        </div>
                        <small class="input-hint" style="display:none" data-i18n="value_source.attribute.hint">Read a specific attribute instead of the entity state</small>
                        <input type="text" id="value-source-attribute" placeholder="">
                    </div>

                    <div class="form-group">
                        <div class="label-row">
                            <label for="value-source-min-ha-value"><span data-i18n="value_source.min_ha_value">Min HA Value:</span> <span id="value-source-min-ha-value-display">0</span></label>
                            <button type="button" class="hint-toggle" onclick="toggleHint(this)" title="?" data-i18n-aria-label="aria.hint">?</button>
                        </div>
                        <small class="input-hint" style="display:none" data-i18n="value_source.min_ha_value.hint">Raw HA value that maps to 0% output</small>
                        <input type="number" id="value-source-min-ha-value" step="any" value="0">
                    </div>

                    <div class="form-group">
                        <div class="label-row">
                            <label for="value-source-max-ha-value"><span data-i18n="value_source.max_ha_value">Max HA Value:</span> <span id="value-source-max-ha-value-display">100</span></label>
                            <button type="button" class="hint-toggle" onclick="toggleHint(this)" title="?" data-i18n-aria-label="aria.hint">?</button>
                        </div>
                        <small class="input-hint" style="display:none" data-i18n="value_source.max_ha_value.hint">Raw HA value that maps to 100% output</small>
                        <input type="number" id="value-source-max-ha-value" step="any" value="100">
                    </div>

                    <div class="form-group">
                        <div class="label-row">
                            <label for="value-source-ha-smoothing"><span data-i18n="value_source.smoothing">Smoothing:</span> <span id="value-source-ha-smoothing-display">0</span></label>
                            <button type="button" class="hint-toggle" onclick="toggleHint(this)" title="?" data-i18n-aria-label="aria.hint">?</button>
                        </div>
                        <small class="input-hint" style="display:none" data-i18n="value_source.smoothing.hint">Temporal smoothing (0 = instant, 1 = very smooth)</small>
                        <input type="range" id="value-source-ha-smoothing" min="0" max="1" step="0.05" value="0"
                            oninput="document.getElementById('value-source-ha-smoothing-display').textContent = this.value">
                    </div>
                </div>

                <!-- Gradient Map fields -->
                <div id="value-source-gradient-map-section" style="display:none">
                    <div class="form-group">
                        <div class="label-row">
                            <label for="value-source-gradient-input" data-i18n="value_source.input_source">Input Value Source:</label>
                            <button type="button" class="hint-toggle" onclick="toggleHint(this)" title="?" data-i18n-aria-label="aria.hint">?</button>
                        </div>
                        <small class="input-hint" style="display:none" data-i18n="value_source.input_source.hint">Float value source (0-1) to map through the gradient</small>
                        <select id="value-source-gradient-input">
                        </select>
                    </div>

                    <div class="form-group">
                        <div class="label-row">
                            <label for="value-source-gradient-id" data-i18n="value_source.gradient_stops">Gradient:</label>
                            <button type="button" class="hint-toggle" onclick="toggleHint(this)" title="?" data-i18n-aria-label="aria.hint">?</button>
                        </div>
                        <small class="input-hint" style="display:none" data-i18n="value_source.gradient_stops.hint">Select a gradient preset to map through</small>
                        <select id="value-source-gradient-id">
                        </select>
                    </div>

                    <div class="form-group">
                        <div class="label-row">
                            <label for="value-source-gradient-easing" data-i18n="value_source.easing">Interpolation:</label>
                        </div>
                        <select id="value-source-gradient-easing">
                            <option value="linear">Linear</option>
                            <option value="step">Step</option>
                        </select>
                    </div>
                </div>

                <!-- CSS Extract fields -->
                <div id="value-source-css-extract-section" style="display:none">
                    <div class="form-group">
                        <div class="label-row">
                            <label for="value-source-css-source" data-i18n="value_source.css_source">Color Strip Source:</label>
                            <button type="button" class="hint-toggle" onclick="toggleHint(this)" title="?" data-i18n-aria-label="aria.hint">?</button>
                        </div>
                        <small class="input-hint" style="display:none" data-i18n="value_source.css_source.hint">Color strip source to extract color from</small>
                        <select id="value-source-css-source">
                        </select>
                    </div>

                    <div class="form-group">
                        <div class="label-row">
                            <label for="value-source-led-start"><span data-i18n="value_source.led_start">LED Start:</span></label>
                            <button type="button" class="hint-toggle" onclick="toggleHint(this)" title="?" data-i18n-aria-label="aria.hint">?</button>
                        </div>
                        <small class="input-hint" style="display:none" data-i18n="value_source.led_start.hint">First LED in the range (0-based)</small>
                        <input type="number" id="value-source-led-start" min="0" step="1" value="0">
                    </div>

                    <div class="form-group">
                        <div class="label-row">
                            <label for="value-source-led-end"><span data-i18n="value_source.led_end">LED End:</span></label>
                            <button type="button" class="hint-toggle" onclick="toggleHint(this)" title="?" data-i18n-aria-label="aria.hint">?</button>
                        </div>
                        <small class="input-hint" style="display:none" data-i18n="value_source.led_end.hint">Last LED in the range (-1 = whole strip)</small>
                        <input type="number" id="value-source-led-end" min="-1" step="1" value="-1">
                    </div>
                </div>

                <!-- System Metrics fields -->
                <div id="value-source-system-metrics-section" style="display:none">
                    <div class="form-group">
                        <div class="label-row">
                            <label for="value-source-metric" data-i18n="value_source.metric">Metric:</label>
                            <button type="button" class="hint-toggle" onclick="toggleHint(this)" title="?" data-i18n-aria-label="aria.hint">?</button>
                        </div>
                        <small class="input-hint" style="display:none" data-i18n="value_source.metric.hint">System metric to monitor. Some metrics may be unavailable depending on hardware.</small>
                        <select id="value-source-metric">
                            <option value="cpu_load">CPU Load</option>
                            <option value="cpu_temp">CPU Temperature</option>
                            <option value="gpu_load">GPU Load</option>
                            <option value="gpu_temp">GPU Temperature</option>
                            <option value="ram_usage">RAM Usage</option>
                            <option value="disk_usage">Disk Usage</option>
                            <option value="network_rx">Network RX</option>
                            <option value="network_tx">Network TX</option>
                            <option value="battery_level">Battery Level</option>
                            <option value="fan_speed">Fan Speed</option>
                        </select>
                    </div>

                    <div id="value-source-sysmetric-range" style="display:none">
                        <div class="form-group">
                            <label for="value-source-sysmetric-min"><span data-i18n="value_source.sysmetric.min">Min Value:</span></label>
                            <input type="number" id="value-source-sysmetric-min" step="any" value="0">
                        </div>
                        <div class="form-group">
                            <label for="value-source-sysmetric-max"><span data-i18n="value_source.sysmetric.max">Max Value:</span></label>
                            <input type="number" id="value-source-sysmetric-max" step="any" value="100">
                        </div>
                    </div>

                    <div id="value-source-sysmetric-network" style="display:none">
                        <div class="form-group">
                            <div class="label-row">
                                <label for="value-source-max-rate" data-i18n="value_source.max_rate">Max Rate (bytes/sec):</label>
                                <button type="button" class="hint-toggle" onclick="toggleHint(this)" title="?" data-i18n-aria-label="aria.hint">?</button>
                            </div>
                            <small class="input-hint" style="display:none" data-i18n="value_source.max_rate.hint">Maximum expected network rate in bytes/sec. 125000000 = 1 Gbps.</small>
                            <input type="number" id="value-source-max-rate" min="1" step="1" value="125000000">
                        </div>
                    </div>

                    <div id="value-source-sysmetric-disk" style="display:none">
                        <div class="form-group">
                            <div class="label-row">
                                <label for="value-source-disk-path" data-i18n="value_source.disk_path">Disk Path:</label>
                                <button type="button" class="hint-toggle" onclick="toggleHint(this)" title="?" data-i18n-aria-label="aria.hint">?</button>
                            </div>
                            <small class="input-hint" style="display:none" data-i18n="value_source.disk_path.hint">Disk mount point or drive letter (e.g. / or C:\)</small>
                            <input type="text" id="value-source-disk-path" placeholder="/" value="">
                        </div>
                    </div>

                    <div id="value-source-sysmetric-sensor" style="display:none">
                        <div class="form-group">
                            <div class="label-row">
                                <label for="value-source-sensor-label" data-i18n="value_source.sensor_label">Sensor Label:</label>
                                <button type="button" class="hint-toggle" onclick="toggleHint(this)" title="?" data-i18n-aria-label="aria.hint">?</button>
                            </div>
                            <small class="input-hint" style="display:none" data-i18n="value_source.sensor_label.hint">Optional sensor name to pick a specific sensor (empty = first available)</small>
                            <input type="text" id="value-source-sensor-label" placeholder="" value="">
                        </div>
                    </div>

                    <div class="form-group">
                        <label for="value-source-poll-interval"><span data-i18n="value_source.poll_interval">Poll Interval:</span> <span id="value-source-poll-interval-display">1.0</span>s</label>
                        <input type="range" id="value-source-poll-interval" min="0.5" max="10" step="0.5" value="1"
                            oninput="document.getElementById('value-source-poll-interval-display').textContent = this.value">
                    </div>

                    <div class="form-group">
                        <label for="value-source-sysmetric-smoothing"><span data-i18n="value_source.smoothing">Smoothing:</span> <span id="value-source-sysmetric-smoothing-display">0</span></label>
                        <input type="range" id="value-source-sysmetric-smoothing" min="0" max="0.99" step="0.01" value="0"
                            oninput="document.getElementById('value-source-sysmetric-smoothing-display').textContent = this.value">
                    </div>
                </div>

                <!-- Game Event value source fields -->
                <div id="value-source-game-event-section" style="display:none">
                    <div class="form-group">
                        <div class="label-row">
                            <label for="value-source-game-integration" data-i18n="value_source.game_event.integration">Game Integration:</label>
                            <button type="button" class="hint-toggle" onclick="toggleHint(this)" title="?" data-i18n-aria-label="aria.hint">?</button>
                        </div>
                        <small class="input-hint" style="display:none" data-i18n="value_source.game_event.integration.hint">Select the game integration that provides events for this value source.</small>
                        <select id="value-source-game-integration">
                            <option value="">—</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <div class="label-row">
                            <label for="value-source-game-event-type" data-i18n="value_source.game_event.event_type">Event Type:</label>
                            <button type="button" class="hint-toggle" onclick="toggleHint(this)" title="?" data-i18n-aria-label="aria.hint">?</button>
                        </div>
                        <small class="input-hint" style="display:none" data-i18n="value_source.game_event.event_type.hint">The continuous game event to track (health, mana, ammo, etc.).</small>
                        <select id="value-source-game-event-type">
                            <option value="health">health</option>
                            <option value="armor">armor</option>
                            <option value="mana">mana</option>
                            <option value="ammo">ammo</option>
                            <option value="stamina">stamina</option>
                            <option value="shield">shield</option>
                            <option value="score">score</option>
                            <option value="gold">gold</option>
                            <option value="xp">xp</option>
                            <option value="level">level</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <div class="label-row">
                            <label for="value-source-ge-min"><span data-i18n="value_source.game_event.min_game_value">Min Game Value:</span> <span id="value-source-ge-min-display">0</span></label>
                            <button type="button" class="hint-toggle" onclick="toggleHint(this)" title="?" data-i18n-aria-label="aria.hint">?</button>
                        </div>
                        <small class="input-hint" style="display:none" data-i18n="value_source.game_event.min_game_value.hint">Raw game value that maps to output 0.0.</small>
                        <input type="number" id="value-source-ge-min" step="any" value="0">
                    </div>
                    <div class="form-group">
                        <div class="label-row">
                            <label for="value-source-ge-max"><span data-i18n="value_source.game_event.max_game_value">Max Game Value:</span> <span id="value-source-ge-max-display">100</span></label>
                            <button type="button" class="hint-toggle" onclick="toggleHint(this)" title="?" data-i18n-aria-label="aria.hint">?</button>
                        </div>
                        <small class="input-hint" style="display:none" data-i18n="value_source.game_event.max_game_value.hint">Raw game value that maps to output 1.0.</small>
                        <input type="number" id="value-source-ge-max" step="any" value="100">
                    </div>
                    <div class="form-group">
                        <label for="value-source-ge-smoothing"><span data-i18n="value_source.game_event.smoothing">Smoothing:</span> <span id="value-source-ge-smoothing-display">0</span></label>
                        <input type="range" id="value-source-ge-smoothing" min="0" max="0.99" step="0.01" value="0"
                            oninput="document.getElementById('value-source-ge-smoothing-display').textContent = this.value">
                    </div>
                    <div class="form-group">
                        <div class="label-row">
                            <label for="value-source-ge-default"><span data-i18n="value_source.game_event.default_value">Default Value:</span> <span id="value-source-ge-default-display">0.5</span></label>
                            <button type="button" class="hint-toggle" onclick="toggleHint(this)" title="?" data-i18n-aria-label="aria.hint">?</button>
                        </div>
                        <small class="input-hint" style="display:none" data-i18n="value_source.game_event.default_value.hint">Output value when no events received within timeout.</small>
                        <input type="range" id="value-source-ge-default" min="0" max="1" step="0.01" value="0.5"
                            oninput="document.getElementById('value-source-ge-default-display').textContent = this.value">
                    </div>
                    <div class="form-group">
                        <div class="label-row">
                            <label for="value-source-ge-timeout"><span data-i18n="value_source.game_event.timeout">Timeout (s):</span> <span id="value-source-ge-timeout-display">5.0</span></label>
                            <button type="button" class="hint-toggle" onclick="toggleHint(this)" title="?" data-i18n-aria-label="aria.hint">?</button>
                        </div>
                        <small class="input-hint" style="display:none" data-i18n="value_source.game_event.timeout.hint">Seconds of silence before reverting to the default value.</small>
                        <input type="range" id="value-source-ge-timeout" min="1" max="60" step="0.5" value="5"
                            oninput="document.getElementById('value-source-ge-timeout-display').textContent = parseFloat(this.value).toFixed(1)">
                    </div>
                </div>

                <!-- Shared adaptive output range (shown for adaptive and daylight types) -->
                <div id="value-source-adaptive-range-section" style="display:none">
                    <div class="form-group">
                        <div class="label-row">
                            <label for="value-source-adaptive-min-value"><span data-i18n="value_source.adaptive_min_value">Min Value:</span> <span id="value-source-adaptive-min-value-display">0</span></label>
                            <button type="button" class="hint-toggle" onclick="toggleHint(this)" title="?" data-i18n-aria-label="aria.hint">?</button>
                        </div>
                        <small class="input-hint" style="display:none" data-i18n="value_source.adaptive_min_value.hint">Minimum output brightness</small>
                        <input type="range" id="value-source-adaptive-min-value" min="0" max="1" step="0.01" value="0"
                            oninput="document.getElementById('value-source-adaptive-min-value-display').textContent = this.value">
                    </div>

                    <div class="form-group">
                        <div class="label-row">
                            <label for="value-source-adaptive-max-value"><span data-i18n="value_source.adaptive_max_value">Max Value:</span> <span id="value-source-adaptive-max-value-display">1</span></label>
                            <button type="button" class="hint-toggle" onclick="toggleHint(this)" title="?" data-i18n-aria-label="aria.hint">?</button>
                        </div>
                        <small class="input-hint" style="display:none" data-i18n="value_source.adaptive_max_value.hint">Maximum output brightness</small>
                        <input type="range" id="value-source-adaptive-max-value" min="0" max="1" step="0.01" value="1"
                            oninput="document.getElementById('value-source-adaptive-max-value-display').textContent = this.value">
                    </div>
                </div>

                <!-- Description -->
                <div class="form-group">
                    <div class="label-row">
                        <label for="value-source-description" data-i18n="value_source.description">Description (optional):</label>
                        <button type="button" class="hint-toggle" onclick="toggleHint(this)" title="?" data-i18n-aria-label="aria.hint">?</button>
                    </div>
                    <small class="input-hint" style="display:none" data-i18n="value_source.description.hint">Optional notes about this value source</small>
                    <input type="text" id="value-source-description" data-i18n-placeholder="value_source.description.placeholder" placeholder="Describe this value source...">
                </div>

            </form>
        </div>
        <div class="modal-footer">
            <button class="btn btn-icon btn-secondary" onclick="closeValueSourceModal()" title="Cancel" data-i18n-title="settings.button.cancel" data-i18n-aria-label="aria.cancel">&#x2715;</button>
            <button class="btn btn-icon btn-primary" onclick="saveValueSource()" title="Save" data-i18n-title="settings.button.save" data-i18n-aria-label="aria.save">&#x2713;</button>
        </div>
    </div>
</div>
