feat: Introduce reusable template components and enhance styling utilities for consistent UI

static/css/main.css

@@ -20,6 +20,21 @@
   --color-surface-alt: #f8fafc;
   --color-success: #047857;
   --color-error: #b91c1c;
+  --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: 12px;
+  --table-radius: 10px;
 }
 
 body {
@@ -318,22 +333,37 @@ body {
 
 .panel {
   background-color: var(--color-surface);
-  border-radius: 12px;
-  padding: 1.5rem;
+  border-radius: var(--panel-radius);
+  padding: var(--space-xl);
   box-shadow: 0 2px 8px var(--color-panel-shadow);
-  margin-bottom: 2rem;
+  margin-bottom: var(--space-2xl);
+}
+
+.panel h2,
+.panel h3 {
+  font-weight: 700;
+  color: var(--color-text-dark);
+  margin: 0 0 var(--space-sm);
+}
+
+.panel h2 {
+  font-size: var(--font-size-xl);
+}
+
+.panel h3 {
+  font-size: var(--font-size-lg);
 }
 
 .form-grid {
   display: grid;
-  gap: 1rem;
+  gap: var(--space-md);
   max-width: 480px;
 }
 
 .form-grid label {
   display: flex;
   flex-direction: column;
-  gap: 0.5rem;
+  gap: var(--space-sm);
   font-weight: 600;
   color: var(--color-text-strong);
 }
@@ -341,10 +371,10 @@ body {
 .form-grid input,
 .form-grid textarea,
 .form-grid select {
-  padding: 0.6rem 0.75rem;
+  padding: 0.6rem var(--space-sm);
   border: 1px solid var(--color-border-strong);
   border-radius: 8px;
-  font-size: 1rem;
+  font-size: var(--font-size-base);
 }
 
 .form-grid input:focus,