refactor: improve layout and styling consistency across components

charactergarden/frontend/src/styles.css

@@ -26,15 +26,15 @@ textarea {
 .page-shell {
   width: min(1400px, calc(100vw - 32px));
   margin: 0 auto;
-  padding: 32px 0 48px;
+  padding: 16px 0 24px;
 }
 
 .hero-panel {
-  padding: 32px;
+  padding: 20px;
   border: 1px solid rgba(244, 239, 228, 0.16);
   background: rgba(19, 24, 18, 0.68);
   backdrop-filter: blur(12px);
-  border-radius: 28px;
+  border-radius: 20px;
   box-shadow: 0 22px 70px rgba(0, 0, 0, 0.24);
 }
 
@@ -65,8 +65,8 @@ h1 {
 
 .turn-form {
   display: grid;
-  gap: 12px;
-  margin-top: 24px;
+  gap: 8px;
+  margin-top: 12px;
 }
 
 .turn-form textarea {
@@ -81,7 +81,7 @@ h1 {
 
 .actions-row {
   display: grid;
-  gap: 12px;
+  gap: 8px;
 }
 
 .actions-row > button,
@@ -108,21 +108,21 @@ h1 {
 
 .result-card,
 .panel {
-  border-radius: 24px;
-  padding: 24px;
+  border-radius: 16px;
+  padding: 16px;
   border: 1px solid rgba(244, 239, 228, 0.12);
   background: rgba(11, 16, 12, 0.58);
 }
 
 .result-card {
-  margin-top: 24px;
+  margin-top: 12px;
 }
 
 .inspector-grid {
   display: grid;
   grid-template-columns: repeat(2, minmax(0, 1fr));
-  gap: 20px;
-  margin-top: 24px;
+  gap: 12px;
+  margin-top: 12px;
 }
 
 .entity-list,
@@ -131,13 +131,13 @@ h1 {
   padding: 0;
   margin: 0;
   display: grid;
-  gap: 14px;
+  gap: 8px;
 }
 
 .entity-list li,
 .timeline-list li {
-  padding: 16px;
-  border-radius: 18px;
+  padding: 10px 12px;
+  border-radius: 12px;
   background: rgba(255, 255, 255, 0.03);
   border: 1px solid rgba(255, 255, 255, 0.05);
 }
@@ -151,12 +151,14 @@ h1 {
 pre {
   white-space: pre-wrap;
   word-break: break-word;
-  font-size: 0.85rem;
+  font-size: 0.75rem;
   color: #cfd9c2;
+  margin: 4px 0 0 0;
+  padding: 4px 0;
 }
 
 .compact li {
-  padding: 12px;
+  padding: 8px 10px;
 }
 
 .error-banner {
@@ -176,6 +178,6 @@ pre {
 
   .hero-panel,
   .panel {
-    padding: 20px;
+    padding: 14px;
   }
 }