feat: Enhance CSS with custom properties for theming and layout adjustments

static/css/main.css

@@ -1,3 +1,95 @@
+:root {
+  --bg: #0b0f14;
+  --bg-2: #0f141b;
+  --card: #151b23;
+  --text: #e6edf3;
+  --muted: #a9b4c0;
+  --brand: #f1b21a;
+  --brand-2: #f6c648;
+  --brand-3: #f9d475;
+  --accent: #2ba58f;
+  --danger: #d14b4b;
+  --shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
+  --radius: 14px;
+  --radius-sm: 10px;
+  --container: 1180px;
+  --muted: var(--muted);
+  --color-text-subtle: rgba(169, 180, 192, 0.6);
+  --color-text-invert: #ffffff;
+  --color-text-dark: #0f172a;
+  --color-text-strong: #111827;
+  --color-border: rgba(255, 255, 255, 0.08);
+  --color-border-strong: rgba(255, 255, 255, 0.12);
+  --color-highlight: rgba(241, 178, 26, 0.08);
+  --color-panel-shadow: rgba(0, 0, 0, 0.25);
+  --color-panel-shadow-deep: rgba(0, 0, 0, 0.35);
+  --color-surface-alt: rgba(21, 27, 35, 0.7);
+  --space-2xs: 0.25rem;
+  --space-xs: 0.5rem;
+  --space-sm: 0.75rem;
+  --space-md: 1rem;
+  --space-lg: 1.5rem;
+  --space-xl: 2rem;
+  --space-2xl: 3rem;
+  --font-size-xs: 0.75rem;
+  --font-size-sm: 0.875rem;
+  --font-size-base: 1rem;
+  --font-size-lg: 1.25rem;
+  --font-size-xl: 1.5rem;
+  --font-size-2xl: 2rem;
+  --panel-radius: var(--radius);
+  --table-radius: var(--radius-sm);
+}
+
+* {
+  box-sizing: border-box;
+}
+
+html,
+body {
+  height: 100%;
+}
+
+body {
+  margin: 0;
+  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", "Roboto",
+    Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
+  color: var(--text);
+  background: linear-gradient(180deg, var(--bg) 0%, var(--bg-2) 100%);
+  line-height: 1.45;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  margin: 0 0 0.5rem 0;
+  font-weight: 700;
+  line-height: 1.2;
+}
+
+h1 {
+  font-size: var(--font-size-2xl);
+}
+
+h2 {
+  font-size: var(--font-size-xl);
+}
+
+h3 {
+  font-size: var(--font-size-lg);
+}
+
+p {
+  margin: 0 0 1rem 0;
+}
+
+a {
+  color: var(--brand);
+}
+
 .report-overview {
   margin-bottom: 2.5rem;
 }
@@ -199,97 +291,6 @@
   background: rgba(241, 178, 26, 0.14);
   border-color: var(--brand);
 }
-:root {
-  --bg: #0b0f14;
-  --bg-2: #0f141b;
-  --card: #151b23;
-  --text: #e6edf3;
-  --muted: #a9b4c0;
-  --brand: #f1b21a;
-  --brand-2: #f6c648;
-  --brand-3: #f9d475;
-  --accent: #2ba58f;
-  --danger: #d14b4b;
-  --shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
-  --radius: 14px;
-  --radius-sm: 10px;
-  --container: 1180px;
-  --muted: var(--muted);
-  --color-text-subtle: rgba(169, 180, 192, 0.6);
-  --color-text-invert: #ffffff;
-  --color-text-dark: #0f172a;
-  --color-text-strong: #111827;
-  --color-border: rgba(255, 255, 255, 0.08);
-  --color-border-strong: rgba(255, 255, 255, 0.12);
-  --color-highlight: rgba(241, 178, 26, 0.08);
-  --color-panel-shadow: rgba(0, 0, 0, 0.25);
-  --color-panel-shadow-deep: rgba(0, 0, 0, 0.35);
-  --color-surface-alt: rgba(21, 27, 35, 0.7);
-  --space-2xs: 0.25rem;
-  --space-xs: 0.5rem;
-  --space-sm: 0.75rem;
-  --space-md: 1rem;
-  --space-lg: 1.5rem;
-  --space-xl: 2rem;
-  --space-2xl: 3rem;
-  --font-size-xs: 0.75rem;
-  --font-size-sm: 0.875rem;
-  --font-size-base: 1rem;
-  --font-size-lg: 1.25rem;
-  --font-size-xl: 1.5rem;
-  --font-size-2xl: 2rem;
-  --panel-radius: var(--radius);
-  --table-radius: var(--radius-sm);
-}
-
-* {
-  box-sizing: border-box;
-}
-
-html,
-body {
-  height: 100%;
-}
-
-body {
-  margin: 0;
-  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", "Roboto",
-    Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
-  color: var(--text);
-  background: linear-gradient(180deg, var(--bg) 0%, var(--bg-2) 100%);
-  line-height: 1.45;
-}
-
-h1,
-h2,
-h3,
-h4,
-h5,
-h6 {
-  margin: 0 0 0.5rem 0;
-  font-weight: 700;
-  line-height: 1.2;
-}
-
-h1 {
-  font-size: var(--font-size-2xl);
-}
-
-h2 {
-  font-size: var(--font-size-xl);
-}
-
-h3 {
-  font-size: var(--font-size-lg);
-}
-
-p {
-  margin: 0 0 1rem 0;
-}
-
-a {
-  color: var(--brand);
-}
 
 .app-layout {
   display: flex;
@@ -321,20 +322,29 @@ a {
   display: flex;
   align-items: center;
   gap: 1rem;
+  padding: 0.5rem 1rem;
+  border-radius: 0.75rem;
+}
+a.sidebar-brand {
+  text-decoration: none;
+}
+a.sidebar-brand:hover,
+a.sidebar-brand:focus {
+  color: var(--color-text-invert);
+  background-color: rgba(148, 197, 255, 0.18);
 }
 
 .sidebar-nav-controls {
   display: flex;
   justify-content: center;
-  gap: 0.5rem;
+  gap: 10px;
-  margin: 1rem 0;
+  margin: 0;
 }
 
 .nav-chevron {
-  width: 40px;
+  width: 80px;
-  height: 40px;
+  height: 80px;
   border: none;
-  border-radius: 50%;
   background: rgba(255, 255, 255, 0.1);
   color: rgba(255, 255, 255, 0.88);
   font-size: 1.2rem;
@@ -886,8 +896,9 @@ a {
   border: none;
   cursor: pointer;
   font-weight: 600;
-  background-color: var(--color-border);
+  background-color: var(--brand);
   color: var(--color-text-dark);
+  text-decoration: none;
   transition: transform 0.15s ease, box-shadow 0.15s ease;
 }
 
@@ -899,7 +910,7 @@ a {
 
 .btn.primary {
   background-color: var(--brand-2);
-  color: var(--color-text-invert);
+  color: var(--color-text-dark);
 }
 
 .btn.primary:hover,
@@ -907,6 +918,14 @@ a {
   background-color: var(--brand-3);
 }
 
+.btn.btn-link {
+  background: var(--brand);
+  color: var(--color-text-dark);
+  text-decoration: none;
+  border: 1px solid var(--brand);
+  margin-bottom: 0.5rem;
+}
+
 .result-output {
   background-color: var(--color-text-dark);
   color: var(--color-surface-alt);