diff --git a/AGENTS.md b/AGENTS.md
index c82ffae..d4ed9d3 100644
--- a/AGENTS.md
+++ b/AGENTS.md
@@ -15,7 +15,7 @@ Performance Review Manager — a local, single-user ("solo EM") pnpm monorepo. S
 
 ### Data / running
 - Local data lives in `/workspace/data` (gitignored): SQLite DB, encrypted vault, uploaded files. Delete it to reset to a clean state (stop the API first, since it holds the DB handle).
-- First app load shows "Create & seed demo team" (seeds an 8-person org). After init it shows "Unlock". Default seed password: `workbench`.
+- First app load offers **Empty workspace** or **Demo team** (seeds an 8-person org). After init it shows "Unlock". Default demo password: `workbench`.
 - Locking the workspace ("Lock & encrypt") seals the SQLite DB + files to `.enc` at rest; unlocking decrypts them.
 - `.session` stores the auth token only (not the AES key). After an API process restart you must unlock again even if the UI still has a token.
 
diff --git a/README.md b/README.md
index ec74a41..e156a18 100644
--- a/README.md
+++ b/README.md
@@ -50,7 +50,7 @@ pnpm dev
 | API | http://127.0.0.1:8787 |
 | Seed password | `workbench` |
 
-First load: **Create & seed demo team** (8-person org), then unlock. Between sessions use **Lock & encrypt**.
+First load: choose **Empty workspace** or **Demo team** (8-person org, password default `workbench`), then unlock later sessions with your password. Between sessions use **Lock & encrypt**.
 
 Requires **pnpm 10.33.3** (see [`AGENTS.md`](./AGENTS.md) if Corepack hands you pnpm 11).
 
