Add Prettier and ESLint tooling (Refs #77)

src/routes/+layout.svelte

@@ -20,7 +20,10 @@
     // the referenced woff/woff2 files get emitted into the build.
     import '$ui/styles/fonts.js';
 
-    interface Props { children: import('svelte').Snippet; data: { user: AuthUser | null; setupRequired: boolean } }
+    interface Props {
+        children: import('svelte').Snippet;
+        data: { user: AuthUser | null; setupRequired: boolean };
+    }
     let { children, data }: Props = $props();
     const publicPage = $derived(['/login', '/setup'].includes($page.url.pathname));
     const sessionReady = $derived(!!data.user && !data.user.mustChangePassword && !publicPage);
@@ -36,7 +39,8 @@
     const accountInitial = $derived(Array.from(accountName.trim())[0]?.toLocaleUpperCase() || '?');
 
     function dismissAccount(event: MouseEvent) {
-        if (event.target instanceof Element && !event.target.closest('.account-menu')) accountOpen = false;
+        if (event.target instanceof Element && !event.target.closest('.account-menu'))
+            accountOpen = false;
     }
 
     function openHelp() {
@@ -46,33 +50,61 @@
     }
 
     beforeNavigate(() => performance.mark('ec:navigation-start'));
-    afterNavigate(() => { if (performance.getEntriesByName('ec:navigation-start').length) { performance.measure('ec:navigation', 'ec:navigation-start'); performance.clearMarks('ec:navigation-start'); } });
-    afterNavigate(() => { accountOpen = false; drawerOpen = false; paletteOpen = false; resolveConfirmation(false); });
+    afterNavigate(() => {
+        if (performance.getEntriesByName('ec:navigation-start').length) {
+            performance.measure('ec:navigation', 'ec:navigation-start');
+            performance.clearMarks('ec:navigation-start');
+        }
+    });
+    afterNavigate(() => {
+        accountOpen = false;
+        drawerOpen = false;
+        paletteOpen = false;
+        resolveConfirmation(false);
+    });
 
     function closeMenu(event: KeyboardEvent) {
-        if (event.key === 'Escape' && accountOpen) { accountOpen = false; accountButton?.focus(); }
+        if (event.key === 'Escape' && accountOpen) {
+            accountOpen = false;
+            accountButton?.focus();
+        }
     }
 
     async function signOut() {
         if (signingOut) return;
-        signingOut = true; signOutError = '';
+        signingOut = true;
+        signOutError = '';
         try {
-            const response = await fetch('/api/auth/logout', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: '{}' });
-            if (!response.ok) { const body = await response.json(); throw new Error(body.error ?? 'Could not sign out. Try again.'); }
+            const response = await fetch('/api/auth/logout', {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: '{}'
+            });
+            if (!response.ok) {
+                const body = await response.json();
+                throw new Error(body.error ?? 'Could not sign out. Try again.');
+            }
             window.location.assign('/login');
-        } catch (cause) { signOutError = (cause as Error).message; signingOut = false; }
+        } catch (cause) {
+            signOutError = (cause as Error).message;
+            signingOut = false;
+        }
     }
 
     $effect(() => {
         if (!sessionReady) return;
         const stopPipeline = startPipelineStream();
         const stopServers = startServerStream();
-        return () => { stopPipeline?.(); stopServers?.(); };
+        return () => {
+            stopPipeline?.();
+            stopServers?.();
+        };
     });
 
     $effect(() => {
         if (!sessionReady) return;
-        if ('fleetSnapshot' in $page.data && $page.data.fleetSnapshot) hydrateFleet($page.data.fleetSnapshot);
+        if ('fleetSnapshot' in $page.data && $page.data.fleetSnapshot)
+            hydrateFleet($page.data.fleetSnapshot);
     });
 
     $effect(() => {
@@ -84,10 +116,17 @@
     onMount(() => {
         const stopTimeZone = startTimeZonePreference();
         const desktop = window.matchMedia('(min-width: 961px)');
-        const closeDrawer = () => { if (desktop.matches) drawerOpen = false; };
+        const closeDrawer = () => {
+            if (desktop.matches) drawerOpen = false;
+        };
         desktop.addEventListener('change', closeDrawer);
 
-        const shortcuts = Object.fromEntries(visibleNavigation(data.user?.role ?? 'viewer').flatMap(group => group.items).filter(item => item.shortcut).map(item => [item.shortcut!, item.href]));
+        const shortcuts = Object.fromEntries(
+            visibleNavigation(data.user?.role ?? 'viewer')
+                .flatMap((group) => group.items)
+                .filter((item) => item.shortcut)
+                .map((item) => [item.shortcut!, item.href])
+        );
         let armed = false;
         let armTimer: ReturnType<typeof setTimeout> | null = null;
 
@@ -96,24 +135,41 @@
             // Global search also works while focus is in a page's search field.
             if ((e.metaKey || e.ctrlKey) && !e.altKey && e.key.toLowerCase() === 'k') {
                 e.preventDefault();
-                accountOpen = false; drawerOpen = false; helpOpen = false;
+                accountOpen = false;
+                drawerOpen = false;
+                helpOpen = false;
                 paletteOpen = !paletteOpen;
                 return;
             }
             const target = e.target as HTMLElement;
-            if (target && (['INPUT', 'TEXTAREA', 'SELECT'].includes(target.tagName) || target.isContentEditable || target.closest('dialog'))) return;
+            if (
+                target &&
+                (['INPUT', 'TEXTAREA', 'SELECT'].includes(target.tagName) ||
+                    target.isContentEditable ||
+                    target.closest('dialog'))
+            )
+                return;
             if (e.metaKey || e.ctrlKey || e.altKey) return;
-            if (e.key === '?') { e.preventDefault(); openHelp(); return; }
+            if (e.key === '?') {
+                e.preventDefault();
+                openHelp();
+                return;
+            }
 
             if (!armed && e.key === 'g') {
                 armed = true;
                 if (armTimer) clearTimeout(armTimer);
-                armTimer = setTimeout(() => { armed = false; }, 1000);
+                armTimer = setTimeout(() => {
+                    armed = false;
+                }, 1000);
                 return;
             }
             if (armed) {
                 armed = false;
-                if (armTimer) { clearTimeout(armTimer); armTimer = null; }
+                if (armTimer) {
+                    clearTimeout(armTimer);
+                    armTimer = null;
+                }
                 const dest = shortcuts[e.key];
                 if ((e.key === 'h' || e.key === 'k') && data.user?.role !== 'admin') return;
                 if (dest) {
@@ -135,7 +191,11 @@
     // Non-Chromium browsers fall through to plain navigation.
     onNavigate(enableViewTransitions);
 
-    const shortcuts = $derived(visibleNavigation(data.user?.role ?? 'viewer').flatMap(group => group.items).filter(item => item.shortcut));
+    const shortcuts = $derived(
+        visibleNavigation(data.user?.role ?? 'viewer')
+            .flatMap((group) => group.items)
+            .filter((item) => item.shortcut)
+    );
 </script>
 
 <svelte:window onkeydown={closeMenu} onclick={dismissAccount} />
@@ -144,67 +204,147 @@
     <a class="skip-link" href="#main-content">Skip to content</a>
     {#if sessionReady && data.user}
         <aside class="sidebar" id="desktop-navigation" hidden={sidebarCollapsed}>
-            <a class="sidebar-brand" href="/" aria-label="Electric Cherry home"><BrandMark size="sm" /></a>
+            <a class="sidebar-brand" href="/" aria-label="Electric Cherry home"
+                ><BrandMark size="sm" /></a
+            >
             <div class="sidebar-scroll"><Navigation role={data.user.role} /></div>
         </aside>
         <div class="navigation-drawer">
             <Dialog bind:open={drawerOpen} title="Navigation" drawer>
-                <div id="mobile-navigation"><Navigation role={data.user.role} onNavigate={() => drawerOpen = false} /></div>
+                <div id="mobile-navigation">
+                    <Navigation role={data.user.role} onNavigate={() => (drawerOpen = false)} />
+                </div>
             </Dialog>
         </div>
     {/if}
     {#if publicPage}
         <header class="auth-brand"><BrandMark size="md" /></header>
     {:else}
-    <header class="app-header">
-        {#if sessionReady}
-            <button class="icon-button desktop-toggle" type="button" aria-label={sidebarCollapsed ? 'Expand navigation' : 'Collapse navigation'} aria-controls="desktop-navigation" aria-expanded={!sidebarCollapsed} onclick={() => sidebarCollapsed = !sidebarCollapsed}>
-                <svg viewBox="0 0 20 20" aria-hidden="true"><rect x="2" y="3" width="16" height="14" rx="2" /><path d="M7 3v14" /></svg>
-            </button>
-            <button class="icon-button mobile-toggle" type="button" aria-label="Open navigation" aria-controls="mobile-navigation" aria-expanded={drawerOpen} onclick={() => drawerOpen = true}>
-                <svg viewBox="0 0 20 20" aria-hidden="true"><path d="M3 5h14M3 10h14M3 15h14" /></svg>
-            </button>
-        {/if}
-        <a class="brand-link" href={sessionReady ? '/' : '/account'} aria-label="Electric Cherry home">
-            <BrandMark size="sm" />
-        </a>
-        {#if sessionReady}<button class="search-button" type="button" aria-label="Search pages, servers, hosts, and players" aria-keyshortcuts="Meta+k Control+k" onclick={() => paletteOpen = true}>
-            <svg viewBox="0 0 20 20" aria-hidden="true"><circle cx="8" cy="8" r="5" /><path d="m12 12 5 5" /></svg>
-            <span class="search-label">Search pages, servers, players…</span><kbd>⌘K / Ctrl K</kbd>
-        </button>{/if}
-        <div class="header-actions">
-            {#if sessionReady}<button class="icon-button help-button" type="button" aria-label="Keyboard shortcuts" title="Keyboard shortcuts (?)" onclick={openHelp}>?</button>{/if}
-            {#if data.user}
-                <div class="account-menu">
-                    <button bind:this={accountButton} class="account-button" type="button"
-                        aria-label={`Account: ${accountName}`} title={accountName}
-                        aria-expanded={accountOpen} aria-controls="account-links"
-                        onclick={() => accountOpen = !accountOpen}>
-                        <span aria-hidden="true">{accountInitial}</span>
-                    </button>
-                    {#if accountOpen}
-                        <div class="account-links" id="account-links">
-                            <div class="account-name">{accountName}</div>
-                            <a href="/account">My account</a>
-                            {#if sessionReady}<button onclick={openHelp}>Keyboard shortcuts <span aria-hidden="true">?</span></button>{/if}
-                            {#if data.user.role === 'admin' && sessionReady}<a href="/settings/users">Manage users</a>{/if}
-                            <button disabled={signingOut} onclick={signOut}>{signingOut ? 'Signing out…' : 'Sign out'}</button>
-                            {#if signOutError}<p role="alert">{signOutError}</p>{/if}
-                        </div>
-                    {/if}
-                </div>
+        <header class="app-header">
+            {#if sessionReady}
+                <button
+                    class="icon-button desktop-toggle"
+                    type="button"
+                    aria-label={sidebarCollapsed ? 'Expand navigation' : 'Collapse navigation'}
+                    aria-controls="desktop-navigation"
+                    aria-expanded={!sidebarCollapsed}
+                    onclick={() => (sidebarCollapsed = !sidebarCollapsed)}
+                >
+                    <svg viewBox="0 0 20 20" aria-hidden="true"
+                        ><rect x="2" y="3" width="16" height="14" rx="2" /><path d="M7 3v14" /></svg
+                    >
+                </button>
+                <button
+                    class="icon-button mobile-toggle"
+                    type="button"
+                    aria-label="Open navigation"
+                    aria-controls="mobile-navigation"
+                    aria-expanded={drawerOpen}
+                    onclick={() => (drawerOpen = true)}
+                >
+                    <svg viewBox="0 0 20 20" aria-hidden="true"
+                        ><path d="M3 5h14M3 10h14M3 15h14" /></svg
+                    >
+                </button>
             {/if}
-        </div>
-    </header>
+            <a
+                class="brand-link"
+                href={sessionReady ? '/' : '/account'}
+                aria-label="Electric Cherry home"
+            >
+                <BrandMark size="sm" />
+            </a>
+            {#if sessionReady}<button
+                    class="search-button"
+                    type="button"
+                    aria-label="Search pages, servers, hosts, and players"
+                    aria-keyshortcuts="Meta+k Control+k"
+                    onclick={() => (paletteOpen = true)}
+                >
+                    <svg viewBox="0 0 20 20" aria-hidden="true"
+                        ><circle cx="8" cy="8" r="5" /><path d="m12 12 5 5" /></svg
+                    >
+                    <span class="search-label">Search pages, servers, players…</span><kbd
+                        >⌘K / Ctrl K</kbd
+                    >
+                </button>{/if}
+            <div class="header-actions">
+                {#if sessionReady}<button
+                        class="icon-button help-button"
+                        type="button"
+                        aria-label="Keyboard shortcuts"
+                        title="Keyboard shortcuts (?)"
+                        onclick={openHelp}>?</button
+                    >{/if}
+                {#if data.user}
+                    <div class="account-menu">
+                        <button
+                            bind:this={accountButton}
+                            class="account-button"
+                            type="button"
+                            aria-label={`Account: ${accountName}`}
+                            title={accountName}
+                            aria-expanded={accountOpen}
+                            aria-controls="account-links"
+                            onclick={() => (accountOpen = !accountOpen)}
+                        >
+                            <span aria-hidden="true">{accountInitial}</span>
+                        </button>
+                        {#if accountOpen}
+                            <div class="account-links" id="account-links">
+                                <div class="account-name">{accountName}</div>
+                                <a href="/account">My account</a>
+                                {#if sessionReady}<button onclick={openHelp}
+                                        >Keyboard shortcuts <span aria-hidden="true">?</span
+                                        ></button
+                                    >{/if}
+                                {#if data.user.role === 'admin' && sessionReady}<a
+                                        href="/settings/users">Manage users</a
+                                    >{/if}
+                                <button disabled={signingOut} onclick={signOut}
+                                    >{signingOut ? 'Signing out…' : 'Sign out'}</button
+                                >
+                                {#if signOutError}<p role="alert">{signOutError}</p>{/if}
+                            </div>
+                        {/if}
+                    </div>
+                {/if}
+            </div>
+        </header>
     {/if}
     <main id="main-content" tabindex="-1" class:auth-main={publicPage}>
-        {#if sessionReady && data.user?.role === 'viewer'}<aside class="viewer-note"><strong>Viewer access</strong><span>You can read fleet status and summaries. Operating servers or viewing raw configs, file changes, logs, and telemetry requires an operator account.</span></aside>{/if}
+        {#if sessionReady && data.user?.role === 'viewer'}<aside class="viewer-note">
+                <strong>Viewer access</strong><span
+                    >You can read fleet status and summaries. Operating servers or viewing raw
+                    configs, file changes, logs, and telemetry requires an operator account.</span
+                >
+            </aside>{/if}
         {@render children()}
     </main>
     <Confirmation />
-    {#if sessionReady && data.user}<CommandPalette bind:open={paletteOpen} role={data.user.role} />{/if}
-    <Dialog bind:open={helpOpen} title="Keyboard shortcuts" description="Press g, then a destination key. Page shortcuts are inactive while typing or using a dialog; search works from any field.">
-        <dl class="shortcuts"><div><dt><kbd>⌘K / Ctrl K</kbd></dt><dd>Search pages, servers, hosts, and players</dd></div>{#each shortcuts as item}<div><dt><kbd>g {item.shortcut}</kbd></dt><dd>{item.href === '/' ? 'Fleet' : item.label}</dd></div>{/each}<div><dt><kbd>?</kbd></dt><dd>This help</dd></div></dl>
+    {#if sessionReady && data.user}<CommandPalette
+            bind:open={paletteOpen}
+            role={data.user.role}
+        />{/if}
+    <Dialog
+        bind:open={helpOpen}
+        title="Keyboard shortcuts"
+        description="Press g, then a destination key. Page shortcuts are inactive while typing or using a dialog; search works from any field."
+    >
+        <dl class="shortcuts">
+            <div>
+                <dt><kbd>⌘K / Ctrl K</kbd></dt>
+                <dd>Search pages, servers, hosts, and players</dd>
+            </div>
+            {#each shortcuts as item}<div>
+                    <dt><kbd>g {item.shortcut}</kbd></dt>
+                    <dd>{item.href === '/' ? 'Fleet' : item.label}</dd>
+                </div>{/each}
+            <div>
+                <dt><kbd>?</kbd></dt>
+                <dd>This help</dd>
+            </div>
+        </dl>
     </Dialog>
 </div>
 
@@ -223,8 +363,12 @@
         -moz-osx-font-smoothing: grayscale;
         text-rendering: optimizeLegibility;
     }
-    :global(*) { box-sizing: border-box; }
-    :global(a) { color: var(--accent-primary-hover); }
+    :global(*) {
+        box-sizing: border-box;
+    }
+    :global(a) {
+        color: var(--accent-primary-hover);
+    }
     :global(::selection) {
         background: var(--accent-primary);
         color: var(--text-on-accent);
@@ -242,73 +386,382 @@
         inset: 0;
         pointer-events: none;
         background:
-            radial-gradient(1200px 700px at 20% -10%, rgba(46, 134, 209, 0.10), transparent 60%),
+            radial-gradient(1200px 700px at 20% -10%, rgba(46, 134, 209, 0.1), transparent 60%),
             radial-gradient(900px 600px at 90% 100%, rgba(124, 192, 245, 0.05), transparent 60%);
         z-index: -1;
     }
 
-    .shell { min-height: 100vh; }
-    .shell.with-sidebar { padding-left: 224px; }
-    .shell.sidebar-collapsed { padding-left: 0; }
-    .sidebar { position: fixed; inset: 0 auto 0 0; z-index: 25; display: flex; flex-direction: column; width: 224px; border-right: 1px solid var(--border-subtle); background: var(--surface); }
-    .sidebar[hidden] { display: none; }
-    .sidebar-brand { display: flex; align-items: center; min-height: 60px; padding: 0 var(--space-4); text-decoration: none; }
-    .sidebar-scroll { min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: var(--space-2) var(--space-2) var(--space-6); scrollbar-width: thin; }
-    .navigation-drawer :global(dialog.drawer) { inset: 0 auto 0 0; width: min(320px, 100vw); border-left: 0; border-right: 1px solid var(--border-subtle); }
-    .auth-brand { display:flex; justify-content:center; padding:48px 20px 20px; }
-    main { min-width:0; overflow-wrap:anywhere; padding:var(--space-6) var(--space-8) var(--space-16); max-width:1600px; margin:0 auto; view-transition-name:main; }
-    main.auth-main { max-width:520px; padding-top:16px; }
-    .viewer-note { display:flex; gap:8px 16px; flex-wrap:wrap; padding:14px 18px; margin-bottom:24px; border:1px solid var(--border-subtle); border-radius:var(--radius-md); background:var(--surface); font-size:var(--text-sm); color:var(--text-secondary); }
-    .viewer-note strong { color:var(--text-primary); }
-    .app-header { position:sticky; top:0; z-index:20; display:flex; align-items:center; gap:var(--space-3); min-height:60px; padding:0 var(--space-5); border-bottom:1px solid var(--border-subtle); background:var(--surface-sunken); }
-    .brand-link { flex-shrink:0; display:flex; align-items:center; text-decoration:none; }
-    .with-sidebar:not(.sidebar-collapsed) .app-header .brand-link { display: none; }
-    .icon-button { display: inline-grid; place-items: center; flex-shrink: 0; width: 44px; height: 44px; padding: 0; border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--text-secondary); font-size: var(--text-lg); cursor: pointer; }
-    .icon-button:hover { color: var(--text-primary); background: var(--surface-raised); }
-    .icon-button svg, .search-button svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; flex-shrink: 0; }
-    .mobile-toggle { display: none; }
-    .search-button { min-width: 0; display: flex; align-items: center; gap: var(--space-2); flex: 1; max-width: 440px; height: 36px; padding: 0 var(--space-3); border: 1px solid var(--border-control); border-radius: var(--radius-sm); background: var(--surface-sunken); color: var(--text-secondary); cursor: pointer; text-align: left; font-size: var(--text-xs); }
-    .search-button:hover { border-color: var(--border-control-hover); color: var(--text-primary); }
-    .search-label { flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
-    .search-button kbd { padding: 1px 4px; white-space: nowrap; }
-    .header-actions { display:flex; align-items:center; gap:8px; margin-left:auto; }
-    .account-menu { position:relative; }
-    .account-button { display:inline-flex; align-items:center; justify-content:center; min-width:44px; height:44px; padding:8px 12px; border:1px solid var(--border-strong); border-radius:var(--radius-md); background:var(--surface); color:var(--text-primary); font:inherit; cursor:pointer; }
-    .account-button { border-radius:50%; color:var(--accent-primary-hover); background:color-mix(in oklab,var(--accent-primary) 12%,var(--surface)); font-weight:600; }
-    .account-links { position:absolute; right:0; top:calc(100% + 8px); width:220px; max-width:calc(100vw - 32px); max-height:calc(100dvh - 84px); overflow-y:auto; z-index:30; display:grid; padding:8px; background:var(--surface); border:1px solid var(--border-strong); border-radius:var(--radius-md); box-shadow:0 12px 32px #0005; }
-    .account-name { padding:8px 12px 12px; margin-bottom:4px; border-bottom:1px solid var(--border-subtle); color:var(--text-secondary); font-size:var(--text-sm); overflow-wrap:anywhere; }
-    .account-links a,.account-links button { text-align:left; padding:10px 12px; color:var(--text-primary); background:none; border:0; border-radius:var(--radius-sm); font:inherit; font-size:var(--text-sm); cursor:pointer; text-decoration:none; }
-    .account-links a:hover,.account-links button:hover { background:var(--surface-raised); }
-    .account-links p { padding:0 12px; font-size:var(--text-xs); color:var(--state-danger); }
-    .shortcuts { display:grid; gap:12px; margin:0; }
-    .shortcuts > div { display:flex; gap:20px; align-items:center; }
-    .shortcuts dt { min-width:120px; }
-    .shortcuts dd { margin:0; font-size:var(--text-sm); }
-    kbd { font-family:var(--font-mono); padding:3px 8px; border:1px solid var(--border-strong); border-radius:5px; }
-    .skip-link { position:fixed; left:16px; top:-80px; z-index:300; padding:12px 16px; background:var(--surface-raised); border-radius:var(--radius-md); }
-    .skip-link:focus { top:12px; }
-    :global(input),:global(select),:global(textarea) { min-width:0; max-width:100%; }
-    :global(input),:global(select),:global(textarea),:global(button),:global(a) { scroll-margin-block:90px 100px; }
-    :global(dialog) { max-height:calc(100dvh - 32px); overflow-y:auto; overscroll-behavior:contain; }
-    @media (max-width:960px) {
-        .shell.with-sidebar { padding-left: 0; }
-        .sidebar, .desktop-toggle { display: none; }
-        .mobile-toggle { display: inline-grid; }
-        .with-sidebar:not(.sidebar-collapsed) .app-header .brand-link { display: flex; }
-        .app-header { min-height: 56px; gap: var(--space-2); padding: 0 var(--space-3); }
-        .search-button { margin-left: auto; max-width: 300px; }
-        .search-button kbd { display: none; }
-        .header-actions { margin-left: 0; }
+    .shell {
+        min-height: 100vh;
     }
-    @media (max-width:720px) {
-        .app-header { padding-inline: var(--space-2); gap: var(--space-1); }
-        .brand-link :global(.mark-sm .word) { font-size: var(--text-xs); letter-spacing:1px; }
-        .search-button { flex: 0 0 44px; width: 44px; height: 44px; padding: 0; justify-content: center; border: 0; }
-        .search-label, .help-button { display: none; }
-        main { padding:var(--space-4) max(var(--space-4),env(safe-area-inset-right)) calc(var(--space-16) + env(safe-area-inset-bottom)) max(var(--space-4),env(safe-area-inset-left)); }
-        :global(input:not([type='checkbox']):not([type='radio'])),:global(select),:global(textarea) { font-size: var(--text-input) !important; min-height:44px; }
-        :global(button),:global(.btn) { min-height:44px; }
+    .shell.with-sidebar {
+        padding-left: 224px;
+    }
+    .shell.sidebar-collapsed {
+        padding-left: 0;
+    }
+    .sidebar {
+        position: fixed;
+        inset: 0 auto 0 0;
+        z-index: 25;
+        display: flex;
+        flex-direction: column;
+        width: 224px;
+        border-right: 1px solid var(--border-subtle);
+        background: var(--surface);
+    }
+    .sidebar[hidden] {
+        display: none;
+    }
+    .sidebar-brand {
+        display: flex;
+        align-items: center;
+        min-height: 60px;
+        padding: 0 var(--space-4);
+        text-decoration: none;
+    }
+    .sidebar-scroll {
+        min-height: 0;
+        overflow-y: auto;
+        overscroll-behavior: contain;
+        padding: var(--space-2) var(--space-2) var(--space-6);
+        scrollbar-width: thin;
+    }
+    .navigation-drawer :global(dialog.drawer) {
+        inset: 0 auto 0 0;
+        width: min(320px, 100vw);
+        border-left: 0;
+        border-right: 1px solid var(--border-subtle);
+    }
+    .auth-brand {
+        display: flex;
+        justify-content: center;
+        padding: 48px 20px 20px;
+    }
+    main {
+        min-width: 0;
+        overflow-wrap: anywhere;
+        padding: var(--space-6) var(--space-8) var(--space-16);
+        max-width: 1600px;
+        margin: 0 auto;
+        view-transition-name: main;
+    }
+    main.auth-main {
+        max-width: 520px;
+        padding-top: 16px;
+    }
+    .viewer-note {
+        display: flex;
+        gap: 8px 16px;
+        flex-wrap: wrap;
+        padding: 14px 18px;
+        margin-bottom: 24px;
+        border: 1px solid var(--border-subtle);
+        border-radius: var(--radius-md);
+        background: var(--surface);
+        font-size: var(--text-sm);
+        color: var(--text-secondary);
+    }
+    .viewer-note strong {
+        color: var(--text-primary);
+    }
+    .app-header {
+        position: sticky;
+        top: 0;
+        z-index: 20;
+        display: flex;
+        align-items: center;
+        gap: var(--space-3);
+        min-height: 60px;
+        padding: 0 var(--space-5);
+        border-bottom: 1px solid var(--border-subtle);
+        background: var(--surface-sunken);
+    }
+    .brand-link {
+        flex-shrink: 0;
+        display: flex;
+        align-items: center;
+        text-decoration: none;
+    }
+    .with-sidebar:not(.sidebar-collapsed) .app-header .brand-link {
+        display: none;
+    }
+    .icon-button {
+        display: inline-grid;
+        place-items: center;
+        flex-shrink: 0;
+        width: 44px;
+        height: 44px;
+        padding: 0;
+        border: 0;
+        border-radius: var(--radius-sm);
+        background: transparent;
+        color: var(--text-secondary);
+        font-size: var(--text-lg);
+        cursor: pointer;
+    }
+    .icon-button:hover {
+        color: var(--text-primary);
+        background: var(--surface-raised);
+    }
+    .icon-button svg,
+    .search-button svg {
+        width: 20px;
+        height: 20px;
+        fill: none;
+        stroke: currentColor;
+        stroke-width: 1.6;
+        flex-shrink: 0;
+    }
+    .mobile-toggle {
+        display: none;
+    }
+    .search-button {
+        min-width: 0;
+        display: flex;
+        align-items: center;
+        gap: var(--space-2);
+        flex: 1;
+        max-width: 440px;
+        height: 36px;
+        padding: 0 var(--space-3);
+        border: 1px solid var(--border-control);
+        border-radius: var(--radius-sm);
+        background: var(--surface-sunken);
+        color: var(--text-secondary);
+        cursor: pointer;
+        text-align: left;
+        font-size: var(--text-xs);
+    }
+    .search-button:hover {
+        border-color: var(--border-control-hover);
+        color: var(--text-primary);
+    }
+    .search-label {
+        flex: 1;
+        overflow: hidden;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+    }
+    .search-button kbd {
+        padding: 1px 4px;
+        white-space: nowrap;
+    }
+    .header-actions {
+        display: flex;
+        align-items: center;
+        gap: 8px;
+        margin-left: auto;
+    }
+    .account-menu {
+        position: relative;
+    }
+    .account-button {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        min-width: 44px;
+        height: 44px;
+        padding: 8px 12px;
+        border: 1px solid var(--border-strong);
+        border-radius: var(--radius-md);
+        background: var(--surface);
+        color: var(--text-primary);
+        font: inherit;
+        cursor: pointer;
+    }
+    .account-button {
+        border-radius: 50%;
+        color: var(--accent-primary-hover);
+        background: color-mix(in oklab, var(--accent-primary) 12%, var(--surface));
+        font-weight: 600;
+    }
+    .account-links {
+        position: absolute;
+        right: 0;
+        top: calc(100% + 8px);
+        width: 220px;
+        max-width: calc(100vw - 32px);
+        max-height: calc(100dvh - 84px);
+        overflow-y: auto;
+        z-index: 30;
+        display: grid;
+        padding: 8px;
+        background: var(--surface);
+        border: 1px solid var(--border-strong);
+        border-radius: var(--radius-md);
+        box-shadow: 0 12px 32px #0005;
+    }
+    .account-name {
+        padding: 8px 12px 12px;
+        margin-bottom: 4px;
+        border-bottom: 1px solid var(--border-subtle);
+        color: var(--text-secondary);
+        font-size: var(--text-sm);
+        overflow-wrap: anywhere;
+    }
+    .account-links a,
+    .account-links button {
+        text-align: left;
+        padding: 10px 12px;
+        color: var(--text-primary);
+        background: none;
+        border: 0;
+        border-radius: var(--radius-sm);
+        font: inherit;
+        font-size: var(--text-sm);
+        cursor: pointer;
+        text-decoration: none;
+    }
+    .account-links a:hover,
+    .account-links button:hover {
+        background: var(--surface-raised);
+    }
+    .account-links p {
+        padding: 0 12px;
+        font-size: var(--text-xs);
+        color: var(--state-danger);
+    }
+    .shortcuts {
+        display: grid;
+        gap: 12px;
+        margin: 0;
+    }
+    .shortcuts > div {
+        display: flex;
+        gap: 20px;
+        align-items: center;
+    }
+    .shortcuts dt {
+        min-width: 120px;
+    }
+    .shortcuts dd {
+        margin: 0;
+        font-size: var(--text-sm);
+    }
+    kbd {
+        font-family: var(--font-mono);
+        padding: 3px 8px;
+        border: 1px solid var(--border-strong);
+        border-radius: 5px;
+    }
+    .skip-link {
+        position: fixed;
+        left: 16px;
+        top: -80px;
+        z-index: 300;
+        padding: 12px 16px;
+        background: var(--surface-raised);
+        border-radius: var(--radius-md);
+    }
+    .skip-link:focus {
+        top: 12px;
+    }
+    :global(input),
+    :global(select),
+    :global(textarea) {
+        min-width: 0;
+        max-width: 100%;
+    }
+    :global(input),
+    :global(select),
+    :global(textarea),
+    :global(button),
+    :global(a) {
+        scroll-margin-block: 90px 100px;
+    }
+    :global(dialog) {
+        max-height: calc(100dvh - 32px);
+        overflow-y: auto;
+        overscroll-behavior: contain;
+    }
+    @media (max-width: 960px) {
+        .shell.with-sidebar {
+            padding-left: 0;
+        }
+        .sidebar,
+        .desktop-toggle {
+            display: none;
+        }
+        .mobile-toggle {
+            display: inline-grid;
+        }
+        .with-sidebar:not(.sidebar-collapsed) .app-header .brand-link {
+            display: flex;
+        }
+        .app-header {
+            min-height: 56px;
+            gap: var(--space-2);
+            padding: 0 var(--space-3);
+        }
+        .search-button {
+            margin-left: auto;
+            max-width: 300px;
+        }
+        .search-button kbd {
+            display: none;
+        }
+        .header-actions {
+            margin-left: 0;
+        }
+    }
+    @media (max-width: 720px) {
+        .app-header {
+            padding-inline: var(--space-2);
+            gap: var(--space-1);
+        }
+        .brand-link :global(.mark-sm .word) {
+            font-size: var(--text-xs);
+            letter-spacing: 1px;
+        }
+        .search-button {
+            flex: 0 0 44px;
+            width: 44px;
+            height: 44px;
+            padding: 0;
+            justify-content: center;
+            border: 0;
+        }
+        .search-label,
+        .help-button {
+            display: none;
+        }
+        main {
+            padding: var(--space-4) max(var(--space-4), env(safe-area-inset-right))
+                calc(var(--space-16) + env(safe-area-inset-bottom))
+                max(var(--space-4), env(safe-area-inset-left));
+        }
+        :global(input:not([type='checkbox']):not([type='radio'])),
+        :global(select),
+        :global(textarea) {
+            font-size: var(--text-input) !important;
+            min-height: 44px;
+        }
+        :global(button),
+        :global(.btn) {
+            min-height: 44px;
+        }
+    }
+    @media (max-width: 360px) {
+        .brand-link :global(.mark-sm .word) {
+            display: none;
+        }
+        .brand-link::after {
+            content: 'EC';
+            margin-left: var(--space-2);
+            color: var(--text-primary);
+            font-size: var(--text-base);
+            font-weight: var(--weight-semibold);
+        }
+        .header-actions {
+            gap: 4px;
+        }
+    }
+    :global(::view-transition-old(root)),
+    :global(::view-transition-new(root)),
+    :global(::view-transition-old(main)),
+    :global(::view-transition-new(main)) {
+        animation-duration: var(--dur-base);
+        animation-timing-function: var(--ease-standard);
     }
-    @media (max-width:360px) { .brand-link :global(.mark-sm .word) { display: none; } .brand-link::after { content: 'EC'; margin-left: var(--space-2); color: var(--text-primary); font-size: var(--text-base); font-weight: var(--weight-semibold); } .header-actions { gap:4px; } }
-    :global(::view-transition-old(root)),:global(::view-transition-new(root)),:global(::view-transition-old(main)),:global(::view-transition-new(main)) { animation-duration:var(--dur-base); animation-timing-function:var(--ease-standard); }
 </style>