diff --git a/frontend/src/components/Icons.tsx b/frontend/src/components/Icons.tsx
new file mode 100644
index 0000000..8ff57d2
--- /dev/null
+++ b/frontend/src/components/Icons.tsx
@@ -0,0 +1,71 @@
+import type { SVGProps } from "react";
+
+export type IconName =
+  | "activity"
+  | "alert"
+  | "arrow-left"
+  | "audit"
+  | "bookings"
+  | "check"
+  | "chevron"
+  | "clock"
+  | "fleet"
+  | "integrations"
+  | "knowledge"
+  | "logout"
+  | "menu"
+  | "quality"
+  | "search"
+  | "shield"
+  | "spark"
+  | "user"
+  | "x";
+
+const paths: Record<IconName, JSX.Element> = {
+  activity: <><path d="M3 12h4l2.5-6 5 12 2.5-6h4" /></>,
+  alert: <><path d="M10.3 3.4 2.6 17a2 2 0 0 0 1.7 3h15.4a2 2 0 0 0 1.7-3L13.7 3.4a2 2 0 0 0-3.4 0Z" /><path d="M12 9v4" /><path d="M12 17h.01" /></>,
+  "arrow-left": <><path d="m15 18-6-6 6-6" /></>,
+  audit: <><path d="M9 4h6" /><path d="M9 2h6v4H9z" /><path d="M7 4H5a2 2 0 0 0-2 2v14h18V6a2 2 0 0 0-2-2h-2" /><path d="m8 13 2 2 5-5" /></>,
+  bookings: <><rect x="3" y="5" width="18" height="16" rx="2" /><path d="M16 3v4M8 3v4M3 10h18" /></>,
+  check: <><path d="m5 12 4 4L19 6" /></>,
+  chevron: <><path d="m9 18 6-6-6-6" /></>,
+  clock: <><circle cx="12" cy="12" r="9" /><path d="M12 7v5l3 2" /></>,
+  fleet: <><path d="m5 16-1 3h2" /><path d="m19 16 1 3h-2" /><path d="M4 16h16l-1.4-6.2A2.3 2.3 0 0 0 16.4 8H7.6a2.3 2.3 0 0 0-2.2 1.8L4 16Z" /><path d="M6 13h12" /><circle cx="7" cy="16" r="1" /><circle cx="17" cy="16" r="1" /></>,
+  integrations: <><circle cx="12" cy="12" r="3" /><circle cx="5" cy="6" r="2" /><circle cx="19" cy="6" r="2" /><circle cx="12" cy="20" r="2" /><path d="m7 7.5 2.7 2.3m4.6 0L17 7.5M12 15v3" /></>,
+  knowledge: <><path d="M4 5.5A3.5 3.5 0 0 1 7.5 2H11v18H7.5A3.5 3.5 0 0 0 4 23V5.5Z" /><path d="M20 5.5A3.5 3.5 0 0 0 16.5 2H13v18h3.5A3.5 3.5 0 0 1 20 23V5.5Z" /></>,
+  logout: <><path d="M10 17l5-5-5-5M15 12H3" /><path d="M14 4h5a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2h-5" /></>,
+  menu: <><path d="M4 7h16M4 12h16M4 17h16" /></>,
+  quality: <><path d="m12 3 2.2 4.5 5 .7-3.6 3.5.9 5-4.5-2.4-4.5 2.4.9-5-3.6-3.5 5-.7L12 3Z" /></>,
+  search: <><circle cx="11" cy="11" r="7" /><path d="m20 20-4-4" /></>,
+  shield: <><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10Z" /><path d="m9 12 2 2 4-4" /></>,
+  spark: <><path d="m12 3 1.5 4.5L18 9l-4.5 1.5L12 15l-1.5-4.5L6 9l4.5-1.5L12 3Z" /><path d="m19 15 .8 2.2L22 18l-2.2.8L19 21l-.8-2.2L16 18l2.2-.8L19 15Z" /></>,
+  user: <><circle cx="12" cy="8" r="4" /><path d="M4 21a8 8 0 0 1 16 0" /></>,
+  x: <><path d="m6 6 12 12M18 6 6 18" /></>,
+};
+
+export function Icon({ name, ...props }: { name: IconName } & SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      aria-hidden="true"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="1.8"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      focusable="false"
+      {...props}
+    >
+      {paths[name]}
+    </svg>
+  );
+}
+
+export function BrandMark({ className = "" }: { className?: string }) {
+  return (
+    <svg className={className} aria-hidden="true" viewBox="0 0 32 32" fill="none">
+      <path d="M5 23V8l7.1 8L19 8h8v15h-5V14l-9.9 11L10 22.6V23H5Z" fill="currentColor" />
+      <path d="M3 15.5h26" stroke="#2dd4bf" strokeWidth="2.5" />
+    </svg>
+  );
+}
diff --git a/frontend/src/components/Layout.tsx b/frontend/src/components/Layout.tsx
index 865529f..21a0371 100644
--- a/frontend/src/components/Layout.tsx
+++ b/frontend/src/components/Layout.tsx
@@ -1,19 +1,34 @@
+import { useState } from "react";
 import { NavLink, Outlet, useNavigate } from "react-router-dom";
 import { useAuth } from "../context/AuthContext";
+import { BrandMark, Icon, type IconName } from "./Icons";
 
