duaer-spec 0.27.2 → 0.27.3

package/web/live-dev/styles.css

@@ -1,17 +1,63 @@
-:root {
-  --steel: #121c26;
-  --plate: #1a2836;
-  --plate-2: #223445;
-  --ink: #f2ebe0;
-  --mute: #8aa0b4;
-  --line: #3f566c;
-  --register: #e05a2b;
-  --lock: #2f9e8f;
-  --glow: rgba(224, 90, 43, 0.18);
-  --shadow: 0 20px 48px rgba(0, 0, 0, 0.4);
+:root,
+[data-theme="dark"] {
+  color-scheme: dark;
+  --steel: #1a1e24;
+  --plate: #232830;
+  --plate-2: #2c333c;
+  --ink: #e4e8ee;
+  --mute: #8a93a0;
+  --line: #3c4450;
+  --register: #6b9fd4;
+  --lock: #5aaa8f;
+  --on-accent: #ffffff;
+  --input-bg: #1c232c;
+  --composer-bg: #1c232c;
+  --well: #151a20;
+  --glow: transparent;
+  --shadow: 0 6px 20px rgba(0, 0, 0, 0.32);
+  --overlay: rgba(8, 10, 14, 0.52);
+  --bg-soft: rgba(255, 255, 255, 0.035);
+  --code-bg: rgba(255, 255, 255, 0.06);
+  --inset: color-mix(in srgb, var(--ink) 6%, transparent);
+  --inset-soft: color-mix(in srgb, var(--ink) 3.5%, transparent);
+  --inset-strong: color-mix(in srgb, var(--ink) 9%, transparent);
+  --panel-shine: none;
   --font-display: "Outfit", "Avenir Next", sans-serif;
   --font-mono: "Chivo Mono", ui-monospace, monospace;
-  --radius-panel: 2px;
+  --radius-panel: 3px;
+  --space-shell: 0.08rem 0.16rem 0.12rem;
+  --space-layout-gap: 0.16rem;
+  --brand-size: clamp(0.92rem, 1.4vw, 1.1rem);
+  --top-btn-h: 1.22rem;
+  --card-pad: 0.4rem 0.45rem 0.45rem;
+  --field-gap: 0.1rem;
+  --field-mb: 0.22rem;
+  --body-size: 0.76rem;
+}
+
+[data-theme="light"] {
+  color-scheme: light;
+  --steel: #e8ebf0;
+  --plate: #ffffff;
+  --plate-2: #f3f5f8;
+  --ink: #141a22;
+  --mute: #4a5563;
+  --line: #c5ccd6;
+  --register: #2f5f96;
+  --lock: #217a5c;
+  --on-accent: #ffffff;
+  --input-bg: #ffffff;
+  --composer-bg: #f3f5f8;
+  --well: #eef1f5;
+  --glow: transparent;
+  --shadow: 0 2px 10px rgba(20, 26, 34, 0.08);
+  --overlay: rgba(20, 26, 34, 0.28);
+  --bg-soft: rgba(20, 26, 34, 0.04);
+  --code-bg: rgba(20, 26, 34, 0.06);
+  --inset: color-mix(in srgb, var(--ink) 4.5%, transparent);
+  --inset-soft: color-mix(in srgb, var(--ink) 2.5%, transparent);
+  --inset-strong: color-mix(in srgb, var(--ink) 7%, transparent);
+  --panel-shine: none;
 }
 
 * {
@@ -26,25 +72,16 @@ body {
 }
 
 ::selection {
-  background: rgba(224, 90, 43, 0.35);
+  background: color-mix(in srgb, var(--register) 32%, transparent);
   color: var(--ink);
 }
 
 body {
   font-family: var(--font-display);
   color: var(--ink);
-  background:
-    radial-gradient(ellipse 80% 50% at 12% -10%, var(--glow), transparent 55%),
-    radial-gradient(circle at 88% 0%, rgba(47, 158, 143, 0.12), transparent 40%),
-    repeating-linear-gradient(
-      0deg,
-      transparent,
-      transparent 23px,
-      rgba(127, 149, 168, 0.05) 23px,
-      rgba(127, 149, 168, 0.05) 24px
-    ),
-    var(--steel);
-  line-height: 1.5;
+  background: var(--steel);
+  line-height: 1.35;
+  font-size: var(--body-size);
 }
 
 /* Thin scrollbars for desk columns */
@@ -62,7 +99,7 @@ body {
 .progress-col::-webkit-scrollbar,
 .history-list::-webkit-scrollbar,
 .repo-list::-webkit-scrollbar {
-  width: 8px;
+  width: 6px;
 }
 
 .log::-webkit-scrollbar-thumb,
@@ -82,13 +119,13 @@ body {
   z-index: 1;
   flex-shrink: 0;
   max-width: none;
-  margin: 0 0 0.85rem;
-  padding: 0.55rem 0.85rem;
+  margin: 0 0 0.45rem;
+  padding: 0.4rem 0.65rem;
   border: 1px solid var(--line);
-  background: rgba(222, 90, 44, 0.12);
+  background: color-mix(in srgb, var(--register) 12%, var(--plate));
   color: var(--ink);
   font-family: var(--font-mono);
-  font-size: 0.82rem;
+  font-size: 0.78rem;
 }
 
 .update-notice code {
@@ -103,7 +140,7 @@ body {
   width: 100%;
   max-width: none;
   margin: 0;
-  padding: 0.65rem 0.75rem 0.75rem;
+  padding: var(--space-shell);
   height: 100dvh;
   max-height: 100dvh;
   min-height: 0;
@@ -116,13 +153,13 @@ body {
   top: 0;
   z-index: 30;
   flex-shrink: 0;
-  margin: 0 0 0.65rem;
-  padding: 0.15rem 0 0.35rem;
+  margin: 0 0 0.4rem;
+  padding: 0.05rem 0 0.2rem;
   background: linear-gradient(
     180deg,
     var(--steel) 0%,
-    var(--steel) 70%,
-    rgba(18, 28, 38, 0) 100%
+    var(--steel) 72%,
+    color-mix(in srgb, var(--steel) 0%, transparent) 100%
   );
 }
 
@@ -130,27 +167,27 @@ body {
   display: grid;
   grid-template-columns: minmax(0, 1fr) auto;
   align-items: center;
-  gap: 0.75rem 1.25rem;
+  gap: 0.45rem 0.75rem;
 }
 
 .top-lead {
   display: flex;
   flex-direction: column;
-  gap: 0.35rem;
+  gap: 0.15rem;
   min-width: 0;
   justify-self: start;
 }
 
 .top-lead .brand {
   margin: 0;
-  font-size: clamp(1.75rem, 3.5vw, 2.4rem);
+  font-size: var(--brand-size);
   font-weight: 700;
   letter-spacing: 0.01em;
   line-height: 1.05;
   display: flex;
   flex-wrap: wrap;
   align-items: baseline;
-  gap: 0.35rem 0.55rem;
+  gap: 0.2rem 0.4rem;
 }
 
 .brand-fde {
@@ -193,9 +230,9 @@ body {
 .top-actions {
   display: flex;
   align-items: center;
-  gap: 0.5rem;
+  gap: 0.35rem;
   flex-shrink: 0;
-  padding-bottom: 0.15rem;
+  padding-bottom: 0.05rem;
   justify-self: end;
 }
 
@@ -204,10 +241,10 @@ body {
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  gap: 0.3rem;
-  height: 2rem;
+  gap: 0.25rem;
+  height: var(--top-btn-h);
   margin: 0;
-  padding: 0 0.7rem;
+  padding: 0 0.55rem;
   font-family: var(--font-mono);
   font-size: 0.75rem;
   font-weight: 500;
@@ -288,6 +325,20 @@ button.top-btn.project-badge {
   background-repeat: no-repeat;
 }
 
+#themeToggle .theme-icon {
+  font-size: 0.95em;
+  line-height: 1;
+  opacity: 0.9;
+}
+
+#themeToggle[data-theme="dark"] .theme-icon-sun {
+  display: none;
+}
+
+#themeToggle[data-theme="light"] .theme-icon-moon {
+  display: none;
+}
+
 .github-btn .github-star {
   color: var(--lock);
   font-size: 0.85em;
@@ -380,7 +431,7 @@ body.dispatch-center-page #dispatchCenterToggle[aria-current="page"] {
   padding: 0;
   display: flex;
   flex-direction: column;
-  background: #0b1118;
+  background: var(--well);
 }
 
 .dispatch-center-views {
@@ -430,7 +481,7 @@ body.dispatch-center-page #dispatchCenterToggle[aria-current="page"] {
   position: fixed;
   inset: 0;
   z-index: 40;
-  background: rgba(8, 14, 20, 0.55);
+  background: var(--overlay);
 }
 
 .history-drawer {
@@ -438,10 +489,10 @@ body.dispatch-center-page #dispatchCenterToggle[aria-current="page"] {
   top: 0;
   right: 0;
   z-index: 50;
-  width: min(26rem, 100vw);
+  width: min(24rem, 100vw);
   height: 100dvh;
   margin: 0;
-  padding: 1.15rem 1.1rem 1.35rem;
+  padding: 0.7rem 0.7rem 0.85rem;
   border-left: 1px solid var(--line);
   border-radius: 0;
   background: var(--plate);
@@ -453,40 +504,40 @@ body.dispatch-center-page #dispatchCenterToggle[aria-current="page"] {
 }
 
 .settings-drawer.history-drawer {
-  width: min(28rem, 100vw);
+  width: min(25rem, 100vw);
 }
 
 .employee-drawer .employee-list {
   display: flex;
   flex-direction: column;
-  gap: 0.85rem;
+  gap: 0.45rem;
   overflow: auto;
   flex: 1;
   min-height: 0;
-  padding-bottom: 0.5rem;
+  padding-bottom: 0.35rem;
 }
 
 .employee-card {
   margin: 0;
-  padding: 0.85rem 0.9rem;
+  padding: 0.5rem 0.55rem;
   border: 1px solid var(--line);
   background: var(--bg-soft, rgba(255, 255, 255, 0.03));
 }
 
 .employee-name {
-  margin: 0 0 0.2rem;
-  font-size: 1.05rem;
+  margin: 0 0 0.12rem;
+  font-size: 0.92rem;
   font-weight: 700;
 }
 
 .employee-role {
-  margin: 0 0 0.45rem;
+  margin: 0 0 0.28rem;
 }
 
 .employee-cap {
-  margin: 0 0 0.35rem;
-  font-size: 0.92rem;
-  line-height: 1.45;
+  margin: 0 0 0.22rem;
+  font-size: 0.8rem;
+  line-height: 1.35;
 }
 
 .history-drawer[hidden],
@@ -498,31 +549,36 @@ body.dispatch-center-page #dispatchCenterToggle[aria-current="page"] {
   display: flex;
   align-items: flex-start;
   justify-content: space-between;
-  gap: 0.75rem;
-  margin-bottom: 0.85rem;
+  gap: 0.5rem;
+  margin-bottom: 0.5rem;
   flex-shrink: 0;
-  position: sticky;
-  top: -1.15rem;
-  z-index: 1;
+  position: relative;
+  z-index: 2;
   background: var(--plate);
-  padding-top: 0.15rem;
+  padding-top: 0.1rem;
 }
 
 .history-head .mark {
-  margin: 0 0 0.25rem;
+  margin: 0 0 0.15rem;
 }
 
 .history-title {
   margin: 0;
-  font-size: 1.25rem;
+  font-size: 1.05rem;
   font-weight: 700;
   letter-spacing: 0.02em;
 }
 
 .history-close {
-  min-width: auto;
-  padding: 0.35rem 0.65rem;
-  font-size: 0.8rem;
+  position: relative;
+  z-index: 3;
+  flex-shrink: 0;
+  min-width: 3.2rem;
+  min-height: 1.7rem;
+  padding: 0.28rem 0.65rem;
+  font-size: 0.78rem;
+  pointer-events: auto;
+  cursor: pointer;
 }
 
 .settings-drawer {
@@ -532,11 +588,11 @@ body.dispatch-center-page #dispatchCenterToggle[aria-current="page"] {
 .settings-body {
   display: flex;
   flex-direction: column;
-  gap: 0.4rem;
+  gap: 0.28rem;
   flex: 1 1 auto;
   min-height: 0;
   overflow: auto;
-  padding-right: 0.15rem;
+  padding-right: 0.1rem;
 }
 
 .settings-body .hint {
@@ -551,19 +607,19 @@ body.dispatch-center-page #dispatchCenterToggle[aria-current="page"] {
 }
 
 .settings-body .field {
-  gap: 0.2rem;
-  margin-bottom: 0.4rem;
+  gap: 0.12rem;
+  margin-bottom: 0.28rem;
 }
 
 .settings-body .field > span {
-  letter-spacing: 0.08em;
-  font-size: 0.64rem;
+  letter-spacing: 0.06em;
+  font-size: 0.6rem;
 }
 
 .settings-body .btn {
-  min-height: 2.1rem;
-  padding: 0 0.75rem;
-  font-size: 0.85rem;
+  min-height: 1.7rem;
+  padding: 0 0.55rem;
+  font-size: 0.78rem;
 }
 
 .setup-block {
@@ -575,8 +631,8 @@ body.dispatch-center-page #dispatchCenterToggle[aria-current="page"] {
 .setup-block-sum {
   cursor: pointer;
   list-style: none;
-  padding: 0.45rem 0.6rem;
-  font-size: 0.88rem;
+  padding: 0.32rem 0.45rem;
+  font-size: 0.8rem;
   font-weight: 600;
   letter-spacing: -0.01em;
   color: var(--ink);
@@ -603,8 +659,8 @@ body.dispatch-center-page #dispatchCenterToggle[aria-current="page"] {
 .setup-block-body {
   display: flex;
   flex-direction: column;
-  gap: 0.35rem;
-  padding: 0 0.6rem 0.55rem;
+  gap: 0.22rem;
+  padding: 0 0.45rem 0.4rem;
 }
 
 .setup-host-actions {
@@ -625,7 +681,7 @@ body.dispatch-center-page #dispatchCenterToggle[aria-current="page"] {
   list-style: none;
   font-size: 0.75rem;
   font-weight: 600;
-  color: var(--teal, #2f9e8f);
+  color: var(--lock);
   padding: 0.15rem 0;
 }
 
@@ -748,44 +804,44 @@ body.dispatch-center-page #dispatchCenterToggle[aria-current="page"] {
   display: inline-block;
   margin-top: 0.15rem;
   padding: 0.1rem 0.4rem;
-  border: 1px solid rgba(63, 86, 108, 0.65);
+  border: 1px solid var(--line);
   font-size: 0.68rem;
   letter-spacing: 0.03em;
   color: var(--mute);
 }
 
 .project-status.is-drafting {
-  color: #9fb0c0;
+  color: var(--mute);
 }
 
 .project-status.is-confirming {
-  border-color: rgba(47, 158, 143, 0.55);
-  color: #9fe8dc;
+  border-color: color-mix(in srgb, var(--lock) 55%, transparent);
+  color: var(--lock);
 }
 
 .project-status.is-building {
   border-color: rgba(212, 168, 75, 0.65);
-  color: #e8c87a;
+  color: var(--register);
 }
 
 .project-status.is-delivered {
-  border-color: rgba(47, 158, 143, 0.8);
-  background: rgba(47, 158, 143, 0.12);
-  color: #9fe8dc;
+  border-color: color-mix(in srgb, var(--lock) 80%, transparent);
+  background: color-mix(in srgb, var(--lock) 12%, transparent);
+  color: var(--lock);
 }
 
 .project-status.is-revising {
   border-color: rgba(127, 149, 168, 0.8);
-  color: #c5d4e0;
+  color: var(--mute);
 }
 
 .project-deliverables {
   align-self: flex-start;
   font-size: 0.75rem;
   padding: 0.25rem 0.55rem;
-  background: rgba(47, 158, 143, 0.1);
+  background: color-mix(in srgb, var(--lock) 10%, transparent);
   border-color: var(--lock);
-  color: #9fe8dc;
+  color: var(--lock);
 }
 
 .dispatch-project-summary {
@@ -909,7 +965,7 @@ body.history-open {
 
 .brand {
   margin: 0;
-  font-size: clamp(1.75rem, 3.5vw, 2.35rem);
+  font-size: var(--brand-size);
   font-weight: 700;
   letter-spacing: 0.02em;
   line-height: 1.05;
@@ -934,7 +990,7 @@ body.history-open {
     minmax(calc(12rem + 50px), 1fr)
     minmax(22rem, 2.2fr)
     minmax(12rem, 0.75fr);
-  gap: 0.75rem;
+  gap: var(--space-layout-gap);
   width: 100%;
   max-width: none;
   margin: 0;
@@ -954,11 +1010,7 @@ body.history-open {
   border-radius: var(--radius-panel);
   min-width: 0;
   max-width: 100%;
-  background-image: linear-gradient(
-    180deg,
-    rgba(255, 255, 255, 0.03) 0%,
-    transparent 12px
-  );
+  background-image: var(--panel-shine);
 }
 
 .chat-panel,
@@ -978,90 +1030,6 @@ body.history-open {
   overflow: hidden;
 }
 
-.chat-quicknav {
-  position: absolute;
-  top: 50%;
-  right: 0.4rem;
-  z-index: 24;
-  transform: translateY(-50%);
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  pointer-events: none;
-}
-
-.chat-quicknav-btn,
-.chat-quicknav-menu {
-  pointer-events: auto;
-}
-
-.chat-quicknav-btn {
-  margin: 0;
-  padding: 0.5rem 0.4rem;
-  writing-mode: vertical-rl;
-  text-orientation: mixed;
-  letter-spacing: 0.12em;
-  font-family: var(--font-ui);
-  font-size: 0.72rem;
-  font-weight: 600;
-  line-height: 1;
-  color: var(--ink);
-  background: var(--plate);
-  border: 1px solid var(--line);
-  border-radius: 999px;
-  box-shadow: var(--shadow);
-  cursor: pointer;
-}
-
-.chat-quicknav-btn:hover,
-.chat-quicknav-btn:focus-visible,
-.chat-quicknav-btn[aria-expanded="true"] {
-  border-color: var(--register);
-  color: var(--register);
-  outline: none;
-}
-
-.chat-quicknav-menu {
-  position: absolute;
-  right: calc(100% + 0.4rem);
-  left: auto;
-  top: 50%;
-  transform: translateY(-50%);
-  min-width: 7.5rem;
-  padding: 0.35rem;
-  display: flex;
-  flex-direction: column;
-  gap: 0.2rem;
-  background: var(--plate);
-  border: 1px solid var(--line);
-  border-radius: var(--radius-panel);
-  box-shadow: var(--shadow);
-  z-index: 25;
-}
-
-.chat-quicknav-menu[hidden] {
-  display: none !important;
-}
-
-.chat-quicknav-menu button {
-  margin: 0;
-  padding: 0.4rem 0.55rem;
-  text-align: left;
-  font: inherit;
-  font-size: 0.8rem;
-  color: var(--ink);
-  background: transparent;
-  border: 0;
-  border-radius: 0.35rem;
-  cursor: pointer;
-}
-
-.chat-quicknav-menu button:hover,
-.chat-quicknav-menu button:focus-visible {
-  background: rgba(47, 158, 143, 0.12);
-  color: var(--register);
-  outline: none;
-}
 
 .log {
   flex: 1;
@@ -1100,7 +1068,7 @@ body.history-open {
   margin: 0;
   padding: 0.55rem 0.7rem 0.55rem 2.15rem;
   border-left: 2px solid var(--register);
-  background: rgba(47, 158, 143, 0.08);
+  background: color-mix(in srgb, var(--lock) 8%, transparent);
   font-size: 0.88rem;
   line-height: 1.4;
   color: var(--mute);
@@ -1132,10 +1100,10 @@ body.history-open {
 
 .bubble {
   max-width: 92%;
-  padding: 0.7rem 0.9rem;
+  padding: 0.35rem 0.55rem;
   white-space: normal;
   word-break: break-word;
-  animation: rise 0.32s cubic-bezier(0.2, 0.8, 0.2, 1) both;
+  animation: rise 0.28s cubic-bezier(0.2, 0.8, 0.2, 1) both;
 }
 
 @keyframes rise {
@@ -1157,7 +1125,7 @@ body.history-open {
 
 .bubble.user {
   align-self: flex-end;
-  background: #13202b;
+  background: var(--input-bg);
   border: 1px solid var(--register);
   color: var(--ink);
 }
@@ -1186,7 +1154,7 @@ body.history-open {
   font-size: 0.9em;
   padding: 0.05em 0.3em;
   border-radius: 3px;
-  background: rgba(0, 0, 0, 0.06);
+  background: var(--code-bg);
 }
 
 .bubble-body pre.chat-code {
@@ -1194,13 +1162,13 @@ body.history-open {
   padding: 0.5em 0.65em;
   overflow-x: auto;
   border-radius: 4px;
-  background: rgba(0, 0, 0, 0.06);
+  background: var(--code-bg);
   white-space: pre-wrap;
   font-size: 0.85em;
 }
 
 .bubble-body a {
-  color: var(--register, #0d6e6e);
+  color: var(--register);
   text-decoration: underline;
   text-underline-offset: 2px;
   cursor: pointer;
@@ -1276,7 +1244,7 @@ body.history-open {
 }
 
 .bug-hotfix-row input {
-  accent-color: var(--accent, #7f95a8);
+  accent-color: var(--register);
 }
 
 .desk-bottom-actions {
@@ -1302,7 +1270,7 @@ body.history-open {
 .action-chip:focus-visible {
   border-color: var(--lock);
   color: var(--ink);
-  background: rgba(47, 158, 143, 0.15);
+  background: color-mix(in srgb, var(--lock) 15%, transparent);
 }
 
 .chip:focus-visible {
@@ -1312,10 +1280,10 @@ body.history-open {
 .composer {
   display: grid;
   grid-template-columns: minmax(0, 1fr) auto;
-  gap: 0.4rem;
-  padding: 0.55rem 0.65rem;
+  gap: 0.3rem;
+  padding: 0.4rem 0.5rem;
   border-top: 1px solid var(--line);
-  background: linear-gradient(180deg, #162331 0%, #13202b 100%);
+  background: var(--composer-bg);
   align-items: end;
 }
 
@@ -1353,15 +1321,15 @@ input[type="text"] {
   resize: vertical;
   border: 1px solid var(--line);
   border-radius: 0;
-  padding: 0.65rem 0.75rem;
+  padding: 0.45rem 0.55rem;
   font: inherit;
-  background: #13202b;
+  background: var(--input-bg);
   color: var(--ink);
 }
 
 textarea::placeholder,
 input::placeholder {
-  color: #5f7386;
+  color: var(--mute);
 }
 
 textarea:focus,
@@ -1376,27 +1344,27 @@ input:focus {
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  gap: 0.35rem;
+  gap: 0.28rem;
   appearance: none;
   -webkit-appearance: none;
   border: 1px solid var(--line);
   border-radius: 0;
-  padding: 0.65rem 1.1rem;
+  padding: 0.42rem 0.75rem;
   font: inherit;
-  font-size: 0.88rem;
+  font-size: 0.78rem;
   font-weight: 700;
-  letter-spacing: 0.08em;
+  letter-spacing: 0.06em;
   text-transform: uppercase;
-  line-height: 1.2;
+  line-height: 1.15;
   cursor: pointer;
   background: var(--plate);
   color: var(--ink);
   text-decoration: none;
   white-space: nowrap;
   transition:
-    border-color 180ms ease,
-    background-color 180ms ease,
-    color 180ms ease;
+    border-color 140ms ease,
+    background-color 140ms ease,
+    color 140ms ease;
 }
 
 .btn[hidden],
@@ -1419,27 +1387,27 @@ a.btn[hidden] {
   align-self: end;
   background: var(--register);
   border-color: var(--register);
-  color: #1a100c;
+  color: var(--on-accent);
 }
 
 .btn.primary:hover,
 .btn.primary:focus-visible {
-  background: #f06a3a;
-  border-color: #f06a3a;
-  color: #1a100c;
+  background: color-mix(in srgb, var(--register) 88%, #000);
+  border-color: color-mix(in srgb, var(--register) 88%, #000);
+  color: var(--on-accent);
 }
 
 .btn.confirm {
   width: 100%;
   margin-top: 0.55rem;
-  background: rgba(47, 158, 143, 0.14);
+  background: color-mix(in srgb, var(--lock) 14%, transparent);
   border-color: var(--lock);
-  color: #9fe8dc;
+  color: var(--lock);
 }
 
 .btn.confirm:not(:disabled):hover,
 .btn.confirm:not(:disabled):focus-visible {
-  background: rgba(47, 158, 143, 0.28);
+  background: color-mix(in srgb, var(--lock) 28%, transparent);
   border-color: var(--lock);
   color: var(--ink);
 }
@@ -1447,14 +1415,14 @@ a.btn[hidden] {
 .auto-handle-btn {
   width: 100%;
   margin: 0.45rem 0 0.15rem;
-  background: rgba(224, 90, 43, 0.12);
+  background: color-mix(in srgb, var(--register) 14%, transparent);
   border-color: var(--register);
-  color: #f0b39a;
+  color: var(--register);
 }
 
 .auto-handle-btn:hover,
 .auto-handle-btn:focus-visible {
-  background: rgba(224, 90, 43, 0.22);
+  background: color-mix(in srgb, var(--register) 24%, transparent);
   border-color: var(--register);
   color: var(--ink);
 }
@@ -1469,7 +1437,7 @@ a.btn[hidden] {
 }
 
 .card-panel {
-  padding: 1.15rem 1.2rem 1.25rem;
+  padding: var(--card-pad);
   align-self: stretch;
   overflow-x: hidden;
   overflow-y: auto;
@@ -1493,11 +1461,13 @@ a.btn[hidden] {
   background: transparent;
   color: var(--mute);
   font: inherit;
-  font-size: 0.8rem;
-  padding: 0.25rem 0.55rem;
-  border-radius: 4px;
+  font-size: 0.74rem;
+  padding: 0.18rem 0.42rem;
+  border-radius: 3px;
   cursor: pointer;
   opacity: 0.72;
+  transition: color 0.12s ease, opacity 0.12s ease, border-color 0.12s ease,
+    background 0.12s ease;
 }
 
 .module-tab:hover,
@@ -1521,6 +1491,10 @@ a.btn[hidden] {
   opacity: 0.78;
 }
 
+.module-tab.is-bug {
+  border-color: color-mix(in srgb, var(--register) 45%, var(--line));
+}
+
 .module-meta {
   margin: 0 0 0.5rem;
   font-size: 0.8rem;
@@ -1550,7 +1524,7 @@ a.btn[hidden] {
   line-height: 1.4;
   max-height: 14rem;
   overflow: auto;
-  border: 1px solid var(--border, #c9c4b8);
+  border: 1px solid var(--line);
   border-radius: 4px;
   background: transparent;
 }
@@ -1561,7 +1535,7 @@ a.btn[hidden] {
   align-items: baseline;
   gap: 0.35rem 0.5rem;
   padding: 0.35rem 0;
-  border-bottom: 1px solid color-mix(in srgb, var(--border, #c9c4b8) 70%, transparent);
+  border-bottom: 1px solid color-mix(in srgb, var(--line) 70%, transparent);
 }
 
 .task-pool-item:last-child {
@@ -1582,14 +1556,14 @@ a.btn[hidden] {
   font-size: 0.68rem;
   font-weight: 650;
   padding: 0.1rem 0.35rem;
-  border: 1px solid var(--register, #2f9e8f);
-  color: var(--register, #2f9e8f);
+  border: 1px solid var(--register);
+  color: var(--register);
   border-radius: 2px;
 }
 
 .worker-recommend {
   margin: 0.25rem 0 0;
-  color: var(--register, #2f9e8f);
+  color: var(--register);
 }
 
 #confirmWorkersGraph {
@@ -1597,6 +1571,10 @@ a.btn[hidden] {
   position: relative;
 }
 
+#confirmWorkersGraph.is-locked {
+  opacity: 0.85;
+}
+
 #confirmWorkersGraph.is-busy::before {
   content: "";
   display: inline-block;
@@ -1652,8 +1630,8 @@ a.btn[hidden] {
 .worker-count-chip[aria-pressed="true"] {
   border-color: var(--register);
   color: var(--register);
-  background: rgba(47, 158, 143, 0.14);
-  box-shadow: inset 0 0 0 1px rgba(47, 158, 143, 0.35);
+  background: color-mix(in srgb, var(--lock) 14%, transparent);
+  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--lock) 35%, transparent);
 }
 
 .worker-count-chip .w-label {
@@ -1677,7 +1655,7 @@ a.btn[hidden] {
   height: auto;
   margin: 0.45rem 0 0.65rem;
   border: 1px solid var(--line);
-  background: #0b1118;
+  background: var(--well);
   overflow: visible;
 }
 
@@ -1694,7 +1672,7 @@ a.btn[hidden] {
 }
 
 .progress-col {
-  padding: 1.05rem 0.95rem 1.15rem;
+  padding: 0.55rem 0.55rem 0.7rem;
   align-self: stretch;
   overflow-x: hidden;
   overflow-y: auto;
@@ -1703,18 +1681,20 @@ a.btn[hidden] {
   scroll-behavior: smooth;
   display: flex;
   flex-direction: column;
-  gap: 0.65rem;
-  background-image:
-    linear-gradient(180deg, rgba(255, 255, 255, 0.03) 0%, transparent 14px),
-    linear-gradient(165deg, rgba(47, 158, 143, 0.06), transparent 42%);
+  gap: 0.4rem;
+  background-image: linear-gradient(
+    165deg,
+    color-mix(in srgb, var(--lock) 5%, transparent),
+    transparent 42%
+  );
 }
 
 .progress-head {
   flex-shrink: 0;
   min-width: 0;
   max-width: 100%;
-  padding: 0 0.15rem 0.55rem;
-  border-bottom: 1px solid rgba(63, 86, 108, 0.55);
+  padding: 0 0.1rem 0.35rem;
+  border-bottom: 1px solid var(--line);
 }
 
 .deliverables-open {
@@ -1722,14 +1702,14 @@ a.btn[hidden] {
   width: 100%;
   margin: 0.45rem 0 0.15rem;
   font-size: 0.82rem;
-  background: rgba(47, 158, 143, 0.12);
+  background: color-mix(in srgb, var(--lock) 12%, transparent);
   border-color: var(--lock);
-  color: #9fe8dc;
+  color: var(--lock);
 }
 
 .deliverables-open:not(:disabled):hover,
 .deliverables-open:not(:disabled):focus-visible {
-  background: rgba(47, 158, 143, 0.24);
+  background: color-mix(in srgb, var(--lock) 24%, transparent);
   color: var(--ink);
 }
 
@@ -1743,10 +1723,10 @@ a.btn[hidden] {
 
 .delivery-cockpit {
   flex-shrink: 0;
-  margin: 0.55rem 0 0.35rem;
-  padding: 0.5rem 0.55rem;
-  border: 1px solid rgba(63, 86, 108, 0.55);
-  background: rgba(8, 14, 20, 0.35);
+  margin: 0.35rem 0 0.2rem;
+  padding: 0.35rem 0.4rem;
+  border: 1px solid var(--line);
+  background: var(--inset);
 }
 
 .delivery-cockpit[hidden] {
@@ -1765,7 +1745,7 @@ a.btn[hidden] {
 .delivery-stage {
   margin: 0;
   padding: 0.15rem 0.4rem;
-  border: 1px solid rgba(63, 86, 108, 0.55);
+  border: 1px solid var(--line);
   font-size: 0.68rem;
   letter-spacing: 0.02em;
   color: var(--mute);
@@ -1773,13 +1753,13 @@ a.btn[hidden] {
 
 .delivery-stage.is-partial {
   border-color: rgba(212, 168, 75, 0.65);
-  color: #e8c87a;
+  color: var(--register);
 }
 
 .delivery-stage.is-done {
-  border-color: rgba(47, 158, 143, 0.75);
-  background: rgba(47, 158, 143, 0.14);
-  color: #9fe8dc;
+  border-color: color-mix(in srgb, var(--lock) 75%, transparent);
+  background: color-mix(in srgb, var(--lock) 14%, transparent);
+  color: var(--lock);
 }
 
 .delivery-next {
@@ -1811,7 +1791,7 @@ a.btn[hidden] {
   margin: 0.35rem 0 0;
   padding: 1.1rem 0.95rem;
   border: 1px solid var(--line);
-  background: rgba(8, 14, 20, 0.35);
+  background: var(--inset);
   color: var(--mute);
 }
 
@@ -1841,16 +1821,16 @@ a.btn[hidden] {
 }
 
 .card-title {
-  margin: 0 0 0.35rem;
-  font-size: 1.55rem;
+  margin: 0 0 0.25rem;
+  font-size: 1.2rem;
   font-weight: 700;
-  letter-spacing: 0.04em;
+  letter-spacing: 0.03em;
 }
 
 .meta {
-  margin: 0 0 1rem;
+  margin: 0 0 0.65rem;
   font-family: var(--font-mono);
-  font-size: 0.68rem;
+  font-size: 0.64rem;
   letter-spacing: 0.12em;
   text-transform: uppercase;
   color: var(--mute);
@@ -1858,9 +1838,9 @@ a.btn[hidden] {
 
 .field {
   display: grid;
-  gap: 0.35rem;
-  margin-bottom: 0.8rem;
-  font-size: 0.92rem;
+  gap: var(--field-gap);
+  margin-bottom: var(--field-mb);
+  font-size: 0.84rem;
   color: var(--ink);
 }
 
@@ -1873,8 +1853,8 @@ a.btn[hidden] {
 }
 
 .req-section {
-  margin-bottom: 1rem;
-  padding: 0.75rem 0.85rem 0.85rem;
+  margin-bottom: 0.65rem;
+  padding: 0.5rem 0.6rem 0.55rem;
   border: 1px solid var(--line);
   background: var(--plate-2);
 }
@@ -1933,7 +1913,7 @@ a.btn[hidden] {
   margin: 0;
   padding: 0.5rem 0.65rem 0.5rem 1.55rem;
   border: 1px solid var(--line);
-  background: rgba(8, 14, 20, 0.4);
+  background: var(--inset);
   color: var(--ink);
   font-size: 0.9rem;
   line-height: 1.45;
@@ -1966,7 +1946,7 @@ a.btn[hidden] {
   width: 1.15rem;
   height: 1.15rem;
   border-radius: 2px;
-  background: rgba(47, 158, 143, 0.2);
+  background: color-mix(in srgb, var(--lock) 20%, transparent);
   border: 1px solid var(--lock);
   color: var(--lock);
   font-family: var(--font-mono);
@@ -1977,14 +1957,14 @@ a.btn[hidden] {
 
 .req-structured .req-empty {
   margin: 0;
-  color: #5f7386;
+  color: var(--mute);
 }
 
 .req-structured .req-mod {
   margin: 0 0 0.65rem;
   padding: 0.45rem 0.55rem 0.5rem;
-  border: 1px solid rgba(63, 86, 108, 0.55);
-  background: rgba(8, 14, 20, 0.35);
+  border: 1px solid var(--line);
+  background: var(--inset);
 }
 
 .req-structured .req-mod:last-child {
@@ -2119,7 +2099,7 @@ a.btn[hidden] {
 .result {
   margin-top: 1rem;
   padding: 0.85rem;
-  background: #0f1822;
+  background: var(--well);
   border: 1px solid var(--line);
   color: var(--ink);
   white-space: pre-wrap;
@@ -2191,7 +2171,7 @@ a.btn[hidden] {
 
 .repo-chip[aria-pressed="true"] {
   border-color: var(--lock);
-  background: rgba(47, 158, 143, 0.1);
+  background: color-mix(in srgb, var(--lock) 10%, transparent);
 }
 
 .repo-chip strong {
@@ -2265,7 +2245,7 @@ a.btn[hidden] {
 .architecture-slot-main {
   margin: 1rem 0 0.35rem;
   padding: 0.85rem 0.15rem 0.35rem;
-  border-top: 1px solid rgba(63, 86, 108, 0.55);
+  border-top: 1px solid var(--line);
 }
 
 .architecture-slot-main .architecture-panel {
@@ -2319,7 +2299,7 @@ a.btn[hidden] {
   height: auto;
   margin: 0.45rem 0 0.65rem;
   border: 1px solid var(--line);
-  background: #0b1118;
+  background: var(--well);
   /* Content-driven height — no iframe, no inner scrollbar. */
   overflow: visible;
 }
@@ -2400,7 +2380,7 @@ a.btn[hidden] {
 .deploy-target-chip[aria-pressed="true"] {
   border-color: var(--register);
   color: var(--register);
-  background: rgba(47, 158, 143, 0.12);
+  background: color-mix(in srgb, var(--lock) 12%, transparent);
 }
 
 .agent-chip {
@@ -2424,7 +2404,7 @@ a.btn[hidden] {
 
 .agent-chip[aria-pressed="true"] {
   border-color: var(--lock);
-  background: rgba(47, 158, 143, 0.12);
+  background: color-mix(in srgb, var(--lock) 12%, transparent);
 }
 
 .agent-chip.is-missing {
@@ -2457,7 +2437,7 @@ a.btn[hidden] {
   font-size: 0.65rem;
   line-height: 1.35;
   color: var(--ink);
-  background: rgba(8, 14, 20, 0.55);
+  background: var(--inset-strong);
   border: 1px solid var(--line);
   word-break: break-all;
   white-space: pre-wrap;
@@ -2484,7 +2464,7 @@ a.btn[hidden] {
   font-size: 0.72rem;
   white-space: pre-wrap;
   word-break: break-all;
-  background: rgba(8, 14, 20, 0.55);
+  background: var(--inset-strong);
   border: 1px solid var(--line);
   color: var(--ink);
 }
@@ -2506,30 +2486,31 @@ a.btn[hidden] {
   margin-top: 0;
   display: flex;
   flex-direction: column;
-  gap: 0.75rem;
+  gap: 0.45rem;
   min-width: 0;
   max-width: 100%;
 }
 
 .run-block {
-  padding: 0.85rem 0.85rem 0.9rem;
+  padding: 0.5rem 0.55rem 0.55rem;
   border: 1px solid var(--line);
   border-left: 2px solid var(--line);
-  background: rgba(26, 40, 54, 0.55);
+  background: var(--inset);
   min-width: 0;
   max-width: 100%;
   overflow: hidden;
   box-sizing: border-box;
+  transition: background 0.15s ease, border-color 0.15s ease, opacity 0.15s ease;
 }
 
 .run-block[data-active="true"] {
   border-left-color: var(--lock);
-  background: rgba(34, 52, 69, 0.72);
-  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
+  background: color-mix(in srgb, var(--lock) 10%, var(--inset));
+  box-shadow: none;
 }
 
 .run-block[data-active="false"] {
-  opacity: 0.78;
+  opacity: 0.88;
 }
 
 .run-block .mark {
@@ -2584,14 +2565,14 @@ a.btn[hidden] {
 .progress-meter {
   height: 3px;
   margin: 0 0 0.65rem;
-  background: rgba(63, 86, 108, 0.55);
+  background: color-mix(in srgb, var(--register) 28%, transparent);
   overflow: hidden;
 }
 
 .progress-meter-fill {
   height: 100%;
   width: 0%;
-  background: linear-gradient(90deg, var(--lock), #4ec4b4);
+  background: linear-gradient(90deg, var(--lock), color-mix(in srgb, var(--lock) 70%, #fff));
   transition: width 280ms ease;
 }
 
@@ -2612,17 +2593,17 @@ a.btn[hidden] {
 }
 
 .progress-activity {
-  margin: 0 0 0.7rem;
-  padding: 0.45rem 0.55rem;
+  margin: 0 0 0.45rem;
+  padding: 0.3rem 0.4rem;
   font-family: var(--font-mono);
-  font-size: 0.7rem;
+  font-size: 0.65rem;
   letter-spacing: 0.02em;
   color: var(--mute);
-  line-height: 1.45;
+  line-height: 1.4;
   overflow-wrap: anywhere;
   word-break: break-word;
-  border: 1px solid rgba(63, 86, 108, 0.65);
-  background: rgba(8, 14, 20, 0.35);
+  border: 1px solid var(--line);
+  background: var(--inset);
   max-width: 100%;
   box-sizing: border-box;
 }
@@ -2633,21 +2614,21 @@ a.btn[hidden] {
   padding: 0;
   display: flex;
   flex-direction: column;
-  gap: 0.35rem;
+  gap: 0.22rem;
   min-width: 0;
   max-width: 100%;
 }
 
 .progress-tasks li {
-  font-size: 0.8rem;
+  font-size: 0.76rem;
   display: flex;
-  gap: 0.55rem;
+  gap: 0.4rem;
   align-items: flex-start;
   color: var(--mute);
-  padding: 0.4rem 0.5rem;
+  padding: 0.28rem 0.4rem;
   border: 1px solid transparent;
-  background: rgba(8, 14, 20, 0.2);
-  line-height: 1.4;
+  background: var(--inset-soft);
+  line-height: 1.35;
   min-width: 0;
   max-width: 100%;
   box-sizing: border-box;
@@ -2657,7 +2638,7 @@ a.btn[hidden] {
 
 .progress-tasks li[data-done="true"] {
   color: var(--ink);
-  background: rgba(47, 158, 143, 0.08);
+  background: color-mix(in srgb, var(--lock) 8%, transparent);
 }
 
 .progress-tasks li .mark {
@@ -2682,8 +2663,8 @@ a.btn[hidden] {
 
 .progress-tasks li[data-current="true"] {
   color: var(--ink);
-  border-color: rgba(224, 90, 43, 0.35);
-  background: rgba(224, 90, 43, 0.08);
+  border-color: color-mix(in srgb, var(--register) 40%, transparent);
+  background: color-mix(in srgb, var(--register) 10%, transparent);
   font-weight: 600;
 }
 
@@ -2692,17 +2673,17 @@ a.btn[hidden] {
 }
 
 .progress-log {
-  margin: 0.7rem 0 0;
-  padding: 0.55rem 0.6rem;
-  max-height: 7.5rem;
+  margin: 0.45rem 0 0;
+  padding: 0.4rem 0.45rem;
+  max-height: 6rem;
   max-width: 100%;
   box-sizing: border-box;
   overflow: auto;
   font-family: var(--font-mono);
-  font-size: 0.65rem;
-  line-height: 1.4;
+  font-size: 0.62rem;
+  line-height: 1.35;
   color: var(--mute);
-  background: rgba(8, 14, 20, 0.55);
+  background: var(--inset-strong);
   border: 1px solid var(--line);
   white-space: pre-wrap;
   overflow-wrap: anywhere;
@@ -2711,14 +2692,14 @@ a.btn[hidden] {
 
 .worker-lanes {
   display: grid;
-  gap: 0.65rem;
-  margin: 0.65rem 0 0;
+  gap: 0.4rem;
+  margin: 0.4rem 0 0;
 }
 
 .worker-lane {
-  padding: 0.55rem 0.6rem 0.65rem;
+  padding: 0.4rem 0.45rem 0.45rem;
   border: 1px solid var(--line);
-  background: rgba(8, 14, 20, 0.35);
+  background: var(--inset);
   min-width: 0;
 }
 
@@ -2778,7 +2759,7 @@ a.btn[hidden] {
 .worker-lane-meter {
   height: 0.28rem;
   margin: 0 0 0.45rem;
-  background: rgba(255, 255, 255, 0.06);
+  background: var(--inset-strong);
   border: 1px solid var(--line);
 }
 
@@ -2862,9 +2843,9 @@ a.btn[hidden] {
 }
 
 .preview-actions .btn.confirm {
-  background: rgba(47, 158, 143, 0.18);
+  background: color-mix(in srgb, var(--lock) 18%, transparent);
   border-color: var(--lock);
-  color: #9fe8dc;
+  color: var(--lock);
 }
 
 .preview-actions .btn.revise-cta {
@@ -3056,7 +3037,7 @@ a.btn[hidden] {
   font-weight: 700;
   color: var(--ink);
   border-color: var(--lock);
-  background: rgba(47, 158, 143, 0.16);
+  background: color-mix(in srgb, var(--lock) 16%, transparent);
 }
 
 .preview-panel > .hint {
@@ -3131,7 +3112,7 @@ a.btn[hidden] {
 
 .revise-version-item {
   border: 1px solid var(--line);
-  background: rgba(0, 0, 0, 0.12);
+  background: var(--code-bg);
   padding: 0;
 }
 
@@ -3168,7 +3149,7 @@ a.btn[hidden] {
 
 .revise-version-body {
   padding: 0 0.65rem 0.65rem;
-  border-top: 1px solid rgba(63, 86, 108, 0.45);
+  border-top: 1px solid var(--line);
 }
 
 .revise-version-fields {
@@ -3281,7 +3262,7 @@ a.btn[hidden] {
   font-weight: 700;
   color: var(--ink);
   border-color: var(--lock);
-  background: rgba(47, 158, 143, 0.16);
+  background: color-mix(in srgb, var(--lock) 16%, transparent);
 }
 
 .revise-panel .hint {
@@ -3389,7 +3370,7 @@ a.btn[hidden] {
 .setup-guide-cmd {
   margin: 0 0 0.35rem;
   padding: 0.55rem 0.7rem;
-  background: rgba(8, 14, 20, 0.55);
+  background: var(--inset-strong);
   border: 1px solid var(--line);
   color: var(--ink);
   font-family: var(--font-mono);
@@ -3432,7 +3413,7 @@ a.btn[hidden] {
 .provider-chip[aria-pressed="true"] {
   border-color: var(--lock);
   color: var(--lock);
-  background: rgba(47, 158, 143, 0.1);
+  background: color-mix(in srgb, var(--lock) 10%, transparent);
 }
 
 code {