Complete layout overhaul

assets/app.js

@@ -1,6 +1,7 @@
 /*
  * Welcome to your app's main JavaScript file!
  */
-import './styles/app.css';
-
-console.log('This log comes from assets/app.js built by Webpack Encore! 🎉');
+import './styles/app.scss';
+import 'bootstrap/js/dist/collapse';
+import 'bootstrap/js/dist/alert';
+import 'bootstrap/js/dist/dropdown';

assets/styles/app.css

@@ -1,3 +0,0 @@
-body {
-    background-color: skyblue;
-}

assets/styles/app.scss

@@ -0,0 +1,66 @@
+// Brand palette derived from public/images/logo.png (teal key/globe on dark navy)
+$brand-teal:      #2f8fae;
+$brand-teal-dark: #1c5a70;
+$brand-teal-light:#6fb8d1;
+$brand-navy:      #0d1f26;
+$brand-navy-soft: #16323f;
+$brand-bg:        #f4f8f9;
+
+// Bootstrap variable overrides (must come before the bootstrap import)
+$primary:          $brand-teal;
+$secondary:        $brand-navy-soft;
+$dark:             $brand-navy;
+$body-bg:          $brand-bg;
+$body-color:       $brand-navy-soft;
+$link-color:       $brand-teal;
+$link-hover-color: $brand-teal-dark;
+$border-radius:    .5rem;
+
+@import "bootstrap/scss/bootstrap";
+@import "bootstrap-icons/font/bootstrap-icons.css";
+
+:root {
+  --brand-teal: #{$brand-teal};
+  --brand-teal-dark: #{$brand-teal-dark};
+  --brand-navy: #{$brand-navy};
+  --brand-navy-soft: #{$brand-navy-soft};
+  --brand-bg: #{$brand-bg};
+}
+
+body {
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+}
+
+.site-main {
+  flex: 1 0 auto;
+}
+
+.site-header {
+  background: linear-gradient(90deg, $brand-navy, $brand-navy-soft);
+}
+
+.site-header .navbar-brand {
+  display: flex;
+  align-items: center;
+  gap: .5rem;
+  font-weight: 700;
+  letter-spacing: .02em;
+}
+
+.site-header .navbar-brand img {
+  height: 36px;
+  width: auto;
+}
+
+.site-footer {
+  flex-shrink: 0;
+  background: $brand-navy;
+  color: rgba(255, 255, 255, .65);
+}
+
+.auth-card {
+  max-width: 440px;
+  margin: 3rem auto;
+}