codoom1 · codoom1 · Jul 24, 2026 · Jul 24, 2026
diff --git a/public/static/css/app.css b/public/static/css/app.css
@@ -37,6 +37,16 @@ body {
     -webkit-font-smoothing: antialiased;
 }
 
+.app-main,
+.content,
+.card,
+.card-body,
+.tab-content,
+.tab-pane {
+    min-width: 0;
+    max-width: 100%;
+}
+
 a { color: var(--teal-700); }
 a:hover { color: var(--navy-800); }
 
@@ -60,7 +70,7 @@ h1, h2, h3, h4, h5, h6 {
 
 .app-navbar {
     min-height: 76px;
-    background: rgba(16, 42, 67, .98);
+    background: var(--navy-900);
     box-shadow: 0 1px 0 rgba(255,255,255,.08);
 }
 
@@ -150,7 +160,12 @@ h1, h2, h3, h4, h5, h6 {
     font-weight: 800;
 }
 
-.app-main { flex: 1; }
+.app-main { flex: 1; isolation: isolate; }
+.app-main,
+.app-main * {
+    backdrop-filter: none !important;
+    -webkit-backdrop-filter: none !important;
+}
 .content { min-height: 60vh; padding-top: 2rem; padding-bottom: 3rem; }
 .flash-wrap { padding-top: 1rem; }
 .flash-wrap:empty { display: none; }
@@ -176,6 +191,11 @@ h1, h2, h3, h4, h5, h6 {
 .bg-success { background: var(--teal-700) !important; }
 .bg-info { color: var(--navy-950) !important; background: var(--teal-100) !important; }
 .text-primary { color: var(--teal-700) !important; }
+.text-success { color: #1e6857 !important; }
+.text-warning { color: #765707 !important; }
+.text-info { color: #145268 !important; }
+.model-detail-header .text-info,
+.cta-panel .text-info { color: #99f6e4 !important; }
 
 .btn {
     border-radius: .65rem;
@@ -213,6 +233,59 @@ h1, h2, h3, h4, h5, h6 {
     box-shadow: 0 0 0 .22rem rgba(13,148,136,.14);
 }
 
+code {
+    padding: .14rem .36rem;
+    color: #0b625c;
+    background: #e4f4f1;
+    border: 1px solid #c5e8e2;
+    border-radius: .32rem;
+    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
+    font-size: .88em;
+    font-weight: 650;
+    text-shadow: none;
+}
+
+pre,
+.code-block {
+    max-width: 100%;
+    color: #edf7fa !important;
+    background: #0b1f33 !important;
+    border: 1px solid #28465e !important;
+    border-radius: .75rem !important;
+    box-shadow: none !important;
+    filter: none !important;
+    backdrop-filter: none !important;
+    text-shadow: none !important;
+}
+
+pre {
+    width: 100%;
+    padding: 1rem 1.1rem !important;
+    overflow-x: auto !important;
+    overflow-y: visible;
+    white-space: pre;
+    tab-size: 4;
+}
+
+pre code,
+.code-block pre {
+    display: block;
+    width: 100%;
+    min-width: 0;
+    max-width: 100%;
+    padding: 0;
+    color: #edf7fa !important;
+    background: transparent !important;
+    border: 0;
+    font-size: .86rem;
+    font-weight: 500;
+    line-height: 1.65;
+    opacity: 1 !important;
+    overflow-wrap: anywhere;
+    white-space: pre-wrap;
+    text-shadow: none !important;
+}
+
 .badge { padding: .4em .65em; border-radius: 999px; font-weight: 650; }
 .alert-info { color: #23485b; background: #eaf7f8; border-color: #bfe5e7; }
 

diff --git a/templates/home.html b/templates/home.html
@@ -25,6 +25,7 @@
     border: 1px solid rgba(255,255,255,.12);
     border-radius: 50%;
     box-shadow: 0 0 0 4rem rgba(255,255,255,.025), 0 0 0 8rem rgba(255,255,255,.018);
+    pointer-events: none;
 }
 .hero-grid { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(320px, .85fr); gap: clamp(2.5rem, 7vw, 6rem); align-items: center; }
 .hero-kicker { display: inline-flex; gap: .5rem; align-items: center; margin-bottom: 1.25rem; color: #9ce9df; font-size: .78rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
@@ -34,7 +35,7 @@
 .hero-actions .btn { padding: .8rem 1.15rem; }
 .hero-proof { display: flex; flex-wrap: wrap; gap: 1.25rem; margin-top: 2rem; color: #b8cbd8; font-size: .88rem; }
 .hero-proof i { color: #5eead4; }
-.method-card { padding: 1.4rem; color: #d8e7ef; background: rgba(255,255,255,.075); border: 1px solid rgba(255,255,255,.14); border-radius: 1.35rem; backdrop-filter: blur(12px); }
+.method-card { padding: 1.4rem; color: #d8e7ef; background: #15394f; border: 1px solid #3d6176; border-radius: 1.35rem; }
 .method-card h2 { margin-bottom: 1.2rem; color: white; font-size: .9rem; letter-spacing: .1em; text-transform: uppercase; }
 .method-step { display: grid; grid-template-columns: 2.2rem 1fr; gap: .8rem; padding: .9rem 0; border-top: 1px solid rgba(255,255,255,.1); }
 .method-step:first-of-type { border-top: 0; }

diff --git a/templates/model_details.html b/templates/model_details.html
@@ -4,7 +4,7 @@
 
 {% block extra_css %}
 <style>
-    .model-detail-shell { max-width: 1080px; margin: 0 auto; }
+    .model-detail-shell { width: 100%; max-width: 1080px; min-width: 0; margin: 0 auto; }
     .model-detail-breadcrumb { margin-bottom: 1rem; color: var(--muted); font-size: .9rem; }
     .model-detail-breadcrumb a { font-weight: 700; text-decoration: none; }
     .model-detail-header {
@@ -31,12 +31,15 @@
         color: #1a5d9f;
     }
     .tab-content .implementation-tab {
+        min-width: 0;
+        max-width: 100%;
         background-color: #ffffff;
         border: 1px solid #dee2e6;
         border-top: none;
     }
     pre { padding: 1rem; background: #0b1f33 !important; border-radius: .7rem; }
     pre code { color: #d6e7ef; }
+    .nav-tabs { flex-wrap: wrap; }
 </style>
 {% endblock %}
 
@@ -194,7 +197,7 @@ <h5 class="mb-0">Synthetic Data Example</h5>
                                 <!-- R Code Tab -->
                                 <div class="tab-pane fade show active" id="code" role="tabpanel">
                                     <h6>R Code for Data Generation and Analysis</h6>
-                                    <pre class="bg-light p-3" style="overflow-x: auto;"><code>{{ model_details.synthetic_data.r_code }}</code></pre>
+                                    <pre class="code-sample"><code>{{ model_details.synthetic_data.r_code }}</code></pre>
                                     <div class="alert alert-info mt-3">
                                         <i class="bi bi-info-circle-fill me-2"></i>
                                         <small>Copy this code into your R environment to generate synthetic data and perform analysis with this model.</small>
@@ -212,7 +215,7 @@ <h6 class="mb-3">Expected Analysis Results</h6>
                                             <h6 class="mb-0">Console Output</h6>
                                         </div>
                                         <div class="card-body">
-                                            <pre class="bg-dark text-white p-3" style="overflow-x: auto; font-size: 0.85rem;"><code>{{ model_details.synthetic_data.results.text_output }}</code></pre>
+                                            <pre class="code-sample"><code>{{ model_details.synthetic_data.results.text_output }}</code></pre>
                                         </div>
                                     </div>
 

diff --git a/templates/model_interpretation.html b/templates/model_interpretation.html
@@ -264,6 +264,109 @@
             background: linear-gradient(45deg, var(--success-color), #27ae60);
             border: none;
         }
+
+        /* Solid, high-contrast reading surfaces */
+        body {
+            color: #172b3a;
+            background: #f5f8fa;
+            background-attachment: scroll;
+        }
+
+        .header {
+            color: white;
+            background: #102a43;
+            box-shadow: none;
+        }
+
+        .header::before {
+            display: none;
+        }
+
+        .header h1,
+        .header .lead {
+            color: white;
+            opacity: 1;
+        }
+
+        .interpretation-section,
+        .figure-container,
+        .footer {
+            overflow: visible;
+            background: white;
+            border: 1px solid #dce5eb;
+            box-shadow: 0 8px 24px rgba(16, 42, 67, 0.07);
+        }
+
+        .interpretation-section:hover,
+        .figure-container:hover {
+            transform: none;
+            box-shadow: 0 8px 24px rgba(16, 42, 67, 0.07);
+        }
+
+        .interpretation-section h2 {
+            color: #102a43;
+            border-bottom-color: #dce5eb;
+        }
+
+        .interpretation-section h2::after {
+            background: #0f766e;
+        }
+
+        .section-icon,
+        h4 {
+            color: #0f766e;
+        }
+
+        .interpretation-note {
+            color: #183b56;
+            background: #eaf7f8;
+            border-left-color: #0f766e;
+        }
+
+        .interpretation-note strong {
+            color: #0b625c;
+        }
+
+        .warning-note {
+            color: #5f4916;
+            background: #fff8e5;
+            border-left-color: #b68112;
+        }
+
+        .warning-note strong {
+            color: #765707;
+        }
+
+        .interpretation-tip {
+            color: #214c42;
+            background: #e9f7f1;
+            border-left-color: #287d68;
+        }
+
+        .interpretation-tip strong {
+            color: #1e6857;
+        }
+
+        th {
+            color: white;
+            background: #102a43;
+        }
+
+        tr:hover {
+            background: #edf6f5;
+        }
+
+        .action-btn,
+        .action-btn:hover {
+            transform: none;
+            box-shadow: none;
+        }
+
+        .action-btn.btn-primary,
+        .action-btn.btn-success {
+            background: #0f766e;
+            border: 1px solid #0f766e;
+        }
 
         @media print {
             .no-print {
@@ -568,4 +671,4 @@ <h2><i class="bi bi-book section-icon"></i>Further Reading</h2>
             </div>
         </div>
     </div>
-{% endblock %} 
+{% endblock %}
diff --git a/templates/models_list.html b/templates/models_list.html
@@ -7,7 +7,7 @@
 <style>
 .library-header { padding: 2rem 0 1.25rem; }
 .library-header h1 { max-width: 760px; font-size: clamp(2.2rem, 5vw, 3.6rem); }
-.library-tools { position: sticky; top: 76px; z-index: 20; padding: 1rem 0; background: rgba(245,248,250,.94); border-bottom: 1px solid var(--line); backdrop-filter: blur(10px); }
+.library-tools { position: sticky; top: 76px; z-index: 20; padding: 1rem 0; background: #f5f8fa; border-bottom: 1px solid var(--line); }
 .library-search { position: relative; max-width: 580px; }
 .library-search i { position: absolute; top: 50%; left: 1rem; color: var(--muted); transform: translateY(-50%); }
 .library-search input { width: 100%; padding: .8rem 1rem .8rem 2.7rem; background: white; border: 1px solid var(--line); border-radius: .8rem; outline: none; }

diff --git a/templates/results.html b/templates/results.html
@@ -7,7 +7,7 @@
 <style>
 .result-shell { max-width: 1080px; margin: 0 auto; }
 .result-hero { position: relative; overflow: hidden; padding: clamp(2rem, 5vw, 3.5rem); color: white; background: linear-gradient(125deg, #102a43, #124b55); border-radius: 1.5rem; box-shadow: var(--shadow-md); }
-.result-hero::after { position: absolute; right: -5rem; bottom: -8rem; width: 20rem; height: 20rem; content: ""; border: 1px solid rgba(255,255,255,.16); border-radius: 50%; box-shadow: 0 0 0 3rem rgba(255,255,255,.025); }
+.result-hero::after { position: absolute; right: -5rem; bottom: -8rem; width: 20rem; height: 20rem; content: ""; border: 1px solid rgba(255,255,255,.16); border-radius: 50%; box-shadow: 0 0 0 3rem rgba(255,255,255,.025); pointer-events: none; }
 .result-hero > * { position: relative; z-index: 1; }
 .result-label { display: inline-flex; align-items: center; gap: .45rem; margin-bottom: 1rem; color: #99f6e4; font-size: .78rem; font-weight: 800; letter-spacing: .11em; text-transform: uppercase; }
 .result-hero h1 { max-width: 760px; margin-bottom: 1rem; color: white; font-size: clamp(2.25rem, 5vw, 3.8rem); }

diff --git a/tests/test_main_routes.py b/tests/test_main_routes.py
@@ -1,9 +1,6 @@
 """
 Test the main routes and analysis functionality.
 """
-import sys
-from types import ModuleType
-
 from models import Analysis
 
 
@@ -50,18 +47,8 @@ def test_generic_model_links_open_full_catalog(
         assert home_response.data.count(b'href="/models"') >= 3
         assert b'href="/models"' in results_response.data
 
-    def test_double_encoded_model_detail_urls(self, client, monkeypatch):
+    def test_double_encoded_model_detail_urls(self, client):
         """Encoded model links work across detail and interpretation routes."""
-        interpretation_module = ModuleType('utils.interpretation')
-        interpretation_module.generate_interpretation_data = (
-            lambda _model_name, _model_info: {}
-        )
-        monkeypatch.setitem(
-            sys.modules,
-            'utils.interpretation',
-            interpretation_module,
-        )
-
         detail_response = client.get('/model/Linear%2520Regression')
         interpretation_response = client.get(
             '/model/Linear%2520Regression/interpretation'

diff --git a/utils/interpretation.py b/utils/interpretation.py
@@ -272,9 +272,10 @@ def get_diagnostic_plots(model_name: str, model_details: Dict[str, Any], check_s
                     return generate_pca_plots(X, feature_names)
             except Exception as e:
                 print(f"Error generating PCA plots: {e}")
-    except NameError:
-        # If utilities weren't imported successfully, continue with default behavior
-        pass
+    except (ImportError, NameError):
+        # Optional offline plot dependencies are not installed in production.
+        # Continue with the model-specific explanatory fallback instead.
+        pass
 
     # Linear regression standard plots (fallback)
     if "linear regression" in model_name_lower:
@@ -587,4 +588,4 @@ def get_further_reading(model_name: str) -> List[Dict[str, str]]:
             }
         ]
 
-    return common_resources + model_resources 
+    return common_resources + model_resources