@@ -85,7 +85,7 @@ Regenerate with `pnpm screenshots` (UI + API running; default password `workbenc
 
 **Intent:** Keep the workspace sealed when you walk away. The unlock gate is the trust boundary for local data.
 
-**How it works:** On first run you create a workspace password and can seed a demo org. Later sessions decrypt the vault with that password. **Lock & encrypt** re-seals SQLite and files so a stolen laptop disk is not a readable review archive.
+**How it works:** On first run you create a workspace password and choose an empty vault or a seeded demo org. Later sessions decrypt the vault with that password. **Lock & encrypt** re-seals SQLite and files so a stolen laptop disk is not a readable review archive.
 
 ![Unlock workbench](./docs/screenshots/01-unlock.png)
 
@@ -199,7 +199,7 @@ Regenerate with `pnpm screenshots` (UI + API running; default password `workbenc
 
 **Intent:** Configure providers, privacy gates, appearance, and vault maintenance in one place.
 
-**How it works:** Set AI provider and models (Anthropic, OpenAI, Cursor gateway, Ollama), toggle egress for private notes / meetings / document extracts, manage Jira and Bitbucket credentials, run encrypted backup / restore, verify the activity log, and switch dark / light theme.
+**How it works:** Set AI provider and models (Anthropic, OpenAI, Cursor gateway, Ollama), toggle egress for private notes / meetings / document extracts, manage Jira and Bitbucket credentials, run encrypted backup / restore, verify the activity log, and choose appearance (system / dark / light plus Teal, Ocean, Forest, or Slate accent).
 
 ![Settings](./docs/screenshots/14-settings.png)
 
diff --git a/apps/ui/index.html b/apps/ui/index.html
index 2e61709..740b6e3 100644
--- a/apps/ui/index.html
+++ b/apps/ui/index.html
@@ -1,26 +1,44 @@
 <!doctype html>
-<html lang="en" data-theme="dark">
+<html lang="en" data-theme="dark" data-color-mode="system" data-accent="teal">
   <head>
     <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />
     <meta name="color-scheme" content="dark light" />
     <title>Performance Review Manager</title>
     <script>
       (function () {
         try {
-          var t = localStorage.getItem("prm_theme");
-          if (t !== "light" && t !== "dark") t = "dark";
-          document.documentElement.setAttribute("data-theme", t);
-          document.documentElement.style.colorScheme = t;
+          var mode = localStorage.getItem("prm_theme");
+          if (mode !== "light" && mode !== "dark" && mode !== "system") mode = "system";
+          var accent = localStorage.getItem("prm_accent");
+          if (accent !== "teal" && accent !== "ocean" && accent !== "forest" && accent !== "slate") {
+            accent = "teal";
+          }
+          var resolved = mode;
+          if (mode === "system") {
+            resolved =
+              window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches
+                ? "dark"
+                : "light";
+          }
+          document.documentElement.setAttribute("data-theme", resolved);
+          document.documentElement.setAttribute("data-color-mode", mode);
+          document.documentElement.setAttribute("data-accent", accent);
+          document.documentElement.style.colorScheme = resolved;
         } catch (e) {
           document.documentElement.setAttribute("data-theme", "dark");
+          document.documentElement.setAttribute("data-color-mode", "system");
+          document.documentElement.setAttribute("data-accent", "teal");
           document.documentElement.style.colorScheme = "dark";
         }
       })();
     </script>
     <link rel="preconnect" href="https://fonts.googleapis.com" />
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
-    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet" />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Source+Sans+3:ital,wght@0,400;0,500;0,600;0,700;1,400&family=IBM+Plex+Mono:wght@400;500&display=swap"
+      rel="stylesheet"
+    />
   </head>
   <body>
     <div id="root"></div>
diff --git a/apps/ui/src/App.tsx b/apps/ui/src/App.tsx
index e84d86a..02bb262 100644
--- a/apps/ui/src/App.tsx
+++ b/apps/ui/src/App.tsx
@@ -1,4 +1,4 @@
-import { NavLink, Navigate, Route, Routes } from "react-router-dom";
+import { NavLink, Navigate, Route, Routes, useLocation } from "react-router-dom";
 import { useEffect, useState } from "react";
 import type { WorkspaceStatus } from "@prm/shared";
 import { api, getToken, setToken, waitForApi } from "./lib/api";
@@ -20,10 +20,60 @@ import { SprintPulsePage } from "./pages/SprintPulsePage";
 import { SearchPage } from "./pages/SearchPage";
 import { BackfillPage } from "./pages/BackfillPage";
 
+const NAV = [
+  {
+    label: "Work",
+    links: [
+      { to: "/", end: true, label: "Home" },
+      { to: "/team", label: "Team" },
+      { to: "/roles", label: "Roles" },
+      { to: "/cycles", label: "Cycles" },
+      { to: "/promotions", label: "Promotions" },
+    ],
+  },
+  {
+    label: "Review",
+    links: [
+      { to: "/consistency", label: "Consistency" },
+      { to: "/team-performance", label: "Team performance" },
+      { to: "/sprint-pulse", label: "Sprint pulse" },
+      { to: "/search", label: "Search" },
+      { to: "/backfill", label: "Backfill" },
+    ],
+  },
+  {
+    label: "Tools",
+    links: [
+      { to: "/chat", label: "AI Chat" },
+      { to: "/settings", label: "Settings" },
+    ],
+  },
+] as const;
+
 export function App() {
   const [status, setStatus] = useState<WorkspaceStatus | null>(null);
   const [error, setError] = useState<string | null>(null);
-  const { theme, toggle } = useTheme();
+  const [navOpen, setNavOpen] = useState(false);
+  const { resolved, toggle } = useTheme();
+  const location = useLocation();
+
+  useEffect(() => {
+    setNavOpen(false);
+  }, [location.pathname]);
+
+  useEffect(() => {
+    if (!navOpen) return;
+    function onKey(e: KeyboardEvent) {
+      if (e.key === "Escape") setNavOpen(false);
+    }
+    const prev = document.body.style.overflow;
+    document.body.style.overflow = "hidden";
+    window.addEventListener("keydown", onKey);
+    return () => {
+      document.body.style.overflow = prev;
+      window.removeEventListener("keydown", onKey);
+    };
+  }, [navOpen]);
 
   async function refresh() {
     try {
@@ -45,10 +95,10 @@ export function App() {
       type="button"
       className="btn ghost theme-toggle"
       onClick={toggle}
-      aria-label={theme === "dark" ? "Switch to light mode" : "Switch to dark mode"}
-      title={theme === "dark" ? "Switch to light mode" : "Switch to dark mode"}
+      aria-label={resolved === "dark" ? "Switch to light mode" : "Switch to dark mode"}
+      title={resolved === "dark" ? "Switch to light mode" : "Switch to dark mode"}
     >
-      {theme === "dark" ? "Light mode" : "Dark mode"}
+      {resolved === "dark" ? "Light mode" : "Dark mode"}
     </button>
   );
 
@@ -57,7 +107,6 @@ export function App() {
     const logPath = typeof window !== "undefined" ? window.__PRM_DESKTOP_LOG__ : undefined;
     const apiBase = typeof window !== "undefined" ? window.__PRM_API_BASE_URL__ : undefined;
     async function retryDesktop() {
-      // Prefer same-origin UI served by the sidecar once it is healthy.
       const base = (apiBase || "http://127.0.0.1:8787").replace(/\/$/, "");
       try {
         const res = await fetch(`${base}/api/health`);
@@ -90,7 +139,7 @@ export function App() {
           )}
           <p className="mono">{error}</p>
           <button className="btn" onClick={desktop ? retryDesktop : refresh}>Retry</button>
-          <div style={{ marginTop: "0.75rem" }}>{themeToggle}</div>
+          <div className="unlock-actions">{themeToggle}</div>
         </div>
       </div>
     );
@@ -110,26 +159,68 @@ export function App() {
   }
 
   return (
-    <div className="app-shell">
-      <aside className="sidebar">
-        <h1 className="brand">PRM</h1>
-        <div className="brand-sub">
-          {status.name} · solo EM workbench
-          {status.encryptedAtRest ? " · vault sealed" : " · vault open"}
+    <div className={`app-shell${navOpen ? " nav-open" : ""}`}>
+      <header className="topbar">
+        <button
+          type="button"
+          className="nav-toggle"
+          aria-label="Open navigation"
+          aria-expanded={navOpen}
+          onClick={() => setNavOpen(true)}
+        >
+          <span className="nav-toggle-bars" aria-hidden />
+        </button>
+        <div className="topbar-brand">PRM</div>
+        <button
+          type="button"
+          className="btn ghost"
+          onClick={toggle}
+          aria-label={resolved === "dark" ? "Switch to light mode" : "Switch to dark mode"}
+        >
+          {resolved === "dark" ? "Light" : "Dark"}
+        </button>
+      </header>
+
+      <div
+        className="nav-backdrop"
+        role="presentation"
+        onClick={() => setNavOpen(false)}
+      />
+
+      <aside className="sidebar" aria-label="Primary">
+        <div className="sidebar-header">
+          <div>
+            <h1 className="brand">PRM</h1>
+            <div className="brand-sub">
+              {status.name} · solo EM workbench
+              {status.encryptedAtRest ? " · vault sealed" : " · vault open"}
+            </div>
+          </div>
+          <button
+            type="button"
+            className="nav-close"
+            aria-label="Close navigation"
+            onClick={() => setNavOpen(false)}
+          >
+            ✕
+          </button>
         </div>
         <nav className="nav">
-          <NavLink to="/" end>Home</NavLink>
-          <NavLink to="/team">Team</NavLink>
-          <NavLink to="/roles">Roles</NavLink>
-          <NavLink to="/cycles">Cycles</NavLink>
-          <NavLink to="/promotions">Promotions</NavLink>
-          <NavLink to="/consistency">Consistency</NavLink>
-          <NavLink to="/search">Search</NavLink>
-          <NavLink to="/team-performance">Team performance</NavLink>
-          <NavLink to="/sprint-pulse">Sprint pulse</NavLink>
-          <NavLink to="/backfill">Backfill</NavLink>
-          <NavLink to="/chat">AI Chat</NavLink>
-          <NavLink to="/settings">Settings</NavLink>
+          {NAV.map((section) => (
+            <div key={section.label}>
+              <div className="nav-section">{section.label}</div>
+              {section.links.map((link) => (
+                <NavLink
+                  key={link.to}
+                  to={link.to}
+                  end={"end" in link ? link.end : undefined}
+                  onClick={() => setNavOpen(false)}
+                >
+                  {link.label}
+                </NavLink>
+              ))}
+            </div>
+          ))}
         </nav>
         <div className="sidebar-actions">
           {themeToggle}
diff --git a/apps/ui/src/hooks/useTheme.ts b/apps/ui/src/hooks/useTheme.ts
index 9736130..dee0f10 100644
--- a/apps/ui/src/hooks/useTheme.ts
+++ b/apps/ui/src/hooks/useTheme.ts
@@ -1,47 +1,96 @@
 import { useEffect, useState } from "react";
 import {
+  ACCENT_EVENT,
+  ACCENT_KEY,
   applyTheme,
-  getStoredTheme,
-  isTheme,
-  setTheme as persistTheme,
+  getStoredAccent,
+  getStoredColorMode,
+  isAccent,
+  isColorMode,
+  resolveTheme,
+  setAccent as persistAccent,
+  setColorMode as persistColorMode,
   THEME_EVENT,
-  type Theme,
+  THEME_KEY,
+  type Accent,
+  type ColorMode,
+  type ResolvedTheme,
 } from "../lib/theme";
 
-/** Theme preference (defaults dark). Persisted in localStorage and synced across mounts. */
+/** Color mode + accent. Persisted in localStorage; system mode follows OS preference. */
 export function useTheme() {
-  const [theme, setThemeState] = useState<Theme>(() => getStoredTheme());
+  const [colorMode, setColorModeState] = useState<ColorMode>(() => getStoredColorMode());
+  const [accent, setAccentState] = useState<Accent>(() => getStoredAccent());
+  const [resolved, setResolved] = useState<ResolvedTheme>(() => resolveTheme(getStoredColorMode()));
 
   useEffect(() => {
-    applyTheme(theme);
-  }, [theme]);
+    applyTheme(colorMode, accent);
+    setResolved(resolveTheme(colorMode));
+  }, [colorMode, accent]);
 
   useEffect(() => {
+    function syncResolved() {
+      setResolved(resolveTheme(getStoredColorMode()));
+      applyTheme(getStoredColorMode(), getStoredAccent());
+    }
     function onThemeChange(event: Event) {
       const next = (event as CustomEvent<unknown>).detail;
-      if (isTheme(next)) setThemeState(next);
+      if (isColorMode(next)) setColorModeState(next);
+    }
+    function onAccentChange(event: Event) {
+      const next = (event as CustomEvent<unknown>).detail;
+      if (isAccent(next)) setAccentState(next);
     }
     function onStorage(event: StorageEvent) {
-      if (event.key !== "prm_theme") return;
-      if (isTheme(event.newValue)) setThemeState(event.newValue);
-      else if (event.newValue == null) setThemeState("dark");
+      if (event.key === THEME_KEY) {
+        if (isColorMode(event.newValue)) setColorModeState(event.newValue);
+        else if (event.newValue == null) setColorModeState("system");
+      }
+      if (event.key === ACCENT_KEY) {
+        if (isAccent(event.newValue)) setAccentState(event.newValue);
+        else if (event.newValue == null) setAccentState("teal");
+      }
     }
+    const mq = window.matchMedia("(prefers-color-scheme: dark)");
+    mq.addEventListener("change", syncResolved);
     window.addEventListener(THEME_EVENT, onThemeChange);
+    window.addEventListener(ACCENT_EVENT, onAccentChange);
     window.addEventListener("storage", onStorage);
     return () => {
+      mq.removeEventListener("change", syncResolved);
       window.removeEventListener(THEME_EVENT, onThemeChange);
+      window.removeEventListener(ACCENT_EVENT, onAccentChange);
       window.removeEventListener("storage", onStorage);
     };
   }, []);
 
-  function setTheme(next: Theme) {
-    persistTheme(next);
-    setThemeState(next);
+  function setColorMode(next: ColorMode) {
+    persistColorMode(next);
+    setColorModeState(next);
+  }
+
+  function setAccent(next: Accent) {
+    persistAccent(next);
+    setAccentState(next);
+  }
+
+  function setTheme(next: ColorMode) {
+    setColorMode(next);
   }
 
   function toggle() {
-    setTheme(theme === "dark" ? "light" : "dark");
+    const next: ColorMode = resolved === "dark" ? "light" : "dark";
+    setColorMode(next);
   }
 
-  return { theme, setTheme, toggle };
+  return {
+    theme: colorMode,
+    colorMode,
+    accent,
+    resolved,
+    setTheme,
+    setColorMode,
+    setAccent,
+    toggle,
+  };
 }
diff --git a/apps/ui/src/lib/theme.ts b/apps/ui/src/lib/theme.ts
index 9e865e4..003cc30 100644
--- a/apps/ui/src/lib/theme.ts
+++ b/apps/ui/src/lib/theme.ts
@@ -1,39 +1,111 @@
-export type Theme = "dark" | "light";
+export type ColorMode = "dark" | "light" | "system";
+export type ResolvedTheme = "dark" | "light";
+export type Accent = "teal" | "ocean" | "forest" | "slate";
+
+/** @deprecated Prefer ColorMode; kept for callers that only mean resolved dark/light. */
+export type Theme = ResolvedTheme;
 
 export const THEME_KEY = "prm_theme";
+export const ACCENT_KEY = "prm_accent";
 export const THEME_EVENT = "prm-theme-change";
-export const DEFAULT_THEME: Theme = "dark";
+export const ACCENT_EVENT = "prm-accent-change";
+
+export const DEFAULT_COLOR_MODE: ColorMode = "system";
+export const DEFAULT_ACCENT: Accent = "teal";
+export const DEFAULT_THEME: ResolvedTheme = "dark";
+
+export const ACCENTS: Array<{ id: Accent; label: string }> = [
+  { id: "teal", label: "Teal" },
+  { id: "ocean", label: "Ocean" },
+  { id: "forest", label: "Forest" },
+  { id: "slate", label: "Slate" },
+];
+
+export function isColorMode(value: unknown): value is ColorMode {
+  return value === "dark" || value === "light" || value === "system";
+}
+
+/** Accept legacy dark|light or new system. */
+export function isTheme(value: unknown): value is ColorMode {
+  return isColorMode(value);
+}
 
-export function isTheme(value: unknown): value is Theme {
-  return value === "dark" || value === "light";
+export function isAccent(value: unknown): value is Accent {
+  return value === "teal" || value === "ocean" || value === "forest" || value === "slate";
 }
 
-export function getStoredTheme(): Theme {
+export function systemPrefersDark(): boolean {
+  if (typeof window === "undefined" || !window.matchMedia) return true;
+  return window.matchMedia("(prefers-color-scheme: dark)").matches;
+}
+
+export function resolveTheme(mode: ColorMode): ResolvedTheme {
+  if (mode === "system") return systemPrefersDark() ? "dark" : "light";
+  return mode;
+}
+
+export function getStoredColorMode(): ColorMode {
   try {
     const raw = localStorage.getItem(THEME_KEY);
-    if (isTheme(raw)) return raw;
+    if (isColorMode(raw)) return raw;
+  } catch {
+    /* ignore */
+  }
+  return DEFAULT_COLOR_MODE;
+}
+
+/** @deprecated use getStoredColorMode */
+export function getStoredTheme(): ColorMode {
+  return getStoredColorMode();
+}
+
+export function getStoredAccent(): Accent {
+  try {
+    const raw = localStorage.getItem(ACCENT_KEY);
+    if (isAccent(raw)) return raw;
+  } catch {
+    /* ignore */
+  }
+  return DEFAULT_ACCENT;
+}
+
+export function applyTheme(mode: ColorMode, accent: Accent = getStoredAccent()) {
+  const resolved = resolveTheme(mode);
+  document.documentElement.setAttribute("data-theme", resolved);
+  document.documentElement.setAttribute("data-color-mode", mode);
+  document.documentElement.setAttribute("data-accent", accent);
+  document.documentElement.style.colorScheme = resolved;
+}
+
+export function setColorMode(mode: ColorMode) {
+  try {
+    localStorage.setItem(THEME_KEY, mode);
   } catch {
     /* ignore */
   }
-  return DEFAULT_THEME;
+  applyTheme(mode);
+  window.dispatchEvent(new CustomEvent(THEME_EVENT, { detail: mode }));
+  return mode;
 }
 
-export function applyTheme(theme: Theme) {
-  document.documentElement.setAttribute("data-theme", theme);
-  document.documentElement.style.colorScheme = theme;
+/** @deprecated use setColorMode */
+export function setTheme(theme: ColorMode) {
+  return setColorMode(theme);
 }
 
-export function setTheme(theme: Theme) {
+export function setAccent(accent: Accent) {
   try {
-    localStorage.setItem(THEME_KEY, theme);
+    localStorage.setItem(ACCENT_KEY, accent);
   } catch {
     /* ignore */
   }
-  applyTheme(theme);
-  window.dispatchEvent(new CustomEvent(THEME_EVENT, { detail: theme }));
-  return theme;
+  applyTheme(getStoredColorMode(), accent);
+  window.dispatchEvent(new CustomEvent(ACCENT_EVENT, { detail: accent }));
+  return accent;
 }
 
-export function toggleTheme(current: Theme): Theme {
-  return setTheme(current === "dark" ? "light" : "dark");
+/** Flip resolved appearance and persist an explicit dark/light preference. */
+export function toggleTheme(currentMode: ColorMode): ColorMode {
+  const next: ResolvedTheme = resolveTheme(currentMode) === "dark" ? "light" : "dark";
+  return setColorMode(next);
 }
diff --git a/apps/ui/src/pages/HomePage.tsx b/apps/ui/src/pages/HomePage.tsx
index 7369648..4bc43a2 100644
--- a/apps/ui/src/pages/HomePage.tsx
+++ b/apps/ui/src/pages/HomePage.tsx
@@ -36,6 +36,7 @@ export function HomePage() {
   const [items, setItems] = useState<CommandItem[]>([]);
   const [cycleId, setCycleId] = useState<string | null>(null);
   const [thinEvidenceCount, setThinEvidenceCount] = useState(0);
+  const [personCount, setPersonCount] = useState(0);
   const [nudges, setNudges] = useState<DeadlineNudge[]>([]);
   const [dueWeek, setDueWeek] = useState<DueThisWeekItem[]>([]);
   const [nudgeDays, setNudgeDays] = useState<number | null>(null);
@@ -50,6 +51,7 @@ export function HomePage() {
     });
     api<WorkspaceStatus>("/api/workspace/status").then((s) => {
       setThinEvidenceCount(s.thinEvidenceCount ?? 0);
+      setPersonCount(s.personCount ?? 0);
     });
     api<{ items: DueThisWeekItem[] }>("/api/due-this-week?days=7")
       .then(async (r) => {
@@ -129,6 +131,16 @@ export function HomePage() {
   }, [items]);
 
   const next = (() => {
+    if (personCount === 0) {
+      return (
+        <NextStep
+          tone="brand"
+          label="Add your team"
+          detail="This workspace has no people yet. Add yourself as EM and your directs on Team, then assign roles and open a cycle."
+          action={<Link className="btn" to="/team">Open team</Link>}
+        />
+      );
+    }
     if (!cycleId) {
       return (
         <NextStep
diff --git a/apps/ui/src/pages/SettingsPage.tsx b/apps/ui/src/pages/SettingsPage.tsx
index 7f50fd0..c271448 100644
--- a/apps/ui/src/pages/SettingsPage.tsx
+++ b/apps/ui/src/pages/SettingsPage.tsx
@@ -2,6 +2,7 @@ import { useEffect, useState } from "react";
 import type { AuditVerifyResult } from "@prm/shared";
 import { api } from "../lib/api";
 import { useTheme } from "../hooks/useTheme";
+import { ACCENTS, type Accent, type ColorMode } from "../lib/theme";
 import { NextStep, PageHeader } from "../components/PageChrome";
 import { IntegrationsPanel } from "../components/IntegrationsPanel";
 
@@ -31,7 +32,7 @@ export function SettingsPage() {
     Array<{ filename: string; byteSize: number; modifiedAt: string }>
   >([]);
   const [backupBusy, setBackupBusy] = useState(false);
-  const { theme, setTheme } = useTheme();
+  const { colorMode, setColorMode, accent, setAccent, resolved } = useTheme();
 
   async function load() {
     try {
@@ -104,20 +105,55 @@ export function SettingsPage() {
         }
       />
 
-      <div className="panel">
-        <h2>Appearance</h2>
-        <p className="muted">Theme preference is stored in this browser and defaults to dark.</p>
+      <div className="panel stack">
+        <div className="panel-title">
+          <h2>Appearance</h2>
+        </div>
+        <p className="muted" style={{ marginTop: 0 }}>
+          Color mode and accent are stored in this browser. System follows your OS preference ({resolved} right now).
+        </p>
         <div className="field">
-          <label htmlFor="theme-select">Color theme</label>
+          <label htmlFor="theme-select">Color mode</label>
           <select
             id="theme-select"
-            value={theme}
-            onChange={(e) => setTheme(e.target.value === "light" ? "light" : "dark")}
+            value={colorMode}
+            onChange={(e) => setColorMode(e.target.value as ColorMode)}
           >
+            <option value="system">System</option>
             <option value="dark">Dark</option>
             <option value="light">Light</option>
           </select>
         </div>
+        <div className="field">
+          <label>Accent</label>
+          <div className="accent-swatches" role="radiogroup" aria-label="Accent color">
+            {ACCENTS.map((item) => (
+              <button
+                key={item.id}
+                type="button"
+                className={`accent-swatch${accent === item.id ? " on" : ""}`}
+                role="radio"
+                aria-checked={accent === item.id}
+                onClick={() => setAccent(item.id as Accent)}
+              >
+                <span
+                  className="accent-dot"
+                  style={{
+                    ["--swatch" as string]:
+                      item.id === "teal"
+                        ? "#14b8a6"
+                        : item.id === "ocean"
+                          ? "#38bdf8"
+                          : item.id === "forest"
+                            ? "#4ade80"
+                            : "#94a3b8",
+                  }}
+                />
+                {item.label}
+              </button>
+            ))}
+          </div>
+        </div>
       </div>
 
       <IntegrationsPanel />
diff --git a/apps/ui/src/pages/TeamPage.tsx b/apps/ui/src/pages/TeamPage.tsx
index 76da4d8..51891a3 100644
--- a/apps/ui/src/pages/TeamPage.tsx
+++ b/apps/ui/src/pages/TeamPage.tsx
@@ -71,6 +71,19 @@ export function TeamPage() {
         secondary={<a className="btn secondary" href="#add-person">Add person</a>}
       />
 
+      {people.length === 0 && (
+        <div className="panel empty-state">
+          <h2>No one on the roster yet</h2>
+          <p>
+            Add yourself first (leave manager blank — you become the EM), then add directs. Or paste a CSV
+            below. Empty workspaces start here before roles and cycles.
+          </p>
+          <div className="cta-primary-row">
+            <a className="btn" href="#add-person">Add first person</a>
+          </div>
+        </div>
+      )}
+
       {unassigned.length > 0 && (
         <NextStep
           tone="warn"
@@ -90,7 +103,15 @@ export function TeamPage() {
       )}
 
       <div className="panel">
-        <p className="muted" style={{ marginTop: 0 }}>EM: {em?.name ?? "—"} · {directs.length} directs</p>
+        <p className="muted" style={{ marginTop: 0 }}>
+          EM: {em?.name ?? "—"} · {directs.length} direct{directs.length === 1 ? "" : "s"}
+          {people.length === 0 ? " · empty workspace" : ""}
+        </p>
+        {people.length === 0 ? (
+          <p className="muted" style={{ marginBottom: 0 }}>
+            Roster is empty. Use Add person below — the first person without a manager is treated as the EM.
+          </p>
+        ) : (
         <table className="table">
           <thead>
             <tr><th>Name</th><th>Title</th><th>Level</th><th>Role</th><th>Next</th><th>Your move</th></tr>
@@ -112,8 +133,18 @@ export function TeamPage() {
                 </td>
               </tr>
             ))}
+            {em && directs.length === 0 && (
+              <tr>
+                <td>{em.name}</td>
+                <td className="muted">{em.title}</td>
+                <td>{em.levelKey}</td>
+                <td colSpan={2} className="muted">EM account</td>
+                <td><Link className="btn" to={`/team/${em.id}`}>Open dossier</Link></td>
+              </tr>
+            )}
           </tbody>
         </table>
+        )}
         {thin.length === 0 && directs.length > 0 && (
           <p className="muted" style={{ marginBottom: 0, marginTop: "0.75rem" }}>All directs have roles. Keep dossiers fresh from each person’s page.</p>
         )}
@@ -121,7 +152,11 @@ export function TeamPage() {
 
       <form className="panel" id="add-person" onSubmit={addPerson}>
         <h2>Add person</h2>
-        <p className="muted">Creates a dossier subject under you. Assign a role next.</p>
+        <p className="muted">
+          {em
+            ? "Creates a dossier subject under you. Assign a role next."
+            : "First person without a manager becomes the EM account. Add directs after that."}
+        </p>
         <div className="grid-2">
           <div className="field"><label>Name</label><input value={name} onChange={(e) => setName(e.target.value)} required /></div>
           <div className="field"><label>Title</label><input value={title} onChange={(e) => setTitle(e.target.value)} /></div>
diff --git a/apps/ui/src/pages/UnlockPage.tsx b/apps/ui/src/pages/UnlockPage.tsx
index dde021f..b1815b3 100644
--- a/apps/ui/src/pages/UnlockPage.tsx
+++ b/apps/ui/src/pages/UnlockPage.tsx
@@ -2,6 +2,8 @@ import { useState } from "react";
 import type { WorkspaceStatus } from "@prm/shared";
 import { api } from "../lib/api";
 
+type SetupMode = "empty" | "demo";
+
 export function UnlockPage({
   status,
   onUnlocked,
@@ -9,20 +11,37 @@ export function UnlockPage({
   status: WorkspaceStatus;
   onUnlocked: (token: string) => Promise<void>;
 }) {
-  const [password, setPassword] = useState("workbench");
-  const [name, setName] = useState("Platform Engineering");
+  const [setupMode, setSetupMode] = useState<SetupMode>("empty");
+  const [password, setPassword] = useState("");
+  const [name, setName] = useState("My team");
   const [busy, setBusy] = useState(false);
   const [error, setError] = useState<string | null>(null);
 
+  function selectMode(mode: SetupMode) {
+    setSetupMode(mode);
+    setError(null);
+    if (mode === "demo" && !password) setPassword("workbench");
+    if (mode === "empty" && password === "workbench") setPassword("");
+  }
+
   async function submit(e: React.FormEvent) {
     e.preventDefault();
     setBusy(true);
     setError(null);
     try {
       if (!status.initialized) {
+        if (password.trim().length < 4) {
+          setError("Choose a password with at least 4 characters.");
+          setBusy(false);
+          return;
+        }
         const res = await api<{ token: string }>("/api/workspace/init", {
           method: "POST",
-          body: JSON.stringify({ name, password, seed: true }),
+          body: JSON.stringify({
+            name: name.trim() || "My team",
+            password,
+            seed: setupMode === "demo",
+          }),
         });
         await onUnlocked(res.token);
       } else {
@@ -39,7 +58,11 @@ export function UnlockPage({
     }
   }
 
-  const primaryLabel = status.initialized ? "Unlock workbench" : "Create & seed demo team";
+  const primaryLabel = status.initialized
+    ? "Unlock workbench"
+    : setupMode === "demo"
+      ? "Create & seed demo team"
+      : "Create empty workspace";
 
   return (
     <div className="unlock-screen">
@@ -48,21 +71,70 @@ export function UnlockPage({
         <p className="page-job" style={{ marginBottom: "1rem" }}>
           {status.initialized
             ? "Enter your password to open the encrypted vault and continue reviews."
-            : "Create a local encrypted vault, seed a demo team, then assign roles and open a cycle."}
-        </p>
-        <p>
-          Solo EM performance review manager. Self/peer input arrives via import bundles — ICs do not log in.
-          {status.encryptedAtRest ? " Vault is currently sealed on disk." : ""}
+            : "Local encrypted vault for solo EM reviews. Self/peer input arrives via import bundles — ICs do not log in."}
         </p>
+
+        {!status.initialized && (
+          <div className="choice-grid" role="radiogroup" aria-label="Workspace setup">
+            <button
+              type="button"
+              className={`choice-card${setupMode === "empty" ? " on" : ""}`}
+              role="radio"
+              aria-checked={setupMode === "empty"}
+              onClick={() => selectMode("empty")}
+            >
+              <strong>Empty workspace</strong>
+              <span>Start clean. Add your people, roles, and cycle when you are ready.</span>
+            </button>
+            <button
+              type="button"
+              className={`choice-card${setupMode === "demo" ? " on" : ""}`}
+              role="radio"
+              aria-checked={setupMode === "demo"}
+              onClick={() => selectMode("demo")}
+            >
+              <strong>Demo team</strong>
+              <span>Seed an 8-person sample org (password default: workbench).</span>
+            </button>
+          </div>
+        )}
+
+        {status.encryptedAtRest ? (
+          <p>Vault is currently sealed on disk.</p>
+        ) : !status.initialized ? (
+          <p className="muted">
+            {setupMode === "demo"
+              ? "Demo data is for exploring the product. You can lock and re-create later by deleting the local data folder."
+              : "No sample people or reviews. You will add the roster from Team."}
+          </p>
+        ) : null}
+
         {!status.initialized && (
           <div className="field">
-            <label>Workspace name</label>
-            <input value={name} onChange={(e) => setName(e.target.value)} />
+            <label htmlFor="ws-name">Workspace name</label>
+            <input
+              id="ws-name"
+              value={name}
+              onChange={(e) => setName(e.target.value)}
+              placeholder="Platform Engineering"
+              autoComplete="organization"
+            />
           </div>
         )}
         <div className="field">
-          <label>Password {status.initialized ? "" : "(default seed: workbench)"}</label>
-          <input type="password" value={password} onChange={(e) => setPassword(e.target.value)} autoFocus />
+          <label htmlFor="ws-password">
+            Password
+            {!status.initialized && setupMode === "demo" ? " (demo default: workbench)" : ""}
+          </label>
+          <input
+            id="ws-password"
+            type="password"
+            value={password}
+            onChange={(e) => setPassword(e.target.value)}
+            autoFocus
+            autoComplete={status.initialized ? "current-password" : "new-password"}
+            placeholder={setupMode === "demo" && !status.initialized ? "workbench" : "Choose a password"}
+          />
         </div>
         {error && <p style={{ color: "var(--danger)" }}>{error}</p>}
         <button className="btn" disabled={busy}>
diff --git a/apps/ui/src/styles.css b/apps/ui/src/styles.css
index 847b0c3..668cd55 100644
--- a/apps/ui/src/styles.css
+++ b/apps/ui/src/styles.css
@@ -1,4 +1,37 @@
-/* Dark is the default theme. Light overrides via [data-theme="light"]. */
+/* Theme tokens — dark default; light via [data-theme="light"]; accents via [data-accent]. */
+:root {
+  /* Spacing scale */
+  --space-1: 0.25rem;
+  --space-2: 0.5rem;
+  --space-3: 0.75rem;
+  --space-4: 1rem;
+  --space-5: 1.25rem;
+  --space-6: 1.5rem;
+  --space-7: 1.75rem;
+  --space-8: 2rem;
+  --space-10: 2.5rem;
+
+  /* Type */
+  --font-sans: "Source Sans 3", system-ui, -apple-system, "Segoe UI", sans-serif;
+  --font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
+  --text-xs: 0.75rem;
+  --text-sm: 0.875rem;
+  --text-md: 0.95rem;
+  --text-base: 1rem;
+  --text-lg: 1.2rem;
+  --text-xl: 1.55rem;
+  --leading: 1.5;
+
+  --radius: 12px;
+  --radius-sm: 8px;
+  --radius-lg: 16px;
+
+  --sidebar-width: 15.5rem;
+  --topbar-height: 3.5rem;
+  --content-max: 72rem;
+  --touch-min: 2.75rem;
+}
+
 :root,
 [data-theme="dark"] {
   --bg: #0f1419;
@@ -10,60 +43,135 @@
   --line-strong: #334155;
   --panel: #161d26;
   --panel-alt: #1c2530;
-  --sidebar-bg: rgba(15, 20, 25, 0.88);
+  --sidebar-bg: rgba(15, 20, 25, 0.92);
   --input-bg: #121820;
   --placeholder: #6b7a8c;
   --step-fade: var(--panel);
-
-  --brand: #14b8a6;
-  --brand-strong: #2dd4bf;
-  --brand-tint: rgba(20, 184, 166, 0.14);
-  --brand-ring: rgba(20, 184, 166, 0.32);
-  --accent: #818cf8;
-
-  --warn: #fbbf24;
-  --warn-tint: rgba(251, 191, 36, 0.14);
-  --warn-border: rgba(251, 191, 36, 0.28);
-  --danger: #f87171;
-  --danger-tint: rgba(248, 113, 113, 0.14);
-  --danger-border: rgba(248, 113, 113, 0.28);
-  --ok: #4ade80;
-  --ok-tint: rgba(74, 222, 128, 0.14);
-  --ok-border: rgba(74, 222, 128, 0.24);
+  --overlay: rgba(2, 6, 12, 0.55);
 
   --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.35), 0 1px 3px rgba(0, 0, 0, 0.25);
   --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.35), 0 2px 6px rgba(0, 0, 0, 0.25);
   --shadow-lg: 0 20px 50px rgba(0, 0, 0, 0.45);
-  --radius: 14px;
-  --radius-sm: 10px;
-
-  --bg-glow-a: rgba(20, 184, 166, 0.08);
-  --bg-glow-b: rgba(45, 212, 191, 0.05);
 
   color-scheme: dark;
 }
 
 [data-theme="light"] {
-  --bg: #f6f8fb;
-  --bg-soft: #eef2f7;
+  --bg: #f4f7fa;
+  --bg-soft: #e8eef4;
   --ink: #0f172a;
   --ink-soft: #334155;
   --muted: #64748b;
-  --line: #e6eaf0;
-  --line-strong: #d5dce6;
+  --line: #dde5ee;
+  --line-strong: #c8d3e0;
   --panel: #ffffff;
-  --panel-alt: #f8fafc;
-  --sidebar-bg: rgba(255, 255, 255, 0.85);
+  --panel-alt: #f7fafc;
+  --sidebar-bg: rgba(255, 255, 255, 0.92);
   --input-bg: #ffffff;
-  --placeholder: #9aa6b2;
+  --placeholder: #94a3b8;
   --step-fade: #ffffff;
+  --overlay: rgba(15, 23, 42, 0.4);
+
+  --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.04), 0 1px 3px rgba(15, 23, 42, 0.06);
+  --shadow-md: 0 4px 12px rgba(15, 23, 42, 0.06), 0 2px 6px rgba(15, 23, 42, 0.05);
+  --shadow-lg: 0 20px 50px rgba(15, 23, 42, 0.12);
+
+  color-scheme: light;
+}
 
+/* Accent palettes (brand + semantic stay accent-aware) */
+:root,
+[data-accent="teal"],
+[data-theme="dark"][data-accent="teal"] {
+  --brand: #14b8a6;
+  --brand-strong: #2dd4bf;
+  --brand-tint: rgba(20, 184, 166, 0.14);
+  --brand-ring: rgba(20, 184, 166, 0.32);
+  --accent: #5eead4;
+  --bg-glow-a: rgba(20, 184, 166, 0.08);
+  --bg-glow-b: rgba(45, 212, 191, 0.05);
+}
+[data-theme="light"][data-accent="teal"] {
   --brand: #0f766e;
   --brand-strong: #0b5c55;
   --brand-tint: #e6f4f1;
   --brand-ring: rgba(15, 118, 110, 0.28);
-  --accent: #6366f1;
+  --accent: #14b8a6;
+  --bg-glow-a: rgba(15, 118, 110, 0.06);
+  --bg-glow-b: rgba(20, 184, 166, 0.05);
+}
+
+[data-theme="dark"][data-accent="ocean"] {
+  --brand: #38bdf8;
+  --brand-strong: #7dd3fc;
+  --brand-tint: rgba(56, 189, 248, 0.14);
+  --brand-ring: rgba(56, 189, 248, 0.32);
+  --accent: #67e8f9;
+  --bg-glow-a: rgba(56, 189, 248, 0.1);
+  --bg-glow-b: rgba(14, 165, 233, 0.06);
+}
+[data-theme="light"][data-accent="ocean"] {
+  --brand: #0369a1;
+  --brand-strong: #075985;
+  --brand-tint: #e0f2fe;
+  --brand-ring: rgba(3, 105, 161, 0.28);
+  --accent: #0284c7;
+  --bg-glow-a: rgba(3, 105, 161, 0.06);
+  --bg-glow-b: rgba(14, 165, 233, 0.05);
+}
 
+[data-theme="dark"][data-accent="forest"] {
+  --brand: #4ade80;
+  --brand-strong: #86efac;
+  --brand-tint: rgba(74, 222, 128, 0.14);
+  --brand-ring: rgba(74, 222, 128, 0.32);
+  --accent: #a3e635;
+  --bg-glow-a: rgba(74, 222, 128, 0.1);
+  --bg-glow-b: rgba(34, 197, 94, 0.05);
+}
+[data-theme="light"][data-accent="forest"] {
+  --brand: #15803d;
+  --brand-strong: #166534;
+  --brand-tint: #dcfce7;
+  --brand-ring: rgba(21, 128, 61, 0.28);
+  --accent: #16a34a;
+  --bg-glow-a: rgba(21, 128, 61, 0.06);
+  --bg-glow-b: rgba(34, 197, 94, 0.05);
+}
+
+[data-theme="dark"][data-accent="slate"] {
+  --brand: #94a3b8;
+  --brand-strong: #cbd5e1;
+  --brand-tint: rgba(148, 163, 184, 0.16);
+  --brand-ring: rgba(148, 163, 184, 0.35);
+  --accent: #e2e8f0;
+  --bg-glow-a: rgba(148, 163, 184, 0.08);
+  --bg-glow-b: rgba(100, 116, 139, 0.05);
+}
+[data-theme="light"][data-accent="slate"] {
+  --brand: #475569;
+  --brand-strong: #334155;
+  --brand-tint: #f1f5f9;
+  --brand-ring: rgba(71, 85, 105, 0.28);
+  --accent: #64748b;
+  --bg-glow-a: rgba(71, 85, 105, 0.05);
+  --bg-glow-b: rgba(100, 116, 139, 0.04);
+}
+
+/* Semantic colors (theme-aware, accent-independent) */
+:root,
+[data-theme="dark"] {
+  --warn: #fbbf24;
+  --warn-tint: rgba(251, 191, 36, 0.14);
+  --warn-border: rgba(251, 191, 36, 0.28);
+  --danger: #f87171;
+  --danger-tint: rgba(248, 113, 113, 0.14);
+  --danger-border: rgba(248, 113, 113, 0.28);
+  --ok: #4ade80;
+  --ok-tint: rgba(74, 222, 128, 0.14);
+  --ok-border: rgba(74, 222, 128, 0.24);
+}
+[data-theme="light"] {
   --warn: #b45309;
   --warn-tint: #fef3c7;
   --warn-border: rgba(180, 83, 9, 0.28);
@@ -73,19 +181,11 @@
   --ok: #15803d;
   --ok-tint: #dcfce7;
   --ok-border: rgba(21, 128, 61, 0.22);
-
-  --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.04), 0 1px 3px rgba(15, 23, 42, 0.06);
-  --shadow-md: 0 4px 12px rgba(15, 23, 42, 0.06), 0 2px 6px rgba(15, 23, 42, 0.05);
-  --shadow-lg: 0 20px 50px rgba(15, 23, 42, 0.12);
-
-  --bg-glow-a: rgba(15, 118, 110, 0.06);
-  --bg-glow-b: rgba(99, 102, 241, 0.06);
-
-  color-scheme: light;
 }
 
 html {
-  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
+  font-family: var(--font-sans);
+  font-size: 16px;
   color: var(--ink);
   background:
     radial-gradient(900px 500px at 100% -20%, var(--bg-glow-b), transparent 60%),
@@ -98,16 +198,76 @@ html {
 
 * { box-sizing: border-box; }
 html, body, #root { min-height: 100%; margin: 0; }
-body { font-size: 15px; line-height: 1.5; background: transparent; }
+body { font-size: var(--text-md); line-height: var(--leading); background: transparent; }
 button, input, select, textarea { font: inherit; color: inherit; }
-a { color: var(--brand); text-decoration: none; font-weight: 500; }
+a { color: var(--brand); text-decoration: none; font-weight: 600; }
 a:hover { color: var(--brand-strong); }
 
+@media (prefers-reduced-motion: reduce) {
+  *, *::before, *::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+  }
+}
+
 /* ---------- App shell ---------- */
 .app-shell {
   display: grid;
-  grid-template-columns: 248px 1fr;
+  grid-template-columns: var(--sidebar-width) 1fr;
   min-height: 100vh;
+  min-height: 100dvh;
+}
+
+.topbar {
+  display: none;
+  position: sticky;
+  top: 0;
+  z-index: 30;
+  height: var(--topbar-height);
+  padding: 0 var(--space-4);
+  padding-left: max(var(--space-4), env(safe-area-inset-left));
+  padding-right: max(var(--space-4), env(safe-area-inset-right));
+  align-items: center;
+  gap: var(--space-3);
+  border-bottom: 1px solid var(--line);
+  background: var(--sidebar-bg);
+  backdrop-filter: blur(12px);
+}
+
+.topbar-brand {
+  font-weight: 700;
+  letter-spacing: -0.02em;
+  color: var(--ink);
+  flex: 1;
+}
+
+.nav-toggle,
+.nav-close {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: var(--touch-min);
+  min-height: var(--touch-min);
+  padding: var(--space-2);
+  border-radius: var(--radius-sm);
+  border: 1px solid var(--line-strong);
+  background: var(--panel);
+  color: var(--ink);
+  cursor: pointer;
+}
+.nav-toggle:hover,
+.nav-close:hover { background: var(--bg-soft); }
+.nav-toggle-bars {
+  display: block;
+  width: 1.1rem;
+  height: 2px;
+  background: currentColor;
+  box-shadow: 0 -5px 0 currentColor, 0 5px 0 currentColor;
+}
+
+.nav-backdrop {
+  display: none;
 }
 
 .sidebar {
@@ -115,51 +275,79 @@ a:hover { color: var(--brand-strong); }
   top: 0;
   align-self: start;
   height: 100vh;
-  padding: 1.5rem 1rem;
+  height: 100dvh;
+  padding: var(--space-6) var(--space-4);
+  padding-bottom: max(var(--space-6), env(safe-area-inset-bottom));
   border-right: 1px solid var(--line);
   background: var(--sidebar-bg);
-  backdrop-filter: blur(10px);
+  backdrop-filter: blur(12px);
   display: flex;
   flex-direction: column;
+  overflow-y: auto;
+  z-index: 40;
+}
+
+.sidebar-header {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: var(--space-3);
 }
 
 .brand {
-  font-size: 1.15rem;
+  font-size: var(--text-lg);
   font-weight: 700;
   letter-spacing: -0.02em;
   line-height: 1.2;
-  margin: 0 0 0.2rem;
+  margin: 0 0 var(--space-1);
   color: var(--ink);
   display: flex;
   align-items: center;
-  gap: 0.5rem;
+  gap: var(--space-2);
 }
 .brand::before {
   content: "";
-  width: 26px;
-  height: 26px;
-  border-radius: 8px;
-  background: linear-gradient(135deg, var(--brand), #14b8a6);
-  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.25), var(--shadow-sm);
+  width: 1.6rem;
+  height: 1.6rem;
+  border-radius: 7px;
+  background: linear-gradient(135deg, var(--brand), var(--brand-strong));
+  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.2), var(--shadow-sm);
+  flex-shrink: 0;
 }
 
 .brand-sub {
   color: var(--muted);
-  font-size: 0.78rem;
-  line-height: 1.4;
-  margin-bottom: 1.75rem;
-  padding-left: 0.15rem;
+  font-size: var(--text-xs);
+  line-height: 1.45;
+  margin-bottom: var(--space-6);
+  padding-left: 0.1rem;
 }
 
-.nav { display: flex; flex-direction: column; gap: 0.15rem; }
+.nav {
+  display: flex;
+  flex-direction: column;
+  gap: 0.2rem;
+}
+.nav-section {
+  margin-top: var(--space-4);
+  margin-bottom: var(--space-1);
+  padding: 0 var(--space-3);
+  font-size: 0.68rem;
+  font-weight: 700;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  color: var(--muted);
+}
+.nav-section:first-child { margin-top: 0; }
 .nav a {
   display: flex;
   align-items: center;
-  padding: 0.55rem 0.75rem;
+  min-height: 2.4rem;
+  padding: 0.5rem 0.75rem;
   border-radius: var(--radius-sm);
   color: var(--muted);
   font-weight: 500;
-  font-size: 0.92rem;
+  font-size: var(--text-sm);
   transition: background 0.15s ease, color 0.15s ease;
 }
 .nav a:hover { background: var(--bg-soft); color: var(--ink); }
@@ -171,9 +359,10 @@ a:hover { color: var(--brand-strong); }
 
 .sidebar-actions {
   margin-top: auto;
+  padding-top: var(--space-5);
   display: flex;
   flex-direction: column;
-  gap: 0.5rem;
+  gap: var(--space-2);
 }
 
 .theme-toggle {
@@ -182,9 +371,11 @@ a:hover { color: var(--brand-strong); }
 }
 
 .main {
-  padding: 2rem 2.25rem 4rem;
-  max-width: 1200px;
+  padding: var(--space-8) var(--space-8) var(--space-10);
+  padding-bottom: max(var(--space-10), env(safe-area-inset-bottom));
+  max-width: var(--content-max);
   width: 100%;
+  min-width: 0;
 }
 
 /* ---------- Surfaces ---------- */
@@ -193,7 +384,7 @@ a:hover { color: var(--brand-strong); }
   border: 1px solid var(--line);
   border-radius: var(--radius);
   box-shadow: var(--shadow-sm);
-  padding: 1.25rem 1.35rem;
+  padding: var(--space-5) var(--space-5);
 }
 
 .grid-2 {
@@ -335,12 +526,12 @@ strong { color: var(--ink-soft); font-weight: 600; }
 }
 
 /* ---------- Layout helpers ---------- */
-.stack { display: flex; flex-direction: column; gap: 1rem; }
-.row { display: flex; gap: 0.65rem; flex-wrap: wrap; align-items: center; }
+.stack { display: flex; flex-direction: column; gap: var(--space-4); }
+.row { display: flex; gap: var(--space-3); flex-wrap: wrap; align-items: center; }
 .row select, .row input { width: auto; }
 .muted { color: var(--muted); }
 .mono {
-  font-family: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
+  font-family: var(--font-mono);
   font-size: 0.8rem;
 }
 
@@ -381,7 +572,7 @@ strong { color: var(--ink-soft); font-weight: 600; }
   box-shadow: var(--shadow-sm);
 }
 .next-step-brand {
-  border-color: rgba(15, 118, 110, 0.28);
+  border-color: var(--brand-ring);
   background: linear-gradient(135deg, var(--brand-tint), var(--step-fade) 70%);
 }
 .next-step-warn {
@@ -440,13 +631,19 @@ li { margin-bottom: 0.4rem; line-height: 1.55; color: var(--ink-soft); }
   padding: 2rem;
 }
 .unlock-card {
-  width: min(440px, 100%);
+  width: min(28rem, 100%);
   box-shadow: var(--shadow-lg);
-  border-radius: var(--radius);
-  padding: 2rem 1.9rem;
+  border-radius: var(--radius-lg);
+  padding: var(--space-8) var(--space-6);
+}
+.unlock-card h1 { font-size: var(--text-xl); margin-bottom: var(--space-3); }
+.unlock-card .btn { width: 100%; margin-top: var(--space-2); padding: 0.75rem; min-height: var(--touch-min); }
+.unlock-actions {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-2);
+  margin-top: var(--space-2);
 }
-.unlock-card h1 { font-size: 1.5rem; margin-bottom: 0.75rem; }
-.unlock-card .btn { width: 100%; margin-top: 0.25rem; padding: 0.7rem; }
 
 .theme-float {
   position: fixed;
@@ -489,7 +686,7 @@ li { margin-bottom: 0.4rem; line-height: 1.55; color: var(--ink-soft); }
 }
 .chat-empty { max-width: 36rem; margin: 0.5rem auto 1rem; text-align: left; }
 .chat-empty-title {
-  font-weight: 650;
+  font-weight: 600;
   letter-spacing: -0.01em;
   margin: 0 0 0.35rem;
   color: var(--ink);
@@ -526,7 +723,7 @@ li { margin-bottom: 0.4rem; line-height: 1.55; color: var(--ink-soft); }
 .chat-bubble-user {
   align-self: flex-end;
   background: var(--brand-tint);
-  border-color: rgba(15, 118, 110, 0.22);
+  border-color: var(--brand-ring);
 }
 .chat-bubble-assistant {
   align-self: flex-start;
@@ -540,7 +737,7 @@ li { margin-bottom: 0.4rem; line-height: 1.55; color: var(--ink-soft); }
 .chat-bubble-pending { opacity: 0.75; }
 .chat-bubble-meta {
   font-size: 0.75rem;
-  font-weight: 650;
+  font-weight: 600;
   color: var(--muted);
   margin-bottom: 0.3rem;
   text-transform: uppercase;
@@ -603,7 +800,7 @@ li { margin-bottom: 0.4rem; line-height: 1.55; color: var(--ink-soft); }
   font-size: 0.88rem;
   line-height: 1.55;
   color: var(--ink-soft);
-  font-family: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
+  font-family: var(--font-mono);
 }
 pre { margin: 0; white-space: pre-wrap; word-break: break-word; }
 
@@ -647,7 +844,7 @@ pre { margin: 0; white-space: pre-wrap; word-break: break-word; }
   gap: 0.55rem;
   align-items: center;
 }
-.consistency-bar-label { font-weight: 650; color: var(--muted); font-size: 0.85rem; }
+.consistency-bar-label { font-weight: 600; color: var(--muted); font-size: 0.85rem; }
 .consistency-bar-track {
   height: 10px;
   border-radius: 999px;
@@ -669,7 +866,7 @@ pre { margin: 0; white-space: pre-wrap; word-break: break-word; }
 .consistency-card { display: flex; flex-direction: column; gap: 0.65rem; }
 .consistency-overall {
   font-size: 1.6rem;
-  font-weight: 750;
+  font-weight: 700;
   letter-spacing: -0.03em;
   color: var(--brand-strong);
 }
@@ -722,12 +919,12 @@ pre { margin: 0; white-space: pre-wrap; word-break: break-word; }
 }
 .tp-hist-bar { fill: var(--brand); opacity: 0.9; }
 .tp-hist-label { fill: var(--muted); font-size: 11px; }
-.tp-hist-count { fill: var(--ink-soft); font-size: 11px; font-weight: 650; }
+.tp-hist-count { fill: var(--ink-soft); font-size: 11px; font-weight: 600; }
 .tp-axis { stroke: var(--line); stroke-width: 1; }
 .tp-dot { fill: var(--brand-strong); opacity: 0.85; }
 .tp-dot.thin { fill: var(--warn); }
-.tp-up { color: var(--ok); font-weight: 650; }
-.tp-down { color: var(--danger); font-weight: 650; }
+.tp-up { color: var(--ok); font-weight: 600; }
+.tp-down { color: var(--danger); font-weight: 600; }
 .tp-spark {
   display: inline-flex;
   align-items: flex-end;
@@ -815,17 +1012,150 @@ pre { margin: 0; white-space: pre-wrap; word-break: break-word; }
   background: var(--brand-tint);
 }
 
+/* ---------- Choice cards (unlock setup) ---------- */
+.choice-grid {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: var(--space-3);
+  margin-bottom: var(--space-5);
+}
+.choice-card {
+  text-align: left;
+  border: 1px solid var(--line-strong);
+  background: var(--panel-alt);
+  border-radius: var(--radius);
+  padding: var(--space-4);
+  cursor: pointer;
+  color: var(--ink-soft);
+  transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
+}
+.choice-card:hover { border-color: var(--brand); background: var(--brand-tint); }
+.choice-card.on {
+  border-color: var(--brand);
+  background: var(--brand-tint);
+  box-shadow: 0 0 0 2px var(--brand-ring);
+  color: var(--ink);
+}
+.choice-card strong {
+  display: block;
+  color: var(--ink);
+  margin-bottom: var(--space-1);
+  font-size: var(--text-sm);
+}
+.choice-card span {
+  display: block;
+  font-size: var(--text-xs);
+  color: var(--muted);
+  line-height: 1.45;
+}
+
+.accent-swatches {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--space-2);
+}
+.accent-swatch {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-2);
+  min-height: var(--touch-min);
+  padding: 0.4rem 0.75rem;
+  border-radius: 999px;
+  border: 1px solid var(--line-strong);
+  background: var(--panel);
+  color: var(--ink-soft);
+  cursor: pointer;
+  font-size: var(--text-sm);
+  font-weight: 600;
+}
+.accent-swatch.on {
+  border-color: var(--brand);
+  background: var(--brand-tint);
+  color: var(--brand-strong);
+}
+.accent-dot {
+  width: 0.7rem;
+  height: 0.7rem;
+  border-radius: 999px;
+  background: var(--swatch, var(--brand));
+  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.25);
+}
+
+.panel-title {
+  display: flex;
+  align-items: baseline;
+  justify-content: space-between;
+  gap: var(--space-3);
+  flex-wrap: wrap;
+  margin-bottom: var(--space-3);
+}
+.panel-title h2,
+.panel-title h3 {
+  margin: 0;
+}
+.panel > h2:first-child,
+.panel > .panel-title:first-child {
+  margin-top: 0;
+}
+
+.empty-state {
+  text-align: left;
+  padding: var(--space-6) var(--space-5);
+}
+.empty-state h2 { margin-bottom: var(--space-2); }
+.empty-state p { max-width: 42ch; }
+
 /* ---------- Responsive ---------- */
+@media (max-width: 900px) {
+  .tp-grid { grid-template-columns: 1fr; }
+  .tp-span-2 { grid-column: auto; }
+  .choice-grid { grid-template-columns: 1fr; }
+}
+
 @media (max-width: 960px) {
-  .app-shell { grid-template-columns: 1fr; }
+  .app-shell {
+    grid-template-columns: 1fr;
+    grid-template-rows: var(--topbar-height) 1fr;
+  }
+  .topbar { display: flex; grid-column: 1; grid-row: 1; }
+  .nav-backdrop {
+    display: block;
+    position: fixed;
+    inset: 0;
+    z-index: 35;
+    background: var(--overlay);
+    opacity: 0;
+    pointer-events: none;
+    transition: opacity 0.2s ease;
+  }
+  .app-shell.nav-open .nav-backdrop {
+    opacity: 1;
+    pointer-events: auto;
+  }
   .sidebar {
-    position: static;
-    height: auto;
-    border-right: none;
-    border-bottom: 1px solid var(--line);
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: min(20rem, 88vw);
+    height: 100vh;
+    height: 100dvh;
+    border-right: 1px solid var(--line);
+    border-bottom: none;
+    transform: translateX(-105%);
+    transition: transform 0.22s ease;
+    box-shadow: var(--shadow-lg);
+  }
+  .app-shell.nav-open .sidebar { transform: translateX(0); }
+  .sidebar .nav-close { display: inline-flex; }
+  .sidebar-actions { margin-top: auto; }
+  .main {
+    grid-column: 1;
+    grid-row: 2;
+    padding: var(--space-5) var(--space-4) var(--space-8);
   }
-  .sidebar-actions { margin-top: 1rem; }
-  .main { padding: 1.5rem 1.25rem 3rem; }
+  .page-header { gap: var(--space-3); }
+  .page-header-actions { width: 100%; }
+  .page-header-actions .btn { flex: 1 1 auto; justify-content: center; }
   .grid-2, .writing { grid-template-columns: 1fr; }
   .chat-page {
     height: auto;
@@ -834,4 +1164,22 @@ pre { margin: 0; white-space: pre-wrap; word-break: break-word; }
   }
   .chat-shell { min-height: 50vh; }
   .chat-composer { flex-direction: column; align-items: stretch; }
+  .theme-float {
+    right: max(var(--space-4), env(safe-area-inset-right));
+    bottom: max(var(--space-4), env(safe-area-inset-bottom));
+  }
+}
+
+@media (min-width: 961px) {
+  .sidebar .nav-close { display: none; }
+}
+
+@media (max-width: 640px) {
+  .main { padding: var(--space-4) var(--space-3) var(--space-8); }
+  .panel { padding: var(--space-4); }
+  .unlock-card { padding: var(--space-6) var(--space-4); }
+  .btn { min-height: var(--touch-min); }
+  .table th, .table td { padding: 0.6rem 0.45rem; font-size: 0.86rem; }
+  h1 { font-size: 1.4rem; }
+  .next-step { padding: var(--space-4); }
 }