From 05e75a6b9d604cf2916a2aec85214f8ff56b82d1 Mon Sep 17 00:00:00 2001
From: Snow Lee <snow@runbear.io>
Date: Thu, 9 Jul 2026 13:40:22 -0700
Subject: [PATCH] redesign(web): Linear-grade viewer/admin + file-tree UX
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Rework the bdrive web UI away from the violet Obsidian-ish theme to a
near-black, honey-accented, hairline-crafted look in the spirit of Linear:

- Replace the mixed emoji glyphs (chevrons, clocks, palette icons, admin
  badge, history markers, share dialog) with one coherent SVG line-icon
  sprite + a svgIcon() helper; colored letter-marks for projects.
- Repoint the design tokens and rewrite style.css: near-black grounds,
  7% hairline borders, tightened type, honey spent only on active state,
  the ⌘K selection, and brand marks.
- Restyle the server-rendered auth pages and the public /s/ share shell
  to the same tokens so sign-in and the app read as one product.

File-tree behavior:
- Folders start collapsed; a lone root folder opens on load.
- Opening a file (search, wikilink, deep link) unfolds the path to it and
  scrolls the row into view. State now tracks open dirs (not collapsed),
  so it survives the periodic tree refresh.
- Plain-text/JSONL views wrap long unbreakable lines instead of
  overflowing the reading column.

Verified in the running example hub across desktop + mobile; go build,
go vet, go test ./... all green; zero horizontal page overflow.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01R7Q9ZKSZRTdvrSJkYLUmYs
---
 internal/webapp/authlocal.go      |  48 ++-
 internal/webapp/shares.go         |  11 +-
 internal/webapp/static/app.js     | 112 +++--
 internal/webapp/static/index.html |  57 ++-
 internal/webapp/static/style.css  | 677 ++++++++++++++----------------
 5 files changed, 476 insertions(+), 429 deletions(-)

