Restructure layout and refresh palette

static/app.js

@@ -237,7 +237,7 @@
       showToast("Analysis failed (network).");
     } finally {
       suggestBtn.disabled = false;
-      suggestBtn.textContent = "Suggest best settings";
+      suggestBtn.textContent = "Auto-detect best settings";
     }
   }
 

static/index.html

@@ -11,10 +11,10 @@
       var root = document.documentElement;
       try {
         var t = localStorage.getItem("theme");
-        if (t !== "light" && t !== "dark") t = "dark";
+        if (t !== "light" && t !== "dark") t = "light";
         root.setAttribute("data-theme", t);
       } catch (e) {
-        root.setAttribute("data-theme", "dark");
+        root.setAttribute("data-theme", "light");
       }
       document.addEventListener("DOMContentLoaded", function () {
         var btn = document.getElementById("themeToggle");
@@ -60,7 +60,7 @@
   </header>
 
   <main class="layout">
-    <!-- Sidebar: settings + drop zone -->
+    <!-- Sidebar: settings only -->
     <aside class="sidebar">
       <section class="panel">
         <h2 class="panel-title">Settings</h2>
@@ -82,133 +82,104 @@
           </select>
         </div>
 
-        <div class="setting-group-label">Image &amp; pages</div>
+        <details class="accordion">
+          <summary class="accordion-summary">
+            <span>Advanced preprocessing</span>
+            <svg class="accordion-chevron" viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M6 9l6 6 6-6"></path></svg>
+          </summary>
+          <div class="accordion-body">
+            <div class="setting setting-row">
+              <div>
+                <label class="setting-label" for="preprocessToggle">Preprocessing</label>
+                <p class="hint">Deskew, contrast-boost &amp; denoise before OCR. Best left on.</p>
+              </div>
+              <label class="switch">
+                <input type="checkbox" id="preprocessToggle" checked />
+                <span class="slider" aria-hidden="true"></span>
+              </label>
+            </div>
 
-        <div class="setting setting-row">
-          <div>
-            <label class="setting-label" for="preprocessToggle">Preprocessing</label>
-            <p class="hint">Deskew, contrast-boost &amp; denoise before OCR. Best left on.</p>
-          </div>
-          <label class="switch">
-            <input type="checkbox" id="preprocessToggle" checked />
-            <span class="slider" aria-hidden="true"></span>
-          </label>
-        </div>
-
-        <div class="setting setting-row">
-          <div>
-            <label class="setting-label" for="binarizeToggle">Binarize</label>
-            <p class="hint">Force black-and-white. Helps some clean/high-contrast scans; usually leave off (grayscale is more accurate on most documents).</p>
-          </div>
-          <label class="switch">
-            <input type="checkbox" id="binarizeToggle" />
-            <span class="slider" aria-hidden="true"></span>
-          </label>
-        </div>
-
-        <div class="setting setting-row">
-          <div>
-            <label class="setting-label" for="forceOcrToggle">Force OCR</label>
-            <p class="hint">Re-read every page as an image, even pages that already have selectable text. Use only when the embedded text is wrong/garbled, or text is trapped inside images. Slower; off by default.</p>
-          </div>
-          <label class="switch">
-            <input type="checkbox" id="forceOcrToggle" />
-            <span class="slider" aria-hidden="true"></span>
-          </label>
-        </div>
+            <div class="setting setting-row">
+              <div>
+                <label class="setting-label" for="binarizeToggle">Binarize</label>
+                <p class="hint">Force black-and-white. Helps some clean/high-contrast scans; usually leave off (grayscale is more accurate on most documents).</p>
+              </div>
+              <label class="switch">
+                <input type="checkbox" id="binarizeToggle" />
+                <span class="slider" aria-hidden="true"></span>
+              </label>
+            </div>
 
-        <div class="setting setting-row">
-          <div>
-            <label class="setting-label" for="removeHeadersToggle">Remove headers &amp; footers</label>
-            <p class="hint">Strip repeating page headers, footers &amp; page numbers from multi-page documents (3+ pages). On by default; turn off to keep every line exactly as on the page.</p>
-          </div>
-          <label class="switch">
-            <input type="checkbox" id="removeHeadersToggle" checked />
-            <span class="slider" aria-hidden="true"></span>
-          </label>
-        </div>
-
-        <div class="setting-group-label">OCR engine</div>
-
-        <div class="setting setting-row">
-          <div>
-            <label class="setting-label" for="handwritingToggle">Handwriting (local) <span class="beta-tag">beta</span></label>
-            <p class="hint">Read handwritten pages with a local model (English, ~73% on real cursive). Much slower; first use downloads a model once. For far better handwriting, use Online Gemini below instead &mdash; you don't need both.</p>
-          </div>
-          <label class="switch">
-            <input type="checkbox" id="handwritingToggle" />
-            <span class="slider" aria-hidden="true"></span>
-          </label>
-        </div>
+            <div class="setting setting-row">
+              <div>
+                <label class="setting-label" for="forceOcrToggle">Force OCR</label>
+                <p class="hint">Re-read every page as an image, even pages that already have selectable text. Use only when the embedded text is wrong/garbled, or text is trapped inside images. Slower; off by default.</p>
+              </div>
+              <label class="switch">
+                <input type="checkbox" id="forceOcrToggle" />
+                <span class="slider" aria-hidden="true"></span>
+              </label>
+            </div>
 
-        <div class="setting setting-row">
-          <div>
-            <label class="setting-label" for="onlineToggle">Online vision OCR (Gemini)</label>
-            <p class="hint">Far higher accuracy on handwriting &amp; hard scans, via Google Gemini.
-               <strong>Sends your page images to Google</strong> &mdash; off by default. Needs a free API key.</p>
-          </div>
-          <label class="switch">
-            <input type="checkbox" id="onlineToggle" />
-            <span class="slider" aria-hidden="true"></span>
-          </label>
-        </div>
-        <div class="setting setting-sub" id="onlineRow" hidden>
-          <label class="setting-label" for="onlineKey">Gemini API key</label>
-          <input type="password" id="onlineKey" class="select online-input" placeholder="paste key from aistudio.google.com" autocomplete="off" spellcheck="false" />
-          <div class="online-key-actions">
-            <button type="button" class="btn btn-ghost btn-sm" id="onlineCheck">Check key</button>
-            <span class="online-status" id="onlineStatus" data-role="onlineStatus"></span>
+            <div class="setting setting-row">
+              <div>
+                <label class="setting-label" for="removeHeadersToggle">Remove headers &amp; footers</label>
+                <p class="hint">Strip repeating page headers, footers &amp; page numbers from multi-page documents (3+ pages). On by default; turn off to keep every line exactly as on the page.</p>
+              </div>
+              <label class="switch">
+                <input type="checkbox" id="removeHeadersToggle" checked />
+                <span class="slider" aria-hidden="true"></span>
+              </label>
+            </div>
           </div>
-          <label class="setting-label" for="onlineModel" style="margin-top:8px;">Model</label>
-          <select id="onlineModel" class="select"></select>
-          <p class="hint">Your key is stored only in this browser and sent with each upload &mdash; never saved on the server.
-             Pages with a real text layer are still read locally (not sent).</p>
-        </div>
+        </details>
 
-        <div class="setting-group-label">Tools</div>
+        <details class="accordion">
+          <summary class="accordion-summary">
+            <span>Handwriting &amp; online OCR</span>
+            <svg class="accordion-chevron" viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M6 9l6 6 6-6"></path></svg>
+          </summary>
+          <div class="accordion-body">
+            <div class="setting setting-row">
+              <div>
+                <label class="setting-label" for="handwritingToggle">Handwriting (local) <span class="beta-tag">beta</span></label>
+                <p class="hint">Read handwritten pages with a local model (English, ~73% on real cursive). Much slower; first use downloads a model once. For far better handwriting, use Online Gemini below instead &mdash; you don't need both.</p>
+              </div>
+              <label class="switch">
+                <input type="checkbox" id="handwritingToggle" />
+                <span class="slider" aria-hidden="true"></span>
+              </label>
+            </div>
 
-        <div class="setting">
-          <button type="button" class="btn btn-ghost" id="suggestBtn">Suggest best settings</button>
-          <p class="hint">Samples 1&ndash;2 pages of the next file you pick and recommends settings.
-             Opt-in &middot; can take up to a minute on the CPU &middot; nothing is applied until you click Apply.</p>
-          <input type="file" id="suggestInput" accept="application/pdf,.pdf" hidden />
-        </div>
-        <div class="setting" id="suggestResult" hidden>
-          <div class="suggest-card">
-            <p class="suggest-rationale" data-role="suggestRationale"></p>
-            <div class="suggest-evidence" data-role="suggestEvidence"></div>
-            <button type="button" class="btn btn-primary btn-sm" id="suggestApply">Apply recommended</button>
+            <div class="setting setting-row">
+              <div>
+                <label class="setting-label" for="onlineToggle">Online vision OCR (Gemini)</label>
+                <p class="hint">Far higher accuracy on handwriting &amp; hard scans, via Google Gemini.
+                   <strong>Sends your page images to Google</strong> &mdash; off by default. Needs a free API key.</p>
+              </div>
+              <label class="switch">
+                <input type="checkbox" id="onlineToggle" />
+                <span class="slider" aria-hidden="true"></span>
+              </label>
+            </div>
+            <div class="setting setting-sub" id="onlineRow" hidden>
+              <label class="setting-label" for="onlineKey">Gemini API key</label>
+              <input type="password" id="onlineKey" class="select online-input" placeholder="paste key from aistudio.google.com" autocomplete="off" spellcheck="false" />
+              <div class="online-key-actions">
+                <button type="button" class="btn btn-ghost btn-sm" id="onlineCheck">Check key</button>
+                <span class="online-status" id="onlineStatus" data-role="onlineStatus"></span>
+              </div>
+              <label class="setting-label" for="onlineModel" style="margin-top:8px;">Model</label>
+              <select id="onlineModel" class="select"></select>
+              <p class="hint">Your key is stored only in this browser and sent with each upload &mdash; never saved on the server.
+                 Pages with a real text layer are still read locally (not sent).</p>
+            </div>
           </div>
-        </div>
-      </section>
-
-      <section
-        class="dropzone"
-        id="dropzone"
-        tabindex="0"
-        role="button"
-        aria-label="Drop PDF files here or click to browse">
-        <svg viewBox="0 0 24 24" width="40" height="40" aria-hidden="true" class="dz-icon">
-          <path d="M12 16V4m0 0l-4 4m4-4l4 4" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
-          <path d="M4 16v2a2 2 0 002 2h12a2 2 0 002-2v-2" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
-        </svg>
-        <p class="dz-primary">Drop PDF files here</p>
-        <p class="dz-secondary">or <span class="dz-link">browse</span> &middot; multiple files supported</p>
-        <input type="file" id="fileInput" accept="application/pdf,.pdf" multiple hidden />
-      </section>
-
-      <section class="notes" aria-label="Honesty notes">
-        <h3 class="notes-title">Good to know</h3>
-        <ul>
-          <li>Typed / born-digital pages are extracted instantly and exactly &mdash; no OCR.</li>
-          <li>OCR accuracy depends on scan quality; handwriting is the hardest.</li>
-          <li>For the best handwriting, use Online Gemini; everything else runs on your machine.</li>
-          <li>The first local-OCR run downloads model weights once, then caches them.</li>
-        </ul>
+        </details>
       </section>
     </aside>
 
-    <!-- Main work area -->
+    <!-- Main work area: dropzone becomes the results pane after upload -->
     <section class="work">
       <div class="toolbar" id="toolbar" hidden>
         <div class="search-wrap">
@@ -220,6 +191,7 @@
           <span class="search-count" id="searchCount" hidden></span>
         </div>
         <div class="toolbar-actions">
+          <label for="fileInput" class="btn btn-ghost add-more" title="Add more PDFs">+ Add PDF</label>
           <button type="button" class="btn btn-ghost" id="copyAllBtn">Copy all</button>
           <div class="export-group">
             <button type="button" class="btn btn-ghost" data-export="txt">.txt</button>
@@ -230,21 +202,61 @@
         </div>
       </div>
 
+      <!-- Empty state == the single central dropzone + auto-detect -->
       <div class="empty-state" id="emptyState">
-        <svg viewBox="0 0 64 64" width="72" height="72" aria-hidden="true">
-          <rect x="14" y="8" width="36" height="48" rx="4" fill="none" stroke="currentColor" stroke-width="2.5"></rect>
-          <line x1="22" y1="22" x2="42" y2="22" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"></line>
-          <line x1="22" y1="30" x2="42" y2="30" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"></line>
-          <line x1="22" y1="38" x2="34" y2="38" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"></line>
-        </svg>
-        <h2>No documents yet</h2>
-        <p>Drop one or more PDFs to extract their text.</p>
+        <section
+          class="dropzone"
+          id="dropzone"
+          tabindex="0"
+          role="button"
+          aria-label="Drop PDF files here or click to browse">
+          <div class="dz-icon-wrap">
+            <svg viewBox="0 0 24 24" width="34" height="34" aria-hidden="true" class="dz-icon">
+              <path d="M12 16V4m0 0l-4 4m4-4l4 4" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
+              <path d="M4 16v2a2 2 0 002 2h12a2 2 0 002-2v-2" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
+            </svg>
+          </div>
+          <p class="dz-primary">Drop your PDF here</p>
+          <p class="dz-secondary">or <span class="dz-link">browse files</span> &middot; multiple files supported</p>
+        </section>
+
+        <div class="dz-extra">
+          <button type="button" class="btn btn-ghost" id="suggestBtn">Auto-detect best settings</button>
+          <p class="hint dz-extra-hint">Samples 1&ndash;2 pages of a file and recommends settings &middot; can take up to a minute on the CPU &middot; nothing is applied until you click Apply.</p>
+          <div class="setting" id="suggestResult" hidden>
+            <div class="suggest-card">
+              <p class="suggest-rationale" data-role="suggestRationale"></p>
+              <div class="suggest-evidence" data-role="suggestEvidence"></div>
+              <button type="button" class="btn btn-primary btn-sm" id="suggestApply">Apply recommended</button>
+            </div>
+          </div>
+        </div>
       </div>
 
+      <!-- File pickers live here (always present, hidden) so the dropzone and the
+           toolbar "Add PDF" label can both trigger them regardless of view state. -->
+      <input type="file" id="fileInput" accept="application/pdf,.pdf" multiple hidden />
+      <input type="file" id="suggestInput" accept="application/pdf,.pdf" hidden />
+
       <div id="filesContainer" class="files-container"></div>
     </section>
   </main>
 
+  <footer class="app-footer">
+    <details class="footer-tips">
+      <summary>
+        <svg viewBox="0 0 24 24" width="15" height="15" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="10"></circle><path d="M12 16v-4M12 8h.01"></path></svg>
+        Good to know
+      </summary>
+      <ul class="footer-tips-list">
+        <li>Typed / born-digital pages are extracted instantly and exactly &mdash; no OCR.</li>
+        <li>OCR accuracy depends on scan quality; handwriting is the hardest.</li>
+        <li>For the best handwriting, use Online Gemini; everything else runs on your machine.</li>
+        <li>The first local-OCR run downloads model weights once, then caches them.</li>
+      </ul>
+    </details>
+  </footer>
+
   <!-- Templates -->
   <template id="fileCardTemplate">
     <article class="file-card">

static/styles.css

@@ -1,12 +1,11 @@
 /* ============================================================
    PDF Extractor - UI styles
-   Two themes (dark default, light) driven by html[data-theme].
-   Component class names are unchanged so the app behaviour and
-   all JS hooks keep working; only the styling is new.
+   Two themes (light default, dark) driven by html[data-theme].
+   Neutral surfaces + a violet accent. Component class names are
+   unchanged so all JS hooks keep working; only the styling is new.
    ============================================================ */
 
 :root {
-  /* shape + type (shared across themes) */
   --radius-lg: 18px;
   --radius: 13px;
   --radius-sm: 9px;
@@ -14,97 +13,95 @@
   --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
   --t-fast: 0.14s ease;
   --t: 0.22s cubic-bezier(0.2, 0.6, 0.2, 1);
-
-  /* accent contrast text is white in both themes */
   --accent-contrast: #ffffff;
 }
 
-/* ---------------- DARK (default) ---------------- */
-html[data-theme="dark"] {
-  --bg: #0a0d14;
-  --bg-glow-1: rgba(118, 131, 255, 0.13);
-  --bg-glow-2: rgba(38, 199, 154, 0.07);
-
-  --surface: #141a26;
-  --surface-2: #1c2433;
-  --surface-3: #0f1521;
-  --surface-raise: #1f2838;
-
-  --border: #28313f;
-  --border-soft: #1d2532;
-  --border-strong: #36425380;
-
-  --text: #e9eef6;
-  --text-dim: #9eabbf;
-  --text-faint: #66718390;
-
-  --accent: #7e8cff;
-  --accent-strong: #6b78f7;
-  --accent-soft: rgba(126, 140, 255, 0.16);
-  --accent-ring: rgba(126, 140, 255, 0.45);
-
-  --green: #34d39e;
-  --green-soft: rgba(52, 211, 158, 0.15);
-  --green-line: rgba(52, 211, 158, 0.38);
-  --amber: #f5b13d;
-  --amber-soft: rgba(245, 177, 61, 0.15);
-  --amber-line: rgba(245, 177, 61, 0.4);
-  --red: #ff6171;
-  --red-soft: rgba(255, 97, 113, 0.14);
-  --red-line: rgba(255, 97, 113, 0.4);
-  --violet: #b98cff;
-  --cyan: #54c8f7;
-
-  --shadow: 0 18px 40px -18px rgba(0, 0, 0, 0.7);
-  --shadow-sm: 0 2px 10px rgba(0, 0, 0, 0.35);
-  --mark: #f5b13d;
-  --mark-active: #ffd86b;
-  --mark-text: #1a1205;
-}
-
-/* ---------------- LIGHT ---------------- */
+/* ---------------- LIGHT (default) ---------------- */
 html[data-theme="light"] {
-  --bg: #f4f6fb;
-  --bg-glow-1: rgba(91, 102, 235, 0.08);
-  --bg-glow-2: rgba(20, 175, 128, 0.06);
+  --bg: #f3f3f7;
+  --bg-glow-1: rgba(124, 58, 237, 0.08);
+  --bg-glow-2: rgba(217, 70, 239, 0.05);
 
   --surface: #ffffff;
   --surface-2: #ffffff;
-  --surface-3: #f1f4f9;
+  --surface-3: #f2f2f6;
   --surface-raise: #ffffff;
 
-  --border: #e3e8f0;
-  --border-soft: #edf0f6;
-  --border-strong: #d3dae6;
-
-  --text: #18202e;
-  --text-dim: #586377;
-  --text-faint: #8a95a8;
-
-  --accent: #5b63e6;
-  --accent-strong: #4a52da;
-  --accent-soft: rgba(91, 99, 230, 0.1);
-  --accent-ring: rgba(91, 99, 230, 0.35);
-
-  --green: #12a877;
-  --green-soft: rgba(18, 168, 119, 0.12);
-  --green-line: rgba(18, 168, 119, 0.32);
-  --amber: #c77d18;
-  --amber-soft: rgba(199, 125, 24, 0.12);
-  --amber-line: rgba(199, 125, 24, 0.32);
+  --border: #e5e5ec;
+  --border-soft: #eeeef3;
+  --border-strong: #d6d6df;
+
+  --text: #1a1a24;
+  --text-dim: #585866;
+  --text-faint: #8a8a99;
+
+  --accent: #7c3aed;
+  --accent-strong: #6d28d9;
+  --accent-2: #9333ea;
+  --accent-soft: rgba(124, 58, 237, 0.1);
+  --accent-ring: rgba(124, 58, 237, 0.3);
+
+  --green: #0e9f6e;
+  --green-soft: rgba(14, 159, 110, 0.12);
+  --green-line: rgba(14, 159, 110, 0.32);
+  --amber: #c2790f;
+  --amber-soft: rgba(194, 121, 15, 0.12);
+  --amber-line: rgba(194, 121, 15, 0.32);
   --red: #e0455c;
   --red-soft: rgba(224, 69, 92, 0.1);
   --red-line: rgba(224, 69, 92, 0.32);
-  --violet: #8b5cf6;
-  --cyan: #0ea5d9;
+  --teal: #0ea5b7;
 
-  --shadow: 0 16px 40px -20px rgba(28, 40, 66, 0.28);
-  --shadow-sm: 0 1px 2px rgba(28, 40, 66, 0.06), 0 2px 6px rgba(28, 40, 66, 0.05);
+  --shadow: 0 16px 40px -22px rgba(30, 25, 50, 0.26);
+  --shadow-sm: 0 1px 2px rgba(30, 25, 50, 0.06), 0 2px 6px rgba(30, 25, 50, 0.05);
   --mark: #ffd84d;
   --mark-active: #ffc21f;
   --mark-text: #3a2c00;
 }
 
+/* ---------------- DARK ---------------- */
+html[data-theme="dark"] {
+  --bg: #0c0c11;
+  --bg-glow-1: rgba(139, 92, 246, 0.14);
+  --bg-glow-2: rgba(217, 70, 239, 0.07);
+
+  --surface: #16161e;
+  --surface-2: #20202b;
+  --surface-3: #111117;
+  --surface-raise: #24242f;
+
+  --border: #2a2a36;
+  --border-soft: #1f1f29;
+  --border-strong: #3a3a48;
+
+  --text: #ededf3;
+  --text-dim: #a2a2b2;
+  --text-faint: #6a6a79;
+
+  --accent: #8b5cf6;
+  --accent-strong: #7c3aed;
+  --accent-2: #a855f7;
+  --accent-soft: rgba(139, 92, 246, 0.18);
+  --accent-ring: rgba(139, 92, 246, 0.45);
+
+  --green: #34d399;
+  --green-soft: rgba(52, 211, 153, 0.15);
+  --green-line: rgba(52, 211, 153, 0.38);
+  --amber: #fbbf24;
+  --amber-soft: rgba(251, 191, 36, 0.15);
+  --amber-line: rgba(251, 191, 36, 0.4);
+  --red: #fb7185;
+  --red-soft: rgba(251, 113, 133, 0.14);
+  --red-line: rgba(251, 113, 133, 0.4);
+  --teal: #2dd4bf;
+
+  --shadow: 0 18px 44px -20px rgba(0, 0, 0, 0.72);
+  --shadow-sm: 0 2px 10px rgba(0, 0, 0, 0.35);
+  --mark: #fbbf24;
+  --mark-active: #ffd86b;
+  --mark-text: #1a1205;
+}
+
 * { box-sizing: border-box; }
 
 html, body {
@@ -132,7 +129,6 @@ body {
 }
 
 h1, h2, h3 { margin: 0; font-weight: 680; letter-spacing: -0.015em; }
-
 ::selection { background: var(--accent-soft); }
 
 /* ---------------- Header ---------------- */
@@ -159,7 +155,7 @@ h1, h2, h3 { margin: 0; font-weight: 680; letter-spacing: -0.015em; }
   width: 42px;
   height: 42px;
   border-radius: 12px;
-  background: linear-gradient(145deg, var(--accent), var(--accent-strong));
+  background: linear-gradient(145deg, var(--accent), var(--accent-2));
   box-shadow: 0 6px 18px -6px var(--accent-ring), inset 0 1px 0 rgba(255, 255, 255, 0.25);
 }
 .brand-mark svg { width: 24px; height: 24px; }
@@ -192,13 +188,9 @@ html[data-theme="dark"] .theme-toggle .icon-sun { display: block; }
 html[data-theme="light"] .theme-toggle .icon-moon { display: block; }
 
 .offline-pill {
-  font-size: 12px;
-  font-weight: 600;
-  color: var(--green);
-  background: var(--green-soft);
-  border: 1px solid var(--green-line);
-  padding: 5px 12px;
-  border-radius: 999px;
+  font-size: 12px; font-weight: 600; color: var(--green);
+  background: var(--green-soft); border: 1px solid var(--green-line);
+  padding: 5px 12px; border-radius: 999px;
 }
 
 /* ---------------- Layout ---------------- */
@@ -221,14 +213,12 @@ html[data-theme="light"] .theme-toggle .icon-moon { display: block; }
   border-radius: var(--radius-lg);
   padding: 20px;
   box-shadow: var(--shadow);
+  position: sticky;
+  top: 90px;
 }
 .panel-title {
-  font-size: 12px;
-  font-weight: 700;
-  text-transform: uppercase;
-  letter-spacing: 0.08em;
-  color: var(--text-dim);
-  margin-bottom: 16px;
+  font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em;
+  color: var(--text-dim); margin-bottom: 16px;
 }
 
 .setting { margin-bottom: 18px; }
@@ -239,6 +229,24 @@ html[data-theme="light"] .theme-toggle .icon-moon { display: block; }
 .setting-row .setting-label { margin-bottom: 3px; }
 .hint { margin: 5px 0 0; font-size: 11.5px; color: var(--text-faint); line-height: 1.5; }
 
+/* accordions (native <details>) */
+.accordion { border-top: 1px solid var(--border-soft); }
+.accordion + .accordion { margin-top: 0; }
+.accordion-summary {
+  list-style: none;
+  cursor: pointer;
+  display: flex; align-items: center; justify-content: space-between; gap: 8px;
+  padding: 15px 2px;
+  font-size: 13px; font-weight: 650; color: var(--text);
+  user-select: none;
+}
+.accordion-summary::-webkit-details-marker { display: none; }
+.accordion-summary:hover { color: var(--accent); }
+.accordion-chevron { color: var(--text-faint); transition: transform var(--t); flex: none; }
+.accordion[open] > .accordion-summary .accordion-chevron { transform: rotate(180deg); }
+.accordion-body { padding: 2px 0 8px; }
+.accordion-body .setting:last-child { margin-bottom: 0; }
+
 .segmented {
   display: flex;
   background: var(--surface-3);
@@ -248,16 +256,9 @@ html[data-theme="light"] .theme-toggle .icon-moon { display: block; }
   gap: 4px;
 }
 .seg {
-  flex: 1;
-  border: none;
-  background: transparent;
-  color: var(--text-dim);
-  font: inherit;
-  font-size: 13px;
-  font-weight: 650;
-  padding: 8px 8px;
-  border-radius: 8px;
-  cursor: pointer;
+  flex: 1; border: none; background: transparent; color: var(--text-dim);
+  font: inherit; font-size: 13px; font-weight: 650; padding: 8px;
+  border-radius: 8px; cursor: pointer;
   transition: background var(--t-fast), color var(--t-fast), box-shadow var(--t-fast);
 }
 .seg:hover { color: var(--text); }
@@ -268,15 +269,9 @@ html[data-theme="light"] .theme-toggle .icon-moon { display: block; }
 }
 
 .select {
-  width: 100%;
-  background: var(--surface-3);
-  border: 1px solid var(--border);
-  color: var(--text);
-  font: inherit;
-  font-size: 14px;
-  padding: 10px 12px;
-  border-radius: var(--radius-sm);
-  cursor: pointer;
+  width: 100%; background: var(--surface-3); border: 1px solid var(--border);
+  color: var(--text); font: inherit; font-size: 14px; padding: 10px 12px;
+  border-radius: var(--radius-sm); cursor: pointer;
   transition: border-color var(--t-fast), box-shadow var(--t-fast);
 }
 .select:hover { border-color: var(--border-strong); }
