From 62f730567c997d721eaa8d4c0deb2fb02fbfb440 Mon Sep 17 00:00:00 2001
From: Jonathan Mirabal <jonathan.a.mirabal@gmail.com>
Date: Mon, 28 Sep 2026 16:12:26 -0400
Subject: [PATCH 1/2] fix(ui): improve mobile dashboard grid flow

---
 frontend/src/App.css | 818 ++++++++++++++++++++++++++++++++++---------
 1 file changed, 647 insertions(+), 171 deletions(-)

diff --git a/frontend/src/App.css b/frontend/src/App.css
index 888958f..b854930 100644
--- a/frontend/src/App.css
+++ b/frontend/src/App.css
@@ -104,7 +104,9 @@
   position: sticky;
   top: 0;
   z-index: 100;
-  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.04), 0 4px 24px rgba(0, 0, 0, 0.4);
+  box-shadow:
+    0 1px 0 rgba(255, 255, 255, 0.04),
+    0 4px 24px rgba(0, 0, 0, 0.4);
 }
 
 .header-left {
@@ -187,7 +189,10 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease;
+  transition:
+    border-color 0.2s ease,
+    box-shadow 0.2s ease,
+    transform 0.15s ease;
 }
 
 .avatar-upload-wrapper:hover {
@@ -272,11 +277,171 @@
 }
 
 @media (max-width: 768px) {
+  .app-container {
+    min-height: 100vh;
+    height: auto;
+    overflow-x: hidden;
+    overflow-y: visible;
+  }
+
   .dashboard-grid {
-    grid-template-columns: 1fr;
+    display: grid;
+    grid-template-columns: minmax(0, 1fr);
+    width: 100%;
+    max-width: 100%;
+    padding: 12px 8px;
+    overflow: visible;
+  }
+
+  .dashboard-grid > * {
+    min-width: 0;
+    width: 100%;
+    max-width: 100%;
+  }
+
+  .left-sidebar,
+  .center-content,
+  .right-sidebar {
+    position: static;
+    height: auto;
+    min-height: 0;
+    max-height: none;
+    overflow: visible;
+  }
+
+  .watchlist-container {
+    height: auto;
+    min-height: 0;
+    max-height: none;
+    overflow: visible;
+  }
+
+  .watchlist-items {
+    flex: none;
+    height: auto;
+    max-height: none;
+    overflow: visible;
   }
-  .left-sidebar, .right-sidebar {
-    grid-column: span 1;
+
+  .alerts-panel {
+    flex: none;
+    height: auto;
+    min-height: 0;
+    max-height: none;
+    overflow: visible;
+  }
+
+  .alerts-list {
+    flex: none;
+    height: auto;
+    max-height: none;
+    overflow: visible;
+  }
+}
+
+@media (max-width: 768px) {
+  html,
+  body,
+  #root {
+    height: auto;
+    min-height: 100%;
+    overflow-x: hidden;
+    overflow-y: auto;
+  }
+
+  .app-container,
+  .dashboard-grid,
+  .left-sidebar,
+  .center-content,
+  .right-sidebar,
+  .watchlist-container,
+  .watchlist-items,
+  .alerts-panel,
+  .alerts-list {
+    height: auto !important;
+    min-height: 0 !important;
+    max-height: none !important;
+    overflow-y: visible !important;
+    position: static !important;
+  }
+
+  .dashboard-grid {
+    grid-template-columns: minmax(0, 1fr);
+    width: 100%;
+    max-width: 100%;
+    padding: 12px 8px;
+    overflow-x: hidden !important;
+  }
+
+  .dashboard-grid > * {
+    min-width: 0;
+    max-width: 100%;
+  }
+
+  .chart-panel {
+    width: 100%;
+    max-width: 100%;
+    padding: 16px 12px;
+    box-sizing: border-box;
+  }
+
+  .chart-header {
+    flex-direction: column;
+    align-items: stretch;
+    gap: 12px;
+  }
+
+  .chart-range-selector {
+    width: 100%;
+    max-width: 100%;
+    overflow-x: auto;
+    white-space: nowrap;
+    justify-content: flex-start;
+    scrollbar-width: none;
+  }
+
+  .chart-range-selector::-webkit-scrollbar {
+    display: none;
+  }
+
+  .range-btn {
+    flex: 0 0 auto;
+    padding: 5px 9px;
+  }
+
+  .chart-container,
+  .chart-panel,
+  .insight-panel,
+  .alerts-panel {
+    margin-left: auto;
+    margin-right: auto;
+  }
+
+  .chart-panel {
+    overflow: hidden;
+  }
+
+  .chart-controls,
+  .indicator-controls,
+  .chart-range-selector {
+    width: 100%;
+    max-width: 100%;
+    min-width: 0;
+  }
+
+  .chart-controls,
+  .indicator-controls {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 8px;
+    justify-content: center;
+  }
+
+  .control-toggle-btn {
+    flex: 0 1 auto;
+    min-width: 0;
+    padding: 8px 10px;
+    font-size: 11px;
   }
 }
 
@@ -287,7 +452,9 @@
   border-radius: 14px;
   backdrop-filter: blur(12px);
   -webkit-backdrop-filter: blur(12px);
-  transition: border-color 0.3s ease, box-shadow 0.3s ease;
+  transition:
+    border-color 0.3s ease,
+    box-shadow 0.3s ease;
   overflow: hidden;
 }
 
@@ -371,7 +538,7 @@
   overflow-y: auto;
   padding: 8px;
   scrollbar-width: thin;
-  scrollbar-color: rgba(255,255,255,0.06) transparent;
+  scrollbar-color: rgba(255, 255, 255, 0.06) transparent;
 }
 
 .watchlist-item {
@@ -389,7 +556,7 @@
 }
 
 .watchlist-item::before {
-  content: '';
+  content: "";
   position: absolute;
   left: 0;
   top: 0;
@@ -462,7 +629,7 @@
   overflow-y: auto;
   max-height: calc(100vh - 130px);
   scrollbar-width: thin;
-  scrollbar-color: rgba(255,255,255,0.06) transparent;
+  scrollbar-color: rgba(255, 255, 255, 0.06) transparent;
 }
 
 /* Chart Styles */
