From 5511652b079148cc623705c998bee7fe752dd6fb Mon Sep 17 00:00:00 2001
From: Conner512 <51692123+Conner512@users.noreply.github.com>
Date: Mon, 21 Sep 2026 14:20:51 +0800
Subject: [PATCH] ui: align console and OAuth screens with Layout A

Polish the shared desktop shell, four-column overview and 40/60 auth layout.
Add local SVG presentation helpers and functional theme preview cards while
preserving account-scoped preferences, read-only APIs, CSRF forms and CSP.
Keep metrics source-backed and add presentation regression tests.
---
 services/oauth/test/console-layout-a.test.mjs |  88 +++++++
 web/console/app.mjs                           |  14 +-
 web/console/appearance.mjs                    |  52 ++--
 web/console/catalog.mjs                       |  39 +++
 web/console/render.mjs                        |  29 ++-
 web/console/styles.css                        | 242 +++++++++++++++++-
 web/console/visuals.mjs                       |  54 ++++
 7 files changed, 484 insertions(+), 34 deletions(-)
 create mode 100644 services/oauth/test/console-layout-a.test.mjs
 create mode 100644 web/console/visuals.mjs

diff --git a/services/oauth/test/console-layout-a.test.mjs b/services/oauth/test/console-layout-a.test.mjs
new file mode 100644
index 0000000..ee6e7ac
--- /dev/null
+++ b/services/oauth/test/console-layout-a.test.mjs
@@ -0,0 +1,88 @@
+// Presentation regressions; these do not replace authentication or isolation suites.
+import test from 'node:test';
+import assert from 'node:assert/strict';
+import fs from 'node:fs';
+import {renderPage,sendPage,serveAsset,pages} from '../../../web/console/render.mjs';
+import {overviewView,appearanceView,icon} from '../../../web/console/visuals.mjs';
+import {text,catalog} from '../../../web/console/catalog.mjs';
+
+const view = (data={}) => overviewView(data,{t:text,memoryRows:()=>'<div class="synthetic-row"></div>'});
+const response = () => ({writeHead(status,headers){this.status=status;this.headers=headers;},end(body){this.body=body;}});
+
+test('Layout A: overview uses source-backed counts, not demo trends or connection claims',()=>{
+ const html=view({counts:{memories:42,sources:68,summaries:7,jobs:3}});
+ for(const value of [42,68,7,3])assert.ok(html.includes(`<strong>${value}</strong>`));
+ assert.equal((html.match(/class="card metric"/g)||[]).length,4);
+ assert.match(html,/class="processing-card|class="card processing-card/);
+ assert.match(html,/class="synthetic-row"/);
+ assert.doesNotMatch(html,/1,248|24\s*\/\s*24|已连接|已完成|<canvas|<progress/);
+});
+test('Layout A: unavailable and invalid metric data never becomes a zero or HTML',()=>{
+ const html=view({counts:{memories:-1,sources:'<img src=x onerror=alert(1)>',summaries:NaN,jobs:Infinity}});
+ assert.equal((html.match(/<strong>—<\/strong>/g)||[]).length,7);
+ assert.doesNotMatch(html,/<img|onerror|<strong>0<\/strong>/);
+ const zero=view({counts:{memories:0}});assert.ok(zero.includes('<strong>0</strong>'));
+});
+test('Layout A: appearance contains three theme previews and independent mode/language controls',()=>{
+ const html=appearanceView(text);
+ assert.equal((html.match(/class="theme-option"/g)||[]).length,3);
+ assert.equal((html.match(/class="mini-shell"/g)||[]).length,3);
+ assert.equal((html.match(/aria-pressed="false" disabled/g)||[]).length,7);
+ for(const value of ['a','b','c','light','dark','zh-CN','en'])assert.ok(html.includes(`data-pref-value="${value}"`));
+ assert.doesNotMatch(html,/<form|https?:\/\//);
+});
+test('Layout A: both locales cover new shell and settings strings without unsafe interpolation',()=>{
+ assert.deepEqual(Object.keys(catalog.en).sort(),Object.keys(catalog['zh-CN']).sort());
+ for(const locale of ['zh-CN','en']){
+  const t=key=>text(key,locale),html=appearanceView(t)+overviewView({}, {t,memoryRows:()=>''});
+  for(const [,key] of html.matchAll(/data-i18n="([^"]+)"/g))assert.ok(Object.hasOwn(catalog[locale],key),key);
+ }
+ assert.ok(appearanceView(()=>'<script>synthetic</script>').includes('&lt;script&gt;'));
+ assert.doesNotMatch(appearanceView(()=>'<script>synthetic</script>'),/<script>/);
+});
+test('Layout A: auth has one H1 and retains the exact trusted form and OAuth purpose',()=>{
+ const body='<form method="post" action="/interaction/synthetic-uid/login"><input name="csrf" value="synthetic-csrf"><input name="password" type="password"></form>';
+ const html=renderPage({title:'oauthLogin',body,auth:true,authPurpose:'oauth'});
+ assert.equal((html.match(/<h1\b/g)||[]).length,1);
+ assert.ok(html.includes(body));
+ assert.match(html,/<span class="brand">/);
+ assert.doesNotMatch(html,/href="\/login"|src="\/assets\/app.mjs"/);
+ assert.match(html,/class="auth-story"/);
+});
+test('Layout A: all existing routes keep identity escaping and the original logout CSRF form',()=>{
+ for(const page of pages){
+  const html=renderPage({title:page,page,csrf:'" onfocus="synthetic',account:{account_id:'synthetic-account',username:'<script>synthetic</script>'}});
+  assert.match(html,/action="\/console-api\/logout" method="post"/);
+  assert.match(html,/name="csrf" value="&quot; onfocus=&quot;synthetic"/);
+  assert.ok(html.includes('&lt;script&gt;synthetic&lt;/script&gt;'));
+  assert.doesNotMatch(html,/<script>synthetic/);
+  assert.equal((html.match(/aria-current="page"/g)||[]).length,1);
+ }
+});
+test('Layout A: assets remain on a fixed same-origin allowlist',()=>{
+ const res=response();assert.equal(serveAsset({method:'GET'},res,'/assets/visuals.mjs'),true);
+ assert.equal(res.status,200);assert.match(res.headers['content-type'],/text\/javascript/);
+ for(const route of ['/assets/../catalog.mjs','/assets/secret.json','/v1/memories','/assets/visuals.mjs/extra'])
+  assert.equal(serveAsset({method:'GET'},response(),route),false);
+ assert.equal(serveAsset({method:'POST'},response(),'/assets/visuals.mjs'),false);
+});
+test('Layout A: UI additions preserve CSP, no-store and anti-framing headers',()=>{
+ const res=response();sendPage(res,{title:'oauthConsent',auth:true,authPurpose:'oauth'},{redirectUri:'https://callback.example.test/exact'});
+ assert.equal(res.status,200);assert.equal(res.headers['cache-control'],'no-store');
+ assert.equal(res.headers['x-frame-options'],'DENY');assert.equal(res.headers['referrer-policy'],'same-origin');
+ assert.equal(res.headers['content-security-policy'],"default-src 'none'; style-src 'self'; script-src 'self'; connect-src 'self'; img-src 'self'; form-action 'self' https://callback.example.test/exact; frame-ancestors 'none'; base-uri 'none'");
+});
+test('Layout A: desktop metric layout no longer collapses at 1280px',()=>{
+ const css=fs.readFileSync(new URL('../../../web/console/styles.css',import.meta.url),'utf8');
+ assert.match(css,/\.metrics\{display:grid;grid-template-columns:repeat\(4,minmax\(0,1fr\)\)/);
+ const start=css.indexOf('@media(max-width:1280px)');
+ const block=start===-1?'':css.slice(start,css.indexOf('@media',start+1)===-1?css.length:css.indexOf('@media',start+1));
+ assert.doesNotMatch(block,/\.metrics[^}]*grid-template-columns/);
+ assert.match(css,/\.auth-brand\{[^}]*background:var\(--surface\)/);
+ assert.match(css,/\.auth-form\{[^}]*background:var\(--bg\)/);
+});
+test('Layout A: decorative SVG cannot incorporate caller-supplied markup',()=>{
+ const svg=icon('<script>synthetic</script>');
+ assert.doesNotMatch(svg,/<script|<image|https?:\/\//);
+ assert.match(svg,/aria-hidden="true"/);
+});
diff --git a/web/console/app.mjs b/web/console/app.mjs
index b286b73..befba6f 100644
--- a/web/console/app.mjs
+++ b/web/console/app.mjs
@@ -1,4 +1,5 @@
-import {translate as t} from './appearance.mjs';
+import {translate as t, syncAppearance} from './appearance.mjs';
+import {icon, overviewView, appearanceView} from './visuals.mjs';
 import {SessionState} from './session-state.mjs';
 const root=document.getElementById('console-root'),dialog=document.getElementById('memory-dialog'),detail=document.getElementById('memory-content');
 const state=new SessionState(document.body.dataset.account);
@@ -18,13 +19,13 @@ async function api(view,params={}) {
    if(!response.ok)throw new Error(data.error_code||'UNAVAILABLE');return data;
  } finally {state.finish(ticket);}
 }
-const empty=()=>`<div class="empty">${l('empty')}</div>`;
-function memoryRows(rows=[]) {return rows.length?rows.map(m=>`<div class="memory-row"><span class="glyph" aria-hidden="true">▤</span><button type="button" class="memory-link" data-memory="${esc(m.memory_id)}"><span>${esc([...String(m.content||m.summary||m.memory_id)].slice(0,160).join(''))}</span><small>${esc(m.memory_type||'')} · ${esc(date(m.created_at))}</small></button>${tag(m.status||'active')}<span aria-hidden="true">↗</span></div>`).join(''):empty();}
+const empty=()=>`<div class="empty"><span class="empty-icon">${icon('memories')}</span>${l('empty','p')}</div>`;
+function memoryRows(rows=[]) {return rows.length?rows.map(m=>`<div class="memory-row"><span class="glyph" aria-hidden="true">${icon('memories')}</span><button type="button" class="memory-link" data-memory="${esc(m.memory_id)}"><span>${esc([...String(m.content||m.summary||m.memory_id)].slice(0,160).join(''))}</span><small>${esc(m.memory_type||'')} · ${esc(date(m.created_at))}</small></button>${tag(m.status||'active')}<span aria-hidden="true">↗</span></div>`).join(''):empty();}
 function table(rows,columns){return rows?.length?`<table><thead><tr>${columns.map(([key,label])=>`<th data-i18n="${label||key}">${esc(t(label||key))}</th>`).join('')}</tr></thead><tbody>${rows.map(r=>`<tr>${columns.map(([key])=>`<td>${esc(r[key]??'—')}</td>`).join('')}</tr>`).join('')}</tbody></table>`:empty();}
 function policy(note='blockedNote',actions=[]) {return `<div class="policy-box"><span class="tag">${l('blocked')}</span>${l(note,'p')}<div class="actions">${actions.map(disabled).join('')}</div></div>`;}
 function render(data) {
- let html='';const heading=`<div class="page-heading"><div><p class="eyebrow" data-i18n="workspaceLabel">${esc(t('workspaceLabel'))}</p>${l(page==='overview'?'hero':page,'h1')}${l(page==='overview'?'heroNote':'noDemo','p')}</div><span class="tag">${l('readOnly')}</span></div>`;
- if(page==='overview')html=`<section class="hero"><div><p class="eyebrow" data-i18n="heroLabel">${esc(t('heroLabel'))}</p><h2>Mnemuron · ${l('workspace')}</h2>${l('consentNote','p')}<a href="/app/connections">${l('connections')} →</a></div><div class="orb" aria-hidden="true">M</div></section><div class="metrics">${[['memories','memoryCount'],['sources','sourceCount'],['summaries','summaryCount'],['jobs','jobCount']].map(([key,label])=>`<div class="card metric">${tag('↗')}${l(label)}<strong>${Number.isInteger(data.counts?.[key])?data.counts[key]:'—'}</strong>${l('workspace','small')}</div>`).join('')}</div><div class="columns"><section class="card"><div class="card-heading">${l('recent','h2')}<a href="/app/memories">${l('viewAll')} →</a></div>${memoryRows(data.recent)}</section><section class="card">${l('policy','h2')}${policy('consentNote')}${l('pendingPolicies','p')}<div class="actions">${disabled('newMemory')}${disabled('organize')}${disabled('export')}</div></section></div>`;
+ let html='';const heading=`<div class="page-heading"><div><p class="eyebrow" data-i18n="workspaceLabel">${esc(t('workspaceLabel'))}</p>${l(page==='overview'?'hero':page,'h1')}${l(page==='overview'?'heroNote':`pageNote_${page}`,'p')}</div>${page==='overview'?`<a class="button browse-link" href="/app/memories">${icon('search')}${l('browseMemories')}</a>`:`<span class="tag">${l('readOnly')}</span>`}</div>`;
+ if(page==='overview')html=overviewView(data,{t,memoryRows});
  else if(page==='memories')html=`<section class="card"><form class="toolbar" id="search-form"><label>${l('query')}<input name="query" value="${esc(query)}" maxlength="2000" autocomplete="off"></label><button class="primary" type="submit" data-i18n="search">${esc(t('search'))}</button>${disabled('newMemory')}</form><div id="memory-rows">${memoryRows(data.results)}</div><div class="pagination">${offset?`<button type="button" data-offset="${Math.max(0,offset-25)}">${l('previous')}</button>`:''}${data.next_offset!==null&&data.next_offset!==undefined?`<button type="button" data-offset="${data.next_offset}">${l('next')}</button>`:''}</div></section>`;
  else if(page==='summaries')html=`<div class="columns"><section class="card">${l('summaries','h2')}${data.summaries?.length?data.summaries.map(s=>`<div class="memory-row"><button type="button" class="memory-link" data-summary="${esc(s.summary_id)}" data-revision="${s.revision}"><strong>${esc(s.category)}</strong><small>${esc(s.summary_id)}</small><small>${l('revisions')} ${s.revision} · ${l('sourceCount')} ${s.coverage}</small></button>${tag(s.status)}</div>`).join(''):empty()}</section><section class="card">${table(data.categories,[['category','scope'],['count','memoryCount']])}${policy('blockedNote',['organize'])}</section></div>`;
  else if(page==='jobs')html=`<section class="card">${table(data.jobs,[['job_id','identity'],['job_type','scope'],['state','state'],['processed','complete'],['total','sourceCount'],['last_error_code','error']])}${policy('blockedNote',['organize'])}</section>`;
@@ -32,9 +33,10 @@ function render(data) {
  else if(page==='security')html=`<div class="columns"><section class="card"><h2>${esc(data.username)}</h2><span class="tag">${l(data.mfa_verified?'passwordTotp':'pending')}</span>${l('securityNote','p')}<a href="/recover">${l('recover')} →</a></section><section class="card">${table(data.sessions?.map(s=>({...s,created:date(s.created),expires:date(s.expires)})),[['purpose','scope'],['created','created'],['expires','state']])}</section></div>`;
  else if(page==='audit')html=`<section class="card">${table([...data.entries||[],...(data.core_entries||[]).map(e=>({...e,created:e.created_at}))].map(e=>({...e,created:date(e.created)})),[['action','scope'],['outcome','state'],['created','created']])}</section>`;
  else if(page==='storage')html=`<section class="card">${l('storageNote','p')}${table(Object.entries(data.counts||{}).map(([kind,count])=>({kind,count})),[['kind','scope'],['count','memoryCount']])}${policy('storageNote',['export','restore'])}</section>`;
- else if(page==='appearance')html=`<section class="card">${l('appearanceNote','p')}<p>Neural Indigo · Signal Teal · Paper Amber</p>${l('theme','h2')}${l('appearanceNote','p')}<p>${l('mode')}: <span data-current-mode data-i18n="${document.documentElement.dataset.mode}">${esc(t(document.documentElement.dataset.mode))}</span></p></section>`;
+ else if(page==='appearance')html=appearanceView(t);
  else if(['models','invitations','accounts'].includes(page))html=`<section class="card">${policy(page==='models'?'modelsNote':'platformNote',[page==='models'?'configure':page==='invitations'?'issue':'manage'])}</section>`;
  root.innerHTML=heading+html;
+ syncAppearance();
 }
 async function load() {
  const sequence=++requestSequence;
diff --git a/web/console/appearance.mjs b/web/console/appearance.mjs
index 82721ee..b596b0d 100644
--- a/web/console/appearance.mjs
+++ b/web/console/appearance.mjs
@@ -6,26 +6,48 @@ const key=`mnemuron.appearance.v1.${account}`;
 let prefs={...defaults};
 try {const saved=JSON.parse(localStorage.getItem(key)||'{}');for(const k of Object.keys(valid))if(valid[k].includes(saved[k]))prefs[k]=saved[k];}catch{}
 export const translate=key=>text(key,prefs.locale);
-function apply() {
+
+// Translate chrome in place: never replace a form, a drawer or user-supplied content.
+export function syncAppearance() {
   document.documentElement.dataset.theme=prefs.theme;document.documentElement.dataset.mode=prefs.mode;document.documentElement.lang=prefs.locale;
   for(const node of document.querySelectorAll('[data-i18n]'))node.textContent=translate(node.dataset.i18n);
   for(const node of document.querySelectorAll('[data-i18n-placeholder]'))node.placeholder=translate(node.dataset.i18nPlaceholder);
-  for(const node of document.querySelectorAll('[data-pref]')){node.value=prefs[node.dataset.pref];node.disabled=false;}
+  for(const node of document.querySelectorAll('[data-i18n-aria-label]'))node.setAttribute('aria-label',translate(node.dataset.i18nAriaLabel));
+  for(const node of document.querySelectorAll('[data-i18n-title]'))node.title=translate(node.dataset.i18nTitle);
+  for(const node of document.querySelectorAll('[data-pref]')) {
+    if(node.dataset.prefValue!==undefined)node.setAttribute('aria-pressed',String(node.dataset.prefValue===prefs[node.dataset.pref]));
+    else node.value=prefs[node.dataset.pref];
+    node.disabled=false;
+  }
+  if(document.body.dataset.title)document.title=`Mnemuron · ${translate(document.body.dataset.title)}`;
 }
-apply();
+function setPreference(property,value) {
+  if(!valid[property]?.includes(value))return;
+  prefs={...prefs,[property]:value};
+  try{localStorage.setItem(key,JSON.stringify(prefs));}catch{}
+  syncAppearance();document.dispatchEvent(new CustomEvent('appearancechange',{detail:{...prefs}}));
+}
+syncAppearance();
 document.addEventListener('change',event=>{
- const property=event.target.dataset.pref;if(!valid[property]?.includes(event.target.value))return;
- prefs={...prefs,[property]:event.target.value};
- try{localStorage.setItem(key,JSON.stringify(prefs));}catch{}
- apply();document.dispatchEvent(new CustomEvent('appearancechange',{detail:{...prefs}}));
+  const property=event.target.dataset.pref;
+  if(event.target.dataset.prefValue===undefined)setPreference(property,event.target.value);
 });
 document.addEventListener('click',async event=>{
- const button=event.target.closest('[data-password-toggle],[data-copy]');if(!button)return;
- if(button.dataset.passwordToggle) {
-   const field=document.getElementById(button.dataset.passwordToggle);if(!field)return;
-   field.type=field.type==='password'?'text':'password';button.dataset.i18n=field.type==='password'?'showPassword':'hidePassword';button.textContent=translate(button.dataset.i18n);
- } else {
-   const node=document.getElementById(button.dataset.copy);if(!node)return;
-   try{await navigator.clipboard.writeText(node.textContent);document.getElementById('live-status').textContent=translate('copied');}catch{}
- }
+  const choice=event.target.closest('button[data-pref-value]');
+  if(choice&&!choice.disabled){setPreference(choice.dataset.pref,choice.dataset.prefValue);return;}
+  const button=event.target.closest('[data-password-toggle],[data-copy]');if(!button)return;
+  if(button.dataset.passwordToggle) {
+    const field=document.getElementById(button.dataset.passwordToggle);if(!field)return;
+    field.type=field.type==='password'?'text':'password';button.dataset.i18n=field.type==='password'?'showPassword':'hidePassword';button.textContent=translate(button.dataset.i18n);
+  } else {
+    const node=document.getElementById(button.dataset.copy);if(!node)return;
+    try{await navigator.clipboard.writeText(node.textContent);document.getElementById('live-status').textContent=translate('copied');}catch{}
+  }
+});
+// Account menu is local UI only; Escape closes it and restores keyboard focus.
+document.addEventListener('keydown',event=>{
+  if(event.key==='Escape')for(const menu of document.querySelectorAll('.account-menu[open]')){menu.open=false;menu.querySelector('summary')?.focus();}
+});
+document.addEventListener('click',event=>{
+  for(const menu of document.querySelectorAll('.account-menu[open]'))if(!menu.contains(event.target))menu.open=false;
 });
diff --git a/web/console/catalog.mjs b/web/console/catalog.mjs
index 2acf831..0eaeffd 100644
--- a/web/console/catalog.mjs
+++ b/web/console/catalog.mjs
@@ -30,4 +30,43 @@ export const catalog={
   passwordConfirm:'Confirm password',alreadyShown:'The secret was already displayed. It is not shown again; use your saved authenticator or recovery codes.',oauthClient:'Application requesting access',scopeIdentity:'Identify your Mnemuron account',scopeOffline:'Keep this connection with revocable, rotating refresh tokens',scopeMemory:'Read memories you authorize',scopeProject:'Read project context you authorize',systemLabel:'PERSONAL MEMORY SYSTEM',workspaceLabel:'PERSONAL WORKSPACE',heroLabel:'YOUR MEMORY, CONNECTED',passwordTotp:'Password and authenticator code',back:'Return to the safe entry point',expired:'This step expired. Start again from the safe entry point.',loginFailed:'The sign-in details or account are unavailable. Check your credentials and try again.',rateLimited:'Too many attempts. Please try again later.',pendingStep:'This step is unavailable. Check your current registration status.',
  }
 };
+
+// Presentation copy is separate from backend status codes and never translates memory content.
+Object.assign(catalog['zh-CN'], {
+  connectionHeadline:'ChatGPT，接上你的个人记忆。', connectionDescription:'从已授权的记忆中找回上下文。来源、版本与访问范围，始终清晰可查。',
+  manageConnections:'管理我的连接', browseMemories:'浏览记忆', ownedRecords:'仅当前账户', recentLabel:'近期记忆', processingLabel:'整理概况',
+  memoryProcessing:'记忆整理', atomicNote:'保留原文与版本', derivedNote:'来源关联的派生视图', jobStatusNote:'进入任务页查看执行状态',
+  summaryBoundary:'摘要是派生视图，不覆盖原文。遗漏与待核实信息保留在来源中。', viewJobs:'查看整理任务', inspectMemoryNote:'点开任意记忆，查看正文、来源与修订历史。',
+  personalizeLabel:'个性化工作空间', fixedLayout:'A · 统一布局', themeName_a:'神经靛蓝', themeName_b:'信号青绿', themeName_c:'纸感琥珀',
+  themeNote_a:'柔和靛蓝，清晰专注', themeNote_b:'自然青绿，沉稳明快', themeNote_c:'温暖琥珀，舒适阅读',
+  modeNote:'选择适合当前环境的明暗模式。', languageNote:'仅切换界面语言，记忆正文保持原样。',
+  appearanceScopeNote:'外观偏好独立保存于当前账户。切换不会改变数据、访问权限或正在填写的内容。',
+  authHeadlineFirst:'记住重要的。', authHeadlineSecond:'只属于你的。', authDescription:'用一个独立空间连接你的记忆，让每次对话从理解开始。',
+  authEyebrow:'连接到你的记忆空间', accountMenu:'当前账户与退出', authFooter:'Mnemuron · 个人记忆，持续上下文',
+  pageNote_memories:'搜索、查看并追溯属于你的每一条记忆。', pageNote_summaries:'分类整理与来源关联的摘要，始终与原始记忆分开。',
+  pageNote_jobs:'查看整理任务的进度、结果与需要处理的问题。', pageNote_connections:'在同一处查看你的应用授权和 Agent 连接。',
+  pageNote_models:'查看模型配置边界与外发政策。密钥不会在页面回显。', pageNote_security:'管理你的身份、验证器与账户访问。',
+  pageNote_audit:'仅查看当前账户的访问与安全事件。', pageNote_storage:'了解个人记录与存储边界。个人数据不等于整库备份。',
+  pageNote_appearance:'一种布局，多种心境。让你的记忆空间更适合你。', pageNote_invitations:'查看注册准入规则。签发能力由明确的运维权限控制。',
+  pageNote_accounts:'账户管理与个人记忆读取相互独立。',
+});
+Object.assign(catalog.en, {
+  connectionHeadline:'Connect ChatGPT to your personal memory.', connectionDescription:'Find context in memories you authorize. Keep every source, revision and access boundary in view.',
+  manageConnections:'Manage my connections', browseMemories:'Browse memories', ownedRecords:'This account only', recentLabel:'RECENT MEMORIES', processingLabel:'PROCESSING',
+  memoryProcessing:'Memory organization', atomicNote:'Originals and revisions retained', derivedNote:'Source-linked derived views', jobStatusNote:'Open jobs for execution status',
+  summaryBoundary:'Summaries are derived views, not replacements for originals. Check sources for omissions and uncertainty.', viewJobs:'View organizer jobs', inspectMemoryNote:'Open a memory to inspect its content, provenance and revision history.',
+  personalizeLabel:'PERSONALIZE YOUR WORKSPACE', fixedLayout:'A · Unified layout', themeName_a:'Neural Indigo', themeName_b:'Signal Teal', themeName_c:'Paper Amber',
+  themeNote_a:'Soft indigo. Clear focus.', themeNote_b:'Natural teal. Quiet clarity.', themeNote_c:'Warm amber. Thoughtful reading.',
+  modeNote:'Choose the appearance that suits your environment.', languageNote:'Translate the interface, never your original memories.',
+  appearanceScopeNote:'Appearance preferences belong to this account. Switching never changes data, access permissions or your current form.',
+  authHeadlineFirst:'Remember what matters.', authHeadlineSecond:'Keep it yours.', authDescription:'An independent space for your memories. Start every conversation with context.',
+  authEyebrow:'CONNECT TO YOUR MEMORY', accountMenu:'Current account and sign out', authFooter:'Mnemuron · Personal memory, continuous context',
+  pageNote_memories:'Search, inspect and trace every memory in your own space.', pageNote_summaries:'Source-linked categories and summaries, kept separate from original memories.',
+  pageNote_jobs:'Inspect organizer progress, results and items that need attention.', pageNote_connections:'Review your application grants and Agent connections in one place.',
+  pageNote_models:'Review model boundaries and egress policy. Secret keys are never displayed.', pageNote_security:'Your identity, authenticator and account access.',
+  pageNote_audit:'Access and security events for the current account only.', pageNote_storage:'Understand your record totals. Personal data is not a whole-database backup.',
+  pageNote_appearance:'One layout, a different mood. Make this memory space yours.', pageNote_invitations:'Review registration rules. Issuance requires explicit operator permission.',
+  pageNote_accounts:'Account administration does not grant access to personal memories.',
+});
+
 export const text=(key,locale='zh-CN')=>catalog[locale]?.[key]??catalog.en[key]??key;
diff --git a/web/console/render.mjs b/web/console/render.mjs
index 933d189..12befb1 100644
--- a/web/console/render.mjs
+++ b/web/console/render.mjs
@@ -1,20 +1,33 @@
 import fs from 'node:fs';
 import {text} from './catalog.mjs';
+import {icon,orbit} from './visuals.mjs';
 export const escapeHtml=value=>String(value).replace(/[&<>"']/g,c=>({'&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;',"'":'&#39;'}[c]));
 export const pages=['overview','memories','summaries','jobs','connections','models','security','audit','storage','appearance','invitations','accounts'];
 export const routeTitle=route=>route==='/app' || route==='/app/'?'overview':pages.find(p=>route===`/app/${p}`)??null;
-export const label=(key,tag='span')=>`<${tag} data-i18n="${key}">${text(key)}</${tag}>`;
-export const appearanceControls=()=>`<div class="appearance-controls"><label class="sr-only" for="theme" data-i18n="theme">${text('theme')}</label><select id="theme" data-pref="theme" disabled><option value="a">Neural Indigo</option><option value="b">Signal Teal</option><option value="c">Paper Amber</option></select><label class="sr-only" for="mode" data-i18n="mode">${text('mode')}</label><select id="mode" data-pref="mode" disabled><option value="light" data-i18n="light">${text('light')}</option><option value="dark" data-i18n="dark">${text('dark')}</option></select><label class="sr-only" for="locale" data-i18n="language">${text('language')}</label><select id="locale" data-pref="locale" disabled><option value="zh-CN">中文</option><option value="en">English</option></select></div>`;
+export const label=(key,tag='span')=>`<${tag} data-i18n="${key}">${escapeHtml(text(key))}</${tag}>`;
+
+// Native controls remain usable with a keyboard. Disabled until the local handler is ready.
+export const appearanceControls=()=>`<div class="appearance-controls">
+  <div class="preference-select"><label class="sr-only" for="theme" data-i18n="theme">${text('theme')}</label><select id="theme" data-pref="theme" disabled><option value="a" data-i18n="themeName_a">${text('themeName_a')}</option><option value="b" data-i18n="themeName_b">${text('themeName_b')}</option><option value="c" data-i18n="themeName_c">${text('themeName_c')}</option></select></div>
+  <div class="preference-select mode-select">${icon('appearance')}<label class="sr-only" for="mode" data-i18n="mode">${text('mode')}</label><select id="mode" data-pref="mode" disabled><option value="light" data-i18n="light">${text('light')}</option><option value="dark" data-i18n="dark">${text('dark')}</option></select></div>
+  <div class="preference-select"><label class="sr-only" for="locale" data-i18n="language">${text('language')}</label><select id="locale" data-pref="locale" disabled><option value="zh-CN">中文</option><option value="en">English</option></select></div>
+</div>`;
+
 export function renderPage({title,body='',auth=false,authPurpose='console',account=null,csrf='',page='overview'}) {
-  const brandContent='<span class="brand-icon" aria-hidden="true">M</span>Mnemuron';
+  const brandContent=`<span class="brand-icon" aria-hidden="true">${icon('brand')}</span><span>Mnemuron</span>`;
+  // An OAuth interaction is not an ordinary console sign-in. Do not add bypass/navigation links.
   const brand=auth&&authPurpose==='oauth'?`<span class="brand">${brandContent}</span>`:`<a class="brand" href="${auth?'/login':'/app'}">${brandContent}</a>`;
-  const nav=pages.map((p,i)=>`${i===0?label('workspace','h2'):i===4?label('settings','h2'):i===10?label('platform','h2'):''}<a href="/app/${p}" ${p===page?'aria-current="page"':''}><span class="nav-icon" aria-hidden="true">${['◫','▤','◇','◷','↗','⚙','◈','≡','▱','◐','⌁','♙'][i]}</span>${label(p)}</a>`).join('');
-  const inside=auth?`<main id="main" tabindex="-1" class="auth-layout"><section class="auth-brand">${brand}<div><p class="eyebrow" data-i18n="systemLabel">${text('systemLabel')}</p>${label('hero','h1')}${label('heroNote','p')}<div class="auth-orbit" aria-hidden="true"><span>M</span></div></div>${label('brandNote','p')}</section><section class="auth-form"><header>${appearanceControls()}</header><div class="form-content">${label(title,'h1')}${body}</div></section></main>`:
-    `<aside class="sidebar">${brand}<p class="eyebrow" data-i18n="systemLabel">${text('systemLabel')}</p><div class="account-badge"><span class="avatar" aria-hidden="true">${escapeHtml(account?.username?.slice(0,1)||'·')}</span><div><strong>${escapeHtml(account?.username||'')}</strong>${label('workspace','small')}</div></div><nav aria-label="Mnemuron">${nav}</nav><p class="handoff">${label('handoff')}</p></aside><div class="workspace"><header class="topbar"><div>${label('workspace')} <span aria-hidden="true"> / </span> ${label(title)}</div>${appearanceControls()}<form action="/console-api/logout" method="post"><input type="hidden" name="csrf" value="${escapeHtml(csrf)}"><button type="submit" class="quiet" data-i18n="signOut">${text('signOut')}</button></form></header><main id="main" tabindex="-1"><div id="console-root">${body||`<div class="page-heading">${label(title,'h1')}${label('loading','p')}</div>`}</div></main><footer>${label('readOnly')} <span>·</span> ${label('notProduction')}</footer></div><dialog id="memory-dialog" aria-labelledby="detail-title"><div class="dialog-header">${label('detail','h2').replace('<h2','<h2 id="detail-title"')}<button type="button" data-close data-i18n="close">${text('close')}</button></div><div id="memory-content"></div></dialog>`;
-  return `<!doctype html><html lang="zh-CN" data-theme="a" data-mode="light"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><meta name="color-scheme" content="light dark"><title>Mnemuron · ${text(title)}</title><link rel="stylesheet" href="/assets/styles.css"><script type="module" src="/assets/appearance.mjs"></script>${auth?'':'<script type="module" src="/assets/app.mjs"></script>'}</head><body data-account="${escapeHtml(account?.account_id||'')}" data-page="${escapeHtml(page)}" data-csrf="${escapeHtml(csrf)}"><a class="skip-link" href="#main" data-i18n="continue">${text('continue')}</a>${inside}<p id="live-status" class="sr-only" role="status" aria-live="polite"></p></body></html>`;
+  const nav=pages.map((p,i)=>`${i===0?label('workspace','h2'):i===4?label('settings','h2'):i===10?label('platform','h2'):''}<a href="/app/${p}" ${p===page?'aria-current="page"':''}><span class="nav-icon">${icon(p)}</span>${label(p)}${p===page?'<span class="nav-current" aria-hidden="true"></span>':''}</a>`).join('');
+  const username=escapeHtml(account?.username||'');
+  const inside=auth?`<main id="main" tabindex="-1" class="auth-layout"><section class="auth-brand"><div>${brand}<p class="eyebrow" data-i18n="systemLabel">${text('systemLabel')}</p></div><div class="auth-story"><h2>${label('authHeadlineFirst')}${label('authHeadlineSecond')}</h2>${label('authDescription','p')}${orbit()}</div><div class="auth-brand-bottom"><div class="privacy-note">${icon('security')}${label('authNote','p')}</div>${label('authFooter','small')}</div></section><section class="auth-form"><header>${appearanceControls()}</header><div class="form-content"><p class="eyebrow">${label('authEyebrow')}</p>${label(title,'h1')}${body}</div><div class="auth-footer">${label('brandNote','small')}</div></section></main>`:
+    `<aside class="sidebar">${brand}<p class="eyebrow" data-i18n="systemLabel">${text('systemLabel')}</p><div class="account-badge"><span class="avatar" aria-hidden="true">${escapeHtml(account?.username?.slice(0,1)||'·')}</span><div><strong>${username}</strong>${label('workspace','small')}</div>${icon('security')}</div><nav aria-label="Mnemuron">${nav}</nav><p class="handoff">${icon('security')}${label('handoff')}</p></aside>
+    <div class="workspace"><header class="topbar"><div class="breadcrumb">${label('workspace')} <span aria-hidden="true">/</span> <strong>${label(title)}</strong></div><div class="topbar-tools"><a class="top-search" href="/app/memories">${icon('search')}${label('search')}</a>${appearanceControls()}<details class="account-menu"><summary data-i18n-title="accountMenu" title="${text('accountMenu')}"><span class="account-name">${username}</span><span aria-hidden="true">⌄</span></summary><div class="account-menu-panel">${label('identity','small')}<strong>${username}</strong><form action="/console-api/logout" method="post"><input type="hidden" name="csrf" value="${escapeHtml(csrf)}"><button type="submit" class="quiet">${icon('logout')}${label('signOut')}</button></form></div></details></div></header>
+    <main id="main" tabindex="-1"><div id="console-root">${body||`<div class="page-heading"><div>${label(title,'h1')}${label('loading','p')}</div></div><div class="card loading-card" role="status">${label('loading')}</div>`}</div></main><footer><span class="footer-mark">Mnemuron</span><span aria-hidden="true">·</span>${label('readOnly')}<span aria-hidden="true">·</span>${label('notProduction')}</footer></div>
+    <dialog id="memory-dialog" aria-labelledby="detail-title"><div class="dialog-header">${label('detail','h2').replace('<h2','<h2 id="detail-title"')}<button type="button" class="close-button" data-close data-i18n-aria-label="close" aria-label="${text('close')}">${icon('close')}</button></div><div id="memory-content"></div></dialog>`;
+  return `<!doctype html><html lang="zh-CN" data-theme="a" data-mode="light"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><meta name="color-scheme" content="light dark"><title>Mnemuron · ${escapeHtml(text(title))}</title><link rel="stylesheet" href="/assets/styles.css"><script type="module" src="/assets/appearance.mjs"></script>${auth?'':'<script type="module" src="/assets/app.mjs"></script>'}</head><body data-account="${escapeHtml(account?.account_id||'')}" data-page="${escapeHtml(page)}" data-title="${escapeHtml(title)}" data-csrf="${escapeHtml(csrf)}"><a class="skip-link" href="#main" data-i18n="continue">${text('continue')}</a>${inside}<p id="live-status" class="sr-only" role="status" aria-live="polite"></p></body></html>`;
 }
 export function serveAsset(request,response,pathname) {
-  const file=pathname.match(/^\/assets\/(styles\.css|appearance\.mjs|catalog\.mjs|app\.mjs|session-state\.mjs)$/)?.[1];
+  const file=pathname.match(/^\/assets\/(styles\.css|appearance\.mjs|catalog\.mjs|app\.mjs|session-state\.mjs|visuals\.mjs)$/)?.[1];
   if(!file||request.method!=='GET')return false;
   const content=fs.readFileSync(new URL(file,import.meta.url));
   response.writeHead(200,{'content-type':file.endsWith('.css')?'text/css; charset=utf-8':'text/javascript; charset=utf-8','cache-control':'no-cache','x-content-type-options':'nosniff'});response.end(content);return true;
diff --git a/web/console/styles.css b/web/console/styles.css
index 2de9bd6..b1c92e9 100644
--- a/web/console/styles.css
+++ b/web/console/styles.css
@@ -1,4 +1,5 @@
-:root{--sidebar-width:232px;--topbar-height:72px;--radius-card:16px;--radius-control:9px;--gutter:32px;--gap:20px;--metric-gap:16px;--card-padding:22px;--text-size:14px;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;font-size:14px;color-scheme:light}
+/* Layout A: geometry is shared; theme selectors below contain color values only. */
+:root{--sidebar-width:232px;--topbar-height:72px;--radius-card:16px;--radius-control:9px;--gutter:32px;--gap:20px;--metric-gap:16px;--card-padding:22px;--text-size:14px;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif;font-size:14px;color-scheme:light}
 [data-theme="a"][data-mode="light"]{--bg:#F6F6FB;--surface:#FFFFFF;--surface-2:#FAFAFE;--text:#20212C;--muted:#646879;--border:#E5E5EF;--accent:#6554D9;--soft:#EFECFF;--on-accent:#FFFFFF}
 [data-theme="a"][data-mode="dark"]{--bg:#11121B;--surface:#1B1D2B;--surface-2:#222434;--text:#F1F2F7;--muted:#A7ADBF;--border:#35384D;--accent:#AC9EFF;--soft:#2F294C;--on-accent:#171227}
 [data-theme="b"][data-mode="light"]{--bg:#F2F7F6;--surface:#FFFFFF;--surface-2:#F7FBFA;--text:#16332F;--muted:#57706C;--border:#D6E5E1;--accent:#08776B;--soft:#DFF3EE;--on-accent:#FFFFFF}
@@ -7,9 +8,240 @@
 [data-theme="c"][data-mode="dark"]{--bg:#1B1814;--surface:#28231D;--surface-2:#302A23;--text:#F4EADC;--muted:#C0AF99;--border:#4D4032;--accent:#E6B57B;--soft:#3D3022;--on-accent:#271C10}
 [data-mode="light"]{--good:#16745D;--warn:#956112;--bad:#B33752}
 [data-mode="dark"]{--good:#6BDBB6;--warn:#EDC579;--bad:#FF8CA3;color-scheme:dark}
-*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text);line-height:1.65}a{color:var(--accent);text-decoration:none}button,input,select{font:inherit}button,select{cursor:pointer}button{border:1px solid var(--border);border-radius:var(--radius-control);background:var(--surface);color:var(--text);padding:9px 14px;min-height:40px}button.primary{background:var(--accent);border-color:var(--accent);color:var(--on-accent);font-weight:600}button:disabled{cursor:not-allowed;color:var(--muted);background:var(--surface-2)}input,select{border:1px solid var(--border);border-radius:var(--radius-control);background:var(--surface);color:var(--text);padding:10px 12px;min-width:0}input{width:100%;min-height:46px}label{font-size:13px;display:block;margin:14px 0 6px}button:focus-visible,input:focus-visible,select:focus-visible,a:focus-visible,summary:focus-visible{outline:3px solid var(--accent);outline-offset:3px}h1,h2,h3,p{margin-top:0}h1{font-size:30px;line-height:1.3;letter-spacing:-.6px;margin-bottom:12px}h2{font-size:17px;line-height:1.5}p{color:var(--muted)}small{display:block;font-size:12px;color:var(--muted)}.brand{display:flex;align-items:center;gap:10px;font-size:24px;letter-spacing:-.8px;font-weight:750;color:var(--text)}.brand-icon{display:grid;place-items:center;background:var(--accent);color:var(--on-accent);width:32px;height:32px;border-radius:10px;font-size:21px;font-weight:500}.eyebrow{font-size:9px;letter-spacing:2px;margin:6px 0 24px;color:var(--muted)}.sidebar{width:var(--sidebar-width);position:fixed;inset:0 auto 0 0;background:var(--surface);border-right:1px solid var(--border);padding:24px 16px;overflow:auto;z-index:2}.sidebar>.brand,.sidebar>.eyebrow{margin-left:8px}.account-badge{display:flex;align-items:center;gap:10px;background:var(--surface-2);border:1px solid var(--border);border-radius:12px;padding:12px 10px;margin:24px 0}.account-badge strong{font-size:13px;overflow-wrap:anywhere}.avatar{flex:none;display:grid;place-items:center;width:32px;height:36px;background:var(--soft);color:var(--accent);border-radius:9px;font-weight:600}.sidebar nav h2{font-size:10px;color:var(--muted);font-weight:400;margin:20px 10px 7px}.sidebar nav a{display:flex;align-items:center;gap:12px;min-height:42px;border-radius:9px;padding:9px 12px;color:var(--muted);line-height:1.4;margin:3px 0}.sidebar nav a[aria-current]{background:var(--soft);color:var(--accent);font-weight:600}.nav-icon{font-size:18px;min-width:17px}.handoff{border-top:1px solid var(--border);font-size:11px;padding:20px 10px 0;margin-top:24px}.workspace{margin-left:var(--sidebar-width);min-width:0}.topbar{min-height:var(--topbar-height);display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px var(--gutter);background:var(--surface);border-bottom:1px solid var(--border);font-size:12px}.appearance-controls{display:flex;gap:8px;flex-wrap:wrap;align-items:center}.appearance-controls select{padding:5px 8px;font-size:12px;min-height:32px;max-width:160px}.topbar form{margin:0}.quiet{font-size:12px}#main{padding:var(--gutter);max-width:1800px;margin:auto;outline:none}.page-heading{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:24px}.page-heading p{margin-bottom:0}.hero{display:flex;align-items:center;justify-content:space-between;gap:32px;background:var(--soft);border:1px solid var(--border);border-radius:var(--radius-card);padding:32px;margin-bottom:20px;overflow:hidden}.hero h2{font-size:24px}.hero p{max-width:650px}.orb{display:grid;place-items:center;flex:none;width:100px;height:100px;border:1px solid var(--accent);border-radius:50%;color:var(--accent);font-size:48px}.metrics{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--metric-gap);margin:20px 0 24px}.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-card);padding:var(--card-padding);min-width:0}.metric strong{font-size:30px;letter-spacing:-1px;display:block;margin:12px 0 2px}.metric .tag{float:right}.tag{display:inline-block;background:var(--soft);color:var(--accent);border-radius:6px;padding:2px 8px;font-size:11px;overflow-wrap:anywhere}.tag.warning{color:var(--warn);background:var(--surface-2)}.columns{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(260px,1fr);gap:var(--gap)}.card-heading{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:12px}.card-heading h2{margin:0}.memory-row{display:flex;align-items:center;gap:12px;padding:18px 0;border-top:1px solid var(--border)}.memory-row .memory-link{border:0;padding:0;background:none;text-align:left;flex:1;overflow-wrap:anywhere}.memory-row .glyph{background:var(--soft);color:var(--accent);border-radius:8px;padding:8px 10px}.memory-row small{margin-top:4px}.policy-box,.empty{border:1px solid var(--border);background:var(--surface-2);border-radius:12px;padding:20px;margin:16px 0;overflow-wrap:anywhere}.empty{padding:50px 24px;text-align:center}.toolbar{display:flex;align-items:end;gap:12px;margin:16px 0 24px}.toolbar label{flex:1;margin:0}.toolbar input{margin-top:6px}.pagination{display:flex;justify-content:flex-end;gap:12px;margin-top:20px}table{border-collapse:collapse;width:100%;font-size:13px;table-layout:fixed}td,th{text-align:left;vertical-align:top;border-bottom:1px solid var(--border);padding:14px 10px;overflow-wrap:anywhere}th{font-weight:500;color:var(--muted);font-size:12px}pre,code{font-family:ui-monospace,SFMono-Regular,monospace;overflow-wrap:anywhere;white-space:pre-wrap}.body-content{white-space:pre-wrap;overflow-wrap:anywhere;line-height:1.8}footer{padding:18px var(--gutter);color:var(--muted);font-size:11px;display:flex;gap:12px}.actions{display:flex;gap:10px;flex-wrap:wrap}.form-content form button.primary{width:100%;margin-top:20px}.form-content form .actions button{width:auto}.auth-layout{display:grid;grid-template-columns:40% 60%;min-height:100vh}.auth-brand{padding:42px;display:flex;flex-direction:column;justify-content:space-between;background:var(--soft);border-right:1px solid var(--border);min-width:0}.auth-brand h1{font-size:30px;max-width:370px}.auth-brand p{max-width:370px}.auth-orbit{width:200px;height:200px;display:grid;place-items:center;border:1px solid var(--accent);border-radius:50%;margin:40px auto;color:var(--accent)}.auth-orbit span{border:1px solid var(--accent);border-radius:24px;width:80px;height:80px;text-align:center;font-size:48px}.auth-form{display:flex;flex-direction:column;background:var(--surface);min-width:0;padding:24px 36px}.auth-form>header{display:flex;justify-content:flex-end;min-height:48px}.form-content{width:100%;max-width:440px;margin:70px auto}.form-content h1{font-size:30px}.form-links{display:flex;justify-content:space-between;gap:20px;margin-top:28px}.qr{display:block;width:220px;max-width:100%;background:#fff;border-radius:12px;margin:22px auto;padding:10px}.qr svg{display:block;width:100%;height:auto}.secret{font-size:13px;padding:14px;border:1px solid var(--border);border-radius:9px}.error-message{color:var(--bad);border:1px solid var(--bad);padding:12px;border-radius:9px}.recovery-codes{font-family:ui-monospace,monospace;font-size:12px;padding:12px;background:var(--surface-2);overflow-wrap:anywhere}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;padding:0;border:0;margin:-1px}.skip-link{position:fixed;top:-80px;left:20px;background:var(--surface);padding:10px;z-index:10}.skip-link:focus{top:8px}dialog{margin:0 0 0 auto;max-width:min(640px,90vw);width:640px;max-height:100vh;height:100vh;border:0;border-left:1px solid var(--border);background:var(--surface);color:var(--text);padding:28px;overflow:auto}dialog::backdrop{background:#12132166}.dialog-header{display:flex;align-items:center;justify-content:space-between;gap:16px;position:sticky;top:-28px;background:var(--surface);padding:16px 0;z-index:1}.dialog-header h2{margin:0}.detail-meta{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:20px}.detail-source{padding:12px 0;border-bottom:1px solid var(--border);overflow-wrap:anywhere}details{margin:12px 0}summary{cursor:pointer;color:var(--accent)}
-#main.auth-layout{padding:0;max-width:none;margin:0}
+*{box-sizing:border-box}
+body{margin:0;background:var(--bg);color:var(--text);line-height:1.65}
+a{color:var(--accent);text-decoration:none}
+button,input,select{font:inherit}
+button,select{cursor:pointer}
+button,.button{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:1px solid var(--border);border-radius:var(--radius-control);background:var(--surface);color:var(--text);padding:9px 14px;min-height:40px;line-height:1.4;text-align:center}
+button.primary,.button.primary{background:var(--accent);border-color:var(--accent);color:var(--on-accent);font-weight:600}
+button:disabled{cursor:not-allowed;color:var(--muted);background:var(--surface-2)}
+input,select{border:1px solid var(--border);border-radius:var(--radius-control);background:var(--surface);color:var(--text);padding:10px 12px;min-width:0}
+input{width:100%;min-height:46px}
+label{font-size:13px;display:block;margin:14px 0 6px}
 button:not(.primary):not(:disabled),input,select{border-color:var(--muted)}
-@media(max-width:1280px){:root{--gutter:24px}.topbar{flex-wrap:wrap}.auth-brand{padding:32px}.metrics{grid-template-columns:repeat(2,minmax(0,1fr))}.columns{grid-template-columns:minmax(0,1fr)}}
-@media(max-width:800px){.sidebar{position:static;width:auto;border-right:0}.sidebar nav{display:flex;flex-wrap:wrap}.sidebar nav h2{width:100%}.workspace{margin-left:0}.auth-layout{grid-template-columns:minmax(0,1fr)}.auth-brand{display:none}.auth-form{padding:24px}.form-content{margin:32px auto}.metrics{grid-template-columns:minmax(0,1fr)}.topbar{align-items:start}.toolbar{flex-wrap:wrap}.hero .orb{display:none}}
+button:focus-visible,input:focus-visible,select:focus-visible,a:focus-visible,summary:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
+button:not(:disabled):hover,.button:hover{filter:brightness(.98)}
+a:not(.button):not(.brand):hover{color:var(--accent)}
+h1,h2,h3,p{margin-top:0}
+h1{font-size:30px;line-height:1.35;letter-spacing:-.7px;margin-bottom:10px}
+h2{font-size:17px;line-height:1.5}
+h3{font-size:15px}
+p{color:var(--muted)}
+small{display:block;font-size:12px;color:var(--muted)}
+.icon{display:inline-block;flex-shrink:0;width:18px;height:18px;vertical-align:middle}
+.brand{display:flex;align-items:center;gap:10px;font-size:24px;letter-spacing:-.8px;font-weight:750;color:var(--text);line-height:1.3;white-space:nowrap}
+.brand-icon{display:grid;place-items:center;flex-shrink:0;background:var(--accent);color:var(--on-accent);width:32px;height:32px;border-radius:10px}
+.brand-icon .icon{width:23px;height:23px;stroke-width:1.8}
+.eyebrow{font-size:10px;letter-spacing:1.6px;line-height:1.5;font-weight:500;color:var(--muted);margin:0 0 12px}
+.sidebar{width:var(--sidebar-width);position:fixed;inset:0 auto 0 0;background:var(--surface);border-right:1px solid var(--border);padding:28px 16px 20px;overflow:auto;z-index:3;display:flex;flex-direction:column;scrollbar-width:thin}
+.sidebar>.brand{margin-left:8px}
+.sidebar>.eyebrow{margin:10px 0 0 50px;max-width:138px;font-size:8px;letter-spacing:1.6px}
+.account-badge{display:flex;align-items:center;gap:10px;background:var(--surface-2);border:1px solid var(--border);border-radius:12px;padding:10px;margin:26px 0 8px;min-height:60px}
+.account-badge>div{min-width:0;flex:1}
+.account-badge strong{font-size:12px;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+.account-badge small{font-size:11px;margin-top:1px}
+.account-badge>.icon{width:15px;color:var(--muted)}
+.avatar{flex:none;display:grid;place-items:center;width:32px;height:36px;background:var(--soft);color:var(--accent);border-radius:9px;font-weight:600;text-transform:uppercase}
+.sidebar nav h2{font-size:10px;color:var(--muted);font-weight:400;margin:21px 12px 8px;letter-spacing:.2px}
+.sidebar nav a{display:flex;align-items:center;gap:12px;height:42px;border-radius:9px;padding:0 12px;color:var(--muted);line-height:1.35;margin:3px 0;font-size:12px}
+.sidebar nav a:hover{background:var(--surface-2)}
+.sidebar nav a[aria-current]{background:var(--soft);color:var(--accent);font-weight:600}
+.nav-icon{display:flex;flex-shrink:0}
+.nav-icon .icon{width:17px;height:17px}
+.nav-current{width:4px;height:4px;flex:none;border-radius:50%;background:var(--accent);margin-left:auto}
+.handoff{display:flex;align-items:center;gap:7px;font-size:10px;padding:24px 12px 0;margin:24px 0 0;margin-top:auto}
+.handoff .icon{width:14px}
+.workspace{margin-left:var(--sidebar-width);min-width:0;min-height:100vh;display:flex;flex-direction:column}
+.topbar{height:var(--topbar-height);display:flex;align-items:center;justify-content:space-between;gap:16px;padding:0 var(--gutter);background:var(--surface);border-bottom:1px solid var(--border);font-size:12px;position:relative;z-index:2}
+.breadcrumb{display:flex;align-items:center;gap:10px;min-width:0;color:var(--muted)}
+.breadcrumb>strong{color:var(--text);font-weight:500;white-space:nowrap}
+.topbar-tools{display:flex;align-items:center;gap:14px;flex-shrink:0}
+.top-search{display:flex;align-items:center;gap:10px;min-width:144px;min-height:36px;padding:6px 11px;border:1px solid var(--border);border-radius:9px;background:var(--surface-2);color:var(--muted)}
+.top-search .icon{width:16px;height:16px}
+.appearance-controls{display:flex;gap:4px;align-items:center}
+.preference-select{display:flex;align-items:center;position:relative;gap:4px}
+.appearance-controls select{padding:7px 3px;font-size:11px;min-height:36px;max-width:128px;background:transparent;border-color:transparent}
+.mode-select>.icon{width:14px;height:14px;color:var(--muted)}
+.account-menu{position:relative;margin:0;max-width:160px}
+.account-menu>summary{display:flex;align-items:center;gap:10px;list-style:none;padding:7px 12px;border:1px solid var(--border);border-radius:9px;min-height:36px;color:var(--text);font-size:12px}
+.account-menu>summary::-webkit-details-marker{display:none}
+.account-name{max-width:110px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+.account-menu-panel{position:absolute;right:0;top:calc(100% + 9px);width:240px;padding:16px;border:1px solid var(--border);border-radius:12px;background:var(--surface);box-shadow:0 12px 32px #00000014;overflow-wrap:anywhere}
+.account-menu-panel>strong{display:block;margin:4px 0 16px}
+.account-menu-panel form{margin:0}
+.account-menu-panel button{width:100%;font-size:12px;justify-content:flex-start}
+#main{width:100%;padding:var(--gutter);max-width:1800px;margin:0 auto;outline:none;flex:1}
+.page-heading{display:flex;align-items:center;justify-content:space-between;gap:24px;margin-bottom:26px;min-width:0}
+.page-heading>div{min-width:0}
+.page-heading>.tag,.browse-link{flex-shrink:0}
+.page-heading p{margin-bottom:0;font-size:13px}
+.page-heading .eyebrow{display:flex;align-items:center;gap:8px;margin-bottom:12px;font-size:9px}
+.page-heading .eyebrow::before{content:"";width:22px;height:1px;background:var(--accent)}
+.browse-link{border-color:var(--border);padding:9px 15px;font-size:12px}
+.hero{display:flex;align-items:center;justify-content:space-between;position:relative;gap:24px;background:var(--soft);border:1px solid var(--border);border-radius:var(--radius-card);padding:28px;margin-bottom:20px;min-height:190px;overflow:hidden}
+.hero-copy{position:relative;z-index:1;max-width:710px;min-width:0}
+.hero .eyebrow{font-size:9px;letter-spacing:1.5px;color:var(--accent);margin-bottom:14px}
+.hero h2{font-size:23px;letter-spacing:-.4px;margin:0 0 9px;line-height:1.4}
+.hero p:not(.eyebrow){font-size:12px;margin-bottom:20px;max-width:630px}
+.hero .button{font-size:12px;min-height:36px;padding:8px 13px}
+.memory-orbit{width:236px;min-width:236px;height:174px;display:flex;align-items:center;justify-content:center;gap:10px;position:relative;isolation:isolate;color:var(--accent)}
+.orbit-ring{position:absolute;width:150px;height:150px;border-radius:50%;border:1px solid var(--accent);opacity:.13;z-index:-1}
+.orbit-ring.outer{width:220px;height:220px;opacity:.08}
+.orbit-node{width:52px;height:52px;display:grid;place-items:center;background:var(--surface);border:1px solid var(--border);border-radius:16px}
+.orbit-node>.icon{width:22px;height:22px}
+.orbit-dots{font-size:25px;letter-spacing:3px;margin:0 2px}
+.orbit-caption{position:absolute;bottom:10px;left:0;width:100%;text-align:center;font-size:7px;letter-spacing:1px}
+.metrics{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--metric-gap);margin:20px 0 24px}
+.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-card);padding:var(--card-padding);min-width:0}
+.metric{min-height:128px;padding:19px 20px}
+.metric-heading{display:flex;justify-content:space-between;align-items:center;gap:10px;font-size:12px;color:var(--muted)}
+.metric-icon{display:inline-grid;place-items:center;flex-shrink:0;background:var(--soft);color:var(--accent);border-radius:9px;width:30px;height:30px}
+.metric-icon .icon{width:16px;height:16px}
+.metric strong{font-size:30px;letter-spacing:-.8px;line-height:1.2;display:block;margin:6px 0 7px;font-variant-numeric:tabular-nums}
+.metric small{font-size:11px}
+.tag{display:inline-block;background:var(--soft);color:var(--accent);border-radius:6px;padding:3px 8px;font-size:11px;overflow-wrap:anywhere;line-height:1.5}
+.tag.warning{color:var(--warn);background:var(--surface-2)}
+.columns{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(270px,1fr);gap:var(--gap)}
+.overview-columns>.card{min-height:360px}
+.card-heading{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:16px}
+.card-heading h2{margin:0}
+.card-heading .eyebrow{margin-bottom:8px;font-size:9px;letter-spacing:1.2px}
+.card-heading>a{display:flex;align-items:center;gap:6px;white-space:nowrap;font-size:11px;color:var(--muted)}
+.card-heading>a .icon{width:13px}
+.memory-row{display:flex;align-items:center;gap:12px;padding:19px 0;min-height:83px;border-top:1px solid var(--border)}
+.memory-row .memory-link{border:0;padding:0;background:none;text-align:left;flex:1;min-width:0;overflow-wrap:anywhere;line-height:1.65;display:block;font-size:13px}
+.memory-row .memory-link:hover{color:var(--accent);filter:none}
+.memory-row .glyph{display:grid;place-items:center;width:32px;height:38px;flex:none;background:var(--soft);color:var(--accent);border-radius:9px}
+.memory-row .glyph .icon{width:17px;height:17px}
+.memory-row small{margin-top:5px;font-size:11px}
+.memory-row>.tag{flex-shrink:0;max-width:95px;font-size:10px}
+.memory-row>span:last-child:not(.tag):not(.glyph){font-size:12px;color:var(--muted)}
+.recent-card>p:last-child{font-size:11px;margin:22px 0 0}
+.processing-card{display:flex;flex-direction:column}
+.processing-stage{display:flex;align-items:center;gap:12px;padding:17px 0;border-bottom:1px solid var(--border)}
+.stage-icon{display:grid;place-items:center;width:34px;height:34px;border-radius:10px;background:var(--surface-2);color:var(--accent);border:1px solid var(--border)}
+.processing-stage>div{flex:1;font-size:13px}
+.processing-stage small{margin-top:3px;font-size:11px}
+.processing-stage strong{font-size:20px;font-weight:600;font-variant-numeric:tabular-nums}
+.privacy-note{display:flex;align-items:flex-start;gap:10px;border:1px solid var(--border);background:var(--surface-2);border-radius:10px;padding:13px 14px}
+.privacy-note>.icon{width:16px;height:16px;color:var(--muted);margin-top:2px}
+.privacy-note p{font-size:11px;line-height:1.8;margin:0}
+.processing-card .privacy-note{margin:22px 0}
+.text-link{display:inline-flex;align-items:center;gap:8px;font-size:12px;color:var(--muted);margin-top:auto}
+.policy-box,.empty{border:1px solid var(--border);background:var(--surface-2);border-radius:12px;padding:20px;margin:16px 0;overflow-wrap:anywhere}
+.policy-box>p{font-size:13px;margin:12px 0 16px;max-width:670px}
+.empty{padding:42px 24px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:14px;border-style:dashed}
+.empty p{font-size:13px;margin:0}
+.empty-icon{display:grid;place-items:center;width:48px;height:48px;border-radius:14px;background:var(--soft);color:var(--accent)}
+.empty-icon .icon{width:22px;height:22px}
+.toolbar{display:flex;align-items:end;gap:12px;margin:0 0 22px;padding-bottom:22px;border-bottom:1px solid var(--border)}
+.toolbar label{flex:1;margin:0;min-width:0}
+.toolbar input{margin-top:7px}
+.toolbar button{min-height:46px}
+.pagination{display:flex;justify-content:flex-end;gap:12px;margin-top:20px}
+.pagination:empty{display:none}
+table{border-collapse:collapse;width:100%;font-size:13px;table-layout:fixed}
+td,th{text-align:left;vertical-align:top;border-bottom:1px solid var(--border);padding:15px 12px;overflow-wrap:anywhere}
+th{font-weight:500;color:var(--muted);font-size:11px;background:var(--surface-2)}
+tbody tr:last-child td{border-bottom:0}
+tbody tr:hover{background:var(--surface-2)}
+table+h2{margin-top:28px}
+pre,code{font-family:ui-monospace,SFMono-Regular,monospace;overflow-wrap:anywhere;white-space:pre-wrap}
+.body-content{white-space:pre-wrap;overflow-wrap:anywhere;line-height:1.9;padding:20px;background:var(--surface-2);border:1px solid var(--border);border-radius:12px}
+footer{padding:14px var(--gutter);border-top:1px solid var(--border);background:var(--surface);color:var(--muted);font-size:10px;display:flex;gap:10px;align-items:center;justify-content:center}
+.footer-mark{font-weight:600;letter-spacing:1px}
+.actions{display:flex;gap:10px;flex-wrap:wrap}
+/* Real appearance settings, not a second layout or a preview-only toggle. */
+.appearance-card>p{font-size:13px}
+.theme-options{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-top:22px}
+button.theme-option:not(:disabled){border-color:var(--border)}
+.theme-option{display:block;text-align:left;padding:10px;border-radius:12px;min-width:0;background:var(--surface)}
+button.theme-option[aria-pressed="true"]:not(:disabled){border:2px solid var(--accent);padding:9px;background:var(--surface)}
+.theme-option-info{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:16px 5px 7px}
+.theme-option-info strong{font-size:13px;font-weight:600;display:block}
+.theme-option-info small{font-size:11px;margin-top:5px;line-height:1.5}
+.selection-check{display:grid;place-items:center;width:20px;height:20px;border:1px solid var(--muted);border-radius:50%;flex:none;color:transparent}
+.selection-check .icon{width:13px;height:13px}
+[aria-pressed="true"]>.theme-option-info>.selection-check{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
+.mini-shell{height:138px;display:grid;grid-template-columns:25% 75%;border:1px solid var(--border);border-radius:7px;overflow:hidden;background:var(--preview-bg)}
+.theme-option[data-pref-value="a"]{--preview-bg:#F6F6FB;--preview-surface:#FFFFFF;--preview-accent:#6554D9;--preview-soft:#EFECFF}
+.theme-option[data-pref-value="b"]{--preview-bg:#F2F7F6;--preview-surface:#FFFFFF;--preview-accent:#08776B;--preview-soft:#DFF3EE}
+.theme-option[data-pref-value="c"]{--preview-bg:#F8F5EE;--preview-surface:#FFFDF9;--preview-accent:#8D5720;--preview-soft:#F2E7D6}
+[data-mode="dark"] .theme-option[data-pref-value="a"]{--preview-bg:#11121B;--preview-surface:#1B1D2B;--preview-accent:#AC9EFF;--preview-soft:#2F294C}
+[data-mode="dark"] .theme-option[data-pref-value="b"]{--preview-bg:#0C1818;--preview-surface:#142626;--preview-accent:#53D5BD;--preview-soft:#183D35}
+[data-mode="dark"] .theme-option[data-pref-value="c"]{--preview-bg:#1B1814;--preview-surface:#28231D;--preview-accent:#E6B57B;--preview-soft:#3D3022}
+.mini-sidebar{background:var(--preview-surface);display:flex;flex-direction:column;gap:10px;padding:14px 8px}
+.mini-sidebar i{display:block;background:var(--preview-soft);height:5px;border-radius:2px}
+.mini-sidebar i:first-child{background:var(--preview-accent);width:12px;height:12px;border-radius:4px;margin-bottom:5px}
+.mini-main{padding:10px;display:flex;gap:9px;flex-direction:column}
+.mini-main i{display:block;border-radius:3px}
+.mini-topbar{background:var(--preview-surface);height:10px}
+.mini-hero{background:var(--preview-soft);height:30px;border-left:3px solid var(--preview-accent)}
+.mini-metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:5px;height:19px}
+.mini-metrics i,.mini-columns i{background:var(--preview-surface)}
+.mini-columns{display:grid;grid-template-columns:1.7fr 1fr;gap:7px;flex:1}
+.preference-columns{grid-template-columns:repeat(2,minmax(0,1fr));margin-top:20px}
+.preference-columns p{font-size:12px;min-height:40px}
+.preference-columns .card-heading>.icon,.language-mark{color:var(--muted)}
+.segmented{display:flex;gap:6px;background:var(--surface-2);border:1px solid var(--border);padding:5px;border-radius:11px}
+button.segment:not(:disabled){flex:1;min-width:0;background:transparent;border-color:transparent;color:var(--muted)}
+button.segment[aria-pressed="true"]:not(:disabled){border-color:var(--muted);background:var(--surface);color:var(--text);font-weight:600}
+.appearance-footnote{margin-top:20px}
+/* Authentication uses the same 40/60 Layout A surface hierarchy and form contract. */
+#main.auth-layout{display:grid;grid-template-columns:40% 60%;min-height:100vh;padding:0;max-width:none;margin:0}
+.auth-brand{padding:42px 44px;display:flex;flex-direction:column;justify-content:space-between;background:var(--surface);border-right:1px solid var(--border);min-width:0}
+.auth-brand>.eyebrow,.auth-brand>div>.eyebrow{font-size:8px;letter-spacing:1.2px;margin:17px 0 0}
+.auth-story{margin:70px 0 40px}
+.auth-story h2{font-size:40px;line-height:1.45;font-weight:650;letter-spacing:-1.2px;max-width:460px;margin:0 0 28px}
+.auth-story h2>span{display:block}
+.auth-story>p{max-width:365px;line-height:1.85;font-size:13px}
+.auth-story .memory-orbit{height:205px;margin:38px auto 0}
+.auth-brand-bottom .privacy-note{max-width:440px}
+.auth-brand-bottom>small{margin-top:48px;font-size:10px}
+.auth-form{display:flex;flex-direction:column;background:var(--bg);min-width:0;padding:24px 40px}
+.auth-form>header{display:flex;justify-content:flex-end;min-height:48px}
+.form-content{width:100%;max-width:440px;margin:60px auto 48px}
+.form-content>.eyebrow{color:var(--accent);font-size:9px;margin-bottom:23px}
+.form-content h1{font-size:27px;line-height:1.4;margin-bottom:14px}
+.form-content>p{font-size:12px;line-height:1.8;margin-bottom:10px}
+.form-content form{margin-top:26px}
+.form-content form label{margin-top:22px;margin-bottom:8px;font-size:12px;color:var(--muted)}
+.form-content form input{background:var(--surface);font-size:13px;padding:12px;min-height:46px}
+.form-content form input[name="otp"]{letter-spacing:6px;font-size:18px;font-variant-numeric:tabular-nums}
+.form-content form input[name="code"]{font-family:ui-monospace,SFMono-Regular,monospace}
+.form-content form button.primary{width:100%;margin-top:26px;min-height:46px;font-size:13px}
+.form-content form .actions button{width:auto}
+.form-content form button[data-password-toggle]{display:block;margin:6px 0 0 auto;border:0;padding:3px 0;min-height:24px;background:none;color:var(--accent);font-size:11px}
+.form-links{display:flex;justify-content:space-between;gap:20px;margin-top:24px;font-size:12px}
+.form-content>ul{border:1px solid var(--border);border-radius:12px;background:var(--surface);padding:18px 18px 18px 36px;font-size:13px}
+.form-content>ul li{margin:10px 0}
+.form-content>form+form{margin-top:12px}
+.form-content>form+form>button{width:100%}
+.auth-footer{margin-top:auto;text-align:center;padding-bottom:8px}
+.auth-footer small{font-size:10px}
+.qr{display:block;width:220px;max-width:100%;background:#fff;border:1px solid var(--border);border-radius:12px;margin:22px auto;padding:10px}
+.qr svg{display:block;width:100%;height:auto}
+.secret{display:block;font-size:13px;padding:14px;border:1px solid var(--border);border-radius:9px;background:var(--surface)}
+.error-message{color:var(--bad);border:1px solid var(--bad);padding:14px;border-radius:9px}
+.recovery-codes{font-family:ui-monospace,monospace;font-size:12px;padding:12px;background:var(--surface-2);overflow-wrap:anywhere}
+/* Focus, dialogs and narrow desktop/zoom reflow. No theme-dependent geometry. */
+.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;padding:0;border:0;margin:-1px}
+.skip-link{position:fixed;top:-80px;left:20px;background:var(--surface);padding:10px;z-index:10}
+.skip-link:focus{top:8px}
+dialog{margin:0 0 0 auto;max-width:min(640px,95vw);width:640px;max-height:100vh;height:100vh;border:0;border-left:1px solid var(--border);background:var(--surface);color:var(--text);padding:28px;overflow:auto;box-shadow:-16px 0 48px #00000012}
+dialog::backdrop{background:#12132166}
+.dialog-header{display:flex;align-items:center;justify-content:space-between;gap:16px;position:sticky;top:-28px;background:var(--surface);padding:16px 0;z-index:1;margin-bottom:16px}
+.dialog-header h2{margin:0}
+button.close-button:not(:disabled){width:36px;min-height:36px;padding:6px;border-color:var(--border)}
+.detail-meta{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:20px}
+.detail-source{padding:16px 0;border-bottom:1px solid var(--border);overflow-wrap:anywhere}
+.detail-source pre{background:var(--surface-2);padding:14px;border-radius:8px;font-size:11px;color:var(--muted)}
+details{margin:12px 0}
+summary{cursor:pointer;color:var(--accent)}
+.loading-card{min-height:180px;display:grid;place-items:center;color:var(--muted)}
+@media(max-width:1280px){:root{--gutter:24px}.topbar-tools{gap:8px}.top-search{min-width:112px}.auth-brand{padding:34px}.hero{padding:25px}.hero h2{font-size:22px}.memory-orbit{min-width:190px;width:190px}.columns{grid-template-columns:minmax(0,1.65fr) minmax(270px,1fr)}}
+@media(max-width:1100px){.top-search{display:none}.topbar-tools{gap:6px}.columns{grid-template-columns:minmax(0,1fr)}.theme-options{gap:10px}.auth-story h2{font-size:34px}.metric{padding:16px 14px}.hero .memory-orbit{min-width:155px;width:155px}.orbit-caption{font-size:6px}.hero h2{font-size:21px}}
+@media(max-width:960px){.metrics{grid-template-columns:repeat(2,minmax(0,1fr))}.breadcrumb>span:first-child{display:none}.theme-options{grid-template-columns:minmax(0,1fr)}.mini-shell{height:150px}.auth-brand{padding:24px}.auth-form{padding:24px}.auth-story h2{font-size:30px}.hero .memory-orbit{display:none}}
+@media(max-width:760px){.sidebar{position:static;width:auto;border-right:0;padding:20px}.sidebar>.eyebrow,.account-badge,.handoff{display:none}.sidebar nav{display:flex;flex-wrap:wrap;gap:4px;margin-top:16px}.sidebar nav h2{width:100%;margin:12px 0 2px}.sidebar nav a{padding:0 9px}.workspace{margin-left:0}.topbar{height:auto;min-height:72px;flex-wrap:wrap;padding:14px 20px}.topbar-tools{flex-wrap:wrap}.account-menu{max-width:140px}#main.auth-layout{grid-template-columns:minmax(0,1fr)}.auth-brand{display:none}.form-content{margin:32px auto}.page-heading{align-items:flex-start}.page-heading>.tag{display:none}.toolbar{flex-wrap:wrap}.toolbar label{flex-basis:100%}.hero h2{font-size:22px}.theme-options{grid-template-columns:minmax(0,1fr)}}
 @media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
diff --git a/web/console/visuals.mjs b/web/console/visuals.mjs
new file mode 100644
index 0000000..8e123bb
--- /dev/null
+++ b/web/console/visuals.mjs
@@ -0,0 +1,54 @@
+// Shared, dependency-free presentation. No API calls, account selection or authorization here.
+// Icons are fixed local paths, never markup from a memory or an upstream response.
+const paths = {
+  brand: '<path d="M4 19V5l8 7 8-7v14"/>',
+  overview: '<rect x="3" y="3" width="7" height="7" rx="1"/><rect x="14" y="3" width="7" height="7" rx="1"/><rect x="3" y="14" width="7" height="7" rx="1"/><rect x="14" y="14" width="7" height="7" rx="1"/>',
+  memories: '<rect x="5" y="3" width="14" height="18" rx="2"/><path d="M8 7h8M8 11h8M8 15h5"/>',
+  summaries: '<path d="m12 3 9 5-9 5-9-5 9-5Zm-9 9 9 5 9-5M3 16l9 5 9-5"/>',
+  jobs: '<circle cx="12" cy="12" r="9"/><path d="M12 7v5l3 2"/>',
+  connections: '<path d="m10 13 4-4M8 16l-1 1a4 4 0 0 1-6-6l4-4a4 4 0 0 1 6 0m2 1 1-1a4 4 0 1 1 6 6l-4 4a4 4 0 0 1-6 0" transform="translate(1 0)"/>',
+  models: '<rect x="6" y="6" width="12" height="12" rx="2"/><path d="M9 1v5m6-5v5M9 18v5m6-5v5M1 9h5m-5 6h5m12-6h5m-5 6h5"/>',
+  security: '<path d="m12 3 8 3v6c0 4-3 7-8 9-5-2-8-5-8-9V6l8-3Z"/><path d="m8 12 3 3 5-6"/>',
+  audit: '<rect x="5" y="3" width="14" height="18" rx="2"/><path d="M8 7h8M8 11h8M8 15h8M8 18h4"/>',
+  storage: '<ellipse cx="12" cy="5" rx="8" ry="3"/><path d="M4 5v14c0 4 16 4 16 0V5M4 12c0 4 16 4 16 0"/>',
+  appearance: '<circle cx="12" cy="12" r="9"/><path d="M12 3v18a9 9 0 0 0 0-18Z" fill="currentColor" stroke="none"/>',
+  invitations: '<rect x="3" y="5" width="18" height="16" rx="2"/><path d="M7 3v5m10-5v5M3 11h18M8 15h2m4 0h2"/>',
+  accounts: '<circle cx="9" cy="7" r="3"/><path d="M3 21v-3a6 6 0 0 1 12 0v3m0-17a3 3 0 0 1 0 6m3 5a5 5 0 0 1 3 4v2"/>',
+  search: '<circle cx="10.5" cy="10.5" r="6.5"/><path d="m16 16 5 5"/>',
+  arrow: '<path d="M4 12h16m-5-5 5 5-5 5"/>',
+  close: '<path d="m6 6 12 12M6 18 18 6"/>',
+  sun: '<circle cx="12" cy="12" r="4"/><path d="M12 2v2m0 16v2M2 12h2m16 0h2M5 5l1 1m12 12 1 1M5 19l1-1M18 6l1-1"/>',
+  moon: '<path d="M20 15a9 9 0 0 1-11-11 9 9 0 1 0 11 11Z"/>',
+  check: '<path d="m5 12 4 4 10-10"/>',
+  logout: '<path d="M9 3H4v18h5m5-14 5 5-5 5M9 12h10"/>',
+  lock: '<rect x="5" y="10" width="14" height="11" rx="2"/><path d="M8 10V7a4 4 0 0 1 8 0v3"/>',
+};
+export const icon = name => `<svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false">${paths[name] || paths.memories}</svg>`;
+const esc = value => String(value ?? '').replace(/[&<>"']/g, c => ({'&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;',"'":'&#39;'}[c]));
+const label = (t, key, tag = 'span') => `<${tag} data-i18n="${key}">${esc(t(key))}</${tag}>`;
+export const orbit = () => `<div class="memory-orbit" aria-hidden="true"><div class="orbit-ring"></div><div class="orbit-ring outer"></div><div class="orbit-node"><span class="brand-icon">${icon('brand')}</span></div><span class="orbit-dots">···</span><div class="orbit-node">${icon('connections')}</div><span class="orbit-caption">MEMORY · CONTEXT · CONNECTION</span></div>`;
+
+export function overviewView(data, {t, memoryRows}) {
+  const l = (key, tag) => label(t, key, tag);
+  // The reference's trends and connected/completed badges were demo data. Never invent them.
+  const count = key => Number.isSafeInteger(data.counts?.[key]) && data.counts[key] >= 0 ? data.counts[key].toLocaleString() : '—';
+  return `<section class="hero"><div class="hero-copy"><p class="eyebrow">${l('heroLabel')}</p><h2>${l('connectionHeadline')}</h2>${l('connectionDescription','p')}<a class="button primary" href="/app/connections">${l('manageConnections')}${icon('arrow')}</a></div>${orbit()}</section>
+  <div class="metrics">${[['memories','memoryCount','memories'],['sources','sourceCount','audit'],['summaries','summaryCount','summaries'],['jobs','jobCount','jobs']].map(([key,title,glyph]) => `<section class="card metric"><div class="metric-heading">${l(title)}<span class="metric-icon">${icon(glyph)}</span></div><strong>${count(key)}</strong>${l('ownedRecords','small')}</section>`).join('')}</div>
+  <div class="columns overview-columns"><section class="card recent-card"><div class="card-heading"><div><p class="eyebrow">${l('recentLabel')}</p>${l('recent','h2')}</div><a href="/app/memories">${l('viewAll')} ${icon('arrow')}</a></div>${memoryRows(data.recent)}${l('inspectMemoryNote','p')}</section>
+  <section class="card processing-card"><div class="card-heading"><div><p class="eyebrow">${l('processingLabel')}</p>${l('memoryProcessing','h2')}</div><span class="metric-icon">${icon('jobs')}</span></div>
+  <div class="processing-stage"><span class="stage-icon">${icon('memories')}</span><div>${l('memoryCount')}<small>${l('atomicNote')}</small></div><strong>${count('memories')}</strong></div>
+  <div class="processing-stage"><span class="stage-icon">${icon('summaries')}</span><div>${l('summaryCount')}<small>${l('derivedNote')}</small></div><strong>${count('summaries')}</strong></div>
+  <div class="processing-stage"><span class="stage-icon">${icon('jobs')}</span><div>${l('jobCount')}<small>${l('jobStatusNote')}</small></div><strong>${count('jobs')}</strong></div>
+  <div class="privacy-note">${icon('security')}${l('summaryBoundary','p')}</div><a class="text-link" href="/app/jobs">${l('viewJobs')} ${icon('arrow')}</a></section></div>`;
+}
+
+export function appearanceView(t) {
+  const l = (key, tag) => label(t, key, tag);
+  const pick = (property, value, content, className) => `<button class="${className}" type="button" data-pref="${property}" data-pref-value="${value}" aria-pressed="false" disabled>${content}</button>`;
+  const mini = `<span class="mini-shell" aria-hidden="true"><span class="mini-sidebar"><i></i><i></i><i></i><i></i></span><span class="mini-main"><i class="mini-topbar"></i><i class="mini-hero"></i><span class="mini-metrics"><i></i><i></i><i></i><i></i></span><span class="mini-columns"><i></i><i></i></span></span></span>`;
+  return `<section class="card appearance-card"><div class="card-heading"><div><p class="eyebrow">${l('personalizeLabel')}</p>${l('theme','h2')}</div><span class="tag">${l('fixedLayout')}</span></div>${l('appearanceNote','p')}
+  <div class="theme-options" role="group" data-i18n-aria-label="theme" aria-label="${esc(t('theme'))}">${['a','b','c'].map(theme => pick('theme',theme,`${mini}<span class="theme-option-info"><span><strong>${l(`themeName_${theme}`)}</strong><small>${l(`themeNote_${theme}`)}</small></span><span class="selection-check">${icon('check')}</span></span>`,'theme-option')).join('')}</div></section>
+  <div class="columns preference-columns"><section class="card"><div class="card-heading">${l('mode','h2')}${icon('sun')}</div>${l('modeNote','p')}<div class="segmented" role="group" data-i18n-aria-label="mode" aria-label="${esc(t('mode'))}">${['light','dark'].map(mode => pick('mode',mode,`${icon(mode==='light'?'sun':'moon')}${l(mode)}`,'segment')).join('')}</div></section>
+  <section class="card"><div class="card-heading">${l('language','h2')}<span class="language-mark" aria-hidden="true">文 / A</span></div>${l('languageNote','p')}<div class="segmented" role="group" data-i18n-aria-label="language" aria-label="${esc(t('language'))}">${pick('locale','zh-CN','简体中文','segment')}${pick('locale','en','English','segment')}</div></section></div>
+  <div class="privacy-note appearance-footnote">${icon('security')}${l('appearanceScopeNote','p')}</div>`;
+}