@@ -286,89 +281,36 @@ html[data-theme="light"] .theme-toggle .icon-moon { display: block; }
 .switch { position: relative; display: inline-block; width: 46px; height: 26px; flex: none; }
 .switch input { opacity: 0; width: 0; height: 0; }
 .slider {
-  position: absolute; inset: 0; cursor: pointer;
-  background: var(--border); border-radius: 999px;
-  transition: background var(--t);
-  border: 1px solid var(--border-strong);
+  position: absolute; inset: 0; cursor: pointer; background: var(--border);
+  border-radius: 999px; transition: background var(--t); border: 1px solid var(--border-strong);
 }
 .slider::before {
   content: ""; position: absolute; height: 20px; width: 20px; left: 2px; top: 2px;
-  background: #fff; border-radius: 50%;
-  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
+  background: #fff; border-radius: 50%; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
   transition: transform var(--t);
 }
 .switch input:checked + .slider {
-  background: linear-gradient(145deg, var(--accent), var(--accent-strong));
-  border-color: transparent;
+  background: linear-gradient(145deg, var(--accent), var(--accent-strong)); border-color: transparent;
 }
 .switch input:checked + .slider::before { transform: translateX(20px); }
 .switch input:focus-visible + .slider { box-shadow: 0 0 0 3px var(--accent-ring); }
 
