agentic-orchestrator 0.1.27 → 0.2.0

package/packages/web-dashboard/src/styles/dashboard.module.css

@@ -1,560 +1,1607 @@
-.dashboardRoot {
-  --color-planning: #2f7de1;
-  --color-building: #d27a2c;
-  --color-qa: #b1952f;
-  --color-ready: #209f6f;
-  --color-blocked: #c83d47;
-  --color-merged: #6b7f96;
-  --bg-page: radial-gradient(circle at top left, #1d253f 0%, #0b1023 48%, #060911 100%);
-  --bg-card: rgba(9, 17, 37, 0.92);
-  --bg-panel: rgba(17, 27, 50, 0.92);
-  --bg-elevated: rgba(25, 37, 67, 0.92);
-  --text-primary: #eff5ff;
-  --text-muted: #9baec8;
-  --border-weak: #2a3a5c;
-  --border-strong: #4d648d;
-  --shadow-soft: 0 16px 36px rgba(2, 8, 20, 0.35);
-
+.appShell {
   min-height: 100vh;
-  max-width: 1780px;
-  margin: 0 auto;
-  padding: 1.25rem;
-  overflow-x: hidden;
-  overflow-x: clip;
-  background: var(--bg-page);
-  color: var(--text-primary);
-  font-family: 'IBM Plex Sans', 'Segoe UI', 'Helvetica Neue', sans-serif;
+  display: flex;
+  flex-direction: column;
+  background: linear-gradient(180deg, #f8fbfc 0%, #eff2f3 100%);
 }
 
-.topBar {
+.wrapAnywhere {
+  min-width: 0;
+  overflow-wrap: anywhere;
+  word-break: break-word;
+}
+
+.operationalSummaryCard,
+.progressSnapshotCard,
+.focusDecisionBanner,
+.progressTaskPanel,
+.runHistoryRow,
+.logViewerRow,
+.specViewerToc,
+.specViewerContent {
+  min-width: 0;
+}
+
+.operationalMetaGrid,
+.progressSnapshotStats,
+.focusOverviewGrid,
+.specViewerLayout,
+.logViewerLayout,
+.planWorkspace {
+  display: grid;
+  gap: 0.75rem;
+}
+
+.operationalMetaGrid {
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+}
+
+.summaryMetricCard,
+.focusOverviewCard,
+.progressTaskPanel,
+.logViewerContent,
+.specViewerToc,
+.specViewerContent {
+  border: 1px solid rgba(15, 23, 42, 0.12);
+  border-radius: 0.9rem;
+  padding: 0.75rem;
+  background: rgba(255, 255, 255, 0.75);
+}
+
+.summaryMetricCard {
   display: flex;
+  flex-direction: column;
   justify-content: space-between;
-  align-items: center;
-  gap: 1rem;
-  margin-bottom: 1rem;
+  gap: 0.4rem;
+  min-height: 5rem;
 }
 
-.titleBlock {
+.focusOverviewGrid {
+  grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
+  align-items: stretch;
+}
+
+.focusOverviewCard {
   display: flex;
   flex-direction: column;
-  gap: 0.25rem;
+  justify-content: space-between;
+  gap: 0.45rem;
+  min-height: 5rem;
 }
 
-.pageTitle {
-  font-size: clamp(1.55rem, 3vw, 2rem);
-  letter-spacing: 0.02em;
+.focusOverviewCard strong {
+  display: block;
+  margin: 0;
+  font-size: 1rem;
+  line-height: 1.4;
+  color: var(--text-primary);
 }
 
-.pageSubtitle {
+.summaryMetricLabel {
   color: var(--text-muted);
-  font-size: 0.78rem;
+  font-size: 0.72rem;
+  letter-spacing: 0.02em;
   text-transform: uppercase;
-  letter-spacing: 0.08em;
 }
 
-.metaControls {
+.summaryMetricValue {
+  display: block;
+  margin: 0;
+  font-size: 0.98rem;
+  line-height: 1.4;
+  color: var(--text-primary);
+}
+
+.operationalNarrative {
+  margin: 0;
+  font-size: 0.95rem;
+  line-height: 1.55;
+  overflow-wrap: anywhere;
+}
+
+.progressSnapshotStats {
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  align-items: stretch;
+}
+
+.progressSnapshotNarrative {
+  margin: 0;
+  font-size: 0.88rem;
+  line-height: 1.45;
+  color: var(--text-primary);
+  overflow-wrap: anywhere;
+}
+
+.focusDecisionBanner {
+  border: 1px solid rgba(15, 23, 42, 0.12);
+}
+
+.focusDecisionBannerReady {
+  background: linear-gradient(135deg, rgba(216, 245, 224, 0.9), rgba(255, 255, 255, 0.95));
+}
+
+.focusDecisionBannerRisk {
+  background: linear-gradient(135deg, rgba(255, 242, 204, 0.9), rgba(255, 255, 255, 0.95));
+}
+
+.focusDecisionBannerBlocked {
+  background: linear-gradient(135deg, rgba(252, 225, 225, 0.92), rgba(255, 255, 255, 0.95));
+}
+
+.focusDecisionBannerNeutral {
+  background: linear-gradient(135deg, rgba(232, 238, 245, 0.92), rgba(255, 255, 255, 0.95));
+}
+
+.focusDecisionHeadline {
   display: flex;
   align-items: center;
-  gap: 0.65rem;
+  justify-content: space-between;
+  gap: 0.75rem;
   flex-wrap: wrap;
-  justify-content: flex-end;
 }
 
-.label {
-  color: var(--text-muted);
-  font-size: 0.75rem;
+.collapsibleSummary {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 0.85rem;
+  cursor: pointer;
 }
 
-.select,
-.input,
-.textarea,
-.filterSearch,
-.actionSelect {
-  background: rgba(11, 20, 42, 0.95);
+.collapsibleSummaryTitleGroup {
+  min-width: 0;
+  display: grid;
+  gap: 0.18rem;
+}
+
+.collapsibleSummaryHeading {
+  font-size: 0.84rem;
+  font-weight: 700;
   color: var(--text-primary);
-  border: 1px solid var(--border-weak);
-  border-radius: 0.55rem;
-  padding: 0.46rem 0.6rem;
-  font: inherit;
 }
 
-.select:focus,
-.input:focus,
-.textarea:focus,
-.filterSearch:focus,
-.actionSelect:focus,
-.cardButton:focus-visible,
-.button:focus-visible,
-.linkButton:focus-visible,
-.summaryTile:focus-visible,
-.filterToggle:focus-visible {
-  outline: 2px solid #7fc6ff;
-  outline-offset: 1px;
+.collapsibleSummaryDetail {
+  margin: 0;
+  font-size: 0.78rem;
+  line-height: 1.45;
+  color: var(--text-muted);
 }
 
-.connectionDot {
-  width: 0.62rem;
-  height: 0.62rem;
-  border-radius: 999px;
+.collapsibleSummaryMeta {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.35rem;
+  flex-wrap: wrap;
 }
 
-.connected {
-  background: #1fce8f;
-  box-shadow: 0 0 0 0.2rem rgba(31, 206, 143, 0.2);
+.collapsibleBody {
+  display: grid;
+  gap: 0.75rem;
 }
 
-.disconnected {
-  background: #ea5264;
-  box-shadow: 0 0 0 0.2rem rgba(234, 82, 100, 0.2);
+.operatorConsoleCallout {
+  border-color: var(--border-accent);
+  background:
+    linear-gradient(135deg, rgba(255, 250, 235, 0.92), rgba(255, 255, 255, 0.95)),
+    rgba(255, 255, 255, 0.94);
 }
 
-.summaryBar {
+.operatorConsoleActions {
+  display: flex;
+  gap: 0.45rem;
+  flex-wrap: wrap;
+}
+
+.specViewerLayout,
+.logViewerLayout {
+  grid-template-columns: minmax(13rem, 0.32fr) minmax(0, 1fr);
+  align-items: start;
+}
+
+.planWorkspace {
+  grid-template-columns: minmax(0, 1.15fr) minmax(18rem, 0.85fr);
+  align-items: start;
+}
+
+.plannerStepper,
+.plannerArtifactTabs {
   display: grid;
-  grid-template-columns: repeat(6, minmax(0, 1fr));
-  gap: 0.65rem;
-  margin-bottom: 0.75rem;
+  gap: 0.75rem;
 }
 
-.summaryTile {
+.plannerStepper {
+  grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
+}
+
+.plannerStepCard,
+.plannerQueueItem,
+.inlineQuestionPanel {
+  border: 1px solid rgba(15, 23, 42, 0.12);
+  border-radius: 0.9rem;
+  background: rgba(255, 255, 255, 0.78);
+  padding: 0.75rem;
+}
+
+.plannerArtifactTabs {
+  grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
+}
+
+.plannerQueueItem {
+  display: grid;
+  gap: 0.55rem;
+}
+
+.inlineQuestionPanel {
+  display: grid;
+  gap: 0.75rem;
+}
+
+.specViewerToc {
+  position: sticky;
+  top: 1rem;
+  align-self: start;
+}
+
+.specViewerContent {
+  overflow: hidden;
+}
+
+.markdownPreview {
+  display: grid;
+  gap: 0.75rem;
+  font-size: 0.9rem;
+  line-height: 1.65;
+  color: var(--text-primary);
+}
+
+.markdownPreview h2,
+.markdownPreview h3,
+.markdownPreview h4 {
+  margin: 0;
+  scroll-margin-top: 6rem;
+}
+
+.markdownPreview p,
+.markdownPreview ul,
+.markdownPreview ol,
+.markdownPreview blockquote,
+.markdownPreview pre,
+.markdownPreview hr {
+  margin: 0;
+}
+
+.markdownPreview ul,
+.markdownPreview ol {
+  padding-left: 1.25rem;
+}
+
+.preformattedBlock {
+  margin: 0;
+  padding: 0.85rem;
   border: 1px solid var(--border-weak);
   border-radius: 0.75rem;
-  background: linear-gradient(145deg, rgba(24, 34, 60, 0.95), rgba(10, 16, 34, 0.9));
-  color: var(--text-primary);
-  text-decoration: none;
-  padding: 0.75rem;
-  text-align: left;
-  box-shadow: var(--shadow-soft);
-  cursor: pointer;
+  background: rgba(250, 251, 252, 0.94);
+  font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
+  font-size: 0.79rem;
+  line-height: 1.55;
+  overflow: auto;
+  white-space: pre-wrap;
+  overflow-wrap: anywhere;
 }
 
-.summaryTile:hover {
-  border-color: #7b9ed1;
+.markdownPreview li {
+  overflow-wrap: anywhere;
 }
 
-.summaryTileActive {
-  border-color: #87d0ff;
-  background: linear-gradient(145deg, rgba(34, 50, 87, 0.98), rgba(11, 24, 51, 0.95));
+.markdownPreview blockquote {
+  border-left: 3px solid rgba(91, 173, 178, 0.36);
+  padding-left: 0.9rem;
+  color: var(--text-on-accent);
 }
 
-.summaryTileAlert {
-  border-color: rgba(234, 82, 100, 0.7);
-  background: linear-gradient(145deg, rgba(70, 24, 34, 0.94), rgba(36, 11, 18, 0.95));
+.markdownPreview hr {
+  border: 0;
+  border-top: 1px solid rgba(15, 23, 42, 0.12);
 }
 
-.summaryTileAlert.summaryTileActive {
-  border-color: rgba(255, 139, 154, 0.95);
+.markdownPreview pre {
+  overflow: auto;
+  padding: 0.8rem;
+  border: 1px solid rgba(15, 23, 42, 0.12);
+  border-radius: 0.8rem;
+  background: rgba(248, 250, 252, 0.92);
 }
 
-.summaryValue {
+.markdownPreview code {
+  font-family: 'IBM Plex Mono', 'Fira Code', monospace;
+  font-size: 0.84em;
+  background: rgba(239, 242, 243, 0.92);
+  border-radius: 0.3rem;
+  padding: 0.1rem 0.25rem;
+}
+
+.markdownPreview pre code {
   display: block;
-  font-size: 1.2rem;
+  padding: 0;
+  background: transparent;
+  white-space: pre-wrap;
+  word-break: break-word;
+}
+
+.markdownPreview :global(.markdownTableWrapper) {
+  max-width: 100%;
+  overflow-x: auto;
+}
+
+.markdownPreview table {
+  width: 100%;
+  min-width: 28rem;
+  border-collapse: collapse;
+  font-size: 0.82rem;
+}
+
+.markdownPreview th,
+.markdownPreview td {
+  border: 1px solid rgba(15, 23, 42, 0.12);
+  padding: 0.45rem 0.55rem;
+  text-align: left;
+  vertical-align: top;
+}
+
+.markdownPreview th {
+  background: rgba(239, 248, 255, 0.8);
   font-weight: 700;
 }
 
-.summaryLabel {
-  color: var(--text-muted);
-  font-size: 0.75rem;
+.logViewerList,
+.focusSidebar .planList {
+  min-width: 0;
 }
 
-.sparklinePoint {
-  fill: rgba(127, 198, 255, 0.01);
-  stroke: transparent;
+.logViewerList {
+  display: grid;
+  gap: 0.5rem;
 }
 
-.filterBar {
-  border: 1px solid var(--border-weak);
-  border-radius: 0.78rem;
-  background: rgba(8, 14, 31, 0.88);
-  box-shadow: var(--shadow-soft);
-  padding: 0.75rem;
-  margin-bottom: 1rem;
+.runHistoryRow,
+.logViewerRow {
   display: flex;
-  flex-direction: column;
-  gap: 0.65rem;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.75rem;
+  width: 100%;
+  border: 1px solid rgba(15, 23, 42, 0.12);
+  border-radius: 0.9rem;
+  background: rgba(255, 255, 255, 0.75);
+  padding: 0.75rem;
+  text-align: left;
 }
 
-.filterRow {
+.runHistoryRowActive,
+.logViewerRowActive {
+  border-color: var(--border-strong);
+  background: rgba(239, 248, 255, 0.98);
+  box-shadow: 0 0 0 2px rgba(91, 173, 178, 0.18);
+}
+
+.planTaskDetails summary {
   display: flex;
-  flex-wrap: wrap;
   align-items: center;
-  gap: 0.5rem;
+  gap: 0.75rem;
+  flex-wrap: wrap;
+}
+
+@media (max-width: 900px) {
+  .specViewerLayout,
+  .planWorkspace,
+  .logViewerLayout {
+    grid-template-columns: minmax(0, 1fr);
+  }
+
+  .specViewerToc {
+    position: static;
+  }
+}
+
+.appBody {
+  flex: 1 1 auto;
+}
+
+.appFooter {
+  width: min(1780px, calc(100% - 2rem));
+  margin: 0 auto 1rem;
+}
+
+.footerLinks {
+  display: flex;
+  justify-content: flex-end;
+  gap: 0.5rem;
+  padding: 0 1.25rem;
+}
+
+.dashboardRoot {
+  --color-planning: #28b2ff;
+  --color-intake: #5badb2;
+  --color-building: #f8be2d;
+  --color-qa: #ffa62b;
+  --color-ready: #0f766e;
+  --color-blocked: #b42318;
+  --color-merged: #596873;
+  --bg-page:
+    radial-gradient(circle at 15% 20%, rgba(91, 173, 178, 0.12), transparent 28%),
+    radial-gradient(circle at 85% 0%, rgba(248, 190, 45, 0.1), transparent 30%),
+    linear-gradient(180deg, #f8fbfc 0%, #eff2f3 100%);
+  --bg-card: rgba(255, 255, 255, 0.94);
+  --bg-panel: rgba(255, 255, 255, 0.96);
+  --bg-elevated: rgba(239, 248, 255, 0.92);
+  --bg-muted: rgba(239, 242, 243, 0.94);
+  --bg-hover: rgba(91, 173, 178, 0.12);
+  --text-primary: #1c2f3d;
+  --text-muted: #596873;
+  --text-on-accent: #032658;
+  --border-weak: rgba(28, 47, 61, 0.1);
+  --border-strong: rgba(91, 173, 178, 0.32);
+  --border-accent: rgba(248, 190, 45, 0.42);
+  --shadow-soft: 0 10px 30px rgba(28, 47, 61, 0.1);
+  --shadow-toolbar: 0 4px 20px rgba(91, 173, 178, 0.16);
+
+  min-height: 100vh;
+  max-width: 1780px;
+  margin: 0 auto;
+  padding: 1.25rem;
+  overflow-x: hidden;
+  overflow-x: clip;
+  background: var(--bg-page);
+  color: var(--text-primary);
+  font-family:
+    'Roboto',
+    'Inter',
+    'Segoe UI',
+    system-ui,
+    -apple-system,
+    sans-serif;
+}
+
+.topBar {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 1rem;
+  margin-bottom: 1rem;
+}
+
+.commandCenterHeader {
+  display: flex;
+  justify-content: space-between;
+  gap: 1rem;
+  align-items: flex-start;
+  margin-bottom: 0.9rem;
+}
+
+.commandCenterHeading {
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+}
+
+.commandCenterActions {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  align-items: flex-end;
+}
+
+.projectPicker {
+  display: flex;
+  align-items: center;
+  gap: 0.55rem;
+  flex-wrap: wrap;
+  justify-content: flex-end;
+}
+
+.eyebrow {
+  color: #4a9a9f;
+  font-size: 0.72rem;
+  letter-spacing: 0.12em;
+  text-transform: uppercase;
+}
+
+.titleBlock {
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+}
+
+.pageTitle {
+  font-size: clamp(1.55rem, 3vw, 2rem);
+  letter-spacing: 0.02em;
+}
+
+.pageSubtitle {
+  color: var(--text-muted);
+  font-size: 0.78rem;
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+}
+
+.metaControls {
+  display: flex;
+  align-items: center;
+  gap: 0.65rem;
+  flex-wrap: wrap;
+  justify-content: flex-end;
+}
+
+.label {
+  color: var(--text-muted);
+  font-size: 0.75rem;
+}
+
+.select,
+.input,
+.textarea,
+.filterSearch,
+.actionSelect {
+  background: rgba(255, 255, 255, 0.92);
+  color: var(--text-primary);
+  border: 1px solid var(--border-weak);
+  border-radius: 0.55rem;
+  padding: 0.46rem 0.6rem;
+  font: inherit;
+  box-shadow: inset 0 1px 2px rgba(28, 47, 61, 0.04);
+}
+
+.select:focus,
+.input:focus,
+.textarea:focus,
+.filterSearch:focus,
+.actionSelect:focus,
+.cardButton:focus-visible,
+.button:focus-visible,
+.linkButton:focus-visible,
+.summaryTile:focus-visible,
+.filterToggle:focus-visible {
+  outline: 2px solid var(--color-primary, #5badb2);
+  outline-offset: 1px;
+}
+
+.connectionDot {
+  width: 0.62rem;
+  height: 0.62rem;
+  border-radius: 999px;
+}
+
+.connected {
+  background: var(--color-ready);
+  box-shadow: 0 0 0 0.2rem rgba(15, 118, 110, 0.18);
+}
+
+.disconnected {
+  background: var(--color-blocked);
+  box-shadow: 0 0 0 0.2rem rgba(180, 35, 24, 0.14);
+}
+
+.summaryBar {
+  display: grid;
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+  gap: 0.65rem;
+  margin-bottom: 0.75rem;
+}
+
+.attentionStrip {
+  display: grid;
+  grid-template-columns: repeat(7, minmax(0, 1fr));
+  gap: 0.55rem;
+  margin-bottom: 0.75rem;
+}
+
+.attentionCard {
+  border: 1px solid var(--border-weak);
+  border-radius: 0.8rem;
+  background: rgba(255, 255, 255, 0.94);
+  box-shadow: var(--shadow-soft);
+  text-align: left;
+  padding: 0.7rem;
+  cursor: pointer;
+}
+
+.attentionCardActive {
+  border-color: rgba(248, 190, 45, 0.55);
+  background: rgba(248, 190, 45, 0.14);
+}
+
+.summaryTile {
+  border: 1px solid var(--border-weak);
+  border-radius: 0.75rem;
+  background: linear-gradient(145deg, rgba(255, 255, 255, 0.98), rgba(239, 248, 255, 0.94));
+  color: var(--text-primary);
+  text-decoration: none;
+  padding: 0.75rem;
+  text-align: left;
+  box-shadow: var(--shadow-soft);
+  cursor: pointer;
+}
+
+.summaryTile:hover {
+  border-color: var(--border-strong);
+  transform: translateY(-2px);
+}
+
+.summaryTileActive {
+  border-color: var(--color-planning);
+  background: linear-gradient(145deg, rgba(239, 248, 255, 1), rgba(181, 227, 230, 0.5));
+}
+
+.summaryTileAlert {
+  border-color: rgba(180, 35, 24, 0.28);
+  background: linear-gradient(145deg, rgba(255, 245, 244, 0.98), rgba(255, 233, 229, 0.94));
+}
+
+.summaryTileAlert.summaryTileActive {
+  border-color: rgba(180, 35, 24, 0.45);
+}
+
+.summaryValue {
+  display: block;
+  font-size: 1.2rem;
+  font-weight: 700;
+}
+
+.summaryLabel {
+  color: var(--text-muted);
+  font-size: 0.75rem;
+}
+
+.sparklinePoint {
+  fill: rgba(40, 178, 255, 0.04);
+  stroke: transparent;
+}
+
+.filterBar {
+  border: 1px solid var(--border-weak);
+  border-radius: 0.78rem;
+  background: rgba(255, 255, 255, 0.84);
+  box-shadow: var(--shadow-soft);
+  padding: 0.75rem;
+  margin-bottom: 1rem;
+  display: flex;
+  flex-direction: column;
+  gap: 0.65rem;
+  backdrop-filter: blur(10px);
+}
+
+.filterRow {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.filterSearch {
+  min-width: min(24rem, 100%);
+  flex: 1;
+}
+
+.filterGroup {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.35rem;
+}
+
+.filterToggle {
+  border: 1px solid var(--border-weak);
+  border-radius: 999px;
+  background: rgba(255, 255, 255, 0.9);
+  color: var(--text-primary);
+  font-size: 0.72rem;
+  padding: 0.2rem 0.6rem;
+  cursor: pointer;
+}
+
+.filterToggleOn {
+  border-color: rgba(91, 173, 178, 0.42);
+  background: rgba(91, 173, 178, 0.14);
+  color: #1c2f3d;
+}
+
+.filterToggleDanger.filterToggleOn {
+  border-color: rgba(180, 35, 24, 0.28);
+  background: rgba(180, 35, 24, 0.08);
+  color: #7b241c;
+}
+
+.layout {
+  display: grid;
+  grid-template-columns: minmax(0, 2.2fr) minmax(22rem, 1fr);
+  gap: 0.95rem;
+}
+
+.commandCenterLayout {
+  display: grid;
+  grid-template-columns: minmax(0, 1.8fr) minmax(18rem, 0.95fr);
+  gap: 0.9rem;
+  align-items: start;
+}
+
+.commandCenterMain {
+  display: flex;
+  flex-direction: column;
+  gap: 0.8rem;
+}
+
+.commandCenterRail {
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+  min-width: 0;
+}
+
+.operatorGrid {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 0.65rem;
+  margin-bottom: 0.75rem;
+}
+
+.focusHeader {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  gap: 0.8rem;
+  margin-bottom: 0.9rem;
+}
+
+.focusLayout {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr);
+}
+
+.focusView {
+  display: flex;
+  flex-direction: column;
+  gap: 0.85rem;
+}
+
+.focusShell {
+  display: grid;
+  grid-template-columns: minmax(18rem, 24rem) minmax(0, 1fr);
+  gap: 0.85rem;
+  align-items: start;
+}
+
+.focusSidebar {
+  position: sticky;
+  top: 0.75rem;
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+}
+
+.focusMain {
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+}
+
+.focusHeroBlock {
+  background:
+    linear-gradient(145deg, rgba(255, 255, 255, 0.98), rgba(239, 248, 255, 0.96)),
+    rgba(255, 255, 255, 0.96);
+}
+
+.focusHeroHeader {
+  display: flex;
+  justify-content: space-between;
+  gap: 0.65rem;
+  align-items: flex-start;
+}
+
+.focusHeroMetaGrid {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 0.45rem;
+}
+
+.focusHeroMetaCard {
+  border: 1px solid var(--border-weak);
+  border-radius: 0.62rem;
+  background: rgba(255, 255, 255, 0.92);
+  padding: 0.5rem;
+  display: flex;
+  flex-direction: column;
+  gap: 0.15rem;
+}
+
+.focusTabBar {
+  display: flex;
+  gap: 0.35rem;
+  overflow-x: auto;
+  padding-bottom: 0.2rem;
+}
+
+.focusTabButton {
+  border: 1px solid var(--border-weak);
+  border-radius: 999px;
+  background: rgba(255, 255, 255, 0.96);
+  color: var(--text-muted);
+  cursor: pointer;
+  font: inherit;
+  font-size: 0.74rem;
+  font-weight: 600;
+  padding: 0.42rem 0.7rem;
+  white-space: nowrap;
+}
+
+.focusTabButtonActive {
+  border-color: var(--border-strong);
+  background: rgba(239, 248, 255, 0.98);
+  color: var(--text-primary);
+  box-shadow: var(--shadow-toolbar);
+}
+
+.focusTabPanels {
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+}
+
+.focusTabPanel {
+  min-width: 0;
+}
+
+.focusTabStack {
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+}
+
+.focusPinnedActionGrid {
+  display: flex;
+  flex-direction: column;
+  gap: 0.35rem;
+}
+
+.focusDiagnosisPanel {
+  gap: 0.6rem;
+}
+
+.focusDiagnosisCauseList {
+  display: flex;
+  flex-direction: column;
+  gap: 0.55rem;
+}
+
+.focusDiagnosisCause {
+  border: 1px solid var(--border-weak);
+  border-radius: 0.58rem;
+  background: rgba(255, 255, 255, 0.94);
+  padding: 0.5rem;
+  display: flex;
+  flex-direction: column;
+  gap: 0.35rem;
+}
+
+.kanbanGrid {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(14rem, 1fr));
+  gap: 0.75rem;
+  align-items: stretch;
+}
+
+.column {
+  border: 1px solid var(--border-weak);
+  border-radius: 0.85rem;
+  background: rgba(255, 255, 255, 0.76);
+  min-height: 12rem;
+  max-height: calc(100vh - 16rem);
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+  box-shadow: var(--shadow-soft);
+  backdrop-filter: blur(10px);
+}
+
+.columnHeader {
+  position: sticky;
+  top: 0;
+  z-index: 2;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 0.62rem 0.7rem;
+  border-bottom: 1px solid var(--border-weak);
+  background: rgba(239, 248, 255, 0.96);
+}
+
+.columnHeaderTitle {
+  font-size: 0.78rem;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+}
+
+.columnHeaderCount {
+  color: var(--text-muted);
+  font-size: 0.72rem;
+}
+
+.columnBody {
+  overflow-y: auto;
+  padding: 0.55rem;
+  display: flex;
+  flex-direction: column;
+  gap: 0.45rem;
+}
+
+.emptyState {
+  border: 1px dashed rgba(91, 173, 178, 0.28);
+  border-radius: 0.65rem;
+  background: rgba(239, 248, 255, 0.72);
+  padding: 0.75rem;
+  font-size: 0.76rem;
+  color: var(--text-muted);
+  text-align: center;
+}
+
+.cardButton {
+  appearance: none;
+  border: 1px solid var(--border-weak);
+  border-left-width: 0.34rem;
+  border-radius: 0.65rem;
+  background: var(--bg-card);
+  color: var(--text-primary);
+  padding: 0.55rem;
+  text-align: left;
+  cursor: pointer;
+  display: flex;
+  flex-direction: column;
+  gap: 0.42rem;
+}
+
+.cardButton:hover {
+  border-color: var(--border-strong);
+  box-shadow: var(--shadow-soft);
+}
+
+.cardSelected {
+  border-color: rgba(91, 173, 178, 0.38);
+  box-shadow: 0 0 0 1px rgba(91, 173, 178, 0.2);
+}
+
+.cardFocused {
+  box-shadow: 0 0 0 2px rgba(248, 190, 45, 0.26);
+}
+
+.cardIntake {
+  border-left-color: var(--color-intake);
+}
+
+.cardPlanning {
+  border-left-color: var(--color-planning);
+}
+
+.cardBuilding {
+  border-left-color: var(--color-building);
+}
+
+.cardQa {
+  border-left-color: var(--color-qa);
+}
+
+.cardReadyToMerge {
+  border-left-color: var(--color-ready);
+}
+
+.cardBlocked {
+  border-left-color: var(--color-blocked);
+}
+
+.cardMerged {
+  border-left-color: var(--color-merged);
+}
+
+.cardActivePulse {
+  animation: cardPulse 1.6s ease-in-out infinite;
+}
+
+.cardMuted {
+  opacity: 0.82;
+}
+
+@keyframes cardPulse {
+  0% {
+    box-shadow: inset 0 0 0 0 rgba(91, 173, 178, 0.08);
+  }
+  50% {
+    box-shadow: inset 0 0 0 5px rgba(248, 190, 45, 0.16);
+  }
+  100% {
+    box-shadow: inset 0 0 0 0 rgba(91, 173, 178, 0.08);
+  }
+}
+
+.cardHeadline {
+  display: flex;
+  justify-content: space-between;
+  gap: 0.35rem;
+  align-items: flex-start;
+}
+
+.cardFeatureId {
+  font-weight: 600;
+  font-size: 0.78rem;
+  letter-spacing: 0.02em;
+  word-break: break-word;
+}
+
+.cardMeta {
+  display: flex;
+  align-items: center;
+  gap: 0.35rem;
+  flex-wrap: wrap;
+  color: var(--text-muted);
+  font-size: 0.69rem;
+}
+
+.cardBlockedHint {
+  margin-top: 0.2rem;
+  padding-top: 0.15rem;
+}
+
+.activityDot {
+  width: 0.52rem;
+  height: 0.52rem;
+  border-radius: 999px;
+}
+
+.activityDotActive {
+  background: var(--color-ready);
+}
+
+.activityDotIdle {
+  background: var(--color-building);
+}
+
+.activityDotWaitingInput {
+  background: var(--color-planning);
+}
+
+.activityDotBlocked {
+  background: var(--color-blocked);
+}
+
+.activityDotExited {
+  background: var(--color-merged);
+}
+
+.activityDotUnknown {
+  background: rgba(89, 104, 115, 0.68);
+}
+
+.badgeRow {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.28rem;
+}
+
+.badge {
+  border: 1px solid var(--border-weak);
+  border-radius: 999px;
+  background: rgba(255, 255, 255, 0.92);
+  color: var(--text-muted);
+  font-size: 0.64rem;
+  padding: 0.1rem 0.38rem;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+}
+
+.badgePass {
+  border-color: rgba(15, 118, 110, 0.24);
+  background: rgba(15, 118, 110, 0.08);
+  color: #0f766e;
+}
+
+.badgeFail {
+  border-color: rgba(180, 35, 24, 0.22);
+  background: rgba(180, 35, 24, 0.08);
+  color: #b42318;
+}
+
+.badgePending {
+  border-color: rgba(248, 190, 45, 0.32);
+  background: rgba(248, 190, 45, 0.14);
+  color: #926600;
+}
+
+.badgeNeutral {
+  color: var(--text-muted);
+}
+
+.detailPanel {
+  border: 1px solid var(--border-weak);
+  border-radius: 0.9rem;
+  background: var(--bg-panel);
+  box-shadow: var(--shadow-soft);
+  padding: 0.95rem;
+  display: flex;
+  flex-direction: column;
+  gap: 0.8rem;
+  max-height: calc(100vh - 6rem);
+  overflow-y: auto;
+}
+
+.panelPlaceholder {
+  border: 1px dashed rgba(91, 173, 178, 0.28);
+  border-radius: 0.7rem;
+  padding: 1rem;
+  color: var(--text-muted);
+  text-align: center;
+  font-size: 0.85rem;
+}
+
+.panelHeader {
+  display: flex;
+  justify-content: space-between;
+  gap: 0.5rem;
+  align-items: flex-start;
+}
+
+.panelTitle {
+  font-size: 1.05rem;
+  font-weight: 700;
+  word-break: break-word;
+}
+
+.closeButton {
+  background: transparent;
+  color: var(--text-muted);
+  border: 1px solid var(--border-weak);
+  border-radius: 0.45rem;
+  cursor: pointer;
+  font-size: 0.72rem;
+  padding: 0.2rem 0.45rem;
+}
+
+.metaText {
+  color: var(--text-muted);
+  font-size: 0.75rem;
+}
+
+.inlinePulse {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.3rem;
+}
+
+.inlinePulse::before {
+  content: '';
+  width: 0.5rem;
+  height: 0.5rem;
+  border-radius: 999px;
+  background: var(--color-ready);
+  animation: dotPulse 1.4s ease-in-out infinite;
+}
+
+@keyframes dotPulse {
+  0% {
+    transform: scale(1);
+    opacity: 0.9;
+  }
+  50% {
+    transform: scale(1.35);
+    opacity: 0.4;
+  }
+  100% {
+    transform: scale(1);
+    opacity: 0.9;
+  }
+}
+
+.section {
+  border: 1px solid var(--border-weak);
+  border-radius: 0.72rem;
+  background: rgba(255, 255, 255, 0.88);
+  padding: 0.7rem;
+  display: flex;
+  flex-direction: column;
+  gap: 0.45rem;
+  box-shadow: var(--shadow-soft);
 }
 
-.filterSearch {
-  min-width: min(24rem, 100%);
-  flex: 1;
+.rolePerformanceGrid {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 0.65rem;
 }
 
-.filterGroup {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 0.35rem;
+.rolePerformanceCard {
+  padding: 0.75rem;
+  gap: 0.55rem;
 }
 
-.filterToggle {
-  border: 1px solid var(--border-weak);
-  border-radius: 999px;
-  background: rgba(9, 18, 40, 0.95);
-  color: var(--text-primary);
-  font-size: 0.72rem;
-  padding: 0.2rem 0.6rem;
-  cursor: pointer;
+.rolePerformancePlanner {
+  border-color: rgba(40, 178, 255, 0.26);
 }
 
-.filterToggleOn {
-  border-color: #7fd2ff;
-  background: rgba(12, 45, 80, 0.9);
-  color: #d4ecff;
+.rolePerformanceBuilder {
+  border-color: rgba(248, 190, 45, 0.34);
 }
 
-.filterToggleDanger.filterToggleOn {
-  border-color: #f3949f;
-  background: rgba(95, 24, 37, 0.9);
-  color: #ffd0d6;
+.rolePerformanceQa {
+  border-color: rgba(255, 166, 43, 0.34);
 }
 
-.layout {
-  display: grid;
-  grid-template-columns: minmax(0, 2.2fr) minmax(22rem, 1fr);
-  gap: 0.95rem;
+.rolePerformanceSummary {
+  list-style: none;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 0.6rem;
+  cursor: pointer;
 }
 
-.operatorGrid {
-  display: grid;
-  grid-template-columns: repeat(2, minmax(0, 1fr));
-  gap: 0.65rem;
-  margin-bottom: 0.75rem;
+.rolePerformanceSummary::-webkit-details-marker {
+  display: none;
 }
 
-.focusHeader {
+.rolePerformanceIdentity {
   display: flex;
-  justify-content: space-between;
-  align-items: flex-start;
-  gap: 0.8rem;
-  margin-bottom: 0.9rem;
+  align-items: center;
+  gap: 0.45rem;
+  min-width: 0;
 }
 
-.focusLayout {
-  display: grid;
-  grid-template-columns: minmax(0, 1fr);
+.rolePerformanceLabel {
+  font-size: 0.86rem;
+  word-break: break-word;
 }
 
-.kanbanGrid {
-  display: grid;
-  grid-template-columns: repeat(3, minmax(14rem, 1fr));
-  gap: 0.75rem;
-  align-items: stretch;
+.rolePerformanceMetricList {
+  display: flex;
+  flex-direction: column;
+  gap: 0.55rem;
 }
 
-.column {
-  border: 1px solid var(--border-weak);
-  border-radius: 0.85rem;
-  background: rgba(10, 19, 40, 0.9);
-  min-height: 12rem;
-  max-height: calc(100vh - 16rem);
-  overflow: hidden;
+.rolePerformanceMetric {
   display: flex;
   flex-direction: column;
+  gap: 0.22rem;
+  border-top: 1px solid var(--border-weak);
+  padding-top: 0.45rem;
 }
 
-.columnHeader {
-  position: sticky;
-  top: 0;
-  z-index: 2;
+.rolePerformanceMetric:first-child {
+  border-top: 0;
+  padding-top: 0;
+}
+
+.rolePerformanceMetricHeader {
   display: flex;
   justify-content: space-between;
+  gap: 0.5rem;
   align-items: center;
-  padding: 0.62rem 0.7rem;
-  border-bottom: 1px solid var(--border-weak);
-  background: rgba(16, 29, 55, 0.97);
 }
 
-.columnHeaderTitle {
+.rolePerformanceMetricLabel {
+  font-size: 0.75rem;
+  font-weight: 600;
+}
+
+.rolePerformanceMetricValues {
+  display: flex;
+  justify-content: space-between;
+  gap: 0.5rem;
+  align-items: baseline;
   font-size: 0.78rem;
-  letter-spacing: 0.04em;
-  text-transform: uppercase;
 }
 
-.columnHeaderCount {
-  color: var(--text-muted);
-  font-size: 0.72rem;
+.rolePerformanceTrack {
+  position: relative;
+  height: 0.55rem;
+  border-radius: 999px;
+  background: rgba(28, 47, 61, 0.08);
+  overflow: hidden;
 }
 
-.columnBody {
-  overflow-y: auto;
-  padding: 0.55rem;
-  display: flex;
-  flex-direction: column;
-  gap: 0.45rem;
+.rolePerformanceActualBar {
+  position: absolute;
+  inset: 0 auto 0 0;
+  background: linear-gradient(90deg, rgba(248, 190, 45, 0.92), rgba(255, 166, 43, 0.92));
+  border-radius: 999px;
 }
 
-.emptyState {
-  border: 1px dashed rgba(108, 133, 177, 0.45);
-  border-radius: 0.65rem;
-  background: rgba(8, 14, 30, 0.65);
-  padding: 0.75rem;
-  font-size: 0.76rem;
-  color: var(--text-muted);
-  text-align: center;
+.rolePerformanceAverageBar {
+  position: absolute;
+  inset: 0 auto 0 0;
+  background: rgba(91, 173, 178, 0.28);
+  border-right: 1px solid rgba(28, 47, 61, 0.22);
+  border-radius: 999px;
 }
 
-.cardButton {
-  appearance: none;
-  border: 1px solid var(--border-weak);
-  border-left-width: 0.34rem;
-  border-radius: 0.65rem;
-  background: var(--bg-card);
-  color: var(--text-primary);
-  padding: 0.55rem;
-  text-align: left;
-  cursor: pointer;
+.collisionRadarList {
+  list-style: none;
   display: flex;
   flex-direction: column;
-  gap: 0.42rem;
+  gap: 0.55rem;
+  padding: 0;
+  margin: 0;
 }
 
-.cardButton:hover {
-  border-color: #678ec5;
+.collisionRadarItem {
+  display: flex;
+  flex-direction: column;
+  gap: 0.35rem;
+  border-left: 2px solid var(--border-weak);
+  border-radius: 0.55rem;
+  background: rgba(239, 248, 255, 0.44);
+  padding: 0.28rem 0.45rem 0.28rem 0.65rem;
 }
 
-.cardSelected {
-  border-color: #8ed8ff;
-  box-shadow: 0 0 0 1px rgba(142, 216, 255, 0.35);
+.collisionRadarItem[data-risk='high'] {
+  border-left-color: rgba(180, 35, 24, 0.5);
+  background: rgba(255, 245, 244, 0.82);
 }
 
-.cardFocused {
-  box-shadow: 0 0 0 2px rgba(172, 223, 255, 0.5);
+.collisionRadarItem[data-risk='medium'] {
+  border-left-color: rgba(248, 190, 45, 0.5);
+  background: rgba(255, 250, 235, 0.88);
 }
 
-.cardPlanning {
-  border-left-color: var(--color-planning);
+.collisionRadarItem[data-risk='low'] {
+  border-left-color: rgba(91, 173, 178, 0.35);
+  background: rgba(239, 248, 255, 0.72);
 }
 
-.cardBuilding {
-  border-left-color: var(--color-building);
+.collisionRadarSummaryBadge {
+  white-space: nowrap;
 }
 
-.cardQa {
-  border-left-color: var(--color-qa);
+.collisionRadarRow {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  gap: 0.6rem;
 }
 
-.cardReadyToMerge {
-  border-left-color: var(--color-ready);
+.collisionRadarPath {
+  min-width: 0;
+  word-break: break-all;
+  font-family: 'IBM Plex Mono', 'Fira Code', monospace;
+  font-size: 0.75rem;
 }
 
-.cardBlocked {
-  border-left-color: var(--color-blocked);
+.collisionRadarCompeting {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.35rem;
 }
 
-.cardMerged {
-  border-left-color: var(--color-merged);
+.usageBurnSparkline {
+  width: 100%;
+  height: 2.75rem;
 }
 
-.cardActivePulse {
-  animation: cardPulse 1.6s ease-in-out infinite;
+.usageBurnActual {
+  stroke: rgba(91, 173, 178, 0.92);
+  stroke-width: 2;
 }
 
-@keyframes cardPulse {
-  0% {
-    box-shadow: inset 0 0 0 0 rgba(121, 204, 255, 0.1);
-  }
-  50% {
-    box-shadow: inset 0 0 0 5px rgba(121, 204, 255, 0.22);
-  }
-  100% {
-    box-shadow: inset 0 0 0 0 rgba(121, 204, 255, 0.1);
-  }
+.usageBurnProjected {
+  stroke: rgba(248, 190, 45, 0.95);
+  stroke-width: 2;
+  stroke-dasharray: 4 3;
 }
 
-.cardHeadline {
-  display: flex;
-  justify-content: space-between;
-  gap: 0.35rem;
-  align-items: flex-start;
+.usageBurnOutput {
+  margin: 0;
+  border-radius: 0.58rem;
+  background: rgba(239, 248, 255, 0.82);
+  border: 1px solid var(--border-weak);
+  padding: 0.6rem;
+  overflow-x: auto;
+  white-space: pre-wrap;
+  font-family: 'IBM Plex Mono', 'Fira Code', monospace;
+  font-size: 0.73rem;
 }
 
-.cardFeatureId {
-  font-weight: 600;
-  font-size: 0.78rem;
-  letter-spacing: 0.02em;
-  word-break: break-word;
+.liveConsoleOutput {
+  max-height: 28rem;
+  overflow-y: auto;
+  scroll-behavior: smooth;
 }
 
-.cardMeta {
+.transcriptTurnList {
   display: flex;
-  align-items: center;
-  gap: 0.35rem;
-  flex-wrap: wrap;
-  color: var(--text-muted);
-  font-size: 0.69rem;
+  flex-direction: column;
+  gap: 0.65rem;
 }
 
-.activityDot {
-  width: 0.52rem;
-  height: 0.52rem;
-  border-radius: 999px;
+.transcriptTurn {
+  border-left-width: 0.28rem;
 }
 
-.activityDotActive {
-  background: #2fd099;
+.transcriptTurnHeader {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  gap: 0.75rem;
 }
 
-.activityDotIdle {
-  background: #f2b85d;
+.transcriptText {
+  margin: 0;
+  white-space: pre-wrap;
+  line-height: 1.45;
 }
 
-.activityDotWaitingInput {
-  background: #61baf0;
+.prioritizedQueues {
+  display: grid;
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+  gap: 0.65rem;
 }
 
-.activityDotBlocked {
-  background: #e25965;
+.queueModule {
+  border: 1px solid var(--border-weak);
+  border-radius: 0.72rem;
+  background: rgba(255, 255, 255, 0.88);
+  padding: 0.7rem;
+  display: flex;
+  flex-direction: column;
+  gap: 0.45rem;
+  box-shadow: var(--shadow-soft);
 }
 
-.activityDotExited {
-  background: #808ea5;
+.queueItem {
+  display: flex;
+  justify-content: space-between;
+  gap: 0.5rem;
+  border: 1px solid var(--border-weak);
+  border-radius: 0.55rem;
+  background: rgba(239, 248, 255, 0.7);
+  color: var(--text-primary);
+  padding: 0.45rem 0.55rem;
+  text-decoration: none;
 }
 
-.activityDotUnknown {
-  background: #546380;
+.launchDraftList {
+  display: flex;
+  flex-direction: column;
+  gap: 0.85rem;
 }
 
-.badgeRow {
+.launchDraftCard {
+  border: 1px solid var(--border-weak);
+  border-radius: 0.9rem;
+  background: rgba(255, 255, 255, 0.95);
+  padding: 0.95rem;
+  box-shadow: var(--shadow-soft);
   display: flex;
-  flex-wrap: wrap;
-  gap: 0.28rem;
+  flex-direction: column;
+  gap: 0.8rem;
 }
 
-.badge {
+.launchDraftGrid {
+  display: grid;
+  grid-template-columns: minmax(0, 1.2fr) minmax(18rem, 1fr);
+  gap: 0.8rem;
+}
+
+.launchPreview {
   border: 1px solid var(--border-weak);
-  border-radius: 999px;
-  background: rgba(11, 20, 43, 0.9);
-  color: var(--text-muted);
-  font-size: 0.64rem;
-  padding: 0.1rem 0.38rem;
-  text-transform: uppercase;
-  letter-spacing: 0.04em;
+  border-radius: 0.72rem;
+  background: rgba(239, 248, 255, 0.7);
+  padding: 0.8rem;
+  min-height: 14rem;
+  overflow: auto;
 }
 
-.badgePass {
-  border-color: rgba(39, 182, 117, 0.7);
-  color: #8af2bf;
+.launchPreview:not(.markdownPreview) h2,
+.launchPreview:not(.markdownPreview) h3,
+.launchPreview:not(.markdownPreview) h4 {
+  margin-bottom: 0.45rem;
 }
 
-.badgeFail {
-  border-color: rgba(235, 90, 108, 0.7);
-  color: #ffbac2;
+.launchPreview:not(.markdownPreview) p,
+.launchPreview:not(.markdownPreview) ul,
+.launchPreview:not(.markdownPreview) blockquote,
+.launchPreview:not(.markdownPreview) pre {
+  margin-bottom: 0.55rem;
 }
 
-.badgePending {
-  border-color: rgba(236, 196, 101, 0.65);
-  color: #ffe2a6;
+.launchPreview:not(.markdownPreview) blockquote {
+  border-left: 0.25rem solid rgba(91, 173, 178, 0.4);
+  padding-left: 0.55rem;
+  color: var(--text-muted);
+}
+
+.launchPreview:not(.markdownPreview) pre {
+  padding: 0.65rem;
+  border-radius: 0.55rem;
+  background: rgba(28, 47, 61, 0.94);
+  color: #f8fbfc;
+  overflow: auto;
+}
+
+.visuallyHidden {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
 }
 
-.badgeNeutral {
-  color: #b7c6da;
+.diagnosticsRail {
+  display: flex;
+  flex-direction: column;
+  gap: 0.7rem;
 }
 
-.detailPanel {
+.triageDrawer {
+  position: sticky;
+  top: 0.75rem;
+  width: 100%;
+  max-height: calc(100vh - 1.5rem);
+  overflow-y: auto;
   border: 1px solid var(--border-weak);
   border-radius: 0.9rem;
-  background: var(--bg-panel);
-  box-shadow: var(--shadow-soft);
+  background: rgba(255, 255, 255, 0.98);
+  box-shadow: 0 20px 50px rgba(28, 47, 61, 0.18);
   padding: 0.95rem;
   display: flex;
   flex-direction: column;
   gap: 0.8rem;
-  max-height: calc(100vh - 6rem);
-  overflow-y: auto;
-}
-
-.panelPlaceholder {
-  border: 1px dashed rgba(124, 153, 196, 0.45);
-  border-radius: 0.7rem;
-  padding: 1rem;
-  color: var(--text-muted);
-  text-align: center;
-  font-size: 0.85rem;
-}
-
-.panelHeader {
-  display: flex;
-  justify-content: space-between;
-  gap: 0.5rem;
-  align-items: flex-start;
-}
-
-.panelTitle {
-  font-size: 1.05rem;
-  font-weight: 700;
-  word-break: break-word;
 }
 
-.closeButton {
-  background: transparent;
-  color: var(--text-muted);
+.mergedArchive {
   border: 1px solid var(--border-weak);
-  border-radius: 0.45rem;
-  cursor: pointer;
-  font-size: 0.72rem;
-  padding: 0.2rem 0.45rem;
-}
-
-.metaText {
-  color: var(--text-muted);
-  font-size: 0.75rem;
+  border-radius: 0.72rem;
+  background: rgba(255, 255, 255, 0.88);
+  padding: 0.7rem;
+  box-shadow: var(--shadow-soft);
 }
 
-.inlinePulse {
-  display: inline-flex;
-  align-items: center;
-  gap: 0.3rem;
+.archiveList {
+  display: flex;
+  flex-direction: column;
+  gap: 0.35rem;
+  margin-top: 0.55rem;
 }
 
-.inlinePulse::before {
-  content: '';
-  width: 0.5rem;
-  height: 0.5rem;
-  border-radius: 999px;
-  background: #2fd099;
-  animation: dotPulse 1.4s ease-in-out infinite;
+.archiveItem {
+  display: flex;
+  justify-content: space-between;
+  gap: 0.5rem;
+  text-decoration: none;
+  color: var(--text-primary);
+  border-bottom: 1px solid rgba(28, 47, 61, 0.06);
+  padding-bottom: 0.35rem;
 }
 
-@keyframes dotPulse {
-  0% {
-    transform: scale(1);
-    opacity: 0.9;
-  }
-  50% {
-    transform: scale(1.35);
-    opacity: 0.4;
-  }
-  100% {
-    transform: scale(1);
-    opacity: 0.9;
-  }
+.advancedFilters {
+  border-top: 1px solid rgba(28, 47, 61, 0.06);
+  padding-top: 0.55rem;
 }
 
-.section {
-  border: 1px solid var(--border-weak);
-  border-radius: 0.72rem;
-  background: rgba(11, 19, 40, 0.86);
-  padding: 0.7rem;
+.advancedFilterGrid {
   display: flex;
   flex-direction: column;
-  gap: 0.45rem;
+  gap: 0.65rem;
+  margin-top: 0.45rem;
 }
 
 .sectionTitle {
   font-size: 0.75rem;
-  color: #cadcf5;
+  color: var(--text-muted);
   text-transform: uppercase;
   letter-spacing: 0.05em;
 }
 
 .sectionSummary {
   cursor: pointer;
-  color: #c9ddf9;
+  color: #4a9a9f;
   font-weight: 600;
 }
 
@@ -599,15 +1646,15 @@
 }
 
 .listRow:hover {
-  background: rgba(34, 53, 89, 0.45);
+  background: rgba(91, 173, 178, 0.08);
 }
 
 .listRowSelected {
-  background: rgba(20, 62, 88, 0.6);
+  background: rgba(239, 248, 255, 0.96);
 }
 
 .listRowFocused {
-  outline: 2px solid rgba(127, 198, 255, 0.7);
+  outline: 2px solid rgba(91, 173, 178, 0.35);
   outline-offset: -2px;
 }
 
@@ -638,7 +1685,7 @@
   min-width: 9.8rem;
   border: 1px solid var(--border-weak);
   border-radius: 0.55rem;
-  background: rgba(8, 16, 35, 0.97);
+  background: rgba(255, 255, 255, 0.98);
   box-shadow: var(--shadow-soft);
   padding: 0.2rem;
   display: flex;
@@ -662,7 +1709,7 @@
 .listActionMenuItem:hover,
 .listActionMenuItem:focus-visible {
   border-color: var(--border-strong);
-  background: rgba(27, 45, 81, 0.88);
+  background: rgba(91, 173, 178, 0.12);
   outline: none;
 }
 
@@ -675,7 +1722,7 @@
 
 .table th {
   color: var(--text-muted);
-  background: rgba(14, 24, 48, 0.9);
+  background: rgba(239, 248, 255, 0.9);
 }
 
 .planList,
@@ -694,7 +1741,7 @@
 .evidenceRow {
   border: 1px solid var(--border-weak);
   border-radius: 0.55rem;
-  background: rgba(10, 18, 38, 0.88);
+  background: rgba(255, 255, 255, 0.92);
   padding: 0.45rem;
 }
 
@@ -710,14 +1757,14 @@
 .planTreeBranch {
   border: 1px solid var(--border-weak);
   border-radius: 0.55rem;
-  background: rgba(10, 18, 38, 0.78);
+  background: rgba(239, 248, 255, 0.72);
   padding: 0.4rem;
 }
 
 .planTreeLeaf {
   border: 1px solid var(--border-weak);
   border-radius: 0.55rem;
-  background: rgba(10, 18, 38, 0.88);
+  background: rgba(255, 255, 255, 0.92);
   padding: 0.35rem 0.45rem;
   display: flex;
   align-items: center;
@@ -782,27 +1829,31 @@
 }
 
 .stepDone {
-  border-color: rgba(39, 182, 117, 0.7);
-  color: #8af2bf;
+  border-color: rgba(15, 118, 110, 0.22);
+  background: rgba(15, 118, 110, 0.08);
+  color: #0f766e;
 }
 
 .stepRunning {
-  border-color: rgba(110, 187, 247, 0.8);
-  color: #bde6ff;
+  border-color: rgba(40, 178, 255, 0.22);
+  background: rgba(40, 178, 255, 0.08);
+  color: #0b73ac;
 }
 
 .stepBlocked {
-  border-color: rgba(235, 90, 108, 0.7);
-  color: #ffbac2;
+  border-color: rgba(180, 35, 24, 0.22);
+  background: rgba(180, 35, 24, 0.08);
+  color: #b42318;
 }
 
 .stepReady {
-  border-color: rgba(236, 196, 101, 0.7);
-  color: #ffe2a6;
+  border-color: rgba(248, 190, 45, 0.32);
+  background: rgba(248, 190, 45, 0.14);
+  color: #926600;
 }
 
 .stepUnknown {
-  color: #b7c6da;
+  color: var(--text-muted);
 }
 
 .diffContainer,
@@ -810,7 +1861,7 @@
 .evidenceContent {
   border: 1px solid var(--border-weak);
   border-radius: 0.58rem;
-  background: rgba(6, 11, 25, 0.9);
+  background: rgba(255, 255, 255, 0.95);
 }
 
 .diffContainer {
@@ -823,15 +1874,15 @@
   position: sticky;
   top: 0;
   z-index: 1;
-  background: rgba(19, 31, 59, 0.95);
+  background: rgba(239, 248, 255, 0.96);
   border-bottom: 1px solid var(--border-weak);
   padding: 0.4rem 0.6rem;
   font-weight: 600;
 }
 
 .diffHunkHeader {
-  color: #8cbce5;
-  background: rgba(8, 15, 32, 0.9);
+  color: #4a9a9f;
+  background: rgba(239, 242, 243, 0.9);
 }
 
 .diffLine {
@@ -840,7 +1891,7 @@
   align-items: center;
   column-gap: 0.4rem;
   padding: 0.08rem 0.35rem;
-  border-bottom: 1px solid rgba(28, 45, 81, 0.45);
+  border-bottom: 1px solid rgba(28, 47, 61, 0.08);
 }
 
 .diffLine:last-child {
@@ -848,7 +1899,7 @@
 }
 
 .diffNumber {
-  color: #7186a8;
+  color: rgba(89, 104, 115, 0.68);
   text-align: right;
   user-select: none;
 }
@@ -860,19 +1911,19 @@
 }
 
 .diffLineAdd {
-  background: rgba(17, 85, 58, 0.38);
+  background: rgba(15, 118, 110, 0.08);
 }
 
 .diffLineDel {
-  background: rgba(100, 30, 43, 0.42);
+  background: rgba(180, 35, 24, 0.08);
 }
 
 .diffLineMeta {
-  color: #8ca6ca;
+  color: var(--text-muted);
 }
 
 .diffLineContext {
-  color: #d9e9ff;
+  color: var(--text-primary);
 }
 
 .preContent,
@@ -895,36 +1946,39 @@
 .linkButton {
   border: 1px solid var(--border-weak);
   border-radius: 0.55rem;
-  background: rgba(20, 34, 63, 0.95);
-  color: var(--text-primary);
+  background: rgba(255, 255, 255, 0.94);
+  color: #4a9a9f;
   cursor: pointer;
   padding: 0.43rem 0.6rem;
   font-size: 0.75rem;
+  font-weight: 600;
   text-decoration: none;
   display: inline-flex;
   align-items: center;
   justify-content: center;
+  box-shadow: 0 6px 18px rgba(28, 47, 61, 0.06);
 }
 
 .button:hover,
 .linkButton:hover {
-  border-color: #86b5ed;
+  border-color: var(--border-strong);
+  background: rgba(91, 173, 178, 0.08);
 }
 
 .buttonDanger {
-  border-color: rgba(231, 94, 111, 0.75);
-  background: rgba(85, 24, 37, 0.9);
-  color: #ffd6dc;
+  border-color: rgba(180, 35, 24, 0.18);
+  background: rgba(255, 245, 244, 0.96);
+  color: #b42318;
 }
 
 .buttonSuccess {
-  border-color: rgba(46, 178, 122, 0.75);
-  background: rgba(18, 75, 52, 0.9);
-  color: #d4ffe8;
+  border-color: rgba(91, 173, 178, 0.24);
+  background: #5badb2;
+  color: #ffffff;
 }
 
 .buttonGhost {
-  background: rgba(8, 15, 33, 0.88);
+  background: rgba(239, 248, 255, 0.72);
 }
 
 .button:disabled {
@@ -933,10 +1987,10 @@
 }
 
 .banner {
-  border: 1px solid rgba(242, 190, 89, 0.7);
+  border: 1px solid rgba(248, 190, 45, 0.32);
   border-radius: 0.62rem;
-  background: rgba(71, 52, 16, 0.84);
-  color: #ffe4a4;
+  background: rgba(248, 190, 45, 0.14);
+  color: var(--text-on-accent);
   padding: 0.5rem 0.62rem;
   font-size: 0.74rem;
 }
@@ -945,7 +1999,7 @@
   position: sticky;
   bottom: 0;
   z-index: 4;
-  border-color: rgba(134, 181, 237, 0.7);
+  border-color: var(--border-strong);
 }
 
 .reviewWorkspace {
@@ -978,9 +2032,11 @@
 }
 
 .reviewTitleWrap {
-  display: inline-flex;
-  align-items: center;
-  gap: 0.45rem;
+  width: 100%;
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 0.65rem;
   flex-wrap: wrap;
 }
 
@@ -991,23 +2047,23 @@
   font-size: 0.62rem;
   letter-spacing: 0.04em;
   text-transform: uppercase;
-  color: #d8e9ff;
+  color: var(--text-primary);
 }
 
 .trustBadgeStructured {
-  border-color: rgba(85, 154, 242, 0.7);
-  background: rgba(17, 43, 80, 0.8);
+  border-color: rgba(40, 178, 255, 0.2);
+  background: rgba(40, 178, 255, 0.08);
 }
 
 .trustBadgeDerived {
-  border-color: rgba(137, 158, 189, 0.65);
-  background: rgba(21, 31, 50, 0.8);
+  border-color: rgba(89, 104, 115, 0.16);
+  background: rgba(239, 242, 243, 0.92);
 }
 
 .trustBadgeRaw {
-  border-color: rgba(237, 187, 93, 0.8);
-  background: rgba(73, 52, 16, 0.84);
-  color: #ffe7b3;
+  border-color: rgba(248, 190, 45, 0.32);
+  background: rgba(248, 190, 45, 0.14);
+  color: var(--text-on-accent);
 }
 
 .trustLabelRow {
@@ -1027,7 +2083,7 @@
 .reviewDiffRegion {
   border: 1px solid var(--border-weak);
   border-radius: 0.62rem;
-  background: rgba(8, 14, 30, 0.95);
+  background: rgba(255, 255, 255, 0.95);
   max-height: 28rem;
   overflow: auto;
   padding: 0.25rem;
@@ -1039,25 +2095,25 @@
 
 .reviewDiffHtml :global(.d2h-file-header),
 .reviewDiffHtml :global(.d2h-file-list-title) {
-  background: rgba(19, 31, 59, 0.95);
-  color: #dcecff;
+  background: rgba(239, 248, 255, 0.96);
+  color: var(--text-primary);
 }
 
 .reviewDiffHtml :global(.d2h-file-wrapper),
 .reviewDiffHtml :global(.d2h-file-list-wrapper),
 .reviewDiffHtml :global(.d2h-diff-table) {
-  background: rgba(9, 16, 34, 0.92);
-  color: #dcecff;
+  background: rgba(255, 255, 255, 0.96);
+  color: var(--text-primary);
 }
 
 .reviewDiffHtml :global(.d2h-code-line del),
 .reviewDiffHtml :global(.d2h-code-side-line del) {
-  background: rgba(151, 38, 54, 0.4);
+  background: rgba(180, 35, 24, 0.08);
 }
 
 .reviewDiffHtml :global(.d2h-code-line ins),
 .reviewDiffHtml :global(.d2h-code-side-line ins) {
-  background: rgba(31, 121, 79, 0.42);
+  background: rgba(15, 118, 110, 0.08);
 }
 
 .reviewMonacoWrap {
@@ -1078,7 +2134,7 @@
 .reviewLogEntry {
   border: 1px solid var(--border-weak);
   border-radius: 0.52rem;
-  background: rgba(10, 18, 38, 0.9);
+  background: rgba(255, 255, 255, 0.92);
   padding: 0.38rem;
   display: grid;
   grid-template-columns: auto auto auto 1fr;
@@ -1095,7 +2151,7 @@
 .reviewRoleBadge {
   border: 1px solid var(--border-strong);
   border-radius: 999px;
-  background: rgba(14, 30, 57, 0.9);
+  background: rgba(239, 248, 255, 0.92);
   padding: 0.02rem 0.35rem;
   text-transform: uppercase;
   font-size: 0.64rem;
@@ -1112,7 +2168,7 @@
 .reviewTranscriptEntry {
   border: 1px solid var(--border-weak);
   border-radius: 0.52rem;
-  background: rgba(10, 18, 38, 0.9);
+  background: rgba(255, 255, 255, 0.92);
   padding: 0.4rem;
   font-size: 0.72rem;
 }
@@ -1128,7 +2184,7 @@
 .reviewTimelineEntry {
   border: 1px solid var(--border-weak);
   border-radius: 0.52rem;
-  background: rgba(10, 18, 38, 0.9);
+  background: rgba(255, 255, 255, 0.92);
   padding: 0.35rem 0.45rem;
   font-size: 0.72rem;
   display: flex;
@@ -1138,8 +2194,8 @@
 }
 
 .reviewSessionRowActive {
-  border-color: rgba(113, 206, 157, 0.8);
-  background: rgba(15, 35, 34, 0.92);
+  border-color: rgba(15, 118, 110, 0.24);
+  background: rgba(15, 118, 110, 0.08);
 }
 
 .reviewSessionIdentity {
@@ -1155,17 +2211,17 @@
   padding: 0.06rem 0.35rem;
   font-size: 0.63rem;
   text-transform: uppercase;
-  color: #d6e9ff;
+  color: var(--text-primary);
 }
 
 .reviewSessionMarker {
-  border: 1px solid rgba(84, 193, 140, 0.78);
+  border: 1px solid rgba(15, 118, 110, 0.24);
   border-radius: 999px;
   padding: 0.06rem 0.35rem;
   font-size: 0.63rem;
   text-transform: uppercase;
-  color: #b8ffd8;
-  background: rgba(17, 74, 52, 0.8);
+  color: #0f766e;
+  background: rgba(15, 118, 110, 0.08);
 }
 
 .reviewSessionValue {
@@ -1181,7 +2237,7 @@
   position: fixed;
   inset: 0;
   z-index: 48;
-  background: rgba(4, 10, 22, 0.92);
+  background: rgba(28, 47, 61, 0.18);
   padding: 0.65rem;
 }
 
@@ -1189,7 +2245,7 @@
   height: 100%;
   border: 1px solid var(--border-strong);
   border-radius: 0.7rem;
-  background: rgba(6, 13, 27, 0.98);
+  background: rgba(255, 255, 255, 0.98);
   padding: 0.65rem;
   display: flex;
   flex-direction: column;
@@ -1202,6 +2258,124 @@
   flex-wrap: wrap;
 }
 
+.runtimeConsoleSection {
+  border-color: var(--border-accent);
+  background: linear-gradient(135deg, rgba(239, 248, 255, 0.96), rgba(255, 255, 255, 0.95));
+}
+
+.runtimeInspectorHeader {
+  display: grid;
+  gap: 0.75rem;
+}
+
+.runtimeInspectorSummaryGrid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
+  gap: 0.75rem;
+}
+
+.runtimeEntryCard {
+  display: grid;
+  gap: 0.7rem;
+  padding: 0.75rem;
+}
+
+.runtimeEntryHeader {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 0.75rem;
+  flex-wrap: wrap;
+}
+
+.runtimeEntryTitle {
+  display: grid;
+  gap: 0.25rem;
+  min-width: 0;
+}
+
+.runtimeEntryMetaGrid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr));
+  gap: 0.5rem;
+}
+
+.runtimeEntryMetaItem {
+  border: 1px solid var(--border-weak);
+  border-radius: 0.6rem;
+  background: rgba(248, 250, 252, 0.92);
+  padding: 0.55rem 0.6rem;
+  min-width: 0;
+}
+
+.runtimeEntryMetaItem strong {
+  display: block;
+  margin-top: 0.2rem;
+  font-size: 0.86rem;
+  line-height: 1.35;
+  overflow-wrap: anywhere;
+}
+
+.logViewerToolbar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.75rem;
+  flex-wrap: wrap;
+}
+
+.logModeSwitch {
+  display: inline-flex;
+  gap: 0.3rem;
+  flex-wrap: wrap;
+}
+
+.logPrettyList {
+  display: flex;
+  flex-direction: column;
+  gap: 0.55rem;
+}
+
+.logPrettyEntry {
+  border: 1px solid var(--border-weak);
+  border-radius: 0.75rem;
+  background: rgba(248, 250, 252, 0.86);
+  padding: 0.7rem;
+  display: grid;
+  gap: 0.55rem;
+}
+
+.logPrettyHeader {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 0.65rem;
+  flex-wrap: wrap;
+}
+
+.logPrettyTitle {
+  display: grid;
+  gap: 0.22rem;
+  min-width: 0;
+}
+
+.logPrettyBody {
+  margin: 0;
+  font-size: 0.84rem;
+  line-height: 1.55;
+  color: var(--text-primary);
+  white-space: pre-wrap;
+  overflow-wrap: anywhere;
+}
+
+.historyArchivePager {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.65rem;
+  flex-wrap: wrap;
+}
+
 .runtimeInspectorTabs {
   display: inline-flex;
   flex-wrap: wrap;
@@ -1212,7 +2386,7 @@
 .runtimeInspectorTab {
   border: 1px solid var(--border-strong);
   border-radius: 0.5rem;
-  background: rgba(10, 18, 38, 0.92);
+  background: rgba(255, 255, 255, 0.92);
   color: var(--text-muted);
   font-size: 0.7rem;
   padding: 0.2rem 0.5rem;
@@ -1220,9 +2394,9 @@
 }
 
 .runtimeInspectorTabActive {
-  border-color: rgba(117, 169, 255, 0.78);
-  color: #d8e8ff;
-  background: rgba(23, 39, 74, 0.92);
+  border-color: rgba(91, 173, 178, 0.38);
+  color: var(--text-primary);
+  background: rgba(239, 248, 255, 0.96);
 }
 
 .inspectorPanel {
@@ -1242,9 +2416,9 @@
 }
 
 .collisionPanel {
-  border: 1px solid rgba(245, 123, 136, 0.55);
+  border: 1px solid rgba(180, 35, 24, 0.18);
   border-radius: 0.84rem;
-  background: rgba(56, 17, 28, 0.86);
+  background: rgba(255, 245, 244, 0.92);
   padding: 0.8rem;
   margin-top: 0.8rem;
 }
@@ -1264,9 +2438,9 @@
 }
 
 .collisionItem {
-  border: 1px solid rgba(220, 104, 122, 0.45);
+  border: 1px solid rgba(180, 35, 24, 0.16);
   border-radius: 0.62rem;
-  background: rgba(30, 10, 16, 0.75);
+  background: rgba(255, 255, 255, 0.8);
   padding: 0.5rem;
   display: flex;
   flex-direction: column;
@@ -1297,7 +2471,7 @@
   width: 100%;
   height: 0.45rem;
   border-radius: 999px;
-  background: rgba(31, 47, 76, 0.95);
+  background: rgba(239, 242, 243, 0.96);
   overflow: hidden;
 }
 
@@ -1306,15 +2480,15 @@
 }
 
 .scoreGood {
-  background: linear-gradient(90deg, #21a674, #7ae0b2);
+  background: linear-gradient(90deg, #0f766e, #5badb2);
 }
 
 .scoreWarn {
-  background: linear-gradient(90deg, #b08729, #f4cf6d);
+  background: linear-gradient(90deg, #d48b00, #f8be2d);
 }
 
 .scoreBad {
-  background: linear-gradient(90deg, #a53a4a, #f27b89);
+  background: linear-gradient(90deg, #b42318, #ff8c7c);
 }
 
 .toastStack {
@@ -1331,7 +2505,7 @@
   min-width: 15rem;
   max-width: 24rem;
   border-radius: 0.65rem;
-  border: 1px solid rgba(91, 122, 165, 0.7);
+  border: 1px solid var(--border-weak);
   box-shadow: var(--shadow-soft);
   padding: 0.55rem 0.65rem;
   font-size: 0.75rem;
@@ -1342,25 +2516,25 @@
 }
 
 .toastSuccess {
-  background: rgba(22, 84, 57, 0.95);
-  border-color: rgba(61, 190, 129, 0.8);
+  background: rgba(235, 248, 246, 0.98);
+  border-color: rgba(15, 118, 110, 0.2);
 }
 
 .toastError {
-  background: rgba(98, 29, 42, 0.95);
-  border-color: rgba(232, 103, 122, 0.8);
+  background: rgba(255, 245, 244, 0.98);
+  border-color: rgba(180, 35, 24, 0.18);
 }
 
 .toastInfo {
-  background: rgba(25, 56, 101, 0.95);
-  border-color: rgba(106, 172, 245, 0.8);
+  background: rgba(239, 248, 255, 0.98);
+  border-color: rgba(40, 178, 255, 0.18);
 }
 
 .toastDismiss {
   background: transparent;
-  border: 1px solid rgba(194, 216, 245, 0.45);
+  border: 1px solid var(--border-weak);
   border-radius: 0.42rem;
-  color: #ecf5ff;
+  color: var(--text-primary);
   cursor: pointer;
   padding: 0.06rem 0.35rem;
   font-size: 0.66rem;
@@ -1370,7 +2544,7 @@
   position: fixed;
   inset: 0;
   z-index: 80;
-  background: rgba(3, 7, 17, 0.72);
+  background: rgba(28, 47, 61, 0.18);
   display: grid;
   place-items: center;
   padding: 1rem;
@@ -1380,7 +2554,7 @@
   width: min(30rem, 100%);
   border: 1px solid var(--border-strong);
   border-radius: 0.8rem;
-  background: rgba(12, 20, 39, 0.98);
+  background: rgba(255, 255, 255, 0.98);
   box-shadow: var(--shadow-soft);
   padding: 0.9rem;
   display: flex;
@@ -1409,6 +2583,17 @@
     grid-template-columns: 1fr;
   }
 
+  .commandCenterLayout,
+  .prioritizedQueues,
+  .attentionStrip,
+  .launchDraftGrid {
+    grid-template-columns: 1fr;
+  }
+
+  .rolePerformanceGrid {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+
   .reviewWorkspace {
     grid-template-columns: 1fr;
   }
@@ -1431,6 +2616,10 @@
     grid-template-columns: 1fr;
   }
 
+  .prioritizedQueues {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+
   .runtimeInspectorCompareGrid {
     grid-template-columns: 1fr;
   }
@@ -1440,12 +2629,31 @@
   }
 }
 
+@media (max-width: 900px) {
+  .focusShell {
+    grid-template-columns: 1fr;
+  }
+
+  .focusSidebar {
+    position: static;
+  }
+}
+
 @media (max-width: 680px) {
   .topBar {
     flex-direction: column;
     align-items: flex-start;
   }
 
+  .commandCenterHeader {
+    flex-direction: column;
+  }
+
+  .commandCenterActions {
+    width: 100%;
+    align-items: flex-start;
+  }
+
   .metaControls {
     justify-content: flex-start;
   }
@@ -1455,10 +2663,20 @@
   }
 
   .summaryBar,
-  .kanbanGrid {
+  .kanbanGrid,
+  .rolePerformanceGrid {
+    grid-template-columns: 1fr;
+  }
+
+  .prioritizedQueues {
     grid-template-columns: 1fr;
   }
 
+  .triageDrawer {
+    position: static;
+    max-height: none;
+  }
+
   .actionGrid {
     grid-template-columns: 1fr;
   }
@@ -1490,6 +2708,16 @@
   }
 }
 
+@media (max-width: 600px) {
+  .focusHeroMetaGrid {
+    grid-template-columns: 1fr;
+  }
+
+  .focusTabBar {
+    margin-inline: -0.1rem;
+  }
+}
+
 @media (max-width: 420px) {
   .dashboardRoot {
     padding: 0.7rem;
@@ -1500,6 +2728,11 @@
     gap: 0.45rem;
   }
 
+  .projectPicker {
+    width: 100%;
+    justify-content: flex-start;
+  }
+
   .inlineActions {
     width: 100%;
     flex-wrap: wrap;
@@ -1576,4 +2809,54 @@
     flex-direction: column-reverse;
     align-items: stretch;
   }
+
+  .footerLinks {
+    justify-content: stretch;
+    padding: 0;
+  }
+}
+
+@keyframes spinSmall {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+.spinnerSmall {
+  display: inline-block;
+  width: 0.85rem;
+  height: 0.85rem;
+  border: 2px solid var(--border, #d1d5db);
+  border-top-color: var(--text-link, #3b82f6);
+  border-radius: 50%;
+  animation: spinSmall 0.8s linear infinite;
+}
+
+.dropZoneOverlay {
+  position: fixed;
+  inset: 0;
+  z-index: 100;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  background: rgba(45, 106, 79, 0.1);
+  border: 3px dashed var(--accent-green, #2d6a4f);
+  border-radius: 1rem;
+  margin: 0.75rem;
+  pointer-events: none;
+  backdrop-filter: blur(2px);
+}
+
+.dropZoneOverlay h2 {
+  font-size: 1.35rem;
+  font-weight: 600;
+  color: var(--accent-green, #4ade80);
+  margin: 0;
+}
+
+.dropZoneOverlay p {
+  font-size: 0.9rem;
+  color: var(--text-muted, #888);
+  margin: 0.5rem 0 0;
 }