diff --git a/internal/webapp/authlocal.go b/internal/webapp/authlocal.go
index b78cfd2..9c83524 100644
--- a/internal/webapp/authlocal.go
+++ b/internal/webapp/authlocal.go
@@ -544,25 +544,31 @@ func authPage(w http.ResponseWriter, title, body string) {
 <meta name="viewport" content="width=device-width, initial-scale=1"><title>%s — BearDrive</title>
 <style>
 /* Shares the app's token values so sign-in and the app read as one product. */
-body{font:15px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;background:#1e1e1e;color:#dadada;
-display:flex;justify-content:center;padding-top:12vh;margin:0}
-.card{background:#262626;border:1px solid #363636;border-radius:12px;padding:28px 32px;width:340px}
-h1{font-size:17px;margin:0 0 16px}
-label{display:block;font-size:12.5px;color:#a6a6a6;margin:12px 0 4px}
-input{width:100%%;box-sizing:border-box;padding:9px 11px;border-radius:6px;border:1px solid #363636;
-background:#1e1e1e;color:#dadada;font:inherit}
-input:focus-visible{outline:2px solid #a882ff;outline-offset:1px;border-color:#a882ff}
-button{margin-top:18px;width:100%%;padding:10px;border:none;border-radius:6px;background:#6a48e0;
-color:#fff;font:inherit;font-weight:600;cursor:pointer}
-button:hover{background:#7c5cd6}
-button:focus-visible{outline:2px solid #c9b3ff;outline-offset:2px}
-.err{color:#ff9b91;font-size:13px;margin:10px 0 0}
-.msg{color:#8ce59a;font-size:13px;margin:10px 0 0}
-.alt{margin-top:16px;font-size:12.5px;color:#969696}
-.alt a{color:#c9b3ff;text-decoration:none}
+body{font:14px/1.5 -apple-system,BlinkMacSystemFont,"SF Pro Text","Inter","Segoe UI",sans-serif;
+background:#0a0b0d;color:#eef0f3;display:flex;justify-content:center;padding-top:13vh;margin:0;
+letter-spacing:-.006em;-webkit-font-smoothing:antialiased}
+.card{background:#0c0e10;border:1px solid rgba(255,255,255,.08);border-radius:14px;padding:28px 30px;width:344px;
+box-shadow:0 24px 70px -24px rgba(0,0,0,.7)}
+.logo{width:34px;height:34px;border-radius:9px;display:grid;place-items:center;font-size:19px;line-height:1;
+background:linear-gradient(160deg,#ffcf85,#f5a623 55%%,#d3861a);
+box-shadow:0 1px 0 rgba(255,255,255,.35) inset,0 3px 10px -2px rgba(245,166,35,.45);margin-bottom:16px}
+h1{font-size:18px;font-weight:640;letter-spacing:-.02em;margin:0 0 18px}
+label{display:block;font-size:12px;color:#9aa0a9;margin:14px 0 5px;font-weight:500}
+input{width:100%%;box-sizing:border-box;height:38px;padding:0 12px;border-radius:8px;
+border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.03);color:#eef0f3;font:inherit;font-size:14px;outline:none}
+input:focus-visible{outline:2px solid #f5a623;outline-offset:1px;border-color:#f5a623}
+button{margin-top:20px;width:100%%;height:40px;border:none;border-radius:8px;background:#f5a623;
+color:#241704;font:inherit;font-size:14px;font-weight:600;cursor:pointer}
+button:hover{background:#ffcf85}
+button:focus-visible{outline:2px solid #ffcf85;outline-offset:2px}
+.err{color:#ff9b91;font-size:13px;margin:12px 0 0}
+.msg{color:#6fd699;font-size:13px;margin:12px 0 0}
+.alt{margin-top:16px;font-size:12.5px;color:#868b93}
+.alt a{color:#ffcf85;text-decoration:none}
 .alt a:hover{text-decoration:underline}
-code{background:#1e1e1e;padding:2px 6px;border-radius:4px}
-</style></head><body><div class="card"><h1>%s</h1>%s</div></body></html>`,
+code{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.08);padding:2px 6px;border-radius:5px;
+font-family:ui-monospace,Menlo,monospace}
+</style></head><body><div class="card"><div class="logo">🐻</div><h1>%s</h1>%s</div></body></html>`,
 		html.EscapeString(title), html.EscapeString(title), body)
 }
 
@@ -598,13 +604,13 @@ func (a *BuiltinAuth) pageLogin(w http.ResponseWriter, r *http.Request) {
 	if a.AllowSignup {
 		note := ""
 		if len(a.AllowedDomains) > 0 {
-			note = ` <span style="color:#969696">(` + html.EscapeString(a.domainList()) + ` only)</span>`
+			note = ` <span style="color:#868b93">(` + html.EscapeString(a.domainList()) + ` only)</span>`
 		}
 		signup = fmt.Sprintf(`<p class="alt">No account? <a href="/auth/signup?next=%s">Sign up</a>%s</p>`, url.QueryEscape(next), note)
 	}
 	brand := ""
 	if a.Brand != "" {
-		brand = `<p class="alt" style="margin:0 0 14px;color:#aaa">` + html.EscapeString(a.Brand) + `</p>`
+		brand = `<p class="alt" style="margin:0 0 14px;color:#9aa0a9">` + html.EscapeString(a.Brand) + `</p>`
 	}
 	authPage(w, "Sign in", brand+inviteBanner(next)+fmt.Sprintf(`<form method="post" action="/auth/login?next=%s">%s%s%s<button>Sign in</button></form>
 %s<p class="alt"><a href="/auth/reset">Forgot password?</a></p>`,
@@ -653,7 +659,7 @@ func (a *BuiltinAuth) pageSignup(w http.ResponseWriter, r *http.Request) {
 	}
 	brand := ""
 	if a.Brand != "" {
-		brand = `<p class="alt" style="margin:0 0 14px;color:#aaa">` + html.EscapeString(a.Brand) + `</p>`
+		brand = `<p class="alt" style="margin:0 0 14px;color:#9aa0a9">` + html.EscapeString(a.Brand) + `</p>`
 	}
 	authPage(w, "Create account", brand+inviteBanner(next)+fmt.Sprintf(`<form method="post" action="/auth/signup?next=%s">%s%s%s%s%s<button>Sign up</button></form>
 <p class="alt">Have an account? <a href="/auth/login?next=%s">Sign in</a></p>`,
diff --git a/internal/webapp/shares.go b/internal/webapp/shares.go
index 3a1242c..77f8ea4 100644
--- a/internal/webapp/shares.go
+++ b/internal/webapp/shares.go
@@ -329,11 +329,12 @@ func (s *Server) handleShared(w http.ResponseWriter, r *http.Request) {
 const sharedMarkdownShell = `<!doctype html><html lang="en"><head><meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1"><title>%s</title>
 <style>
-body{font:16px/1.65 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:#24292f;
-max-width:760px;margin:0 auto;padding:48px 24px 96px}
-@media (prefers-color-scheme: dark){body{background:#1e1e24;color:#ddd}
-a{color:#8f73ff}code,pre{background:#26262e}}
-h1,h2,h3{line-height:1.25}
+body{font:16px/1.7 -apple-system,BlinkMacSystemFont,"SF Pro Text","Inter","Segoe UI",sans-serif;color:#24292f;
+max-width:720px;margin:0 auto;padding:52px 24px 96px}
+a{color:#b26a00}
+@media (prefers-color-scheme: dark){body{background:#0a0b0d;color:#c6cbd3}
+a{color:#ffcf85}code,pre{background:#15171b}h1,h2,h3{color:#f4f6f9}}
+h1,h2,h3{line-height:1.25;letter-spacing:-.018em}
 pre{padding:12px;border-radius:8px;overflow-x:auto;background:#f6f8fa}
 code{background:#f6f8fa;padding:2px 5px;border-radius:4px;font-size:.9em}
 pre code{padding:0;background:none}
diff --git a/internal/webapp/static/app.js b/internal/webapp/static/app.js
index 88d360c..90aa27f 100644
--- a/internal/webapp/static/app.js
+++ b/internal/webapp/static/app.js
@@ -4,7 +4,8 @@
 const $ = (id) => document.getElementById(id);
 let flatFiles = [];   // [{path, name}] for wikilink resolution
 let currentPath = null;
-let collapsed = new Set(); // dir paths the user collapsed
+let expanded = new Set();  // dir paths that are open (folders start closed)
+let treeFirstLoad = true;  // apply the "lone root folder opens" rule once per project
 
 const MD_EXT = /\.(md|markdown)$/i;
 const IMG_EXT = /\.(png|jpe?g|gif|svg|webp|ico|bmp|avif)$/i;
@@ -22,6 +23,18 @@ let joinedOrgId = null;    // org just joined via an invite this page-load
 
 const fileURL = (p) => apiBase + "file?path=" + encodeURIComponent(p);
 
+/* inline SVG icon, pulled from the <symbol> sprite in index.html */
+function svgIcon(name) { return `<svg class="ico" aria-hidden="true"><use href="#i-${name}"/></svg>`; }
+
+/* Deterministic accent for a project's letter-mark, so each project keeps a
+   stable color across reloads without any server state. */
+const PROJ_COLORS = ["#5b8def", "#f5a623", "#4cc38a", "#e0679b", "#8b7bf0", "#3ec8c8", "#e6934a"];
+function projColor(s) {
+  let h = 0;
+  for (const c of s) h = (h * 31 + c.charCodeAt(0)) >>> 0;
+  return PROJ_COLORS[h % PROJ_COLORS.length];
+}
+
 async function getJSON(url) {
   const r = await fetch(url);
   if (r.status === 401) { // auth required: sign in, then come back here
@@ -112,7 +125,14 @@ async function loadProjects() {
     const li = document.createElement("li");
     const row = document.createElement("div");
     row.className = "row" + (currentProject && currentProject.id === p.id ? " active" : "");
-    row.textContent = p.name;
+    const mark = document.createElement("span");
+    mark.className = "proj-mark";
+    mark.style.background = projColor(p.name);
+    mark.textContent = (p.name.trim()[0] || "?");
+    const lab = document.createElement("span");
+    lab.className = "label";
+    lab.textContent = p.name;
+    row.append(mark, lab);
     row.title = p.name;
     row.tabIndex = 0;
     row.setAttribute("role", "button");
@@ -125,6 +145,8 @@ async function loadProjects() {
 
 function selectProject(p, path) {
   currentProject = p;
+  expanded = new Set();   // fresh collapse state for the new project's tree
+  treeFirstLoad = true;
   apiBase = "api/p/" + p.id + "/";
   $("vault-name").textContent = p.name;
   document.title = p.name + " — BearDrive";
@@ -507,7 +529,7 @@ async function updateAdminBar() {
   let pending = [];
   try { pending = (await getJSON("api/admin/pending")).pending || []; } catch { }
   bar.hidden = false;
-  bar.textContent = pending.length ? "⚑ Admin · " + pending.length : "⚙ Admin";
+  bar.innerHTML = svgIcon("shield") + `<span>Admin${pending.length ? " · " + pending.length : ""}</span>`;
   bar.title = "Hub administration — signup policy" + (pending.length ? " and pending approvals" : "");
   bar.onclick = () => showHubSettings();
 }
@@ -635,9 +657,17 @@ async function refreshTree() {
     root = await getJSON(apiBase + "tree");
   } catch { return; } // keep the last good tree
   flatFiles = [];
+  const kids = root.children || [];
+  // First render of a project's tree: every folder starts closed, except a
+  // lone root folder — opening it spares the user a single shut folder.
+  if (treeFirstLoad) {
+    treeFirstLoad = false;
+    const rootDirs = kids.filter((c) => c.dir);
+    if (rootDirs.length === 1) expanded.add(rootDirs[0].path);
+  }
   const nav = $("tree");
   nav.innerHTML = "";
-  nav.appendChild(renderChildren(root.children || []));
+  nav.appendChild(renderChildren(kids));
   markActive();
 }
 
@@ -655,11 +685,14 @@ function renderNode(n) {
   row.dataset.path = n.path;
   const chev = document.createElement("span");
   chev.className = "chev";
-  chev.textContent = "▾"; // ▾
+  chev.innerHTML = svgIcon("chevd");
+  const ticon = document.createElement("span");
+  ticon.className = "ticon";
+  ticon.innerHTML = svgIcon(n.dir ? "folder" : "doc");
   const label = document.createElement("span");
   label.className = "label";
   label.textContent = n.name;
-  row.append(chev, label);
+  row.append(chev, ticon, label);
   // Keyboard-operable: the row behaves as a button.
   row.tabIndex = 0;
   row.setAttribute("role", "button");
@@ -670,18 +703,19 @@ function renderNode(n) {
     if (serverConfig.mode === "hub") {
       const hist = document.createElement("span");
       hist.className = "dir-history";
-      hist.textContent = "⌚";
+      hist.innerHTML = svgIcon("hist");
       hist.title = "Folder history";
       hist.onclick = (e) => { e.stopPropagation(); showHistory({ prefix: n.path + "/" }); };
       row.appendChild(hist);
     }
     li.appendChild(renderChildren(n.children || []));
-    if (collapsed.has(n.path)) li.classList.add("collapsed");
-    row.setAttribute("aria-expanded", String(!collapsed.has(n.path)));
+    const open = expanded.has(n.path);
+    if (!open) li.classList.add("collapsed");
+    row.setAttribute("aria-expanded", String(open));
     row.onclick = () => {
       li.classList.toggle("collapsed");
       const isCollapsed = li.classList.contains("collapsed");
-      isCollapsed ? collapsed.add(n.path) : collapsed.delete(n.path);
+      isCollapsed ? expanded.delete(n.path) : expanded.add(n.path);
       row.setAttribute("aria-expanded", String(!isCollapsed));
     };
   } else {
@@ -698,11 +732,41 @@ function markActive() {
   if (row) row.classList.add("active");
 }
 
+/* Mark every ancestor folder of a path as open. */
+function expandTo(filePath) {
+  const parts = filePath.split("/");
+  let acc = "";
+  for (let i = 0; i < parts.length - 1; i++) {
+    acc = acc ? acc + "/" + parts[i] : parts[i];
+    expanded.add(acc);
+  }
+}
+
+/* Reflect the `expanded` set onto the already-rendered tree DOM. */
+function applyTreeExpansion() {
+  for (const li of document.querySelectorAll("#tree li.dir")) {
+    const row = li.querySelector(":scope > .row");
+    const open = row && expanded.has(row.dataset.path);
+    li.classList.toggle("collapsed", !open);
+    if (row) row.setAttribute("aria-expanded", String(!!open));
+  }
+}
+
+/* Opening a file (search, wikilink, deep link) unfolds the path to it and
+   scrolls the row into view so the selection is never hidden in a shut folder. */
+function revealInTree(p) {
+  expandTo(p);
+  applyTreeExpansion();
+  const row = document.querySelector(`#tree .row[data-path="${CSS.escape(p)}"]`);
+  if (row) row.scrollIntoView({ block: "center" });
+}
+
 /* ---- file pane ---- */
 async function openFile(p) {
   currentPath = p;
   setHash(p);
   markActive();
+  revealInTree(p);
   closeSidebarOnMobile();
   $("crumb").textContent = p.split("/").join(" / ");
   updateShareButton();
@@ -793,7 +857,7 @@ function showShareDialog(url, copied) {
   back.className = "modal-back";
   back.innerHTML = `
     <div class="modal">
-      <h3>🔗 Public link created</h3>
+      <h3>Public link created</h3>
       <p><b>Anyone with this link can view this file</b> — no account needed. It always shows the latest version until you revoke it.</p>
       <div class="modal-url"></div>
       <div class="modal-actions">
@@ -898,7 +962,7 @@ async function showHistory(q) {
     row.innerHTML =
       `<div class="hline"><span class="hkind"></span><span class="hpath"></span><span class="htime"></span></div>` +
       `<div class="hmeta"><span class="hwho"></span><span class="hdev"></span><span class="hsize"></span><span class="hact"></span></div>`;
-    row.querySelector(".hkind").textContent = e.kind === "delete" ? "✕" : "●";
+    row.querySelector(".hkind").innerHTML = svgIcon(e.kind === "delete" ? "x" : "dot");
     row.querySelector(".hpath").textContent = e.path;
     row.querySelector(".htime").textContent = when;
     row.querySelector(".hwho").textContent = who;
@@ -1101,28 +1165,28 @@ function paletteCandidates() {
   const hub = serverConfig.mode === "hub";
 
   if (hub && currentProject && currentPath) {
-    add("↗", "Share: " + currentPath, "action", () => $("share-btn").click());
-    add("⌚", "History: " + currentPath, "action", () => showHistory({ path: currentPath }));
-    add("↓", "Download: " + currentPath, "action", () => $("download").click());
+    add("share", "Share: " + currentPath, "action", () => $("share-btn").click());
+    add("hist", "History: " + currentPath, "action", () => showHistory({ path: currentPath }));
+    add("download", "Download: " + currentPath, "action", () => $("download").click());
   }
   if (hub && currentProject) {
-    add("⌚", "History: whole project", "action", () => showHistory({ prefix: "" }));
+    add("hist", "History: whole project", "action", () => showHistory({ prefix: "" }));
   }
   if (!$("upload-btn").hidden) {
-    add("+", "Upload a file…", "action", () => $("upload-btn").click());
+    add("upload", "Upload a file…", "action", () => $("upload-btn").click());
   }
   if (hub) {
     for (const p of projects) {
       if (!currentProject || p.id !== currentProject.id) {
-        add("▣", "Switch to project: " + p.name, "project", () => selectProject(p, null));
+        add("folder", "Switch to project: " + p.name, "project", () => selectProject(p, null));
       }
     }
   }
   if (serverConfig.auth && serverConfig.auth.enabled) {
-    add("⏻", "Sign out", "action", () => { location.href = "/auth/logout"; });
+    add("power", "Sign out", "action", () => { location.href = "/auth/logout"; });
   }
   for (const f of flatFiles) {
-    add("◦", f.path, "file", () => openFile(f.path));
+    add("doc", f.path, "file", () => openFile(f.path));
   }
   return items;
 }
@@ -1166,13 +1230,13 @@ function renderPalette() {
   paletteItems.forEach((item, i) => {
     const li = document.createElement("li");
     if (i === paletteSel) li.classList.add("selected");
-    const icon = document.createElement("span");
-    icon.className = "picon";
-    icon.textContent = item.icon;
+    const pic = document.createElement("span");
+    pic.className = "picon";
+    pic.innerHTML = svgIcon(item.icon);
     const kind = document.createElement("span");
     kind.className = "pkind";
     kind.textContent = item.kind;
-    li.append(icon, highlight(item.label, item.hits), kind);
+    li.append(pic, highlight(item.label, item.hits), kind);
     li.onclick = () => runPaletteItem(item);
     li.onmousemove = () => { if (paletteSel !== i) { paletteSel = i; renderPalette(); } };
     ul.appendChild(li);
diff --git a/internal/webapp/static/index.html b/internal/webapp/static/index.html
index 54e55bb..4ca254f 100644
--- a/internal/webapp/static/index.html
+++ b/internal/webapp/static/index.html
@@ -5,17 +5,47 @@
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <title>BearDrive</title>
 <link rel="stylesheet" href="style.css">
-<link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>&#128193;</text></svg>">
+<link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>&#128059;</text></svg>">
 </head>
 <body>
+<svg width="0" height="0" class="sprite" aria-hidden="true" focusable="false">
+  <symbol id="i-chev" viewBox="0 0 24 24"><path d="m9 6 6 6-6 6"/></symbol>
+  <symbol id="i-chevd" viewBox="0 0 24 24"><path d="m6 9 6 6 6-6"/></symbol>
+  <symbol id="i-folder" viewBox="0 0 24 24"><path d="M3 7a2 2 0 0 1 2-2h4l2 2h8a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/></symbol>
+  <symbol id="i-doc" viewBox="0 0 24 24"><path d="M14 3v5h5"/><path d="M14 3H6a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/></symbol>
+  <symbol id="i-search" viewBox="0 0 24 24"><circle cx="11" cy="11" r="7"/><path d="m20 20-3.2-3.2"/></symbol>
+  <symbol id="i-share" viewBox="0 0 24 24"><circle cx="18" cy="5" r="3"/><circle cx="6" cy="12" r="3"/><circle cx="18" cy="19" r="3"/><path d="m8.6 10.5 6.8-4M8.6 13.5l6.8 4"/></symbol>
+  <symbol id="i-hist" viewBox="0 0 24 24"><path d="M3 3v6h6"/><path d="M3.5 9a9 9 0 1 0 2-4"/><path d="M12 8v4l3 2"/></symbol>
+  <symbol id="i-plus" viewBox="0 0 24 24"><path d="M12 5v14M5 12h14"/></symbol>
+  <symbol id="i-gear" viewBox="0 0 24 24"><circle cx="12" cy="12" r="3"/><path d="M19.4 13a7.6 7.6 0 0 0 0-2l1.7-1.3-1.7-3-2 .8a7.6 7.6 0 0 0-1.7-1l-.3-2.1H10l-.3 2.1a7.6 7.6 0 0 0-1.7 1l-2-.8-1.7 3L6 11a7.6 7.6 0 0 0 0 2l-1.7 1.3 1.7 3 2-.8a7.6 7.6 0 0 0 1.7 1l.3 2.1h3.4l.3-2.1a7.6 7.6 0 0 0 1.7-1l2 .8 1.7-3z"/></symbol>
+  <symbol id="i-users" viewBox="0 0 24 24"><path d="M16 20v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="3.2"/><path d="M22 20v-2a4 4 0 0 0-3-3.8"/><path d="M16 3.5a4 4 0 0 1 0 7"/></symbol>
+  <symbol id="i-link" viewBox="0 0 24 24"><path d="M10 13a5 5 0 0 0 7 0l2-2a5 5 0 0 0-7-7l-1 1"/><path d="M14 11a5 5 0 0 0-7 0l-2 2a5 5 0 0 0 7 7l1-1"/></symbol>
+  <symbol id="i-shield" viewBox="0 0 24 24"><path d="M12 3 5 6v5c0 4.5 3 7.5 7 9 4-1.5 7-4.5 7-9V6z"/></symbol>
+  <symbol id="i-check" viewBox="0 0 24 24"><path d="m5 13 4 4L19 7"/></symbol>
+  <symbol id="i-x" viewBox="0 0 24 24"><path d="M6 6l12 12M18 6 6 18"/></symbol>
+  <symbol id="i-trash" viewBox="0 0 24 24"><path d="M4 7h16M9 7V5a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v2m2 0v12a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2V7"/></symbol>
+  <symbol id="i-lock" viewBox="0 0 24 24"><rect x="4.5" y="10" width="15" height="10" rx="2"/><path d="M8 10V7a4 4 0 0 1 8 0v3"/></symbol>
+  <symbol id="i-clock" viewBox="0 0 24 24"><circle cx="12" cy="12" r="9"/><path d="M12 8v4l3 2"/></symbol>
+  <symbol id="i-globe" viewBox="0 0 24 24"><circle cx="12" cy="12" r="9"/><path d="M3 12h18M12 3a15 15 0 0 1 0 18M12 3a15 15 0 0 0 0 18"/></symbol>
+  <symbol id="i-copy" viewBox="0 0 24 24"><rect x="9" y="9" width="11" height="11" rx="2"/><path d="M5 15V5a2 2 0 0 1 2-2h8"/></symbol>
+  <symbol id="i-alert" viewBox="0 0 24 24"><path d="M12 9v4M12 17h.01"/><path d="M10.3 4 3 17a2 2 0 0 0 1.7 3h14.6a2 2 0 0 0 1.7-3L13.7 4a2 2 0 0 0-3.4 0z"/></symbol>
+  <symbol id="i-power" viewBox="0 0 24 24"><path d="M12 4v8M7.5 7a7 7 0 1 0 9 0"/></symbol>
+  <symbol id="i-download" viewBox="0 0 24 24"><path d="M12 4v11m0 0 4-4m-4 4-4-4M5 19h14"/></symbol>
+  <symbol id="i-upload" viewBox="0 0 24 24"><path d="M12 20V9m0 0 4 4m-4-4-4 4M5 5h14"/></symbol>
+  <symbol id="i-dot" viewBox="0 0 24 24"><circle cx="12" cy="12" r="4.5" fill="currentColor" stroke="none"/></symbol>
+  <symbol id="i-enter" viewBox="0 0 24 24"><path d="M9 10 4 15l5 5"/><path d="M20 4v7a4 4 0 0 1-4 4H4"/></symbol>
+  <symbol id="i-menu" viewBox="0 0 24 24"><path d="M4 6h16M4 12h16M4 18h16"/></symbol>
+  <symbol id="i-dots" viewBox="0 0 24 24"><circle cx="5" cy="12" r="1.4" fill="currentColor" stroke="none"/><circle cx="12" cy="12" r="1.4" fill="currentColor" stroke="none"/><circle cx="19" cy="12" r="1.4" fill="currentColor" stroke="none"/></symbol>
+</svg>
 <div id="sb-backdrop"></div>
 <aside id="sidebar">
   <header id="vault">
+    <span id="vault-badge" aria-hidden="true">🐻</span>
     <span id="vault-name">…</span>
     <div class="vault-actions">
       <button id="adminbar" class="adminbar" hidden></button>
-      <button id="settings-btn" class="icon-btn2" hidden title="Manage organization">⚙</button>
-      <a id="signout" href="/auth/logout" hidden title="Sign out" aria-label="Sign out">⏻</a>
+      <button id="settings-btn" class="icon-btn2" hidden title="Manage organization" aria-label="Manage organization"><svg class="ico"><use href="#i-users"/></svg></button>
+      <a id="signout" href="/auth/logout" hidden title="Sign out" aria-label="Sign out"><svg class="ico"><use href="#i-power"/></svg></a>
     </div>
   </header>
   <nav id="projects" aria-label="Projects" hidden></nav>
@@ -27,16 +57,16 @@
 </aside>
 <main id="main">
   <header id="topbar">
-    <button id="menu-btn" class="icon-btn" title="Menu" aria-label="Menu">☰</button>
+    <button id="menu-btn" class="icon-btn" title="Menu" aria-label="Menu"><svg class="ico"><use href="#i-menu"/></svg></button>
     <span id="crumb"></span>
     <span id="meta"></span>
-    <button id="search-btn" class="btn ghost" title="Search (⌘K)">🔍 Search <kbd>⌘K</kbd></button>
-    <button id="share-btn" class="btn" hidden>Share</button>
-    <button id="history-btn" class="btn" hidden>History</button>
-    <button id="upload-btn" class="btn" hidden>Upload</button>
+    <button id="search-btn" class="btn ghost" title="Search (⌘K)"><svg class="ico"><use href="#i-search"/></svg> <span class="lbl">Search</span> <kbd>⌘K</kbd></button>
+    <button id="share-btn" class="btn" hidden><svg class="ico"><use href="#i-share"/></svg> <span class="lbl">Share</span></button>
+    <button id="history-btn" class="btn" hidden><svg class="ico"><use href="#i-hist"/></svg> <span class="lbl">History</span></button>
+    <button id="upload-btn" class="btn" hidden><svg class="ico"><use href="#i-upload"/></svg> <span class="lbl">Upload</span></button>
     <input id="upload-input" type="file" hidden>
-    <a id="download" class="btn" hidden download>Download</a>
-    <button id="more-btn" class="btn icon-only" hidden title="More actions" aria-label="More actions">⋯</button>
+    <a id="download" class="btn" hidden download><svg class="ico"><use href="#i-download"/></svg> <span class="lbl">Download</span></a>
+    <button id="more-btn" class="btn icon-only" hidden title="More actions" aria-label="More actions"><svg class="ico"><use href="#i-dots"/></svg></button>
     <div id="more-menu" hidden role="menu"></div>
   </header>
   <article id="content" class="markdown">
@@ -45,8 +75,11 @@
 </main>
 <div id="palette-overlay" hidden>
   <div id="palette" role="dialog" aria-label="Search and quick actions">
-    <input id="palette-input" type="text" placeholder="Search file names, projects, actions…"
-           autocomplete="off" spellcheck="false">
+    <div id="palette-inputwrap">
+      <svg class="ico"><use href="#i-search"/></svg>
+      <input id="palette-input" type="text" placeholder="Search file names, projects, actions…"
+             autocomplete="off" spellcheck="false">
+    </div>
     <ul id="palette-results"></ul>
     <footer id="palette-hint">↑↓ navigate · ⏎ select · esc close</footer>
   </div>
diff --git a/internal/webapp/static/style.css b/internal/webapp/static/style.css
index 788e0b4..7bd48c1 100644
--- a/internal/webapp/static/style.css
+++ b/internal/webapp/static/style.css
@@ -1,428 +1,371 @@
-/* Obsidian-inspired dark theme */
+/* BearDrive viewer — near-black, hairline-crafted, honey accent.
+   Design language: Linear-grade restraint; the one accent (honey) is spent
+   only on active state, the live/brand mark, and the palette selection. */
 :root {
-  --bg: #1e1e1e;
-  --bg-side: #262626;
-  --bg-hover: #333333;
-  --bg-active: #3f3550;
-  --border: #363636;
-  --text: #dadada;
-  --text-dim: #a6a6a6;      /* AA on --bg and --bg-side */
-  --text-faint: #969696;    /* AA on both --bg (5.0) and --bg-side #262626 (4.6) */
-  --accent: #a882ff;
-  --accent-bright: #c9b3ff; /* accent text on the tinted --bg-active (AA) */
-  --accent-dim: #6a48e0;    /* darker so white labels reach 4.5:1 */
-  --accent-press: #5a3bc9;  /* button hover/press — white stays ≥4.5:1 */
-  --code-bg: #2a2a2a;
-  /* radius scale: controls / cards / overlays */
-  --r-ctl: 6px;
-  --r-card: 8px;
-  --r-over: 12px;
+  --bg: #0a0b0d;              /* main ground */
+  --bg-side: #0c0e10;         /* sidebar / panels */
+  --bg-raise: #15171b;        /* palette, modals, elevated cards */
+  --surface: rgba(255,255,255,.03); /* inputs, ghost buttons */
+  --hover: rgba(255,255,255,.06);   /* row / control hover */
+  --border: rgba(255,255,255,.07);
+  --border-2: rgba(255,255,255,.11);
+  --code-bg: #0d0f12;
+
+  --text: #eef0f3;
+  --text-dim: #9aa0a9;        /* AA on both grounds */
+  --text-faint: #868b93;      /* ≥4.5:1 on near-black */
+  --text-ghost: #666b74;      /* decorative icons only */
+
+  --accent: #f5a623;          /* honey */
+  --accent-bright: #ffcf85;   /* honey text / primary hover */
+  --accent-dim: #d3861a;
+  --accent-press: #e0951a;
+  --glow: rgba(245,166,35,.13);
+  --add: #4cc38a;
+  --del: #f26d6d;
+
+  --mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
+  --ui: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", "Segoe UI", Roboto, sans-serif;
+
+  --r-ctl: 7px;
+  --r-card: 10px;
+  --r-over: 14px;
 }
-:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 3px; }
 
 * { box-sizing: border-box; }
-[hidden] { display: none !important; } /* explicit display rules must not override the hidden attribute */
+[hidden] { display: none !important; }
 html, body { height: 100%; margin: 0; }
-#more-btn { display: none; } /* mobile-only; shown in the responsive block */
 body {
   display: flex;
   background: var(--bg);
   color: var(--text);
-  font: 15px/1.6 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
+  font: 13px/1.5 var(--ui);
+  letter-spacing: -.006em;
+  -webkit-font-smoothing: antialiased;
+  text-rendering: optimizeLegibility;
 }
+::selection { background: var(--glow); color: var(--accent-bright); }
+:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; border-radius: 5px; }
+.sprite { position: absolute; }
+.ico {
+  width: 16px; height: 16px; flex: none;
+  stroke: currentColor; stroke-width: 1.6; fill: none;
+  stroke-linecap: round; stroke-linejoin: round;
+}
+button, input, a.btn { font-family: inherit; }
 
 /* ---- sidebar ---- */
 #sidebar {
-  width: 280px;
-  min-width: 200px;
+  width: 264px; min-width: 210px;
   background: var(--bg-side);
   border-right: 1px solid var(--border);
-  display: flex;
-  flex-direction: column;
-  overflow: hidden;
+  display: flex; flex-direction: column; overflow: hidden;
 }
 #vault {
-  padding: 14px 16px 10px;
-  border-bottom: 1px solid var(--border);
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-}
-#vault-name { font-weight: 600; font-size: 14px; }
-#signout { color: var(--text-faint); text-decoration: none; font-size: 13px; }
-#signout:hover { color: var(--text); }
-#upload-btn {
-  border: none;
-  cursor: pointer;
-  font: inherit;
-  font-size: 12.5px;
-}
-#projects {
-  flex: none;
-  max-height: 30%;
-  overflow-y: auto;
-  padding: 8px 6px;
-  font-size: 13.5px;
+  display: flex; align-items: center; gap: 9px;
+  height: 52px; padding: 0 12px 0 14px;
   border-bottom: 1px solid var(--border);
 }
-#projects ul { list-style: none; margin: 0; padding-left: 4px; }
+#vault-badge {
+  width: 22px; height: 22px; border-radius: 6px; flex: none;
+  display: grid; place-items: center; font-size: 13px; line-height: 1;
+  background: linear-gradient(160deg, #ffcf85, #f5a623 55%, #d3861a);
+  box-shadow: 0 1px 0 rgba(255,255,255,.35) inset, 0 2px 6px -1px rgba(245,166,35,.4);
+}
+#vault-name { font-weight: 600; font-size: 13px; letter-spacing: -.01em; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.vault-actions { display: flex; align-items: center; gap: 4px; }
+#signout, .icon-btn2 {
+  width: 28px; height: 28px; border-radius: 6px;
+  display: inline-flex; align-items: center; justify-content: center;
+  color: var(--text-ghost); background: transparent; border: none; cursor: pointer; text-decoration: none;
+}
+#signout:hover, .icon-btn2:hover { color: var(--text); background: var(--hover); }
+#signout .ico, .icon-btn2 .ico { width: 16px; height: 16px; }
+.adminbar {
+  display: inline-flex; align-items: center; gap: 6px;
+  height: 26px; padding: 0 9px; border-radius: var(--r-ctl);
+  border: 1px solid var(--border); background: var(--surface);
+  color: var(--accent-bright); font-size: 11.5px; font-weight: 600; cursor: pointer;
+}
+.adminbar:hover { background: var(--glow); border-color: transparent; }
+
+/* projects */
+#projects { flex: none; max-height: 32%; overflow-y: auto; padding: 10px 8px 8px; border-bottom: 1px solid var(--border); }
+.nav-head { display: flex; align-items: center; justify-content: space-between; padding: 6px 8px; font-size: 10.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .07em; color: var(--text-ghost); }
+.nav-add { display: grid; place-items: center; width: 18px; height: 18px; border: none; background: transparent; color: var(--text-ghost); cursor: pointer; border-radius: 5px; }
+.nav-add .ico { width: 14px; height: 14px; }
+.nav-add:hover { color: var(--text); background: var(--hover); }
+#projects ul { list-style: none; margin: 0; padding: 0; }
 #projects .row {
-  padding: 3px 8px;
-  border-radius: 5px;
-  cursor: pointer;
-  color: var(--text-dim);
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
+  display: flex; align-items: center; gap: 9px;
+  height: 31px; padding: 0 8px; border-radius: 7px;
+  color: var(--text-dim); cursor: pointer; position: relative;
+  white-space: nowrap; overflow: hidden;
 }
-#projects .row::before { content: "◇"; margin-right: 7px; color: var(--text-faint); }
-#projects .row:hover { background: var(--bg-hover); color: var(--text); }
-#projects .row.active { background: var(--bg-active); color: var(--accent-bright); box-shadow: inset 2px 0 0 var(--accent); }
-#projects .row.active::before { color: var(--accent-bright); }
-#tree { flex: 1; overflow-y: auto; padding: 8px 6px 24px; font-size: 13.5px; }
-#orgbar {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 8px;
-  padding: 9px 16px;
-  border-top: 1px solid var(--border);
-  font-size: 12.5px;
-  color: var(--text-dim);
+.proj-mark {
+  width: 17px; height: 17px; border-radius: 5px; flex: none;
+  display: grid; place-items: center; font-size: 10px; font-weight: 700;
+  color: #0a0b0d; letter-spacing: -.02em; text-transform: uppercase;
 }
-#orgbar[hidden] { display: none; }
-#org-name { cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
-#org-name::before { content: "◈"; margin-right: 7px; color: var(--text-faint); }
-#org-name:hover { color: var(--text); }
-#invite-btn {
-  border: none; cursor: pointer; font: inherit; font-size: 11.5px;
-  padding: 3px 10px; border-radius: var(--r-ctl);
-  background: var(--bg-active); color: var(--text);
-}
-#invite-btn:hover { color: #fff; background: var(--bg-hover); }
-#tree ul { list-style: none; margin: 0; padding-left: 14px; }
-#tree > ul { padding-left: 4px; }
+#projects .row .label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; }
+#projects .row:hover { background: var(--hover); color: var(--text); }
+#projects .row.active { background: var(--glow); color: var(--accent-bright); }
+#projects .row.active::before { content: ""; position: absolute; left: 0; top: 6px; bottom: 6px; width: 2px; border-radius: 2px; background: var(--accent); }
+
+/* file tree */
+#tree { flex: 1; overflow-y: auto; padding: 8px 8px 24px; }
+#tree ul { list-style: none; margin: 0; padding-left: 13px; position: relative; }
+#tree > ul { padding-left: 0; }
+#tree ul ul::before { content: ""; position: absolute; left: 5px; top: 0; bottom: 0; width: 1px; background: var(--border); }
 #tree li > .row {
-  display: flex;
-  align-items: center;
-  gap: 5px;
-  padding: 2px 8px;
-  border-radius: 5px;
-  cursor: pointer;
-  color: var(--text-dim);
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
+  display: flex; align-items: center; gap: 6px;
+  height: 28px; padding: 0 8px; border-radius: 7px;
+  color: var(--text-dim); cursor: pointer; position: relative;
+  white-space: nowrap; overflow: hidden;
 }
-#tree li > .row:hover { background: var(--bg-hover); color: var(--text); }
-#tree li > .row.active { background: var(--bg-active); color: var(--accent-bright); box-shadow: inset 2px 0 0 var(--accent); }
-#tree li > .row .label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
-#tree .chev { width: 12px; flex: none; font-size: 10px; color: var(--text-faint); transition: transform .12s; }
+#tree li > .row:hover { background: var(--hover); color: var(--text); }
+#tree li > .row.active { background: var(--glow); color: var(--accent-bright); }
+#tree li > .row.active::before { content: ""; position: absolute; left: 0; top: 5px; bottom: 5px; width: 2px; border-radius: 2px; background: var(--accent); }
+#tree .chev { width: 14px; height: 14px; flex: none; color: var(--text-ghost); transition: transform .12s; display: flex; align-items: center; justify-content: center; }
+#tree .chev .ico { width: 13px; height: 13px; }
+#tree .ticon { flex: none; display: flex; color: var(--text-ghost); }
+#tree .ticon .ico { width: 15px; height: 15px; }
+#tree li > .row:hover .ticon, #tree li > .row:hover .chev { color: var(--text-faint); }
+#tree li > .row.active .ticon, #tree li > .row.active .chev { color: var(--accent); }
+#tree .label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; }
+#tree .file .label { font-size: 12.5px; }
+#tree .file .chev { visibility: hidden; }
 #tree li.collapsed > ul { display: none; }
 #tree li.collapsed > .row .chev { transform: rotate(-90deg); }
-#tree .file .chev { visibility: hidden; }
+.dir-history {
+  margin-left: auto; flex: none; visibility: hidden;
+  width: 24px; height: 24px; border-radius: 5px;
+  display: inline-flex; align-items: center; justify-content: center; color: var(--text-ghost);
+}
+.dir-history .ico { width: 14px; height: 14px; }
+#tree li > .row:hover .dir-history { visibility: visible; }
+.dir-history:hover { color: var(--text); background: var(--hover); }
+
+/* org bar */
+#orgbar { display: flex; align-items: center; gap: 9px; padding: 9px 12px 9px 14px; border-top: 1px solid var(--border); }
+#org-name {
+  flex: 1; min-width: 0; display: inline-flex; align-items: center; gap: 8px;
+  color: var(--text-dim); font-size: 12.5px; font-weight: 500; cursor: pointer;
+  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
+}
+#org-name::before {
+  content: ""; width: 15px; height: 15px; flex: none; border-radius: 4px;
+  background: linear-gradient(160deg, #ffcf85, #d3861a); opacity: .85;
+}
+#org-name:hover { color: var(--text); }
+#invite-btn {
+  flex: none; height: 27px; padding: 0 11px; border-radius: var(--r-ctl);
+  border: 1px solid var(--border); background: var(--surface);
+  color: var(--text-dim); font-size: 12px; font-weight: 500; cursor: pointer;
+}
+#invite-btn:hover { background: var(--hover); color: var(--text); border-color: var(--border-2); }
 
 /* ---- main pane ---- */
 #main { flex: 1; display: flex; flex-direction: column; min-width: 0; }
 #topbar {
-  position: relative;
-  display: flex;
-  align-items: center;
-  gap: 12px;
-  padding: 10px 24px;
-  border-bottom: 1px solid var(--border);
-  min-height: 46px;
+  position: relative; display: flex; align-items: center; gap: 9px;
+  height: 52px; padding: 0 16px; border-bottom: 1px solid var(--border);
 }
-#crumb { font-size: 13px; color: var(--text); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-/* Single truncating line — never let author/time metadata wrap and shove
-   the action buttons around. */
+.icon-btn { display: none; width: 34px; height: 34px; border: none; background: transparent; color: var(--text-dim); cursor: pointer; border-radius: 7px; align-items: center; justify-content: center; }
+.icon-btn:hover { color: var(--text); background: var(--hover); }
+#crumb { font-size: 12.5px; color: var(--text); font-weight: 500; letter-spacing: -.01em; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 #meta { flex: 1; min-width: 0; font-size: 12px; color: var(--text-faint); text-align: right; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+
 .btn {
-  flex: none;
-  padding: 5px 12px;
-  border-radius: var(--r-ctl);
-  background: var(--accent-dim);
-  color: #fff;
-  font-size: 12.5px;
-  text-decoration: none;
-  border: none; cursor: pointer; font-family: inherit;
+  display: inline-flex; align-items: center; gap: 6px; flex: none;
+  height: 30px; padding: 0 11px; border-radius: var(--r-ctl);
+  border: 1px solid var(--border); background: var(--surface);
+  color: var(--text-dim); font-size: 12.5px; font-weight: 500; cursor: pointer; text-decoration: none;
 }
-.btn:hover { background: var(--accent-press); }
-#content { flex: 1; overflow-y: auto; padding: 28px 48px 80px; }
-/* The per-file actions are all secondary — uniform ghost styling so no
-   single one shouts louder than the rest. */
-#history-btn, #share-btn, #upload-btn, #download { border: none; cursor: pointer; font: inherit; font-size: 12.5px; background: var(--bg-active); color: var(--text); }
-#history-btn:hover, #share-btn:hover, #upload-btn:hover, #download:hover { color: #fff; background: var(--bg-hover); }
-.dir-history { margin-left: auto; padding: 0 4px; visibility: hidden; color: var(--text-faint); font-size: 11px; }
-#tree li > .row:hover .dir-history { visibility: visible; }
-.dir-history:hover { color: var(--text); }
-.history { max-width: 860px; }
-.hentry { padding: 10px 12px; border-bottom: 1px solid var(--border); }
-.hentry .hline { display: flex; gap: 10px; align-items: baseline; }
-.hkind { color: var(--accent); font-size: 11px; }
-.hentry.delete .hkind { color: #ff7b72; }
-.hpath { font-weight: 500; cursor: pointer; }
-.hpath:hover { color: var(--accent); }
-.htime { margin-left: auto; color: var(--text-faint); font-size: 12px; }
-.hmeta { display: flex; gap: 16px; margin-top: 3px; font-size: 12px; color: var(--text-dim); }
-.hdev, .hsize { color: var(--text-faint); }
-.hact { margin-left: auto; }
-.hact a { color: var(--accent); text-decoration: none; margin-left: 8px; }
-.empty { color: var(--text-faint); text-align: center; margin-top: 20vh; }
-.empty-hint { font-size: 12px; color: var(--text-faint); }
+.btn:hover { background: var(--hover); color: var(--text); border-color: var(--border-2); }
+.btn .ico { width: 15px; height: 15px; }
+.btn.ghost { color: var(--text-dim); }
+#search-btn kbd {
+  font: 11px var(--ui); color: var(--text-faint);
+  background: var(--hover); border: 1px solid var(--border-2); border-radius: 5px;
+  padding: 1px 5px; margin-left: 2px;
+}
+#more-menu {
+  position: absolute; right: 12px; top: calc(100% - 4px); z-index: 80;
+  background: var(--bg-raise); border: 1px solid var(--border-2);
+  border-radius: var(--r-card); box-shadow: 0 18px 44px -14px rgba(0,0,0,.75);
+  padding: 6px; min-width: 168px;
+}
+.more-item { display: block; width: 100%; text-align: left; min-height: 40px; padding: 0 12px; background: transparent; border: none; cursor: pointer; color: var(--text); font: inherit; font-size: 13.5px; border-radius: var(--r-ctl); }
+.more-item:hover { background: var(--hover); }
 
-/* ---- command palette (⌘K) ---- */
-#palette-overlay[hidden] { display: none; }
-#palette-overlay {
-  position: fixed;
-  inset: 0;
-  background: rgba(0, 0, 0, .45);
-  display: flex;
-  justify-content: center;
-  align-items: flex-start;
-  padding-top: 12vh;
-  z-index: 100;
-}
-#palette {
-  width: min(560px, 90vw);
-  background: var(--bg-side);
-  border: 1px solid var(--border);
-  border-radius: 12px;
-  box-shadow: 0 16px 48px rgba(0, 0, 0, .5);
-  overflow: hidden;
-}
-#palette-input {
-  width: 100%;
-  box-sizing: border-box;
-  padding: 14px 16px;
-  border: none;
-  border-bottom: 1px solid var(--border);
-  background: transparent;
-  color: var(--text);
-  font: inherit;
-  font-size: 15px;
-  outline: none;
-}
-#palette-results {
-  list-style: none;
-  margin: 0;
-  padding: 6px;
-  max-height: 46vh;
-  overflow-y: auto;
-}
-#palette-results li {
-  display: flex;
-  align-items: center;
-  gap: 10px;
-  padding: 7px 10px;
-  border-radius: 7px;
-  cursor: pointer;
-  color: var(--text-dim);
-  font-size: 13.5px;
-}
-#palette-results li.selected { background: var(--bg-active); color: var(--text); }
-#palette-results li.selected .picon, #palette-results li.selected .pkind { color: #c4c4c4; }
-#palette-results li.selected .plabel b { color: var(--accent-bright); } /* match highlight stays AA on the tinted selected row */
-#palette-results li .picon { width: 18px; flex: none; text-align: center; color: var(--text-faint); }
-#palette-results li .plabel { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
-#palette-results li .plabel b { color: var(--accent); font-weight: 600; }
-#palette-results li .pkind { flex: none; font-size: 11px; color: var(--text-faint); }
-#palette-results .pempty { color: var(--text-faint); cursor: default; justify-content: center; }
-#palette-hint {
-  padding: 7px 14px;
-  border-top: 1px solid var(--border);
-  font-size: 11px;
-  color: var(--text-faint);
-}
+#content { flex: 1; overflow-y: auto; padding: 44px 40px 110px; scroll-behavior: smooth; }
+.empty { color: var(--text-faint); text-align: center; margin-top: 22vh; }
+.empty-hint { display: block; margin-top: 6px; font-size: 12px; color: var(--text-ghost); }
 
-/* ---- projects nav header + new-project ---- */
-.nav-head { display: flex; align-items: center; justify-content: space-between; padding: 2px 8px 6px; font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--text-faint); }
-.nav-add { border: none; background: transparent; color: var(--text-faint); font-size: 18px; line-height: 1; cursor: pointer; padding: 0 4px; border-radius: 4px; }
-.nav-add:hover { color: var(--text); background: var(--bg-hover); }
-
-/* ---- vault header actions ---- */
-.vault-actions { display: flex; align-items: center; gap: 8px; }
-.adminbar { border: none; cursor: pointer; font: inherit; font-size: 11.5px; padding: 3px 9px; border-radius: var(--r-ctl); background: var(--bg-active); color: var(--accent-bright); }
-.adminbar:hover { background: var(--bg-hover); color: #fff; }
-.icon-btn2 { border: none; background: transparent; color: var(--text-faint); font-size: 15px; cursor: pointer; padding: 0 2px; line-height: 1; }
-.icon-btn2:hover { color: var(--text); }
-
-/* ---- topbar controls ---- */
-.icon-btn { display: none; border: none; background: transparent; color: var(--text-dim); font-size: 18px; cursor: pointer; padding: 2px 6px; border-radius: 5px; }
-.icon-btn:hover { color: var(--text); background: var(--bg-hover); }
-#search-btn { display: inline-flex; align-items: center; gap: 6px; }
-#search-btn kbd { font: 11px var(--mono, ui-monospace, Menlo, monospace); background: var(--bg); border: 1px solid var(--border); border-radius: 4px; padding: 0 5px; color: var(--text-faint); }
-.btn.ghost { background: var(--bg-active); color: var(--text); }
-.btn.ghost:hover { background: var(--bg-hover); color: #fff; }
-
-/* ---- onboarding empty state ---- */
+/* ---- onboarding ---- */
 .onboard { max-width: 560px; margin: 8vh auto 0; }
-.onboard h1 { font-size: 26px; margin: 0 0 8px; color: #f0f0f0; }
-.onboard > p { color: var(--text-dim); margin: 0 0 28px; }
-.ob-card { background: var(--bg-side); border: 1px solid var(--border); border-radius: 10px; padding: 20px 22px; margin-bottom: 16px; }
-.ob-card h3 { margin: 0 0 6px; font-size: 15px; }
-.ob-card p { margin: 0 0 14px; font-size: 13.5px; color: var(--text-dim); }
-.ob-row { display: flex; gap: 10px; }
-.ob-row input { flex: 1; padding: 8px 11px; border-radius: 6px; border: 1px solid var(--border); background: var(--bg); color: var(--text); font: inherit; font-size: 13.5px; outline: none; }
-.ob-row input:focus { border-color: var(--accent-dim); }
-.pbtn { border: none; cursor: pointer; font: inherit; font-size: 13px; padding: 7px 16px; border-radius: 6px; background: var(--accent-dim); color: #fff; white-space: nowrap; }
-.pbtn:hover { background: var(--accent-press); }
+.onboard h1 { font-size: 25px; font-weight: 640; letter-spacing: -.02em; margin: 0 0 8px; color: #f4f6f9; }
+.onboard > p { color: var(--text-dim); margin: 0 0 28px; font-size: 14px; }
+.ob-card { background: var(--bg-side); border: 1px solid var(--border); border-radius: var(--r-card); padding: 20px 22px; margin-bottom: 14px; }
+.ob-card h3 { margin: 0 0 6px; font-size: 14.5px; font-weight: 600; }
+.ob-card p { margin: 0 0 14px; font-size: 13px; color: var(--text-dim); }
+.ob-row { display: flex; gap: 9px; }
+.ob-row input { flex: 1; height: 34px; padding: 0 12px; border-radius: var(--r-ctl); border: 1px solid var(--border); background: var(--surface); color: var(--text); font: inherit; font-size: 13px; outline: none; }
+.ob-row input:focus { border-color: var(--accent); background: var(--hover); }
 
-/* ---- admin panels (org, pending) ---- */
-.admin { max-width: 720px; }
-.admin h1 { font-size: 22px; margin: 0 0 20px; color: #f0f0f0; }
-.admin h3 { font-size: 13px; text-transform: uppercase; letter-spacing: .05em; color: var(--text-faint); margin: 26px 0 10px; }
-.admin-h { display: flex; align-items: center; justify-content: space-between; margin: 26px 0 10px; }
-.admin-h h3 { margin: 0; }
-.admin-row { display: flex; gap: 10px; margin-bottom: 8px; }
-.admin-row input { flex: 1; padding: 7px 11px; border-radius: 6px; border: 1px solid var(--border); background: var(--bg); color: var(--text); font: inherit; font-size: 13.5px; outline: none; }
-.admin-list { border: 1px solid var(--border); border-radius: 8px; overflow: hidden; }
-.admin-item { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-bottom: 1px solid var(--border); font-size: 13.5px; }
-.admin-item:last-child { border-bottom: none; }
-.ai-main { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-.ai-main.mono { font: 12px var(--mono, ui-monospace, Menlo, monospace); color: var(--text-dim); }
-.ai-tag { font-size: 11.5px; color: var(--text-faint); }
-.admin-item select { background: var(--bg); color: var(--text); border: 1px solid var(--border); border-radius: 5px; padding: 3px 6px; font: inherit; font-size: 12.5px; }
-.ai-btn, .ai-del { border: none; cursor: pointer; font: inherit; font-size: 12px; padding: 4px 10px; border-radius: 5px; background: var(--bg-active); color: var(--text-dim); }
-.ai-btn:hover { background: var(--bg-hover); color: var(--text); }
-.ai-del { color: #ff9b91; }
-.ai-del:hover { background: #4a2420; color: #ff7b72; }
-.admin-empty { padding: 14px 12px; color: var(--text-faint); font-size: 13px; }
-.admin-sub { color: var(--text-dim); font-size: 13.5px; margin: -8px 0 4px; }
-.admin-item.toggle { cursor: pointer; }
-.admin-item.toggle input { width: 16px; height: 16px; accent-color: var(--accent); }
-.tg-label { font-size: 13.5px; color: var(--text); }
-.tg-desc { font-size: 12px; color: var(--text-faint); margin-top: 2px; }
-
-/* ---- modal ---- */
-.modal-back { position: fixed; inset: 0; background: rgba(0,0,0,.5); display: flex; align-items: center; justify-content: center; z-index: 150; padding: 20px; }
-.modal { background: var(--bg-side); border: 1px solid var(--border); border-radius: 12px; padding: 24px; width: min(460px, 100%); box-shadow: 0 20px 60px rgba(0,0,0,.5); }
-.modal h3 { margin: 0 0 10px; font-size: 17px; }
-.modal p { margin: 0 0 16px; font-size: 13.5px; color: var(--text-dim); }
-.modal-url { font: 12px var(--mono, ui-monospace, Menlo, monospace); background: var(--bg); border: 1px solid var(--border); border-radius: 6px; padding: 9px 11px; color: var(--text-dim); word-break: break-all; margin-bottom: 16px; }
-.modal-actions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
-.modal-label { display: block; font-size: 12.5px; color: var(--text-dim); margin: 0 0 6px; }
-.modal-msg { margin: 0 0 16px; font-size: 13.5px; color: var(--text-dim); }
-.modal-input { width: 100%; box-sizing: border-box; padding: 9px 11px; border-radius: var(--r-ctl); border: 1px solid var(--border); background: var(--bg); color: var(--text); font: inherit; font-size: 14px; margin-bottom: 16px; outline: none; }
-.modal-input:focus-visible { border-color: var(--accent); outline: 2px solid var(--accent); outline-offset: 1px; }
-.danger-btn { border: none; cursor: pointer; font: inherit; font-size: 13px; padding: 7px 16px; border-radius: var(--r-ctl); background: #b3382e; color: #fff; }
+/* primary + secondary buttons */
+.pbtn { display: inline-flex; align-items: center; gap: 6px; flex: none; height: 32px; padding: 0 14px; border-radius: var(--r-ctl); border: none; background: var(--accent); color: #241704; font-size: 13px; font-weight: 600; cursor: pointer; white-space: nowrap; }
+.pbtn:hover { background: var(--accent-bright); }
+.pbtn .ico { width: 15px; height: 15px; }
+.danger-btn { display: inline-flex; align-items: center; height: 32px; padding: 0 14px; border-radius: var(--r-ctl); border: none; background: #b3382e; color: #fff; font-size: 13px; font-weight: 600; cursor: pointer; }
 .danger-btn:hover { background: #c94336; }
 
+/* ---- admin panels ---- */
+.admin { max-width: 760px; }
+.admin h1 { font-size: 21px; font-weight: 640; letter-spacing: -.02em; margin: 0 0 6px; color: #f4f6f9; }
+.admin h3 { font-size: 10.5px; text-transform: uppercase; letter-spacing: .07em; color: var(--text-ghost); font-weight: 600; margin: 30px 0 10px; }
+.admin-sub { color: var(--text-dim); font-size: 13.5px; margin: 0 0 6px; line-height: 1.55; }
+.admin-h { display: flex; align-items: center; justify-content: space-between; margin: 30px 0 10px; }
+.admin-h h3 { margin: 0; }
+.admin-row { display: flex; gap: 9px; margin-bottom: 8px; }
+.admin-row input { flex: 1; height: 34px; padding: 0 12px; border-radius: var(--r-ctl); border: 1px solid var(--border); background: var(--surface); color: var(--text); font: inherit; font-size: 13px; outline: none; }
+.admin-row input:focus { border-color: var(--accent); background: var(--hover); }
+.admin-list { border: 1px solid var(--border); border-radius: var(--r-card); overflow: hidden; background: var(--bg-side); }
+.admin-item { display: flex; align-items: center; gap: 11px; padding: 11px 14px; border-bottom: 1px solid var(--border); font-size: 13.5px; }
+.admin-item:last-child { border-bottom: none; }
+.admin-item:hover { background: rgba(255,255,255,.015); }
+.ai-main { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text); }
+.ai-main.mono { font: 12px var(--mono); color: var(--text-dim); cursor: pointer; }
+.ai-tag { font-size: 11.5px; color: var(--text-faint); flex: none; }
+.admin-item select { height: 28px; background: var(--surface); color: var(--text); border: 1px solid var(--border); border-radius: 6px; padding: 0 8px; font: inherit; font-size: 12.5px; cursor: pointer; }
+.admin-item select:hover { border-color: var(--border-2); }
+.ai-btn, .ai-del { flex: none; height: 27px; padding: 0 11px; border-radius: 6px; border: 1px solid var(--border); background: var(--surface); color: var(--text-dim); font: inherit; font-size: 12px; font-weight: 500; cursor: pointer; }
+.ai-btn:hover { background: var(--hover); color: var(--text); border-color: var(--border-2); }
+.ai-del { color: var(--del); border-color: transparent; background: transparent; }
+.ai-del:hover { background: rgba(242,109,109,.12); color: #ff8b8b; }
+.admin-empty { padding: 14px; color: var(--text-faint); font-size: 13px; }
+.admin-item.toggle { cursor: pointer; align-items: flex-start; }
+.admin-item.toggle .ai-main { white-space: normal; }
+.tg-label { font-size: 13.5px; font-weight: 550; color: var(--text); }
+.tg-desc { font-size: 12px; color: var(--text-faint); margin-top: 3px; line-height: 1.5; }
+.admin-item.toggle input { width: 16px; height: 16px; margin-top: 2px; accent-color: var(--accent); flex: none; }
+
+/* ---- history ---- */
+.history { max-width: 860px; }
+.hentry { padding: 11px 12px; border-bottom: 1px solid var(--border); }
+.hentry:hover { background: rgba(255,255,255,.015); }
+.hline { display: flex; gap: 10px; align-items: center; }
+.hkind { display: inline-flex; color: var(--add); }
+.hkind .ico { width: 13px; height: 13px; }
+.hentry.delete .hkind { color: var(--del); }
+.hpath { font-weight: 500; cursor: pointer; color: var(--text); font-size: 13px; }
+.hpath:hover { color: var(--accent-bright); }
+.htime { margin-left: auto; color: var(--text-faint); font-size: 12px; font-variant-numeric: tabular-nums; }
+.hmeta { display: flex; gap: 14px; margin-top: 4px; padding-left: 23px; font-size: 12px; color: var(--text-dim); }
+.hdev, .hsize { color: var(--text-faint); }
+.hsize { font-variant-numeric: tabular-nums; }
+.hact { margin-left: auto; }
+.hact a { color: var(--accent-bright); text-decoration: none; margin-left: 10px; }
+.hact a:hover { text-decoration: underline; }
+
+/* ---- command palette ---- */
+#palette-overlay { position: fixed; inset: 0; background: rgba(6,7,9,.62); backdrop-filter: blur(3px); display: flex; justify-content: center; align-items: flex-start; padding-top: 12vh; z-index: 100; }
+#palette { width: min(560px, 92vw); background: var(--bg-raise); border: 1px solid var(--border-2); border-radius: var(--r-over); box-shadow: 0 24px 70px -18px rgba(0,0,0,.8); overflow: hidden; }
+#palette-inputwrap { display: flex; align-items: center; gap: 11px; padding: 14px 16px; border-bottom: 1px solid var(--border); }
+#palette-inputwrap .ico { width: 17px; height: 17px; color: var(--text-faint); }
+#palette-input { flex: 1; width: 100%; border: none; background: transparent; color: var(--text); font: inherit; font-size: 15px; letter-spacing: -.01em; outline: none; padding: 0; }
+#palette-input::placeholder { color: var(--text-ghost); }
+#palette-results { list-style: none; margin: 0; padding: 8px; max-height: 46vh; overflow-y: auto; }
+#palette-results li { display: flex; align-items: center; gap: 11px; height: 38px; padding: 0 10px; border-radius: 9px; cursor: pointer; color: var(--text-dim); font-size: 13.5px; }
+#palette-results li.selected { background: var(--glow); }
+#palette-results li.selected .picon { color: var(--accent); }
+#palette-results li.selected .plabel { color: var(--accent-bright); }
+#palette-results li.selected .plabel b { color: var(--accent-bright); }
+#palette-results li .picon { width: 18px; flex: none; display: flex; justify-content: center; color: var(--text-faint); }
+#palette-results li .picon .ico { width: 15px; height: 15px; }
+#palette-results li .plabel { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--text); }
+#palette-results li .plabel b { color: var(--accent-bright); font-weight: 600; }
+#palette-results li .pkind { flex: none; font-size: 10.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--text-ghost); }
+#palette-results .pempty { color: var(--text-faint); cursor: default; justify-content: center; height: auto; padding: 14px; }
+#palette-hint { padding: 9px 16px; border-top: 1px solid var(--border); font-size: 11px; color: var(--text-ghost); }
+
+/* ---- modal ---- */
+.modal-back { position: fixed; inset: 0; background: rgba(6,7,9,.6); backdrop-filter: blur(3px); display: flex; align-items: center; justify-content: center; z-index: 150; padding: 20px; }
+.modal { background: var(--bg-raise); border: 1px solid var(--border-2); border-radius: var(--r-over); padding: 22px 24px; width: min(460px, 100%); box-shadow: 0 24px 70px -18px rgba(0,0,0,.8); }
+.modal h3 { margin: 0 0 10px; font-size: 16px; font-weight: 620; letter-spacing: -.01em; }
+.modal p { margin: 0 0 16px; font-size: 13.5px; color: var(--text-dim); line-height: 1.55; }
+.modal p b { color: var(--text); }
+.modal-url { font: 12px var(--mono); background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-ctl); padding: 9px 11px; color: var(--text-dim); word-break: break-all; margin-bottom: 16px; }
+.modal-actions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
+.modal-label { display: block; font-size: 12.5px; color: var(--text-dim); margin: 0 0 6px; }
+.modal-msg { margin: 0 0 16px; font-size: 13.5px; color: var(--text-dim); line-height: 1.55; }
+.modal-input { width: 100%; height: 36px; padding: 0 12px; border-radius: var(--r-ctl); border: 1px solid var(--border); background: var(--surface); color: var(--text); font: inherit; font-size: 14px; margin-bottom: 16px; outline: none; }
+.modal-input:focus { border-color: var(--accent); background: var(--hover); }
+
 /* ---- toast ---- */
-#toast { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%) translateY(20px); background: var(--bg-active); color: var(--text); border: 1px solid var(--border); border-radius: 8px; padding: 10px 18px; font-size: 13.5px; box-shadow: 0 8px 30px rgba(0,0,0,.5); opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; z-index: 200; }
+#toast { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%) translateY(20px); background: var(--bg-raise); color: var(--text); border: 1px solid var(--border-2); border-radius: 10px; padding: 11px 18px; font-size: 13.5px; box-shadow: 0 18px 44px -12px rgba(0,0,0,.7); opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; z-index: 200; }
 #toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
-#toast.err { border-color: #7a2e28; color: #ffb4ac; }
+#toast.err { border-color: rgba(242,109,109,.5); color: #ffb0aa; }
 
-/* ---- mobile backdrop ---- */
 #sb-backdrop { display: none; }
 
 /* ---- responsive ---- */
 @media (max-width: 760px) {
-  #sidebar { position: fixed; z-index: 60; top: 0; left: 0; height: 100%; transform: translateX(-100%); transition: transform .2s ease; box-shadow: 0 0 40px rgba(0,0,0,.5); }
+  #sidebar { position: fixed; z-index: 60; top: 0; left: 0; height: 100%; transform: translateX(-100%); transition: transform .2s ease; box-shadow: 0 0 40px rgba(0,0,0,.6); }
   body.sb-open #sidebar { transform: translateX(0); }
-  body.sb-open #sb-backdrop { display: block; position: fixed; inset: 0; background: rgba(0,0,0,.5); z-index: 50; }
-  .icon-btn { display: inline-flex; }
-  #content { padding: 20px 18px 60px; }
-  #topbar { padding: 6px 10px; gap: 4px; }
-  #crumb { font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-  #search-btn kbd { display: none; }
-  /* Every header control is a 44×44 hit area (WCAG target size). Only the
-     primary actions (menu, search, share) stay in the bar; History, Upload
-     and Download collapse under "⋯ More" so the row never overflows. */
-  #topbar .btn, #topbar .icon-btn {
-    min-width: 44px; min-height: 44px; padding: 0;
-    display: inline-flex; align-items: center; justify-content: center;
-    font-size: 0; gap: 0;
-  }
-  #menu-btn { font-size: 20px; }
-  #search-btn::before { content: "🔍"; font-size: 16px; }
-  #share-btn::before { content: "↗"; font-size: 17px; }
-  #more-btn:not([hidden]) { display: inline-flex; font-size: 20px; }
+  body.sb-open #sb-backdrop { display: block; position: fixed; inset: 0; background: rgba(0,0,0,.55); z-index: 50; }
+  .icon-btn { display: inline-flex; width: 44px; height: 44px; }
+  #content { padding: 24px 18px 70px; }
+  #topbar { padding: 0 8px; gap: 4px; }
+  #search-btn kbd, .btn .lbl { display: none; }
+  #topbar .btn { min-width: 44px; min-height: 44px; padding: 0; justify-content: center; gap: 0; }
+  #topbar .btn .ico { width: 18px; height: 18px; }
+  #more-btn:not([hidden]) { display: inline-flex; }
   #history-btn, #upload-btn, #download { display: none !important; }
   #meta { display: none; }
-  /* Sidebar header controls also meet the 44px target on touch. */
-  .icon-btn2, #signout, .adminbar { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
-  #vault { padding: 8px 12px; }
-  /* The list rows are the primary tap targets — size them to 44px too. */
-  #tree li > .row, #projects .row { min-height: 44px; }
-  #invite-btn { min-height: 44px; padding: 0 16px; }
-  #org-name { min-height: 44px; display: inline-flex; align-items: center; }
+  #vault { padding: 0 8px 0 12px; }
+  .icon-btn2, #signout, .adminbar { min-width: 44px; min-height: 44px; }
+  #tree li > .row, #projects .row { height: 44px; }
+  #invite-btn { min-height: 40px; padding: 0 14px; }
+  #org-name { min-height: 44px; }
   .nav-add { min-width: 44px; min-height: 44px; }
-  .dir-history { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
   .markdown, .admin, .onboard, .history { max-width: 100%; }
   .markdown table, pre.plain { display: block; overflow-x: auto; max-width: 100%; }
   .ob-row { flex-direction: column; }
 }
 
-/* ---- "More" overflow menu (mobile) ---- */
-#more-btn.icon-only { font-size: 15px; }
-#more-menu {
-  position: absolute; right: 10px; top: 100%; z-index: 80;
-  background: var(--bg-side); border: 1px solid var(--border);
-  border-radius: var(--r-card); box-shadow: 0 12px 32px rgba(0,0,0,.5);
-  padding: 6px; min-width: 160px;
-}
-#more-menu[hidden] { display: none; }
-.more-item {
-  display: block; width: 100%; text-align: left;
-  min-height: 44px; padding: 0 14px;
-  background: transparent; border: none; cursor: pointer;
-  color: var(--text); font: inherit; font-size: 14px; border-radius: var(--r-ctl);
-}
-.more-item:hover { background: var(--bg-hover); }
-
-/* ---- markdown ---- */
-.markdown { max-width: 820px; }
-.markdown h1, .markdown h2, .markdown h3, .markdown h4 {
-  color: #f0f0f0;
-  line-height: 1.3;
-  margin: 1.4em 0 .5em;
-}
+/* ---- markdown reading view ---- */
+.markdown { max-width: 704px; margin: 0 auto; }
+.markdown h1, .markdown h2, .markdown h3, .markdown h4 { color: #f4f6f9; line-height: 1.25; letter-spacing: -.018em; margin: 1.5em 0 .5em; text-wrap: balance; }
 .markdown h1:first-child { margin-top: 0; }
-.markdown h1 { font-size: 1.7em; }
-.markdown h2 { font-size: 1.35em; border-bottom: 1px solid var(--border); padding-bottom: .25em; }
-.markdown a { color: var(--accent); text-decoration: none; }
-.markdown a:hover { text-decoration: underline; }
-.markdown code {
-  background: var(--code-bg);
-  padding: .15em .4em;
-  border-radius: 4px;
-  font: 12.5px/1.5 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
-}
-.markdown pre {
-  background: var(--code-bg);
-  border: 1px solid var(--border);
-  border-radius: 8px;
-  padding: 14px 16px;
-  overflow-x: auto;
-}
-.markdown pre code { background: none; padding: 0; }
-.markdown blockquote {
-  margin: 1em 0;
-  padding: .1em 1em;
-  border-left: 3px solid var(--accent-dim);
-  color: var(--text-dim);
-}
-.markdown table { border-collapse: collapse; margin: 1em 0; }
-.markdown th, .markdown td { border: 1px solid var(--border); padding: 6px 12px; }
-.markdown th { background: var(--bg-side); }
-.markdown img { max-width: 100%; border-radius: 6px; }
-.markdown hr { border: none; border-top: 1px solid var(--border); margin: 2em 0; }
+.markdown h1 { font-size: 1.85em; font-weight: 660; letter-spacing: -.024em; }
+.markdown h2 { font-size: 1.32em; font-weight: 620; margin-top: 1.7em; }
+.markdown h3 { font-size: 1.08em; font-weight: 620; }
+.markdown p, .markdown li { color: #c6cbd3; font-size: 14.5px; line-height: 1.72; }
+.markdown p { margin: 0 0 1em; }
+.markdown strong { color: var(--text); font-weight: 620; }
+.markdown a { color: var(--accent-bright); text-decoration: none; border-bottom: 1px solid rgba(245,166,35,.28); }
+.markdown a:hover { border-bottom-color: var(--accent); }
+.markdown ul, .markdown ol { margin: 0 0 1em; padding-left: 1.4em; }
+.markdown li { margin-bottom: .4em; }
+.markdown li::marker { color: var(--text-ghost); }
+.markdown code { background: var(--hover); border: 1px solid var(--border); padding: .1em .4em; border-radius: 5px; font: 12.5px/1.5 var(--mono); color: #e4d9c4; }
+.markdown pre { background: var(--code-bg); border: 1px solid var(--border); border-radius: var(--r-card); padding: 14px 16px; overflow-x: auto; margin: 1.3em 0; }
+.markdown pre code { background: none; border: none; padding: 0; color: #c6cbd3; }
+.markdown blockquote { margin: 1.3em 0; padding: .3em 1em; border-left: 2px solid var(--accent); background: linear-gradient(90deg, var(--glow), transparent); border-radius: 0 8px 8px 0; color: #d8cdb6; }
+.markdown blockquote p { margin: .3em 0; color: #d8cdb6; }
+.markdown table { border-collapse: collapse; margin: 1.3em 0; font-size: 13.5px; }
+.markdown th, .markdown td { border-bottom: 1px solid var(--border); padding: 9px 13px; text-align: left; }
+.markdown th { color: var(--text-faint); font-size: 11px; text-transform: uppercase; letter-spacing: .05em; font-weight: 600; border-bottom-color: var(--border-2); }
+.markdown tr:hover td { background: rgba(255,255,255,.02); }
+.markdown img { max-width: 100%; border-radius: 8px; border: 1px solid var(--border); }
+.markdown hr { border: none; border-top: 1px solid var(--border); margin: 2.2em 0; }
 .markdown input[type="checkbox"] { accent-color: var(--accent); }
 
 /* plain file / binary views */
-pre.plain {
-  background: var(--code-bg);
-  border: 1px solid var(--border);
-  border-radius: 8px;
-  padding: 14px 16px;
-  overflow-x: auto;
-  font: 12.5px/1.55 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
-  white-space: pre-wrap;
-}
-.filecard {
-  margin-top: 15vh;
-  text-align: center;
-  color: var(--text-dim);
-}
+pre.plain { background: var(--code-bg); border: 1px solid var(--border); border-radius: var(--r-card); padding: 14px 16px; overflow-x: auto; font: 12.5px/1.6 var(--mono); color: #c6cbd3; white-space: pre-wrap; overflow-wrap: anywhere; max-width: 900px; }
+#content.markdown { min-width: 0; } /* let long unbreakable lines wrap, not blow out the column */
+.filecard { margin-top: 15vh; text-align: center; color: var(--text-dim); }
 .filecard .name { font-size: 1.2em; color: var(--text); margin-bottom: .3em; }
+.filecard .btn { margin-top: 14px; }