Upload 3 files

static/app.js

@@ -3,19 +3,19 @@ const $ = (s) => document.querySelector(s);
 const DOM = {};
 
 function escapeHTML(v){return String(v ?? '').replace(/[&<>"']/g,(c)=>({'&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;',"'":'&#39;'}[c]));}
-function toast(msg){const el=DOM.toast;el.textContent=msg;el.hidden=false;clearTimeout(toast.t);toast.t=setTimeout(()=>{el.hidden=true},2400);}
+function toast(msg){const el=DOM.toast;el.textContent=msg;el.hidden=false;el.style.display='';clearTimeout(toast.t);toast.t=setTimeout(()=>{el.hidden=true;el.style.display='none'},2400);}
 
 function parseUrl(){const p=new URLSearchParams(location.search);STATE.q=p.get('q')||'';STATE.page=Math.max(1,parseInt(p.get('page')||'1',10)||1);STATE.pageSize=parseInt(p.get('page_size')||'20',10)||20;STATE.exact=p.get('exact')!=='0';STATE.source=p.get('source')||'';STATE.leftOpen=p.get('sidebar')!=='0';STATE.rightOpen=p.get('filters')==='1';STATE.preview=p.get('preview')||'';}
 function syncUrl(replace=true){const p=new URLSearchParams();if(STATE.q)p.set('q',STATE.q);if(STATE.page>1)p.set('page',String(STATE.page));if(STATE.pageSize!==20)p.set('page_size',String(STATE.pageSize));if(!STATE.exact)p.set('exact','0');if(STATE.source)p.set('source',STATE.source);if(!STATE.leftOpen)p.set('sidebar','0');if(STATE.rightOpen)p.set('filters','1');if(STATE.preview)p.set('preview',STATE.preview);const url=p.toString()?`/?${p}`:'/';history[replace?'replaceState':'pushState'](null,'',url);}
-function applyState(){DOM.searchInput.value=STATE.q;DOM.exactToggle.checked=STATE.exact;DOM.pageSize.value=String(STATE.pageSize);DOM.leftSidebar.classList.toggle('collapsed',!STATE.leftOpen);DOM.rightSidebar.classList.toggle('collapsed',!STATE.rightOpen);}
+function applyState(){DOM.searchInput.value=STATE.q;DOM.exactToggle.checked=STATE.exact;DOM.pageSize.value=String(STATE.pageSize);DOM.leftSidebar.classList.toggle('collapsed',!STATE.leftOpen);DOM.rightSidebar.classList.toggle('collapsed',!STATE.rightOpen);DOM.leftSidebar.classList.toggle('open',STATE.leftOpen);DOM.rightSidebar.classList.toggle('open',STATE.rightOpen);}
 
 async function api(path, opts){const r=await fetch(path,opts);if(!r.ok)throw new Error(`HTTP ${r.status}`);return r.json();}
 async function loadSources(){try{STATE.sources=await api('/api/sources');renderSources();}catch(e){DOM.sourceList.innerHTML='<div class="loading">来源加载失败</div>';}}
-function renderSources(){let html=`<button class="source-item ${!STATE.source?'active':''}" data-source=""><span>全部来源</span><small>${STATE.total?STATE.total.toLocaleString():''}</small></button>`;for(const s of STATE.sources){html+=`<button class="source-item ${STATE.source===s.name?'active':''}" data-source="${escapeHTML(s.name)}"><span>${escapeHTML(s.name)}</span><small>${Number(s.count||0).toLocaleString()}</small></button>`;}DOM.sourceList.innerHTML=html;}
+function renderSources(){let html=`<div class="repo-list-item ${!STATE.source?'active':''}" data-source=""><span class="ui-icon ui-icon-stack" aria-hidden="true"></span><span class="repo-name">全部来源</span><span class="repo-count">${STATE.total?STATE.total.toLocaleString():''}</span></div>`;for(const s of STATE.sources){html+=`<div class="repo-list-item ${STATE.source===s.name?'active':''}" data-source="${escapeHTML(s.name)}"><span class="ui-icon ui-icon-stack" aria-hidden="true"></span><span class="repo-name">${escapeHTML(s.name)}</span><span class="repo-count">${Number(s.count||0).toLocaleString()}</span></div>`;}DOM.sourceList.innerHTML=html;}
 async function search(){applyState();syncUrl();DOM.statusText.textContent='搜索中...';try{const data=await api('/api/search',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({q:STATE.q,page:STATE.page,page_size:STATE.pageSize,exact:STATE.exact,source:STATE.source||null})});STATE.results=data.results||[];STATE.total=data.total||0;renderResults();renderSources();if(STATE.preview) restorePreview(false);DOM.statusText.textContent='';}catch(e){DOM.statusText.textContent='搜索失败';toast('搜索失败');}}
-function renderResults(){DOM.resultCount.textContent=STATE.total?`共 ${STATE.total.toLocaleString()} 条结果`:'';DOM.pageInfo.textContent=`${STATE.page} / ${Math.max(1,Math.ceil(STATE.total/STATE.pageSize))}`;DOM.prevPage.disabled=STATE.page<=1;DOM.nextPage.disabled=STATE.page>=Math.max(1,Math.ceil(STATE.total/STATE.pageSize));DOM.results.innerHTML=STATE.results.map(r=>`<article class="result-card"><div class="result-title">${escapeHTML(r.title)}</div><div class="result-meta">${escapeHTML(r.publication_name)}${r.authors&&r.authors.length?' / '+escapeHTML(r.authors.join(', ')):''}${r.publication_type?' / '+escapeHTML(r.publication_type):''}</div>${(r.snippet||[]).map(s=>`<p class="snippet">${s}</p>`).join('')}<div class="result-actions"><button data-preview="${escapeHTML(r.doc_id)}">在线预览</button><a href="/api/download/txt/${encodeURIComponent(r.doc_id)}">下载 TXT</a><a href="/api/download/source/${encodeURIComponent(r.doc_id)}">下载原文件</a></div></article>`).join('')||'<div class="loading">暂无结果</div>';}
-async function restorePreview(scroll=true){if(!STATE.preview){DOM.previewPanel.hidden=true;DOM.previewPanel.innerHTML='';syncUrl();return;}try{const p=await api(`/api/preview/${encodeURIComponent(STATE.preview)}`);DOM.previewPanel.innerHTML=`<div class="preview-head"><div><strong>${escapeHTML(p.title)}</strong><small>${escapeHTML(p.publication_name)}${p.authors&&p.authors.length?' / '+escapeHTML(p.authors.join(', ')):''}</small></div><button data-close-preview>×</button></div><div class="preview-body">${escapeHTML(p.content)}</div>`;DOM.previewPanel.hidden=false;if(scroll)DOM.previewPanel.scrollIntoView({behavior:'smooth',block:'start'});syncUrl();}catch(e){STATE.preview='';DOM.previewPanel.hidden=true;toast('预览失败');syncUrl();}}
+function renderResults(){DOM.resultCount.textContent=STATE.total?`共 ${STATE.total.toLocaleString()} 条结果`:'';DOM.pageInfo.textContent=`${STATE.page} / ${Math.max(1,Math.ceil(STATE.total/STATE.pageSize))}`;DOM.prevPage.disabled=STATE.page<=1;DOM.nextPage.disabled=STATE.page>=Math.max(1,Math.ceil(STATE.total/STATE.pageSize));DOM.results.innerHTML=STATE.results.map(r=>`<div class="result-item"><div class="result-file-icon"><span class="ui-icon ui-icon-file" aria-hidden="true"></span></div><div class="result-info"><div class="result-title">${escapeHTML(r.title)}</div><div class="result-path"><span class="path-folder" data-source="${escapeHTML(r.publication_name)}">${escapeHTML(r.publication_name)}</span>${r.authors&&r.authors.length?`<span class="path-sep">/</span><span>${escapeHTML(r.authors.join(', '))}</span>`:''}${r.publication_type?`<span class="path-sep">/</span><span>${escapeHTML(r.publication_type)}</span>`:''}</div>${(r.snippet||[]).map(s=>`<div class="result-snippet">${s}</div>`).join('')}</div><div class="result-actions"><button class="result-action-btn" data-preview="${escapeHTML(r.doc_id)}">在线预览</button><a class="result-action-btn primary" href="/api/download/txt/${encodeURIComponent(r.doc_id)}">下载 TXT</a><a class="result-action-btn primary" href="/api/download/source/${encodeURIComponent(r.doc_id)}">下载原文件</a></div></div>`).join('')||'<div class="sidebar-loading">暂无结果</div>';DOM.emptyState.style.display=STATE.results.length?'none':'flex';}
+async function restorePreview(scroll=true){if(!STATE.preview){DOM.previewPanel.hidden=true;DOM.previewPanel.style.display='none';DOM.previewPanel.innerHTML='';syncUrl();return;}try{const p=await api(`/api/preview/${encodeURIComponent(STATE.preview)}`);DOM.previewPanel.innerHTML=`<div class="preview-header"><div><div class="preview-title">${escapeHTML(p.title)}</div><div class="preview-path">${escapeHTML(p.publication_name)}${p.authors&&p.authors.length?' / '+escapeHTML(p.authors.join(', ')):''}</div></div><button class="icon-btn-sm" data-close-preview>×</button></div><pre class="preview-body">${escapeHTML(p.content)}</pre>`;DOM.previewPanel.hidden=false;DOM.previewPanel.style.display='block';if(scroll)DOM.previewPanel.scrollIntoView({behavior:'smooth',block:'start'});syncUrl();}catch(e){STATE.preview='';DOM.previewPanel.hidden=true;DOM.previewPanel.style.display='none';toast('预览失败');syncUrl();}}
 
 function bind(){DOM.searchForm.addEventListener('submit',e=>{e.preventDefault();STATE.q=DOM.searchInput.value.trim();STATE.page=1;search();});DOM.leftToggle.addEventListener('click',()=>{STATE.leftOpen=!STATE.leftOpen;applyState();syncUrl();});DOM.rightToggle.addEventListener('click',()=>{STATE.rightOpen=!STATE.rightOpen;applyState();syncUrl();});DOM.closeFilters.addEventListener('click',()=>{STATE.rightOpen=false;applyState();syncUrl();});DOM.exactToggle.addEventListener('change',()=>{STATE.exact=DOM.exactToggle.checked;STATE.page=1;search();});DOM.pageSize.addEventListener('change',()=>{STATE.pageSize=parseInt(DOM.pageSize.value,10);STATE.page=1;search();});DOM.clearFilters.addEventListener('click',()=>{STATE.source='';STATE.exact=true;STATE.page=1;search();});DOM.sourceList.addEventListener('click',e=>{const btn=e.target.closest('[data-source]');if(!btn)return;STATE.source=btn.dataset.source;STATE.page=1;search();});DOM.results.addEventListener('click',e=>{const btn=e.target.closest('[data-preview]');if(!btn)return;STATE.preview=btn.dataset.preview;restorePreview();});DOM.previewPanel.addEventListener('click',e=>{if(e.target.closest('[data-close-preview]')){STATE.preview='';restorePreview(false);}});DOM.prevPage.addEventListener('click',()=>{if(STATE.page>1){STATE.page--;search();}});DOM.nextPage.addEventListener('click',()=>{if(STATE.page<Math.ceil(STATE.total/STATE.pageSize)){STATE.page++;search();}});window.addEventListener('popstate',()=>{parseUrl();applyState();search();});}
-function init(){Object.assign(DOM,{leftSidebar:$('#left-sidebar'),rightSidebar:$('#right-sidebar'),sourceList:$('#source-list'),searchForm:$('#search-form'),searchInput:$('#search-input'),leftToggle:$('#left-toggle'),rightToggle:$('#right-toggle'),closeFilters:$('#close-filters'),exactToggle:$('#exact-toggle'),pageSize:$('#page-size'),clearFilters:$('#clear-filters'),resultCount:$('#result-count'),statusText:$('#status-text'),results:$('#results'),previewPanel:$('#preview-panel'),prevPage:$('#prev-page'),nextPage:$('#next-page'),pageInfo:$('#page-info'),toast:$('#toast')});parseUrl();applyState();bind();loadSources();search();}
+function init(){Object.assign(DOM,{leftSidebar:$('#left-sidebar'),rightSidebar:$('#right-sidebar'),sourceList:$('#source-list'),searchForm:$('#search-form'),searchInput:$('#search-input'),leftToggle:$('#left-toggle'),rightToggle:$('#right-toggle'),closeFilters:$('#close-filters'),exactToggle:$('#exact-toggle'),pageSize:$('#page-size'),clearFilters:$('#clear-filters'),resultCount:$('#result-count'),statusText:$('#status-text'),results:$('#results'),emptyState:$('#empty-state'),previewPanel:$('#preview-panel'),prevPage:$('#prev-page'),nextPage:$('#next-page'),pageInfo:$('#page-info'),toast:$('#toast')});parseUrl();applyState();bind();loadSources();search();}
 document.addEventListener('DOMContentLoaded',init);

static/index.html

@@ -2,51 +2,81 @@
 <html lang="zh-CN">
 <head>
   <meta charset="utf-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
   <title>BHA Search Lite</title>
   <link rel="stylesheet" href="/static/style.css">
 </head>
-<body>
-  <div class="app-shell">
-    <aside id="left-sidebar" class="sidebar left-sidebar">
-      <div class="sidebar-header"><span>来源</span></div>
-      <div id="source-list" class="sidebar-content"><div class="loading">加载中...</div></div>
-    </aside>
+<body class="dark force-desktop">
+<header id="header">
+  <div class="header-left">
+    <button id="left-toggle" class="icon-btn" aria-label="菜单"><span class="ui-icon ui-icon-menu" aria-hidden="true"></span></button>
+    <a class="header-logo" href="/" title="BHA Search"><span>BHA Search</span></a>
+  </div>
+  <div class="header-center">
+    <form id="search-form" class="search-box">
+      <span class="search-icon"><span class="ui-icon ui-icon-search" aria-hidden="true"></span></span>
+      <input id="search-input" class="search-input" type="search" placeholder="搜索档案全文..." autocomplete="off" spellcheck="false">
+      <kbd class="search-kbd">/</kbd>
+    </form>
+  </div>
+  <div class="header-right">
+    <button id="right-toggle" class="icon-btn" aria-label="搜索设置"><span class="ui-icon ui-icon-sliders" aria-hidden="true"></span></button>
+  </div>
+</header>
 
-    <main class="main">
-      <header class="topbar">
-        <button id="left-toggle" class="icon-btn" title="展开/收起来源">☰</button>
-        <form id="search-form" class="search-form">
-          <input id="search-input" type="search" placeholder="搜索档案全文..." autocomplete="off">
-          <button type="submit">搜索</button>
-        </form>
-        <button id="right-toggle" class="icon-btn" title="搜索过滤">⚙</button>
-      </header>
+<div id="app-body" class="app-body">
+  <aside id="left-sidebar" class="sidebar left-sidebar">
+    <div class="sidebar-header"><span>来源</span></div>
+    <div id="source-list" class="sidebar-content"><div class="sidebar-loading">加载中...</div></div>
+  </aside>
 
-      <div class="status-row">
-        <span id="result-count"></span>
-        <span id="status-text"></span>
+  <main id="main-content" class="main-content">
+    <div id="status-bar" class="status-bar">
+      <div class="status-left">
+        <span id="result-count" class="result-count"></span>
+        <span id="status-text" class="did-you-mean"></span>
+      </div>
+      <div class="status-right">
+        <button id="clear-filters" class="text-btn">清空筛选</button>
       </div>
+    </div>
 
-      <section id="preview-panel" class="preview-panel" hidden></section>
-      <section id="results" class="results"></section>
-      <div class="pager">
-        <button id="prev-page">上一页</button>
-        <span id="page-info">1 / 1</span>
-        <button id="next-page">下一页</button>
+    <div id="results-container" class="results-container">
+      <div id="preview-panel" class="preview-panel" hidden></div>
+      <div id="results" class="results-list"></div>
+      <div id="empty-state" class="empty-state" style="display:none">
+        <div class="empty-title">没有找到结果</div>
+        <div class="empty-desc">试试其他关键词</div>
       </div>
-    </main>
+    </div>
 
-    <aside id="right-sidebar" class="sidebar right-sidebar collapsed">
-      <div class="sidebar-header"><span>搜索过滤</span><button id="close-filters" class="icon-btn small">×</button></div>
-      <div class="sidebar-content">
-        <label class="toggle-row"><span>精准搜索(支持通配符*和?)</span><input id="exact-toggle" type="checkbox" checked></label>
-        <label class="field-row"><span>每页数量</span><select id="page-size"><option value="10">10</option><option value="20" selected>20</option><option value="50">50</option></select></label>
-        <button id="clear-filters" class="wide-btn">清空过滤</button>
+    <div id="load-info" class="load-info">
+      <button id="prev-page" class="text-btn-sm">上一页</button>
+      <span id="page-info">1 / 1</span>
+      <button id="next-page" class="text-btn-sm">下一页</button>
+    </div>
+  </main>
+
+  <aside id="right-sidebar" class="sidebar right-sidebar collapsed">
+    <div class="sidebar-header"><span>搜索过滤</span><button id="close-filters" class="icon-btn-sm" aria-label="关闭过滤">×</button></div>
+    <div class="sidebar-content">
+      <div class="filter-section" id="exact-search-section">
+        <label class="toggle-row">
+          <span class="toggle-label">精准搜索(支持通配符*和?)</span>
+          <input id="exact-toggle" type="checkbox" checked>
+          <span class="toggle-switch"></span>
+        </label>
       </div>
-    </aside>
-  </div>
-  <div id="toast" class="toast" hidden></div>
-  <script src="/static/app.js"></script>
+      <div class="filter-section">
+        <div class="filter-section-title">每页数量</div>
+        <select id="page-size" class="sort-select"><option value="10">10</option><option value="20" selected>20</option><option value="50">50</option></select>
+      </div>
+    </div>
+  </aside>
+</div>
+
+<div id="overlay" class="overlay" style="display:none"></div>
+<div id="toast" class="toast" hidden></div>
+<script src="/static/app.js"></script>
 </body>
 </html>

static/style.css

@@ -1,384 +1,2008 @@
+    /* ═══════════════════════════════════════════════════════════
+   VoiceOfML Search — MD3 Design System
+   ═══════════════════════════════════════════════════════════ */
+
+/* ── CSS Variables (Dark Theme — Default) ────────────── */
 :root {
+  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;
+  --font-mono: "SF Mono", "Cascadia Code", "Consolas", "Menlo", monospace;
+
+  --header-h: 48px;
+
+  --surface: #1a1c1e;
+  --surface-variant: #282a2d;
+  --surface-container: #1e2022;
+  --on-surface: #e2e2e6;
+  --on-surface-variant: #c4c6cf;
+
+  --primary: #8ab4f8;
+  --on-primary: #003258;
+  --primary-container: #004a7c;
+  --on-primary-container: #d1e4ff;
+
+  --secondary: #bcc7db;
+  --on-secondary: #263141;
+  --secondary-container: #3c4758;
+  --on-secondary-container: #d8e3f8;
+
+  --outline: #8d9099;
+  --outline-variant: #43474e;
+
+  --error: #f2b8b5;
+  --on-error: #601410;
+
+  --radius-sm: 6px;
+  --radius-md: 12px;
+  --radius-lg: 16px;
+  --radius-full: 999px;
+
+  --shadow-sm: 0 1px 2px rgba(0,0,0,0.3);
+  --shadow-md: 0 2px 8px rgba(0,0,0,0.4);
+  --shadow-lg: 0 4px 16px rgba(0,0,0,0.5);
+
+  --transition: 150ms ease;
+  
+  --sidebar-w: 280px;
+  --sidebar-expanded-w: min(50vw, 720px);
+
   color-scheme: dark;
-  --bg: #0f1115;
-  --panel: #151821;
-  --panel-2: #181c25;
-  --line: #2b303b;
-  --line-strong: #3a4150;
-  --text: #e6e9ef;
-  --muted: #9aa3b2;
-  --accent: #8fb4ff;
-  --mark-bg: #5b4a00;
-  --mark-text: #fff1a8;
-}
-
-* {
+}
+
+/* ── Light Theme ─────────────────────────────────────── */
+body.light {
+  --surface: #fdfbff;
+  --surface-variant: #f0eff4;
+  --surface-container: #f5f3f7;
+  --on-surface: #1a1c1e;
+  --on-surface-variant: #44474e;
+
+  --primary: #1a6db5;
+  --on-primary: #ffffff;
+  --primary-container: #d1e4ff;
+  --on-primary-container: #001d36;
+
+  --secondary: #525f70;
+  --on-secondary: #ffffff;
+  --secondary-container: #d8e3f8;
+  --on-secondary-container: #121c29;
+
+  --outline: #74777f;
+  --outline-variant: #c4c6cf;
+
+  --error: #ba1a1a;
+  --on-error: #ffffff;
+
+  --shadow-sm: 0 1px 2px rgba(0,0,0,0.08);
+  --shadow-md: 0 2px 8px rgba(0,0,0,0.12);
+  --shadow-lg: 0 4px 16px rgba(0,0,0,0.16);
+
+  color-scheme: light;
+}
+
+/* ── Reset & Base ────────────────────────────────────── */
+*, *::before, *::after {
   box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+html, body {
+  height: 100%;
+  overflow: hidden;
 }
 
 body {
+  font-family: var(--font-sans);
+  font-size: 14px;
+  line-height: 1.5;
+  color: var(--on-surface);
+  background: var(--surface);
+  display: flex;
+  flex-direction: column;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+:focus-visible {
+  outline: 2px solid var(--primary);
+  outline-offset: 2px;
+}
+.icon-btn:focus-visible,
+.icon-btn-sm:focus-visible,
+.text-btn:focus-visible,
+.text-btn-sm:focus-visible,
+.browser-item:focus-visible,
+.repo-list-item:focus-visible,
+.result-action-btn:focus-visible,
+.random-book-btn:focus-visible,
+.random-big-btn:focus-visible,
+.filter-checkbox-item:focus-visible,
+.back-to-global:focus-visible,
+.sidebar-breadcrumb .crumb-item:focus-visible,
+input:focus-visible,
+select:focus-visible {
+  outline: none;
+}
+
+a {
+  color: var(--primary);
+  text-decoration: none;
+}
+a:hover, a:focus-visible {
+  text-decoration: underline;
+}
+
+button {
+  font-family: inherit;
+  font-size: inherit;
+  cursor: pointer;
+  border: none;
+  background: none;
+  color: inherit;
+}
+
+input, select {
+  font-family: inherit;
+  font-size: inherit;
+  color: var(--on-surface);
+  background: none;
+  border: none;
+  outline: none;
+}
+
+ul, li {
+  list-style: none;
+}
+
+/* ── Scrollbar ───────────────────────────────────────── */
+::-webkit-scrollbar {
+  width: 6px;
+  height: 6px;
+}
+::-webkit-scrollbar-track {
+  background: transparent;
+}
+::-webkit-scrollbar-thumb {
+  background: var(--outline-variant);
+  border-radius: 3px;
+}
+::-webkit-scrollbar-thumb:hover {
+  background: var(--outline);
+}
+
+/* ═══════════════════════════════════════════════════════════
+   Header
+   ═══════════════════════════════════════════════════════════ */
+
+#header {
+  height: var(--header-h);
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 0 8px;
+  background: var(--surface-container);
+  border-bottom: 1px solid var(--outline-variant);
+  z-index: 100;
+  flex-shrink: 0;
+}
+
+.header-left {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  flex-shrink: 0;
+}
+
+.header-logo {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  color: var(--on-surface);
+  font-weight: 600;
+  font-size: 15px;
+  padding: 4px 8px;
+  border-radius: var(--radius-sm);
+  transition: background var(--transition);
+  text-decoration: none;
+}
+.header-logo:hover, .header-logo:focus-visible {
+  background: var(--surface-variant);
+  text-decoration: none;
+}
+
+.header-center {
+  flex: 1;
+  display: flex;
+  justify-content: center;
+  min-width: 0;
+}
+
+.search-box {
+  position: relative;
+  display: flex;
+  align-items: center;
+  width: 100%;
+  max-width: 680px;
+  height: 36px;
+  background: var(--surface);
+  border: 1px solid var(--outline-variant);
+  border-radius: var(--radius-full);
+  transition: all var(--transition);
+}
+.search-box:focus-within {
+  border-color: var(--primary);
+  box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary) 25%, transparent);
+}
+
+.search-icon {
+  flex-shrink: 0;
+  margin-left: 12px;
+  color: var(--on-surface-variant);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.search-input {
+  flex: 1;
+  height: 100%;
+  padding: 0 8px;
+  font-size: 14px;
+  background: transparent;
+  min-width: 0;
+}
+.search-input::placeholder {
+  color: var(--on-surface-variant);
+  opacity: 0.6;
+}
+
+.search-kbd {
+  flex-shrink: 0;
+  margin-right: 8px;
+  font-size: 10px;
+  padding: 2px 6px;
+  border-radius: 4px;
+  border: 1px solid var(--outline-variant);
+  color: var(--on-surface-variant);
+  opacity: 0.7;
+  font-family: var(--font-mono);
+}
+
+.search-history-dropdown {
+  position: absolute;
+  top: 100%;
+  left: 0;
+  right: 0;
+  margin-top: 4px;
+  background: var(--surface);
+  border: 1px solid var(--outline-variant);
+  border-radius: var(--radius-md);
+  box-shadow: 0 8px 24px rgba(0,0,0,0.3);
+  z-index: 100;
+  max-height: 320px;
+  overflow-y: auto;
+  padding: 4px 0;
+}
+.search-history-dropdown .history-item {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 8px 12px;
+  cursor: pointer;
+  font-size: 13px;
+  color: var(--on-surface);
+  transition: background 0.1s;
+}
+.search-history-dropdown .history-item:hover {
+  background: var(--surface-variant);
+}
+.search-history-dropdown .history-icon {
+  flex-shrink: 0;
+  color: var(--on-surface-variant);
+  opacity: 0.5;
+}
+.search-history-dropdown .history-text {
+  flex: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.search-history-dropdown .history-del {
+  flex-shrink: 0;
+  width: 22px;
+  height: 22px;
+  border-radius: 999px;
+  color: var(--on-surface-variant);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 14px;
+  opacity: 0.65;
+}
+.search-history-dropdown .history-del:hover,
+.search-history-dropdown .history-del:focus-visible {
+  background: var(--surface-variant);
+  color: var(--primary);
+  opacity: 1;
+}
+.search-history-dropdown .history-footer {
+  padding: 6px 12px;
+  border-top: 1px solid var(--outline-variant);
+  display: flex;
+  justify-content: center;
+}
+.search-history-dropdown .history-clear-all {
+  font-size: 12px;
+  color: var(--primary);
+  padding: 4px 8px;
+  border-radius: 6px;
+}
+.search-history-dropdown .history-clear-all:hover,
+.search-history-dropdown .history-clear-all:focus-visible {
+  background: var(--surface-variant);
+}
+.search-history-dropdown .history-del {
+  flex-shrink: 0;
+  background: none;
+  border: none;
+  color: var(--on-surface-variant);
+  font-size: 16px;
+  cursor: pointer;
+  padding: 0 6px;
+  opacity: 0.5;
+}
+.search-history-dropdown .history-del:hover {
+  opacity: 1;
+  color: var(--error);
+}
+.search-history-dropdown .history-footer {
+  padding: 4px 12px;
+  border-top: 1px solid var(--outline-variant);
+  text-align: center;
+}
+.search-history-dropdown .history-clear-all {
+  background: none;
+  border: none;
+  color: var(--on-surface-variant);
+  font-size: 12px;
+  cursor: pointer;
+  opacity: 0.6;
+}
+.search-history-dropdown .history-clear-all:hover {
+  opacity: 1;
+}
+
+.header-right {
+  display: flex;
+  align-items: center;
+  gap: 2px;
+  flex-shrink: 0;
+}
+
+/* Icon Buttons */
+.icon-btn {
+  width: 36px;
+  height: 36px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: var(--radius-full);
+  color: var(--on-surface-variant);
+  transition: all var(--transition);
+}
+.icon-btn:hover, .icon-btn:focus-visible {
+  background: var(--surface-variant);
+  color: var(--on-surface);
+}
+
+.icon-btn .ui-icon,
+.search-icon .ui-icon {
+  width: 18px;
+  height: 18px;
+}
+
+.icon-btn-sm {
+  width: 28px;
+  height: 28px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: var(--radius-full);
+  color: var(--on-surface-variant);
+  font-size: 18px;
+  transition: all var(--transition);
+}
+.icon-btn-sm:hover, .icon-btn-sm:focus-visible {
+  background: var(--surface-variant);
+  color: var(--on-surface);
+}
+
+.text-btn {
+  font-size: 12px;
+  color: var(--primary);
+  padding: 4px 10px;
+  border-radius: var(--radius-sm);
+  transition: background var(--transition);
+}
+.text-btn:hover, .text-btn:focus-visible {
+  background: var(--surface-variant);
+}
+
+.text-btn-sm {
+  font-size: 11px;
+  color: var(--primary);
+  padding: 2px 6px;
+  border-radius: 4px;
+  transition: background var(--transition);
+}
+.text-btn-sm:hover, .text-btn-sm:focus-visible {
+  background: var(--surface-variant);
+}
+
+.preview-panel {
+  margin: 12px 16px 20px;
+  background: var(--surface-container);
+  border: 1px solid var(--outline-variant);
+  border-radius: var(--radius-md);
+  overflow: hidden;
+}
+
+.preview-header {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 12px;
+  padding: 12px 14px;
+  border-bottom: 1px solid var(--outline-variant);
+}
+
+.preview-title {
+  font-size: 15px;
+  font-weight: 600;
+}
+
+.preview-path {
+  font-size: 12px;
+  opacity: 0.7;
+  margin-top: 4px;
+  word-break: break-all;
+}
+
+.preview-body {
   margin: 0;
-  height: 100vh;
+  padding: 14px;
+  max-height: 50vh;
+  overflow: auto;
+  white-space: pre-wrap;
+  word-break: break-word;
+  font-family: var(--font-sans);
+  line-height: 1.75;
+}
+
+.result-snippet {
+  margin-top: 6px;
+  font-size: 12px;
+  opacity: 0.85;
+  display: -webkit-box;
+  -webkit-line-clamp: 3;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+
+/* ═══════════════════════════════════════════════════════════
+   Layout
+   ═══════════════════════════════════════════════════════════ */
+
+.app-body {
+  display: flex;
+  flex: 1;
+  min-height: 0;
+  overflow: hidden;
+}
+
+/* ── Sidebar ─────────────────────────────────────────── */
+.sidebar {
+  width: var(--sidebar-w);
+  flex-shrink: 0;
+  display: flex;
+  flex-direction: column;
+  border-right: 1px solid var(--outline-variant);
+  background: var(--surface-container);
+  transition: width var(--transition), opacity var(--transition);
+  overflow: hidden;
+}
+.sidebar.collapsed {
+  width: 0 !important; 
+  border-right: none;
+}
+.right-sidebar {
+  border-right: none;
+  border-left: 1px solid var(--outline-variant);
+}
+.right-sidebar.collapsed {
+  border-left: none;
+}
+
+.sidebar-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 10px 12px;
+  font-size: 12px;
+  height: 36px;
+  min-height: 36px;
+  font-weight: 600;
+  color: var(--on-surface-variant);
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  border-bottom: 1px solid var(--outline-variant);
+  flex-shrink: 0;
+}
+
+.sidebar-content {
+  flex: 1;
+  overflow-y: auto;
+  overflow-x: hidden;
+  padding: 0;
+}
+
+.sidebar-loading {
+  padding: 16px;
+  text-align: center;
+  font-size: 13px;
+  color: var(--on-surface-variant);
+  opacity: 0.7;
+}
+.sidebar.expanded-wide {
+  width: var(--sidebar-expanded-w) !important;
+}
+
+/* ── Breadcrumb (Left Sidebar) ───────────────────────── */
+.sidebar-breadcrumb {
+  display: flex;
+  align-items: center;
+  gap: 2px;
+  padding: 6px 8px;
+  border-bottom: 1px solid var(--outline-variant);
+  flex-wrap: wrap;
+  font-size: 12px;
+  flex-shrink: 0;
+  min-height: 32px;
+}
+
+.sidebar-breadcrumb .crumb-item {
+  color: var(--primary);
+  cursor: pointer;
+  padding: 2px 4px;
+  border-radius: 4px;
+  white-space: nowrap;
+  transition: background var(--transition);
+}
+.sidebar-breadcrumb .crumb-item:hover,
+.sidebar-breadcrumb .crumb-item:focus-visible {
+  background: var(--surface-variant);
+}
+
+.sidebar-breadcrumb .crumb-item.current {
+  color: var(--on-surface-variant);
+  cursor: default;
+  font-weight: 500;
+}
+.sidebar-breadcrumb .crumb-item.current:hover,
+.sidebar-breadcrumb .crumb-item.current:focus-visible {
+  background: none;
+}
+
+.sidebar-breadcrumb .crumb-sep {
+  color: var(--outline);
+  flex-shrink: 0;
+}
+
+/* Back to global button */
+.back-to-global {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 0 12px;
+  height: 40px;
+  font-size: 13px;
+  color: var(--primary);
+  cursor: pointer;
+  border-bottom: 1px solid var(--outline-variant);
+  transition: background var(--transition);
+  flex-shrink: 0;
+  box-sizing: border-box;
+}
+.back-to-global:hover, .back-to-global:focus-visible {
+  background: var(--surface-variant);
+}
+
+/* ── Sidebar Browser Items (Folder + File) ───────────── */
+.browser-list {
+  flex: 1;
+  overflow-y: auto;
+}
+
+.browser-item {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 7px 12px;
+  cursor: pointer;
+  transition: background var(--transition);
+  font-size: 13px;
+  color: var(--on-surface);
+}
+.browser-item:hover, .browser-item:focus-visible {
+  background: var(--surface-variant);
+}
+
+/* 默认：无条纹 */
+.browser-item:nth-child(even) {
+  background: transparent;
+}
+
+/* 展开后：显示条纹 */
+.left-sidebar.expanded-wide .browser-item:nth-child(even) {
+  background: rgba(255, 255, 255, 0.04);
+}
+
+body.light .left-sidebar.expanded-wide .browser-item:nth-child(even) {
+  background: rgba(0, 0, 0, 0.04);
+}
+
+.left-sidebar.expanded-wide .browser-item:nth-child(even):hover,
+.left-sidebar.expanded-wide .browser-item:nth-child(even):focus-visible {
+  background: var(--surface-variant);
+}
+
+.browser-item .browser-icon {
+  width: 18px;
+  height: 18px;
+  flex-shrink: 0;
+  color: var(--on-surface-variant);
+}
+
+.browser-item .browser-name {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.browser-item .browser-count {
+  font-size: 10px;
+  color: var(--on-surface-variant);
+  flex-shrink: 0;
+}
+
+.browser-item .browser-size {
+  font-size: 10px;
+  color: var(--on-surface-variant);
+  flex-shrink: 0;
+  margin-right: 4px;
+}
+
+.browser-item .browser-action {
+  font-size: 10px;
+  padding: 2px 6px;
+  border-radius: 4px;
+  color: var(--primary);
+  border: 1px solid var(--primary);
+  flex-shrink: 0;
+  transition: all var(--transition);
+  white-space: nowrap;
+}
+.browser-item .browser-action:hover,
+.browser-item .browser-action:focus-visible {
+  background: var(--primary-container);
+  color: var(--on-primary-container);
+}
+
+/* ── Main Content ────────────────────────────────────── */
+.main-content {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+  position: relative;
+  overflow: hidden;
+}
+
+/* ═══════════════════════════════════════════════════════════
+   Repo List (Left Sidebar — Global Mode)
+   ═══════════════════════════════════════════════════════════ */
+
+.repo-list-item {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 8px 12px;
+  cursor: pointer;
+  transition: background var(--transition);
+}
+.repo-list-item:hover, .repo-list-item:focus-visible {
+  background: var(--surface-variant);
+}
+.repo-list-item.active {
+  background: var(--secondary-container);
+}
+
+.repo-list-item .repo-icon {
+  width: 18px;
+  height: 18px;
+  color: var(--on-surface-variant);
+  flex-shrink: 0;
+}
+
+.repo-list-item .repo-name {
+  flex: 1;
+  font-size: 13px;
+  font-weight: 500;
+  color: var(--on-surface);
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.repo-list-item .repo-count {
+  font-size: 11px;
+  color: var(--on-surface-variant);
+  flex-shrink: 0;
+}
+
+.ui-icon {
+  position: relative;
+  display: inline-block;
+  width: 16px;
+  height: 16px;
+  flex-shrink: 0;
+  color: var(--on-surface-variant);
+}
+
+.ui-icon-folder::before {
+  content: "";
+  position: absolute;
+  left: 1px;
+  top: 4px;
+  width: 14px;
+  height: 10px;
+  border: 1.5px solid currentColor;
+  border-radius: 3px;
+}
+
+.ui-icon-folder::after {
+  content: "";
+  position: absolute;
+  left: 3px;
+  top: 1px;
+  width: 6px;
+  height: 4px;
+  border: 1.5px solid currentColor;
+  border-bottom: none;
+  border-radius: 3px 3px 0 0;
+}
+
+.ui-icon-file::before {
+  content: "";
+  position: absolute;
+  left: 3px;
+  top: 1px;
+  width: 10px;
+  height: 13px;
+  border: 1.5px solid currentColor;
+  border-radius: 3px;
+}
+
+.ui-icon-file::after {
+  content: "";
+  position: absolute;
+  left: 6px;
+  top: 5px;
+  width: 4px;
+  height: 1.5px;
+  background: currentColor;
+  box-shadow: 0 3px 0 currentColor, 0 6px 0 currentColor;
+}
+
+.ui-icon-stack::before,
+.ui-icon-stack::after {
+  content: "";
+  position: absolute;
+  width: 11px;
+  height: 7px;
+  border: 1.5px solid currentColor;
+  border-radius: 3px;
+}
+
+.ui-icon-stack::before {
+  left: 1px;
+  top: 6px;
+}
+
+.ui-icon-stack::after {
+  left: 4px;
+  top: 2px;
+  background: var(--surface-container);
+}
+
+.ui-icon-book::before,
+.ui-icon-book::after {
+  content: "";
+  position: absolute;
+  top: 2px;
+  width: 6px;
+  height: 11px;
+  border: 1.5px solid currentColor;
+  border-radius: 2px;
+}
+
+.ui-icon-book::before {
+  left: 1px;
+  border-right-width: 0.75px;
+}
+
+.ui-icon-book::after {
+  right: 1px;
+  border-left-width: 0.75px;
+}
+
+.ui-icon-menu::before {
+  content: "";
+  position: absolute;
+  left: 2px;
+  top: 4px;
+  width: 12px;
+  height: 1.8px;
+  background: currentColor;
+  border-radius: 999px;
+  box-shadow: 0 4px 0 currentColor, 0 8px 0 currentColor;
+}
+
+.ui-icon-search::before {
+  content: "";
+  position: absolute;
+  left: 2px;
+  top: 2px;
+  width: 9px;
+  height: 9px;
+  border: 1.8px solid currentColor;
+  border-radius: 50%;
+}
+
+.ui-icon-search::after {
+  content: "";
+  position: absolute;
+  right: 2px;
+  bottom: 2px;
+  width: 6px;
+  height: 1.8px;
+  background: currentColor;
+  border-radius: 999px;
+  transform: rotate(45deg);
+}
+
+.ui-icon-sliders::before,
+.ui-icon-sliders::after {
+  content: "";
+  position: absolute;
+  left: 2px;
+  width: 12px;
+  height: 1.8px;
+  background: currentColor;
+  border-radius: 999px;
+}
+
+.ui-icon-sliders::before {
+  top: 5px;
+  box-shadow: 0 6px 0 currentColor;
+}
+
+.ui-icon-sliders::after {
+  top: 5px;
+  left: 8px;
+  width: 4px;
+  height: 4px;
+  border: 1.8px solid currentColor;
+  border-radius: 50%;
+  background: var(--surface-container);
+  box-shadow: -6px 6px 0 -1px var(--surface-container), -6px 6px 0 0 currentColor;
+}
+
+.ui-icon-theme::before {
+  content: "";
+  position: absolute;
+  inset: 2px;
+  border-radius: 50%;
+  border: 1.8px solid currentColor;
+}
+
+.ui-icon-theme::after {
+  content: "";
+  position: absolute;
+  top: 2px;
+  right: 2px;
+  width: 7px;
+  height: 11px;
+  background: var(--surface-container);
+  border-radius: 999px;
+}
+
+.ui-icon-phone::before {
+  content: "";
+  position: absolute;
+  left: 4px;
+  top: 1px;
+  width: 8px;
+  height: 14px;
+  border: 1.8px solid currentColor;
+  border-radius: 3px;
+}
+
+.ui-icon-phone::after {
+  content: "";
+  position: absolute;
+  left: 7px;
+  bottom: 3px;
+  width: 2px;
+  height: 2px;
+  background: currentColor;
+  border-radius: 50%;
+}
+
+.ui-icon-desktop::before {
+  content: "";
+  position: absolute;
+  left: 1px;
+  top: 2px;
+  width: 14px;
+  height: 9px;
+  border: 1.8px solid currentColor;
+  border-radius: 3px;
+}
+
+.ui-icon-desktop::after {
+  content: "";
+  position: absolute;
+  left: 5px;
+  bottom: 1px;
+  width: 6px;
+  height: 1.8px;
+  background: currentColor;
+  border-radius: 999px;
+  box-shadow: 0 -3px 0 -0.3px var(--surface-container);
+}
+
+.ui-icon-devices::before {
+  content: "";
+  position: absolute;
+  left: 1px;
+  top: 3px;
+  width: 9px;
+  height: 7px;
+  border: 1.8px solid currentColor;
+  border-radius: 2px;
+}
+
+.ui-icon-devices::after {
+  content: "";
+  position: absolute;
+  right: 1px;
+  top: 1px;
+  width: 5px;
+  height: 10px;
+  border: 1.8px solid currentColor;
+  border-radius: 2px;
+}
+
+/* ═══════════════════════════════════════════════════════════
+   Status Bar
+   ═══════════════════════════════════════════════════════════ */
+
+.status-bar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 6px 16px;
+  border-bottom: 1px solid var(--outline-variant);
+  flex-shrink: 0;
+  min-height: 36px;
+  height: 36px;
+}
+
+.status-left {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 12px;
+  color: var(--on-surface-variant);
+}
+
+.status-right {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+body.mobile .status-bar {
+  padding: 4px 8px;
+  gap: 4px;
+}
+body.mobile .status-left { gap: 4px; }
+body.mobile .status-right { gap: 4px; }
+body.mobile .multi-toggle { padding: 1px 4px; font-size: 11px; }
+
+.sort-group {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  font-size: 12px;
+  color: var(--on-surface-variant);
+}
+
+.sort-select {
+  font-size: 12px;
+  padding: 2px 6px;
+  border: 1px solid var(--outline-variant);
+  border-radius: var(--radius-sm);
+  background: var(--surface);
+  color: var(--on-surface);
+  cursor: pointer;
+}
+
+.did-you-mean {
+  font-size: 12px;
+  color: var(--primary);
+  cursor: pointer;
+}
+.did-you-mean:hover, .did-you-mean:focus-visible {
+  text-decoration: underline;
+}
+
+/* ═══════════════════════════════════════════════════════════
+   Results
+   ═══════════════════════════════════════════════════════════ */
+
+.results-container {
+  flex: 1;
+  overflow-y: auto;
+  overflow-x: hidden;
+}
+
+/* ── Result Item ─────────────────────────────────────── */
+.result-item {
+  display: flex;
+  gap: 10px;
+  padding: 10px 16px;
+  border-bottom: 1px solid var(--outline-variant);
+  transition: background var(--transition);
+}
+.result-item:nth-child(even) {
+  background: var(--surface-variant);
+}
+.result-item:nth-child(even):hover,
+.result-item:nth-child(even):focus-visible {
+  background: var(--secondary-container);
+}
+.result-item:hover, .result-item:focus-visible {
+  background: var(--surface-variant);
+}
+
+.result-file-icon {
+  width: 24px;
+  height: 24px;
+  flex-shrink: 0;
+  margin-top: 2px;
+  color: var(--on-surface-variant);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.result-file-icon svg {
+  width: 22px;
+  height: 22px;
+}
+
+.result-info {
+  flex: 1;
+  min-width: 0;
+}
+
+.result-title {
+  font-size: 14px;
+  font-weight: 500;
+  color: var(--on-surface);
+  word-break: break-all;
+  line-height: 1.4;
+}
+
+.result-title mark {
+  background: var(--primary-container);
+  color: var(--on-primary-container);
+  border-radius: 2px;
+  padding: 0 1px;
+}
+
+.result-path {
+  font-size: 11px;
+  color: var(--on-surface-variant);
+  margin-top: 3px;
+  font-family: var(--font-mono);
+  word-break: break-all;
+  display: flex;
+  align-items: center;
+  gap: 2px;
+  flex-wrap: wrap;
+  line-height: 1.5;
+}
+
+.result-path .path-sep {
+  color: var(--outline);
+  margin: 0 2px;
+  user-select: none;
+}
+
+.result-path .path-folder {
+  cursor: pointer;
+  color: var(--secondary);
+  transition: color var(--transition);
+}
+.result-path .path-folder:hover,
+.result-path .path-folder:focus-visible {
+  color: var(--primary);
+  text-decoration: underline;
+}
+
+.result-preview {
+  font-size: 12px;
+  color: var(--on-surface-variant);
+  margin-top: 4px;
+  line-height: 1.5;
+  max-height: 3em;
   overflow: hidden;
-  background: var(--bg);
-  color: var(--text);
-  font-family: Arial, "Microsoft YaHei", sans-serif;
+  font-family: var(--font-mono);
+}
+
+.result-preview mark {
+  background: var(--primary-container);
+  color: var(--on-primary-container);
+  border-radius: 2px;
+  padding: 0 1px;
+}
+
+.result-meta {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-top: 4px;
+  flex-wrap: wrap;
+}
+
+.result-repo-tag {
+  font-size: 10px;
+  padding: 2px 8px;
+  border-radius: 10px;
+  background: var(--primary-container);
+  color: var(--on-primary-container);
+  cursor: pointer;
+  font-weight: 500;
+  transition: opacity var(--transition);
+}
+.result-repo-tag:hover, .result-repo-tag:focus-visible {
+  opacity: 0.8;
+}
+
+.result-size {
+  font-size: 11px;
+  color: var(--on-surface-variant);
+}
+
+.result-actions {
+  display: flex;
+  gap: 4px;
+  flex-shrink: 0;
+  flex-wrap: wrap;
+  align-items: flex-start;
+}
+
+.result-action-btn {
+  font-size: 11px;
+  padding: 3px 8px;
+  border-radius: var(--radius-sm);
+  color: var(--on-surface-variant);
+  border: 1px solid var(--outline-variant);
+  white-space: nowrap;
+  transition: all var(--transition);
+}
+.result-action-btn:hover, .result-action-btn:focus-visible {
+  background: var(--surface-variant);
+  border-color: var(--outline);
+}
+.result-action-btn.primary {
+  color: var(--primary);
+  border-color: var(--primary);
+}
+.result-action-btn.primary:hover,
+.result-action-btn.primary:focus-visible {
+  background: var(--primary-container);
+  border-color: var(--primary);
+  color: var(--on-primary-container);
+}
+
+/* ═══════════════════════════════════════════════════════════
+   Load Info
+   ═══════════════════════════════════════════════════════════ */
+
+.load-info {
+  text-align: center;
+  padding: 12px;
+  font-size: 12px;
+  color: var(--on-surface-variant);
+  border-top: 1px solid var(--outline-variant);
+  flex-shrink: 0;
+  position: relative;
+}
+
+.mobile-selected-count {
+  display: none;
+  color: var(--on-surface-variant);
+  white-space: nowrap;
+  flex-shrink: 0;
+}
+
+body.mobile .load-info {
+  text-align: center;
+}
+
+body.mobile .mobile-selected-count {
+  position: absolute;
+  left: 12px;
+  top: 50%;
+  transform: translateY(-50%);
+}
+
+/* ═══════════════════════════════════════════════════════════
+   Quick Scroll Track
+   ═══════════════════════════════════════════════════════════ */
+
+.scroll-track {
+  position: absolute;
+  right: 2px;
+  top: 40px;
+  bottom: 50px;
+  width: 8px;
+  opacity: 0;
+  transition: opacity 0.3s;
+  pointer-events: none;
+}
+.scroll-track.visible {
+  opacity: 1;
+  pointer-events: auto;
+}
+.scroll-thumb {
+  position: absolute;
+  width: 6px;
+  left: 1px;
+  border-radius: 3px;
+  background: var(--outline);
+  cursor: pointer;
+  min-height: 30px;
+  transition: background var(--transition);
+}
+.scroll-thumb:hover, .scroll-thumb:focus-visible {
+  background: var(--on-surface-variant);
+}
+
+/* ═══════════════════════════════════════════════════════════
+   Footer
+   ═══════════════════════════════════════════════════════════ */
+
+.footer {
+  height: 44px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-top: 1px solid var(--outline-variant);
+  padding: 0 16px;
+  flex-shrink: 0;
+  position: relative;
+  background: var(--surface-container);
 }
 
-.app-shell {
-  display: grid;
-  grid-template-columns: 280px minmax(0, 1fr) 300px;
-  height: 100vh;
+.hitokoto {
+  font-size: 11px;
+  color: var(--on-surface-variant);
+  opacity: 0.55;
+  text-align: center;
+  max-width: 70%;
   overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  min-height: 18px;
 }
 
-.sidebar {
-  background: var(--panel);
-  overflow: auto;
-  transition: transform 180ms ease;
+.random-book-btn {
+  position: absolute;
+  right: 16px;
+  top: 50%;
+  transform: translateY(-50%);
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  font-size: 11px;
+  color: var(--on-surface-variant);
+  padding: 4px 10px;
+  border-radius: var(--radius-sm);
+  border: 1px solid var(--outline-variant);
+  transition: all var(--transition);
 }
-
-.left-sidebar {
-  border-right: 1px solid var(--line);
+.random-book-btn:hover, .random-book-btn:focus-visible {
+  background: var(--surface-variant);
+  border-color: var(--outline);
+  color: var(--primary);
 }
 
-.right-sidebar {
-  border-left: 1px solid var(--line);
+/* ═══════════════════════════════════════════════════════════
+   Filter Section (Right Sidebar)
+   ═══════════════════════════════════════════════════════════ */
+
+.filter-section {
+  border-bottom: 1px solid var(--outline-variant);
+  padding: 10px 12px;
 }
 
-.sidebar-header {
-  position: sticky;
-  top: 0;
-  z-index: 2;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  min-height: 44px;
+#fulltext-toggle-section,
+#search-paths-toggle-section,
+#history-toggle-section,
+#exact-search-section {
   padding: 0 12px;
-  background: var(--panel);
-  border-bottom: 1px solid var(--line);
-  font-size: 14px;
-  font-weight: 700;
+  height: 40px;
+  box-sizing: border-box;
 }
 
-.sidebar-content {
-  padding: 6px;
+#fulltext-toggle-section .toggle-row,
+#search-paths-toggle-section .toggle-row,
+#history-toggle-section .toggle-row,
+#exact-search-section .toggle-row {
+  height: 100%;
 }
 
-.source-item {
+.filter-section-title {
   display: flex;
-  width: 100%;
   align-items: center;
   justify-content: space-between;
-  gap: 10px;
-  padding: 8px 9px;
-  border: 0;
-  border-bottom: 1px solid rgba(255,255,255,.04);
-  background: transparent;
-  color: var(--text);
-  text-align: left;
-  cursor: pointer;
-}
-
-.source-item:hover,
-.source-item.active {
-  background: #202633;
-}
-
-.source-item span {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
+  font-size: 12px;
+  font-weight: 600;
+  color: var(--on-surface-variant);
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  margin-bottom: 8px;
 }
 
-.source-item small {
-  flex: none;
-  color: var(--muted);
-  font-size: 11px;
+.filter-actions {
+  display: flex;
+  gap: 4px;
 }
 
-.main {
-  min-width: 0;
-  overflow: auto;
-  background: var(--bg);
+.filter-checkbox-list {
+  max-height: 240px;
+  overflow-y: auto;
 }
 
-.topbar {
-  position: sticky;
-  top: 0;
-  z-index: 3;
+.filter-checkbox-item {
   display: flex;
+  align-items: center;
   gap: 8px;
-  padding: 10px 12px;
-  background: var(--bg);
-  border-bottom: 1px solid var(--line);
+  padding: 4px 0;
+  font-size: 13px;
+  color: var(--on-surface);
+  cursor: pointer;
+  transition: color var(--transition);
+}
+.filter-checkbox-item:hover, .filter-checkbox-item:focus-visible {
+  color: var(--primary);
 }
 
-.search-form {
-  display: flex;
-  flex: 1;
-  min-width: 0;
-  gap: 8px;
+.filter-checkbox-item input[type="checkbox"] {
+  accent-color: var(--primary);
+  width: 16px;
+  height: 16px;
+  cursor: pointer;
 }
 
-.search-form input {
-  flex: 1;
-  min-width: 0;
-  height: 36px;
-  padding: 0 10px;
-  border: 1px solid var(--line-strong);
-  background: #10141b;
-  color: var(--text);
-  outline: none;
+.filter-checkbox-item .checkbox-count {
+  font-size: 10px;
+  color: var(--on-surface-variant);
+  margin-left: auto;
 }
 
-.search-form input:focus {
-  border-color: var(--accent);
+/* ── Folder Tree Filter ──────────────────────────────── */
+.filter-folder-tree {
+  max-height: 280px;
+  overflow-y: auto;
+  overflow-x: auto;
+  white-space: nowrap;
+  position: relative;
 }
 
-button,
-.icon-btn,
-.wide-btn,
-.result-actions a {
-  min-height: 32px;
-  border: 1px solid var(--line-strong);
-  background: #1a202b;
-  color: var(--text);
-  padding: 0 10px;
+.filter-folder-item {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  padding: 3px 0 3px calc(var(--fdepth, 0) * 16px);
+  font-size: 13px;
+  color: var(--on-surface);
   cursor: pointer;
-  text-decoration: none;
-  font: inherit;
+  white-space: nowrap;
+  flex-wrap: nowrap;
+  width: max-content;
+  min-width: 100%;
+  transform-origin: top left;
+  will-change: transform, opacity;
 }
 
-button:hover,
-.result-actions a:hover {
-  border-color: var(--accent);
-  background: #222a38;
+.filter-folder-item .tree-toggle {
+  width: 16px;
+  height: 16px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  color: var(--on-surface-variant);
+  font-size: 10px;
+  border: 0;
+  background: transparent;
+  padding: 0;
+  border-radius: 4px;
+  cursor: pointer;
+  transition: color 0.16s ease, background 0.16s ease;
+  position: relative;
 }
 
-button:disabled {
-  opacity: .45;
-  cursor: not-allowed;
+.filter-folder-item .tree-toggle-glyph {
+  display: block;
+  width: 7px;
+  height: 7px;
+  border-right: 1.8px solid currentColor;
+  border-bottom: 1.8px solid currentColor;
+  box-sizing: border-box;
+  transform: rotate(-45deg);
+  transform-origin: 50% 50%;
+  transition: transform 220ms ease;
 }
 
-.icon-btn {
-  min-width: 36px;
-  padding: 0 8px;
+.filter-folder-item .tree-toggle:hover,
+.filter-folder-item .tree-toggle:focus-visible {
+  color: var(--primary);
+  background: color-mix(in srgb, var(--primary) 12%, transparent);
 }
 
-.icon-btn.small {
-  min-width: 28px;
-  min-height: 28px;
-  padding: 0 6px;
+.filter-folder-item .tree-toggle.expanded .tree-toggle-glyph {
+  transform: rotate(45deg);
 }
 
-.status-row {
-  display: flex;
-  justify-content: space-between;
-  gap: 12px;
-  padding: 8px 12px;
-  color: var(--muted);
-  font-size: 12px;
-  border-bottom: 1px solid var(--line);
+.filter-folder-item .tree-toggle-placeholder {
+  width: 16px;
+  height: 16px;
+  display: inline-block;
+  flex-shrink: 0;
 }
 
-.results {
-  padding: 8px 12px 0;
+.filter-folder-item input[type="checkbox"] {
+  accent-color: var(--primary);
+  width: 14px;
+  height: 14px;
+  cursor: pointer;
+  flex-shrink: 0;
 }
 
-.result-card {
-  padding: 10px 0;
-  border-bottom: 1px solid var(--line);
+.filter-folder-item .folder-name {
+  flex: 0 0 auto;
 }
 
-.result-title {
-  font-size: 15px;
-  font-weight: 700;
-  line-height: 1.45;
+.folder-self-toggle {
+  border: 1px solid var(--outline-variant);
+  background: transparent;
+  color: var(--on-surface-variant);
+  border-radius: 999px;
+  font-size: 11px;
+  line-height: 1;
+  padding: 4px 8px;
+  cursor: pointer;
+  transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
+  flex-shrink: 0;
+  margin-left: 4px;
 }
 
-.result-meta {
-  margin-top: 3px;
-  color: var(--muted);
-  font-size: 12px;
+.filter-folder-item .folder-count {
+  font-size: 10px;
+  color: var(--on-surface-variant);
+  margin-left: auto;
+  flex-shrink: 0;
 }
 
-.snippet {
-  margin: 7px 0 0;
-  color: #c9d0da;
-  font-size: 13px;
-  line-height: 1.65;
+.folder-self-toggle:hover,
+.folder-self-toggle:focus-visible {
+  border-color: var(--primary);
+  color: var(--primary);
 }
 
-.snippet em,
-mark {
-  background: var(--mark-bg);
-  color: var(--mark-text);
-  font-style: normal;
-  padding: 0 2px;
+.folder-self-toggle.active {
+  background: color-mix(in srgb, var(--primary) 18%, transparent);
+  border-color: var(--primary);
+  color: var(--primary);
 }
 
-.result-actions {
+/* ── Size Filter ─────────────────────────────────────── */
+.filter-size-row {
   display: flex;
-  flex-wrap: wrap;
+  align-items: center;
   gap: 6px;
-  margin-top: 9px;
 }
 
-.result-actions a,
-.result-actions button {
-  display: inline-flex;
-  align-items: center;
-  min-height: 28px;
-  padding: 0 9px;
+.size-input {
+  flex: 1;
+  font-size: 12px;
+  padding: 6px 8px;
+  border: 1px solid var(--outline-variant);
+  border-radius: var(--radius-sm);
+  background: var(--surface);
+  color: var(--on-surface);
+  min-width: 0;
+}
+.size-input:focus {
+  border-color: var(--primary);
+}
+.size-unit {
   font-size: 12px;
+  padding: 6px 4px;
+  border: 1px solid var(--outline-variant);
+  border-radius: var(--radius-sm);
+  background: var(--surface);
+  color: var(--on-surface);
+  cursor: pointer;
 }
 
-.preview-panel {
-  margin: 10px 12px 4px;
-  border: 1px solid var(--line);
-  background: var(--panel-2);
+.size-sep {
+  font-size: 12px;
+  color: var(--on-surface-variant);
+  flex-shrink: 0;
 }
 
-.preview-head {
+/* ═══════════════════════════════════════════════════════════
+   Empty State
+   ═══════════════════════════════════════════════════════════ */
+
+.empty-state {
   display: flex;
-  justify-content: space-between;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 64px 16px;
+  text-align: center;
   gap: 12px;
-  padding: 10px 12px;
-  border-bottom: 1px solid var(--line);
 }
 
-.preview-head strong {
-  display: block;
-  font-size: 14px;
+.empty-icon {
+  width: 56px;
+  height: 56px;
+  color: var(--outline-variant);
+  opacity: 0.4;
 }
 
-.preview-head small {
-  display: block;
-  margin-top: 3px;
-  color: var(--muted);
-  font-size: 12px;
+.empty-title {
+  font-size: 18px;
+  font-weight: 600;
+  color: var(--on-surface-variant);
 }
 
-.preview-body {
-  max-height: 42vh;
-  margin: 0;
-  padding: 12px;
-  overflow: auto;
-  white-space: pre-wrap;
-  color: #d8dde5;
+.empty-desc {
   font-size: 13px;
-  line-height: 1.75;
+  color: var(--on-surface-variant);
+  opacity: 0.6;
 }
 
-.pager {
+.random-big-btn {
+  font-size: 14px;
+  padding: 10px 24px;
+  border-radius: 24px;
+  background: var(--primary);
+  color: var(--on-primary);
+  font-weight: 500;
+  cursor: pointer;
+  transition: opacity var(--transition);
   display: flex;
   align-items: center;
-  justify-content: center;
-  gap: 12px;
-  padding: 14px;
-  color: var(--muted);
+  gap: 8px;
+}
+.random-big-btn:hover, .random-big-btn:focus-visible {
+  opacity: 0.85;
 }
 
-.toggle-row,
-.field-row {
+/* ═══════════════════════════════════════════════════════════
+   Loading Spinner
+   ═══════════════════════════════════════════════════════════ */
+
+.loading-spinner {
   display: flex;
   align-items: center;
-  justify-content: space-between;
-  gap: 12px;
-  min-height: 40px;
-  padding: 8px 6px;
-  border-bottom: 1px solid rgba(255,255,255,.06);
-  font-size: 13px;
+  justify-content: center;
+  padding: 24px;
 }
 
-.field-row select {
-  height: 30px;
-  border: 1px solid var(--line-strong);
-  background: #10141b;
-  color: var(--text);
+.spinner {
+  width: 28px;
+  height: 28px;
+  border: 3px solid var(--outline-variant);
+  border-top-color: var(--primary);
+  border-radius: 50%;
+  animation: spin 0.6s linear infinite;
 }
 
-.wide-btn {
-  width: 100%;
-  margin-top: 10px;
+@keyframes spin {
+  to { transform: rotate(360deg); }
 }
 
-.loading {
-  padding: 10px;
-  color: var(--muted);
-  font-size: 13px;
+/* ═══════════════════════════════════════════════════════════
+   Overlay
+   ═══════════════════════════════════════════════════════════ */
+
+.overlay {
+  position: fixed;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.5);
+  z-index: 90;
 }
 
+/* ═══════════════════════════════════════════════════════════
+   Toast
+   ═══════════════════════════════════════════════════════════ */
+
 .toast {
   position: fixed;
+  bottom: 60px;
   left: 50%;
-  bottom: 18px;
-  z-index: 50;
   transform: translateX(-50%);
-  border: 1px solid var(--line-strong);
-  background: #1a202b;
-  color: var(--text);
-  padding: 8px 12px;
+  background: var(--secondary-container);
+  color: var(--on-secondary-container);
+  padding: 8px 20px;
+  border-radius: var(--radius-full);
   font-size: 13px;
+  z-index: 200;
+  box-shadow: var(--shadow-md);
+  animation: toast-in 0.2s ease;
 }
 
-@media (min-width: 901px) {
-  .left-sidebar.collapsed {
-    display: none;
+@keyframes toast-in {
+  from {
+    opacity: 0;
+    transform: translateX(-50%) translateY(10px);
   }
-
-  .right-sidebar.collapsed {
-    display: none;
+  to {
+    opacity: 1;
+    transform: translateX(-50%) translateY(0);
   }
+}
 
-  .app-shell:has(.left-sidebar.collapsed) {
-    grid-template-columns: minmax(0, 1fr) 300px;
-  }
+/* ═══════════════════════════════════════════════════════════
+   Mobile
+   ═══════════════════════════════════════════════════════════ */
 
-  .app-shell:has(.right-sidebar.collapsed) {
-    grid-template-columns: 280px minmax(0, 1fr);
-  }
+body.mobile .sidebar:not(.open) {
+  width: 0;
+  border-right: none;
+  border-left: none;
+}
 
-  .app-shell:has(.left-sidebar.collapsed):has(.right-sidebar.collapsed) {
-    grid-template-columns: minmax(0, 1fr);
-  }
+body.mobile .left-sidebar.open {
+  position: fixed;
+  top: var(--header-h);
+  left: 0;
+  bottom: 0;
+  z-index: 95;
+  width: 85vw;
+  max-width: 320px;
+  box-shadow: var(--shadow-lg);
+}
+
+body.mobile .right-sidebar.open {
+  position: fixed;
+  top: var(--header-h);
+  right: 0;
+  bottom: 0;
+  z-index: 95;
+  width: 85vw;
+  max-width: 320px;
+  box-shadow: var(--shadow-lg);
+}
+
+body.mobile .footer {
+  display: none;
+}
+
+body.mobile .header-logo {
+  display: none;
+}
+
+body.mobile .random-book-btn {
+  position: fixed;
+  bottom: 20px;
+  right: 20px;
+  z-index: 50;
+  transform: none;
+  background: var(--surface-container);
+  box-shadow: var(--shadow-md);
+  border-radius: var(--radius-full);
+}
+
+body.mobile .hitokoto {
+  display: none;
+}
+
+body.mobile .search-kbd {
+  display: none;
 }
 
-@media (max-width: 900px) {
-  .app-shell {
-    grid-template-columns: 1fr;
+body.mobile .status-bar {
+  padding: 4px 8px;
+}
+
+body.mobile .result-actions {
+  flex-direction: column;
+  align-items: flex-end;
+}
+
+/* ═══════════════════════════════════════════════════════════
+   Responsive (auto-detect)
+   ═══════════════════════════════════════════════════════════ */
+
+@media (max-width: 768px) {
+  body:not(.force-desktop) .sidebar:not(.open) {
+    width: 0;
+    border-right: none;
+    border-left: none;
   }
 
-  .sidebar {
+  body:not(.force-desktop) .left-sidebar.open {
     position: fixed;
-    top: 0;
+    top: var(--header-h);
+    left: 0;
     bottom: 0;
-    width: min(84vw, 340px);
-    z-index: 10;
+    z-index: 95;
+    width: 85vw;
+    max-width: 320px;
+    box-shadow: var(--shadow-lg);
   }
 
-  .left-sidebar {
-    left: 0;
+  body:not(.force-desktop) .right-sidebar.open {
+    position: fixed;
+    top: var(--header-h);
+    right: 0;
+    bottom: 0;
+    z-index: 95;
+    width: 85vw;
+    max-width: 320px;
+    box-shadow: var(--shadow-lg);
   }
 
-  .right-sidebar {
-    right: 0;
+  body:not(.force-desktop) .footer {
+    display: none;
   }
 
-  .left-sidebar.collapsed {
-    transform: translateX(-105%);
+  body:not(.force-desktop) .random-book-btn {
+    position: fixed;
+    bottom: 20px;
+    right: 20px;
+    z-index: 50;
+    transform: none;
+    background: var(--surface-container);
+    box-shadow: var(--shadow-md);
+    border-radius: var(--radius-full);
   }
 
-  .right-sidebar.collapsed {
-    transform: translateX(105%);
+  body:not(.force-desktop) .hitokoto {
+    display: none;
   }
 
-  .topbar {
-    padding: 8px;
+  body:not(.force-desktop) .search-kbd {
+    display: none;
   }
+}
+
+/* ═══════════════════════════════════════════════════════════
+   Utility
+   ═══════════════════════════════════════════════════════════ */
+
+.hidden {
+  display: none !important;
+}
+
+.truncate {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+/* ── Toggle Switch ──────────────────────────────────── */
+.toggle-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  cursor: pointer;
+}
+
+.toggle-label {
+  font-size: 13px;
+  color: var(--on-surface);
+}
+
+.toggle-row input[type="checkbox"] {
+  display: none;
+}
+
+.toggle-switch {
+  position: relative;
+  width: 40px;
+  height: 22px;
+  background: var(--outline-variant);
+  border-radius: 11px;
+  transition: background var(--transition);
+  flex-shrink: 0;
+}
+
+.toggle-switch::after {
+  content: "";
+  position: absolute;
+  top: 2px;
+  left: 2px;
+  width: 18px;
+  height: 18px;
+  background: var(--surface);
+  border-radius: 50%;
+  transition: transform var(--transition);
+}
+
+.toggle-row input:checked + .toggle-switch {
+  background: var(--primary);
+}
+
+.toggle-row input:checked + .toggle-switch::after {
+  transform: translateX(18px);
+}
+
+input[type="checkbox"]:indeterminate {
+  accent-color: var(--primary);
+}
+body.theme-transitioning *,
+body.theme-transitioning *::before,
+body.theme-transitioning *::after {
+  transition: background-color 0.4s ease, color 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease !important;
+}
+
+.theme-ripple {
+  position: fixed;
+  border-radius: 50%;
+  pointer-events: none;
+  z-index: 9999;
+  width: 0;
+  height: 0;
+  animation: theme-ripple-expand 0.6s ease-out forwards;
+}
+
+@keyframes theme-ripple-expand {
+  0%   { width: 0; height: 0; opacity: 0.6; }
+  100% { width: 300vmax; height: 300vmax; opacity: 0; transform: translate(-150vmax, -150vmax); }
+}
 
-  .search-form {
-    gap: 6px;
+@media (prefers-reduced-motion: reduce) {
+  *, *::before, *::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
   }
 }
+
+/* ════════════════════════════════════════════════��══════════
+   Multi-Select
+   ═══════════════════════════════════════════════════════════ */
+
+.multi-toggle {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  font-size: 12px;
+  color: var(--on-surface-variant);
+  cursor: pointer;
+  margin-left: 0;
+  padding: 2px 6px;
+  border-radius: var(--radius-sm);
+  border: 1px solid transparent;
+}
+.multi-toggle:hover { border-color: var(--outline-variant); }
+.multi-toggle input { margin: 0; }
+
+.multi-action-bar {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 0 12px;
+  height: 40px;
+  background: var(--surface-variant);
+  border-bottom: 1px solid var(--outline-variant);
+  box-sizing: border-box;
+  flex-wrap: nowrap;
+}
+.multi-action-btn {
+  padding: 4px 12px;
+  border: 1px solid var(--outline-variant);
+  border-radius: var(--radius-sm);
+  background: var(--surface);
+  color: var(--on-surface);
+  font-size: 12px;
+  cursor: pointer;
+}
+.multi-action-btn.primary {
+  background: var(--primary);
+  color: var(--on-primary);
+  border-color: var(--primary);
+}
+.multi-action-btn:hover { opacity: 0.85; }
+.multi-selected-count {
+  margin-left: auto;
+  font-size: 12px;
+  color: var(--on-surface-variant);
+  white-space: nowrap;
+  flex-shrink: 0;
+}
+
+body.mobile .multi-action-btn {
+  flex-shrink: 0;
+}
+
+.result-checkbox {
+  display: none;
+  flex-shrink: 0;
+  width: 18px;
+  height: 18px;
+  margin-right: 6px;
+  align-self: center;
+  accent-color: var(--primary);
+  opacity: 0.85;
+}
+body.multiselect .result-checkbox { display: block; }
+body.multiselect .result-file-icon { display: none; }
+.result-item.selected {
+  background: color-mix(in srgb, var(--primary) 15%, transparent) !important;
+}
+
+/* BHA Search Lite overrides */
+body {
+  height: 100vh;
+}
+
+.load-info {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 12px;
+}
+
+.load-info .text-btn-sm:disabled {
+  opacity: 0.45;
+  cursor: not-allowed;
+}
+
+.result-snippet em {
+  background: var(--primary-container);
+  color: var(--on-primary-container);
+  border-radius: 2px;
+  padding: 0 1px;
+  font-style: normal;
+}
+
+.right-sidebar.collapsed,
+.left-sidebar.collapsed {
+  overflow: hidden;
+}