-/* dropzone */
-.dropzone {
-  border: 1.5px dashed var(--border-strong);
-  border-radius: var(--radius-lg);
-  padding: 32px 18px;
-  text-align: center;
-  cursor: pointer;
-  transition: border-color var(--t), background var(--t), transform var(--t-fast);
-  color: var(--text-dim);
-  background:
-    radial-gradient(120% 120% at 50% 0%, var(--accent-soft), transparent 70%),
-    var(--surface);
-  box-shadow: var(--shadow);
-}
-.dropzone:hover { border-color: var(--accent); }
-.dropzone:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
-.dropzone.dragover { border-color: var(--accent); background: var(--accent-soft); transform: scale(1.012); }
-.dz-icon { color: var(--accent); margin-bottom: 10px; }
-.dz-primary { margin: 0; font-weight: 650; color: var(--text); font-size: 15px; }
-.dz-secondary { margin: 6px 0 0; font-size: 13px; color: var(--text-dim); }
-.dz-link { color: var(--accent); font-weight: 600; }
-
-/* notes */
-.notes {
-  background: var(--surface);
-  border: 1px solid var(--border);
-  border-radius: var(--radius-lg);
-  padding: 18px 20px;
-  box-shadow: var(--shadow);
-}
-.notes-title { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; color: var(--text-dim); margin-bottom: 12px; }
-.notes ul { margin: 0; padding-left: 18px; }
-.notes li { font-size: 12px; color: var(--text-faint); margin-bottom: 7px; line-height: 1.55; }
-.notes li::marker { color: var(--accent); }
-
 /* ---------------- Work area ---------------- */
 .work { min-width: 0; display: flex; flex-direction: column; gap: 18px; }
 
 .toolbar {
-  display: flex;
-  align-items: center;
-  gap: 14px;
-  flex-wrap: wrap;
+  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
   background: color-mix(in srgb, var(--surface) 88%, transparent);
-  backdrop-filter: blur(12px);
-  -webkit-backdrop-filter: blur(12px);
-  border: 1px solid var(--border);
-  border-radius: var(--radius);
-  padding: 12px 14px;
-  position: sticky;
-  top: 86px;
-  z-index: 10;
+  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
+  border: 1px solid var(--border); border-radius: var(--radius);
+  padding: 12px 14px; position: sticky; top: 86px; z-index: 10;
   box-shadow: var(--shadow);
 }
 .search-wrap { position: relative; flex: 1; min-width: 220px; display: flex; align-items: center; }
 .search-icon { position: absolute; left: 12px; color: var(--text-faint); pointer-events: none; }
 .search-input {
-  width: 100%;
-  background: var(--surface-3);
-  border: 1px solid var(--border);
-  color: var(--text);
-  font: inherit;
-  font-size: 14px;
-  padding: 10px 12px 10px 36px;
-  border-radius: var(--radius-sm);
+  width: 100%; background: var(--surface-3); border: 1px solid var(--border); color: var(--text);
+  font: inherit; font-size: 14px; padding: 10px 12px 10px 36px; border-radius: var(--radius-sm);
   transition: border-color var(--t-fast), box-shadow var(--t-fast);
 }
 .search-input::placeholder { color: var(--text-faint); }
