Group settings with explicit modes and one save action

src/lib/fleet-settings.ts

@@ -101,10 +101,10 @@ export const fleetSettingLabels: Record<keyof FleetSettings, string> = {
     observationKeepDays: 'Routine operation history retention',
     restartConcurrency: 'Concurrent restarts',
     createConcurrency: 'Concurrent server startups',
-    destroyConcurrency: 'Concurrent server destructions',
+    destroyConcurrency: 'Concurrent server removals',
     restartConcurrencyPerHost: 'Concurrent restarts per host',
     createConcurrencyPerHost: 'Concurrent startups per host',
-    destroyConcurrencyPerHost: 'Concurrent destructions per host',
+    destroyConcurrencyPerHost: 'Concurrent server removals per host',
     lifecycleConcurrency: 'Combined lifecycle limit',
     rebuildConcurrency: 'Concurrent rebuilds',
     preparationConcurrency: 'Hosts preparing game files simultaneously',
@@ -137,6 +137,56 @@ export function settingMinimum(key: keyof FleetSettings): number {
     return ['restartConcurrency','createConcurrency','destroyConcurrency','gameFileKeepCount'].includes(key) ? 1 : 0;
 }
 
+export interface SettingsGroup {
+    id: string;
+    title: string;
+    description: string;
+    keys: (keyof FleetSettings)[];
+}
+
+/** Presentation groups do not change the saved schema or the section PATCH API. */
+export const settingsGroups: SettingsGroup[] = [
+    { id: 'concurrency', title: 'Concurrency', description: 'Limit simultaneous server operations and game-file preparation.', keys: concurrencyKeys },
+    { id: 'operation-history', title: 'Operation history', description: 'Campaigns, server operations, maintenance, and routine checks.', keys: [
+        'deployKeepDays', 'provisioningKeepDays', 'actionKeepDays', 'observationKeepDays', 'failureKeepDays',
+        'maintenanceKeepDays', 'recoveryKeepDays', 'betaKeepDays', 'historyKeepCount'
+    ] },
+    { id: 'matches-players', title: 'Matches & players', description: 'Saved matches, player records, and leaderboard history.', keys: ['matchKeepDays'] },
+    { id: 'telemetry-metrics', title: 'Telemetry & metrics', description: 'Game diagnostics, fleet activity, and host resource samples.', keys: [
+        'telemetryKeepDays', 'telemetryMaxPerServer', 'telemetryMaxTotal', 'metricsKeepDays', 'hostResourceKeepDays', 'instanceResourceKeepDays'
+    ] },
+    { id: 'files-versions', title: 'Files & versions', description: 'File snapshots, saved versions, game files, and abandoned uploads.', keys: [
+        'fileContentKeepDays', 'payloadKeepDays', 'versionKeepDays', 'versionKeepCount', 'gameFileGraceDays', 'gameFileKeepCount', 'uploadKeepDays'
+    ] },
+    { id: 'accounts-audit', title: 'Accounts & audit', description: 'Sign-in and account administration records.', keys: ['auditKeepDays'] }
+];
+
+/** Zero has a different meaning for age limits, count caps, and minimums. */
+export function settingZeroMode(key: keyof FleetSettings): string | null {
+    if (settingMinimum(key) > 0) return null;
+    if (additionalConcurrencyKeys.includes(key) || key === 'telemetryMaxPerServer' || key === 'telemetryMaxTotal') return 'No limit';
+    if (key === 'versionKeepDays') return 'No age expiry';
+    if (key === 'gameFileGraceDays') return 'No delay';
+    if (key === 'versionKeepCount' || key === 'historyKeepCount') return 'No minimum';
+    return key.endsWith('Days') ? 'Forever' : null;
+}
+
+export function settingUnit(key: keyof FleetSettings): 'days' | 'records' | 'versions' | 'operations' | 'hosts' {
+    if (key.endsWith('Days')) return 'days';
+    if (key === 'telemetryMaxPerServer' || key === 'telemetryMaxTotal' || key === 'historyKeepCount') return 'records';
+    if (key === 'versionKeepCount' || key === 'gameFileKeepCount') return 'versions';
+    return key === 'preparationConcurrency' ? 'hosts' : 'operations';
+}
+
+const settingNumbers = new Intl.NumberFormat('en-US', { maximumFractionDigits: 20 });
+export function settingDisplayValue(key: keyof FleetSettings, value: number): string {
+    if (!Number.isFinite(value)) return '—';
+    const zeroMode = settingZeroMode(key);
+    if (value === 0 && zeroMode) return zeroMode;
+    const unit = settingUnit(key);
+    return `${settingNumbers.format(value)} ${value === 1 ? unit.slice(0, -1) : unit}`;
+}
+
 export const settingHelp: Partial<Record<keyof FleetSettings, string>> = {
     provisioningKeepDays: 'Completed lifecycle history. Recovery, source workflows and cancellation dependencies remain protected.',
     actionKeepDays: 'Completed agent actions. Referenced commands and retry evidence remain protected. Expired actions keep compact receipts to prevent duplicate execution.',
@@ -147,15 +197,15 @@ export const settingHelp: Partial<Record<keyof FleetSettings, string>> = {
     instanceResourceKeepDays: 'Minute resource samples. Capacity learning continues to use its independent 24-hour window.',
     metricsKeepDays: 'Historical fleet occupancy and utilization samples.',
     telemetryKeepDays: 'Raw received telemetry diagnostics. Independent of saved matches. Count limits also apply.',
-    telemetryMaxPerServer: 'Count cap per server, in addition to the age limit. 0 disables this count cap.',
-    telemetryMaxTotal: 'Fleet-wide count cap for telemetry diagnostics. 0 disables this count cap.',
+    telemetryMaxPerServer: 'Count cap per server, in addition to the age limit.',
+    telemetryMaxTotal: 'Fleet-wide count cap for telemetry diagnostics, in addition to the age limit.',
     matchKeepDays: 'Completed and interrupted matches and player details. Expiry changes leaderboards and player totals; no lifetime aggregates are preserved.',
     betaKeepDays: 'Closed betas, revisions and test evidence, after linked campaigns and recovery work no longer need them.',
     fileContentKeepDays: 'Expired campaign file bodies are removed while summaries remain. Rollback becomes unavailable for those campaigns. Active beta snapshots remain protected.',
-    payloadKeepDays: 'Expire file bodies in completed launch recipes, commands and receipts while keeping their history. Unfinished work and protected records keep their files. 0 keeps files indefinitely.',
-    versionKeepDays: 'Unused script, plugin, configuration and baseline versions. Current and referenced versions are always protected.',
+    payloadKeepDays: 'Expire file bodies in completed launch recipes, commands and receipts while keeping their history. Unfinished work and protected records keep their files.',
+    versionKeepDays: 'Unused script, plugin, configuration and baseline versions. With no age expiry, the version count policy may still remove older unused versions. Current and referenced versions are always protected.',
     versionKeepCount: 'Keep at least this many recent versions per artifact. With no age expiry, a positive count removes older unused versions.',
-    gameFileGraceDays: 'Delay removal after a version becomes superseded. Latest files, referenced versions and offline host copies remain protected. 0 adds no delay.',
+    gameFileGraceDays: 'Delay removal after a version becomes superseded. Latest files, referenced versions and offline host copies remain protected.',
     gameFileKeepCount: 'Keep this many recent published versions per game, in addition to every referenced or protected version.',
     uploadKeepDays: 'Remove incomplete browser uploads after this many days without activity. Active transfers and publication are protected.',
     auditKeepDays: 'Recorded authentication and account-administration events.',
@@ -167,9 +217,9 @@ export const settingHelp: Partial<Record<keyof FleetSettings, string>> = {
     restartConcurrencyPerHost: 'Additional recovery limit on each host, including starts and rebuilds.',
     createConcurrencyPerHost: 'Additional startup limit on each host, including rebuilds.',
     destroyConcurrencyPerHost: 'Additional removal limit on each host, including migration source removal.',
-    lifecycleConcurrency: 'Combined fleet limit for creates, starts, stops, restarts, rebuilds and destructions. Each workflow counts once.',
+    lifecycleConcurrency: 'Combined fleet limit for creates, starts, stops, restarts, rebuilds and removals. Each workflow counts once.',
     rebuildConcurrency: 'Additional fleet limit for rebuilds, including host drain migrations.',
     preparationConcurrency: 'Maximum hosts downloading or verifying game files at once. Interrupted transfers keep their slot until reconciled.',
     deployKeepDays: 'Eligible campaign records and file diffs. Pending, unresolved failed, held and recovery-linked campaigns are protected.',
-    observationKeepDays: 'Successful monitoring and file-read records. Failures and actions are retained. 0 keeps records indefinitely.'
+    observationKeepDays: 'Successful monitoring and file-read records. Failures and actions are retained.'
 };

src/lib/ui/components/SettingsEditor.svelte

@@ -0,0 +1,242 @@
+<script lang="ts">
+    import { untrack } from 'svelte';
+    import { beforeNavigate, goto } from '$app/navigation';
+    import { confirmAction } from '$ui/confirm.js';
+    import Button from './primitives/Button.svelte';
+    import RetentionTools from './RetentionTools.svelte';
+    import {
+        defaultFleetSettings, fleetSettingLabels, settingsGroups, settingHelp, settingMinimum,
+        settingZeroMode, settingUnit, settingDisplayValue, validateFleetSettings, type FleetSettings
+    } from '$lib/fleet-settings.js';
+
+    type Key = keyof FleetSettings;
+    type Draft = { [K in Key]: number | undefined };
+    let { initial }: { initial: FleetSettings } = $props();
+    const id = $props.id();
+    const keys = Object.keys(defaultFleetSettings) as Key[];
+    let baseline = $state<FleetSettings>({ ...untrack(() => initial) });
+    let draft = $state<Draft>({ ...untrack(() => initial) });
+    let remembered = Object.fromEntries(keys.filter(key => baseline[key] > 0).map(key => [key, baseline[key]])) as Partial<FleetSettings>;
+    let query = $state('');
+    let selectedGroup = $state(settingsGroups[0].id);
+    let reviewInvalid = $state(false);
+    let saving = $state(false);
+    let error = $state('');
+    let notice = $state('');
+    let allowNavigation = false;
+    const changed = $derived(keys.filter(key => draft[key] !== baseline[key]));
+    const invalid = $derived(keys.filter(key => !!validationMessage(key, draft[key])));
+    const visibleGroups = $derived.by(() => {
+        const terms = query.trim().toLocaleLowerCase().split(/\s+/).filter(Boolean);
+        return settingsGroups.map(group => ({ ...group, keys: group.keys.filter(key => {
+            if (reviewInvalid && invalid.length) return invalid.includes(key);
+            if (!terms.length) return group.id === selectedGroup;
+            const text = `${group.title} ${group.description} ${fleetSettingLabels[key]} ${settingHelp[key] ?? ''} ${settingZeroMode(key) ?? ''} ${key}`.toLocaleLowerCase();
+            return terms.every(term => text.includes(term));
+        }) })).filter(group => group.keys.length);
+    });
+    const shownCount = $derived(visibleGroups.reduce((count, group) => count + group.keys.length, 0));
+
+    function validationMessage(key: Key, value: number | undefined): string {
+        if (typeof value !== 'number' || !Number.isSafeInteger(value) || value < settingMinimum(key)) return 'Enter a valid whole number.';
+        if (key.endsWith('Days') && value > 36500) return 'Enter 36,500 days or fewer.';
+        return '';
+    }
+    function toggleMode(key: Key, enabled: boolean) {
+        if (saving) return;
+        const current = draft[key];
+        if (enabled) {
+            if (current !== undefined && Number.isSafeInteger(current) && current > 0) remembered[key] = current;
+            draft[key] = 0;
+        } else {
+            draft[key] = remembered[key] ?? (defaultFleetSettings[key] > 0 ? defaultFleetSettings[key] : 1);
+        }
+        error = ''; notice = '';
+    }
+    function selectGroup(groupId: string) { selectedGroup = groupId; query = ''; reviewInvalid = false; }
+    function discard() {
+        if (saving) return;
+        draft = { ...baseline };
+        remembered = Object.fromEntries(keys.filter(key => baseline[key] > 0).map(key => [key, baseline[key]])) as Partial<FleetSettings>;
+        error = ''; notice = ''; reviewInvalid = false;
+    }
+    async function save() {
+        if (saving || !changed.length || invalid.length) return;
+        saving = true; error = ''; notice = '';
+        try {
+            const values = validateFleetSettings(draft);
+            const response = await fetch('/api/settings', { method: 'PUT', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(values) });
+            const result = await response.json();
+            if (!response.ok) throw new Error(result.error ?? 'Could not save fleet settings.');
+            baseline = validateFleetSettings(result);
+            draft = { ...baseline };
+            for (const key of keys) if (baseline[key] > 0) remembered[key] = baseline[key];
+            notice = 'Settings saved. Changes apply to the next queue or cleanup check.';
+        } catch (cause) { error = cause instanceof Error ? cause.message : 'Could not save fleet settings.'; }
+        finally { saving = false; }
+    }
+
+    beforeNavigate(({ cancel, to, from, type }) => {
+        if (!changed.length || allowNavigation || type === 'leave' || !to || to.url.pathname === from?.url.pathname) return;
+        cancel();
+        void confirmAction({ title: 'Leave Settings?', message: 'Your unsaved settings will be discarded.', confirmLabel: 'Leave settings', danger: true }).then(async accepted => {
+            if (!accepted) return;
+            allowNavigation = true;
+            try { await goto(to.url); } finally { allowNavigation = false; }
+        });
+    });
+    function beforeUnload(event: BeforeUnloadEvent) { if (changed.length) { event.preventDefault(); event.returnValue = ''; } }
+</script>
+
+<svelte:window onbeforeunload={beforeUnload} />
+<div class="settings-layout">
+    <aside class="section-rail">
+        <label class="search-label" for="settings-search">Find a setting</label>
+        <input id="settings-search" type="search" placeholder="Search settings" bind:value={query} disabled={saving} oninput={() => reviewInvalid = false} />
+        <label class="mobile-section">Section
+            <select aria-label="Settings section" value={selectedGroup} disabled={saving} onchange={event => selectGroup(event.currentTarget.value)}>
+                {#each settingsGroups as group}<option value={group.id}>{group.title}{changed.some(key => group.keys.includes(key)) ? ` · ${changed.filter(key => group.keys.includes(key)).length} changed` : ''}</option>{/each}
+            </select>
+        </label>
+        <nav class="group-links" aria-label="Settings sections">
+            {#each settingsGroups as group}
+                {@const count = changed.filter(key => group.keys.includes(key)).length}
+                <a href={`#settings-group-${group.id}`} aria-current={!query.trim() && !reviewInvalid && selectedGroup === group.id ? 'location' : undefined} onclick={event => { event.preventDefault(); if (!saving) selectGroup(group.id); }}>
+                    <span>{group.title}</span>{#if count}<span class="changed-count">{count} changed</span>{/if}
+                </a>
+            {/each}
+        </nav>
+    </aside>
+    <div class="settings-content">
+        {#if error}<p class="ui-error" role="alert">{error}</p>{/if}
+        {#if notice}<p class="notice" role="status">{notice}</p>{/if}
+        {#if query.trim()}<p class="search-results">{shownCount} {shownCount === 1 ? 'setting matches' : 'settings match'} “{query.trim()}” across all sections. <button type="button" class="text-button" onclick={() => query = ''}>Clear search</button></p>{/if}
+        {#if reviewInvalid && invalid.length}<p class="search-results">Showing invalid settings across all sections. <button type="button" class="text-button" onclick={() => reviewInvalid = false}>Show selected section</button></p>{/if}
+        <form id={`${id}-form`} onsubmit={event => { event.preventDefault(); void save(); }}>
+            <fieldset disabled={saving}>
+                <legend class="sr-only">Fleet settings</legend>
+                {#each visibleGroups as group (group.id)}
+                    <section class="settings-group" id={`settings-group-${group.id}`} aria-labelledby={`settings-heading-${group.id}`}>
+                        <header><h2 id={`settings-heading-${group.id}`}>{group.title}</h2><p>{group.description}</p></header>
+                        <div class="table-wrap"><table>
+                            <thead><tr><th scope="col">Setting</th><th scope="col">Value</th><th scope="col">Default</th><th scope="col">What it affects</th></tr></thead>
+                            <tbody>{#each group.keys as key (key)}
+                                {@const zeroMode = settingZeroMode(key)}
+                                {@const unlimited = !!zeroMode && draft[key] === 0}
+                                {@const validation = validationMessage(key, draft[key])}
+                                <tr data-setting={key} class:changed={changed.includes(key)}>
+                                    <th scope="row"><label for={`setting-${key}`}>{fleetSettingLabels[key]}</label>{#if changed.includes(key)}<span class="changed-marker">Changed</span>{/if}</th>
+                                    <td class="value-cell">
+                                        <div class="numeric-value">
+                                            {#if unlimited}<input id={`setting-${key}`} type="number" disabled placeholder="—" aria-describedby={`setting-${key}-help setting-${key}-default`} />
+                                            {:else}<input id={`setting-${key}`} type="number" min={Math.max(1, settingMinimum(key))} max={key.endsWith('Days') ? 36500 : undefined} step="1" required bind:value={draft[key]} aria-invalid={!!validation} aria-describedby={`setting-${key}-help setting-${key}-default${validation ? ` setting-${key}-error` : ''}`} oninput={() => { error = ''; notice = ''; }} />{/if}
+                                            <span class="unit">{settingUnit(key)}</span>
+                                        </div>
+                                        {#if zeroMode}<label class="zero-mode" for={`setting-${key}-zero`}><input id={`setting-${key}-zero`} type="checkbox" checked={unlimited} onchange={event => toggleMode(key, event.currentTarget.checked)} aria-label={`${zeroMode}: ${fleetSettingLabels[key]}`} aria-describedby={`setting-${key}-help`} /><span>{zeroMode}</span></label>{/if}
+                                        {#if validation}<p class="field-error" id={`setting-${key}-error`}>{validation}</p>{/if}
+                                    </td>
+                                    <td class="default-value" id={`setting-${key}-default`}><span class="mobile-label">Default: </span>{settingDisplayValue(key, defaultFleetSettings[key])}</td>
+                                    <td class="help" id={`setting-${key}-help`}>{settingHelp[key]}</td>
+                                </tr>
+                            {/each}</tbody>
+                        </table></div>
+                        {#if group.id === 'concurrency'}<p class="group-note">Lowering a limit lets active operations finish; queued work waits for capacity. Player safety checks still apply.</p>{/if}
+                    </section>
+                {:else}<p class="no-results">No settings match this search. Try a setting name, a section, or “Forever”.</p>{/each}
+            </fieldset>
+        </form>
+        <div class="retention-tools">
+            <fieldset disabled={saving || invalid.length > 0}>
+                <legend class="sr-only">Retention preview and protections</legend>
+                {#if invalid.length}<p>Correct invalid values to preview cleanup.</p>{/if}
+                <RetentionTools settings={draft as FleetSettings} />
+            </fieldset>
+        </div>
+    </div>
+</div>
+<div class="save-bar">
+    <div class="save-summary">
+        <strong class:has-changes={changed.length > 0}>{changed.length ? `${changed.length} unsaved ${changed.length === 1 ? 'change' : 'changes'}` : 'All changes saved'}</strong>
+        <span>Applies to everyone. No restart needed.</span>
+        {#if invalid.length}<button type="button" class="invalid-summary text-button" onclick={() => { query = ''; reviewInvalid = true; }}>{invalid.length} invalid {invalid.length === 1 ? 'setting' : 'settings'} · Review invalid settings</button>{/if}
+    </div>
+    <div class="save-actions"><Button variant="ghost" disabled={saving || !changed.length} onclick={discard}>Discard</Button><button class="save-button" type="submit" form={`${id}-form`} disabled={saving || !changed.length || invalid.length > 0}>{saving ? 'Saving…' : 'Save changes'}</button></div>
+</div>
+
+<style>
+    .settings-layout { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: var(--space-5); align-items: start; }
+    .section-rail { position: sticky; top: 80px; display: grid; gap: var(--space-2); min-width: 0; }
+    .search-label { font-size: var(--text-sm); color: var(--text-secondary); }
+    #settings-search { width: 100%; }
+    .group-links { display: grid; gap: var(--space-1); margin-top: var(--space-3); }
+    .group-links a { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); min-height: 40px; padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm); text-decoration: none; font-size: var(--text-sm); color: var(--text-secondary); }
+    .group-links a:hover, .group-links a[aria-current] { background: var(--surface-raised); color: var(--text-primary); }
+    .group-links a[aria-current] { font-weight: var(--weight-semibold); }
+    .changed-count { font-size: var(--text-xs); color: var(--state-warning); white-space: nowrap; }
+    .settings-content, fieldset { min-width: 0; }
+    fieldset { border: 0; padding: 0; margin: 0; }
+    .settings-group { background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--radius-md); overflow: hidden; margin-bottom: var(--space-4); }
+    .settings-group header { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-2) var(--space-4); padding: var(--space-4); border-bottom: 1px solid var(--border-subtle); }
+    h2 { margin: 0; font-size: var(--text-base); font-weight: var(--weight-semibold); }
+    p { color: var(--text-secondary); font-size: var(--text-sm); line-height: var(--leading-body); }
+    header p { margin: 0; font-size: var(--text-xs); }
+    .table-wrap { position: relative; min-width: 0; overflow-x: auto; }
+    table { width: 100%; table-layout: fixed; border-collapse: collapse; font-size: var(--text-xs); text-align: left; }
+    th, td { padding: var(--space-3); vertical-align: top; border-bottom: 1px solid var(--border-subtle); }
+    th { font-weight: var(--weight-medium); }
+    thead th { color: var(--text-secondary); font-weight: var(--weight-semibold); }
+    thead th:nth-child(1) { width: 23%; }
+    thead th:nth-child(2) { width: 25%; }
+    thead th:nth-child(3) { width: 15%; }
+    tbody tr:last-child th, tbody tr:last-child td { border-bottom: 0; }
+    .changed { background: color-mix(in srgb, var(--state-warning) 3%, transparent); }
+    .changed-marker { display: block; margin-top: var(--space-1); color: var(--state-warning); font-size: var(--text-xs); }
+    .numeric-value { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-1); }
+    .numeric-value input { width: 88px; min-height: 32px; padding: 5px var(--space-2); font-family: var(--font-numeric); font-variant-numeric: tabular-nums; }
+    input:disabled { color: var(--text-tertiary); opacity: 0.75; }
+    .unit { color: var(--text-secondary); font-size: var(--text-xs); }
+    .zero-mode { display: inline-flex; align-items: center; gap: var(--space-1); margin-top: var(--space-2); color: var(--text-secondary); font-size: var(--text-xs); cursor: pointer; }
+    .zero-mode input { width: 16px; height: 16px; margin: 0; accent-color: var(--accent-primary); }
+    .default-value, .help { color: var(--text-secondary); line-height: var(--leading-body); }
+    .default-value { font-variant-numeric: tabular-nums; }
+    .field-error { margin: var(--space-1) 0 0; color: var(--state-danger); font-size: var(--text-xs); }
+    .group-note { margin: 0; padding: var(--space-3) var(--space-4); border-top: 1px solid var(--border-subtle); font-size: var(--text-xs); }
+    .search-results { margin-top: 0; }
+    .text-button { padding: 0; background: none; border: 0; color: var(--accent-primary-hover); font: inherit; text-decoration: underline; cursor: pointer; }
+    .retention-tools { margin-top: var(--space-4); }
+    .save-bar { position: sticky; bottom: var(--space-3); z-index: 10; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-3) var(--space-4); margin-top: var(--space-5); border: 1px solid var(--border-strong); border-radius: var(--radius-md); background: var(--surface-raised); box-shadow: var(--shadow-raised); }
+    .save-summary { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-3); font-size: var(--text-xs); color: var(--text-secondary); }
+    .save-summary strong { font-weight: var(--weight-semibold); color: var(--text-primary); }
+    .save-summary strong.has-changes { color: var(--state-warning); }
+    .save-actions { display: flex; align-items: center; gap: var(--space-2); margin-left: auto; }
+    .save-button { min-height: 40px; padding: var(--space-2) var(--space-4); border: 1px solid transparent; border-radius: var(--radius-md); background: var(--accent-primary); color: var(--text-on-accent); font-size: var(--text-sm); font-weight: var(--weight-semibold); cursor: pointer; }
+    .save-button:hover:not(:disabled) { background: var(--accent-primary-hover); }
+    .save-button:disabled { opacity: 0.5; cursor: not-allowed; }
+    .invalid-summary { color: var(--state-danger); }
+    .notice { color: var(--state-online); }
+    .mobile-section, .mobile-label { display: none; }
+    @media (max-width: 1100px) { .settings-layout { grid-template-columns: 180px minmax(0, 1fr); gap: var(--space-4); } thead th:nth-child(1) { width: 25%; } thead th:nth-child(2) { width: 27%; } thead th:nth-child(3) { width: 16%; } th, td { padding: var(--space-2); } }
+    @media (max-width: 720px) {
+        .settings-layout { grid-template-columns: minmax(0, 1fr); gap: var(--space-4); }
+        .section-rail { position: static; }
+        .group-links { display: none; }
+        .mobile-section { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: var(--space-3); font-size: var(--text-sm); color: var(--text-secondary); }
+        .mobile-section select { width: 100%; }
+        .table-wrap { overflow: visible; }
+        table, tbody { display: block; }
+        thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
+        tbody tr { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-2); padding: var(--space-3); border-bottom: 1px solid var(--border-subtle); }
+        tbody tr:last-child { border-bottom: 0; }
+        th, td { display: block; padding: 0; border: 0; }
+        tbody th { grid-column: 1 / -1; font-size: var(--text-sm); }
+        .changed-marker { display: inline; margin-left: var(--space-2); }
+        .value-cell { grid-column: 1 / -1; display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2) var(--space-4); }
+        .zero-mode { min-height: 44px; margin-top: 0; }
+        .zero-mode input { width: 20px; height: 20px; }
+        .default-value, .help { grid-column: 1 / -1; }
+        .mobile-label { display: inline; }
+        .save-bar { bottom: max(var(--space-2), env(safe-area-inset-bottom)); padding: var(--space-3); gap: var(--space-2); }
+        .save-summary { gap: var(--space-1); flex-direction: column; align-items: flex-start; }
+        .save-actions { width: 100%; justify-content: flex-end; }
+    }
+</style>