From 876e031ac2307e448119c81886810553b411868b Mon Sep 17 00:00:00 2001
From: Flatlogic Bot <support@flatlogic.com>
Date: Thu, 12 Mar 2026 20:51:09 +0000
Subject: [PATCH] 1

---
 assets/css/custom.css | 488 ++++++++++++++----------------------------
 assets/js/main.js     |  53 ++---
 index.php             | 191 +++++++----------
 3 files changed, 256 insertions(+), 476 deletions(-)

diff --git a/assets/css/custom.css b/assets/css/custom.css
index 789132e..c254d9b 100644
--- a/assets/css/custom.css
+++ b/assets/css/custom.css
@@ -1,403 +1,225 @@
-body {
-    background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
-    background-size: 400% 400%;
-    animation: gradient 15s ease infinite;
-    color: #212529;
-    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
-    font-size: 14px;
-    margin: 0;
-    min-height: 100vh;
+/* Core palette */
+:root {
+  --space-950: #0b0f14;
+  --space-900: #10161f;
+  --space-800: #151c28;
+  --space-700: #1f2633;
+  --space-600: #2a3240;
+  --space-500: #3a4353;
+  --space-200: #9aa4b2;
+  --space-100: #cbd5e1;
+  --space-50: #f1f5f9;
+  --radius-sm: 6px;
+  --radius-md: 10px;
 }
 
-.main-wrapper {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    min-height: 100vh;
-    width: 100%;
-    padding: 20px;
-    box-sizing: border-box;
-    position: relative;
-    z-index: 1;
+* {
+  box-sizing: border-box;
 }
 
-@keyframes gradient {
-    0% {
-        background-position: 0% 50%;
-    }
-    50% {
-        background-position: 100% 50%;
-    }
-    100% {
-        background-position: 0% 50%;
-    }
+body.space-body {
+  margin: 0;
+  min-height: 100vh;
+  font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
+  background-color: var(--space-950);
+  color: var(--space-50);
+  position: relative;
+  overflow-x: hidden;
 }
 
-.chat-container {
-    width: 100%;
-    max-width: 600px;
-    background: rgba(255, 255, 255, 0.85);
-    border: 1px solid rgba(255, 255, 255, 0.3);
-    border-radius: 20px;
-    display: flex;
-    flex-direction: column;
-    height: 85vh;
-    box-shadow: 0 20px 40px rgba(0,0,0,0.2);
-    backdrop-filter: blur(15px);
-    -webkit-backdrop-filter: blur(15px);
-    overflow: hidden;
+body.space-body::before {
+  content: "";
+  position: fixed;
+  inset: 0;
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cg fill='white' fill-opacity='0.08'%3E%3Ccircle cx='18' cy='22' r='1'/%3E%3Ccircle cx='62' cy='14' r='1'/%3E%3Ccircle cx='96' cy='38' r='1'/%3E%3Ccircle cx='30' cy='70' r='1'/%3E%3Ccircle cx='78' cy='86' r='1'/%3E%3Ccircle cx='110' cy='102' r='1'/%3E%3C/g%3E%3C/svg%3E");
+  opacity: 0.7;
+  pointer-events: none;
+  z-index: 0;
 }
 
-.chat-header {
-    padding: 1.5rem;
-    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
-    background: rgba(255, 255, 255, 0.5);
-    font-weight: 700;
-    font-size: 1.1rem;
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
+.site-header {
+  background-color: rgba(11, 15, 20, 0.94);
+  backdrop-filter: blur(6px);
+  position: sticky;
+  top: 0;
+  z-index: 10;
 }
 
-.chat-messages {
-    flex: 1;
-    overflow-y: auto;
-    padding: 1.5rem;
-    display: flex;
-    flex-direction: column;
-    gap: 1.25rem;
+.navbar-brand {
+  letter-spacing: 0.04em;
+  font-size: 0.95rem;
 }
 
-/* Custom Scrollbar */
-::-webkit-scrollbar {
-    width: 6px;
+.nav-link {
+  font-size: 0.85rem;
 }
 
-::-webkit-scrollbar-track {
-    background: transparent;
+.container {
+  position: relative;
+  z-index: 1;
 }
 
-::-webkit-scrollbar-thumb {
-    background: rgba(255, 255, 255, 0.3);
-    border-radius: 10px;
+.eyebrow {
+  font-size: 0.7rem;
+  letter-spacing: 0.2em;
 }
 
-::-webkit-scrollbar-thumb:hover {
-    background: rgba(255, 255, 255, 0.5);
+.display-6 {
+  font-size: 2.2rem;
+  line-height: 1.2;
 }
 
-.message {
-    max-width: 85%;
-    padding: 0.85rem 1.1rem;
-    border-radius: 16px;
-    line-height: 1.5;
-    font-size: 0.95rem;
-    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
-    animation: fadeIn 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+.lead {
+  font-size: 1rem;
 }
 
-@keyframes fadeIn {
-    from { opacity: 0; transform: translateY(20px) scale(0.95); }
-    to { opacity: 1; transform: translateY(0) scale(1); }
+.panel {
+  background-color: var(--space-900);
+  border: 1px solid var(--space-700);
+  border-radius: var(--radius-md);
+  padding: 1.75rem;
+  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.25);
 }
 
-.message.visitor {
-    align-self: flex-end;
-    background: linear-gradient(135deg, #212529 0%, #343a40 100%);
-    color: #fff;
-    border-bottom-right-radius: 4px;
+.form-control-dark {
+  background-color: var(--space-800);
+  border: 1px solid var(--space-700);
+  color: var(--space-50);
+  border-radius: var(--radius-sm);
+  padding: 0.7rem 0.85rem;
 }
 
-.message.bot {
-    align-self: flex-start;
-    background: #ffffff;
-    color: #212529;
-    border-bottom-left-radius: 4px;
+.form-control-dark::placeholder {
+  color: var(--space-200);
 }
 
-.chat-input-area {
-    padding: 1.25rem;
-    background: rgba(255, 255, 255, 0.5);
-    border-top: 1px solid rgba(0, 0, 0, 0.05);
+.form-control-dark:focus {
+  background-color: var(--space-800);
+  color: var(--space-50);
+  border-color: var(--space-500);
+  box-shadow: 0 0 0 0.2rem rgba(148, 163, 184, 0.15);
 }
 
-.chat-input-area form {
-    display: flex;
-    gap: 0.75rem;
+.btn {
+  border-radius: var(--radius-sm);
+  font-size: 0.85rem;
+  padding: 0.65rem 1.1rem;
 }
 
-.chat-input-area input {
-    flex: 1;
-    border: 1px solid rgba(0, 0, 0, 0.1);
-    border-radius: 12px;
-    padding: 0.75rem 1rem;
-    outline: none;
-    background: rgba(255, 255, 255, 0.9);
-    transition: all 0.3s ease;
+.btn-light {
+  background-color: var(--space-50);
+  color: var(--space-950);
+  border: 1px solid var(--space-50);
 }
 
-.chat-input-area input:focus {
-    border-color: #23a6d5;
-    box-shadow: 0 0 0 3px rgba(35, 166, 213, 0.2);
+.btn-light:hover {
+  background-color: var(--space-100);
+  border-color: var(--space-100);
 }
 
-.chat-input-area button {
-    background: #212529;
-    color: #fff;
-    border: none;
-    padding: 0.75rem 1.5rem;
-    border-radius: 12px;
-    cursor: pointer;
-    font-weight: 600;
-    transition: all 0.3s ease;
+.btn-outline-light {
+  border-color: var(--space-500);
+  color: var(--space-50);
 }
 
-.chat-input-area button:hover {
-    background: #000;
-    transform: translateY(-2px);
-    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
+.btn-outline-light:hover {
+  background-color: var(--space-700);
+  border-color: var(--space-500);
 }
 
-/* Background Animations */
-.bg-animations {
-    position: fixed;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    z-index: 0;
-    overflow: hidden;
-    pointer-events: none;
+.btn-outline-secondary {
+  border-color: var(--space-600);
+  color: var(--space-200);
 }
 
-.blob {
-    position: absolute;
-    width: 500px;
-    height: 500px;
-    background: rgba(255, 255, 255, 0.2);
-    border-radius: 50%;
-    filter: blur(80px);
-    animation: move 20s infinite alternate cubic-bezier(0.45, 0, 0.55, 1);
+.btn-outline-secondary:hover {
+  background-color: var(--space-700);
+  color: var(--space-50);
 }
 
-.blob-1 { 
-    top: -10%; 
-    left: -10%; 
-    background: rgba(238, 119, 82, 0.4); 
+.chip {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.35rem;
+  border: 1px solid var(--space-700);
+  border-radius: 999px;
+  padding: 0.35rem 0.75rem;
+  color: var(--space-100);
+  text-decoration: none;
+  font-size: 0.75rem;
 }
 
-.blob-2 { 
-    bottom: -10%; 
-    right: -10%; 
-    background: rgba(35, 166, 213, 0.4); 
-    animation-delay: -7s; 
-    width: 600px;
-    height: 600px;
+.chip:hover {
+  background-color: var(--space-800);
+  color: var(--space-50);
 }
 
-.blob-3 { 
-    top: 40%; 
-    left: 30%; 
-    background: rgba(231, 60, 126, 0.3); 
-    animation-delay: -14s; 
-    width: 450px;
-    height: 450px;
+.orbit {
+  position: absolute;
+  border: 1px solid rgba(148, 163, 184, 0.2);
+  border-radius: 50%;
+  pointer-events: none;
+  z-index: 0;
 }
 
-@keyframes move {
-    0% { transform: translate(0, 0) rotate(0deg) scale(1); }
-    33% { transform: translate(150px, 100px) rotate(120deg) scale(1.1); }
-    66% { transform: translate(-50px, 200px) rotate(240deg) scale(0.9); }
-    100% { transform: translate(0, 0) rotate(360deg) scale(1); }
+.orbit-lg {
+  width: 520px;
+  height: 520px;
+  top: -180px;
+  right: -140px;
 }
 
-.header-link {
-    font-size: 14px;
-    color: #fff;
-    text-decoration: none;
-    background: rgba(0, 0, 0, 0.2);
-    padding: 0.5rem 1rem;
-    border-radius: 8px;
-    transition: all 0.3s ease;
+.orbit-md {
+  width: 360px;
+  height: 360px;
+  bottom: -140px;
+  left: -120px;
 }
 
-.header-link:hover {
-    background: rgba(0, 0, 0, 0.4);
-    text-decoration: none;
+.orbit-sm {
+  width: 180px;
+  height: 180px;
+  top: 40%;
+  left: 45%;
 }
 
-/* Admin Styles */
-.admin-container {
-    max-width: 900px;
-    margin: 3rem auto;
-    padding: 2.5rem;
-    background: rgba(255, 255, 255, 0.85);
-    backdrop-filter: blur(20px);
-    -webkit-backdrop-filter: blur(20px);
-    border-radius: 24px;
-    box-shadow: 0 20px 50px rgba(0,0,0,0.15);
-    border: 1px solid rgba(255, 255, 255, 0.4);
-    position: relative;
-    z-index: 1;
+.border-top,
+.border-bottom {
+  border-color: var(--space-700) !important;
 }
 
-.admin-container h1 {
-    margin-top: 0;
-    color: #212529;
-    font-weight: 800;
+.text-muted {
+  color: var(--space-200) !important;
 }
 
-.table {
-    width: 100%;
-    border-collapse: separate;
-    border-spacing: 0 8px;
-    margin-top: 1.5rem;
+.badge.text-bg-dark {
+  background-color: var(--space-800) !important;
+  border: 1px solid var(--space-700);
+  color: var(--space-100);
 }
 
-.table th {
-    background: transparent;
-    border: none;
-    padding: 1rem;
-    color: #6c757d;
-    font-weight: 600;
-    text-transform: uppercase;
-    font-size: 0.75rem;
-    letter-spacing: 1px;
+.toast {
+  border-radius: var(--radius-sm);
 }
 
-.table td {
-    background: #fff;
-    padding: 1rem;
-    border: none;
+.toast-header {
+  font-size: 0.75rem;
 }
 
-.table tr td:first-child { border-radius: 12px 0 0 12px; }
-.table tr td:last-child { border-radius: 0 12px 12px 0; }
-
-.form-group {
-    margin-bottom: 1.25rem;
+@media (max-width: 991px) {
+  .navbar .btn {
+    display: none;
+  }
 }
 
-.form-group label {
-    display: block;
-    margin-bottom: 0.5rem;
-    font-weight: 600;
-    font-size: 0.9rem;
-}
+@media (max-width: 767px) {
+  .display-6 {
+    font-size: 1.85rem;
+  }
 
-.form-control {
-    width: 100%;
-    padding: 0.75rem 1rem;
-    border: 1px solid rgba(0, 0, 0, 0.1);
-    border-radius: 12px;
-    background: #fff;
-    transition: all 0.3s ease;
-    box-sizing: border-box;
+  .orbit-lg,
+  .orbit-md,
+  .orbit-sm {
+    display: none;
+  }
 }
-
-.form-control:focus {
-    outline: none;
-    border-color: #23a6d5;
-    box-shadow: 0 0 0 3px rgba(35, 166, 213, 0.1);
-}
-
-.header-container {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-}
-
-.header-links {
-    display: flex;
-    gap: 1rem;
-}
-
-.admin-card {
-    background: rgba(255, 255, 255, 0.6);
-    padding: 2rem;
-    border-radius: 20px;
-    border: 1px solid rgba(255, 255, 255, 0.5);
-    margin-bottom: 2.5rem;
-    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
-}
-
-.admin-card h3 {
-    margin-top: 0;
-    margin-bottom: 1.5rem;
-    font-weight: 700;
-}
-
-.btn-delete {
-    background: #dc3545;
-    color: white;
-    border: none;
-    padding: 0.25rem 0.5rem;
-    border-radius: 4px;
-    cursor: pointer;
-}
-
-.btn-add {
-    background: #212529;
-    color: white;
-    border: none;
-    padding: 0.5rem 1rem;
-    border-radius: 4px;
-    cursor: pointer;
-    margin-top: 1rem;
-}
-
-.btn-save {
-    background: #0088cc;
-    color: white;
-    border: none;
-    padding: 0.8rem 1.5rem;
-    border-radius: 12px;
-    cursor: pointer;
-    font-weight: 600;
-    width: 100%;
-    transition: all 0.3s ease;
-}
-
-.webhook-url {
-    font-size: 0.85em;
-    color: #555;
-    margin-top: 0.5rem;
-}
-
-.history-table-container {
-    overflow-x: auto;
-    background: rgba(255, 255, 255, 0.4);
-    padding: 1rem;
-    border-radius: 12px;
-    border: 1px solid rgba(255, 255, 255, 0.3);
-}
-
-.history-table {
-    width: 100%;
-}
-
-.history-table-time {
-    width: 15%;
-    white-space: nowrap;
-    font-size: 0.85em;
-    color: #555;
-}
-
-.history-table-user {
-    width: 35%;
-    background: rgba(255, 255, 255, 0.3);
-    border-radius: 8px;
-    padding: 8px;
-}
-
-.history-table-ai {
-    width: 50%;
-    background: rgba(255, 255, 255, 0.5);
-    border-radius: 8px;
-    padding: 8px;
-}
-
-.no-messages {
-    text-align: center;
-    color: #777;
-}
\ No newline at end of file
diff --git a/assets/js/main.js b/assets/js/main.js
index d349598..e96c34c 100644
--- a/assets/js/main.js
+++ b/assets/js/main.js
@@ -1,39 +1,26 @@
 document.addEventListener('DOMContentLoaded', () => {
-    const chatForm = document.getElementById('chat-form');
-    const chatInput = document.getElementById('chat-input');
-    const chatMessages = document.getElementById('chat-messages');
+  const form = document.getElementById('search-form');
+  const input = document.getElementById('search-input');
+  const toastEl = document.getElementById('searchToast');
+  const toastBody = document.getElementById('searchToastBody');
 
-    const appendMessage = (text, sender) => {
-        const msgDiv = document.createElement('div');
-        msgDiv.classList.add('message', sender);
-        msgDiv.textContent = text;
-        chatMessages.appendChild(msgDiv);
-        chatMessages.scrollTop = chatMessages.scrollHeight;
-    };
+  if (!form || !input || !toastEl || !toastBody || !window.bootstrap) {
+    return;
+  }
 
-    chatForm.addEventListener('submit', async (e) => {
-        e.preventDefault();
-        const message = chatInput.value.trim();
-        if (!message) return;
+  const toast = new window.bootstrap.Toast(toastEl, { delay: 4000 });
 
-        appendMessage(message, 'visitor');
-        chatInput.value = '';
+  form.addEventListener('submit', (event) => {
+    event.preventDefault();
+    const query = input.value.trim();
 
-        try {
-            const response = await fetch('api/chat.php', {
-                method: 'POST',
-                headers: { 'Content-Type': 'application/json' },
-                body: JSON.stringify({ message })
-            });
-            const data = await response.json();
-            
-            // Artificial delay for realism
-            setTimeout(() => {
-                appendMessage(data.reply, 'bot');
-            }, 500);
-        } catch (error) {
-            console.error('Error:', error);
-            appendMessage("Sorry, something went wrong. Please try again.", 'bot');
-        }
-    });
+    if (!query) {
+      toastBody.textContent = 'Enter a keyword to start searching.';
+      toast.show();
+      return;
+    }
+
+    toastBody.textContent = `Search will route to /search?q=${query} once enabled.`;
+    toast.show();
+  });
 });
diff --git a/index.php b/index.php
index 7205f3d..ceed315 100644
--- a/index.php
+++ b/index.php
@@ -12,7 +12,7 @@ $now = date('Y-m-d H:i:s');
 <head>
   <meta charset="utf-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1" />
-  <title>New Style</title>
+  <title>404 — Lost in Space</title>
 <?php
 // Read project preview data from environment
 $projectDescription = $_SERVER['PROJECT_DESCRIPTION'] ?? '';
@@ -32,119 +32,90 @@ $projectImageUrl = $_SERVER['PROJECT_IMAGE_URL'] ?? '';
   <!-- Twitter image -->
   <meta property="twitter:image" content="<?= htmlspecialchars($projectImageUrl) ?>" />
 <?php endif; ?>
-  <link rel="preconnect" href="https://fonts.googleapis.com">
-  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap" rel="stylesheet">
-  <style>
-    :root {
-      --bg-color-start: #6a11cb;
-      --bg-color-end: #2575fc;
-      --text-color: #ffffff;
-      --card-bg-color: rgba(255, 255, 255, 0.01);
-      --card-border-color: rgba(255, 255, 255, 0.1);
-    }
-    body {
-      margin: 0;
-      font-family: 'Inter', sans-serif;
-      background: linear-gradient(45deg, var(--bg-color-start), var(--bg-color-end));
-      color: var(--text-color);
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      min-height: 100vh;
-      text-align: center;
-      overflow: hidden;
-      position: relative;
-    }
-    body::before {
-      content: '';
-      position: absolute;
-      top: 0;
-      left: 0;
-      width: 100%;
-      height: 100%;
-      background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><path d="M-10 10L110 10M10 -10L10 110" stroke-width="1" stroke="rgba(255,255,255,0.05)"/></svg>');
-      animation: bg-pan 20s linear infinite;
-      z-index: -1;
-    }
-    @keyframes bg-pan {
-      0% { background-position: 0% 0%; }
-      100% { background-position: 100% 100%; }
-    }
-    main {
-      padding: 2rem;
-    }
-    .card {
-      background: var(--card-bg-color);
-      border: 1px solid var(--card-border-color);
-      border-radius: 16px;
-      padding: 2rem;
-      backdrop-filter: blur(20px);
-      -webkit-backdrop-filter: blur(20px);
-      box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.1);
-    }
-    .loader {
-      margin: 1.25rem auto 1.25rem;
-      width: 48px;
-      height: 48px;
-      border: 3px solid rgba(255, 255, 255, 0.25);
-      border-top-color: #fff;
-      border-radius: 50%;
-      animation: spin 1s linear infinite;
-    }
-    @keyframes spin {
-      from { transform: rotate(0deg); }
-      to   { transform: rotate(360deg); }
-    }
-    .hint {
-      opacity: 0.9;
-    }
-    .sr-only {
-      position: absolute;
-      width: 1px; height: 1px;
-      padding: 0; margin: -1px;
-      overflow: hidden;
-      clip: rect(0, 0, 0, 0);
-      white-space: nowrap; border: 0;
-    }
-    h1 {
-      font-size: 3rem;
-      font-weight: 700;
-      margin: 0 0 1rem;
-      letter-spacing: -1px;
-    }
-    p {
-      margin: 0.5rem 0;
-      font-size: 1.1rem;
-    }
-    code {
-      background: rgba(0,0,0,0.2);
-      padding: 2px 6px;
-      border-radius: 4px;
-      font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
-    }
-    footer {
-      position: absolute;
-      bottom: 1rem;
-      font-size: 0.8rem;
-      opacity: 0.7;
-    }
-  </style>
+  <meta name="color-scheme" content="dark" />
+  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
+  <link rel="stylesheet" href="assets/css/custom.css?v=<?= time(); ?>">
 </head>
-<body>
-  <main>
-    <div class="card">
-      <h1>Analyzing your requirements and generating your website…</h1>
-      <div class="loader" role="status" aria-live="polite" aria-label="Applying initial changes">
-        <span class="sr-only">Loading…</span>
+<body class="space-body">
+  <header class="site-header border-bottom">
+    <nav class="navbar navbar-expand-lg container py-3">
+      <a class="navbar-brand text-white fw-semibold" href="/">Lost in Space</a>
+      <div class="ms-auto d-flex align-items-center gap-3">
+        <a class="nav-link text-muted" href="/">Home</a>
+        <a class="nav-link text-muted" href="#search">Search</a>
+        <a class="btn btn-outline-light btn-sm" href="/">Return to Orbit</a>
+      </div>
+    </nav>
+  </header>
+
+  <main class="container py-5 position-relative">
+    <div class="orbit orbit-lg"></div>
+    <div class="orbit orbit-md"></div>
+    <div class="orbit orbit-sm"></div>
+
+    <div class="row align-items-center g-4">
+      <div class="col-lg-6">
+        <div class="eyebrow text-uppercase text-muted mb-3">Error 404</div>
+        <h1 class="display-6 text-white mb-3">This route drifted off course.</h1>
+        <p class="lead text-muted mb-4">
+          The page you requested isn’t in this quadrant. Let’s guide you back to something useful.
+        </p>
+        <div class="d-flex flex-wrap gap-2">
+          <a class="btn btn-light" href="/">Go Home</a>
+          <a class="btn btn-outline-light" href="/">Return to Orbit</a>
+          <a class="btn btn-outline-secondary" href="#search">Open Search</a>
+        </div>
+        <p class="small text-muted mt-4">
+          Runtime: PHP <?= htmlspecialchars($phpVersion) ?> · Updated <?= htmlspecialchars($now) ?> UTC
+        </p>
+      </div>
+      <div class="col-lg-6">
+        <section id="search" class="panel">
+          <div class="d-flex align-items-center justify-content-between mb-3">
+            <h2 class="h6 text-white mb-0">Search the site</h2>
+            <span class="badge text-bg-dark border">Optional</span>
+          </div>
+          <p class="text-muted small mb-4">
+            Start with a keyword and we’ll point you to the closest match.
+          </p>
+          <form id="search-form" class="d-flex flex-column gap-3">
+            <input id="search-input" name="q" type="search" class="form-control form-control-dark" placeholder="Try “pricing”, “projects”, or “dashboard”" aria-label="Search the site">
+            <button class="btn btn-outline-light w-100" type="submit">Search</button>
+          </form>
+          <div class="mt-4 small text-muted">
+            Suggested next stops:
+            <div class="d-flex flex-wrap gap-2 mt-2">
+              <a class="chip" href="/">Portfolio</a>
+              <a class="chip" href="/">Product</a>
+              <a class="chip" href="/">Support</a>
+            </div>
+          </div>
+        </section>
       </div>
-      <p class="hint"><?= ($_SERVER['HTTP_HOST'] ?? '') === 'appwizzy.com' ? 'AppWizzy' : 'Flatlogic' ?> AI is collecting your requirements and applying the first changes.</p>
-      <p class="hint">This page will update automatically as the plan is implemented.</p>
-      <p>Runtime: PHP <code><?= htmlspecialchars($phpVersion) ?></code> — UTC <code><?= htmlspecialchars($now) ?></code></p>
     </div>
   </main>
-  <footer>
-    Page updated: <?= htmlspecialchars($now) ?> (UTC)
+
+  <footer class="container py-4 text-muted small border-top">
+    <div class="d-flex flex-wrap justify-content-between gap-2">
+      <span>Lost in Space · Premium 404 experience</span>
+      <span>Need help? Start from Home or Search.</span>
+    </div>
   </footer>
+
+  <div class="toast-container position-fixed bottom-0 end-0 p-3">
+    <div id="searchToast" class="toast text-bg-dark border" role="alert" aria-live="assertive" aria-atomic="true">
+      <div class="toast-header text-bg-dark border-0">
+        <strong class="me-auto">Navigation</strong>
+        <small>Just now</small>
+        <button type="button" class="btn-close btn-close-white ms-2 mb-1" data-bs-dismiss="toast" aria-label="Close"></button>
+      </div>
+      <div id="searchToastBody" class="toast-body">
+        Search isn’t wired yet.
+      </div>
+    </div>
+  </div>
+
+  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
+  <script src="assets/js/main.js?v=<?= time(); ?>"></script>
 </body>
 </html>