@@ -376,18 +318,13 @@ html[data-theme="light"] .theme-toggle .icon-moon { display: block; }
 .search-count { position: absolute; right: 12px; font-size: 12px; color: var(--text-faint); font-variant-numeric: tabular-nums; }
 .toolbar-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
 .export-group { display: flex; gap: 3px; background: var(--surface-3); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 3px; }
+.add-more { display: inline-flex; align-items: center; }
 
 /* buttons */
 .btn {
-  border: 1px solid var(--border);
-  background: var(--surface-2);
-  color: var(--text);
-  font: inherit;
-  font-size: 13px;
-  font-weight: 650;
-  padding: 9px 14px;
-  border-radius: var(--radius-sm);
-  cursor: pointer;
+  border: 1px solid var(--border); background: var(--surface-2); color: var(--text);
+  font: inherit; font-size: 13px; font-weight: 650; padding: 9px 14px;
+  border-radius: var(--radius-sm); cursor: pointer;
   transition: background var(--t-fast), border-color var(--t-fast), color var(--t-fast), opacity var(--t-fast), transform var(--t-fast), box-shadow var(--t-fast);
   box-shadow: var(--shadow-sm);
 }
@@ -404,31 +341,45 @@ html[data-theme="light"] .theme-toggle .icon-moon { display: block; }
 /* The HTML `hidden` attribute must always win over display rules below. */
 [hidden] { display: none !important; }
 
