diff --git a/frontend/src/lib/components/IconGridSelect.svelte b/frontend/src/lib/components/IconGridSelect.svelte
index 566ebf5..b26b0d2 100644
--- a/frontend/src/lib/components/IconGridSelect.svelte
+++ b/frontend/src/lib/components/IconGridSelect.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
 	import MdiIcon from './MdiIcon.svelte';
 	import { t } from '$lib/i18n';
+	import { portal } from '$lib/portal';
 
 	export interface GridItem {
 		value: string | number;
@@ -90,36 +91,39 @@
 </button>
 
 {#if open}
-	<!-- Backdrop -->
-	<div style="position:fixed; top:0; left:0; right:0; bottom:0; z-index:9998;"
-		role="presentation" onclick={() => open = false}></div>
+	<!-- Backdrop + popup are portalled to <body> so they escape any
+	     backdrop-filter / transform ancestor that would otherwise act
+	     as the containing block for `position: fixed`. -->
+	<div use:portal class="icon-grid-portal-root">
+		<div class="icon-grid-backdrop"
+			role="presentation" onclick={() => open = false}></div>
 
-	<!-- Popup grid -->
-	<div style="{popupStyle} width: {columns * 160 + 16}px;"
-		class="icon-grid-popup">
-		{#if showSearch}
-			<input bind:this={searchEl} bind:value={search} placeholder="Filter..."
-				class="icon-grid-search" type="text" autocomplete="off"
-				onkeydown={handleKeydown} />
-		{/if}
-		<div class="icon-grid" style="grid-template-columns: repeat({columns}, 1fr);" role="listbox">
-			{#each filtered as item}
-				<button type="button"
-					class="icon-grid-cell"
-					class:active={String(item.value) === String(value)}
-					role="option"
-					aria-selected={String(item.value) === String(value)}
-					onclick={() => select(item)}>
-					<span class="icon-grid-cell-icon"><MdiIcon name={item.icon} size={22} /></span>
-					<span class="icon-grid-cell-label">{item.label}</span>
-					{#if item.desc}
-						<span class="icon-grid-cell-desc">{item.desc}</span>
-					{/if}
-				</button>
-			{/each}
-			{#if filtered.length === 0}
-				<div class="icon-grid-empty" style="grid-column: 1 / -1; text-align: center; padding: 0.75rem; color: var(--color-muted-foreground); font-size: 0.75rem;">{t('common.noMatches')}</div>
+		<div style="{popupStyle} width: {columns * 160 + 16}px;"
+			class="icon-grid-popup">
+			{#if showSearch}
+				<input bind:this={searchEl} bind:value={search} placeholder="Filter..."
+					class="icon-grid-search" type="text" autocomplete="off"
+					onkeydown={handleKeydown} />
 			{/if}
+			<div class="icon-grid" style="grid-template-columns: repeat({columns}, 1fr);" role="listbox">
+				{#each filtered as item}
+					<button type="button"
+						class="icon-grid-cell"
+						class:active={String(item.value) === String(value)}
+						role="option"
+						aria-selected={String(item.value) === String(value)}
+						onclick={() => select(item)}>
+						<span class="icon-grid-cell-icon"><MdiIcon name={item.icon} size={22} /></span>
+						<span class="icon-grid-cell-label">{item.label}</span>
+						{#if item.desc}
+							<span class="icon-grid-cell-desc">{item.desc}</span>
+						{/if}
+					</button>
+				{/each}
+				{#if filtered.length === 0}
+					<div class="icon-grid-empty">{t('common.noMatches')}</div>
+				{/if}
+			</div>
 		</div>
 	</div>
 {/if}
@@ -132,20 +136,21 @@
 		width: 100%;
 		padding: 0.5rem 0.75rem;
 		border: 1px solid var(--color-border);
-		border-radius: 0.375rem;
+		border-radius: 0.625rem;
 		font-size: 0.875rem;
-		background: var(--color-background);
+		background: var(--color-input-bg);
 		color: var(--color-foreground);
-		transition: border-color 0.15s, box-shadow 0.15s;
+		transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
 		text-align: left;
 	}
 	.icon-grid-trigger:hover:not(.disabled) {
-		border-color: var(--color-primary);
+		border-color: var(--color-rule-strong);
+		background: var(--color-glass-strong);
 	}
 	.icon-grid-compact {
-		padding: 0.25rem 0.5rem;
+		padding: 0.3rem 0.55rem;
 		gap: 0.3rem;
-		font-size: 0.875rem;
+		font-size: 0.85rem;
 	}
 	.icon-grid-compact .icon-grid-trigger-label {
 		flex: none;
@@ -165,57 +170,95 @@
 		color: var(--color-muted-foreground);
 		transition: transform 0.15s;
 	}
+
+	/* Portal root — drains the popup out of any backdrop-filter ancestor.
+	   Position: fixed isolates the stacking context at the root level. */
+	.icon-grid-portal-root {
+		position: fixed;
+		inset: 0;
+		z-index: 9998;
+		pointer-events: none;
+	}
+	.icon-grid-backdrop {
+		position: absolute;
+		inset: 0;
+		pointer-events: auto;
+	}
 	.icon-grid-popup {
-		background: var(--color-card);
-		border: 1px solid var(--color-border);
-		border-radius: 0.5rem;
-		box-shadow: 0 10px 30px rgba(0,0,0,0.3);
+		pointer-events: auto;
+		/* Solid surface — popups need legibility, not glass translucency.
+		   We sit above the aurora gradient so a near-opaque background is
+		   what reads. */
+		background: color-mix(in srgb, var(--color-background) 92%, transparent);
+		backdrop-filter: blur(28px) saturate(160%);
+		-webkit-backdrop-filter: blur(28px) saturate(160%);
+		border: 1px solid var(--color-rule-strong);
+		border-radius: 14px;
+		box-shadow: var(--shadow-card), 0 24px 48px -16px rgba(0, 0, 0, 0.5);
 		padding: 0.5rem;
 		max-height: 320px;
 		overflow-y: auto;
 		scrollbar-width: thin;
 	}
+	.icon-grid-popup::after {
+		content: '';
+		position: absolute;
+		inset: 0;
+		border-radius: inherit;
+		pointer-events: none;
+		background: linear-gradient(180deg, var(--color-highlight), transparent 30%);
+		opacity: 0.4;
+	}
 	.icon-grid-search {
 		width: 100%;
-		padding: 0.375rem 0.5rem;
-		margin-bottom: 0.375rem;
-		border: none;
-		border-bottom: 1px solid var(--color-border);
-		border-radius: 0;
-		background: transparent;
+		padding: 0.45rem 0.6rem;
+		margin-bottom: 0.4rem;
+		border: 1px solid var(--color-border);
+		border-radius: 8px;
+		background: var(--color-glass-strong);
 		color: var(--color-foreground);
 		font-size: 0.8rem;
 		outline: none;
+		font-family: inherit;
+	}
+	.icon-grid-search:focus {
+		border-color: var(--color-primary);
+		box-shadow: 0 0 0 2px var(--color-glow);
 	}
 	.icon-grid {
 		display: grid;
 		gap: 0.375rem;
+		position: relative;
+		z-index: 1;
 	}
 	.icon-grid-cell {
 		display: flex;
 		flex-direction: column;
 		align-items: center;
-		gap: 0.25rem;
-		padding: 0.625rem 0.375rem;
-		border-radius: 0.375rem;
-		border: 2px solid transparent;
+		gap: 0.3rem;
+		padding: 0.7rem 0.45rem;
+		border-radius: 10px;
+		border: 1px solid transparent;
 		background: transparent;
 		color: var(--color-foreground);
 		cursor: pointer;
 		transition: all 0.15s;
 		text-align: center;
+		font-family: inherit;
 	}
 	.icon-grid-cell:hover {
-		background: var(--color-muted);
-		transform: scale(1.03);
+		background: var(--color-glass-strong);
+		border-color: var(--color-border);
 	}
 	.icon-grid-cell.active {
+		background: linear-gradient(135deg, color-mix(in srgb, var(--color-primary) 18%, transparent), color-mix(in srgb, var(--color-orchid) 18%, transparent));
 		border-color: var(--color-primary);
-		background: color-mix(in srgb, var(--color-primary) 10%, transparent);
+		box-shadow: inset 0 1px 0 var(--color-highlight), 0 0 0 1px color-mix(in srgb, var(--color-primary) 40%, transparent);
 	}
 	.icon-grid-cell-icon {
 		color: var(--color-muted-foreground);
 	}
+	.icon-grid-cell:hover .icon-grid-cell-icon { color: var(--color-foreground); }
 	.icon-grid-cell.active .icon-grid-cell-icon {
 		color: var(--color-primary);
 	}
@@ -229,4 +272,11 @@
 		color: var(--color-muted-foreground);
 		line-height: 1.2;
 	}
+	.icon-grid-empty {
+		grid-column: 1 / -1;
+		text-align: center;
+		padding: 0.85rem;
+		color: var(--color-muted-foreground);
+		font-size: 0.75rem;
+	}
 </style>
diff --git a/frontend/src/lib/i18n/en.json b/frontend/src/lib/i18n/en.json
index 9288386..5ae745c 100644
--- a/frontend/src/lib/i18n/en.json
+++ b/frontend/src/lib/i18n/en.json
@@ -4,6 +4,10 @@
 		"tagline": "Service notifications"
 	},
 	"nav": {
+		"sectionOverview": "Overview",
+		"sectionRouting": "Routing",
+		"sectionOperators": "Operators",
+		"sectionSystem": "System",
 		"dashboard": "Dashboard",
 		"providers": "Providers",
 		"notificationTrackers": "Notif. Trackers",
diff --git a/frontend/src/lib/i18n/ru.json b/frontend/src/lib/i18n/ru.json
index bbaca58..bed9d62 100644
--- a/frontend/src/lib/i18n/ru.json
+++ b/frontend/src/lib/i18n/ru.json
@@ -4,6 +4,10 @@
 		"tagline": "Уведомления о сервисах"
 	},
 	"nav": {
+		"sectionOverview": "Обзор",
+		"sectionRouting": "Маршрутизация",
+		"sectionOperators": "Операторы",
+		"sectionSystem": "Система",
 		"dashboard": "Главная",
 		"providers": "Провайдеры",
 		"notificationTrackers": "Трекеры увед.",
diff --git a/frontend/src/lib/portal.ts b/frontend/src/lib/portal.ts
new file mode 100644
index 0000000..a475f27
--- /dev/null
+++ b/frontend/src/lib/portal.ts
@@ -0,0 +1,35 @@
+/**
+ * Svelte action that re-parents a node to document.body (or any selector).
+ *
+ * Use this for popups / dropdowns / tooltips that rely on
+ * `position: fixed` positioning. Any ancestor with `backdrop-filter`,
+ * `transform`, `filter`, `perspective`, `contain: paint`, or
+ * `will-change: transform` becomes the containing block for fixed
+ * descendants — which silently breaks viewport-relative positioning.
+ *
+ * Portalling sidesteps that by detaching the node from the component
+ * tree and appending it to a target outside any such ancestor.
+ *
+ * Usage:
+ *   <div use:portal>...</div>          // → document.body
+ *   <div use:portal={'#root'}>...</div> // → custom selector
+ */
+export type PortalTarget = string | HTMLElement;
+
+export function portal(node: HTMLElement, target: PortalTarget = 'body') {
+	function attach(t: PortalTarget) {
+		const el = typeof t === 'string' ? document.querySelector(t) : t;
+		if (el instanceof HTMLElement) el.appendChild(node);
+	}
+
+	attach(target);
+
+	return {
+		update(newTarget: PortalTarget) {
+			attach(newTarget);
+		},
+		destroy() {
+			node.parentNode?.removeChild(node);
+		},
+	};
+}
diff --git a/frontend/src/routes/+layout.svelte b/frontend/src/routes/+layout.svelte
index c904781..506cb6a 100644
--- a/frontend/src/routes/+layout.svelte
+++ b/frontend/src/routes/+layout.svelte
@@ -201,6 +201,19 @@
 		: baseNavEntries
 	);
 
+	/**
+	 * Section labels above groups of nav entries — emitted in the template
+	 * before the entry whose key matches a map below. Mirrors the Aurora
+	 * mockup's "Overview / Routing / Operators / System" section rhythm
+	 * without breaking the existing collapsible-group structure.
+	 */
+	const SECTION_BREAKS: Record<string, string> = {
+		'nav.dashboard': 'nav.sectionOverview',
+		'nav.notification': 'nav.sectionRouting',
+		'nav.bots': 'nav.sectionOperators',
+		'nav.settings': 'nav.sectionSystem',
+	};
+
 	// Track which groups are expanded (persisted in localStorage)
 	let expandedGroups = $state<Record<string, boolean>>({});
 
@@ -395,22 +408,12 @@
 				</div>
 			{/if}
 
-			<!-- Search button -->
-			<div class="{collapsed ? 'px-2 py-1.5' : 'px-3 py-1.5'}" style="border-bottom: 1px solid var(--color-border);">
-				<button onclick={() => openSearch?.()}
-					class="search-btn flex items-center gap-2 w-full {collapsed ? 'justify-center px-2' : 'px-2.5'} py-1.5 rounded-lg text-sm transition-all duration-200"
-					title={t('searchPalette.placeholder')}>
-					<NavIcon name="mdiMagnify" size={16} />
-					{#if !collapsed}
-						<span class="flex-1 text-left text-xs">{t('searchPalette.placeholder')}</span>
-						<kbd class="text-[0.6rem] font-mono px-1 py-0.5 rounded" style="background: var(--color-background); border: 1px solid var(--color-border);">{isMac ? '⌘' : 'Ctrl '}K</kbd>
-					{/if}
-				</button>
-			</div>
-
 			<!-- Nav -->
 			<nav class="flex-1 p-2 space-y-0.5 overflow-y-auto">
 				{#each navEntries as entry}
+					{#if SECTION_BREAKS[entry.key] && !collapsed}
+						<div class="nav-section-label">{t(SECTION_BREAKS[entry.key])}</div>
+					{/if}
 					{#if isGroup(entry)}
 						<!-- Group header -->
 						<button
@@ -472,60 +475,49 @@
 			</nav>
 
 			<!-- Footer -->
-			<div style="border-top: 1px solid var(--color-border);">
-				<!-- Theme & Language -->
-				<div class="flex {collapsed ? 'flex-col items-center gap-1 p-2' : 'gap-1.5 px-4 py-2.5'}">
-					<button onclick={toggleLocale}
-						class="footer-pill flex items-center justify-center {collapsed ? 'w-8 h-8' : 'px-2.5 py-1'} rounded-lg text-xs font-medium transition-all duration-200"
-						title={t('common.language')}>
-						{getLocale().toUpperCase()}
-					</button>
-					<button onclick={cycleTheme}
-						class="footer-pill flex items-center justify-center {collapsed ? 'w-8 h-8' : 'px-2.5 py-1'} rounded-lg text-xs transition-all duration-200"
-						title={t('common.theme')}>
-						<NavIcon name={theme.resolved === 'dark' ? 'mdiWeatherNight' : theme.current === 'system' ? 'mdiDesktopTowerMonitor' : 'mdiWeatherSunny'} size={14} />
-					</button>
-					<a href="/docs" target="_blank" rel="noopener noreferrer"
-						class="footer-pill flex items-center justify-center {collapsed ? 'w-8 h-8' : 'px-2.5 py-1'} rounded-lg text-xs transition-all duration-200"
-						title={t('common.apiDocs')}>
-						<NavIcon name="mdiApi" size={14} />
-					</a>
-				</div>
-
-				<!-- User info -->
-				<div class="p-2.5" style="border-top: 1px solid var(--color-border);">
-					{#if collapsed}
+			<div class="sidebar-foot">
+				{#if collapsed}
+					<div class="flex flex-col items-center gap-1.5 py-3">
+						<a href="/docs" target="_blank" rel="noopener noreferrer"
+							class="sidebar-icon-btn flex items-center justify-center w-8 h-8 rounded-lg transition-all duration-200"
+							title={t('common.apiDocs')}>
+							<NavIcon name="mdiApi" size={14} />
+						</a>
 						<button onclick={logout}
-							class="sidebar-icon-btn w-full flex justify-center py-2 rounded-lg transition-all duration-200"
+							class="sidebar-icon-btn flex items-center justify-center w-8 h-8 rounded-lg transition-all duration-200"
 							title={t('nav.logout')}>
 							<NavIcon name="mdiLogout" size={16} />
 						</button>
-					{:else}
-						<div class="px-1.5">
-							<div class="flex items-center justify-between">
-								<div class="flex items-center gap-2.5">
-									<div class="user-avatar">
-										{auth.user.username[0].toUpperCase()}
-									</div>
-									<div>
-										<p class="text-sm font-medium">{auth.user.username}</p>
-										<p class="text-[0.65rem] tracking-wide uppercase" style="color: var(--color-muted-foreground);">{auth.user.role}</p>
-									</div>
-								</div>
-								<button onclick={logout}
-									class="sidebar-icon-btn p-1.5 rounded-lg transition-all duration-200"
-									title={t('nav.logout')}>
-									<NavIcon name="mdiLogout" size={15} />
-								</button>
+					</div>
+				{:else}
+					<div class="user-card">
+						<div class="user-card__main">
+							<div class="user-avatar">
+								{auth.user.username[0].toUpperCase()}
 							</div>
-							<button onclick={() => showPasswordForm = true}
-								class="change-pwd-link text-[0.7rem] mt-1.5 transition-colors duration-200 flex items-center gap-1">
-								<NavIcon name="mdiKeyVariant" size={12} />
-								{t('common.changePassword')}
+							<div class="user-card__text min-w-0">
+								<p class="user-card__name truncate">{auth.user.username}</p>
+								<p class="user-card__role">{auth.user.role}</p>
+							</div>
+							<span class="user-card__chip" title={t('dashboard.live')}></span>
+						</div>
+						<div class="user-card__actions">
+							<button onclick={() => showPasswordForm = true} class="user-card__btn"
+								title={t('common.changePassword')}>
+								<NavIcon name="mdiKeyVariant" size={13} />
+								<span>{t('common.changePassword')}</span>
+							</button>
+							<a href="/docs" target="_blank" rel="noopener noreferrer"
+								class="user-card__btn" title={t('common.apiDocs')}>
+								<NavIcon name="mdiApi" size={13} />
+							</a>
+							<button onclick={logout} class="user-card__btn user-card__btn--danger"
+								title={t('nav.logout')}>
+								<NavIcon name="mdiLogout" size={13} />
 							</button>
 						</div>
-					{/if}
-				</div>
+					</div>
+				{/if}
 			</div>
 		</aside>
 
@@ -611,10 +603,34 @@
 		{/if}
 
 		<!-- Main content -->
-		<main class="flex-1 overflow-auto md:pb-0"
+		<main class="main-col flex-1 overflow-auto md:pb-0"
 			style="padding-bottom: calc(4rem + env(safe-area-inset-bottom, 0px));">
+
+			<!-- Always-visible topbar — search + utilities + primary CTA -->
+			<div class="topbar max-w-7xl mx-auto px-4 md:px-8 pt-4 md:pt-6">
+				<div class="topbar-glass">
+					<button type="button" class="topbar-search" onclick={() => openSearch?.()}>
+						<NavIcon name="mdiMagnify" size={16} />
+						<span class="topbar-search__text">{t('searchPalette.placeholder')}</span>
+						<span class="topbar-search__kbd font-mono">{isMac ? '⌘' : 'Ctrl '}K</span>
+					</button>
+					<button type="button" class="topbar-icon-btn" onclick={cycleTheme}
+						title={t('common.theme')} aria-label={t('common.theme')}>
+						<NavIcon name={theme.resolved === 'dark' ? 'mdiWeatherNight' : theme.current === 'system' ? 'mdiDesktopTowerMonitor' : 'mdiWeatherSunny'} size={16} />
+					</button>
+					<button type="button" class="topbar-icon-btn" onclick={toggleLocale}
+						title={t('common.language')} aria-label={t('common.language')}>
+						<span class="topbar-locale font-mono">{getLocale().toUpperCase()}</span>
+					</button>
+					<a href="/notification-trackers" class="topbar-cta">
+						<NavIcon name="mdiPlus" size={14} />
+						<span>{t('dashboard.newTracker')}</span>
+					</a>
+				</div>
+			</div>
+
 			{#key page.url.pathname}
-				<div class="max-w-7xl mx-auto p-4 md:p-8" in:fade={{ duration: 200, delay: 50 }}>
+				<div class="max-w-7xl mx-auto px-4 md:px-8 pb-4 md:pb-8 pt-4" in:fade={{ duration: 200, delay: 50 }}>
 					{@render children()}
 				</div>
 			{/key}
@@ -785,24 +801,15 @@
 		color: var(--color-foreground);
 	}
 
-	/* Search button */
-	.search-btn {
-		background: var(--color-glass-strong);
-		color: var(--color-muted-foreground);
-		border: 1px solid var(--color-border);
-	}
-	.search-btn:hover {
-		background: var(--color-glass-elev);
-		border-color: var(--color-rule-strong);
-		color: var(--color-foreground);
-	}
-
-	/* Nav links — soft glass hovers, gradient bar on active */
+	/* Nav links — soft glass hovers, gradient bar on active.
+	   Snapped from the Aurora dashboard mockup. */
 	.nav-link {
 		color: var(--color-muted-foreground);
 		background: transparent;
 		font-weight: 450;
 		border-radius: 12px !important;
+		font-size: 13.5px;
+		letter-spacing: -0.005em;
 	}
 	.nav-link:not(.active):hover {
 		background: var(--color-glass-strong);
@@ -818,24 +825,95 @@
 		background: var(--color-glass-elev);
 	}
 
-	/* Footer pill buttons (locale, theme) */
-	.footer-pill {
-		background: var(--color-glass-strong);
-		color: var(--color-muted-foreground);
-		border: 1px solid var(--color-border);
+	/* Sidebar footer card */
+	.sidebar-foot {
+		padding: 0.85rem 0.85rem 1rem;
 	}
-	.footer-pill:hover {
+	.user-card {
+		background: var(--color-glass-strong);
+		border: 1px solid var(--color-border);
+		border-radius: 14px;
+		padding: 0.75rem 0.85rem 0.6rem;
+		box-shadow: inset 0 1px 0 var(--color-highlight);
+	}
+	.user-card__main {
+		display: flex; align-items: center; gap: 0.7rem;
+	}
+	.user-card__text { line-height: 1.15; }
+	.user-card__name {
+		font-size: 0.82rem;
+		font-weight: 500;
 		color: var(--color-foreground);
+		margin: 0;
+	}
+	.user-card__role {
+		font-size: 0.6rem;
+		color: var(--color-muted-foreground);
+		margin: 2px 0 0;
+		text-transform: uppercase;
+		letter-spacing: 0.13em;
+	}
+	.user-card__chip {
+		margin-left: auto;
+		width: 8px; height: 8px;
+		border-radius: 50%;
+		background: var(--color-mint);
+		box-shadow: 0 0 8px var(--color-mint);
+		flex-shrink: 0;
+	}
+	.user-card__actions {
+		display: flex; gap: 0.3rem;
+		margin-top: 0.65rem;
+		padding-top: 0.55rem;
+		border-top: 1px solid var(--color-border);
+	}
+	.user-card__btn {
+		display: inline-flex; align-items: center; justify-content: center; gap: 0.35rem;
+		padding: 0.35rem 0.55rem;
+		flex: 1;
+		font-size: 0.65rem;
+		color: var(--color-muted-foreground);
+		background: transparent;
+		border: 1px solid transparent;
+		border-radius: 7px;
+		cursor: pointer;
+		transition: all 0.15s;
+		font-family: inherit;
+		text-decoration: none;
+	}
+	.user-card__btn span {
+		max-width: 90px;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+	}
+	.user-card__btn:not(.user-card__btn--danger):not(:has(span)) { flex: 0 0 auto; }
+	.user-card__btn:hover {
 		background: var(--color-glass-elev);
-		border-color: var(--color-rule-strong);
+		color: var(--color-foreground);
+	}
+	.user-card__btn--danger:hover {
+		background: var(--color-error-bg);
+		color: var(--color-error-fg);
 	}
 
-	/* Change password link */
-	.change-pwd-link {
+	/* Section labels above each nav group */
+	:global(.nav-section-label) {
+		display: flex;
+		align-items: center;
+		gap: 0.55rem;
+		font-size: 0.6rem;
+		font-weight: 600;
+		letter-spacing: 0.18em;
+		text-transform: uppercase;
 		color: var(--color-muted-foreground);
+		padding: 0.85rem 0.85rem 0.4rem;
 	}
-	.change-pwd-link:hover {
-		color: var(--color-primary);
+	:global(.nav-section-label::after) {
+		content: '';
+		flex: 1;
+		height: 1px;
+		background: var(--color-border);
 	}
 
 	/* Primary action button (password form submit) */
@@ -881,6 +959,115 @@
 		text-align: center;
 	}
 
+	/* === TOPBAR — always-visible search + utility row === */
+	.main-col {
+		display: flex;
+		flex-direction: column;
+	}
+	.topbar {
+		position: sticky;
+		top: 0;
+		z-index: 30;
+		flex-shrink: 0;
+	}
+	.topbar-glass {
+		display: flex;
+		align-items: center;
+		gap: 0.5rem;
+		padding: 0.5rem 0.6rem 0.5rem 0.85rem;
+		background: var(--color-glass);
+		backdrop-filter: blur(28px) saturate(160%);
+		-webkit-backdrop-filter: blur(28px) saturate(160%);
+		border: 1px solid var(--color-border);
+		border-radius: 18px;
+		box-shadow: var(--shadow-card);
+		position: relative;
+	}
+	.topbar-glass::after {
+		content: '';
+		position: absolute; inset: 0;
+		border-radius: inherit;
+		pointer-events: none;
+		background: linear-gradient(180deg, var(--color-highlight), transparent 30%);
+		opacity: 0.4;
+	}
+	.topbar-search {
+		flex: 1;
+		display: inline-flex;
+		align-items: center;
+		gap: 0.65rem;
+		padding: 0.55rem 0.85rem;
+		background: var(--color-glass-strong);
+		border: 1px solid var(--color-border);
+		border-radius: 12px;
+		color: var(--color-muted-foreground);
+		font-size: 0.85rem;
+		font-family: inherit;
+		cursor: text;
+		transition: all 0.15s;
+		text-align: left;
+	}
+	.topbar-search:hover {
+		background: var(--color-glass-elev);
+		border-color: var(--color-rule-strong);
+	}
+	.topbar-search__text {
+		flex: 1;
+		text-align: left;
+	}
+	.topbar-search__kbd {
+		font-size: 0.65rem;
+		padding: 2px 7px;
+		border-radius: 6px;
+		background: var(--color-glass);
+		border: 1px solid var(--color-border);
+		color: var(--color-foreground);
+	}
+	.topbar-icon-btn {
+		width: 36px; height: 36px;
+		display: grid; place-items: center;
+		border-radius: 12px;
+		border: 1px solid var(--color-border);
+		background: var(--color-glass-strong);
+		color: var(--color-muted-foreground);
+		cursor: pointer;
+		transition: all 0.15s;
+	}
+	.topbar-icon-btn:hover {
+		background: var(--color-glass-elev);
+		color: var(--color-foreground);
+	}
+	.topbar-locale {
+		font-size: 0.65rem;
+		font-weight: 600;
+		letter-spacing: 0.06em;
+	}
+	.topbar-cta {
+		display: inline-flex;
+		align-items: center;
+		gap: 0.45rem;
+		padding: 0 1rem;
+		height: 36px;
+		border-radius: 12px;
+		border: 0;
+		background: linear-gradient(135deg, var(--color-primary), var(--color-orchid));
+		color: white;
+		font-size: 0.82rem;
+		font-weight: 500;
+		text-decoration: none;
+		cursor: pointer;
+		box-shadow: 0 6px 20px -8px var(--color-glow-strong), inset 0 1px 0 rgba(255,255,255,0.4);
+		transition: transform 0.15s;
+		flex-shrink: 0;
+	}
+	.topbar-cta:hover { transform: translateY(-1px); }
+
+	@media (max-width: 720px) {
+		.topbar-cta span { display: none; }
+		.topbar-cta { padding: 0; width: 36px; justify-content: center; }
+		.topbar-search__kbd { display: none; }
+	}
+
 	/* Mobile bottom-nav */
 	@media (max-width: 767px) {
 		.app-shell {
@@ -897,5 +1084,6 @@
 		.mobile-more-panel button:hover {
 			background: var(--color-glass-strong);
 		}
+		.topbar { display: none; }
 	}
 </style>