@@ -588,7 +755,9 @@
   border-radius: 99px;
   box-shadow: 0 0 20px rgba(161, 84, 255, 0.3);
   letter-spacing: 0.01em;
-  transition: box-shadow 0.25s ease, transform 0.15s ease;
+  transition:
+    box-shadow 0.25s ease,
+    transform 0.15s ease;
 }
 
 .insight-btn:hover {
@@ -619,7 +788,9 @@
 }
 
 @keyframes spin {
-  to { transform: rotate(360deg); }
+  to {
+    transform: rotate(360deg);
+  }
 }
 
 .insight-result {
@@ -812,7 +983,7 @@
   flex-direction: column;
   gap: 8px;
   scrollbar-width: thin;
-  scrollbar-color: rgba(255,255,255,0.06) transparent;
+  scrollbar-color: rgba(255, 255, 255, 0.06) transparent;
 }
 
 .alert-item {
@@ -976,24 +1147,48 @@
 
 /* ─── 9. Animations ─────────────────────── */
 @keyframes slideUp {
-  from { opacity: 0; transform: translateY(20px); }
-  to   { opacity: 1; transform: translateY(0); }
+  from {
+    opacity: 0;
+    transform: translateY(20px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
 }
 
 @keyframes fadeIn {
-  from { opacity: 0; }
-  to   { opacity: 1; }
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
 }
 
 @keyframes pulseGlow {
-  0%   { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(0, 242, 254, 0.7); }
-  70%  { transform: scale(1.2);  box-shadow: 0 0 0 5px rgba(0, 242, 254, 0); }
-  100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(0, 242, 254, 0); }
+  0% {
+    transform: scale(0.95);
+    box-shadow: 0 0 0 0 rgba(0, 242, 254, 0.7);
+  }
+  70% {
+    transform: scale(1.2);
+    box-shadow: 0 0 0 5px rgba(0, 242, 254, 0);
+  }
+  100% {
+    transform: scale(0.95);
+    box-shadow: 0 0 0 0 rgba(0, 242, 254, 0);
+  }
 }
 
 @keyframes pulsePill {
-  0%, 100% { opacity: 1; }
-  50%       { opacity: 0.7; }
+  0%,
+  100% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.7;
+  }
 }
 
 .mini-chart-container,
@@ -1002,8 +1197,14 @@
 }
 
 @keyframes fadeInChart {
-  from { opacity: 0; transform: translateY(8px); }
-  to   { opacity: 1; transform: translateY(0); }
+  from {
+    opacity: 0;
+    transform: translateY(8px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
 }
 
 .animate-fade {
@@ -1011,8 +1212,12 @@
 }
 
 /* Neon glow filter helpers */
-.glow-cyan   { filter: drop-shadow(0 0 6px rgba(0, 242, 254, 0.7)); }
-.glow-violet { filter: drop-shadow(0 0 6px rgba(161, 84, 255, 0.7)); }
+.glow-cyan {
+  filter: drop-shadow(0 0 6px rgba(0, 242, 254, 0.7));
+}
+.glow-violet {
+  filter: drop-shadow(0 0 6px rgba(161, 84, 255, 0.7));
+}
 
 /* ─── 10. Landing Page Styles ───────────── */
 .landing-page-container {
@@ -1027,7 +1232,10 @@
 
 .bg-glow-mesh {
   position: absolute;
-  top: 0; left: 0; right: 0; bottom: 0;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
   pointer-events: none;
   z-index: 0;
   overflow: hidden;
@@ -1041,27 +1249,41 @@
 }
 
 .mesh-cyan {
-  width: 400px; height: 400px;
+  width: 400px;
+  height: 400px;
   background: var(--neon-cyan);
-  top: -100px; left: 10%;
+  top: -100px;
+  left: 10%;
   animation: floatLight 20s infinite ease-in-out;
 }
 
 .mesh-violet {
-  width: 500px; height: 500px;
+  width: 500px;
+  height: 500px;
   background: var(--neon-violet);
-  bottom: -150px; right: 10%;
+  bottom: -150px;
+  right: 10%;
   animation: floatLight2 25s infinite ease-in-out;
 }
 
 @keyframes floatLight {
-  0%, 100% { transform: translate(0, 0) scale(1); }
-  50%       { transform: translate(50px, 30px) scale(1.1); }
+  0%,
+  100% {
+    transform: translate(0, 0) scale(1);
+  }
+  50% {
+    transform: translate(50px, 30px) scale(1.1);
+  }
 }
 
 @keyframes floatLight2 {
-  0%, 100% { transform: translate(0, 0) scale(1.1); }
-  50%       { transform: translate(-40px, -60px) scale(0.9); }
+  0%,
+  100% {
+    transform: translate(0, 0) scale(1.1);
+  }
+  50% {
+    transform: translate(-40px, -60px) scale(0.9);
+  }
 }
 
 .landing-header {
@@ -1145,7 +1367,9 @@
 }
 
 @media (max-width: 640px) {
-  .hero-title { font-size: 36px; }
+  .hero-title {
+    font-size: 36px;
+  }
 }
 
 .hero-subtitle {
@@ -1181,9 +1405,15 @@
   border-radius: 50%;
 }
 
-.mockup-dots .red    { background: #ff5f56; }
-.mockup-dots .yellow { background: #ffbd2e; }
-.mockup-dots .green  { background: #27c93f; }
+.mockup-dots .red {
+  background: #ff5f56;
+}
+.mockup-dots .yellow {
+  background: #ffbd2e;
+}
+.mockup-dots .green {
+  background: #27c93f;
+}
 
 .mockup-url {
   margin: 0 auto;
@@ -1333,7 +1563,7 @@
 
 .auth-divider::before,
 .auth-divider::after {
-  content: '';
+  content: "";
   flex: 1;
   height: 1px;
   background: rgba(255, 255, 255, 0.08);
@@ -1399,7 +1629,9 @@
 }
 
 @media (max-width: 768px) {
-  .features-grid { grid-template-columns: 1fr; }
+  .features-grid {
+    grid-template-columns: 1fr;
+  }
 }
 
 .feature-card {
@@ -1599,8 +1831,12 @@
 }
 
 @keyframes scrollTicker {
-  0% { transform: translate3d(0, 0, 0); }
-  100% { transform: translate3d(-50%, 0, 0); }
+  0% {
+    transform: translate3d(0, 0, 0);
+  }
+  100% {
+    transform: translate3d(-50%, 0, 0);
+  }
 }
 
 /* Stock Key Metrics Grid */
@@ -1677,7 +1913,9 @@
   padding: 24px;
   border-radius: 16px;
   background: rgba(13, 16, 27, 0.85);
-  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5), inset 0 1px 1px rgba(255, 255, 255, 0.1);
+  box-shadow:
+    0 20px 50px rgba(0, 0, 0, 0.5),
+    inset 0 1px 1px rgba(255, 255, 255, 0.1);
   text-align: left;
 }
 
@@ -1726,7 +1964,9 @@
 /* Pricing & SaaS Plans Recharge Modal Styles */
 .pricing-modal-content {
   background: rgba(10, 12, 22, 0.9) !important;
-  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.7), inset 0 1px 1px rgba(255, 255, 255, 0.05) !important;
+  box-shadow:
+    0 24px 64px rgba(0, 0, 0, 0.7),
+    inset 0 1px 1px rgba(255, 255, 255, 0.05) !important;
 }
 
 .pricing-card {
@@ -1752,7 +1992,8 @@
 }
 
 @keyframes pulse-cyan-glow {
-  0%, 100% {
+  0%,
+  100% {
     border-color: rgba(0, 242, 254, 0.4);
     box-shadow: 0 8px 32px rgba(0, 242, 254, 0.1);
   }
@@ -1876,7 +2117,9 @@
   background: rgba(239, 68, 68, 0.08);
   border: 1px solid rgba(239, 68, 68, 0.3);
   color: #ef4444;
-  animation: slide-in-toast 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards, shake-toast 0.4s ease-in-out 0.3s;
+  animation:
+    slide-in-toast 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards,
+    shake-toast 0.4s ease-in-out 0.3s;
 }
 
 @keyframes slide-in-toast {
@@ -1891,9 +2134,16 @@
 }
 
 @keyframes shake-toast {
-  0%, 100% { transform: translateX(0); }
-  25% { transform: translateX(-4px); }
-  75% { transform: translateX(4px); }
+  0%,
+  100% {
+    transform: translateX(0);
+  }
+  25% {
+    transform: translateX(-4px);
+  }
+  75% {
+    transform: translateX(4px);
+  }
 }
 
 /* Indicators Controls Styles */
@@ -1997,8 +2247,8 @@ input::-webkit-inner-spin-button {
 }
 
 /* Reveal arrows when the input field is hovered */
-input[type=number]:hover::-webkit-outer-spin-button,
-input[type=number]:hover::-webkit-inner-spin-button {
+input[type="number"]:hover::-webkit-outer-spin-button,
+input[type="number"]:hover::-webkit-inner-spin-button {
   opacity: 0.7 !important;
 }
 
@@ -2009,7 +2259,7 @@ input::-webkit-inner-spin-button:hover {
   filter: invert(1) brightness(1.1) !important;
 }
 
-input[type=number] {
+input[type="number"] {
   -moz-appearance: number-input !important;
 }
 
@@ -2160,7 +2410,6 @@ input[type=number] {
   transform: rotateX(60deg) translateZ(-10px);
 }
 
-
 /* ─── The pile container tilted in 3D ─────── */
 .book-pile {
   position: relative;
@@ -2176,7 +2425,6 @@ input[type=number] {
   transform: rotateX(38deg) rotateY(-4deg) rotateZ(-8deg) translateY(-10px);
 }
 
-
 /* ─── Volumetric 3D Book Container ─────────── */
 .book-3d {
   position: absolute;
@@ -2186,23 +2434,47 @@ input[type=number] {
   transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
 }
 
-
 /* ─── Per-book thickness variable & Z-positions ─
    Each book sits directly on top of the one below.
    Z-offset = sum of thicknesses of all books below.
    ──────────────────────────────────────────────── */
-.book-3d.book-bottom { --t: 46px; transform: translateZ(0px); }
-.book-3d.book-4      { --t: 42px; transform: translateZ(46px) translateX(-3px); }
-.book-3d.book-3      { --t: 44px; transform: translateZ(88px) translateX(3px); }
-.book-3d.book-2      { --t: 44px; transform: translateZ(132px) translateX(-2px); }
-.book-3d.book-top    { --t: 42px; transform: translateZ(176px); }
+.book-3d.book-bottom {
+  --t: 46px;
+  transform: translateZ(0px);
+}
+.book-3d.book-4 {
+  --t: 42px;
+  transform: translateZ(46px) translateX(-3px);
+}
+.book-3d.book-3 {
+  --t: 44px;
+  transform: translateZ(88px) translateX(3px);
+}
+.book-3d.book-2 {
+  --t: 44px;
+  transform: translateZ(132px) translateX(-2px);
+}
+.book-3d.book-top {
+  --t: 42px;
+  transform: translateZ(176px);
+}
 
 /* ─── Hover: fan books out slightly ──────────── */
-.book-stack-wrapper:hover .book-3d.book-bottom { transform: translateZ(0px) translateX(-6px); }
-.book-stack-wrapper:hover .book-3d.book-4      { transform: translateZ(46px) translateX(-12px) translateY(2px); }
-.book-stack-wrapper:hover .book-3d.book-3      { transform: translateZ(88px) translateX(6px) translateY(4px); }
-.book-stack-wrapper:hover .book-3d.book-2      { transform: translateZ(132px) translateX(-4px) translateY(-2px); }
-.book-stack-wrapper:hover .book-3d.book-top    { transform: translateZ(176px) translateX(-2px) translateY(-10px); }
+.book-stack-wrapper:hover .book-3d.book-bottom {
+  transform: translateZ(0px) translateX(-6px);
+}
+.book-stack-wrapper:hover .book-3d.book-4 {
+  transform: translateZ(46px) translateX(-12px) translateY(2px);
+}
+.book-stack-wrapper:hover .book-3d.book-3 {
+  transform: translateZ(88px) translateX(6px) translateY(4px);
+}
+.book-stack-wrapper:hover .book-3d.book-2 {
+  transform: translateZ(132px) translateX(-4px) translateY(-2px);
+}
+.book-stack-wrapper:hover .book-3d.book-top {
+  transform: translateZ(176px) translateX(-2px) translateY(-10px);
+}
 
 /* ─── Top book flies open on click ─────────── */
 .book-3d.book-top.is-opening {
@@ -2215,7 +2487,6 @@ input[type=number] {
    is pixel-perfectly aligned to its covers.
    ─────────────────────────────────────────── */
 
-
 /* Back cover (Z = 0, faces away from viewer) */
 .book-face-bottom {
   position: absolute;
@@ -2232,8 +2503,8 @@ input[type=number] {
   background: var(--cover-gradient);
   border-radius: 3px 6px 6px 3px;
   box-shadow:
-    inset 0 0 30px rgba(0,0,0,0.45),
-    inset 4px 0 10px rgba(255,255,255,0.06),
+    inset 0 0 30px rgba(0, 0, 0, 0.45),
+    inset 4px 0 10px rgba(255, 255, 255, 0.06),
     /* Soft cosmic ambient highlight + warm gold light reflection overlay */
     inset 0 15px 30px rgba(14, 165, 233, 0.08),
     inset 0 -20px 40px rgba(251, 191, 36, 0.09);
@@ -2264,8 +2535,8 @@ input[type=number] {
   transform: rotateY(-90deg);
   background: var(--spine-gradient);
   box-shadow:
-    inset -4px 0 16px rgba(0,0,0,0.75),
-    inset 2px 0 6px rgba(255,255,255,0.05);
+    inset -4px 0 16px rgba(0, 0, 0, 0.75),
+    inset 2px 0 6px rgba(255, 255, 255, 0.05);
   display: flex;
   flex-direction: column;
   justify-content: space-around;
@@ -2288,7 +2559,12 @@ input[type=number] {
   background-color: #f4ebd7; /* Solid fallback to prevent transparency gaps */
   background:
     /* Warm gold ambient highlight blend + deep ambient shading */
-    linear-gradient(to right, rgba(251, 191, 36, 0.15) 0%, transparent 40%, rgba(0,0,0,0.2) 100%),
+    linear-gradient(
+      to right,
+      rgba(251, 191, 36, 0.15) 0%,
+      transparent 40%,
+      rgba(0, 0, 0, 0.2) 100%
+    ),
     repeating-linear-gradient(
       to bottom,
       #f5e9d3 0px,
@@ -2297,7 +2573,7 @@ input[type=number] {
       #e8dbbe 3px,
       #f5e9d3 4px
     );
-  box-shadow: inset 4px 0 10px rgba(0,0,0,0.3);
+  box-shadow: inset 4px 0 10px rgba(0, 0, 0, 0.3);
 }
 
 /* Bottom / fore-edge page block
@@ -2315,7 +2591,12 @@ input[type=number] {
   background-color: #f4ebd7; /* Solid fallback */
   background:
     /* Warm gold reflection overlay + deep ambient shading */
-    linear-gradient(to bottom, rgba(251, 191, 36, 0.15) 0%, transparent 40%, rgba(0,0,0,0.2) 100%),
+    linear-gradient(
+      to bottom,
+      rgba(251, 191, 36, 0.15) 0%,
+      transparent 40%,
+      rgba(0, 0, 0, 0.2) 100%
+    ),
     repeating-linear-gradient(
       to right,
       #f5e9d3 0px,
@@ -2324,12 +2605,9 @@ input[type=number] {
       #e8dbbe 3px,
       #f5e9d3 4px
     );
-  box-shadow: inset 0 3px 8px rgba(0,0,0,0.25);
+  box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.25);
 }
 
-
-
-
 /* ─── Spine Decoration ──────────────────────── */
 .book-spine-ridges {
   position: absolute;
@@ -2344,19 +2622,19 @@ input[type=number] {
 .book-spine-ridge {
   width: 100%;
   height: 3px;
-  background: rgba(0,0,0,0.45);
+  background: rgba(0, 0, 0, 0.45);
   border-top: 1px solid rgba(191, 149, 63, 0.5);
-  border-bottom: 1px solid rgba(255,255,255,0.06);
+  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
 }
 
 .book-spine-text {
-  font-family: 'EB Garamond', serif;
+  font-family: "EB Garamond", serif;
   font-size: 10px;
   font-weight: 700;
   letter-spacing: 2.5px;
   text-transform: uppercase;
   color: #fcebc4;
-  text-shadow: 0 1px 4px rgba(0,0,0,0.95);
+  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.95);
   white-space: nowrap;
   transform: rotate(90deg);
   transform-origin: center;
@@ -2372,10 +2650,24 @@ input[type=number] {
 
 /* ─── 3D Opening Keyframe ────────────────────── */
 @keyframes bookFlyOpen3D {
-  0%   { transform: translateZ(144px) rotateX(0deg) rotateZ(0deg); opacity: 1; }
-  40%  { transform: translateZ(280px) rotateX(-25deg) rotateZ(-10deg) translateY(-30px); opacity: 1; }
-  70%  { transform: translateZ(420px) rotateX(-55deg) rotateZ(5deg) translateY(-80px) scale(1.05); opacity: 0.8; }
-  100% { transform: translateZ(560px) rotateX(-90deg) translateY(-160px) scale(1.2); opacity: 0; }
+  0% {
+    transform: translateZ(144px) rotateX(0deg) rotateZ(0deg);
+    opacity: 1;
+  }
+  40% {
+    transform: translateZ(280px) rotateX(-25deg) rotateZ(-10deg)
+      translateY(-30px);
+    opacity: 1;
+  }
+  70% {
+    transform: translateZ(420px) rotateX(-55deg) rotateZ(5deg) translateY(-80px)
+      scale(1.05);
+    opacity: 0.8;
+  }
+  100% {
+    transform: translateZ(560px) rotateX(-90deg) translateY(-160px) scale(1.2);
+    opacity: 0;
+  }
 }
 
 /* ─── 2. Parchment Open Book Overlay ──────── */
@@ -2405,9 +2697,9 @@ input[type=number] {
   background: linear-gradient(135deg, #1e0e06 0%, #2d1810 40%, #1a0d08 100%);
   border-radius: 6px 14px 14px 6px;
   box-shadow:
-    0 40px 80px rgba(0,0,0,0.9),
+    0 40px 80px rgba(0, 0, 0, 0.9),
     0 0 0 1px #0d0705,
-    inset 0 1px 0 rgba(255,255,255,0.06);
+    inset 0 1px 0 rgba(255, 255, 255, 0.06);
   border: none;
   display: flex;
   padding: 18px 18px 18px 10px;
@@ -2424,7 +2716,9 @@ input[type=number] {
   height: 100%;
   background: linear-gradient(90deg, #0d0705 0%, #2a1409 60%, #1a0d08 100%);
   border-radius: 6px 0 0 6px;
-  box-shadow: inset -3px 0 8px rgba(0,0,0,0.5), inset 2px 0 4px rgba(255,255,255,0.04);
+  box-shadow:
+    inset -3px 0 8px rgba(0, 0, 0, 0.5),
+    inset 2px 0 4px rgba(255, 255, 255, 0.04);
 }
 
 /* Binding stitches */
@@ -2437,8 +2731,8 @@ input[type=number] {
   width: 3px;
   background: repeating-linear-gradient(
     180deg,
-    rgba(180,130,80,0.35) 0px,
-    rgba(180,130,80,0.35) 8px,
+    rgba(180, 130, 80, 0.35) 0px,
+    rgba(180, 130, 80, 0.35) 8px,
     transparent 8px,
     transparent 14px
   );
@@ -2448,13 +2742,19 @@ input[type=number] {
 /* ─── Pages Spread (Inside the Book) ─────── */
 .book-pages-spread {
   flex: 1;
-  background: radial-gradient(ellipse at 30% 20%, #f8f0dd 0%, #f0e5c5 45%, #e5d4a8 80%, #d9c48e 100%);
+  background: radial-gradient(
+    ellipse at 30% 20%,
+    #f8f0dd 0%,
+    #f0e5c5 45%,
+    #e5d4a8 80%,
+    #d9c48e 100%
+  );
   border-radius: 2px 6px 6px 2px;
   display: flex;
   position: relative;
   box-shadow:
-    inset 0 0 40px rgba(0,0,0,0.08),
-    0 0 0 1px rgba(0,0,0,0.2);
+    inset 0 0 40px rgba(0, 0, 0, 0.08),
+    0 0 0 1px rgba(0, 0, 0, 0.2);
   overflow: visible;
 }
 
@@ -2470,9 +2770,9 @@ input[type=number] {
   background: linear-gradient(
     90deg,
     transparent 0%,
-    rgba(0,0,0,0.18) 30%,
-    rgba(0,0,0,0.45) 50%,
-    rgba(0,0,0,0.18) 70%,
+    rgba(0, 0, 0, 0.18) 30%,
+    rgba(0, 0, 0, 0.45) 50%,
+    rgba(0, 0, 0, 0.18) 70%,
     transparent 100%
   );
   z-index: 5;
@@ -2488,7 +2788,7 @@ input[type=number] {
   position: relative;
   overflow-y: auto;
   overflow-x: hidden;
-  font-family: 'EB Garamond', serif;
+  font-family: "EB Garamond", serif;
   color: #1a1208;
   z-index: 2;
 }
@@ -2496,38 +2796,137 @@ input[type=number] {
 /* LEFT page – torn on right edge */
 .parchment-page-half.left-page {
   clip-path: polygon(
-    0% 0%, 98% 0%, 100% 1.2%, 97% 2.5%, 99.5% 4%, 98% 5.8%,
-    100% 7.5%, 97.5% 9.2%, 99% 11%, 97% 12.8%, 100% 14.5%,
-    98% 16.2%, 99.5% 18%, 97% 19.8%, 100% 21.5%, 98.5% 23.2%,
-    99% 25%, 97.5% 26.8%, 100% 28.5%, 98% 30.2%, 99.5% 32%,
-    97% 33.8%, 100% 35.5%, 98.5% 37.2%, 99% 39%, 97.5% 40.8%,
-    100% 42.5%, 98% 44.2%, 99.5% 46%, 97% 47.8%, 100% 49.5%,
-    98.5% 51.2%, 99% 53%, 97.5% 54.8%, 100% 56.5%, 98% 58.2%,
-    99.5% 60%, 97% 61.8%, 100% 63.5%, 98.5% 65.2%, 99% 67%,
-    97.5% 68.8%, 100% 70.5%, 98% 72.2%, 99.5% 74%, 97% 75.8%,
-    100% 77.5%, 98.5% 79.2%, 99% 81%, 97.5% 82.8%, 100% 84.5%,
-    98% 86.2%, 99.5% 88%, 97% 89.8%, 100% 91.5%, 98.5% 93.2%,
-    99% 95%, 97.5% 96.8%, 100% 98.5%, 98% 100%, 0% 100%
+    0% 0%,
+    98% 0%,
+    100% 1.2%,
+    97% 2.5%,
+    99.5% 4%,
+    98% 5.8%,
+    100% 7.5%,
+    97.5% 9.2%,
+    99% 11%,
+    97% 12.8%,
+    100% 14.5%,
+    98% 16.2%,
+    99.5% 18%,
+    97% 19.8%,
+    100% 21.5%,
+    98.5% 23.2%,
+    99% 25%,
+    97.5% 26.8%,
+    100% 28.5%,
+    98% 30.2%,
+    99.5% 32%,
+    97% 33.8%,
+    100% 35.5%,
+    98.5% 37.2%,
+    99% 39%,
+    97.5% 40.8%,
+    100% 42.5%,
+    98% 44.2%,
+    99.5% 46%,
+    97% 47.8%,
+    100% 49.5%,
+    98.5% 51.2%,
+    99% 53%,
+    97.5% 54.8%,
+    100% 56.5%,
+    98% 58.2%,
+    99.5% 60%,
+    97% 61.8%,
+    100% 63.5%,
+    98.5% 65.2%,
+    99% 67%,
+    97.5% 68.8%,
+    100% 70.5%,
+    98% 72.2%,
+    99.5% 74%,
+    97% 75.8%,
+    100% 77.5%,
+    98.5% 79.2%,
+    99% 81%,
+    97.5% 82.8%,
+    100% 84.5%,
+    98% 86.2%,
+    99.5% 88%,
+    97% 89.8%,
+    100% 91.5%,
+    98.5% 93.2%,
+    99% 95%,
+    97.5% 96.8%,
+    100% 98.5%,
+    98% 100%,
+    0% 100%
   );
-  box-shadow: inset -20px 0 30px rgba(0,0,0,0.07);
+  box-shadow: inset -20px 0 30px rgba(0, 0, 0, 0.07);
 }
 
 /* RIGHT page – torn on left edge */
 .parchment-page-half.right-page {
   clip-path: polygon(
-    0% 0%, 2% 1.2%, 0.5% 2.5%, 3% 4%, 0.5% 5.8%, 2.5% 7.5%,
-    0% 9.2%, 2.5% 11%, 1% 12.8%, 3% 14.5%, 0.5% 16.2%, 2% 18%,
-    0.5% 19.8%, 3% 21.5%, 0.5% 23.2%, 2% 25%, 0% 26.8%, 2.5% 28.5%,
-    0.5% 30.2%, 2% 32%, 0.5% 33.8%, 3% 35.5%, 0.5% 37.2%, 2% 39%,
-    0% 40.8%, 2.5% 42.5%, 0.5% 44.2%, 2% 46%, 0.5% 47.8%, 3% 49.5%,
-    0.5% 51.2%, 2% 53%, 0% 54.8%, 2.5% 56.5%, 0.5% 58.2%, 2% 60%,
-    0.5% 61.8%, 3% 63.5%, 0.5% 65.2%, 2% 67%, 0% 68.8%, 2.5% 70.5%,
-    0.5% 72.2%, 2% 74%, 0.5% 75.8%, 3% 77.5%, 0.5% 79.2%, 2% 81%,
-    0% 82.8%, 2.5% 84.5%, 0.5% 86.2%, 2% 88%, 0.5% 89.8%, 3% 91.5%,
-    0.5% 93.2%, 2% 95%, 0% 96.8%, 2% 98.5%, 0.5% 100%,
-    100% 100%, 100% 0%
+    0% 0%,
+    2% 1.2%,
+    0.5% 2.5%,
+    3% 4%,
+    0.5% 5.8%,
+    2.5% 7.5%,
+    0% 9.2%,
+    2.5% 11%,
+    1% 12.8%,
+    3% 14.5%,
+    0.5% 16.2%,
+    2% 18%,
+    0.5% 19.8%,
+    3% 21.5%,
+    0.5% 23.2%,
+    2% 25%,
+    0% 26.8%,
+    2.5% 28.5%,
+    0.5% 30.2%,
+    2% 32%,
+    0.5% 33.8%,
+    3% 35.5%,
+    0.5% 37.2%,
+    2% 39%,
+    0% 40.8%,
+    2.5% 42.5%,
+    0.5% 44.2%,
+    2% 46%,
+    0.5% 47.8%,
+    3% 49.5%,
+    0.5% 51.2%,
+    2% 53%,
+    0% 54.8%,
+    2.5% 56.5%,
+    0.5% 58.2%,
+    2% 60%,
+    0.5% 61.8%,
+    3% 63.5%,
+    0.5% 65.2%,
+    2% 67%,
+    0% 68.8%,
+    2.5% 70.5%,
+    0.5% 72.2%,
+    2% 74%,
+    0.5% 75.8%,
+    3% 77.5%,
+    0.5% 79.2%,
+    2% 81%,
+    0% 82.8%,
+    2.5% 84.5%,
+    0.5% 86.2%,
+    2% 88%,
+    0.5% 89.8%,
+    3% 91.5%,
+    0.5% 93.2%,
+    2% 95%,
+    0% 96.8%,
+    2% 98.5%,
+    0.5% 100%,
+    100% 100%,
+    100% 0%
   );
-  box-shadow: inset 20px 0 30px rgba(0,0,0,0.07);
+  box-shadow: inset 20px 0 30px rgba(0, 0, 0, 0.07);
 }
 
 /* Aged stain marks on pages */
@@ -2536,17 +2935,36 @@ input[type=number] {
   position: absolute;
   inset: 0;
   background:
-    radial-gradient(ellipse 60px 50px at 15% 85%, rgba(139, 90, 40, 0.06) 0%, transparent 70%),
-    radial-gradient(ellipse 40px 35px at 88% 12%, rgba(139, 90, 40, 0.05) 0%, transparent 70%),
-    radial-gradient(ellipse 80px 60px at 70% 75%, rgba(139, 90, 40, 0.04) 0%, transparent 70%);
+    radial-gradient(
+      ellipse 60px 50px at 15% 85%,
+      rgba(139, 90, 40, 0.06) 0%,
+      transparent 70%
+    ),
+    radial-gradient(
+      ellipse 40px 35px at 88% 12%,
+      rgba(139, 90, 40, 0.05) 0%,
+      transparent 70%
+    ),
+    radial-gradient(
+      ellipse 80px 60px at 70% 75%,
+      rgba(139, 90, 40, 0.04) 0%,
+      transparent 70%
+    );
   pointer-events: none;
   z-index: 0;
 }
 
 /* Custom Scrollbar */
-.parchment-page-half::-webkit-scrollbar { width: 5px; }
-.parchment-page-half::-webkit-scrollbar-track { background: rgba(0,0,0,0.04); }
-.parchment-page-half::-webkit-scrollbar-thumb { background: rgba(120,80,40,0.25); border-radius: 3px; }
+.parchment-page-half::-webkit-scrollbar {
+  width: 5px;
+}
+.parchment-page-half::-webkit-scrollbar-track {
+  background: rgba(0, 0, 0, 0.04);
+}
+.parchment-page-half::-webkit-scrollbar-thumb {
+  background: rgba(120, 80, 40, 0.25);
+  border-radius: 3px;
+}
 
 /* ─── Ink Typography ──────────────────────── */
 .ink-heading {
@@ -2555,10 +2973,10 @@ input[type=number] {
   font-style: italic;
   color: #0e0a04;
   margin-bottom: 20px;
-  border-bottom: 1px solid rgba(90,60,20,0.2);
+  border-bottom: 1px solid rgba(90, 60, 20, 0.2);
   padding-bottom: 12px;
   letter-spacing: -0.3px;
-  text-shadow: 0.5px 0.5px 0px rgba(0,0,0,0.08);
+  text-shadow: 0.5px 0.5px 0px rgba(0, 0, 0, 0.08);
   position: relative;
   z-index: 1;
 }
@@ -2648,13 +3066,13 @@ input[type=number] {
   cursor: pointer;
   transition: all 0.3s ease;
   position: relative;
-  box-shadow: 2px 3px 8px rgba(0,0,0,0.12);
+  box-shadow: 2px 3px 8px rgba(0, 0, 0, 0.12);
 }
 
 .sketch-node-circle:hover {
   transform: scale(1.1) rotate(3deg);
   border-color: #7a1515;
-  box-shadow: 3px 6px 14px rgba(122,21,21,0.18);
+  box-shadow: 3px 6px 14px rgba(122, 21, 21, 0.18);
 }
 
 .sketch-node-label {
@@ -2667,7 +3085,9 @@ input[type=number] {
   text-align: center;
 }
 
-.sketch-node-circle:hover .sketch-node-label { color: #7a1515; }
+.sketch-node-circle:hover .sketch-node-label {
+  color: #7a1515;
+}
 
 .sketch-node-desc-bubble {
   position: absolute;
@@ -2683,10 +3103,10 @@ input[type=number] {
   line-height: 1.4;
   color: #2a200e;
   z-index: 20;
-  box-shadow: 0 4px 16px rgba(0,0,0,0.18);
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18);
   pointer-events: none;
   animation: tooltipFadeIn 0.2s ease forwards;
-  font-family: 'EB Garamond', serif;
+  font-family: "EB Garamond", serif;
 }
 
 /* ─── Contact Form (Page 4) ────── */
@@ -2699,29 +3119,40 @@ input[type=number] {
   z-index: 1;
 }
 
-.ink-form-group { display: flex; flex-direction: column; gap: 4px; }
-.ink-form-label { font-size: 13px; font-weight: 600; color: #0e0a04; letter-spacing: 0.5px; }
+.ink-form-group {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+.ink-form-label {
+  font-size: 13px;
+  font-weight: 600;
+  color: #0e0a04;
+  letter-spacing: 0.5px;
+}
 
 .ink-form-input {
   background: transparent;
   border: none;
   border-bottom: 1.5px solid #7a6040;
   padding: 7px 4px;
-  font-family: 'EB Garamond', serif;
+  font-family: "EB Garamond", serif;
   font-size: 15px;
   color: #0e0a04;
   outline: none;
   width: 100%;
   transition: border-color 0.2s ease;
 }
-.ink-form-input:focus { border-bottom-color: #7a1515; }
+.ink-form-input:focus {
+  border-bottom-color: #7a1515;
+}
 
 .ink-form-textarea {
-  background: rgba(255,255,255,0.18);
+  background: rgba(255, 255, 255, 0.18);
   border: 1.5px solid #7a6040;
   border-radius: 3px;
   padding: 9px;
-  font-family: 'EB Garamond', serif;
+  font-family: "EB Garamond", serif;
   font-size: 15px;
   color: #0e0a04;
   outline: none;
@@ -2729,7 +3160,9 @@ input[type=number] {
   min-height: 90px;
   transition: border-color 0.2s ease;
 }
-.ink-form-textarea:focus { border-color: #7a1515; }
+.ink-form-textarea:focus {
+  border-color: #7a1515;
+}
 
 .ink-submit-button {
   background: linear-gradient(135deg, #7a1515 0%, #5c0f0f 100%);
@@ -2737,16 +3170,18 @@ input[type=number] {
   border: none;
   border-radius: 3px;
   padding: 11px;
-  font-family: 'EB Garamond', serif;
+  font-family: "EB Garamond", serif;
   font-size: 16px;
   font-weight: bold;
   cursor: pointer;
   transition: all 0.2s ease;
   margin-top: 8px;
   letter-spacing: 0.5px;
-  box-shadow: 0 3px 10px rgba(122,21,21,0.3);
+  box-shadow: 0 3px 10px rgba(122, 21, 21, 0.3);
+}
+.ink-submit-button:hover {
+  background: linear-gradient(135deg, #5c0f0f 0%, #3d0a0a 100%);
 }
-.ink-submit-button:hover { background: linear-gradient(135deg, #5c0f0f 0%, #3d0a0a 100%); }
 
 .ink-socials-grid {
   display: flex;
@@ -2765,14 +3200,18 @@ input[type=number] {
   padding: 9px;
   border: 1px solid #7a6040;
   border-radius: 3px;
-  font-family: 'EB Garamond', serif;
+  font-family: "EB Garamond", serif;
   font-size: 14px;
   font-weight: 600;
   color: #2a200e;
   transition: all 0.2s ease;
   text-decoration: none;
 }
-.ink-social-btn:hover { border-color: #7a1515; color: #7a1515; background: rgba(122,21,21,0.04); }
+.ink-social-btn:hover {
+  border-color: #7a1515;
+  color: #7a1515;
+  background: rgba(122, 21, 21, 0.04);
+}
 
 /* ─── Navigation Buttons ───────────────────── */
 .book-close-x {
@@ -2807,7 +3246,7 @@ input[type=number] {
   gap: 7px;
   background: transparent;
   border: none;
-  font-family: 'EB Garamond', serif;
+  font-family: "EB Garamond", serif;
   font-size: 15px;
   font-weight: bold;
   color: #7a1515;
@@ -2816,19 +3255,27 @@ input[type=number] {
   letter-spacing: 0.3px;
   z-index: 10;
 }
-.book-page-turn-btn.prev-btn { left: 44px; }
-.book-page-turn-btn.prev-btn:hover { transform: translateX(-4px); }
-.book-page-turn-btn.next-btn { right: 44px; }
-.book-page-turn-btn.next-btn:hover { transform: translateX(4px); }
+.book-page-turn-btn.prev-btn {
+  left: 44px;
+}
+.book-page-turn-btn.prev-btn:hover {
+  transform: translateX(-4px);
+}
+.book-page-turn-btn.next-btn {
+  right: 44px;
+}
+.book-page-turn-btn.next-btn:hover {
+  transform: translateX(4px);
+}
 
 .book-page-indicator {
   position: absolute;
   bottom: 26px;
   left: 50%;
   transform: translateX(-50%);
-  font-family: 'EB Garamond', serif;
+  font-family: "EB Garamond", serif;
   font-size: 13px;
-  color: rgba(42,32,14,0.5);
+  color: rgba(42, 32, 14, 0.5);
   letter-spacing: 2px;
   z-index: 10;
   pointer-events: none;
@@ -2873,7 +3320,7 @@ input[type=number] {
 
 /* Subtle animated neon sweep on hover */
 .lock-strategy-btn::before {
-  content: '';
+  content: "";
   position: absolute;
   top: 0;
   left: -75%;
@@ -2895,18 +3342,20 @@ input[type=number] {
 }
 
 /* Target / Stop Loss number inputs inside the lock-strategy-panel */
-.lock-strategy-panel input[type='number'] {
-  transition: border-color 0.2s ease, box-shadow 0.2s ease;
+.lock-strategy-panel input[type="number"] {
+  transition:
+    border-color 0.2s ease,
+    box-shadow 0.2s ease;
 }
 
-.lock-strategy-panel input[type='number']:focus {
+.lock-strategy-panel input[type="number"]:focus {
   border-color: var(--neon-cyan);
   box-shadow: 0 0 0 2px rgba(0, 242, 254, 0.15);
 }
 
 /* Hide native number spinner arrows for a cleaner look (optional) */
-.lock-strategy-panel input[type='number']::-webkit-outer-spin-button,
-.lock-strategy-panel input[type='number']::-webkit-inner-spin-button {
+.lock-strategy-panel input[type="number"]::-webkit-outer-spin-button,
+.lock-strategy-panel input[type="number"]::-webkit-inner-spin-button {
   -webkit-appearance: none;
   margin: 0;
 }
@@ -2940,26 +3389,53 @@ input[type=number] {
   }
 }
 
-
 /* ─── Animations ──────────────────────────── */
 @keyframes backdropFadeIn {
-  from { opacity: 0; }
-  to { opacity: 1; }
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
 }
 
 @keyframes bookReaderAppear {
-  from { opacity: 0; transform: scale(0.88) translateY(30px) rotate(-2deg); }
-  to { opacity: 1; transform: scale(1) translateY(0) rotate(0deg); }
+  from {
+    opacity: 0;
+    transform: scale(0.88) translateY(30px) rotate(-2deg);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1) translateY(0) rotate(0deg);
+  }
 }
 
 @keyframes bookFlyOpen {
-  0%   { transform: translateY(0) rotate(0deg) scale(1); opacity: 1; }
-  40%  { transform: translateY(-90px) rotate(-8deg) scale(1.06); opacity: 1; }
-  70%  { transform: translateY(-120px) rotate(4deg) scale(1.1); opacity: 0.85; }
-  100% { transform: translateY(-200px) rotate(0deg) scale(1.2); opacity: 0; }
+  0% {
+    transform: translateY(0) rotate(0deg) scale(1);
+    opacity: 1;
+  }
+  40% {
+    transform: translateY(-90px) rotate(-8deg) scale(1.06);
+    opacity: 1;
+  }
+  70% {
+    transform: translateY(-120px) rotate(4deg) scale(1.1);
+    opacity: 0.85;
+  }
+  100% {
+    transform: translateY(-200px) rotate(0deg) scale(1.2);
+    opacity: 0;
+  }
 }
 
 @keyframes tooltipFadeIn {
-  from { opacity: 0; transform: translate(-50%, 6px); }
-  to { opacity: 1; transform: translate(-50%, 0); }
+  from {
+    opacity: 0;
+    transform: translate(-50%, 6px);
+  }
+  to {
+    opacity: 1;
+    transform: translate(-50%, 0);
+  }
 }

From 5a12f604f02cdfb5a4369617f44c97d3447c293f Mon Sep 17 00:00:00 2001
From: Jonathan Mirabal <jonathan.a.mirabal@gmail.com>
Date: Mon, 28 Sep 2026 16:36:15 -0400
Subject: [PATCH 2/2] fix: resolve App.css merge markers

---
 frontend/src/App.css | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/frontend/src/App.css b/frontend/src/App.css
index 412e17f..b0e8286 100644
--- a/frontend/src/App.css
+++ b/frontend/src/App.css
@@ -355,7 +355,6 @@
     overflow-x: hidden;
     overflow-y: visible;
   }
-<<<<<<< HEAD
 
   .dashboard-grid {
     display: grid;
@@ -515,11 +514,11 @@
     min-width: 0;
     padding: 8px 10px;
     font-size: 11px;
-=======
+  }
+
   .left-sidebar,
   .right-sidebar {
     grid-column: span 1;
->>>>>>> upstream/main
   }
 }