-/* empty state */
-.empty-state {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  text-align: center;
-  padding: 84px 24px;
-  color: var(--text-faint);
+/* empty state == centred dropzone hero + auto-detect */
+.empty-state { display: flex; flex-direction: column; gap: 18px; }
+
+.dropzone {
   border: 1.5px dashed var(--border-strong);
   border-radius: var(--radius-lg);
-  background: var(--surface);
+  padding: 60px 28px;
+  text-align: center;
+  cursor: pointer;
+  transition: border-color var(--t), background var(--t), transform var(--t-fast), box-shadow var(--t);
+  color: var(--text-dim);
+  background:
+    radial-gradient(130% 130% at 50% -10%, var(--accent-soft), transparent 70%),
+    var(--surface);
   box-shadow: var(--shadow);
 }
-.empty-state svg { color: var(--accent); opacity: 0.55; margin-bottom: 18px; }
-.empty-state h2 { font-size: 18px; color: var(--text-dim); margin-bottom: 6px; }
-.empty-state p { margin: 0; max-width: 360px; font-size: 14px; }
+.dropzone:hover { border-color: var(--accent); }
+.dropzone:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
+.dropzone.dragover { border-color: var(--accent); background: var(--accent-soft); transform: scale(1.008); box-shadow: 0 0 0 4px var(--accent-soft), var(--shadow); }
+.dz-icon-wrap {
+  width: 66px; height: 66px; margin: 0 auto 18px;
+  display: flex; align-items: center; justify-content: center;
+  border-radius: 20px; color: var(--accent);
+  background: var(--accent-soft);
+  box-shadow: inset 0 0 0 1px var(--accent-ring);
+}
+.dz-primary { margin: 0; font-weight: 680; color: var(--text); font-size: 18px; letter-spacing: -0.01em; }
+.dz-secondary { margin: 7px 0 0; font-size: 13.5px; color: var(--text-dim); }
+.dz-link { color: var(--accent); font-weight: 650; }
+
+.dz-extra { display: flex; flex-direction: column; align-items: center; gap: 8px; }
+.dz-extra-hint { max-width: 480px; text-align: center; margin: 0; }
+#suggestResult { width: 100%; max-width: 520px; margin: 4px auto 0; text-align: left; }
 
 /* files */
 .files-container { display: flex; flex-direction: column; gap: 18px; }
 .file-card {
-  background: var(--surface);
-  border: 1px solid var(--border);
-  border-radius: var(--radius-lg);
-  overflow: hidden;
-  box-shadow: var(--shadow);
+  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg);
+  overflow: hidden; box-shadow: var(--shadow);
 }
 .file-head {
   display: flex; align-items: center; justify-content: space-between; gap: 12px;
@@ -451,23 +402,16 @@ html[data-theme="light"] .theme-toggle .icon-moon { display: block; }
 .progress-label { font-size: 12px; color: var(--text-dim); font-variant-numeric: tabular-nums; flex: none; }
 
 .file-error {
-  margin: 0 18px 15px;
-  padding: 11px 13px;
-  background: var(--red-soft);
-  border: 1px solid var(--red-line);
-  border-radius: var(--radius-sm);
-  color: var(--red);
-  font-size: 13px;
+  margin: 0 18px 15px; padding: 11px 13px; background: var(--red-soft);
+  border: 1px solid var(--red-line); border-radius: var(--radius-sm); color: var(--red); font-size: 13px;
 }
 
 .pages { display: flex; flex-direction: column; gap: 13px; padding: 5px 18px 18px; }
 
 /* page card */
 .page-card {
-  border: 1px solid var(--border-soft);
-  border-radius: var(--radius);
-  background: var(--surface-3);
-  overflow: hidden;
+  border: 1px solid var(--border-soft); border-radius: var(--radius);
+  background: var(--surface-3); overflow: hidden;
 }
 .page-head { display: flex; align-items: center; gap: 10px; padding: 10px 13px; border-bottom: 1px solid var(--border-soft); }
 .page-num { font-size: 13px; font-weight: 700; color: var(--text-dim); }
@@ -476,35 +420,24 @@ html[data-theme="light"] .theme-toggle .icon-moon { display: block; }
 .badge.text { color: var(--green); background: var(--green-soft); border: 1px solid var(--green-line); }
 .badge.ocr { color: var(--amber); background: var(--amber-soft); border: 1px solid var(--amber-line); }
 .badge.ocr.lowconf { color: var(--red); background: var(--red-soft); border-color: var(--red-line); }
-.badge.handwriting { color: var(--violet); background: color-mix(in srgb, var(--violet) 16%, transparent); border: 1px solid color-mix(in srgb, var(--violet) 40%, transparent); }
-.badge.online { color: var(--cyan); background: color-mix(in srgb, var(--cyan) 15%, transparent); border: 1px solid color-mix(in srgb, var(--cyan) 40%, transparent); }
+.badge.handwriting { color: var(--accent); background: var(--accent-soft); border: 1px solid var(--accent-ring); }
+.badge.online { color: var(--teal); background: color-mix(in srgb, var(--teal) 15%, transparent); border: 1px solid color-mix(in srgb, var(--teal) 40%, transparent); }
 .beta-tag { font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--accent); background: var(--accent-soft); padding: 1px 5px; border-radius: 999px; vertical-align: middle; }
 .badge.error { color: var(--red); background: var(--red-soft); border: 1px solid var(--red-line); }
 .badge.pending { color: var(--text-faint); background: var(--surface-2); border: 1px solid var(--border); }
 
 .page-text {
-  margin: 0;
-  padding: 15px 17px;
-  white-space: pre-wrap;
-  word-break: break-word;
-  font-family: var(--mono);
-  font-size: 13px;
-  line-height: 1.65;
-  color: var(--text);
-  max-height: 460px;
-  overflow: auto;
+  margin: 0; padding: 15px 17px; white-space: pre-wrap; word-break: break-word;
+  font-family: var(--mono); font-size: 13px; line-height: 1.65; color: var(--text);
+  max-height: 460px; overflow: auto;
 }
 .page-text:empty::before { content: "(no text on this page)"; color: var(--text-faint); font-style: italic; }
 .page-text mark { background: var(--mark); color: var(--mark-text); border-radius: 3px; padding: 0 2px; }
 .page-text mark.active { background: var(--mark-active); outline: 1.5px solid var(--amber); }
 