-const NAV_ITEMS = [
-  { to: "/dashboard", label: "Dashboard" },
-  { to: "/vehicles", label: "Vehicles" },
-  { to: "/bookings", label: "Bookings" },
-  { to: "/data-quality", label: "Data Quality" },
-  { to: "/knowledge", label: "Knowledge" },
-  { to: "/automation", label: "Automation" },
-  { to: "/audit", label: "Audit" },
+const NAV_GROUPS: Array<{ label: string; items: Array<{ to: string; label: string; shortLabel: string; icon: IconName }> }> = [
+  {
+    label: "Operate",
+    items: [
+      { to: "/dashboard", label: "Overview", shortLabel: "Overview", icon: "activity" },
+      { to: "/vehicles", label: "Fleet", shortLabel: "Fleet", icon: "fleet" },
+      { to: "/bookings", label: "Bookings", shortLabel: "Bookings", icon: "bookings" },
+      { to: "/data-quality", label: "Data quality", shortLabel: "Quality", icon: "quality" },
+    ],
+  },
+  {
+    label: "Assure",
+    items: [
+      { to: "/knowledge", label: "Knowledge", shortLabel: "Knowledge", icon: "knowledge" },
+      { to: "/automation", label: "Integrations", shortLabel: "Systems", icon: "integrations" },
+      { to: "/audit", label: "Audit trail", shortLabel: "Audit", icon: "audit" },
+    ],
+  },
 ];
 
+const MOBILE_ITEMS = NAV_GROUPS.flatMap((group) => group.items).slice(0, 5);
+
 export function Layout() {
   const { user, logout } = useAuth();
   const navigate = useNavigate();
+  const [mobileOpen, setMobileOpen] = useState(false);
 
   function handleLogout() {
     logout();
@@ -22,38 +37,80 @@ export function Layout() {
 
   return (
     <div className="app-shell">
-      <p className="demo-banner">
-        Synthetic demo environment — no real customer or vehicle data.
-      </p>
-      <header className="app-header">
-        <span className="brand">MobilityOps</span>
-        <nav aria-label="Primary">
-          <ul>
-            {NAV_ITEMS.map((item) => (
-              <li key={item.to}>
-                <NavLink to={item.to} className={({ isActive }) => (isActive ? "active" : "")}>
-                  {item.label}
-                </NavLink>
-              </li>
-            ))}
-          </ul>
-        </nav>
-        <div className="user-badge">
-          {user && (
-            <>
-              <span>
-                {user.display_name} · {user.role === "operations_manager" ? "Operations Manager" : "Rental Employee"}
-              </span>
-              <button type="button" onClick={handleLogout}>
-                Switch role
-              </button>
-            </>
-          )}
+      <a className="skip-link" href="#main-content">Skip to main content</a>
+
+      <aside className={`sidebar ${mobileOpen ? "is-open" : ""}`}>
+        <div className="brand-lockup">
+          <BrandMark className="brand-mark" />
+          <div><strong>MobilityOps</strong><span>Control centre</span></div>
         </div>
-      </header>
-      <main id="main-content">
-        <Outlet />
-      </main>
+        <nav aria-label="Primary navigation">
+          {NAV_GROUPS.map((group) => (
+            <div className="nav-group" key={group.label}>
+              <p>{group.label}</p>
+              <ul>
+                {group.items.map((item) => (
+                  <li key={item.to}>
+                    <NavLink to={item.to} onClick={() => setMobileOpen(false)}>
+                      <Icon name={item.icon} />
+                      <span>{item.label}</span>
+                    </NavLink>
+                  </li>
+                ))}
+              </ul>
+            </div>
+          ))}
+        </nav>
+        <div className="sidebar-foot">
+          <span className="environment-dot" />
+          <div><strong>Demo environment</strong><span>Synthetic data only</span></div>
+        </div>
+      </aside>
+
+      {mobileOpen && <button className="nav-scrim" aria-label="Close navigation" onClick={() => setMobileOpen(false)} />}
+
+      <div className="app-workspace">
+        <header className="topbar">
+          <button className="icon-button mobile-menu" type="button" onClick={() => setMobileOpen(true)} aria-label="Open navigation">
+            <Icon name="menu" />
+          </button>
+          <label className="global-search">
+            <Icon name="search" />
+            <span className="visually-hidden">Search MobilityOps</span>
+            <input type="search" placeholder="Search fleet, booking or customer…" />
+            <kbd>Ctrl K</kbd>
+          </label>
+          <div className="topbar-meta">
+            <span className="timezone"><Icon name="clock" /> Europe/Brussels</span>
+            {user && (
+              <div className="operator">
+                <span className="avatar">{user.display_name.split(" ").map((name) => name[0]).join("").slice(0, 2)}</span>
+                <span><strong>{user.display_name}</strong><small>{user.role === "operations_manager" ? "Operations manager" : "Rental employee"}</small></span>
+              </div>
+            )}
+            <button className="icon-button" type="button" onClick={handleLogout} aria-label="Switch role" title="Switch demo role">
+              <Icon name="logout" />
+            </button>
+          </div>
+        </header>
+
+        <p className="demo-banner"><Icon name="shield" /> Synthetic demo data · no real customer or vehicle information</p>
+        <main id="main-content" tabIndex={-1}><Outlet /></main>
+        <footer className="app-footer"><span>MobilityOps PoC</span><span>Europe/Brussels · Synthetic demo data</span></footer>
+      </div>
+
+      <nav className="mobile-nav" aria-label="Mobile navigation">
+        {MOBILE_ITEMS.map((item) => (
+          <NavLink key={item.to} to={item.to}>
+            <Icon name={item.icon} />
+            <span>{item.shortLabel}</span>
+          </NavLink>
+        ))}
+        <button type="button" onClick={() => setMobileOpen(true)}>
+          <Icon name="menu" />
+          <span>More</span>
+        </button>
+      </nav>
     </div>
   );
 }
diff --git a/frontend/src/components/PageChrome.tsx b/frontend/src/components/PageChrome.tsx
new file mode 100644
index 0000000..c2eb648
--- /dev/null
+++ b/frontend/src/components/PageChrome.tsx
@@ -0,0 +1,85 @@
+import type { ReactNode } from "react";
+import { Icon, type IconName } from "./Icons";
+
+export function PageHeader({
+  eyebrow,
+  title,
+  description,
+  actions,
+}: {
+  eyebrow: string;
+  title: string;
+  description?: string;
+  actions?: ReactNode;
+}) {
+  return (
+    <header className="page-header">
+      <div>
+        <p className="page-eyebrow">{eyebrow}</p>
+        <h1>{title}</h1>
+        {description && <p className="page-description">{description}</p>}
+      </div>
+      {actions && <div className="page-actions">{actions}</div>}
+    </header>
+  );
+}
+
+export function SectionHeading({
+  title,
+  description,
+  action,
+}: {
+  title: string;
+  description?: string;
+  action?: ReactNode;
+}) {
+  return (
+    <div className="section-heading">
+      <div>
+        <h2>{title}</h2>
+        {description && <p>{description}</p>}
+      </div>
+      {action}
+    </div>
+  );
+}
+
+export function LoadingState({ label = "Loading workspace…" }: { label?: string }) {
+  return (
+    <div className="state-panel" role="status">
+      <span className="spinner" aria-hidden="true" />
+      <p>{label}</p>
+    </div>
+  );
+}
+
+export function ErrorState({ message }: { message: string }) {
+  return (
+    <div className="state-panel state-error" role="alert">
+      <Icon name="alert" />
+      <div><strong>We couldn’t load this workspace.</strong><p>{message}</p></div>
+    </div>
+  );
+}
+
+export function EmptyState({
+  icon = "check",
+  title,
+  detail,
+}: {
+  icon?: IconName;
+  title: string;
+  detail: string;
+}) {
+  return (
+    <div className="state-panel state-empty">
+      <Icon name={icon} />
+      <div><strong>{title}</strong><p>{detail}</p></div>
+    </div>
+  );
+}
+
+export function IntegrationMark({ kind }: { kind: "n8n" | "rag" | "mcp" }) {
+  const labels = { n8n: "n8n", rag: "RA", mcp: "MC" };
+  return <span className={`integration-mark integration-${kind}`} aria-hidden="true">{labels[kind]}</span>;
+}
diff --git a/frontend/src/pages/Login.tsx b/frontend/src/pages/Login.tsx
index 6c0df9f..a62355f 100644
--- a/frontend/src/pages/Login.tsx
+++ b/frontend/src/pages/Login.tsx
@@ -2,6 +2,7 @@ import { useState } from "react";
 import { useNavigate } from "react-router-dom";
 import { useAuth } from "../context/AuthContext";
 import type { Role } from "../api/types";
+import { BrandMark, Icon } from "../components/Icons";
 
 export function Login() {
   const { loginAs, loading } = useAuth();
@@ -20,31 +21,43 @@ export function Login() {
 
   return (
     <main className="login-shell">
-      <p className="demo-banner">
-        Synthetic demo environment — no real customer or vehicle data.
-      </p>
-      <section className="login-hero">
-        <p className="eyebrow">Synthetic proof of concept</p>
-        <h1>MobilityOps</h1>
-        <p>Connected operations for vehicle rental and service teams.</p>
+      <section className="login-story" aria-labelledby="product-name">
+        <div className="brand-lockup login-brand"><BrandMark className="brand-mark" /><div><strong>MobilityOps</strong><span>Control centre</span></div></div>
+        <div className="login-message">
+          <p className="eyebrow">Connected mobility operations</p>
+          <h1 id="product-name">Every hand-off.<br />One clear view.</h1>
+          <p>Turn fleet state, rental returns, data quality and automation into one calm operational rhythm.</p>
+        </div>
+        <div className="control-illustration" aria-hidden="true">
+          <div className="illustration-orbit orbit-one"><span /></div>
+          <div className="illustration-orbit orbit-two"><span /></div>
+          <div className="illustration-core"><BrandMark /></div>
+          <span className="illustration-node node-one"><Icon name="fleet" /></span>
+          <span className="illustration-node node-two"><Icon name="bookings" /></span>
+          <span className="illustration-node node-three"><Icon name="quality" /></span>
+        </div>
+        <p className="login-footnote"><Icon name="shield" /> Synthetic proof of concept · no real customer data</p>
       </section>
-      <section className="login-panel panel" aria-labelledby="login-heading">
-        <h2 id="login-heading">Choose a demo role</h2>
-        {error && (
-          <p className="error" role="alert">
-            {error}
-          </p>
-        )}
-        <div className="login-options">
-          <button type="button" disabled={loading} onClick={() => handleLogin("operations_manager")}>
-            Open as Operations Manager
-          </button>
-          <p>See the dashboard, resolve data-quality issues, retry automation and reset the demo.</p>
 
-          <button type="button" disabled={loading} onClick={() => handleLogin("rental_employee")}>
-            Open as Rental Employee
-          </button>
-          <p>Register vehicle returns and look up bookings, vehicles and procedures.</p>
+      <section className="login-access" aria-labelledby="login-heading">
+        <div className="login-panel">
+          <p className="page-eyebrow">Demo access</p>
+          <h2 id="login-heading">Choose your workspace</h2>
+          <p className="login-intro">No password is required. Each role opens a scoped synthetic environment.</p>
+          {error && <p className="error" role="alert">{error}</p>}
+          <div className="login-options">
+            <button type="button" aria-label="Open as Operations Manager" disabled={loading} onClick={() => handleLogin("operations_manager")}>
+              <span className="role-icon"><Icon name="activity" /></span>
+              <span><strong>Operations Manager</strong><small>Full overview, quality resolution and retries</small></span>
+              <Icon name="chevron" />
+            </button>
+            <button type="button" aria-label="Open as Rental Employee" disabled={loading} onClick={() => handleLogin("rental_employee")}>
+              <span className="role-icon"><Icon name="user" /></span>
+              <span><strong>Rental Employee</strong><small>Bookings, returns, fleet and procedures</small></span>
+              <Icon name="chevron" />
+            </button>
+          </div>
+          <div className="access-note"><Icon name="shield" /><p><strong>Safe by design</strong><span>All actions are audited and resettable in this demo.</span></p></div>
         </div>
       </section>
     </main>
diff --git a/frontend/src/styles.css b/frontend/src/styles.css
index e60c03e..75116c8 100644
--- a/frontend/src/styles.css
+++ b/frontend/src/styles.css
@@ -1,265 +1,269 @@
 :root {
-  font-family: Inter, ui-sans-serif, system-ui, sans-serif;
-  color: #172033;
-  background: #f3f6fa;
+  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+  color: #0f172a;
+  background: #f5f7fa;
   font-synthesis: none;
+  --ink: #0f172a;
+  --ink-soft: #344256;
+  --muted: #657386;
+  --muted-light: #94a0af;
+  --canvas: #f5f7fa;
+  --surface: #ffffff;
+  --surface-subtle: #f8fafc;
+  --line: #dbe2ea;
+  --line-strong: #c7d1dd;
+  --petrol: #0f172a;
+  --petrol-2: #15243a;
+  --teal: #0f8f83;
+  --teal-dark: #0b6f67;
+  --teal-pale: #e7f7f4;
+  --critical: #c93636;
+  --critical-pale: #fff0f0;
+  --warning: #b96812;
+  --warning-pale: #fff7e8;
+  --info: #356480;
+  --info-pale: #eef6fb;
+  --success: #17724b;
+  --success-pale: #eaf7f0;
+  --focus: #14b8a6;
+  --radius: 4px;
+  --shadow-float: 0 16px 40px rgba(15, 23, 42, .12);
 }
-* { box-sizing: border-box; }
-body { margin: 0; min-width: 320px; }
 
-a { color: #1f5c8f; }
-:focus-visible { outline: 3px solid #1f5c8f; outline-offset: 2px; }
+* { box-sizing: border-box; }
+html { background: var(--canvas); scroll-behavior: smooth; }
+body { margin: 0; min-width: 320px; min-height: 100vh; background: var(--canvas); }
+button, input, select, textarea { font: inherit; }
+button, a { -webkit-tap-highlight-color: transparent; }
+a { color: var(--teal-dark); text-underline-offset: 3px; }
+a:hover { color: var(--teal); }
+:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
+::selection { background: #a7f3d0; color: var(--ink); }
 
 .visually-hidden {
-  position: absolute;
-  width: 1px; height: 1px;
-  overflow: hidden;
-  clip: rect(0 0 0 0);
-  white-space: nowrap;
+  position: absolute !important;
+  width: 1px !important; height: 1px !important;
+  padding: 0 !important; margin: -1px !important;
+  overflow: hidden !important; clip: rect(0, 0, 0, 0) !important;
+  white-space: nowrap !important; border: 0 !important;
 }
+.skip-link { position: fixed; z-index: 100; top: 10px; left: 10px; transform: translateY(-160%); background: white; color: var(--ink); padding: 10px 16px; border: 2px solid var(--teal); border-radius: var(--radius); }
+.skip-link:focus { transform: none; }
 
-.demo-banner {
-  margin: 0;
-  padding: 8px 16px;
-  background: #14324f;
-  color: #eaf2fb;
-  font-size: 0.85rem;
-  text-align: center;
-}
+.app-shell { min-height: 100vh; display: grid; grid-template-columns: 224px minmax(0, 1fr); }
+.sidebar { position: fixed; inset: 0 auto 0 0; z-index: 30; width: 224px; display: flex; flex-direction: column; background: var(--petrol); color: #dbe5ef; border-right: 1px solid #24344b; }
+.brand-lockup { height: 72px; display: flex; align-items: center; gap: 11px; padding: 0 20px; border-bottom: 1px solid #26364c; }
+.brand-mark { width: 31px; height: 31px; color: white; flex: 0 0 auto; }
+.brand-lockup div { display: grid; gap: 2px; }
+.brand-lockup strong { color: white; font-size: .95rem; letter-spacing: -.02em; }
+.brand-lockup span { color: #8291a5; font-size: .68rem; text-transform: uppercase; letter-spacing: .1em; }
+.sidebar nav { flex: 1; padding: 22px 12px; overflow: auto; }
+.nav-group + .nav-group { margin-top: 26px; }
+.nav-group > p { margin: 0 10px 8px; color: #74849a; font-size: .66rem; font-weight: 700; text-transform: uppercase; letter-spacing: .13em; }
+.nav-group ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 3px; }
+.nav-group a { position: relative; min-height: 44px; display: flex; align-items: center; gap: 12px; padding: 9px 11px; color: #b7c3d1; text-decoration: none; border-radius: var(--radius); font-size: .86rem; font-weight: 600; transition: background .16s ease, color .16s ease, transform .16s ease; }
+.nav-group a svg { width: 18px; height: 18px; }
+.nav-group a:hover { background: rgba(255,255,255,.06); color: white; }
+.nav-group a.active { background: #183b49; color: #5eead4; }
+.nav-group a.active::before { content: ""; position: absolute; left: -12px; width: 3px; height: 22px; background: #2dd4bf; }
+.sidebar-foot { display: flex; align-items: center; gap: 9px; margin: 12px; padding: 13px 10px; border: 1px solid #2a394e; border-radius: var(--radius); }
+.sidebar-foot div { display: grid; gap: 2px; }
+.sidebar-foot strong { font-size: .72rem; color: #dbe5ef; }
+.sidebar-foot span:not(.environment-dot) { font-size: .66rem; color: #7f8da1; }
+.environment-dot, .live-indicator { width: 8px; height: 8px; border-radius: 50%; background: #2dd4bf; box-shadow: 0 0 0 4px rgba(45, 212, 191, .12); }
 
-.app-shell { min-height: 100vh; display: flex; flex-direction: column; }
+.app-workspace { grid-column: 2; min-width: 0; min-height: 100vh; display: flex; flex-direction: column; }
+.topbar { height: 64px; display: flex; align-items: center; gap: 20px; padding: 0 28px; background: rgba(255,255,255,.97); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 20; }
+.global-search { width: min(410px, 42vw); min-height: 38px; display: flex; align-items: center; gap: 9px; padding: 0 10px; background: var(--surface-subtle); border: 1px solid var(--line); border-radius: var(--radius); color: var(--muted); }
+.global-search svg { width: 16px; }
+.global-search input { min-width: 0; flex: 1; border: 0; outline: 0; background: transparent; color: var(--ink); font-size: .8rem; }
+.global-search kbd { padding: 2px 5px; border: 1px solid var(--line); background: white; color: var(--muted); font-size: .64rem; border-radius: 3px; }
+.topbar-meta { margin-left: auto; display: flex; align-items: center; gap: 18px; }
+.timezone { display: flex; align-items: center; gap: 6px; color: var(--muted); font-size: .72rem; white-space: nowrap; }
+.timezone svg { width: 15px; }
+.operator { display: flex; align-items: center; gap: 9px; padding-left: 17px; border-left: 1px solid var(--line); }
+.avatar { width: 32px; height: 32px; display: grid; place-items: center; color: white; background: var(--petrol); border-radius: 50%; font-size: .67rem; font-weight: 700; }
+.operator > span:last-child { display: grid; gap: 1px; }
+.operator strong { font-size: .74rem; }
+.operator small { color: var(--muted); font-size: .64rem; }
+.icon-button { width: 40px; height: 40px; display: grid; place-items: center; padding: 0; color: var(--ink-soft); background: transparent; border: 1px solid transparent; border-radius: var(--radius); cursor: pointer; }
+.icon-button:hover { background: var(--surface-subtle); border-color: var(--line); }
+.icon-button svg { width: 18px; height: 18px; }
+.mobile-menu { display: none; }
+.demo-banner { min-height: 32px; margin: 0; display: flex; align-items: center; justify-content: center; gap: 7px; padding: 6px 20px; color: #48566a; background: #eaf0f5; border-bottom: 1px solid #d7e0e8; font-size: .68rem; font-weight: 600; letter-spacing: .02em; }
+.demo-banner svg { width: 14px; height: 14px; }
+#main-content { width: min(1320px, calc(100% - 56px)); margin: 0 auto; padding: 38px 0 64px; flex: 1; }
+.app-footer { min-height: 52px; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 0 28px; color: var(--muted); border-top: 1px solid var(--line); font-size: .68rem; }
+.mobile-nav, .nav-scrim { display: none; }
 
-.app-header {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-  gap: 16px;
-  padding: 14px 24px;
-  background: white;
-  border-bottom: 1px solid #dce3eb;
-}
-.brand { font-weight: 800; font-size: 1.15rem; color: #172033; }
-.app-header nav ul {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 4px;
-  list-style: none;
-  margin: 0; padding: 0;
-}
-.app-header nav a {
-  display: inline-block;
-  padding: 8px 12px;
-  border-radius: 8px;
-  color: #375065;
-  text-decoration: none;
-  font-weight: 600;
-}
-.app-header nav a.active, .app-header nav a[aria-current="page"] {
-  background: #e5eef9;
-  color: #14324f;
-}
-.user-badge { margin-left: auto; display: flex; align-items: center; gap: 12px; font-size: 0.9rem; }
-.user-badge button {
-  padding: 6px 12px;
-  border-radius: 8px;
-  border: 1px solid #cfd8e2;
-  background: white;
-  cursor: pointer;
-}
+.page { animation: page-in .28s ease both; }
+@keyframes page-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
+@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: .01ms !important; } }
+.page-header { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 26px; }
+.page-eyebrow, .eyebrow { margin: 0 0 7px; color: var(--teal-dark); font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .11em; }
+.page-header h1 { margin: 0; color: var(--ink); font-size: clamp(1.75rem, 2.5vw, 2.2rem); line-height: 1.12; letter-spacing: -.035em; }
+.page-description { max-width: 660px; margin: 8px 0 0; color: var(--muted); font-size: .88rem; line-height: 1.55; }
+.page-actions, .status-stack { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
+.section-heading { min-height: 60px; display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; padding: 16px 18px 12px; border-bottom: 1px solid var(--line); }
+.section-heading h2 { margin: 0; font-size: 1rem; letter-spacing: -.015em; }
+.section-heading p { margin: 4px 0 0; color: var(--muted); font-size: .72rem; }
+.section-heading > a { min-height: 30px; display: inline-flex; align-items: center; gap: 4px; color: var(--teal-dark); text-decoration: none; font-size: .72rem; font-weight: 700; }
+.section-heading > a svg { width: 14px; }
+.back-link { width: max-content; min-height: 32px; display: inline-flex; align-items: center; gap: 6px; margin-bottom: 13px; color: var(--muted); text-decoration: none; font-size: .76rem; font-weight: 600; }
+.back-link svg { width: 15px; }
 
-#main-content { width: min(1080px, calc(100% - 32px)); margin: 0 auto; padding: 32px 0 64px; flex: 1; }
+.button { min-height: 40px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 8px 14px; border-radius: var(--radius); border: 1px solid transparent; text-decoration: none; font-size: .78rem; font-weight: 700; cursor: pointer; transition: transform .16s ease, background .16s ease; }
+.button:hover { transform: translateY(-1px); }
+.button svg { width: 16px; height: 16px; }
+.button-primary { color: white; background: var(--teal-dark); border-color: var(--teal-dark); }
+.button-primary:hover { color: white; background: var(--teal); }
+.button-secondary { color: var(--ink); background: white; border-color: var(--line-strong); }
+.button-secondary:hover { color: var(--ink); background: var(--surface-subtle); }
+.button:disabled { opacity: .55; cursor: not-allowed; transform: none; }
 
-.page h1 { margin-top: 0; }
-.page section { margin-bottom: 28px; }
+.readiness-band { min-height: 92px; display: grid; grid-template-columns: minmax(170px, 1.3fr) minmax(540px, 4fr) auto; align-items: stretch; margin-bottom: 16px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
+.readiness-label { display: flex; align-items: center; gap: 12px; padding: 16px 18px; border-right: 1px solid var(--line); }
+.readiness-label h2 { margin: 0; font-size: .83rem; }
+.readiness-label p { margin: 3px 0 0; color: var(--muted); font-size: .65rem; }
+.readiness-metrics { min-width: 0; display: grid; grid-template-columns: repeat(5, 1fr); margin: 0; }
+.metric-cell { position: relative; display: flex; flex-direction: column-reverse; justify-content: center; gap: 3px; padding: 12px 16px; border-right: 1px solid var(--line); }
+.metric-cell::after { content: ""; position: absolute; inset: auto 15px 0; height: 2px; background: #9aa6b4; }
+.metric-cell dt { color: var(--muted); font-size: .64rem; text-transform: uppercase; letter-spacing: .07em; }
+.metric-cell dd { margin: 0; color: var(--ink); font-size: 1.42rem; font-weight: 700; letter-spacing: -.04em; }
+.metric-ready::after { background: var(--teal); }.metric-warning::after { background: var(--warning); }.metric-critical::after { background: var(--critical); }
+.metric-warning dd { color: var(--warning); }.metric-critical dd { color: var(--critical); }
+.inline-action { display: inline-flex; align-items: center; gap: 5px; padding: 0 18px; color: var(--teal-dark); text-decoration: none; font-size: .72rem; font-weight: 700; white-space: nowrap; }
+.inline-action svg { width: 14px; }
 
-.panel {
-  background: white;
-  border: 1px solid #dce3eb;
-  border-radius: 16px;
-  padding: 20px;
-  box-shadow: 0 10px 30px rgba(24, 40, 64, .05);
-}
+.operations-grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(320px, .75fr); gap: 16px; margin-bottom: 16px; }
+.secondary-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
+.work-panel, .panel, .record-surface, .table-shell { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
+.panel { padding: 20px; }
+.queue-controls { display: flex; gap: 8px; padding: 11px 18px; background: var(--surface-subtle); border-bottom: 1px solid var(--line); }
+.queue-controls select, .compact-search { height: 34px; border: 1px solid var(--line-strong); border-radius: var(--radius); background: white; }
+.compact-search { min-width: 0; flex: 1; display: flex; align-items: center; gap: 7px; padding: 0 9px; color: var(--muted); }
+.compact-search svg { width: 14px; }
+.compact-search input { width: 100%; border: 0; outline: 0; background: transparent; font-size: .72rem; }
+.queue-controls select { padding: 0 28px 0 9px; color: var(--ink-soft); font-size: .69rem; }
+.attention-list, .integration-list, .recent-list, .record-list, .automation-list, .today-list { list-style: none; margin: 0; padding: 0; }
+.attention-list li { min-height: 68px; display: grid; grid-template-columns: auto minmax(0,1fr) auto 16px; align-items: center; gap: 11px; padding: 10px 18px; border-bottom: 1px solid #e8edf2; transition: background .14s ease; }
+.attention-list li:last-child { border-bottom: 0; }.attention-list li:hover { background: #f9fbfc; }
+.attention-title { margin: 0; font-size: .78rem; font-weight: 700; }.attention-title a { color: var(--ink); text-decoration: none; }
+.attention-detail { max-width: 58ch; margin: 4px 0 0; color: var(--muted); font-size: .69rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+.queue-ref { color: var(--muted); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .65rem; }.row-chevron { width: 14px; color: var(--muted-light); }
+.quiet-empty { display: flex; align-items: center; gap: 8px; margin: 0; padding: 28px 18px; color: var(--muted); font-size: .78rem; }.quiet-empty svg { width: 18px; }
+.movement-timeline { list-style: none; margin: 0; padding: 8px 18px 15px; }
+.movement-timeline li { display: grid; grid-template-columns: 48px 26px 1fr; align-items: center; min-height: 58px; }
+.movement-timeline time { color: var(--ink); font-size: .75rem; font-weight: 700; }
+.timeline-node { position: relative; z-index: 1; width: 22px; height: 22px; display: grid; place-items: center; color: var(--teal-dark); background: white; border: 1px solid var(--teal); border-radius: 50%; }
+.timeline-node::after { content: ""; position: absolute; z-index: -1; top: 21px; height: 37px; border-left: 1px dashed var(--line-strong); }
+.movement-timeline li:last-child .timeline-node::after { display: none; }.timeline-node svg { width: 12px; }
+.timeline-departure { color: var(--info); border-color: #6a98b3; }
+.movement-timeline li > div { min-width: 0; display: grid; grid-template-columns: auto 1fr; gap: 2px 8px; align-items: baseline; }
+.movement-kind { color: var(--muted); font-size: .59rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; }
+.movement-timeline a { color: var(--ink); font-size: .75rem; font-weight: 700; text-decoration: none; }.movement-timeline small { grid-column: 2; color: var(--muted); font-size: .66rem; }
 
-.metric-grid {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
-  gap: 12px;
-  list-style: none;
-  margin: 0; padding: 0;
-}
-.metric-tile {
-  background: white;
-  border: 1px solid #dce3eb;
-  border-radius: 14px;
-  padding: 16px;
-  display: flex;
-  flex-direction: column;
-  gap: 4px;
-}
-.metric-value { font-size: 1.8rem; font-weight: 800; }
-.metric-label { color: #607084; font-size: 0.85rem; }
+.integration-list li, .recent-list li { min-height: 60px; display: flex; align-items: center; gap: 11px; padding: 10px 18px; border-bottom: 1px solid #e8edf2; }
+.integration-list li:last-child, .recent-list li:last-child { border-bottom: 0; }.integration-list li > div, .recent-list li > div { flex: 1; display: grid; gap: 3px; }
+.integration-list strong, .recent-list strong { font-size: .73rem; }.integration-list div span, .recent-list div span { color: var(--muted); font-size: .65rem; }
+.integration-mark { width: 31px; height: 31px; display: grid; place-items: center; border-radius: var(--radius); color: white; font-size: .58rem; font-weight: 800; letter-spacing: -.04em; }
+.integration-n8n { background: #e85d36; }.integration-rag { background: #4a4b95; }.integration-mcp { background: #314358; }
+.activity-icon { width: 30px; height: 30px; display: grid; place-items: center; color: var(--teal-dark); background: var(--teal-pale); border-radius: 50%; }.activity-icon svg { width: 15px; }
+.recent-list time { color: var(--muted); font-size: .62rem; white-space: nowrap; }
 
-.attention-list, .today-list, .automation-list, .record-list {
-  list-style: none;
-  margin: 12px 0 0;
-  padding: 0;
-  display: flex;
-  flex-direction: column;
-  gap: 10px;
-}
-.attention-list li { display: flex; gap: 12px; align-items: flex-start; padding: 10px 0; border-bottom: 1px solid #edf1f5; }
-.attention-title { margin: 0; font-weight: 700; }
-.attention-detail { margin: 2px 0 0; color: #607084; font-size: 0.9rem; }
+.badge { min-height: 20px; display: inline-flex; align-items: center; gap: 5px; padding: 2px 7px; border: 1px solid transparent; border-radius: 999px; font-size: .59rem; font-weight: 700; line-height: 1.2; text-transform: capitalize; white-space: nowrap; }
+.badge::before, .badge-dot { content: ""; width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
+.severity-high, .status-failed, .status-blocked, .status-rejected, .status-unavailable { color: #9f2929; background: var(--critical-pale); border-color: #f3c5c5; }
+.severity-medium, .status-pending, .status-delivering, .status-needs_attention { color: #93520c; background: var(--warning-pale); border-color: #eed4aa; }
+.severity-low { color: #315f79; background: var(--info-pale); border-color: #c8dfeb; }
+.status-succeeded, .status-resolved, .status-available, .status-returned, .status-active { color: #17633f; background: var(--success-pale); border-color: #bfe3d0; }
+.status-cancelled, .status-deferred, .status-cleaning, .status-maintenance, .status-rented, .status-reserved, .status-not_configured, .status-no_events, .status-no_delivery_yet { color: #536172; background: #f0f3f6; border-color: #d8dfe6; }
+.badge-dot { display: inline-block; }
 
-.today-list li, .automation-list li, .record-list li {
-  display: flex; flex-wrap: wrap; gap: 10px; align-items: center;
-  padding: 8px 0; border-bottom: 1px solid #edf1f5;
-}
-
-.badge {
-  display: inline-block;
-  padding: 3px 10px;
-  border-radius: 999px;
-  font-size: 0.75rem;
-  font-weight: 700;
-  border: 1px solid transparent;
-  white-space: nowrap;
-}
-.severity-high { background: #fbe6e6; color: #8f2323; border-color: #f2b9b9; }
-.severity-medium { background: #fdf1de; color: #8a5a10; border-color: #f0d29e; }
-.severity-low { background: #eaf1fb; color: #315d73; border-color: #c4d9ec; }
-.status-open, .status-pending, .status-active, .status-failed { background: #fdf1de; color: #8a5a10; border-color: #f0d29e; }
-.status-failed { background: #fbe6e6; color: #8f2323; border-color: #f2b9b9; }
-.status-succeeded, .status-resolved, .status-available, .status-returned { background: #e6f5ec; color: #1f6d3d; border-color: #b9e0c9; }
-.status-blocked, .status-rejected { background: #fbe6e6; color: #8f2323; border-color: #f2b9b9; }
-.status-cancelled, .status-deferred, .status-cleaning, .status-maintenance, .status-rented, .status-reserved, .status-delivering {
-  background: #eef1f5; color: #47566b; border-color: #d7dfe8;
-}
-
-.filters { display: flex; flex-wrap: wrap; gap: 16px; align-items: end; margin-bottom: 16px; }
-.filters label { display: flex; flex-direction: column; gap: 4px; font-size: 0.85rem; color: #375065; font-weight: 600; }
-.filters select, .filters input[type="text"] { padding: 8px 10px; border: 1px solid #cfd8e2; border-radius: 8px; font-size: 0.95rem; }
+.filters { display: flex; flex-wrap: wrap; align-items: end; gap: 12px; margin-bottom: 16px; padding: 14px 16px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
+.filters label, .return-form label { display: flex; flex-direction: column; gap: 6px; color: var(--ink-soft); font-size: .67rem; font-weight: 700; letter-spacing: .01em; }
+.filters input[type="text"], .filters select, .return-form input[type="number"], .return-form textarea, .knowledge-input-row input { min-height: 40px; padding: 8px 11px; color: var(--ink); background: white; border: 1px solid var(--line-strong); border-radius: var(--radius); font-size: .78rem; }
+.filters input[type="text"] { min-width: 230px; }.filters select { min-width: 160px; }
 .checkbox-label { flex-direction: row !important; align-items: center; gap: 8px !important; }
+input[type="checkbox"], input[type="radio"] { width: 17px; height: 17px; accent-color: var(--teal-dark); }
 
-.data-table { width: 100%; border-collapse: collapse; background: white; border: 1px solid #dce3eb; border-radius: 12px; overflow: hidden; }
-.data-table th, .data-table td { text-align: left; padding: 10px 12px; border-bottom: 1px solid #edf1f5; font-size: 0.92rem; }
-.data-table thead th { background: #f6f8fb; color: #47566b; font-size: 0.8rem; text-transform: uppercase; letter-spacing: .04em; }
+.table-shell { overflow: hidden; }
+.table-meta { min-height: 40px; display: flex; justify-content: space-between; align-items: center; padding: 0 14px; color: var(--muted); background: var(--surface-subtle); border-bottom: 1px solid var(--line); font-size: .65rem; }
+.data-table { width: 100%; border-collapse: collapse; }
+.data-table th, .data-table td { height: 50px; text-align: left; padding: 9px 14px; border-bottom: 1px solid #e8edf2; font-size: .74rem; vertical-align: middle; }
+.data-table tbody tr:last-child th, .data-table tbody tr:last-child td { border-bottom: 0; }
+.data-table tbody tr { transition: background .14s ease; }.data-table tbody tr:hover { background: #f9fbfc; }
+.data-table thead th { height: 38px; color: var(--muted); background: #f6f8fa; font-size: .61rem; font-weight: 700; text-transform: uppercase; letter-spacing: .075em; }
+.data-table th[scope="row"] { color: var(--ink); font-weight: 700; }.data-table th[scope="row"] a { color: var(--teal-dark); text-decoration: none; }
+.row-attention { box-shadow: inset 2px 0 var(--warning); }.attention-flag { color: var(--warning); font-size: .67rem; font-weight: 700; }
+.data-table td button, .duplicate-compare > button, .resolution-actions button, .confirm-bar button, .pagination button { min-height: 36px; padding: 7px 12px; color: var(--ink); background: white; border: 1px solid var(--line-strong); border-radius: var(--radius); font-size: .7rem; font-weight: 700; cursor: pointer; }
+.data-table td button:hover, .pagination button:hover:not(:disabled) { background: var(--surface-subtle); }.data-table td button:disabled, .pagination button:disabled { opacity: .45; cursor: not-allowed; }
+.table-subtext { display: block; margin-top: 3px; color: var(--muted); font-size: .62rem; }.mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
+.pagination { min-height: 52px; display: flex; justify-content: flex-end; align-items: center; gap: 12px; padding: 8px 14px; border-top: 1px solid var(--line); color: var(--muted); font-size: .68rem; }
+details summary { cursor: pointer; color: var(--teal-dark); }.data-table details pre { max-width: 280px; overflow: auto; color: var(--ink-soft); white-space: pre-wrap; }
 
-.tabs { display: flex; flex-wrap: wrap; gap: 4px; border-bottom: 1px solid #dce3eb; margin: 16px 0; }
-.tabs button {
-  padding: 8px 14px; border: none; background: none; cursor: pointer;
-  border-bottom: 3px solid transparent; font-weight: 600; color: #607084;
-}
-.tabs button.active { color: #14324f; border-bottom-color: #1f5c8f; }
+.tabs { display: flex; gap: 2px; margin: 0 0 16px; padding: 0 4px; overflow-x: auto; border-bottom: 1px solid var(--line); }
+.tabs button { position: relative; min-height: 44px; padding: 8px 13px; border: 0; background: transparent; color: var(--muted); font-size: .72rem; font-weight: 700; text-transform: capitalize; cursor: pointer; }
+.tabs button.active { color: var(--teal-dark); }.tabs button.active::after { content: ""; position: absolute; inset: auto 7px -1px; height: 2px; background: var(--teal); }
+.record-surface { padding: 18px; margin-bottom: 18px; }
+.detail-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 1px; margin: 0; background: var(--line); border: 1px solid var(--line); }
+.detail-grid div { min-height: 76px; padding: 13px 14px; background: white; }
+.detail-grid dt { margin: 0; color: var(--muted); font-size: .63rem; font-weight: 700; text-transform: uppercase; letter-spacing: .065em; }.detail-grid dd { margin: 7px 0 0; color: var(--ink); font-size: .82rem; font-weight: 700; }
+.record-list { display: grid; gap: 1px; margin-bottom: 16px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
+.record-list li { min-height: 52px; display: flex; flex-wrap: wrap; align-items: center; gap: 11px; padding: 10px 14px; background: white; font-size: .75rem; }
 
-.detail-grid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
-.detail-grid div { background: white; border: 1px solid #dce3eb; border-radius: 10px; padding: 10px 14px; }
-.detail-grid dt { color: #607084; font-size: 0.8rem; margin: 0; }
-.detail-grid dd { margin: 4px 0 0; font-weight: 700; }
+.return-form, .return-result { max-width: 880px; margin-top: 22px; padding: 0; overflow: hidden; }
+.return-form > .section-heading { padding: 19px 22px; }.return-progress { min-height: 54px; display: flex; align-items: center; justify-content: center; gap: 9px; padding: 10px 22px; color: var(--muted); background: var(--surface-subtle); border-bottom: 1px solid var(--line); font-size: .65rem; font-weight: 700; }
+.return-progress span { display: flex; align-items: center; gap: 6px; white-space: nowrap; }.return-progress i { width: 22px; height: 22px; display: grid; place-items: center; border: 1px solid var(--line-strong); border-radius: 50%; font-style: normal; }
+.return-progress b { width: 54px; height: 1px; background: var(--line-strong); }.return-progress .is-active, .return-progress .is-complete { color: var(--teal-dark); }.return-progress .is-active i, .return-progress .is-complete i { color: white; background: var(--teal-dark); border-color: var(--teal-dark); }
+.return-capture, .return-review { padding: 22px; }.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 17px; }
+.condition-fieldset { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; margin: 0 0 17px; padding: 0; border: 0; }.condition-fieldset legend { margin-bottom: 8px; color: var(--ink-soft); font-size: .67rem; font-weight: 700; }.check-card { min-height: 48px; padding: 10px 12px; background: var(--surface-subtle); border: 1px solid var(--line); border-radius: var(--radius); }
+.return-form textarea { resize: vertical; min-height: 86px; }.form-actions { display: flex; justify-content: flex-end; gap: 9px; padding: 15px 22px; background: var(--surface-subtle); border-top: 1px solid var(--line); }
+.review-facts { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1px; margin: 0 0 16px; background: var(--line); border: 1px solid var(--line); }.review-facts div { padding: 12px; background: white; }.review-facts dt { color: var(--muted); font-size: .6rem; text-transform: uppercase; }.review-facts dd { margin: 6px 0 0; font-size: .76rem; font-weight: 700; }
+.impact-preview { display: flex; align-items: flex-start; gap: 11px; padding: 15px; border: 1px solid; border-radius: var(--radius); }.impact-preview > svg { width: 20px; flex: 0 0 auto; }.impact-preview strong { font-size: .76rem; }.impact-preview p { margin: 4px 0 0; font-size: .72rem; line-height: 1.45; }.impact-ready { color: #185d41; background: var(--success-pale); border-color: #bfe3d0; }.impact-warning { color: #844909; background: var(--warning-pale); border-color: #eed4aa; }
+.commit-list { list-style: none; display: grid; gap: 7px; margin: 16px 0 0; padding: 0; color: var(--muted); font-size: .7rem; }.commit-list li { display: flex; gap: 7px; }.commit-list svg { width: 14px; color: var(--teal-dark); }
+.success-panel { padding: 22px; }.result-heading { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }.result-heading > span { width: 40px; height: 40px; display: grid; place-items: center; color: white; background: var(--success); border-radius: 50%; }.result-heading svg { width: 20px; }.result-heading h2 { margin: 0; font-size: 1.2rem; }
 
-.mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
-.error { color: #9a2530; font-weight: 600; }
+.duplicate-compare { margin-top: 18px; }.duplicate-compare fieldset { margin: 15px 0; padding: 13px; border: 1px solid var(--line); }.duplicate-compare legend { padding: 0 5px; color: var(--ink-soft); font-size: .69rem; font-weight: 700; }.duplicate-compare fieldset label { display: inline-flex !important; margin-right: 18px; }
+.compare-table th, .compare-table td { vertical-align: top; }.compare-table label { display: inline-flex; flex-direction: row; align-items: center; gap: 6px; }.difference-mark, .match-mark { display: block; width: max-content; margin-top: 4px; padding: 2px 5px; font-size: .52rem; border-radius: 2px; }.difference-mark { color: var(--warning); background: var(--warning-pale); }.match-mark { color: var(--success); background: var(--success-pale); }
+.merge-preview { padding: 13px; color: var(--ink-soft); background: var(--surface-subtle); border-left: 3px solid var(--teal); font-size: .75rem; }.duplicate-compare > button { color: white; background: var(--teal-dark); border-color: var(--teal-dark); }
+.confirm-bar { margin-top: 13px; padding: 15px; background: var(--warning-pale); border: 1px solid #eed4aa; }.confirm-bar p { margin: 0 0 11px; color: #75420c; font-size: .75rem; font-weight: 700; }.confirm-bar button:first-of-type { color: white; background: var(--critical); border-color: var(--critical); }
+.resolution-actions { display: flex; gap: 9px; }.evidence-block { max-width: 100%; padding: 13px; overflow: auto; color: #324054; background: var(--surface-subtle); border: 1px solid var(--line); font-size: .68rem; }
 
-.login-shell { width: min(720px, calc(100% - 32px)); margin: 0 auto; padding: 48px 0; }
-.login-hero { margin-bottom: 24px; }
-.eyebrow { color: #315d73; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; font-size: .8rem; }
-.login-hero h1 { margin: 6px 0; font-size: clamp(2.2rem, 7vw, 3.4rem); line-height: 1; }
-.login-options { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
-.login-options button {
-  padding: 14px 18px; border-radius: 12px; border: none;
-  background: #14324f; color: white; font-weight: 700; font-size: 1rem; cursor: pointer;
-}
-.login-options button:hover, .login-options button:focus-visible { background: #1f5c8f; }
-.login-options p { margin: 0 0 8px; color: #607084; font-size: 0.9rem; }
+.integration-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 28px; }.integration-cards article { min-height: 170px; display: grid; grid-template-columns: auto 1fr; gap: 12px; padding: 18px; background: white; border: 1px solid var(--line); border-radius: var(--radius); }.integration-cards .badge { grid-column: 1 / -1; width: max-content; align-self: end; }.integration-cards h2 { margin: 3px 0 7px; font-size: .95rem; }.integration-cards p { margin: 0; color: var(--muted); font-size: .7rem; line-height: 1.48; }.integration-kicker { color: var(--muted); font-size: .56rem; font-weight: 700; text-transform: uppercase; letter-spacing: .09em; }
 
-.return-form, .return-result { margin-top: 24px; max-width: 520px; }
-.return-form label {
-  display: flex; flex-direction: column; gap: 4px;
-  font-weight: 600; color: #375065; font-size: 0.9rem; margin-bottom: 14px;
-}
-.return-form input[type="number"], .return-form textarea {
-  padding: 8px 10px; border: 1px solid #cfd8e2; border-radius: 8px; font-size: 0.95rem; font-family: inherit;
-}
-.return-form .checkbox-label { flex-direction: row; align-items: center; gap: 8px; }
-.return-form button {
-  padding: 12px 20px; border-radius: 10px; border: none;
-  background: #14324f; color: white; font-weight: 700; cursor: pointer;
-}
-.return-form button:disabled { opacity: 0.6; cursor: not-allowed; }
-.return-result .error { margin-top: 12px; }
+.knowledge-status { min-height: 58px; display: flex; align-items: center; gap: 11px; margin-bottom: 14px; padding: 10px 16px; background: white; border: 1px solid var(--line); border-radius: var(--radius); }.knowledge-status div { flex: 1; display: grid; gap: 3px; }.knowledge-status strong { font-size: .74rem; }.knowledge-status span:not(.health-orb), .knowledge-status small { color: var(--muted); font-size: .65rem; }.health-orb { width: 9px; height: 9px; border-radius: 50%; }.health-orb.is-healthy { background: var(--success); box-shadow: 0 0 0 4px var(--success-pale); }.health-orb.is-down { background: var(--critical); box-shadow: 0 0 0 4px var(--critical-pale); }
+.knowledge-form { margin-bottom: 18px; }.ask-heading { display: flex; gap: 11px; align-items: center; margin-bottom: 15px; }.ask-heading > span { width: 36px; height: 36px; display: grid; place-items: center; color: var(--teal-dark); background: var(--teal-pale); border-radius: var(--radius); }.ask-heading svg { width: 18px; }.ask-heading h2 { margin: 0; font-size: .95rem; }.ask-heading p { margin: 3px 0 0; color: var(--muted); font-size: .65rem; }
+.knowledge-input-row { display: flex; gap: 8px; }.knowledge-input-row input { min-width: 0; flex: 1; }.knowledge-empty { min-height: 290px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 30px; color: var(--muted); background: white; border: 1px dashed var(--line-strong); border-radius: var(--radius); }.knowledge-empty > span { width: 50px; height: 50px; display: grid; place-items: center; color: var(--teal-dark); background: var(--teal-pale); border-radius: 50%; }.knowledge-empty svg { width: 22px; }.knowledge-empty h2 { margin: 15px 0 7px; color: var(--ink); font-size: 1rem; }.knowledge-empty p { max-width: 540px; margin: 0; font-size: .75rem; line-height: 1.5; }
+.retrieval-flow { display: flex; align-items: center; gap: 8px; margin-top: 24px; }.retrieval-flow span { padding: 6px 9px; color: var(--ink-soft); background: var(--surface-subtle); border: 1px solid var(--line); font-size: .61rem; font-weight: 700; }.retrieval-flow i { width: 24px; border-top: 1px dashed var(--teal); }
+.exchange-list, .source-cards { list-style: none; margin: 0; padding: 0; }.exchange-list { display: grid; gap: 14px; }.exchange-question { display: grid; gap: 5px; margin: 0 0 10px; font-size: .85rem; }.exchange-question strong { color: var(--muted); font-size: .6rem; text-transform: uppercase; letter-spacing: .08em; }.evidence-state { width: max-content; padding: 4px 8px; border-radius: 999px; font-size: .62rem; font-weight: 700; }.evidence-grounded { color: var(--success); background: var(--success-pale); }.evidence-insufficient { color: var(--warning); background: var(--warning-pale); }.evidence-unavailable { color: var(--critical); background: var(--critical-pale); }
+.source-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 9px; margin-top: 13px; }.source-card { padding: 13px; background: var(--surface-subtle); border: 1px solid var(--line); }.source-title { margin: 0; font-size: .73rem; font-weight: 700; }.source-version { color: var(--muted); font-size: .62rem; }.source-section { margin: 5px 0; color: var(--teal-dark); font-size: .65rem; font-weight: 700; }.source-excerpt { margin: 0; color: var(--muted); font-size: .68rem; line-height: 1.45; }
 
-.duplicate-compare fieldset {
-  border: 1px solid #dce3eb; border-radius: 10px; padding: 12px 16px; margin: 12px 0;
-}
-.duplicate-compare legend { font-weight: 700; color: #375065; padding: 0 6px; }
-.duplicate-compare fieldset label { margin-right: 20px; }
-.compare-table th, .compare-table td { vertical-align: top; }
-.compare-table label { display: inline-flex; align-items: center; gap: 6px; font-weight: 400; }
-.duplicate-compare > button {
-  padding: 12px 20px; border-radius: 10px; border: none;
-  background: #14324f; color: white; font-weight: 700; cursor: pointer; margin-top: 12px;
-}
-.confirm-bar {
-  margin-top: 12px; padding: 14px; border-radius: 10px;
-  background: #fdf1de; border: 1px solid #f0d29e;
-}
-.confirm-bar p { margin: 0 0 10px; font-weight: 600; color: #8a5a10; }
-.confirm-bar button {
-  padding: 10px 16px; border-radius: 8px; border: none; font-weight: 700; cursor: pointer; margin-right: 8px;
-}
-.confirm-bar button:first-of-type { background: #9a2530; color: white; }
-.confirm-bar button:last-of-type { background: white; border: 1px solid #cfd8e2; }
+.state-panel { min-height: 180px; display: flex; align-items: center; justify-content: center; gap: 12px; padding: 28px; color: var(--muted); background: white; border: 1px solid var(--line); border-radius: var(--radius); text-align: left; }.state-panel svg { width: 24px; color: var(--critical); }.state-panel strong { color: var(--ink); font-size: .82rem; }.state-panel p { margin: 4px 0 0; font-size: .73rem; }.spinner { width: 22px; height: 22px; border: 2px solid var(--line); border-top-color: var(--teal); border-radius: 50%; animation: spin .7s linear infinite; }@keyframes spin { to { transform: rotate(360deg); } }.state-empty svg { color: var(--teal-dark); }
+.error { color: #9f2929; font-size: .74rem; font-weight: 600; }
 
-.evidence-block {
-  background: #f6f8fb; border: 1px solid #dce3eb; border-radius: 10px;
-  padding: 12px; overflow-x: auto; font-size: 0.85rem;
-}
-.resolution-actions { display: flex; gap: 10px; margin-top: 12px; }
-.resolution-actions button {
-  padding: 10px 18px; border-radius: 8px; border: 1px solid #cfd8e2;
-  background: white; font-weight: 700; cursor: pointer;
+.login-shell { min-height: 100vh; display: grid; grid-template-columns: minmax(420px, 1.05fr) minmax(430px, .95fr); background: white; }
+.login-story { position: relative; min-height: 100vh; display: flex; flex-direction: column; padding: 34px 7vw 30px; overflow: hidden; color: white; background: var(--petrol); }
+.login-brand { height: auto; padding: 0; border: 0; }.login-brand .brand-mark { width: 36px; height: 36px; }.login-brand strong { font-size: 1.05rem; }.login-message { position: relative; z-index: 2; max-width: 620px; margin: auto 0 22px; }.login-message .eyebrow { color: #5eead4; }.login-message h1 { margin: 0; color: white; font-size: clamp(2.8rem, 5.5vw, 5.4rem); line-height: .98; letter-spacing: -.06em; }.login-message > p:last-child { max-width: 520px; margin: 23px 0 0; color: #a9b7c8; font-size: .98rem; line-height: 1.65; }
+.control-illustration { position: absolute; width: min(35vw, 500px); aspect-ratio: 1; right: -80px; top: 7vh; opacity: .88; }.illustration-orbit { position: absolute; inset: 10%; border: 1px solid #29435a; border-radius: 50%; }.orbit-two { inset: 28%; border-style: dashed; transform: rotate(35deg); }.illustration-orbit::before, .illustration-orbit::after { content: ""; position: absolute; background: #2dd4bf; border-radius: 50%; }.illustration-orbit::before { width: 7px; height: 7px; top: 13%; left: 16%; }.illustration-orbit::after { width: 5px; height: 5px; right: 2%; bottom: 33%; }.illustration-core { position: absolute; inset: 40%; display: grid; place-items: center; color: white; background: #172a3e; border: 1px solid #2c465e; border-radius: 50%; }.illustration-core svg { width: 45px; }.illustration-node { position: absolute; width: 42px; height: 42px; display: grid; place-items: center; color: #5eead4; background: #152b3f; border: 1px solid #2c465e; border-radius: 50%; }.illustration-node svg { width: 18px; }.node-one { top: 13%; left: 20%; }.node-two { right: 5%; bottom: 27%; }.node-three { left: 15%; bottom: 12%; }
+.login-footnote { position: relative; z-index: 2; display: flex; align-items: center; gap: 7px; margin: auto 0 0; color: #7f90a4; font-size: .68rem; }.login-footnote svg { width: 14px; }
+.login-access { display: grid; place-items: center; padding: 46px max(38px, 7vw); background: #f8fafb; }.login-panel { width: min(470px, 100%); }.login-panel h2 { margin: 0; color: var(--ink); font-size: 1.7rem; letter-spacing: -.04em; }.login-intro { margin: 9px 0 26px; color: var(--muted); font-size: .8rem; line-height: 1.55; }.login-options { display: grid; gap: 10px; }.login-options button { min-height: 76px; display: grid; grid-template-columns: 40px 1fr 18px; align-items: center; gap: 12px; padding: 13px; text-align: left; color: var(--ink); background: white; border: 1px solid var(--line-strong); border-radius: var(--radius); box-shadow: 0 7px 20px rgba(15,23,42,.04); cursor: pointer; transition: border .16s ease, transform .16s ease, box-shadow .16s ease; }.login-options button:hover { transform: translateY(-2px); border-color: var(--teal); box-shadow: var(--shadow-float); }.login-options button > svg { width: 17px; color: var(--teal-dark); }.login-options button > span:nth-child(2) { display: grid; gap: 5px; }.login-options strong { font-size: .8rem; }.login-options small { color: var(--muted); font-size: .66rem; }.role-icon { width: 40px; height: 40px; display: grid !important; place-items: center; color: var(--teal-dark); background: var(--teal-pale); border-radius: var(--radius); }.role-icon svg { width: 18px; }.access-note { display: flex; gap: 10px; margin-top: 22px; padding-top: 20px; color: var(--muted); border-top: 1px solid var(--line); }.access-note > svg { width: 18px; color: var(--teal-dark); }.access-note p { display: grid; gap: 3px; margin: 0; }.access-note strong { color: var(--ink-soft); font-size: .69rem; }.access-note span { font-size: .64rem; }
+
+@media (max-width: 1120px) {
+  .app-shell { grid-template-columns: 190px minmax(0, 1fr); }.sidebar { width: 190px; }.brand-lockup { padding-inline: 14px; }.readiness-band { grid-template-columns: 160px 1fr; }.readiness-band .inline-action { display: none; }.operations-grid { grid-template-columns: 1fr 1fr; }.timezone { display: none; }.review-facts { grid-template-columns: repeat(3, 1fr); }
 }
 
-.data-table td button {
-  padding: 6px 14px; border-radius: 8px; border: 1px solid #14324f;
-  background: #14324f; color: white; font-weight: 700; cursor: pointer; font-size: 0.85rem;
+@media (max-width: 960px) {
+  .app-shell { display: block; }.app-workspace { min-height: 100vh; }.sidebar { width: min(286px, 86vw); transform: translateX(-102%); transition: transform .22s ease; box-shadow: var(--shadow-float); }.sidebar.is-open { transform: none; }.nav-scrim { display: block; position: fixed; inset: 0; z-index: 25; width: 100%; height: 100%; padding: 0; background: rgba(5, 12, 22, .48); border: 0; }.mobile-menu { display: grid; }.topbar { padding: 0 20px; }.operator > span:last-child, .global-search kbd { display: none; }.global-search { width: min(460px, 55vw); }.mobile-nav { position: fixed; inset: auto 0 0; z-index: 22; height: 65px; display: grid; grid-template-columns: repeat(6, 1fr); padding-bottom: env(safe-area-inset-bottom); background: rgba(255,255,255,.98); border-top: 1px solid var(--line); }.mobile-nav a, .mobile-nav button { min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; color: var(--muted); background: transparent; border: 0; text-decoration: none; font-size: .55rem; font-weight: 700; cursor: pointer; }.mobile-nav svg { width: 18px; height: 18px; }.mobile-nav a.active { color: var(--teal-dark); }.mobile-nav a.active::before { content: ""; position: absolute; top: 0; width: 28px; height: 2px; background: var(--teal); }.app-footer { padding-bottom: 65px; }.operations-grid, .secondary-grid { grid-template-columns: 1fr; }.integration-cards { grid-template-columns: 1fr; }.login-shell { grid-template-columns: 1fr; }.login-story { min-height: 44vh; padding: 28px 8vw; }.login-message { margin: auto 0; }.login-message h1 { font-size: clamp(2.5rem, 9vw, 4rem); }.login-message > p:last-child { margin-top: 15px; }.control-illustration { width: 55vw; opacity: .45; right: -10vw; top: -5vw; }.login-footnote { margin-top: 20px; }.login-access { min-height: 56vh; padding: 42px 8vw 60px; }
 }
-.data-table td button:disabled { opacity: 0.6; cursor: not-allowed; }
-
-.knowledge-status { color: #607084; font-size: 0.9rem; margin-bottom: 16px; }
-.knowledge-form { margin-bottom: 20px; }
-.knowledge-input-row { display: flex; gap: 10px; flex-wrap: wrap; }
-.knowledge-input-row input {
-  flex: 1; min-width: 240px; padding: 10px 12px; border: 1px solid #cfd8e2;
-  border-radius: 8px; font-size: 0.95rem;
-}
-.knowledge-input-row button {
-  padding: 10px 20px; border-radius: 8px; border: none;
-  background: #14324f; color: white; font-weight: 700; cursor: pointer;
-}
-.knowledge-input-row button:disabled { opacity: 0.6; cursor: not-allowed; }
-
-.exchange-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 16px; }
-.exchange-question { font-size: 1rem; margin: 0 0 6px; }
-.evidence-state { display: inline-block; margin: 0 0 10px; padding: 3px 10px; border-radius: 999px; font-weight: 700; font-size: 0.8rem; }
-.evidence-grounded { background: #e6f5ec; color: #1f6d3d; }
-.evidence-insufficient { background: #fdf1de; color: #8a5a10; }
-.evidence-unavailable { background: #fbe6e6; color: #8f2323; }
-
-.source-cards { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
-.source-card { background: #f6f8fb; border: 1px solid #dce3eb; border-radius: 10px; padding: 12px; }
-.source-title { margin: 0; font-weight: 700; }
-.source-version { color: #607084; font-weight: 400; font-size: 0.85rem; }
-.source-section { margin: 2px 0 6px; color: #375065; font-size: 0.85rem; font-weight: 600; }
-.source-excerpt { margin: 0; font-size: 0.88rem; color: #47566b; }
 
 @media (max-width: 700px) {
-  .app-header { flex-direction: column; align-items: flex-start; }
-  .user-badge { margin-left: 0; }
-  .data-table, .data-table thead, .data-table tbody, .data-table th, .data-table td, .data-table tr {
-    display: block;
-  }
-  .data-table thead { display: none; }
-  .data-table tr { border-bottom: 2px solid #dce3eb; padding: 8px 0; }
-  .data-table td, .data-table th { border: none; padding: 4px 12px; }
+  #main-content { width: min(100% - 28px, 620px); padding: 24px 0 90px; }.topbar { height: 58px; padding: 0 14px; gap: 8px; }.global-search { flex: 1; width: auto; }.topbar-meta { gap: 3px; }.operator { padding-left: 7px; border: 0; }.demo-banner { min-height: 28px; padding-inline: 10px; font-size: .59rem; }.page-header { align-items: flex-start; margin-bottom: 20px; }.page-header h1 { font-size: 1.65rem; }.page-actions { display: none; }.page-description { font-size: .78rem; }.readiness-band { display: block; }.readiness-label { min-height: 62px; border-right: 0; border-bottom: 1px solid var(--line); }.readiness-metrics { grid-template-columns: repeat(5, minmax(66px, 1fr)); overflow-x: auto; }.metric-cell { min-width: 68px; padding: 12px 9px; }.metric-cell dd { font-size: 1.18rem; }.metric-cell dt { font-size: .53rem; }.section-heading { padding: 14px; }.section-heading > a { display: none; }.queue-controls { padding: 9px 14px; }.attention-list li { grid-template-columns: auto minmax(0,1fr) 14px; padding-inline: 14px; }.queue-ref { display: none; }.attention-detail { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }.movement-timeline { padding-inline: 14px; }.integration-list li, .recent-list li { padding-inline: 14px; }.recent-list time { display: none; }
+  .filters { display: grid; grid-template-columns: 1fr 1fr; padding: 12px; }.filters label:first-child { grid-column: 1 / -1; }.filters input[type="text"], .filters select { min-width: 0; width: 100%; }.checkbox-label { align-self: center; }
+  .table-shell { overflow: visible; border: 0; background: transparent; }.table-meta { border: 1px solid var(--line); border-radius: var(--radius); margin-bottom: 9px; }.data-table, .data-table tbody { display: block; }.data-table thead { display: none; }.data-table tr { display: block; margin-bottom: 9px; padding: 7px 0; background: white; border: 1px solid var(--line); border-radius: var(--radius); }.data-table th, .data-table td { min-height: 34px; height: auto; display: grid; grid-template-columns: minmax(90px, .8fr) minmax(0, 1.3fr); align-items: center; gap: 10px; padding: 7px 12px; border: 0; text-align: right; font-size: .71rem; }.data-table th[scope="row"] { text-align: right; }.data-table th::before, .data-table td::before { content: attr(data-label); color: var(--muted); font-size: .57rem; font-weight: 700; text-align: left; text-transform: uppercase; letter-spacing: .06em; }.compare-table th, .compare-table td { text-align: left; }.pagination { justify-content: space-between; padding-inline: 0; border: 0; }
+  .tabs { margin-inline: -2px; }.record-surface { padding: 10px; }.detail-grid { grid-template-columns: 1fr 1fr; }.detail-grid div { min-height: 70px; padding: 11px; }.return-progress { padding-inline: 12px; gap: 6px; }.return-progress b { width: 20px; }.return-progress span { font-size: .58rem; }.return-form > .section-heading { padding: 16px; }.return-capture, .return-review { padding: 16px; }.form-grid, .condition-fieldset, .review-facts { grid-template-columns: 1fr; }.condition-fieldset { display: grid; }.review-facts div { display: flex; justify-content: space-between; align-items: center; }.review-facts dd { margin: 0; }.form-actions { padding: 12px 16px; }.form-actions .button { flex: 1; }.duplicate-compare { padding: 14px; }.duplicate-compare fieldset label { display: flex !important; margin-bottom: 8px; }.integration-cards article { min-height: 140px; }.knowledge-input-row { align-items: stretch; }.knowledge-input-row .button { min-width: 72px; padding-inline: 10px; }.knowledge-empty { min-height: 250px; padding: 22px 16px; }.retrieval-flow { width: 100%; gap: 4px; }.retrieval-flow span { padding: 5px; font-size: .52rem; }.retrieval-flow i { flex: 1; min-width: 5px; }.login-story { min-height: 38vh; }.login-message > p:last-child { font-size: .8rem; }.control-illustration { display: none; }.login-access { min-height: 62vh; padding: 34px 20px 50px; }.login-options button { min-height: 72px; }.app-footer { display: none; }
+}
+
+@media (max-width: 420px) {
+  .global-search input::placeholder { color: transparent; }.global-search { max-width: 118px; }.topbar-meta { margin-left: auto; }.avatar { width: 29px; height: 29px; }.mobile-nav a span, .mobile-nav button span { max-width: 56px; overflow: hidden; text-overflow: ellipsis; }.filters { grid-template-columns: 1fr; }.filters label:first-child { grid-column: auto; }.detail-grid { grid-template-columns: 1fr; }.readiness-metrics { margin-right: -1px; }.badge { font-size: .55rem; }.page-header h1 { font-size: 1.5rem; }.login-message h1 { font-size: 2.6rem; }
 }