From 1851625a532f808e5f38fc3d78b2c4a5471201bd Mon Sep 17 00:00:00 2001
From: kris <krisoso.com@gmail.com>
Date: Sun, 22 Mar 2026 08:39:39 +0800
Subject: [PATCH] style: refine storyforge ops ui visual rhythm

---
 .../assets/styles.css                         | 64 ++++++++++++-------
 1 file changed, 41 insertions(+), 23 deletions(-)

diff --git a/output/ui/storyforge-web-v4-html-prototype-2026-03-22/assets/styles.css b/output/ui/storyforge-web-v4-html-prototype-2026-03-22/assets/styles.css
index 6bcb526..1ee93af 100644
--- a/output/ui/storyforge-web-v4-html-prototype-2026-03-22/assets/styles.css
+++ b/output/ui/storyforge-web-v4-html-prototype-2026-03-22/assets/styles.css
@@ -18,6 +18,7 @@
   --orange: #f29a38;
   --red: #e46767;
   --shadow: 0 18px 40px rgba(67, 93, 125, 0.12);
+  --shadow-soft: 0 10px 24px rgba(67, 93, 125, 0.08);
   --radius-xl: 24px;
   --radius-lg: 18px;
   --radius-md: 14px;
@@ -197,7 +198,7 @@ select {
   background: rgba(255, 255, 255, 0.82);
   backdrop-filter: blur(12px);
   border: 1px solid rgba(201, 220, 239, 0.75);
-  box-shadow: var(--shadow);
+  box-shadow: var(--shadow-soft);
 }
 
 .topbar-left,
@@ -282,7 +283,7 @@ select {
   align-items: end;
   justify-content: space-between;
   gap: 18px;
-  margin-bottom: 16px;
+  margin-bottom: 18px;
 }
 
 .screen-head h2 {
@@ -309,7 +310,10 @@ select {
   border-radius: 12px;
   padding: 10px 13px;
   font-size: 13px;
+  font-weight: 600;
+  line-height: 1;
   cursor: pointer;
+  transition: 0.18s ease;
 }
 
 .btn-primary {
@@ -324,6 +328,10 @@ select {
   border: 1px solid var(--line);
 }
 
+.btn:hover {
+  transform: translateY(-1px);
+}
+
 .layout-grid {
   display: grid;
   gap: 18px;
@@ -353,12 +361,12 @@ select {
   background: rgba(255, 255, 255, 0.9);
   border: 1px solid rgba(201, 220, 239, 0.9);
   border-radius: var(--radius-xl);
-  box-shadow: var(--shadow);
+  box-shadow: var(--shadow-soft);
   overflow: hidden;
 }
 
 .panel.pad {
-  padding: 18px;
+  padding: 17px;
 }
 
 .panel h3,
@@ -406,7 +414,7 @@ select {
 
 .list {
   display: grid;
-  gap: 12px;
+  gap: 10px;
 }
 
 .task-item,
@@ -422,7 +430,7 @@ select {
 .task-item,
 .queue-card,
 .review-card {
-  padding: 16px;
+  padding: 15px;
 }
 
 .task-item h4,
@@ -450,17 +458,25 @@ select {
 .row-meta {
   display: flex;
   flex-wrap: wrap;
-  gap: 8px;
-  margin-top: 12px;
+  gap: 7px;
+  margin-top: 10px;
 }
 
 .tag {
-  padding: 6px 10px;
+  padding: 5px 9px;
   border-radius: 999px;
   background: #f6f9fe;
   border: 1px solid var(--line);
   color: var(--muted);
-  font-size: 12px;
+  font-size: 11px;
+  line-height: 1.1;
+}
+
+.row-meta .tag {
+  background: var(--blue-50);
+  border-color: rgba(106, 164, 255, 0.18);
+  color: var(--blue-700);
+  font-weight: 600;
 }
 
 .tag.blue {
@@ -510,7 +526,7 @@ table {
 
 th,
 td {
-  padding: 14px 12px;
+  padding: 12px 12px;
   border-bottom: 1px solid var(--line);
   text-align: left;
   vertical-align: top;
@@ -525,7 +541,7 @@ thead th {
 }
 
 tbody tr:hover {
-  background: rgba(106, 164, 255, 0.04);
+  background: rgba(106, 164, 255, 0.055);
 }
 
 .entity-cell {
@@ -574,7 +590,7 @@ tbody tr:hover {
   justify-content: space-between;
   gap: 12px;
   flex-wrap: wrap;
-  padding: 18px;
+  padding: 16px;
   border-bottom: 1px solid var(--line);
   background: linear-gradient(180deg, #fbfdff 0%, #f4f9ff 100%);
 }
@@ -599,11 +615,12 @@ tbody tr:hover {
 
 .filter {
   min-width: 132px;
-  padding: 11px 12px;
+  padding: 10px 11px;
   border-radius: 12px;
   border: 1px solid var(--line);
   background: white;
   color: var(--muted);
+  font-size: 12px;
 }
 
 .panel-head {
@@ -611,7 +628,7 @@ tbody tr:hover {
   justify-content: space-between;
   align-items: center;
   gap: 14px;
-  margin-bottom: 14px;
+  margin-bottom: 12px;
 }
 
 .side-stack {
@@ -620,7 +637,7 @@ tbody tr:hover {
 }
 
 .insight-card {
-  padding: 16px;
+  padding: 15px;
   border-radius: 18px;
   border: 1px solid var(--line);
   background: linear-gradient(180deg, #fff 0%, #f6faff 100%);
@@ -635,8 +652,8 @@ tbody tr:hover {
   margin: 0;
   padding-left: 18px;
   color: var(--muted);
-  line-height: 1.65;
-  font-size: 12px;
+  line-height: 1.5;
+  font-size: 11px;
 }
 
 .tab-row {
@@ -662,23 +679,23 @@ tbody tr:hover {
 }
 
 .hero-card {
-  padding: 22px;
+  padding: 20px;
   border-radius: 24px;
   background: linear-gradient(145deg, rgba(212, 230, 255, 0.85) 0%, rgba(245, 250, 255, 0.96) 72%);
   border: 1px solid rgba(180, 210, 248, 0.85);
-  box-shadow: var(--shadow);
+  box-shadow: var(--shadow-soft);
 }
 
 .hero-card h3 {
   margin: 0 0 8px;
-  font-size: 20px;
+  font-size: 18px;
 }
 
 .hero-card p {
   margin: 0;
   color: var(--muted);
-  line-height: 1.6;
-  font-size: 14px;
+  line-height: 1.45;
+  font-size: 13px;
 }
 
 .mini-grid {
@@ -708,6 +725,7 @@ tbody tr:hover {
   border-radius: 16px;
   border: 1px solid var(--line);
   background: linear-gradient(180deg, #fff 0%, #f8fbff 100%);
+  box-shadow: inset 0 1px 0 rgba(255,255,255,0.8);
 }
 
 .playbook-item.active {