-/* Low-confidence line highlight ("which lines to check") */
 .lc-line { background: var(--amber-soft); border-bottom: 1px dashed var(--amber-line); border-radius: 3px; }
-
-/* "N to check" chip in the page header */
 .to-check { font-size: 11px; font-weight: 600; color: var(--amber); background: var(--amber-soft); border: 1px solid var(--amber-line); border-radius: 999px; padding: 2px 9px; white-space: nowrap; }
 
-/* Inline edit box - matches the read-only text view */
 .page-edit {
   width: 100%; box-sizing: border-box; margin: 0;
   padding: 15px 17px; min-height: 180px; max-height: 460px; resize: vertical;
@@ -512,8 +445,7 @@ html[data-theme="light"] .theme-toggle .icon-moon { display: block; }
   font-family: var(--mono); font-size: 13px; line-height: 1.65;
   color: var(--text); background: var(--surface-3);
   border: 1px solid var(--accent); border-radius: 0 0 var(--radius) var(--radius);
-  outline: none;
-  box-shadow: inset 0 0 0 3px var(--accent-soft);
+  outline: none; box-shadow: inset 0 0 0 3px var(--accent-soft);
 }
 
 .page-image-wrap { padding: 13px 17px; border-top: 1px solid var(--border-soft); background: var(--surface); }
