style: rewrite style.css with Doot dark glass design tokensstory/ui-dark-glass-theme

1 files changed, 173 insertions, 357 deletions

diff --git a/web/style.css b/web/style.css
index b3b3cde..78bfffe 100644
--- a/web/style.css
+++ b/web/style.css
@@ -1,4 +1,4 @@
-@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&display=swap');
 
 /* Design tokens */
 :root {
@@ -13,12 +13,12 @@
   --state-blocked:          #818cf8;
   --state-ready:            #34d399;
 
-  --bg:             #080f1a;
-  --surface:        rgba(15, 23, 42, 0.80);
+  --bg:             #020617;
+  --surface:        rgba(15, 23, 42, 0.8);
   --surface-1:      rgba(22, 33, 62, 0.85);
   --surface-hover:  rgba(30, 44, 80, 0.90);
-  --border:         rgba(255, 255, 255, 0.08);
-  --border-light:   rgba(255, 255, 255, 0.12);
+  --border:         rgba(255, 255, 255, 0.05);
+  --border-light:   rgba(255, 255, 255, 0.10);
   --text:           #e2e8f0;
   --text-muted:     #94a3b8;
   --accent:         #38bdf8;
@@ -29,16 +29,16 @@
   --danger:      #f87171;
 
   /* Component aliases */
-  --bg-card:     rgba(15, 23, 42, 0.80);
-  --card-bg:     rgba(15, 23, 42, 0.80);
+  --bg-card:     rgba(15, 23, 42, 0.8);
+  --card-bg:     rgba(15, 23, 42, 0.8);
   --bg-elevated: rgba(22, 33, 62, 0.85);
   --bg-hover:    rgba(30, 44, 80, 0.90);
-  --code-bg:     rgba(8, 15, 26, 0.90);
+  --code-bg:     rgba(2, 6, 23, 0.90);
   --font-mono:   ui-monospace, "Cascadia Code", "Fira Code", monospace;
-  --font-sans:   'Inter', system-ui, -apple-system, sans-serif;
+  --font-sans:   'Inter', system-ui, sans-serif;
 
   /* Glass-morphism */
-  --glass-bg:      rgba(15, 23, 42, 0.72);
+  --glass-bg:      rgba(15, 23, 42, 0.8);
   --glass-blur:    12px;
   --glass-border:  rgba(255, 255, 255, 0.05);
   --glass-shadow:  0 8px 32px rgba(0, 0, 0, 0.45);
@@ -56,6 +56,8 @@ body {
   background: var(--bg);
   color: var(--text);
   min-height: 100dvh;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
 }
 
 /* Header */
@@ -76,7 +78,7 @@ header {
 
 header h1 {
   font-size: 1.25rem;
-  font-weight: 700;
+  font-weight: 600;
   color: var(--accent);
   letter-spacing: -0.01em;
   max-width: 640px;
@@ -93,7 +95,7 @@ header h1 {
 .agent-selector {
   background: var(--glass-bg);
   border: 1px solid var(--glass-border);
-  border-radius: 0.375rem;
+  border-radius: 0.5rem;
   color: var(--text);
   padding: 0.4em 0.6em;
   font-size: 0.85rem;
@@ -112,8 +114,8 @@ header h1 {
   -webkit-backdrop-filter: blur(var(--glass-blur));
   border-bottom: 1px solid var(--glass-border);
   display: flex;
-  gap: 0;
-  padding: 0;
+  gap: 0.25rem;
+  padding: 0.5rem 0.75rem;
   max-width: 100%;
   position: sticky;
   top: 57px;
@@ -123,25 +125,25 @@ header h1 {
 .tab {
   flex: 1;
   text-align: center;
-  font-size: 0.88rem;
-  font-weight: 600;
-  padding: 0.65em 0;
+  font-size: 0.875rem;
+  font-weight: 300;
+  padding: 0.5rem 1rem;
   border: none;
-  border-bottom: 2px solid transparent;
+  border-radius: 0.5rem;
   background: transparent;
-  color: var(--text-muted);
+  color: rgba(255, 255, 255, 0.7);
   cursor: pointer;
-  transition: color 0.15s, border-color 0.15s;
-  margin-bottom: -1px;
+  transition: background 0.15s, color 0.15s;
 }
 
 .tab:hover {
-  color: var(--text);
+  color: #fff;
+  background: rgba(255, 255, 255, 0.08);
 }
 
 .tab.active {
-  color: var(--accent);
-  border-bottom-color: var(--accent);
+  background: rgba(255, 255, 255, 0.2);
+  color: #fff;
 }
 
 .tab-count-badge {
@@ -150,7 +152,7 @@ header h1 {
   padding: 0 0.4em;
   border-radius: 999px;
   font-size: 0.7em;
-  font-weight: 700;
+  font-weight: 600;
   line-height: 1.5;
   background: var(--accent);
   color: #fff;
@@ -180,7 +182,7 @@ main {
 
 .panel-header h2 {
   font-size: 1rem;
-  font-weight: 700;
+  font-weight: 600;
 }
 
 /* Task list toolbar */
@@ -195,7 +197,7 @@ main {
 
 .filter-tab {
   font-size: 0.78rem;
-  font-weight: 600;
+  font-weight: 500;
   padding: 0.3em 0.75em;
   border: none;
   border-bottom: 2px solid transparent;
@@ -241,12 +243,20 @@ main {
   backdrop-filter: blur(var(--glass-blur));
   -webkit-backdrop-filter: blur(var(--glass-blur));
   border: 1px solid var(--glass-border);
-  border-radius: 0.5rem;
+  border-radius: 0.75rem;
   padding: 0.875rem 1rem;
   display: flex;
   flex-direction: column;
   gap: 0.375rem;
   box-shadow: var(--glass-shadow);
+  cursor: pointer;
+  position: relative;
+  transition: border-color 0.15s, box-shadow 0.15s;
+}
+
+.task-card:hover {
+  border-color: var(--accent);
+  box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 25%, transparent);
 }
 
 .task-card-header {
@@ -258,7 +268,7 @@ main {
 }
 
 .task-name {
-  font-weight: 600;
+  font-weight: 500;
   font-size: 0.95rem;
   flex: 1;
   min-width: 0;
@@ -302,10 +312,10 @@ main {
 
 .task-project {
   font-size: 0.72rem;
-  font-weight: 600;
+  font-weight: 500;
   color: var(--text-muted);
-  background: var(--bg-elevated, #2a2a2a);
-  border: 1px solid var(--border, #444);
+  background: var(--bg-elevated, rgba(22,33,62,0.85));
+  border: 1px solid var(--border);
   border-radius: 3px;
   padding: 0 0.35rem;
   letter-spacing: 0.02em;
@@ -339,14 +349,18 @@ main {
 
 .btn-run {
   font-size: 0.8rem;
-  font-weight: 600;
+  font-weight: 500;
   padding: 0.35em 0.85em;
-  border-radius: 0.375rem;
+  border-radius: 0.5rem;
   border: none;
   cursor: pointer;
-  background: var(--accent);
-  color: #0f172a;
-  transition: opacity 0.15s;
+  background: #0ea5e9;
+  color: #fff;
+  transition: background 0.15s;
+}
+
+.btn-run:hover:not(:disabled) {
+  background: #38bdf8;
 }
 
 .btn-run:disabled {
@@ -356,9 +370,9 @@ main {
 
 .btn-cancel {
   font-size: 0.8rem;
-  font-weight: 600;
+  font-weight: 500;
   padding: 0.35em 0.85em;
-  border-radius: 0.375rem;
+  border-radius: 0.5rem;
   border: none;
   cursor: pointer;
   background: var(--state-failed);
@@ -373,14 +387,18 @@ main {
 
 .btn-restart {
   font-size: 0.8rem;
-  font-weight: 600;
+  font-weight: 500;
   padding: 0.35em 0.85em;
-  border-radius: 0.375rem;
+  border-radius: 0.5rem;
   border: none;
   cursor: pointer;
-  background: var(--text-muted);
-  color: #0f172a;
-  transition: opacity 0.15s;
+  background: rgba(255, 255, 255, 0.1);
+  color: var(--text);
+  transition: background 0.15s;
+}
+
+.btn-restart:hover:not(:disabled) {
+  background: rgba(255, 255, 255, 0.2);
 }
 
 .btn-restart:disabled {
@@ -390,14 +408,18 @@ main {
 
 .btn-resume {
   font-size: 0.8rem;
-  font-weight: 600;
+  font-weight: 500;
   padding: 0.35em 0.85em;
-  border-radius: 0.375rem;
+  border-radius: 0.5rem;
   border: none;
   cursor: pointer;
-  background: var(--text-muted);
-  color: #0f172a;
-  transition: opacity 0.15s;
+  background: rgba(255, 255, 255, 0.1);
+  color: var(--text);
+  transition: background 0.15s;
+}
+
+.btn-resume:hover:not(:disabled) {
+  background: rgba(255, 255, 255, 0.2);
 }
 
 .btn-resume:disabled {
@@ -407,9 +429,9 @@ main {
 
 .btn-accept {
   font-size: 0.8rem;
-  font-weight: 600;
+  font-weight: 500;
   padding: 0.35em 0.85em;
-  border-radius: 0.375rem;
+  border-radius: 0.5rem;
   border: none;
   cursor: pointer;
   background: var(--state-completed);
@@ -424,17 +446,21 @@ main {
 
 .btn-reject {
   font-size: 0.8rem;
-  font-weight: 600;
+  font-weight: 500;
   padding: 0.35em 0.85em;
-  border-radius: 0.375rem;
+  border-radius: 0.5rem;
   border: none;
   cursor: pointer;
-  background: var(--text-muted);
-  color: #0f172a;
-  transition: opacity 0.15s;
+  background: rgba(255, 255, 255, 0.1);
+  color: var(--text);
+  transition: background 0.15s;
   margin-left: 0.375rem;
 }
 
+.btn-reject:hover:not(:disabled) {
+  background: rgba(255, 255, 255, 0.2);
+}
+
 .btn-reject:disabled {
   opacity: 0.5;
   cursor: not-allowed;
@@ -481,17 +507,23 @@ main {
   flex: 1;
   font-size: 0.8rem;
   padding: 0.3em 0.6em;
-  border-radius: 0.375rem;
-  border: 1px solid var(--border);
-  background: var(--glass-bg);
+  border-radius: 0.5rem;
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  background: var(--bg);
   color: var(--text);
+  font-family: inherit;
+}
+
+.task-answer-input:focus {
+  outline: 2px solid var(--accent);
+  outline-offset: 1px;
 }
 
 .btn-answer {
   font-size: 0.8rem;
-  font-weight: 600;
+  font-weight: 500;
   padding: 0.35em 0.85em;
-  border-radius: 0.375rem;
+  border-radius: 0.5rem;
   border: none;
   cursor: pointer;
   background: var(--state-blocked);
@@ -513,18 +545,18 @@ main {
 /* Primary button */
 .btn-primary {
   font-size: 0.85rem;
-  font-weight: 600;
+  font-weight: 500;
   padding: 0.4em 1em;
-  border-radius: 0.375rem;
+  border-radius: 0.5rem;
   border: none;
   cursor: pointer;
-  background: var(--accent);
-  color: #0f172a;
-  transition: filter 0.15s;
+  background: #0ea5e9;
+  color: #fff;
+  transition: background 0.15s;
 }
 
 .btn-primary:hover:not(:disabled) {
-  filter: brightness(1.1);
+  background: #38bdf8;
 }
 
 .btn-primary:disabled {
@@ -535,19 +567,18 @@ main {
 /* Secondary button */
 .btn-secondary {
   font-size: 0.85rem;
-  font-weight: 600;
+  font-weight: 500;
   padding: 0.4em 1em;
-  border-radius: 0.375rem;
-  border: 1px solid var(--border);
-  background: transparent;
-  color: var(--text-muted);
+  border-radius: 0.5rem;
+  border: none;
+  background: rgba(255, 255, 255, 0.1);
+  color: var(--text);
   cursor: pointer;
-  transition: background 0.15s, color 0.15s;
+  transition: background 0.15s;
 }
 
-.btn-secondary:hover {
-  background: var(--border);
-  color: var(--text);
+.btn-secondary:hover:not(:disabled) {
+  background: rgba(255, 255, 255, 0.2);
 }
 
 .btn-secondary:disabled {
@@ -558,13 +589,13 @@ main {
 /* Danger button */
 .btn-danger {
   font-size: 0.85rem;
-  font-weight: 600;
+  font-weight: 500;
   padding: 0.4em 1em;
-  border-radius: 0.375rem;
+  border-radius: 0.5rem;
   border: none;
   cursor: pointer;
   background: var(--state-failed);
-  color: #0f172a;
+  color: #fff;
   transition: opacity 0.15s;
 }
 
@@ -585,7 +616,7 @@ dialog {
   -webkit-backdrop-filter: blur(var(--glass-blur));
   color: var(--text);
   border: 1px solid var(--glass-border);
-  border-radius: 8px;
+  border-radius: 0.75rem;
   padding: 1.5rem;
   max-width: 480px;
   width: 100%;
@@ -600,7 +631,7 @@ dialog::backdrop {
 
 dialog h2 {
   font-size: 1.1rem;
-  font-weight: 700;
+  font-weight: 600;
   margin-bottom: 1rem;
 }
 
@@ -618,9 +649,9 @@ dialog label select {
   display: block;
   width: 100%;
   margin-top: 4px;
-  background: rgba(8, 15, 26, 0.70);
-  border: 1px solid var(--border);
-  border-radius: 0.375rem;
+  background: var(--bg);
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  border-radius: 0.5rem;
   color: var(--text);
   padding: 0.4em 0.6em;
   font-size: 0.9rem;
@@ -645,16 +676,16 @@ dialog label select:focus {
 .form-actions button[type="button"] {
   font-size: 0.85rem;
   padding: 0.4em 1em;
-  border-radius: 0.375rem;
-  border: 1px solid var(--border);
-  background: transparent;
-  color: var(--text-muted);
+  border-radius: 0.5rem;
+  border: none;
+  background: rgba(255, 255, 255, 0.1);
+  color: var(--text);
   cursor: pointer;
+  transition: background 0.15s;
 }
 
 .form-actions button[type="button"]:hover {
-  background: var(--border);
-  color: var(--text);
+  background: rgba(255, 255, 255, 0.2);
 }
 
 /* Inline form error */
@@ -707,7 +738,7 @@ dialog label select:focus {
 
 .task-panel-header h2 {
   font-size: 1rem;
-  font-weight: 700;
+  font-weight: 600;
   margin: 0;
   flex: 1;
   min-width: 0;
@@ -725,13 +756,13 @@ dialog label select:focus {
   line-height: 1;
   padding: 0.15em 0.35em;
   margin-left: 0.5rem;
-  border-radius: 0.25rem;
+  border-radius: 0.375rem;
   flex-shrink: 0;
 }
 
 .btn-close-panel:hover {
   color: var(--text);
-  background: var(--border);
+  background: rgba(255, 255, 255, 0.1);
 }
 
 .task-panel-content {
@@ -751,7 +782,7 @@ dialog label select:focus {
 
 .panel-section-title {
   font-size: 0.68rem;
-  font-weight: 700;
+  font-weight: 600;
   letter-spacing: 0.08em;
   text-transform: uppercase;
   color: var(--text-muted);
@@ -801,7 +832,7 @@ dialog label select:focus {
 .panel-code {
   background: var(--code-bg);
   border: 1px solid var(--border);
-  border-radius: 0.375rem;
+  border-radius: 0.5rem;
   padding: 0.625rem 0.75rem;
   font-family: monospace;
   font-size: 0.8rem;
@@ -820,17 +851,6 @@ dialog label select:focus {
   margin-top: 0.1rem;
 }
 
-/* Clickable task cards */
-.task-card {
-  cursor: pointer;
-  transition: border-color 0.15s, box-shadow 0.15s;
-}
-
-.task-card:hover {
-  border-color: var(--accent);
-  box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 25%, transparent);
-}
-
 /* Panel loading / error */
 .panel-loading {
   color: var(--text-muted);
@@ -857,7 +877,7 @@ dialog label select:focus {
   backdrop-filter: blur(var(--glass-blur));
   -webkit-backdrop-filter: blur(var(--glass-blur));
   border: 1px solid var(--glass-border);
-  border-radius: 0.375rem;
+  border-radius: 0.5rem;
   padding: 0.625rem 0.75rem;
   display: flex;
   align-items: center;
@@ -958,9 +978,9 @@ dialog label select:focus {
 
 .btn-view-logs {
   font-size: 0.72rem;
-  font-weight: 600;
+  font-weight: 500;
   padding: 0.2em 0.55em;
-  border-radius: 0.25rem;
+  border-radius: 0.375rem;
   border: 1px solid var(--border);
   background: transparent;
   color: var(--text-muted);
@@ -970,7 +990,7 @@ dialog label select:focus {
 }
 
 .btn-view-logs:hover {
-  background: var(--border);
+  background: rgba(255, 255, 255, 0.1);
   color: var(--text);
 }
 
@@ -993,7 +1013,7 @@ dialog label select:focus {
   backdrop-filter: blur(var(--glass-blur));
   -webkit-backdrop-filter: blur(var(--glass-blur));
   border: 1px solid var(--warn);
-  border-radius: 0.5rem;
+  border-radius: 0.75rem;
 }
 
 .question-item {
@@ -1003,7 +1023,7 @@ dialog label select:focus {
 }
 
 .question-text {
-  font-weight: 600;
+  font-weight: 500;
   color: var(--warn);
   font-size: 0.9rem;
 }
@@ -1017,8 +1037,8 @@ dialog label select:focus {
 .btn-question-option {
   padding: 0.375rem 0.75rem;
   border: 1px solid var(--border);
-  border-radius: 0.375rem;
-  background: var(--glass-bg);
+  border-radius: 0.5rem;
+  background: rgba(255, 255, 255, 0.05);
   color: var(--text);
   cursor: pointer;
   font-size: 0.8rem;
@@ -1026,7 +1046,7 @@ dialog label select:focus {
 }
 
 .btn-question-option:hover:not(:disabled) {
-  background: var(--bg-hover);
+  background: rgba(255, 255, 255, 0.12);
   border-color: var(--warn);
 }
 
@@ -1043,11 +1063,12 @@ dialog label select:focus {
 .question-input {
   flex: 1;
   padding: 0.375rem 0.5rem;
-  border: 1px solid var(--border);
-  border-radius: 0.375rem;
-  background: var(--glass-bg);
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  border-radius: 0.5rem;
+  background: var(--bg);
   color: var(--text);
   font-size: 0.8rem;
+  font-family: inherit;
 }
 
 .question-input:focus {
@@ -1058,7 +1079,7 @@ dialog label select:focus {
 .btn-question-send {
   padding: 0.375rem 0.75rem;
   border: 1px solid var(--warn);
-  border-radius: 0.375rem;
+  border-radius: 0.5rem;
   background: var(--warn);
   color: #0f172a;
   font-weight: 600;
@@ -1090,22 +1111,21 @@ dialog label select:focus {
 
 .log-back-btn {
   font-size: 0.78rem;
-  font-weight: 600;
+  font-weight: 500;
   padding: 0.3em 0.75em;
-  border-radius: 0.375rem;
-  border: 1px solid var(--border);
-  background: transparent;
-  color: var(--text-muted);
+  border-radius: 0.5rem;
+  border: none;
+  background: rgba(255, 255, 255, 0.1);
+  color: var(--text);
   cursor: pointer;
-  transition: background 0.15s, color 0.15s;
+  transition: background 0.15s;
   margin-bottom: 1rem;
   display: inline-flex;
   align-items: center;
 }
 
 .log-back-btn:hover {
-  background: var(--border);
-  color: var(--text);
+  background: rgba(255, 255, 255, 0.2);
 }
 
 @keyframes pulse-dot {
@@ -1140,7 +1160,7 @@ dialog label select:focus {
   max-height: 400px;
   background: var(--code-bg);
   padding: 0.625rem 0.75rem;
-  border-radius: 0.375rem;
+  border-radius: 0.5rem;
   border: 1px solid var(--border);
 }
 
@@ -1227,7 +1247,7 @@ dialog label select:focus {
 
 .running-current h2 {
   font-size: 1rem;
-  font-weight: 600;
+  font-weight: 500;
   color: var(--text-muted);
   text-transform: uppercase;
   letter-spacing: 0.05em;
@@ -1245,7 +1265,7 @@ dialog label select:focus {
   backdrop-filter: blur(var(--glass-blur));
   -webkit-backdrop-filter: blur(var(--glass-blur));
   border: 1px solid var(--glass-border);
-  border-radius: 6px;
+  border-radius: 0.75rem;
   padding: 0.75rem;
   font-family: monospace;
   font-size: 0.8rem;
@@ -1262,7 +1282,7 @@ dialog label select:focus {
 
 .running-history h2 {
   font-size: 1rem;
-  font-weight: 600;
+  font-weight: 500;
   color: var(--text-muted);
   text-transform: uppercase;
   letter-spacing: 0.05em;
@@ -1291,10 +1311,6 @@ dialog label select:focus {
 
 /* ── Task delete button ──────────────────────────────────────────────────── */
 
-.task-card {
-  position: relative;
-}
-
 .btn-delete-task {
   position: absolute;
   top: 6px;
@@ -1345,9 +1361,9 @@ dialog label select:focus {
   display: block;
   width: 100%;
   margin-top: 4px;
-  background: rgba(8, 15, 26, 0.70);
-  border: 1px solid var(--border);
-  border-radius: 0.375rem;
+  background: var(--bg);
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  border-radius: 0.5rem;
   color: var(--text);
   padding: 0.4em 0.6em;
   font-size: 0.9rem;
@@ -1371,16 +1387,16 @@ dialog label select:focus {
 .inline-edit-actions button[type="button"]:not(.btn-primary) {
   font-size: 0.85rem;
   padding: 0.4em 1em;
-  border-radius: 0.375rem;
-  border: 1px solid var(--border);
-  background: transparent;
-  color: var(--text-muted);
+  border-radius: 0.5rem;
+  border: none;
+  background: rgba(255, 255, 255, 0.1);
+  color: var(--text);
   cursor: pointer;
+  transition: background 0.15s;
 }
 
 .inline-edit-actions button[type="button"]:not(.btn-primary):hover {
-  background: var(--border);
-  color: var(--text);
+  background: rgba(255, 255, 255, 0.2);
 }
 
 .inline-edit-error {
@@ -1395,7 +1411,7 @@ dialog label select:focus {
   backdrop-filter: blur(var(--glass-blur));
   -webkit-backdrop-filter: blur(var(--glass-blur));
   border: 1px solid var(--glass-border);
-  border-radius: 6px;
+  border-radius: 0.75rem;
   line-height: 1.5;
   white-space: pre-wrap;
 }
@@ -1404,7 +1420,7 @@ dialog label select:focus {
   flex-direction: column;
   gap: 0.75rem;
 }
-.qa-label { font-weight: 600; font-size: 0.85em; display: block; margin-bottom: 0.25rem; }
+.qa-label { font-weight: 500; font-size: 0.85em; display: block; margin-bottom: 0.25rem; }
 .qa-content { white-space: pre-wrap; }
 .qa-timestamp { font-size: 0.75em; color: var(--text-muted); margin-top: 0.25rem; display: block; }
 
@@ -1466,7 +1482,7 @@ dialog label select:focus {
 
 .stats-section h2 {
   font-size: 1rem;
-  font-weight: 600;
+  font-weight: 500;
   color: var(--text-muted);
   text-transform: uppercase;
   letter-spacing: 0.05em;
@@ -1485,7 +1501,7 @@ dialog label select:focus {
   flex-direction: column;
   align-items: center;
   padding: 0.75rem 1.25rem;
-  border-radius: 8px;
+  border-radius: 0.75rem;
   background: var(--glass-bg);
   backdrop-filter: blur(var(--glass-blur));
   -webkit-backdrop-filter: blur(var(--glass-blur));
@@ -1507,7 +1523,7 @@ dialog label select:focus {
 
 .stats-count-number {
   font-size: 1.75rem;
-  font-weight: 700;
+  font-weight: 600;
   line-height: 1;
 }
 
@@ -1539,7 +1555,7 @@ dialog label select:focus {
   flex-direction: column;
   align-items: center;
   padding: 1rem;
-  border-radius: 8px;
+  border-radius: 0.75rem;
   background: var(--glass-bg);
   backdrop-filter: blur(var(--glass-blur));
   -webkit-backdrop-filter: blur(var(--glass-blur));
@@ -1550,7 +1566,7 @@ dialog label select:focus {
 
 .stats-kpi-value {
   font-size: 1.5rem;
-  font-weight: 700;
+  font-weight: 600;
   line-height: 1;
 }
 
@@ -1770,7 +1786,7 @@ dialog label select:focus {
   flex-direction: column;
   gap: 0.25rem;
   padding: 0.75rem 1rem;
-  border-radius: 8px;
+  border-radius: 0.75rem;
   background: var(--glass-bg);
   backdrop-filter: blur(var(--glass-blur));
   -webkit-backdrop-filter: blur(var(--glass-blur));
@@ -1873,7 +1889,7 @@ dialog label select:focus {
   backdrop-filter: blur(var(--glass-blur));
   -webkit-backdrop-filter: blur(var(--glass-blur));
   border: 1px solid var(--glass-border);
-  border-radius: 6px;
+  border-radius: 0.75rem;
   padding: 0.875rem 1rem;
   cursor: pointer;
   transition: border-color 0.15s, background 0.15s;
@@ -1882,7 +1898,7 @@ dialog label select:focus {
 
 .story-card:hover {
   border-color: var(--accent);
-  background: var(--surface-hover, var(--surface));
+  background: rgba(56, 189, 248, 0.04);
 }
 
 .story-card-header {
@@ -1893,7 +1909,7 @@ dialog label select:focus {
 }
 
 .story-name {
-  font-weight: 600;
+  font-weight: 500;
   flex: 1;
 }
 
@@ -1918,208 +1934,8 @@ dialog label select:focus {
 
 .story-meta {
   display: flex;
-  gap: 1rem;
-  font-size: 0.8rem;
-  color: var(--text-muted);
-}
-
-.story-branch {
-  font-family: var(--font-mono, monospace);
-}
-
-/* Story modals */
-.story-modal-header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  margin-bottom: 1rem;
-}
-
-.story-modal-header h2 {
-  margin: 0;
-}
-
-.story-modal-body {
-  display: flex;
-  flex-direction: column;
-  gap: 0.875rem;
-}
-
-#story-plan-area {
-  background: var(--code-bg, #1e293b);
-  border: 1px solid var(--border);
-  border-radius: 4px;
-  padding: 0.875rem;
-  font-size: 0.85rem;
-}
-
-.story-plan-name {
-  font-weight: 600;
-  margin: 0 0 0.25rem;
-}
-
-.story-plan-branch {
-  font-family: var(--font-mono, monospace);
-  font-size: 0.8rem;
-  color: var(--text-muted);
-  margin: 0 0 0.75rem;
-}
-
-.story-plan-section {
-  font-weight: 600;
-  margin: 0.75rem 0 0.25rem;
-}
-
-.story-plan-tasks {
-  margin: 0;
-  padding-left: 1.25rem;
-}
-
-.story-plan-tasks li {
-  margin-bottom: 0.25rem;
-}
-
-.story-plan-tasks ul {
-  font-size: 0.8rem;
-  color: var(--text-muted);
-  margin: 0.2rem 0 0;
-  padding-left: 1rem;
-}
-
-.story-detail-body {
-  padding: 0.25rem 0;
-}
-
-/* ── Missing tag chip ───────────────────────────────────────────────────── */
-
-.tag-chip {
-  display: inline-block;
-  font-size: 0.72rem;
-  font-weight: 600;
-  padding: 0.15em 0.55em;
-  border-radius: 3px;
-  background: var(--bg-elevated);
-  border: 1px solid var(--border);
-  color: var(--text-muted);
-  letter-spacing: 0.02em;
-}
-
-/* ── Story project badge ────────────────────────────────────────────────── */
-
-.story-project {
-  font-size: 0.72rem;
-  font-weight: 600;
-  color: var(--text-muted);
-  background: var(--bg-elevated);
-  border: 1px solid var(--border);
-  border-radius: 3px;
-  padding: 0 0.35rem;
-  letter-spacing: 0.02em;
-}
-
-/* ── Elaborate section & banner ─────────────────────────────────────────── */
-
-.elaborate-section {
-  display: flex;
-  flex-direction: column;
-  gap: 0.5rem;
-  margin-bottom: 0.25rem;
-}
-
-.elaborate-hint {
+  gap: 0.75rem;
   font-size: 0.78rem;
   color: var(--text-muted);
-  font-style: italic;
-}
-
-.elaborate-banner {
-  font-size: 0.82rem;
-  color: var(--state-completed);
-  padding: 0.35em 0.625em;
-  border-radius: 0.375rem;
-  background: color-mix(in srgb, var(--state-completed) 12%, transparent);
-  border: 1px solid color-mix(in srgb, var(--state-completed) 30%, transparent);
-}
-
-/* ── Form divider ───────────────────────────────────────────────────────── */
-
-hr.form-divider {
-  border: none;
-  border-top: 1px solid var(--border);
-  margin: 0.75rem 0;
-}
-
-/* ── Validate header / icon / lists ─────────────────────────────────────── */
-
-.validate-header {
-  display: flex;
-  align-items: center;
-  gap: 0.4rem;
-  font-size: 0.85rem;
-  font-weight: 600;
-  margin-bottom: 0.375rem;
-}
-
-.validate-icon {
-  font-size: 1rem;
-  line-height: 1;
-  flex-shrink: 0;
-}
-
-.validate-questions,
-.validate-suggestions {
-  margin: 0.25rem 0 0;
-  padding-left: 1.25rem;
-  font-size: 0.82rem;
-  display: flex;
-  flex-direction: column;
-  gap: 0.2rem;
-}
-
-/* ── Action button hover states ─────────────────────────────────────────── */
-
-.btn-run:hover:not(:disabled),
-.btn-accept:hover:not(:disabled) {
-  filter: brightness(1.1);
-}
-
-.btn-cancel:hover:not(:disabled) {
-  filter: brightness(1.15);
-}
-
-.btn-restart:hover:not(:disabled),
-.btn-resume:hover:not(:disabled),
-.btn-reject:hover:not(:disabled) {
-  filter: brightness(1.12);
-}
-
-.btn-answer:hover:not(:disabled) {
-  filter: brightness(1.1);
-}
-
-.btn-danger:hover:not(:disabled) {
-  filter: brightness(1.1);
-}
-
-/* ── Dialog overflow on small screens ───────────────────────────────────── */
-
-dialog {
-  max-height: 90dvh;
-  overflow-y: auto;
-}
-
-/* ── Panel backdrop glass blur ──────────────────────────────────────────── */
-
-.panel-backdrop {
-  backdrop-filter: blur(4px);
-  -webkit-backdrop-filter: blur(4px);
-}
-
-/* ── Stats bar chart container ──────────────────────────────────────────── */
-
-.stats-bar-chart {
-  margin-bottom: 1.25rem;
+  flex-wrap: wrap;
 }
-
-/* Fix: READY state box should use --state-ready, not --state-running */
-.stats-count-box[data-state="READY"] { border-color: var(--state-ready); }