feat: Implement dark mode functionality and refine various frontend layout styles.

frontend/app.js

@@ -88,6 +88,9 @@ const physicianNotesInput = document.getElementById("physicianNotesInput");
 const confirmShareButton = document.getElementById("confirmShareButton");
 const shareEmailInput = document.getElementById("shareEmailInput");
 const shareMessageInput = document.getElementById("shareMessageInput");
+const themeRadios = Array.from(document.querySelectorAll("input[name='theme']"));
+const THEME_KEY = "oncovision.theme";
+const prefersDarkScheme = window.matchMedia("(prefers-color-scheme: dark)");
 
 const analysisMessages = [
     "Processing 324 slices",
@@ -100,6 +103,7 @@ wireUpload();
 wireActions();
 wireModals();
 wireTechnicalTabs();
+wireThemeSelector();
 renderRecentUploads();
 renderHistoryPage();
 updateNavState();
@@ -259,6 +263,45 @@ function wireModals() {
     });
 }
 
+function wireThemeSelector() {
+    const stored = localStorage.getItem(THEME_KEY) || "auto";
+    themeRadios.forEach((input) => {
+        input.checked = input.value === stored;
+        input.addEventListener("change", () => {
+            localStorage.setItem(THEME_KEY, input.value);
+            applyTheme(input.value);
+        });
+    });
+
+    applyTheme(stored);
+    const handleSystemThemeChange = () => {
+        if (localStorage.getItem(THEME_KEY) === "auto") {
+            applyTheme("auto");
+        }
+    };
+
+    if (typeof prefersDarkScheme.addEventListener === "function") {
+        prefersDarkScheme.addEventListener("change", handleSystemThemeChange);
+    } else if (typeof prefersDarkScheme.addListener === "function") {
+        prefersDarkScheme.addListener(handleSystemThemeChange);
+    }
+}
+
+function applyTheme(preference) {
+    const resolved =
+        preference === "dark"
+            ? "dark"
+            : preference === "light"
+                ? "light"
+                : prefersDarkScheme.matches
+                    ? "dark"
+                    : "light";
+
+    document.body.classList.toggle("theme-dark", resolved === "dark");
+    document.body.classList.toggle("theme-light", resolved === "light");
+    document.documentElement.dataset.theme = preference;
+}
+
 function wireTechnicalTabs() {
     technicalTabs.forEach((tab) => {
         tab.addEventListener("click", () => {
@@ -660,7 +703,7 @@ function renderHistoryPage() {
 
     if (!items.length) {
         historyGroups.innerHTML = `
-            <article class="card" style="max-width: var(--content-width);">
+            <article class="card">
                 <h3>No scans yet</h3>
                 <p class="summary-text">Analyze a CT scan to start building your history.</p>
             </article>

frontend/index.html

@@ -57,7 +57,7 @@
                 <section class="hero">
                     <div class="hero__copy page-entrance">
                         <p class="eyebrow">Clinical-grade AI review</p>
-                        <h1>Detect lung cancer earlier with AI-powered analysis.</h1>
+                        <h1>Detect lung cancer earlier with <span class="nowrap">AI-powered</span> analysis.</h1>
                         <p class="hero__subtitle">Calm, focused software for CT scan upload, nodule detection, and risk review.</p>
                         <p class="hero__lede">
                             OncoVision-X transforms complex chest CT volumes into clear findings, actionable next steps,
@@ -639,142 +639,135 @@ print(response.json()["analysis"])</code></pre>
         </footer>
     </div>
 
-    <div class="modal-backdrop" id="modalBackdrop" hidden>
-        <div class="modal modal--settings" id="settingsModal" hidden>
-            <div class="modal__header">
-                <h2>Settings</h2>
-                <button class="icon-close" data-close-modal type="button">×</button>
-            </div>
-            <div class="modal__body">
-                <section class="settings-group">
-                    <h3>Account</h3>
-                    <p>Name: Dr. Sarah Chen</p>
-                    <p>Email: sarah@hospital.com</p>
-                </section>
-                <section class="settings-group">
-                    <h3>Preferences</h3>
-                    <label><input type="checkbox" checked> Email notifications</label>
-                    <label><input type="checkbox" checked> Auto-save scans</label>
-                    <label><input type="checkbox"> Share anonymous data</label>
-                </section>
-                <section class="settings-group">
-                    <h3>Display</h3>
-                    <label><input type="radio" name="theme" checked> Light</label>
-                    <label><input type="radio" name="theme"> Auto</label>
-                    <label><input type="radio" name="theme"> Dark</label>
-                </section>
-            </div>
-            <div class="modal__footer">
-                <button class="button button--primary" data-close-modal type="button">Save Changes</button>
+        <div class="modal-backdrop" id="modalBackdrop" hidden>
+            <div class="modal modal--settings" id="settingsModal" hidden>
+                <div class="modal__header">
+                    <h2>Settings</h2>
+                    <button class="icon-close" data-close-modal type="button">×</button>
+                </div>
+                <div class="modal__body">
+                    <section class="settings-group">
+                        <h3>Preferences</h3>
+                        <label><input type="checkbox" checked> Email notifications</label>
+                        <label><input type="checkbox" checked> Auto-save scans</label>
+                        <label><input type="checkbox"> Share anonymous data</label>
+                    </section>
+                    <section class="settings-group">
+                        <h3>Display</h3>
+                        <label><input type="radio" name="theme" value="light" checked> Light</label>
+                        <label><input type="radio" name="theme" value="auto"> Auto</label>
+                        <label><input type="radio" name="theme" value="dark"> Dark</label>
+                    </section>
+                </div>
+                <div class="modal__footer">
+                    <button class="button button--primary" data-close-modal type="button">Save Changes</button>
+                </div>
             </div>
-        </div>
 
-        <div class="modal" id="helpModal" hidden>
-            <div class="modal__header">
-                <h2>Documentation</h2>
-                <button class="icon-close" data-close-modal type="button">×</button>
-            </div>
-            <div class="modal__body">
-                <input class="search-input" type="search" placeholder="Search workflow notes">
-                <section class="settings-group">
-                    <h3>Getting Started</h3>
-                    <p>Upload one CT volume or use the sample study from the upload page.</p>
-                    <p>Wait for preprocessing, candidate review, and report assembly to complete before navigating away.</p>
-                    <p>Open the results page to inspect the scan views, summary banner, nodule cards, and timing metrics.</p>
-                </section>
-                <section class="settings-group">
-                    <h3>Reading Results</h3>
-                    <p>Risk labels summarize the highest malignancy probability found in the current scan.</p>
-                    <p>Each nodule card lists location, detection confidence, malignancy probability, and follow-up guidance.</p>
-                    <p>Use the CT visualization and the exported PDF together when preparing printouts or handoffs.</p>
-                </section>
-                <section class="settings-group">
-                    <h3>Exports and Sharing</h3>
-                    <p>Use Export PDF for a formatted report with dedicated imaging pages suitable for printing.</p>
-                    <p>Use Share to prepare a review link and message for another clinician or collaborator.</p>
-                    <p>Use Export Image when you only need the current visualization panel.</p>
-                </section>
-                <section class="settings-group">
-                    <h3>Troubleshooting</h3>
-                    <p>If a scan does not appear, confirm the file is `.nii`, `.nii.gz`, `.mhd`, `.npy`, or `.npz`.</p>
-                    <p>If the PDF layout looks outdated, refresh the browser before generating a new report.</p>
-                    <p>If results look unexpected, compare the current scan against prior exports from the History page.</p>
-                </section>
-            </div>
-            <div class="modal__footer">
-                <button class="button button--primary" data-close-modal type="button">Close</button>
+            <div class="modal" id="helpModal" hidden>
+                <div class="modal__header">
+                    <h2>Documentation</h2>
+                    <button class="icon-close" data-close-modal type="button">×</button>
+                </div>
+                <div class="modal__body">
+                    <input class="search-input" type="search" placeholder="Search workflow notes">
+                    <section class="settings-group">
+                        <h3>Getting Started</h3>
+                        <p>Upload one CT volume or use the sample study from the upload page.</p>
+                        <p>Wait for preprocessing, candidate review, and report assembly to complete before navigating away.</p>
+                        <p>Open the results page to inspect the scan views, summary banner, nodule cards, and timing metrics.</p>
+                    </section>
+                    <section class="settings-group">
+                        <h3>Reading Results</h3>
+                        <p>Risk labels summarize the highest malignancy probability found in the current scan.</p>
+                        <p>Each nodule card lists location, detection confidence, malignancy probability, and follow-up guidance.</p>
+                        <p>Use the CT visualization and the exported PDF together when preparing printouts or handoffs.</p>
+                    </section>
+                    <section class="settings-group">
+                        <h3>Exports and Sharing</h3>
+                        <p>Use Export PDF for a formatted report with dedicated imaging pages suitable for printing.</p>
+                        <p>Use Share to prepare a review link and message for another clinician or collaborator.</p>
+                        <p>Use Export Image when you only need the current visualization panel.</p>
+                    </section>
+                    <section class="settings-group">
+                        <h3>Troubleshooting</h3>
+                        <p>If a scan does not appear, confirm the file is `.nii`, `.nii.gz`, `.mhd`, `.npy`, or `.npz`.</p>
+                        <p>If the PDF layout looks outdated, refresh the browser before generating a new report.</p>
+                        <p>If results look unexpected, compare the current scan against prior exports from the History page.</p>
+                    </section>
+                </div>
+                <div class="modal__footer">
+                    <button class="button button--primary" data-close-modal type="button">Close</button>
+                </div>
             </div>
-        </div>
 
-        <div class="modal" id="exportModal" hidden>
-            <div class="modal__header">
-                <h2>Generate PDF Report</h2>
-                <button class="icon-close" data-close-modal type="button">×</button>
-            </div>
-            <div class="modal__body">
-                <section class="settings-group">
-                    <h3>Include in report</h3>
-                    <label><input type="checkbox" checked> Cover page</label>
-                    <label><input type="checkbox" checked> Executive summary</label>
-                    <label><input type="checkbox" checked> Detailed nodule findings</label>
-                    <label><input type="checkbox" checked> CT scan visualization</label>
-                    <label><input type="checkbox" checked> Technical metadata</label>
-                    <label><input type="checkbox" checked> Medical disclaimer</label>
-                </section>
-                <section class="settings-group">
-                    <h3>Report Style</h3>
-                    <label><input type="radio" name="report-style"> Standard</label>
-                    <label><input type="radio" name="report-style" checked> Professional</label>
-                    <label><input type="radio" name="report-style"> Compact</label>
-                </section>
-                <section class="settings-group">
-                    <h3>Patient Information</h3>
-                    <input class="search-input" id="patientNameInput" type="text" placeholder="Name">
-                    <input class="search-input" id="patientMrnInput" type="text" placeholder="MRN">
-                    <input class="search-input" id="patientDobInput" type="text" placeholder="DOB">
-                </section>
-                <section class="settings-group">
-                    <h3>Physician Notes</h3>
-                    <textarea class="notes-input" id="physicianNotesInput" placeholder="Add clinical context..."></textarea>
-                </section>
-            </div>
-            <div class="modal__footer">
-                <button class="button button--ghost" data-close-modal type="button">Cancel</button>
-                <button class="button button--secondary" id="previewExportButton" type="button">Preview</button>
-                <button class="button button--primary" id="generateExportButton" type="button">Generate PDF</button>
+            <div class="modal" id="exportModal" hidden>
+                <div class="modal__header">
+                    <h2>Generate PDF Report</h2>
+                    <button class="icon-close" data-close-modal type="button">×</button>
+                </div>
+                    <div class="modal__body">
+                        <section class="settings-group">
+                            <h3>Include in report</h3>
+                            <label><input type="checkbox" checked> Cover page</label>
+                        <label><input type="checkbox" checked> Executive summary</label>
+                        <label><input type="checkbox" checked> Detailed nodule findings</label>
+                        <label><input type="checkbox" checked> CT scan visualization</label>
+                        <label><input type="checkbox" checked> Technical metadata</label>
+                        <label><input type="checkbox" checked> Medical disclaimer</label>
+                        </section>
+                        <section class="settings-group">
+                            <h3>Report Style</h3>
+                            <p class="summary-text">Professional template only — curated for clinical handoff.</p>
+                        </section>
+                    <section class="settings-group">
+                        <h3>Patient Information</h3>
+                        <input class="search-input" id="patientNameInput" type="text" placeholder="Name">
+                        <input class="search-input" id="patientMrnInput" type="text" placeholder="MRN">
+                        <input class="search-input" id="patientDobInput" type="text" placeholder="DOB">
+                    </section>
+                    <section class="settings-group">
+                        <h3>Physician Notes</h3>
+                        <textarea class="notes-input" id="physicianNotesInput" placeholder="Add clinical context..."></textarea>
+                    </section>
+                </div>
+                <div class="modal__footer">
+                    <button class="button button--ghost" data-close-modal type="button">Cancel</button>
+                    <button class="button button--secondary" id="previewExportButton" type="button">Preview</button>
+                    <button class="button button--primary" id="generateExportButton" type="button">Generate PDF</button>
+                </div>
             </div>
-        </div>
 
-        <div class="modal" id="shareModal" hidden>
-            <div class="modal__header">
-                <h2>Share Scan Results</h2>
-                <button class="icon-close" data-close-modal type="button">×</button>
-            </div>
-            <div class="modal__body">
-                <section class="settings-group">
-                    <h3>Share Method</h3>
-                    <label><input type="radio" name="share-method"> Secure Link</label>
-                    <label><input type="radio" name="share-method" checked> Email</label>
-                    <label><input type="radio" name="share-method"> Download QR Code</label>
-                </section>
-                <section class="settings-group">
-                    <h3>Email</h3>
-                    <input class="search-input" id="shareEmailInput" type="email" placeholder="physician@example.com">
-                    <textarea class="notes-input" id="shareMessageInput" placeholder="Please review this scan..."></textarea>
-                </section>
-                <section class="settings-group">
-                    <h3>Security Options</h3>
-                    <label><input type="checkbox" checked> Require password</label>
-                    <label><input type="checkbox" checked> Notify me when viewed</label>
-                    <label><input type="checkbox"> Disable after first view</label>
-                </section>
-            </div>
-            <div class="modal__footer">
-                <button class="button button--ghost" data-close-modal type="button">Cancel</button>
-                <button class="button button--primary" id="confirmShareButton" type="button">Share Results</button>
+            <div class="modal" id="shareModal" hidden>
+                <div class="modal__header">
+                    <h2>Share Scan Results</h2>
+                    <button class="icon-close" data-close-modal type="button">×</button>
+                </div>
+                <div class="modal__body">
+                    <section class="settings-group">
+                        <h3>Share Method</h3>
+                        <label><input type="radio" name="share-method"> Secure Link</label>
+                        <label><input type="radio" name="share-method" checked> Email</label>
+                        <label><input type="radio" name="share-method"> Download QR Code</label>
+                    </section>
+                    <section class="settings-group">
+                        <h3>Email</h3>
+                        <input class="search-input" id="shareEmailInput" type="email" placeholder="physician@example.com">
+                        <textarea class="notes-input" id="shareMessageInput" placeholder="Please review this scan..."></textarea>
+                    </section>
+                    <section class="settings-group">
+                        <h3>Security Options</h3>
+                        <label><input type="checkbox" checked> Require password</label>
+                        <label><input type="checkbox" checked> Notify me when viewed</label>
+                        <label><input type="checkbox"> Disable after first view</label>
+                    </section>
+                </div>
+                <div class="modal__footer">
+                    <button class="button button--ghost" data-close-modal type="button">Cancel</button>
+                    <button class="button button--primary" id="confirmShareButton" type="button">Share Results</button>
+                </div>
             </div>
         </div>
-    </div>
 
     <template id="noduleCardTemplate">
         <article class="nodule-card">

frontend/styles.css

@@ -93,6 +93,10 @@ a {
     text-decoration: none;
 }
 
+.nowrap {
+    white-space: nowrap;
+}
+
 button {
     border: 0;
     background: none;
@@ -592,7 +596,7 @@ a:focus-visible,
 }
 
 .page-header {
-    max-width: var(--content-width);
+    width: 100%;
     padding: 56px 0 20px;
 }
 
@@ -611,9 +615,11 @@ a:focus-visible,
 
 .upload-layout {
     display: grid;
-    grid-template-columns: minmax(0, 720px) minmax(280px, 360px);
     gap: 32px;
+    grid-template-columns: minmax(0, 1.2fr) minmax(280px, 360px);
     align-items: start;
+    width: min(100%, 1120px);
+    margin: 0 auto;
 }
 
 .upload-focus {
@@ -1250,7 +1256,7 @@ a:focus-visible,
 }
 
 .history-toolbar {
-    max-width: var(--content-width);
+    width: 100%;
     display: flex;
     flex-wrap: wrap;
     gap: 12px;
@@ -1261,7 +1267,7 @@ a:focus-visible,
 }
 
 .history-group {
-    max-width: var(--content-width);
+    width: 100%;
     padding-top: 28px;
 }
 
@@ -1296,9 +1302,9 @@ a:focus-visible,
 }
 
 .technical-tabs {
-    max-width: 1120px;
-    display: flex;
-    flex-wrap: wrap;
+    width: 100%;
+    display: grid;
+    grid-template-columns: repeat(4, minmax(0, 1fr));
     gap: 12px;
 }
 
@@ -1310,7 +1316,7 @@ a:focus-visible,
     background: rgba(255, 255, 255, 0.9);
     color: var(--text-secondary);
     box-shadow: var(--shadow-sm);
-    white-space: nowrap;
+    white-space: normal;
 }
 
 .technical-tab.is-active {
@@ -1320,7 +1326,7 @@ a:focus-visible,
 }
 
 .technical-content {
-    max-width: 1120px;
+    width: 100%;
 }
 
 .technical-card {
@@ -2004,3 +2010,209 @@ a:focus-visible,
         line-height: 1.5;
     }
 }
+
+body.theme-dark {
+    background: #010101;
+    color: #f4f4f5;
+}
+
+body.theme-dark .topbar__inner {
+    background: rgba(0, 0, 0, 0.9);
+    border-color: rgba(255, 255, 255, 0.08);
+    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.85);
+}
+
+body.theme-dark .nav a {
+    color: rgba(255, 255, 255, 0.8);
+}
+
+body.theme-dark .nav a.is-active,
+body.theme-dark .nav a:hover {
+    color: #fff;
+}
+
+body.theme-dark h1,
+body.theme-dark h2,
+body.theme-dark h3,
+body.theme-dark h4,
+body.theme-dark h5,
+body.theme-dark h6,
+body.theme-dark p,
+body.theme-dark span,
+body.theme-dark strong,
+body.theme-dark small {
+    color: rgba(255, 255, 255, 0.95);
+}
+
+body.theme-dark .page-header h1,
+body.theme-dark .page-header h2,
+body.theme-dark .history-toolbar span,
+body.theme-dark .hero__subtitle,
+body.theme-dark .lead-text,
+body.theme-dark .cta-panel h2,
+body.theme-dark .page-header__actions button {
+    color: #fff;
+}
+
+body.theme-dark .hero h1,
+body.theme-dark .hero__subtitle,
+body.theme-dark .hero__lede,
+body.theme-dark .section-copy h2,
+body.theme-dark .section-copy p,
+body.theme-dark .panel-header h2,
+body.theme-dark .panel-header p,
+body.theme-dark .summary-text,
+body.theme-dark .feature-card h3,
+body.theme-dark .stat-card strong,
+body.theme-dark .history-card h3,
+body.theme-dark .history-card__file,
+body.theme-dark .history-card__date,
+body.theme-dark .history-card__score,
+body.theme-dark .risk-banner__label,
+body.theme-dark .legend span,
+body.theme-dark .results-meta,
+body.theme-dark .analysis-detail,
+body.theme-dark .breadcrumb {
+    color: rgba(255, 255, 255, 0.8);
+}
+
+body.theme-dark .card,
+body.theme-dark .modal,
+body.theme-dark .upload-zone,
+body.theme-dark .hero__visual-card,
+body.theme-dark .results-main,
+body.theme-dark .results-sidebar .card,
+body.theme-dark .history-card,
+body.theme-dark .stat-card,
+body.theme-dark .feature-card,
+body.theme-dark .step-card,
+body.theme-dark .cta-panel,
+body.theme-dark .sample-card,
+body.theme-dark .panel-header,
+body.theme-dark .technical-card,
+body.theme-dark .media-card,
+body.theme-dark .code-card,
+body.theme-dark .floating-bar,
+body.theme-dark .upload-focus,
+body.theme-dark .technical-columns,
+body.theme-dark .metric-table div,
+body.theme-dark .selected-file-panel,
+body.theme-dark .file-facts div,
+body.theme-dark .timing-grid div,
+body.theme-dark .scan-detail-grid div,
+body.theme-dark .nodule-card,
+body.theme-dark .recent-upload-item,
+body.theme-dark .empty-state {
+    background: rgba(0, 0, 0, 0.85);
+    border-color: rgba(255, 255, 255, 0.08);
+    box-shadow: 0 25px 45px rgba(0, 0, 0, 0.9);
+}
+
+body.theme-dark .results-main,
+body.theme-dark .results-sidebar .card {
+    border: 1px solid rgba(255, 255, 255, 0.06);
+}
+
+body.theme-dark .modal-backdrop {
+    background: rgba(0, 0, 0, 0.78);
+}
+
+body.theme-dark .upload-zone__icon,
+body.theme-dark .status-banner {
+    background: rgba(255, 255, 255, 0.03);
+    border: 1px solid rgba(255, 255, 255, 0.08);
+    color: #fff;
+}
+
+body.theme-dark .risk-banner {
+    border-left-width: 1px;
+}
+
+body.theme-dark .risk-banner--low {
+    background: rgba(16, 185, 129, 0.12);
+    border-left-color: var(--success);
+}
+
+body.theme-dark .risk-banner--medium {
+    background: rgba(245, 158, 11, 0.12);
+    border-left-color: var(--warning);
+}
+
+body.theme-dark .risk-banner--high {
+    background: rgba(239, 68, 68, 0.12);
+    border-left-color: var(--alert);
+}
+
+body.theme-dark .analysis-view h1 {
+    color: #fff;
+}
+
+body.theme-dark .analysis-steps span {
+    background: rgba(255, 255, 255, 0.08);
+    color: #f4f4f5;
+    border: 1px solid rgba(255, 255, 255, 0.12);
+}
+
+body.theme-dark input,
+body.theme-dark textarea,
+body.theme-dark select,
+body.theme-dark .search-input,
+body.theme-dark .filter-select {
+    background: rgba(0, 0, 0, 0.92);
+    border-color: rgba(255, 255, 255, 0.2);
+    color: #f4f4f5;
+}
+
+body.theme-dark ::placeholder {
+    color: rgba(255, 255, 255, 0.45);
+}
+
+body.theme-dark .scroll-hint span {
+    background: rgba(255, 255, 255, 0.5);
+}
+
+body.theme-dark .upload-divider span {
+    color: rgba(255, 255, 255, 0.45);
+}
+
+body.theme-dark .icon-button {
+    background: rgba(255, 255, 255, 0.05);
+    border-color: rgba(255, 255, 255, 0.12);
+    color: #fff;
+}
+
+body.theme-dark .icon-button:hover {
+    background: rgba(255, 255, 255, 0.12);
+    border-color: rgba(255, 255, 255, 0.2);
+}
+
+body.theme-dark .footer,
+body.theme-dark .footer-grid,
+body.theme-dark .footer-strip {
+    color: rgba(255, 255, 255, 0.7);
+}
+
+body.theme-dark .footer-link,
+body.theme-dark .footer-heading {
+    color: #fff;
+}
+
+body.theme-dark .technical-tabs {
+    background: rgba(0, 0, 0, 0.95);
+    border: 1px solid rgba(255, 255, 255, 0.08);
+    padding: 14px;
+    border-radius: 16px;
+}
+
+body.theme-dark .technical-tab {
+    background: rgba(255, 255, 255, 0.05);
+    border-color: rgba(255, 255, 255, 0.12);
+    color: #fff;
+    box-shadow: none;
+}
+
+body.theme-dark .technical-tab.is-active {
+    background: rgba(255, 255, 255, 0.18);
+    border-color: rgba(255, 255, 255, 0.2);
+    color: #fff;
+}