@@ -522,36 +454,46 @@ html[data-theme="light"] .theme-toggle .icon-moon { display: block; }
 
 /* toast */
 .toast {
-  position: fixed;
-  bottom: 26px;
-  left: 50%;
-  transform: translateX(-50%) translateY(12px);
-  background: var(--surface-raise);
-  border: 1px solid var(--border);
-  color: var(--text);
-  padding: 12px 20px;
-  border-radius: 999px;
-  font-size: 13.5px;
-  font-weight: 600;
-  box-shadow: var(--shadow);
-  opacity: 0;
-  transition: opacity var(--t), transform var(--t);
-  z-index: 50;
-  pointer-events: none;
+  position: fixed; bottom: 26px; left: 50%; transform: translateX(-50%) translateY(12px);
+  background: var(--surface-raise); border: 1px solid var(--border); color: var(--text);
+  padding: 12px 20px; border-radius: 999px; font-size: 13.5px; font-weight: 600;
+  box-shadow: var(--shadow); opacity: 0; transition: opacity var(--t), transform var(--t);
+  z-index: 50; pointer-events: none;
 }
 .toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
 
+/* footer tips */
+.app-footer { max-width: 1440px; width: 100%; margin: 0 auto; padding: 4px 26px 28px; }
+.footer-tips {
+  border: 1px solid var(--border); border-radius: var(--radius);
+  background: var(--surface); box-shadow: var(--shadow-sm); padding: 2px 16px;
+}
+.footer-tips > summary {
+  list-style: none; cursor: pointer; user-select: none;
+  display: flex; align-items: center; gap: 8px;
+  padding: 13px 2px; font-size: 13px; font-weight: 650; color: var(--text-dim);
+}
+.footer-tips > summary::-webkit-details-marker { display: none; }
+.footer-tips > summary svg { color: var(--accent); flex: none; }
+.footer-tips > summary:hover { color: var(--text); }
+.footer-tips-list { margin: 0 0 14px; padding-left: 22px; }
+.footer-tips-list li { font-size: 12.5px; color: var(--text-faint); margin-bottom: 6px; line-height: 1.55; }
+.footer-tips-list li::marker { color: var(--accent); }
+
 /* responsive */
 @media (max-width: 900px) {
   .layout { grid-template-columns: 1fr; padding: 16px; gap: 18px; }
+  .panel { position: static; }
   .toolbar { position: static; }
   .sidebar { order: 2; }
   .work { order: 1; }
+  .app-footer { padding: 4px 16px 22px; }
 }
 @media (max-width: 520px) {
   .app-header { padding: 12px 16px; }
   .brand-text h1 { font-size: 17px; }
   .toolbar-actions { width: 100%; justify-content: space-between; }
+  .dropzone { padding: 44px 20px; }
 }
 
 /* scrollbars */
