restore light theme tools + light landing pages + height fix

app/home/templates/home/index.html

@@ -5,48 +5,45 @@
 <link href="https://fonts.googleapis.com/css2?family=Space+Mono:wght@400;700&family=DM+Sans:opsz,wght@9..40,300;9..40,400;9..40,500;9..40,600&display=swap" rel="stylesheet">
 <style>
 *{box-sizing:border-box;margin:0;padding:0}
-.dk{background:#0e0e10;color:#f0f0f2;min-height:100vh;font-family:'DM Sans',sans-serif;display:flex;flex-direction:column}
+.dk{background:#f5f5f7;color:#1d1d1f;min-height:100vh;font-family:'DM Sans',sans-serif;display:flex;flex-direction:column}
 .dk a{color:inherit;text-decoration:none}
-.dk-nav{position:sticky;top:0;z-index:50;height:52px;display:flex;align-items:center;justify-content:space-between;padding:0 2rem;background:rgba(14,14,16,.9);backdrop-filter:blur(16px);border-bottom:1px solid rgba(255,255,255,.06)}
+.dk-nav{position:sticky;top:0;z-index:50;height:52px;display:flex;align-items:center;justify-content:space-between;padding:0 2rem;background:rgba(245,245,247,.88);backdrop-filter:saturate(180%) blur(20px);-webkit-backdrop-filter:saturate(180%) blur(20px);border-bottom:1px solid rgba(0,0,0,.08)}
 .dk-logo{display:flex;align-items:center;gap:10px}
-.dk-logo-icon{width:26px;height:26px;border-radius:6px;background:#00d97e;display:flex;align-items:center;justify-content:center;font-family:'Space Mono',monospace;font-weight:700;font-size:11px;color:#0e0e10}
-.dk-logo-name{font-family:'Space Mono',monospace;font-weight:700;font-size:14px;letter-spacing:-.02em}
-.dk-badge{font-family:'Space Mono',monospace;font-size:10px;letter-spacing:.1em;text-transform:uppercase;padding:3px 10px;border-radius:100px;color:#00d97e;border:1px solid rgba(0,217,126,.3)}
-.dk-hero{flex:0 0 auto;padding:6rem 2rem 5rem;max-width:860px;margin:0 auto;width:100%;text-align:center}
-.dk-eyebrow{display:inline-flex;align-items:center;gap:10px;font-family:'Space Mono',monospace;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:#00d97e;margin-bottom:1.75rem}
-.dk-eyebrow span{width:28px;height:1px;background:rgba(0,217,126,.45)}
-.dk-h1{font-family:'Space Mono',monospace;font-size:clamp(2.2rem,5vw,3.8rem);font-weight:700;line-height:1.08;letter-spacing:-.04em;color:#fff;margin-bottom:1.25rem}
-.dk-h1 em{color:#00d97e;font-style:normal}
-.cursor{display:inline-block;width:3px;height:.85em;background:#00d97e;vertical-align:middle;margin-left:2px;animation:blink 1s step-end infinite}
+.dk-logo-icon{width:26px;height:26px;border-radius:6px;background:#00d97e;display:flex;align-items:center;justify-content:center;font-family:'Space Mono',monospace;font-weight:700;font-size:11px;color:#001a0d}
+.dk-logo-name{font-family:'Space Mono',monospace;font-weight:700;font-size:14px;letter-spacing:-.02em;color:#1d1d1f}
+.dk-badge{font-family:'Space Mono',monospace;font-size:10px;letter-spacing:.1em;text-transform:uppercase;padding:3px 10px;border-radius:100px;color:#00a85e;border:1px solid rgba(0,168,94,.3);background:rgba(0,217,126,.07)}
+.dk-hero{flex:0 0 auto;padding:5.5rem 2rem 4.5rem;max-width:860px;margin:0 auto;width:100%;text-align:center}
+.dk-eyebrow{display:inline-flex;align-items:center;gap:10px;font-family:'Space Mono',monospace;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:#00a85e;margin-bottom:1.5rem}
+.dk-eyebrow span{width:28px;height:1px;background:rgba(0,168,94,.4)}
+.dk-h1{font-family:'Space Mono',monospace;font-size:clamp(2rem,5vw,3.5rem);font-weight:700;line-height:1.1;letter-spacing:-.04em;color:#1d1d1f;margin-bottom:1.1rem}
+.dk-h1 em{color:#00a85e;font-style:normal}
+.cursor{display:inline-block;width:3px;height:.85em;background:#00a85e;vertical-align:middle;margin-left:2px;animation:blink 1s step-end infinite}
 @keyframes blink{50%{opacity:0}}
-.dk-sub{font-size:1rem;line-height:1.75;color:#6b7280;max-width:480px;margin:0 auto 2.5rem}
-.dk-meta{display:flex;align-items:center;justify-content:center;gap:1.5rem;font-family:'Space Mono',monospace;font-size:11px;color:#4b5563}
+.dk-sub{font-size:1rem;line-height:1.75;color:#6e6e73;max-width:480px;margin:0 auto 2.25rem}
+.dk-meta{display:flex;align-items:center;justify-content:center;gap:1.5rem;font-family:'Space Mono',monospace;font-size:11px;color:#86868b}
 .dk-meta span{display:flex;align-items:center;gap:6px}
-.dk-meta span::before{content:'';width:4px;height:4px;border-radius:50%;background:#00d97e}
-.dk-section{flex:1;background:#0a0a0c;border-top:1px solid rgba(255,255,255,.05);padding:3.5rem 2rem 5rem}
-.dk-section-label{text-align:center;font-family:'Space Mono',monospace;font-size:10px;text-transform:uppercase;letter-spacing:.14em;color:#374151;margin-bottom:2rem}
-.dk-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:1px;max-width:1060px;margin:0 auto;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.04);border-radius:12px;overflow:hidden}
-.dk-card{background:#111113;padding:1.6rem;display:flex;flex-direction:column;gap:14px;transition:background .12s}
-.dk-card:hover{background:rgba(0,217,126,.04)}
-.dk-card:hover .dk-arr{color:#00d97e;transform:translate(2px,-2px)}
+.dk-meta span::before{content:'';width:4px;height:4px;border-radius:50%;background:#00a85e}
+.dk-section{flex:1;background:#fff;border-top:1px solid rgba(0,0,0,.07);padding:3.5rem 2rem 5rem}
+.dk-section-label{text-align:center;font-family:'Space Mono',monospace;font-size:10px;text-transform:uppercase;letter-spacing:.14em;color:#86868b;margin-bottom:2rem}
+.dk-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:1px;max-width:1060px;margin:0 auto;background:rgba(0,0,0,.06);border:1px solid rgba(0,0,0,.06);border-radius:14px;overflow:hidden}
+.dk-card{background:#fff;padding:1.6rem;display:flex;flex-direction:column;gap:14px;transition:background .12s}
+.dk-card:hover{background:#f0fdf8}
+.dk-card:hover .dk-arr{color:#00a85e;transform:translate(2px,-2px)}
 .dk-card-top{display:flex;align-items:flex-start;justify-content:space-between}
-.dk-icon{width:34px;height:34px;border-radius:7px;background:rgba(0,217,126,.1);border:1px solid rgba(0,217,126,.18);display:flex;align-items:center;justify-content:center;color:#00d97e}
-.dk-arr{color:#374151;font-size:18px;transition:all .12s}
-.dk-card-name{font-size:.9rem;font-weight:600;color:#e5e7eb;letter-spacing:-.01em}
-.dk-card-desc{font-size:.8rem;line-height:1.65;color:#6b7280}
-.dk-footer{border-top:1px solid rgba(255,255,255,.05);padding:1rem 2rem;display:flex;align-items:center;justify-content:space-between;background:#0e0e10;flex-shrink:0}
-.dk-status{display:flex;align-items:center;gap:8px;font-family:'Space Mono',monospace;font-size:11px;color:#374151}
-.dot{width:6px;height:6px;border-radius:50%;background:#00d97e;box-shadow:0 0 6px #00d97e}
+.dk-icon{width:34px;height:34px;border-radius:7px;background:rgba(0,217,126,.1);border:1px solid rgba(0,217,126,.2);display:flex;align-items:center;justify-content:center;color:#00a85e}
+.dk-arr{color:#c7c7cc;font-size:18px;transition:all .12s}
+.dk-card-name{font-size:.9rem;font-weight:600;color:#1d1d1f;letter-spacing:-.01em}
+.dk-card-desc{font-size:.8rem;line-height:1.65;color:#6e6e73}
+.dk-footer{border-top:1px solid rgba(0,0,0,.07);padding:1rem 2rem;display:flex;align-items:center;justify-content:space-between;background:#f5f5f7;flex-shrink:0}
+.dk-status{display:flex;align-items:center;gap:8px;font-family:'Space Mono',monospace;font-size:11px;color:#86868b}
+.dot{width:6px;height:6px;border-radius:50%;background:#00a85e}
 @keyframes fadeUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}
 .dk-hero>*{animation:fadeUp .45s ease both}
 .dk-eyebrow{animation-delay:.04s}.dk-h1{animation-delay:.1s}.dk-sub{animation-delay:.18s}.dk-meta{animation-delay:.26s}
 </style>
 <div class="dk">
   <nav class="dk-nav">
-    <div class="dk-logo">
-      <div class="dk-logo-icon">&gt;_</div>
-      <span class="dk-logo-name">DevKit</span>
-    </div>
+    <div class="dk-logo"><div class="dk-logo-icon">&gt;_</div><span class="dk-logo-name">DevKit</span></div>
     <span class="dk-badge">6 tools</span>
   </nav>
   <div class="dk-hero">
@@ -58,41 +55,14 @@
   <div class="dk-section">
     <div class="dk-section-label">// pick a tool</div>
     <div class="dk-grid">
-      <a class="dk-card" href="/schema-detective/">
-        <div class="dk-card-top"><div class="dk-icon"><span class="material-symbols-outlined" style="font-size:16px;font-variation-settings:'FILL' 1">table_view</span></div><span class="dk-arr material-symbols-outlined">arrow_outward</span></div>
-        <div class="dk-card-name">Schema Detective</div>
-        <div class="dk-card-desc">Audit database schemas for vulnerabilities, missing indexes, and design flaws.</div>
-      </a>
-      <a class="dk-card" href="/test-forge/">
-        <div class="dk-card-top"><div class="dk-icon"><span class="material-symbols-outlined" style="font-size:16px;font-variation-settings:'FILL' 1">science</span></div><span class="dk-arr material-symbols-outlined">arrow_outward</span></div>
-        <div class="dk-card-name">Test Forge</div>
-        <div class="dk-card-desc">Generate complete, runnable test suites across 8 frameworks from any source code.</div>
-      </a>
-      <a class="dk-card" href="/sql-whisperer/">
-        <div class="dk-card-top"><div class="dk-icon"><span class="material-symbols-outlined" style="font-size:16px;font-variation-settings:'FILL' 1">data_object</span></div><span class="dk-arr material-symbols-outlined">arrow_outward</span></div>
-        <div class="dk-card-name">SQL Whisperer</div>
-        <div class="dk-card-desc">Convert plain-English questions to SQL for PostgreSQL, MySQL, SQLite, and more.</div>
-      </a>
-      <a class="dk-card" href="/doc-forge/">
-        <div class="dk-card-top"><div class="dk-icon"><span class="material-symbols-outlined" style="font-size:16px;font-variation-settings:'FILL' 1">article</span></div><span class="dk-arr material-symbols-outlined">arrow_outward</span></div>
-        <div class="dk-card-name">Doc Forge</div>
-        <div class="dk-card-desc">Generate README, architecture overviews, and API docs from any GitHub repo.</div>
-      </a>
-      <a class="dk-card" href="/changelog-ai/">
-        <div class="dk-card-top"><div class="dk-icon"><span class="material-symbols-outlined" style="font-size:16px;font-variation-settings:'FILL' 1">update</span></div><span class="dk-arr material-symbols-outlined">arrow_outward</span></div>
-        <div class="dk-card-name">Changelog AI</div>
-        <div class="dk-card-desc">Turn commit history into changelogs for developers, users, or executives.</div>
-      </a>
-      <a class="dk-card" href="/git-narrator/">
-        <div class="dk-card-top"><div class="dk-icon"><span class="material-symbols-outlined" style="font-size:16px;font-variation-settings:'FILL' 1">history</span></div><span class="dk-arr material-symbols-outlined">arrow_outward</span></div>
-        <div class="dk-card-name">Git Narrator</div>
-        <div class="dk-card-desc">Transform raw git logs into readable project narratives and milestone timelines.</div>
-      </a>
+      <a class="dk-card" href="/schema-detective/"><div class="dk-card-top"><div class="dk-icon"><span class="material-symbols-outlined" style="font-size:16px;font-variation-settings:'FILL' 1">table_view</span></div><span class="dk-arr material-symbols-outlined">arrow_outward</span></div><div class="dk-card-name">Schema Detective</div><div class="dk-card-desc">Audit database schemas for vulnerabilities, missing indexes, and design flaws.</div></a>
+      <a class="dk-card" href="/test-forge/"><div class="dk-card-top"><div class="dk-icon"><span class="material-symbols-outlined" style="font-size:16px;font-variation-settings:'FILL' 1">science</span></div><span class="dk-arr material-symbols-outlined">arrow_outward</span></div><div class="dk-card-name">Test Forge</div><div class="dk-card-desc">Generate complete, runnable test suites across 8 frameworks from any source code.</div></a>
+      <a class="dk-card" href="/sql-whisperer/"><div class="dk-card-top"><div class="dk-icon"><span class="material-symbols-outlined" style="font-size:16px;font-variation-settings:'FILL' 1">data_object</span></div><span class="dk-arr material-symbols-outlined">arrow_outward</span></div><div class="dk-card-name">SQL Whisperer</div><div class="dk-card-desc">Convert plain-English questions to SQL for PostgreSQL, MySQL, SQLite, and more.</div></a>
+      <a class="dk-card" href="/doc-forge/"><div class="dk-card-top"><div class="dk-icon"><span class="material-symbols-outlined" style="font-size:16px;font-variation-settings:'FILL' 1">article</span></div><span class="dk-arr material-symbols-outlined">arrow_outward</span></div><div class="dk-card-name">Doc Forge</div><div class="dk-card-desc">Generate README, architecture overviews, and API docs from any GitHub repo.</div></a>
+      <a class="dk-card" href="/changelog-ai/"><div class="dk-card-top"><div class="dk-icon"><span class="material-symbols-outlined" style="font-size:16px;font-variation-settings:'FILL' 1">update</span></div><span class="dk-arr material-symbols-outlined">arrow_outward</span></div><div class="dk-card-name">Changelog AI</div><div class="dk-card-desc">Turn commit history into changelogs for developers, users, or executives.</div></a>
+      <a class="dk-card" href="/git-narrator/"><div class="dk-card-top"><div class="dk-icon"><span class="material-symbols-outlined" style="font-size:16px;font-variation-settings:'FILL' 1">history</span></div><span class="dk-arr material-symbols-outlined">arrow_outward</span></div><div class="dk-card-name">Git Narrator</div><div class="dk-card-desc">Transform raw git logs into readable project narratives and milestone timelines.</div></a>
     </div>
   </div>
-  <footer class="dk-footer">
-    <div class="dk-status"><div class="dot"></div>All systems operational</div>
-    <span style="font-family:'Space Mono',monospace;font-size:11px;color:#374151">Free &middot; No login</span>
-  </footer>
+  <footer class="dk-footer"><div class="dk-status"><div class="dot"></div>All systems operational</div><span style="font-family:'Space Mono',monospace;font-size:11px;color:#86868b">Free &middot; No login</span></footer>
 </div>
 {% endblock %}

app/templates/base.html

@@ -13,211 +13,132 @@ tailwind.config = {
   theme: {
     extend: {
       colors: {
-        "surface": "#0e0e10",
-        "background": "#0e0e10",
-        "surface-container-lowest": "#131315",
-        "surface-container-low": "#18181a",
-        "surface-container": "#1e1e20",
-        "surface-container-high": "#252527",
-        "surface-container-highest": "#2c2c2e",
-        "surface-bright": "#222224",
-        "surface-dim": "#0a0a0c",
-        "on-surface": "#e8e8ea",
-        "on-surface-variant": "#8b9198",
-        "on-background": "#e8e8ea",
-        "primary": "#00d97e",
-        "on-primary": "#001a0d",
-        "primary-container": "#003d1c",
-        "on-primary-container": "#67ffb4",
-        "secondary": "#8b9198",
-        "on-secondary": "#e8e8ea",
-        "secondary-container": "#252527",
-        "on-secondary-container": "#c8cdd0",
-        "outline": "#4b5563",
-        "outline-variant": "#2a2e30",
-        "surface-variant": "#252527",
-        "inverse-surface": "#e8e8ea",
-        "inverse-on-surface": "#18181a",
-        "inverse-primary": "#005c33",
-        "error-container":"#7f1d1d","on-error-container":"#fca5a5","error":"#f87171","on-error":"#fff",
-        "tertiary":"#00d97e","on-tertiary":"#001a0d",
-        "tertiary-container":"#1e1e20","on-tertiary-container":"#67ffb4",
-        "tertiary-dim":"#00d97e","tertiary-fixed":"#1e1e20","tertiary-fixed-dim":"#00d97e",
-        "on-tertiary-fixed":"#001a0d","on-tertiary-fixed-variant":"#001a0d",
-        "primary-fixed":"#003d1c","primary-fixed-dim":"#00d97e",
-        "on-primary-fixed":"#67ffb4","on-primary-fixed-variant":"#00d97e",
-        "secondary-fixed":"#252527","secondary-fixed-dim":"#252527",
-        "on-secondary-fixed":"#c8cdd0","on-secondary-fixed-variant":"#c8cdd0",
-        "surface-tint":"#00d97e","primary-dim":"#00d97e","secondary-dim":"#8b9198",
-        "error-dim":"#450a0a","on-primary-fixed":"#67ffb4",
-        "on-primary-container":"#67ffb4","on-secondary-container":"#c8cdd0",
-        "on-tertiary-container":"#67ffb4",
+        "error-container":            "#fe8983",
+        "on-primary-fixed-variant":   "#005bb0",
+        "on-secondary-fixed-variant": "#505d68",
+        "surface-bright":             "#f8f9fa",
+        "surface":                    "#f8f9fa",
+        "surface-tint":               "#00d97e",
+        "primary":                    "#00d97e",
+        "on-surface-variant":         "#586064",
+        "primary-fixed-dim":          "#bfd5ff",
+        "inverse-surface":            "#0c0f10",
+        "on-tertiary":                "#fbf7ff",
+        "background":                 "#f8f9fa",
+        "secondary":                  "#54616b",
+        "on-secondary-fixed":         "#34414b",
+        "on-background":              "#2b3437",
+        "surface-container":          "#eaeff1",
+        "tertiary-dim":               "#51516c",
+        "on-primary":                 "#001a0d",
+        "secondary-container":        "#d7e4f1",
+        "tertiary":                   "#5d5c78",
+        "primary-dim":                "#0052a0",
+        "on-error":                   "#fff7f6",
+        "surface-container-lowest":   "#ffffff",
+        "outline-variant":            "#abb3b7",
+        "on-secondary":               "#f5f9ff",
+        "inverse-primary":            "#5f9efb",
+        "tertiary-fixed-dim":         "#cbc9e9",
+        "outline":                    "#737c7f",
+        "on-secondary-container":     "#46535e",
+        "primary-container":          "#d6e3ff",
+        "error-dim":                  "#4e0309",
+        "error":                      "#9f403d",
+        "secondary-fixed":            "#d7e4f1",
+        "primary-fixed":              "#d6e3ff",
+        "inverse-on-surface":         "#9b9d9e",
+        "on-tertiary-container":      "#4a4a65",
+        "tertiary-fixed":             "#d9d7f8",
+        "on-tertiary-fixed-variant":  "#54546f",
+        "on-surface":                 "#2b3437",
+        "on-primary-fixed":           "#003f7d",
+        "on-primary-container":       "#00519e",
+        "on-tertiary-fixed":          "#383751",
+        "surface-container-low":      "#f1f4f6",
+        "surface-dim":                "#d1dce0",
+        "secondary-fixed-dim":        "#c9d6e3",
+        "on-error-container":         "#752121",
+        "surface-container-high":     "#e3e9ec",
+        "surface-variant":            "#dbe4e7",
+        "tertiary-container":         "#d9d7f8",
+        "surface-container-highest":  "#dbe4e7",
+        "secondary-dim":              "#48555f"
       },
       borderRadius: {"DEFAULT":"0.25rem","lg":"0.5rem","xl":"0.75rem","full":"9999px"},
       fontFamily: {
-        "headline": ["DM Sans", "sans-serif"],
-        "body":     ["DM Sans", "sans-serif"],
-        "label":    ["DM Sans", "sans-serif"]
+        "headline": ["DM Sans","sans-serif"],
+        "body":     ["DM Sans","sans-serif"],
+        "label":    ["DM Sans","sans-serif"]
       }
     }
   }
 }
 </script>
 <style>
-  :root {
-    --accent: #00d97e;
-    --accent-rgb: 0,217,126;
-    --on-primary: #001a0d;
-    --surface: #0e0e10;
-    --text: #e8e8ea;
-    --text-dim: #8b9198;
-    --border: #2a2e30;
-  }
   *, *::before, *::after { box-sizing: border-box; }
-  html, body { height: 100%; overflow: hidden;
-    background: #0e0e10 !important;
-    color: #e8e8ea;
-    font-family: DM Sans, sans-serif;
-  }
+  html, body { height: 100%; }
+  body { font-family: DM Sans, sans-serif; }
   .material-symbols-outlined {
     font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
     vertical-align: middle;
   }
-
-  /* Remap hardcoded light-theme classes */
-  .bg-white                    { background: #131315 !important; }
-  .bg-slate-50                 { background: #18181a !important; }
-  .bg-slate-100                { background: #1e1e20 !important; }
-  .bg-slate-200                { background: #252527 !important; }
-  .border-slate-200,
-  .border-slate-300            { border-color: #2a2e30 !important; }
-  .divide-slate-200 > * + *    { border-color: #2a2e30 !important; }
-  .text-slate-400, .text-slate-500 { color: #8b9198 !important; }
-  .text-slate-600, .text-slate-700,
-  .text-slate-800, .text-slate-900 { color: #e8e8ea !important; }
-  .text-gray-400, .text-gray-500   { color: #8b9198 !important; }
-  .text-gray-600, .text-gray-700   { color: #e8e8ea !important; }
-  .hover\:bg-slate-200\/60:hover  { background: rgba(255,255,255,.06) !important; }
-  .shadow-sm  { box-shadow: 0 1px 3px rgba(0,0,0,.5) !important; }
-  .shadow-md  { box-shadow: 0 4px 12px rgba(0,0,0,.6) !important; }
-  .glass-effect { background: rgba(0,0,0,.5) !important; backdrop-filter: blur(12px); }
-
-  /* Forms dark */
-  input:not([type=checkbox]):not([type=radio]):not([type=range]),
-  textarea, select {
-    background: #18181a !important;
-    color: #e8e8ea !important;
-    border-color: #2a2e30 !important;
-  }
-  input::placeholder, textarea::placeholder { color: #8b9198 !important; opacity: 1; }
-  input:focus, textarea:focus, select:focus {
-    border-color: #00d97e !important;
-    box-shadow: 0 0 0 2px rgba(0,217,126,.2) !important;
-  }
-  label { color: #8b9198; }
-
-  /* Scrollbar */
+  .glass-effect { background: rgba(248,249,250,0.8); backdrop-filter: blur(12px); }
+  .ghost-border { outline: 1px solid rgba(171,179,183,0.15); }
   ::-webkit-scrollbar { width: 6px; }
   ::-webkit-scrollbar-track { background: transparent; }
-  ::-webkit-scrollbar-thumb { background: #4b5563; border-radius: 10px; }
+  ::-webkit-scrollbar-thumb { background: #abb3b7; border-radius: 10px; }
   .no-scrollbar::-webkit-scrollbar { display: none; }
   .no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
   .custom-scrollbar::-webkit-scrollbar { width: 6px; }
-  .custom-scrollbar::-webkit-scrollbar-thumb { background: #4b5563; border-radius: 10px; }
-
-  /* Code editor */
-  .code-editor { font-family: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', 'Consolas', monospace; }
-  .editor-bg   { background: #0d0d14 !important; color: #cdd6f4; }
-  .arabic-text { font-family: 'Segoe UI', Tahoma, Arial, sans-serif; }
-
-  /* Prompt-bench scoped overrides */
-  .toolbar-blur  { background: rgba(20,20,28,.88); backdrop-filter: blur(20px); }
+  .custom-scrollbar::-webkit-scrollbar-thumb { background: #abb3b7; border-radius: 10px; }
+  .code-editor { font-family: 'JetBrains Mono','Fira Code','Cascadia Code','Consolas',monospace; }
+  .editor-bg   { background: #1e1e2e; color: #cdd6f4; }
+  .arabic-text { font-family: 'Segoe UI',Tahoma,Arial,sans-serif; }
+  .toolbar-blur  { background: rgba(242,242,247,0.85); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); }
   .btn-primary   { display:inline-flex;align-items:center;gap:6px;padding:6px 14px;background:#00d97e;color:#001a0d;border-radius:8px;font-size:13px;font-weight:600;border:none;cursor:pointer; }
-  .btn-secondary { display:inline-flex;align-items:center;gap:4px;padding:5px 10px;background:rgba(255,255,255,.08);color:#e8e8ea;border-radius:7px;font-size:12px;font-weight:500;border:none;cursor:pointer; }
-  .section-label { font-size:11px;font-weight:600;color:#8b9198;text-transform:uppercase;letter-spacing:.06em; }
-  .sys-label, .text-sys-label { color: #e8e8ea; }
-
-  /* Mobile: collapse fixed sidebars on small screens */
+  .btn-secondary { display:inline-flex;align-items:center;gap:4px;padding:5px 10px;background:rgba(0,0,0,0.06);color:#3C3C43;border-radius:7px;font-size:12px;font-weight:500;border:none;cursor:pointer; }
+  .section-label { font-size:11px;font-weight:600;color:#636366;text-transform:uppercase;letter-spacing:.06em; }
+  .sys-label, .text-sys-label { color: #1C1C1E; }
   @media (max-width: 768px) {
-    .shrink-0.w-64, aside.w-64 {
-      display: none !important;
-    }
-    .flex-1.overflow-hidden {
-      flex: 1 1 auto;
-      min-width: 0;
-    }
+    .shrink-0.w-64, aside.w-64 { display: none !important; }
+    .flex-1.overflow-hidden { flex: 1 1 auto; min-width: 0; }
   }
-
-  /* Back-to-hub button */
   .hub-back-btn {
-    position: fixed;
-    top: 0.9rem;
-    left: 1rem;
-    z-index: 9999;
-    display: flex;
-    align-items: center;
-    gap: 5px;
-    padding: 4px 10px 4px 7px;
-    border-radius: 100px;
-    background: rgba(0,217,126, .12);
+    position: fixed; top: 0.9rem; left: 1rem; z-index: 9999;
+    display: flex; align-items: center; gap: 5px;
+    padding: 4px 10px 4px 7px; border-radius: 100px;
+    background: rgba(0,217,126, .1);
     border: 1px solid rgba(0,217,126, .28);
-    color: #00d97e;
-    font-size: 11px;
-    font-weight: 500;
-    text-decoration: none;
-    backdrop-filter: blur(10px);
-    -webkit-backdrop-filter: blur(10px);
+    color: #00d97e; font-size: 11px; font-weight: 600;
+    text-decoration: none; backdrop-filter: blur(8px);
     transition: background .15s, transform .12s;
-    font-family: DM Sans, sans-serif;
-    white-space: nowrap;
-  }
-  .hub-back-btn:hover {
-    background: rgba(0,217,126, .22);
-    transform: translateY(-1px);
-  }
-  .hub-back-btn-icon {
-    font-size: 15px !important;
-    color: #00d97e;
-    line-height: 1;
-    vertical-align: middle;
+    font-family: DM Sans, sans-serif; white-space: nowrap;
   }
+  .hub-back-btn:hover { background: rgba(0,217,126, .18); transform: translateY(-1px); }
+  .hub-back-btn-icon { font-size: 14px !important; color: #00d97e; line-height: 1; vertical-align: middle; }
 </style>
 {% block extra_head %}{% endblock %}
 <meta name="csrf-token" content="{{ csrf_token() }}"/>
 </head>
-<body class="bg-surface text-on-surface">
+<body class="bg-surface text-on-surface selection:bg-primary-container selection:text-on-primary-container">
 {% block content %}{% endblock %}
 {% block extra_scripts %}{% endblock %}
 <script>
 (function() {
-  var toolAlphas = {"schema-detective": "0.10", "test-forge": "0.13", "sql-whisperer": "0.08", "doc-forge": "0.11", "changelog-ai": "0.09", "git-narrator": "0.12"};
-  var path = window.location.pathname.replace(/\/+$/, '').split('/').filter(Boolean)[0] || '';
-
-  // Per-tool micro-variation: slightly shift border opacity for each tool
-  var alpha = toolAlphas[path];
-  if (alpha) {
-    var s = document.createElement('style');
-    s.textContent =
-      '.border-outline-variant\/10 { border-color: rgba(0,217,126,' + alpha + ') !important; }' +
-      '.border-slate-200 { border-color: rgba(0,217,126,' + (parseFloat(alpha) * 0.6).toFixed(2) + ') !important; }';
-    document.head.appendChild(s);
-  }
-
-  // Back-to-hub button on all tool pages (not home)
-  if (path !== '') {
-    var btn = document.createElement('a');
-    btn.href = '/';
-    btn.className = 'hub-back-btn';
-
-    var icon = document.createElement('span');
-    icon.className = 'material-symbols-outlined hub-back-btn-icon';
-    icon.textContent = 'arrow_back_ios_new';
-
-    var label = document.createElement('span');
-    label.textContent = 'DevKit';
-
+  var toolAlphas = {"schema-detective":"0.10","test-forge":"0.13","sql-whisperer":"0.08","doc-forge":"0.11","changelog-ai":"0.09","git-narrator":"0.12"};
+  var path = window.location.pathname.replace(/\/+$/, "").split("/").filter(Boolean)[0] || "";
+  if (path !== "") {
+    var btn = document.createElement("a");
+    btn.href = "/";
+    btn.className = "hub-back-btn";
+    var icon = document.createElement("span");
+    icon.className = "material-symbols-outlined hub-back-btn-icon";
+    icon.textContent = "arrow_back_ios_new";
+    var lbl = document.createElement("span");
+    lbl.textContent = "DevKit";
     btn.appendChild(icon);
-    btn.appendChild(label);
+    btn.appendChild(lbl);
     document.body.appendChild(btn);
   }
 })();