@@ -560,36 +502,29 @@ html[data-theme="light"] .theme-toggle .icon-moon { display: block; }
 .page-text::-webkit-scrollbar-thumb:hover { background: var(--text-faint); }
 .page-text::-webkit-scrollbar-track { background: transparent; }
 
-/* Large-handwriting / online sub-setting: indented under its toggle */
+/* online (Gemini) sub-setting */
 .setting-sub { margin-left: 4px; padding-left: 13px; border-left: 2px solid var(--accent-soft); }
 
-/* "Suggest best settings" recommendation panel */
+/* "Auto-detect best settings" recommendation panel */
 .btn-primary { background: linear-gradient(145deg, var(--accent), var(--accent-strong)); color: var(--accent-contrast); border-color: transparent; box-shadow: 0 6px 16px -6px var(--accent-ring); }
 .btn-primary:hover { filter: brightness(1.06); border-color: transparent; }
-.suggest-card { margin-top: 6px; padding: 12px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface-3); }
+.suggest-card { margin-top: 6px; padding: 13px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface-3); }
 .suggest-rationale { font-size: 12px; line-height: 1.5; margin: 0 0 8px; color: var(--text-dim); }
 .suggest-evidence { font-size: 11px; font-family: var(--mono); margin-bottom: 8px; }
 .ev-row { display: grid; grid-template-columns: 1.5fr 1fr 0.9fr 0.9fr; gap: 6px; padding: 2px 0; opacity: 0.72; }
 .ev-row.best { opacity: 1; font-weight: 650; color: var(--text); }
 
-/* Online (Gemini) settings */
+/* online (Gemini) settings */
 .online-input { width: 100%; margin-bottom: 6px; font-family: var(--mono); font-size: 12px; }
 .online-key-actions { display: flex; align-items: center; gap: 8px; }
 .online-status { font-size: 11px; }
 .online-status.good { color: var(--green); }
 .online-status.bad { color: var(--red); }
 
-/* Remove (x) button on a file card */
+/* remove (x) button on a file card */
 .btn-remove { color: var(--text-dim); font-size: 18px; line-height: 1; padding: 3px 9px; font-weight: 700; box-shadow: none; border-color: transparent; background: transparent; }
 .btn-remove:hover { color: var(--red); background: var(--red-soft); transform: none; }
 
-/* Settings group sub-headings */
-.setting-group-label {
-  font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.09em;
-  color: var(--text-faint); margin: 20px 0 6px; padding-top: 16px;
-  border-top: 1px solid var(--border-soft);
-}
-
 @media (prefers-reduced-motion: reduce) {
   * { transition: none !important; animation: none !important; }
 }