enigma-memory 0.1.18 → 0.1.22

package/apps/desktop/src/styles.css

@@ -1,386 +1,3098 @@
+/* =====================================================================
+   Enigma Desktop — Apple-grade Sovereign AI Memory Terminal.
+   Strictly aligned with https://enigmamemory.com/
+   Satoshi display + Geist body + Geist Mono labels + Enigma Solar Orange.
+   ===================================================================== */
 :root {
   color-scheme: dark;
-  --bg: #090b10;
-  --panel: #11151d;
-  --panel-strong: #171d28;
-  --line: #273040;
-  --text: #edf2ff;
-  --muted: #9aa8bf;
-  --soft: #c7d2e4;
-  --accent: #8bd3ff;
-  --accent-strong: #55b7ff;
-  --good: #7ee2a8;
-  --bad: #ff8f8f;
-  --warn: #ffd27a;
-  --shadow: 0 24px 70px rgba(0, 0, 0, 0.34);
-  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+  --disp: "Satoshi", "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+  --body: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+  --mono: "Geist Mono", ui-monospace, "SF Mono", Consolas, monospace;
+
+  /* Live Enigma Brand Colors */
+  --bg: #000000;
+  --window-bg: #070707;
+  --panel-bg: rgba(14, 13, 11, 0.78);
+  --panel-card: rgba(18, 16, 14, 0.88);
+  --ink: #f4f2ef;
+  --dim: #b9b6b1;
+  --mute: #7d7a76;
+  --line: rgba(255, 255, 255, 0.14);
+  --line-strong: rgba(255, 255, 255, 0.24);
+
+  /* Enigma Solar Accents */
+  --acc: #ff7a1a;
+  --acc2: #ffb066;
+  --acc-soft: rgba(255, 122, 26, 0.14);
+  --acc-border: rgba(255, 122, 26, 0.38);
+
+  /* Status Accents */
+  --green: #4ade80;
+  --green-soft: rgba(74, 222, 128, 0.12);
+  --red: #f87171;
+  --red-soft: rgba(248, 113, 113, 0.12);
+
+  /* Layout & Physics */
+  --radius-lg: 20px;
+  --radius-md: 14px;
+  --radius-sm: 10px;
+  --radius-pill: 100px;
+  --e1: cubic-bezier(0.22, 1, 0.36, 1);
+  --e2: cubic-bezier(0.65, 0, 0.35, 1);
+
+  --shadow-lg: 0 24px 64px rgba(0, 0, 0, 0.6);
+  --shadow-sm: 0 4px 20px rgba(0, 0, 0, 0.35);
+  --glass-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.08);
+}
+
+* {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+html, body {
+  width: 100%;
+  height: 100%;
+  background: var(--bg);
+  color: var(--ink);
+  font-family: var(--body);
+  line-height: 1.5;
+  overflow: hidden;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+::selection {
+  background: var(--acc);
+  color: #0a0400;
+}
+
+/* Filmic Background Vignette & Ambient Radial Glow */
+body::before {
+  content: '';
+  position: fixed;
+  inset: 0;
+  background:
+    radial-gradient(130% 100% at 50% 42%, transparent 38%, rgba(0, 0, 0, 0.5) 78%, rgba(0, 0, 0, 0.86) 100%),
+    radial-gradient(circle at 85% 15%, rgba(255, 122, 26, 0.10), transparent 32rem),
+    radial-gradient(circle at 15% 35%, rgba(255, 176, 102, 0.06), transparent 28rem);
+  pointer-events: none;
+  z-index: 0;
+}
+
+/* Subtle Architectural Grid Lines */
+body::after {
+  content: '';
+  position: fixed;
+  inset: 0;
+  pointer-events: none;
+  background-image:
+    linear-gradient(rgba(255, 255, 255, 0.02) 1px, transparent 1px),
+    linear-gradient(90deg, rgba(255, 255, 255, 0.02) 1px, transparent 1px);
+  background-size: 56px 56px;
+  mask-image: linear-gradient(to bottom, rgba(0,0,0,0.8), transparent 88%);
+  z-index: 0;
+}
+
+.terminal-window {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: 100vh;
+  background: rgba(8, 7, 6, 0.92);
+  backdrop-filter: blur(24px);
+  -webkit-backdrop-filter: blur(24px);
+  position: relative;
+  z-index: 1;
+}
+
+/* Luxury Window Titlebar */
+.window-titlebar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 12px 24px;
+  background: rgba(10, 8, 6, 0.85);
+  border-bottom: 1px solid var(--line);
+  box-shadow: var(--glass-highlight);
+  user-select: none;
+  gap: 16px;
+  flex-shrink: 0;
+}
+
+.window-left-brand {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+}
+
+.window-controls {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.control-btn {
+  width: 12px;
+  height: 12px;
+  border-radius: 50%;
+  border: none;
+  cursor: pointer;
+  opacity: 0.85;
+  transition: opacity 0.15s ease, transform 0.15s ease;
+}
+
+.control-btn:hover {
+  opacity: 1;
+  transform: scale(1.1);
+}
+
+.control-btn.close { background: #ff5f56; }
+.control-btn.minimize { background: #ffbd2e; }
+.control-btn.maximize { background: #27c93f; }
+
+.brand-emblem {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  text-decoration: none;
+}
+
+.brand-mark svg {
+  fill: none;
+  stroke: var(--acc);
+  stroke-width: 1.5;
+  stroke-linejoin: round;
+  display: block;
+}
+
+.brand-title {
+  font-family: var(--disp);
+  font-size: 16px;
+  font-weight: 800;
+  letter-spacing: 0.12em;
+  text-transform: uppercase;
+  color: var(--ink);
+}
+
+.version-pill {
+  font-family: var(--mono);
+  font-size: 10.5px;
+  font-weight: 600;
+  letter-spacing: 0.05em;
+  padding: 2px 8px;
+  border-radius: var(--radius-pill);
+  background: var(--acc-soft);
+  color: var(--acc);
+  border: 1px solid var(--acc-border);
+}
+
+/* Center Segmented Pill Selector */
+.desktop-nav-tabs {
+  display: flex;
+  align-items: center;
+  background: rgba(18, 16, 14, 0.8);
+  border: 1px solid var(--line);
+  padding: 4px;
+  border-radius: var(--radius-pill);
+  box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.4);
+  gap: 4px;
+}
+
+.nav-tab-btn {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 7px 18px;
+  background: transparent;
+  border: 1px solid transparent;
+  border-radius: var(--radius-pill);
+  color: var(--dim);
+  font-family: var(--mono);
+  font-size: 12px;
+  font-weight: 500;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+  cursor: pointer;
+  transition: all 0.25s var(--e1);
+  white-space: nowrap;
+}
+
+.nav-tab-btn:hover {
+  color: #ffffff;
+  background: rgba(255, 255, 255, 0.06);
+}
+
+.nav-tab-btn.active {
+  background: #ffffff;
+  color: #0a0400;
+  border-color: #ffffff;
+  font-weight: 600;
+  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4);
+}
+
+.nav-tab-dot {
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background: var(--mute);
+  transition: all 0.25s ease;
+}
+
+.nav-tab-btn.active .nav-tab-dot {
+  background: var(--acc);
+  box-shadow: 0 0 6px var(--acc);
+}
+
+/* Right Actions */
+.titlebar-right {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.status-pill {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 5px 12px;
+  background: var(--green-soft);
+  border: 1px solid rgba(74, 222, 128, 0.3);
+  border-radius: var(--radius-pill);
+  font-family: var(--mono);
+  font-size: 11px;
+  font-weight: 500;
+  color: var(--green);
+}
+
+.status-dot {
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background: var(--green);
+  box-shadow: 0 0 8px var(--green);
+}
+
+.phantom-btn {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 7px 16px;
+  background: var(--acc);
+  border: 1px solid var(--acc);
+  border-radius: var(--radius-pill);
+  color: #0a0400;
+  font-family: var(--mono);
+  font-size: 11.5px;
+  font-weight: 600;
+  letter-spacing: 0.04em;
+  cursor: pointer;
+  transition: all 0.25s var(--e1);
+  box-shadow: 0 4px 14px rgba(255, 122, 26, 0.25);
+}
+
+.phantom-btn:hover {
+  background: var(--acc2);
+  transform: translateY(-1px);
+  box-shadow: 0 6px 18px rgba(255, 122, 26, 0.4);
+}
+
+.phantom-btn.connected {
+  background: var(--green-soft);
+  border-color: rgba(74, 222, 128, 0.4);
+  color: var(--green);
+  box-shadow: none;
+}
+
+.header-action-btn {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 6px 14px;
+  background: rgba(255, 255, 255, 0.04);
+  border: 1px solid var(--line);
+  border-radius: var(--radius-pill);
+  color: var(--dim);
+  font-family: var(--mono);
+  font-size: 11px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all 0.25s var(--e1);
+}
+
+.header-action-btn:hover {
+  background: rgba(255, 255, 255, 0.08);
+  border-color: #ffffff;
+  color: #ffffff;
+}
+
+/* Tab Panels Container */
+.tab-content-panel {
+  display: none !important;
+  flex: 1;
+  flex-direction: column;
+  overflow-y: auto;
+  padding: 28px 36px 36px;
+  position: relative;
+}
+
+.tab-content-panel.active-panel {
+  display: flex !important;
+}
+
+/* Clean Apple-Style Container */
+.app-screen-container {
+  display: flex;
+  flex-direction: column;
+  gap: 22px;
+  max-width: 1240px;
+  width: 100%;
+  margin: 0 auto;
+}
+
+/* Screen Hero Section */
+.screen-hero {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-end;
+  padding: 4px 0 16px;
+  border-bottom: 1px solid var(--line);
+}
+
+.screen-hero-title {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.screen-eyebrow {
+  font-family: var(--mono);
+  font-size: 11.5px;
+  font-weight: 600;
+  letter-spacing: 0.28em;
+  text-transform: uppercase;
+  color: var(--acc);
+}
+
+.screen-heading {
+  font-family: var(--disp);
+  font-size: 28px;
+  font-weight: 900;
+  letter-spacing: -0.015em;
+  text-transform: uppercase;
+  color: var(--ink);
+}
+
+.screen-desc {
+  font-size: 14px;
+  color: var(--dim);
+  max-width: 65ch;
+  line-height: 1.55;
+  margin-top: 2px;
+}
+
+.screen-hero-badge {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 6px 14px;
+  background: rgba(255, 255, 255, 0.05);
+  border: 1px solid var(--line);
+  border-radius: var(--radius-pill);
+  font-family: var(--mono);
+  font-size: 11.5px;
+  color: var(--dim);
+}
+
+/* Bento Grid */
+.bento-grid {
+  display: grid;
+  grid-template-columns: repeat(12, 1fr);
+  gap: 18px;
+}
+
+.bento-card {
+  background: var(--panel-card);
+  border: 1px solid var(--line);
+  border-radius: var(--radius-lg);
+  padding: 24px;
+  box-shadow: var(--shadow-sm), var(--glass-highlight);
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  position: relative;
+  transition: border-color 0.25s var(--e1), transform 0.25s var(--e1);
+}
+
+.bento-card:hover {
+  border-color: rgba(255, 122, 26, 0.45);
+}
+
+.bento-card-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.bento-card-title {
+  font-family: var(--disp);
+  font-size: 14px;
+  font-weight: 700;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+  color: var(--ink);
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.bento-card-subtitle {
+  font-size: 12.5px;
+  color: var(--mute);
+}
+
+/* Metric Row (3 across) */
+.metric-row {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 16px;
+}
+
+.metric-card {
+  background: var(--panel-bg);
+  border: 1px solid var(--line);
+  border-radius: var(--radius-md);
+  padding: 18px 22px;
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  box-shadow: var(--glass-highlight);
+}
+
+.metric-label {
+  font-family: var(--mono);
+  font-size: 11px;
+  font-weight: 600;
+  letter-spacing: 0.16em;
+  text-transform: uppercase;
+  color: var(--mute);
+}
+
+.metric-value {
+  font-family: var(--disp);
+  font-size: 26px;
+  font-weight: 900;
+  color: #ffffff;
+  letter-spacing: -0.02em;
+}
+
+.metric-sub {
+  font-family: var(--mono);
+  font-size: 11.5px;
+  color: var(--acc);
+}
+
+/* Clean Form Elements */
+.app-form-group {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.app-label {
+  font-family: var(--mono);
+  font-size: 11px;
+  font-weight: 600;
+  letter-spacing: 0.12em;
+  text-transform: uppercase;
+  color: var(--dim);
+}
+
+.app-input {
+  width: 100%;
+  background: rgba(6, 5, 4, 0.85);
+  border: 1px solid var(--line);
+  border-radius: var(--radius-sm);
+  padding: 12px 16px;
+  color: var(--ink);
+  font-family: var(--body);
+  font-size: 13.5px;
+  outline: none;
+  transition: all 0.2s ease;
+}
+
+.app-input:focus {
+  border-color: var(--acc);
+  box-shadow: 0 0 0 2px var(--acc-soft);
+  background: rgba(10, 8, 6, 0.95);
+}
+
+.app-textarea {
+  resize: vertical;
+  min-height: 84px;
+  line-height: 1.55;
+  font-family: var(--body);
+}
+
+.app-select {
+  background: rgba(6, 5, 4, 0.85);
+  border: 1px solid var(--line);
+  border-radius: var(--radius-sm);
+  padding: 12px 16px;
+  color: var(--ink);
+  font-family: var(--body);
+  font-size: 13.5px;
+  outline: none;
+  cursor: pointer;
+}
+
+/* Buttons */
+.btn-solid {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  background: #ffffff;
+  color: #0a0a0a;
+  font-family: var(--body);
+  font-size: 13.5px;
+  font-weight: 600;
+  padding: 12px 24px;
+  border-radius: var(--radius-pill);
+  border: 1px solid transparent;
+  cursor: pointer;
+  transition: all 0.25s var(--e1);
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
+}
+
+.btn-solid:hover:not(:disabled) {
+  background: var(--acc);
+  color: #0a0400;
+  transform: translateY(-2px);
+  box-shadow: 0 6px 20px rgba(255, 122, 26, 0.35);
+}
+
+.btn-solid:active:not(:disabled) {
+  transform: translateY(0);
+}
+
+.btn-solid:disabled {
+  opacity: 0.45;
+  cursor: not-allowed;
+  transform: none;
+}
+
+.btn-line {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  background: transparent;
+  color: var(--ink);
+  font-family: var(--body);
+  font-size: 13.5px;
+  font-weight: 500;
+  padding: 12px 22px;
+  border-radius: var(--radius-pill);
+  border: 1px solid var(--line);
+  cursor: pointer;
+  transition: all 0.25s var(--e1);
+}
+
+.btn-line:hover:not(:disabled) {
+  border-color: #ffffff;
+  transform: translateY(-2px);
+}
+
+.btn-danger {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  background: var(--red-soft);
+  color: var(--red);
+  font-family: var(--body);
+  font-size: 13.5px;
+  font-weight: 600;
+  padding: 12px 22px;
+  border-radius: var(--radius-pill);
+  border: 1px solid rgba(248, 113, 113, 0.3);
+  cursor: pointer;
+  transition: all 0.2s ease;
+}
+
+.btn-danger:hover:not(:disabled) {
+  background: rgba(248, 113, 113, 0.22);
+  border-color: var(--red);
+}
+
+/* 1-Click Interactive Chips (Agent Roster) */
+.chip-group {
+  display: flex;
+  gap: 10px;
+  flex-wrap: wrap;
+}
+
+.agent-chip {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  padding: 8px 18px;
+  background: rgba(255, 255, 255, 0.04);
+  border: 1px solid var(--line);
+  border-radius: var(--radius-pill);
+  color: var(--dim);
+  font-family: var(--mono);
+  font-size: 12px;
+  cursor: pointer;
+  transition: all 0.25s var(--e1);
+}
+
+.agent-chip:hover {
+  background: rgba(255, 255, 255, 0.08);
+  border-color: rgba(255, 122, 26, 0.5);
+  color: var(--ink);
+  transform: translateY(-1px);
+}
+
+.agent-chip.active {
+  background: var(--acc-soft);
+  border-color: var(--acc);
+  color: var(--acc);
+  font-weight: 600;
+  box-shadow: 0 2px 12px rgba(255, 122, 26, 0.25);
+}
+
+/* Marketplace Cards */
+.market-listing-card {
+  background: var(--panel-bg);
+  border: 1px solid var(--line);
+  border-radius: var(--radius-md);
+  padding: 20px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 16px;
+  transition: all 0.25s var(--e1);
+}
+
+.market-listing-card:hover {
+  border-color: rgba(255, 122, 26, 0.55);
+  transform: translateY(-2px);
+}
+
+.market-card-left {
+  display: flex;
+  flex-direction: column;
+  gap: 5px;
+}
+
+.market-card-title {
+  font-family: var(--disp);
+  font-size: 15px;
+  font-weight: 700;
+  color: var(--ink);
+}
+
+.market-card-tags {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  font-family: var(--mono);
+  font-size: 11.5px;
+  color: var(--mute);
+}
+
+.market-card-right {
+  display: flex;
+  align-items: center;
+  gap: 14px;
+}
+
+.market-price-pill {
+  font-family: var(--mono);
+  font-size: 13px;
+  font-weight: 700;
+  color: var(--acc);
+  background: var(--acc-soft);
+  padding: 6px 14px;
+  border-radius: var(--radius-pill);
+  border: 1px solid var(--acc-border);
+}
+
+/* Activity & Feed Stream */
+.stream-container {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  max-height: 250px;
+  overflow-y: auto;
+  padding-right: 4px;
+}
+
+.stream-item {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 10px 16px;
+  background: rgba(255, 255, 255, 0.03);
+  border: 1px solid var(--line);
+  border-radius: var(--radius-sm);
+  font-size: 12.5px;
+}
+
+.stream-item-main {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  color: var(--ink);
+}
+
+.stream-item-time {
+  font-size: 11px;
+  color: var(--mute);
+  font-family: var(--mono);
+}
+
+/* Collapsible Technical Drawer */
+.tech-details-drawer {
+  background: rgba(10, 8, 6, 0.65);
+  border: 1px solid var(--line);
+  border-radius: var(--radius-md);
+  padding: 14px 18px;
+  font-size: 12px;
+  color: var(--dim);
+}
+
+.tech-details-summary {
+  cursor: pointer;
+  font-family: var(--mono);
+  font-size: 11px;
+  font-weight: 600;
+  letter-spacing: 0.12em;
+  text-transform: uppercase;
+  color: var(--dim);
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  user-select: none;
+}
+
+.tech-details-summary:hover {
+  color: var(--acc);
+}
+
+.tech-details-content {
+  margin-top: 14px;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.tech-key-val {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 8px 12px;
+  background: rgba(0, 0, 0, 0.35);
+  border-radius: 6px;
+  font-size: 11.5px;
+}
+
+.tech-key-val code {
+  font-family: var(--mono);
+  color: var(--acc2);
+}
+
+/* Feedback Bar */
+.status-feedback-bar {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 10px 16px;
+  background: rgba(255, 255, 255, 0.04);
+  border: 1px solid var(--line);
+  border-radius: var(--radius-sm);
+  font-family: var(--mono);
+  font-size: 12px;
+  color: var(--dim);
+}
+
+.status-feedback-bar.ok {
+  background: var(--green-soft);
+  border-color: rgba(74, 222, 128, 0.3);
+  color: var(--green);
+}
+
+.status-feedback-bar.error {
+  background: var(--red-soft);
+  border-color: rgba(248, 113, 113, 0.3);
+  color: var(--red);
+}
+
+/* Terminal Screen Styles (Context Vault Tab) */
+.terminal-screen {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  background: rgba(6, 5, 4, 0.95);
+  border: 1px solid var(--line);
+  border-radius: var(--radius-lg);
+  overflow: hidden;
+  box-shadow: var(--shadow-sm);
+}
+
+.terminal-history {
+  flex: 1;
+  overflow-y: auto;
+  padding: 18px 22px;
+  font-family: var(--mono);
+  font-size: 12.5px;
+  line-height: 1.65;
+  color: #e2e8f0;
+}
+
+.history-entry {
+  margin-bottom: 12px;
+}
+
+.history-prompt {
+  display: flex;
+  gap: 8px;
+  color: var(--acc);
+  font-weight: 600;
+}
+
+.history-output {
+  margin-top: 4px;
+  white-space: pre-wrap;
+  word-break: break-all;
+}
+
+.terminal-input-row {
+  display: flex;
+  align-items: center;
+  padding: 14px 20px;
+  background: rgba(12, 10, 8, 0.98);
+  border-top: 1px solid var(--line);
+  gap: 10px;
+}
+
+.prompt-badge {
+  color: var(--acc);
+  font-family: var(--mono);
+  font-size: 12px;
+  font-weight: 700;
+  white-space: nowrap;
+}
+
+.terminal-input {
+  flex: 1;
+  background: transparent;
+  border: none;
+  outline: none;
+  color: var(--ink);
+  font-family: var(--mono);
+  font-size: 12.5px;
+}
+
+/* Backward compatibility classes to keep all JS working */
+.zk-proof-panel { display: flex; flex-direction: column; }
+.zk-action-btn { @extend .btn-line; }
+.zk-input { @extend .app-input; }
+.zk-memory-input { flex: 1; }
+.zk-sale-num { width: 130px; }
+.zk-sale-textarea { @extend .app-input; @extend .app-textarea; }
+.zk-sale-listings { display: flex; flex-direction: column; gap: 8px; }
+.zk-sale-empty { color: var(--mute); font-family: var(--mono); font-size: 12px; }
+
+/* Custom Scrollbars */
+::-webkit-scrollbar {
+  width: 6px;
+  height: 6px;
+}
+
+::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+::-webkit-scrollbar-thumb {
+  background: rgba(255, 255, 255, 0.12);
+  border-radius: 3px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: rgba(255, 255, 255, 0.22);
+}
+
+@media (max-width: 1100px) {
+  .window-titlebar {
+    padding-inline: 14px;
+  }
+
+  .titlebar-right {
+    display: none;
+  }
+
+  .desktop-nav-tabs {
+    max-width: calc(100vw - 250px);
+    overflow-x: auto;
+    justify-content: flex-start;
+  }
+
+  .nav-tab-btn {
+    padding-inline: 12px;
+    font-size: 10.5px;
+  }
+}
+
+@media (max-width: 720px) {
+  .window-controls,
+  .version-pill {
+    display: none;
+  }
+
+  .desktop-nav-tabs {
+    max-width: calc(100vw - 92px);
+  }
+
+  .brand-title {
+    font-size: 12px;
+  }
+}
+
+/* Enigma private AI workspace */
+.sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+
+.workspace-panel {
+  padding: 18px 22px 24px;
+  background:
+    radial-gradient(circle at 72% -18%, rgba(255, 122, 26, 0.12), transparent 34rem),
+    rgba(7, 6, 5, 0.97);
+}
+
+.workspace-layout {
+  display: grid;
+  grid-template-columns: 236px minmax(0, 1fr);
+  width: min(1480px, 100%);
+  min-height: 680px;
+  height: 100%;
+  margin: 0 auto;
+  overflow: hidden;
+  border: 1px solid var(--line);
+  border-radius: 22px;
+  background: rgba(10, 9, 8, 0.92);
+  box-shadow: var(--shadow-lg), var(--glass-highlight);
+}
+
+.workspace-sidebar {
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+  padding: 24px 14px 16px;
+  border-right: 1px solid var(--line);
+  background: rgba(14, 12, 10, 0.82);
+}
+
+.workspace-sidebar-brand {
+  display: flex;
+  flex-direction: column;
+  gap: 5px;
+  padding: 0 10px 24px;
+}
+
+.workspace-sidebar-kicker,
+.workspace-stage-eyebrow,
+.workspace-empty-index,
+.workspace-section-intro > span,
+.workspace-section-intro > div > span {
+  color: var(--acc);
+  font-family: var(--mono);
+  font-size: 10px;
+  font-weight: 600;
+  letter-spacing: 0.18em;
+}
+
+.workspace-sidebar-brand strong {
+  color: var(--ink);
+  font-family: var(--disp);
+  font-size: 19px;
+  letter-spacing: -0.025em;
+}
+
+.workspace-sidebar-brand > span:last-child {
+  color: var(--mute);
+  font-size: 11.5px;
+  line-height: 1.5;
+}
+
+.workspace-mode-nav {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.workspace-mode-btn {
+  display: grid;
+  grid-template-columns: 22px minmax(0, 1fr);
+  gap: 10px;
+  align-items: center;
+  width: 100%;
+  padding: 11px 10px;
+  color: var(--mute);
+  text-align: left;
+  background: transparent;
+  border: 1px solid transparent;
+  border-radius: 10px;
+  cursor: pointer;
+  transition: color 180ms var(--e1), background 180ms var(--e1), border-color 180ms var(--e1), transform 180ms var(--e1);
+}
+
+.workspace-mode-btn:hover {
+  color: var(--ink);
+  background: rgba(255, 255, 255, 0.04);
+}
+
+.workspace-mode-btn:active {
+  transform: translateY(1px);
+}
+
+.workspace-mode-btn.active {
+  color: var(--ink);
+  background: rgba(255, 122, 26, 0.10);
+  border-color: rgba(255, 122, 26, 0.24);
+  box-shadow: inset 3px 0 0 var(--acc);
+}
+
+.workspace-mode-btn svg {
+  width: 19px;
+  height: 19px;
+  fill: none;
+  stroke: currentColor;
+  stroke-width: 1.55;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+}
+
+.workspace-mode-btn > span {
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+}
+
+.workspace-mode-btn strong {
+  color: inherit;
+  font-size: 12.5px;
+  font-weight: 600;
+}
+
+.workspace-mode-btn small {
+  color: var(--mute);
+  font-family: var(--mono);
+  font-size: 9.5px;
+}
+
+.workspace-boundary-note {
+  display: flex;
+  align-items: flex-start;
+  gap: 9px;
+  margin-top: auto;
+  padding: 14px 10px 0;
+  border-top: 1px solid var(--line);
+}
+
+.workspace-boundary-note > div {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.workspace-boundary-note strong {
+  color: var(--dim);
+  font-family: var(--mono);
+  font-size: 10.5px;
+  font-weight: 600;
+  text-transform: uppercase;
+}
+
+.workspace-boundary-note span:last-child {
+  color: var(--mute);
+  font-size: 10.5px;
+  line-height: 1.4;
+}
+
+.workspace-live-dot {
+  flex: 0 0 auto;
+  width: 7px;
+  height: 7px;
+  margin-top: 4px;
+  border-radius: 50%;
+  background: var(--green);
+  box-shadow: 0 0 0 4px rgba(74, 222, 128, 0.09);
+  animation: workspace-breathe 2.8s ease-in-out infinite;
+}
+
+@keyframes workspace-breathe {
+  0%, 100% { opacity: 0.55; transform: scale(0.86); }
+  50% { opacity: 1; transform: scale(1); }
+}
+
+.workspace-stage {
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+  min-height: 0;
+}
+
+.workspace-stage-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  gap: 30px;
+  padding: 25px 30px 22px;
+  border-bottom: 1px solid var(--line);
+  background: rgba(12, 10, 8, 0.55);
+}
+
+.workspace-stage-header > div:first-child {
+  min-width: 0;
+}
+
+.workspace-stage-header h2 {
+  max-width: 700px;
+  margin-top: 5px;
+  color: var(--ink);
+  font-family: var(--disp);
+  font-size: clamp(25px, 2.4vw, 36px);
+  font-weight: 700;
+  line-height: 1.05;
+  letter-spacing: -0.045em;
+  text-wrap: balance;
+}
+
+.workspace-stage-header p {
+  max-width: 72ch;
+  margin-top: 8px;
+  color: var(--dim);
+  font-size: 12.5px;
+  line-height: 1.55;
+}
+
+.workspace-route-status {
+  display: flex;
+  align-items: center;
+  gap: 9px;
+  flex: 0 0 auto;
+  padding: 8px 11px;
+  color: var(--dim);
+  font-family: var(--mono);
+  font-size: 10px;
+  text-transform: uppercase;
+  border: 1px solid var(--line);
+  border-radius: 9px;
+  background: rgba(255, 255, 255, 0.035);
+}
+
+.workspace-route-status.error .workspace-live-dot {
+  background: var(--red);
+  box-shadow: 0 0 0 4px rgba(248, 113, 113, 0.09);
+  animation: none;
+}
+
+.workspace-view {
+  display: none;
+  min-height: 0;
+  flex: 1;
+  overflow-y: auto;
+  padding: 28px 30px 32px;
+  animation: workspace-enter 280ms var(--e1) both;
+}
+
+.workspace-view.active {
+  display: flex;
+  flex-direction: column;
+}
+
+@keyframes workspace-enter {
+  from { opacity: 0; transform: translateY(7px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+
+.workspace-chat-frame {
+  display: grid;
+  grid-template-rows: minmax(260px, 1fr) auto;
+  gap: 18px;
+  min-height: 100%;
+}
+
+.workspace-message-feed {
+  display: flex;
+  flex-direction: column;
+  gap: 14px;
+  min-height: 0;
+  overflow-y: auto;
+  scroll-behavior: smooth;
+}
+
+.workspace-empty-state {
+  display: grid;
+  grid-template-columns: minmax(0, 0.95fr) minmax(300px, 1.05fr);
+  align-content: center;
+  gap: 10px 42px;
+  min-height: 100%;
+  padding: 22px 1vw 28px;
+}
+
+.workspace-empty-state > span,
+.workspace-empty-state > h3,
+.workspace-empty-state > p {
+  grid-column: 1;
+}
+
+.workspace-empty-state h3,
+.workspace-section-intro h3 {
+  color: var(--ink);
+  font-family: var(--disp);
+  font-size: clamp(24px, 3vw, 40px);
+  font-weight: 700;
+  line-height: 1.02;
+  letter-spacing: -0.045em;
+  text-wrap: balance;
+}
+
+.workspace-empty-state p,
+.workspace-section-intro p {
+  max-width: 62ch;
+  color: var(--dim);
+  font-size: 13px;
+  line-height: 1.65;
+}
+
+.workspace-prompt-grid {
+  display: grid;
+  grid-column: 2;
+  grid-row: 1 / span 3;
+  grid-template-columns: 1fr 1fr;
+  align-self: center;
+  gap: 8px;
+}
+
+.workspace-prompt-grid button {
+  min-height: 72px;
+  padding: 14px;
+  color: var(--dim);
+  font-family: var(--body);
+  font-size: 12px;
+  line-height: 1.4;
+  text-align: left;
+  border: 1px solid var(--line);
+  border-radius: 11px;
+  background: rgba(255, 255, 255, 0.025);
+  cursor: pointer;
+  transition: transform 180ms var(--e1), border-color 180ms var(--e1), color 180ms var(--e1), background 180ms var(--e1);
+}
+
+.workspace-prompt-grid button:hover {
+  color: var(--ink);
+  border-color: var(--acc-border);
+  background: var(--acc-soft);
+  transform: translateY(-2px);
+}
+
+.workspace-prompt-grid button:active {
+  transform: translateY(0);
+}
+
+.workspace-message {
+  display: grid;
+  grid-template-columns: 76px minmax(0, 1fr);
+  gap: 18px;
+  padding: 17px 0;
+  border-top: 1px solid var(--line);
+}
+
+.workspace-message:first-child {
+  border-top: 0;
+}
+
+.workspace-message-role {
+  color: var(--mute);
+  font-family: var(--mono);
+  font-size: 9.5px;
+  font-weight: 600;
+  letter-spacing: 0.13em;
+}
+
+.workspace-message.assistant .workspace-message-role {
+  color: var(--acc);
+}
+
+.workspace-message-body {
+  min-width: 0;
+  color: var(--ink);
+  font-size: 13.5px;
+  line-height: 1.7;
+  white-space: pre-wrap;
+  overflow-wrap: anywhere;
+}
+
+.workspace-message-meta {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px 12px;
+  margin-top: 11px;
+  color: var(--mute);
+  font-family: var(--mono);
+  font-size: 9.5px;
+}
+
+.workspace-message.error .workspace-message-body {
+  color: var(--red);
+}
+
+.workspace-message-loading {
+  display: grid;
+  gap: 8px;
+  max-width: 560px;
+}
+
+.workspace-message-loading span {
+  display: block;
+  height: 9px;
+  border-radius: 4px;
+  background: linear-gradient(90deg, rgba(255,255,255,0.05), rgba(255,122,26,0.16), rgba(255,255,255,0.05));
+  background-size: 220% 100%;
+  animation: workspace-shimmer 1.5s ease-in-out infinite;
+}
+
+.workspace-message-loading span:nth-child(2) { width: 86%; }
+.workspace-message-loading span:nth-child(3) { width: 63%; }
+
+@keyframes workspace-shimmer {
+  from { background-position: 200% 0; }
+  to { background-position: -20% 0; }
+}
+
+.workspace-composer {
+  padding: 14px;
+  border: 1px solid var(--line-strong);
+  border-radius: 16px;
+  background: rgba(18, 15, 12, 0.94);
+  box-shadow: var(--glass-highlight), 0 18px 42px rgba(2, 1, 0, 0.28);
+}
+
+.workspace-composer-field textarea,
+.workspace-council-composer textarea {
+  width: 100%;
+  resize: vertical;
+  color: var(--ink);
+  font: 13.5px/1.55 var(--body);
+  border: 0;
+  outline: 0;
+  background: transparent;
+}
+
+.workspace-composer-field textarea {
+  min-height: 66px;
+  max-height: 200px;
+  padding: 4px 5px 12px;
+}
+
+.workspace-composer-field textarea::placeholder,
+.workspace-council-composer textarea::placeholder {
+  color: var(--mute);
+}
+
+.workspace-composer-toolbar {
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-between;
+  gap: 14px;
+  padding-top: 10px;
+  border-top: 1px solid var(--line);
+}
+
+.workspace-route-controls,
+.workspace-turn-controls {
+  display: flex;
+  align-items: flex-end;
+  gap: 8px;
+}
+
+.workspace-route-controls label {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.workspace-route-controls label > span,
+.workspace-council-composer > label,
+.workspace-filter > span {
+  color: var(--mute);
+  font-family: var(--mono);
+  font-size: 9px;
+  font-weight: 600;
+  letter-spacing: 0.11em;
+  text-transform: uppercase;
+}
+
+.workspace-route-controls select,
+.workspace-council-route,
+.workspace-filter input {
+  min-height: 34px;
+  color: var(--dim);
+  font: 10.5px var(--mono);
+  border: 1px solid var(--line);
+  border-radius: 8px;
+  outline: 0;
+  background: rgba(6, 5, 4, 0.86);
+}
+
+.workspace-route-controls select {
+  max-width: 220px;
+  padding: 0 26px 0 9px;
+}
+
+.workspace-route-controls select:focus,
+.workspace-council-route:focus,
+.workspace-filter input:focus,
+.workspace-council-composer textarea:focus,
+.workspace-composer:focus-within {
+  border-color: var(--acc-border);
+  box-shadow: 0 0 0 3px rgba(255, 122, 26, 0.08);
+}
+
+.workspace-check {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  min-height: 34px;
+  padding: 0 9px;
+  color: var(--mute);
+  font: 9.5px var(--mono);
+  border: 1px solid var(--line);
+  border-radius: 8px;
+  cursor: pointer;
+}
+
+.workspace-check input {
+  accent-color: var(--acc);
+}
+
+.workspace-send-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  min-height: 36px;
+  padding: 0 14px;
+  color: #1a0b02;
+  font: 600 10.5px var(--mono);
+  text-transform: uppercase;
+  border: 1px solid var(--acc);
+  border-radius: 9px;
+  background: var(--acc);
+  cursor: pointer;
+  transition: transform 180ms var(--e1), background 180ms var(--e1), opacity 180ms var(--e1);
+}
+
+.workspace-send-btn svg {
+  width: 15px;
+  height: 15px;
+  fill: none;
+  stroke: currentColor;
+  stroke-width: 1.7;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+}
+
+.workspace-send-btn:hover:not(:disabled) {
+  background: var(--acc2);
+  transform: translateY(-1px);
+}
+
+.workspace-send-btn:active:not(:disabled) {
+  transform: translateY(1px);
+}
+
+.workspace-send-btn:disabled {
+  opacity: 0.34;
+  cursor: not-allowed;
+}
+
+.workspace-composer-note {
+  margin-top: 8px;
+  color: var(--mute);
+  font-family: var(--mono);
+  font-size: 8.75px;
+}
+
+.workspace-section-intro {
+  display: flex;
+  flex-direction: column;
+  gap: 9px;
+  max-width: 850px;
+  padding-bottom: 24px;
+}
+
+.workspace-section-intro-split {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) 250px;
+  max-width: none;
+  gap: 28px;
+}
+
+.workspace-section-intro-split > div {
+  display: flex;
+  flex-direction: column;
+  gap: 9px;
+}
+
+.workspace-seat-grid {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 10px;
+}
+
+.workspace-seat {
+  min-width: 0;
+  border-top: 2px solid var(--line-strong);
+  background: rgba(255, 255, 255, 0.025);
+}
+
+.workspace-seat:nth-child(1) { border-top-color: var(--acc); }
+
+.workspace-seat-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  padding: 13px;
+  border-bottom: 1px solid var(--line);
+}
+
+.workspace-seat-header > span {
+  color: var(--mute);
+  font: 600 9px var(--mono);
+  letter-spacing: 0.13em;
+}
+
+.workspace-council-route {
+  max-width: 68%;
+  padding: 0 7px;
+}
+
+.workspace-seat-result {
+  min-height: 220px;
+  max-height: 380px;
+  padding: 17px 14px;
+  overflow-y: auto;
+  color: var(--dim);
+  font-size: 12.5px;
+  line-height: 1.65;
+  white-space: pre-wrap;
+  overflow-wrap: anywhere;
+}
+
+.workspace-seat-result.error {
+  color: var(--red);
+}
+
+.workspace-council-composer {
+  display: flex;
+  flex-direction: column;
+  gap: 9px;
+  margin-top: 12px;
+  padding: 16px;
+  border: 1px solid var(--line);
+  border-radius: 13px;
+  background: rgba(255, 255, 255, 0.025);
+}
+
+.workspace-council-composer textarea {
+  min-height: 78px;
+  padding: 10px;
+  border: 1px solid var(--line);
+  border-radius: 8px;
+  background: rgba(6, 5, 4, 0.66);
+}
+
+.workspace-council-composer > div {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  color: var(--mute);
+  font: 9.5px var(--mono);
+}
+
+.workspace-filter {
+  display: flex;
+  flex-direction: column;
+  gap: 5px;
+  align-self: end;
+}
+
+.workspace-filter input {
+  width: 100%;
+  padding: 0 10px;
+}
+
+.workspace-model-summary {
+  padding: 10px 0;
+  color: var(--mute);
+  font: 10px var(--mono);
+  border-top: 1px solid var(--line);
+  border-bottom: 1px solid var(--line);
+}
+
+.workspace-model-list,
+.workspace-connection-list {
+  display: flex;
+  flex-direction: column;
+}
+
+.workspace-model-row,
+.workspace-connection-row {
+  display: grid;
+  align-items: center;
+  gap: 18px;
+  padding: 15px 4px;
+  border-bottom: 1px solid var(--line);
+}
+
+.workspace-model-row {
+  grid-template-columns: minmax(160px, 1fr) minmax(120px, 0.65fr) 86px;
+}
+
+.workspace-model-row strong,
+.workspace-connection-row strong {
+  color: var(--ink);
+  font-size: 12.5px;
+  font-weight: 600;
+}
+
+.workspace-model-row span,
+.workspace-connection-row span,
+.workspace-model-row small,
+.workspace-connection-row small {
+  color: var(--mute);
+  font: 9.5px var(--mono);
+}
+
+.workspace-model-row small {
+  text-align: right;
+}
+
+.workspace-empty-row {
+  padding: 34px 4px;
+  color: var(--mute);
+  font: 11px var(--mono);
+}
+
+.workspace-connection-row {
+  grid-template-columns: minmax(150px, 0.8fr) minmax(200px, 1.2fr) auto;
+}
+
+.workspace-connection-row > div {
+  display: flex;
+  flex-direction: column;
+  gap: 3px;
+}
+
+.workspace-connection-state {
+  color: var(--green) !important;
+  text-transform: uppercase;
+}
+
+.workspace-boundary-grid {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  margin-top: 25px;
+  border-top: 1px solid var(--line);
+  border-left: 1px solid var(--line);
+}
+
+.workspace-boundary-grid > div {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  padding: 18px;
+  border-right: 1px solid var(--line);
+  border-bottom: 1px solid var(--line);
+}
+
+.workspace-boundary-grid span,
+.workspace-privacy-grid span,
+.workspace-limitations span {
+  color: var(--acc);
+  font: 600 9px var(--mono);
+  letter-spacing: 0.1em;
+}
+
+.workspace-boundary-grid strong,
+.workspace-privacy-grid strong {
+  color: var(--ink);
+  font-family: var(--disp);
+  font-size: 16px;
+}
+
+.workspace-boundary-grid small,
+.workspace-privacy-grid small {
+  color: var(--mute);
+  font-size: 10.5px;
+}
+
+.workspace-privacy-grid {
+  display: grid;
+  grid-template-columns: 0.8fr 1.4fr 0.8fr;
+  border-top: 1px solid var(--line);
+  border-left: 1px solid var(--line);
+}
+
+.workspace-privacy-grid article {
+  display: flex;
+  flex-direction: column;
+  gap: 7px;
+  min-width: 0;
+  padding: 20px;
+  border-right: 1px solid var(--line);
+  border-bottom: 1px solid var(--line);
+}
+
+.workspace-hash {
+  overflow: hidden;
+  color: var(--acc2) !important;
+  font: 11px var(--mono) !important;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.workspace-category-list {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  padding: 18px 0 24px;
+}
+
+.workspace-category-list span {
+  padding: 6px 9px;
+  color: var(--dim);
+  font: 9.5px var(--mono);
+  border: 1px solid var(--line);
+  border-radius: 7px;
+  background: rgba(255, 255, 255, 0.025);
+}
+
+.workspace-limitations {
+  display: grid;
+  grid-template-columns: 1fr 1fr auto;
+  align-items: stretch;
+  border-top: 1px solid var(--line);
+}
+
+.workspace-limitations > div {
+  padding: 18px 18px 18px 0;
+}
+
+.workspace-limitations p {
+  max-width: 50ch;
+  margin-top: 5px;
+  color: var(--mute);
+  font-size: 11px;
+  line-height: 1.55;
+}
+
+.workspace-limitations button {
+  align-self: center;
+  padding: 10px 12px;
+  color: var(--red);
+  font: 10px var(--mono);
+  border: 1px solid rgba(248, 113, 113, 0.3);
+  border-radius: 8px;
+  background: var(--red-soft);
+  cursor: pointer;
+  transition: transform 180ms var(--e1), background 180ms var(--e1);
+}
+
+.workspace-limitations button:hover {
+  background: rgba(248, 113, 113, 0.18);
+  transform: translateY(-1px);
+}
+
+.workspace-limitations button:active {
+  transform: translateY(1px);
+}
+
+@media (max-width: 1180px) {
+  .workspace-layout {
+    grid-template-columns: 196px minmax(0, 1fr);
+  }
+
+  .workspace-seat-grid {
+    grid-template-columns: 1fr;
+  }
+
+  .workspace-seat-result {
+    min-height: 130px;
+  }
+
+  .workspace-empty-state {
+    grid-template-columns: 1fr;
+  }
+
+  .workspace-prompt-grid {
+    grid-column: 1;
+    grid-row: auto;
+  }
+
+  .workspace-composer-toolbar {
+    align-items: stretch;
+    flex-direction: column;
+  }
+
+  .workspace-turn-controls {
+    justify-content: flex-end;
+  }
+}
+
+@media (max-width: 860px) {
+  .workspace-panel {
+    padding: 10px;
+  }
+
+  .workspace-layout {
+    grid-template-columns: 1fr;
+    min-height: 0;
+    overflow: visible;
+  }
+
+  .workspace-sidebar {
+    padding: 12px;
+    border-right: 0;
+    border-bottom: 1px solid var(--line);
+  }
+
+  .workspace-sidebar-brand,
+  .workspace-boundary-note {
+    display: none;
+  }
+
+  .workspace-mode-nav {
+    display: grid;
+    grid-template-columns: repeat(5, minmax(0, 1fr));
+  }
+
+  .workspace-mode-btn {
+    grid-template-columns: 1fr;
+    justify-items: center;
+    padding: 8px 4px;
+    text-align: center;
+  }
+
+  .workspace-mode-btn small {
+    display: none;
+  }
+
+  .workspace-mode-btn.active {
+    box-shadow: inset 0 -2px 0 var(--acc);
+  }
+
+  .workspace-stage-header,
+  .workspace-view {
+    padding-left: 18px;
+    padding-right: 18px;
+  }
+
+  .workspace-stage-header {
+    flex-direction: column;
+    gap: 14px;
+  }
+
+  .workspace-route-status {
+    align-self: flex-start;
+  }
+
+  .workspace-section-intro-split,
+  .workspace-privacy-grid,
+  .workspace-boundary-grid,
+  .workspace-limitations {
+    grid-template-columns: 1fr;
+  }
+
+  .workspace-route-controls,
+  .workspace-turn-controls {
+    flex-wrap: wrap;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .workspace-live-dot,
+  .workspace-message-loading span,
+  .workspace-view {
+    animation: none;
+  }
+}
+
+.workspace-mode-nav {
+  min-height: 0;
+  overflow-y: auto;
+  scrollbar-width: thin;
+}
+
+.workspace-tool-grid {
+  display: grid;
+  grid-template-columns: minmax(280px, .8fr) minmax(0, 1.2fr);
+  gap: 18px;
+  min-height: 0;
+  flex: 1;
+  margin-top: 22px;
+}
+
+.workspace-tool-form,
+.workspace-output-surface,
+.workspace-browser-frame {
+  border: 1px solid var(--line);
+  background: color-mix(in srgb, var(--panel) 88%, transparent);
+}
+
+.workspace-tool-form {
+  display: flex;
+  flex-direction: column;
+  gap: 14px;
+  padding: 18px;
+}
+
+.workspace-tool-form label {
+  display: flex;
+  flex-direction: column;
+  gap: 7px;
+}
+
+.workspace-tool-form label > span {
+  color: var(--mute);
+  font-family: var(--mono);
+  font-size: 10px;
+  letter-spacing: .08em;
+  text-transform: uppercase;
+}
+
+.workspace-tool-form input,
+.workspace-tool-form select,
+.workspace-tool-form textarea,
+.workspace-browser-toolbar input {
+  width: 100%;
+  border: 1px solid var(--line);
+  border-radius: 0;
+  background: var(--bg);
+  color: var(--ink);
+  font: inherit;
+  padding: 10px 12px;
+}
+
+.workspace-tool-form textarea {
+  resize: vertical;
+}
+
+.workspace-code-editor,
+.workspace-terminal-output {
+  font-family: var(--mono) !important;
+  font-size: 12px !important;
+  line-height: 1.65 !important;
+  tab-size: 2;
+}
+
+.workspace-inline-fields {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 10px;
+}
+
+.workspace-action-row,
+.workspace-browser-toolbar {
+  display: flex;
+  align-items: center;
+  gap: 9px;
+}
+
+.workspace-danger-btn,
+.workspace-browser-toolbar button {
+  min-height: 38px;
+  border: 1px solid var(--line);
+  background: transparent;
+  color: var(--ink);
+  padding: 8px 13px;
+  font-family: var(--mono);
+  font-size: 10px;
+  letter-spacing: .06em;
+  text-transform: uppercase;
+  cursor: pointer;
+}
+
+.workspace-danger-btn {
+  border-color: color-mix(in srgb, #c44 55%, var(--line));
+  color: #d66;
+}
+
+.workspace-danger-btn:disabled,
+.workspace-browser-toolbar button:disabled {
+  opacity: .4;
+  cursor: not-allowed;
+}
+
+.workspace-output-surface {
+  min-height: 280px;
+  overflow: auto;
+  padding: 18px;
+  color: var(--dim);
+  white-space: pre-wrap;
+}
+
+.workspace-output-surface img,
+.workspace-output-surface video {
+  display: block;
+  width: 100%;
+  max-height: 560px;
+  object-fit: contain;
+  background: #050506;
+}
+
+.workspace-browser-toolbar {
+  margin-top: 18px;
+}
+
+.workspace-browser-toolbar input {
+  flex: 1;
+  min-width: 0;
+}
+
+.workspace-browser-frame {
+  position: relative;
+  flex: 1;
+  min-height: 420px;
+  margin-top: 12px;
+  overflow: hidden;
+}
+
+.workspace-browser-frame > span {
+  position: absolute;
+  inset: 0;
+  display: grid;
+  place-items: center;
+  padding: 24px;
+  color: var(--mute);
+  text-align: center;
+}
+
+.workspace-browser-frame iframe {
+  width: 100%;
+  height: 100%;
+  min-height: 420px;
+  border: 0;
+  background: #050506;
+}
+
+@media (max-width: 920px) {
+  .workspace-mode-nav {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+    overflow: visible;
+  }
+
+  .workspace-tool-grid {
+    grid-template-columns: 1fr;
+  }
+
+  .workspace-inline-fields {
+    grid-template-columns: 1fr;
+  }
+
+  .workspace-browser-toolbar {
+    flex-wrap: wrap;
+  }
+
+  .workspace-browser-toolbar input {
+    flex-basis: 100%;
+    order: 2;
+  }
+}
+
+
+.workspace-panel {
+  --ink: #23211e;
+  --dim: #65615b;
+  --mute: #938e85;
+  --line: #e2ded6;
+  --line-strong: #ccc7bd;
+  --acc: #ef5b2a;
+  --acc2: #d9481a;
+  --acc-soft: rgba(239, 91, 42, 0.08);
+  --acc-border: rgba(239, 91, 42, 0.28);
+  --green: #417b59;
+  min-height: 100%;
+  padding: 0;
+  color: var(--ink);
+  background: #f8f7f3;
+}
+
+.workspace-layout {
+  grid-template-columns: 252px minmax(0, 1fr);
+  width: 100%;
+  min-height: 100%;
+  margin: 0;
+  border: 0;
+  border-radius: 0;
+  background: #f8f7f3;
+  box-shadow: none;
+}
+
+.workspace-sidebar {
+  padding: 18px 12px 14px;
+  border-right-color: var(--line);
+  background: #f5f3ee;
+}
+
+.workspace-sidebar-brand {
+  position: relative;
+  display: grid;
+  grid-template-columns: 18px minmax(0, 1fr);
+  gap: 0 8px;
+  align-items: center;
+  padding: 0 8px 19px;
+}
+
+.workspace-brand-sigil {
+  color: var(--acc);
+  font-size: 18px;
+  line-height: 1;
+}
+
+.workspace-sidebar-brand strong {
+  color: #1f1d1a;
+  font-family: Georgia, "Times New Roman", serif;
+  font-size: 19px;
+  font-weight: 700;
+  letter-spacing: -0.035em;
+}
+
+.workspace-sidebar-brand > span:last-child {
+  display: none;
+}
+
+.workspace-mode-nav {
+  gap: 2px;
+  padding-top: 8px;
+  border-top: 1px solid var(--line);
+}
+
+.workspace-mode-btn {
+  grid-template-columns: 18px minmax(0, 1fr);
+  gap: 10px;
+  min-height: 39px;
+  padding: 8px 9px;
+  color: #6f6a63;
+  border: 0;
+  border-radius: 7px;
+  transition: color 150ms ease, background 150ms ease, transform 150ms ease;
+}
+
+.workspace-mode-btn:hover {
+  color: #26231f;
+  background: #eeece6;
+}
+
+.workspace-mode-btn.active {
+  color: #292622;
+  border: 0;
+  background: #ebe9e3;
+  box-shadow: none;
+}
+
+.workspace-mode-btn.active svg {
+  color: var(--acc);
+}
+
+.workspace-mode-btn svg {
+  width: 16px;
+  height: 16px;
+  stroke-width: 1.45;
+}
+
+.workspace-mode-btn strong {
+  font-size: 12.5px;
+  font-weight: 500;
+}
+
+.workspace-mode-btn small {
+  display: none;
+}
+
+.workspace-nav-divider {
+  display: block;
+  height: 1px;
+  margin: 8px -12px;
+  background: var(--line);
+}
+
+.workspace-boundary-note {
+  align-items: center;
+  gap: 10px;
+  margin: auto -12px -14px;
+  padding: 13px 20px 15px;
+  border-top-color: var(--line);
+  background: rgba(255, 255, 255, 0.24);
+}
+
+.workspace-boundary-note strong {
+  color: #3e3a35;
+  font-family: var(--body);
+  font-size: 11.5px;
+  text-transform: none;
+}
+
+.workspace-boundary-note span:last-child {
+  color: var(--mute);
+  font-size: 10px;
+}
+
+.workspace-stage {
+  background: #faf9f6;
+}
+
+.workspace-stage-header {
+  min-height: 58px;
+  align-items: center;
+  padding: 10px 18px;
+  border-bottom-color: var(--line);
+  background: rgba(250, 249, 246, 0.96);
+}
+
+.workspace-stage-eyebrow,
+.workspace-stage-header p {
+  display: none;
+}
+
+.workspace-stage-header h2 {
+  margin: 0;
+  color: #393631;
+  font-family: var(--body);
+  font-size: 13px;
+  font-weight: 500;
+  line-height: 1.2;
+  letter-spacing: 0;
+}
+
+.workspace-route-status {
+  gap: 7px;
+  padding: 7px 10px;
+  color: #5e5952;
+  font-family: var(--body);
+  font-size: 10px;
+  text-transform: none;
+  border-color: var(--line);
+  border-radius: 6px;
+  background: #fff;
+  box-shadow: 0 1px 2px rgba(30, 27, 22, 0.04);
+}
+
+.workspace-live-dot {
+  width: 6px;
+  height: 6px;
+  margin-top: 0;
+  background: var(--acc);
+  box-shadow: 0 0 0 3px rgba(239, 91, 42, 0.08);
+}
+
+.workspace-view {
+  padding: 40px clamp(28px, 5vw, 72px) 28px;
+}
+
+.workspace-chat-frame {
+  grid-template-rows: minmax(320px, 1fr) auto;
+  gap: 20px;
+  width: min(930px, 100%);
+  margin: 0 auto;
+}
+
+.workspace-message-feed {
+  overflow-x: hidden;
+}
+
+.workspace-empty-state {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 0;
+  width: min(720px, 100%);
+  min-height: 100%;
+  margin: 0 auto;
+  padding: 24px 0;
+  text-align: center;
 }
 
-* {
-  box-sizing: border-box;
+.workspace-empty-index {
+  margin-bottom: 18px;
+  color: var(--acc);
+  font-family: Georgia, "Times New Roman", serif;
+  font-size: 27px;
+  line-height: 1;
+  letter-spacing: 0;
 }
 
-html {
-  min-height: 100%;
-  background: radial-gradient(circle at 20% 0%, rgba(85, 183, 255, 0.18), transparent 32rem), var(--bg);
+.workspace-empty-kicker {
+  margin-bottom: 7px;
+  color: #777169;
+  font-size: 9px;
+  font-weight: 600;
+  letter-spacing: 0.16em;
 }
 
-body {
-  min-height: 100%;
-  margin: 0;
-  color: var(--text);
-  background: linear-gradient(180deg, rgba(9, 11, 16, 0.18), var(--bg) 34rem);
+.workspace-empty-state h3 {
+  max-width: 760px;
+  color: #26231f;
+  font-family: Georgia, "Times New Roman", serif;
+  font-size: clamp(30px, 3.3vw, 46px);
+  font-weight: 500;
+  line-height: 1.08;
+  letter-spacing: -0.04em;
 }
 
-button,
-input,
-textarea {
-  font: inherit;
+.workspace-empty-state p {
+  margin-top: 11px;
+  color: #706b64;
+  font-size: 11.5px;
+  line-height: 1.55;
 }
 
-button {
-  border: 1px solid rgba(139, 211, 255, 0.42);
-  border-radius: 999px;
-  padding: 0.72rem 1rem;
-  color: #041018;
-  background: var(--accent);
-  cursor: pointer;
-  transition: transform 160ms ease, border-color 160ms ease, background 160ms ease;
+.workspace-prompt-grid {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  width: min(650px, 100%);
+  margin-top: 30px;
+  gap: 8px;
+}
+
+.workspace-prompt-grid button {
+  min-height: 45px;
+  padding: 11px 14px;
+  color: #57524c;
+  font-size: 11px;
+  line-height: 1.35;
+  border-color: #dedad2;
+  border-radius: 8px;
+  background: rgba(255, 255, 255, 0.78);
+  box-shadow: 0 1px 2px rgba(31, 28, 23, 0.03);
 }
 
-button:hover:not(:disabled) {
+.workspace-prompt-grid button:hover {
+  color: #282521;
+  border-color: #c9c3b9;
+  background: #fff;
   transform: translateY(-1px);
-  background: var(--accent-strong);
 }
 
-button:disabled {
-  color: var(--muted);
-  background: #1d2532;
+.workspace-trust-lines {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  margin-top: 18px;
+  color: #8a857e;
+  font-size: 9.5px;
+  line-height: 1.55;
+}
+
+.workspace-trust-lines span::before {
+  content: "·";
+  margin-right: 6px;
+}
+
+.workspace-message {
+  grid-template-columns: 58px minmax(0, 1fr);
+  border-top-color: var(--line);
+}
+
+.workspace-message-body {
+  color: #2d2a26;
+}
+
+.workspace-composer {
+  padding: 9px 11px 10px;
+  border-color: #cac5bb;
+  border-radius: 15px;
+  background: #fff;
+  box-shadow: 0 8px 22px rgba(50, 44, 35, 0.08), 0 1px 2px rgba(50, 44, 35, 0.08);
+}
+
+.workspace-composer-field textarea {
+  min-height: 38px;
+  max-height: 150px;
+  padding: 8px 9px 6px;
+  color: #292622;
+  resize: none;
+}
+
+.workspace-composer-toolbar {
+  align-items: center;
+  padding-top: 7px;
+  border-top: 0;
+}
+
+.workspace-route-controls label > span {
+  display: none;
+}
+
+.workspace-route-controls select,
+.workspace-filter input,
+.workspace-seat-header select,
+.workspace-tool-form input,
+.workspace-tool-form select,
+.workspace-tool-form textarea,
+.workspace-browser-toolbar input {
+  color: #34312d;
   border-color: var(--line);
-  cursor: not-allowed;
+  background: #fff;
 }
 
-input,
-textarea {
-  width: 100%;
-  border: 1px solid var(--line);
-  border-radius: 16px;
-  padding: 0.78rem 0.9rem;
-  color: var(--text);
-  background: #0b0f16;
-  outline: none;
+.workspace-check {
+  color: #746f68;
 }
 
-input:focus,
-textarea:focus {
-  border-color: var(--accent);
-  box-shadow: 0 0 0 3px rgba(139, 211, 255, 0.12);
+.workspace-send-btn {
+  border-color: #a64022;
+  background: var(--acc);
+  color: #fff;
+  box-shadow: none;
 }
 
-textarea {
-  min-height: 9rem;
-  resize: vertical;
+.workspace-send-btn:hover:not(:disabled) {
+  background: var(--acc2);
+  box-shadow: none;
 }
 
-label {
-  display: grid;
-  gap: 0.45rem;
-  color: var(--soft);
+.workspace-composer .workspace-send-btn {
+  width: 36px;
+  min-width: 36px;
+  height: 36px;
+  min-height: 36px;
+  padding: 0;
+  border-radius: 50%;
 }
 
-code {
-  display: inline-block;
-  max-width: 100%;
-  overflow-wrap: anywhere;
-  color: var(--accent);
-  font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
+.workspace-composer .workspace-send-btn > span {
+  display: none;
 }
 
-.app-shell,
-.no-script {
-  width: min(1180px, calc(100% - 32px));
-  margin: 0 auto;
-  padding: 32px 0 56px;
+.workspace-composer-note {
+  margin: 7px 4px 0;
+  color: #9a958d;
+  font-family: var(--body);
+  font-size: 8.5px;
+  text-align: center;
 }
 
-.shell-hero {
-  display: grid;
-  grid-template-columns: minmax(0, 1.35fr) minmax(280px, 0.65fr);
-  gap: 24px;
-  align-items: stretch;
-  padding: 28px;
-  border: 1px solid rgba(139, 211, 255, 0.18);
-  border-radius: 32px;
-  background: linear-gradient(135deg, rgba(23, 29, 40, 0.94), rgba(11, 15, 22, 0.92));
-  box-shadow: var(--shadow);
-}
-
-.eyebrow,
-.screen-heading p {
-  margin: 0 0 0.55rem;
-  color: var(--accent);
-  font-size: 0.76rem;
-  font-weight: 700;
-  letter-spacing: 0.12em;
-  text-transform: uppercase;
+.workspace-section-intro h3 {
+  color: #292622;
+  font-family: Georgia, "Times New Roman", serif;
+  font-weight: 500;
 }
 
-h1,
-h2,
-h3,
-p {
-  margin-top: 0;
+.workspace-section-intro p,
+.workspace-seat-result,
+.workspace-model-summary,
+.workspace-output-surface {
+  color: #716c64;
+}
+
+.workspace-seat,
+.workspace-council-composer,
+.workspace-model-row,
+.workspace-connection,
+.workspace-privacy-grid article,
+.workspace-tool-form,
+.workspace-output-surface,
+.workspace-browser-frame {
+  border-color: var(--line);
+  background: rgba(255, 255, 255, 0.72);
+  box-shadow: none;
 }
 
-h1 {
-  max-width: 860px;
-  margin-bottom: 0.8rem;
-  font-size: clamp(2.2rem, 5vw, 4.8rem);
-  line-height: 0.96;
-  letter-spacing: -0.06em;
+.workspace-output-surface img,
+.workspace-output-surface video,
+.workspace-browser-frame iframe {
+  background: #ebe8e1;
 }
 
-h2 {
-  margin-bottom: 0;
-  font-size: clamp(1.7rem, 3vw, 3rem);
-  letter-spacing: -0.04em;
+.workspace-danger-btn {
+  border-color: #d7a89b;
+  color: #a43e25;
+}
+
+@media (max-width: 920px) {
+  .workspace-layout {
+    grid-template-columns: 78px minmax(0, 1fr);
+  }
+
+  .workspace-sidebar-brand {
+    grid-template-columns: 1fr;
+    justify-items: center;
+  }
+
+  .workspace-sidebar-brand strong,
+  .workspace-mode-btn > span,
+  .workspace-boundary-note > div {
+    display: none;
+  }
+
+  .workspace-mode-nav {
+    display: flex;
+    grid-template-columns: none;
+  }
+
+  .workspace-mode-btn {
+    display: grid;
+    grid-template-columns: 1fr;
+    justify-items: center;
+  }
+
+  .workspace-boundary-note {
+    justify-content: center;
+  }
+
+  .workspace-view {
+    padding-inline: 22px;
+  }
 }
 
-h3 {
-  margin-bottom: 0.75rem;
-  font-size: 1rem;
+@media (max-width: 640px) {
+  .workspace-layout {
+    grid-template-columns: 1fr;
+  }
+
+  .workspace-sidebar {
+    display: none;
+  }
+
+  .workspace-prompt-grid {
+    grid-template-columns: 1fr;
+  }
+
+  .workspace-trust-lines,
+  .workspace-composer-note {
+    display: none;
+  }
+
+  .workspace-turn-controls .workspace-check {
+    display: none;
+  }
 }
 
-p {
-  color: var(--muted);
-  line-height: 1.6;
+#workspaceApiCreateBtn {
+  align-self: start;
+  justify-self: end;
+  min-height: 42px;
+  padding: 9px 18px;
 }
 
-.summary-grid {
+.workspace-api-create {
   display: grid;
-  grid-template-columns: repeat(2, minmax(0, 1fr));
+  grid-template-columns: minmax(220px, 1fr) 180px;
   gap: 12px;
-  margin: 0;
+  margin-top: 24px;
+  padding: 18px;
+  border: 1px solid var(--line);
+  background: rgba(255, 255, 255, 0.68);
 }
 
-.summary-grid div,
-.detail-list div {
-  padding: 14px;
-  border: 1px solid var(--line);
-  border-radius: 20px;
-  background: rgba(255, 255, 255, 0.03);
+.workspace-api-create > label {
+  display: flex;
+  flex-direction: column;
+  gap: 7px;
 }
 
-dt {
-  color: var(--muted);
-  font-size: 0.78rem;
+.workspace-api-create > label > span,
+.workspace-api-create legend,
+.workspace-api-secret > div:first-child > span {
+  color: var(--mute);
+  font-family: var(--mono);
+  font-size: 9px;
+  font-weight: 600;
+  letter-spacing: 0.12em;
+  text-transform: uppercase;
 }
 
-dd {
-  margin: 0.2rem 0 0;
-  color: var(--text);
-  font-weight: 700;
-  overflow-wrap: anywhere;
+.workspace-api-create input,
+.workspace-api-create select {
+  min-height: 42px;
+  padding: 9px 11px;
+  color: var(--ink);
+  border: 1px solid var(--line);
+  border-radius: 7px;
+  outline: 0;
+  background: #fff;
 }
 
-.screen-nav {
-  position: sticky;
-  top: 0;
-  z-index: 4;
+.workspace-api-create fieldset {
   display: flex;
-  gap: 10px;
-  margin: 18px 0;
+  grid-column: 1 / -1;
+  flex-wrap: wrap;
+  gap: 7px;
   padding: 12px;
-  overflow-x: auto;
-  border: 1px solid rgba(39, 48, 64, 0.82);
-  border-radius: 24px;
-  background: rgba(9, 11, 16, 0.82);
-  backdrop-filter: blur(18px);
+  border: 1px solid var(--line);
 }
 
-.screen-tab {
-  flex: 0 0 auto;
-  color: var(--soft);
-  background: transparent;
-  border-color: var(--line);
+.workspace-api-create fieldset label {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 6px 9px;
+  color: #625d56;
+  font-size: 10px;
+  border: 1px solid var(--line);
+  border-radius: 999px;
+  background: #fff;
 }
 
-.screen-tab.is-active {
-  color: #041018;
-  background: var(--accent);
-  border-color: var(--accent);
+.workspace-api-create fieldset input {
+  min-height: 0;
+  accent-color: var(--acc);
 }
 
-main {
+.workspace-api-secret {
   display: grid;
-  gap: 18px;
+  gap: 12px;
+  margin-top: 14px;
+  padding: 16px;
+  border: 1px solid rgba(239, 91, 42, 0.34);
+  background: rgba(239, 91, 42, 0.06);
 }
 
-.screen-card {
-  padding: 24px;
+.workspace-api-secret[hidden] {
+  display: none;
+}
+
+.workspace-api-secret > div:first-child {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.workspace-api-secret > div:first-child strong {
+  color: #3b3530;
+  font-size: 12px;
+  font-weight: 500;
+}
+
+.workspace-api-secret code {
+  display: block;
+  overflow-x: auto;
+  padding: 11px 12px;
+  color: #3c3029;
   border: 1px solid var(--line);
-  border-radius: 30px;
-  background: rgba(17, 21, 29, 0.88);
-  box-shadow: 0 18px 60px rgba(0, 0, 0, 0.18);
+  background: #fff;
+  font: 11px/1.5 var(--mono);
+  user-select: all;
 }
 
-.screen-heading {
+.workspace-api-list {
   display: flex;
-  align-items: end;
-  justify-content: space-between;
-  gap: 16px;
-  margin-bottom: 20px;
+  flex-direction: column;
+  margin-top: 10px;
+  border-top: 1px solid var(--line);
 }
 
-.two-column {
+.workspace-api-row {
   display: grid;
-  grid-template-columns: repeat(2, minmax(0, 1fr));
+  grid-template-columns: minmax(0, 1fr) auto auto;
   gap: 16px;
+  align-items: center;
+  min-height: 74px;
+  padding: 13px 2px;
+  border-bottom: 1px solid var(--line);
+}
+
+.workspace-api-row > div:first-child {
+  display: flex;
+  flex-direction: column;
+  gap: 5px;
+  min-width: 0;
 }
 
-.panel,
-.inline-form,
-.memory-row,
-.connection-list li,
-.evidence-row {
+.workspace-api-row > div:first-child strong {
+  color: #35312d;
+  font-size: 12px;
+  font-weight: 600;
+}
+
+.workspace-api-row > div:first-child span {
+  overflow: hidden;
+  color: var(--mute);
+  font: 9.5px/1.5 var(--mono);
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.workspace-api-status {
+  color: #756f67;
+  font: 9px/1 var(--mono);
+  letter-spacing: .08em;
+  text-transform: uppercase;
+}
+
+.workspace-api-status.active {
+  color: #417b59;
+}
+
+.workspace-api-status.revoked,
+.workspace-api-status.expired {
+  color: #a43e25;
+}
+
+.workspace-api-row button,
+.workspace-api-secret button {
+  min-height: 34px;
+  padding: 7px 11px;
+  color: var(--ink);
+  border: 1px solid var(--line);
+  background: #fff;
+  font: 9px/1 var(--mono);
+  letter-spacing: .06em;
+  text-transform: uppercase;
+  cursor: pointer;
+}
+
+@media (max-width: 760px) {
+  .workspace-api-create {
+    grid-template-columns: 1fr;
+  }
+
+  .workspace-api-create fieldset {
+    grid-column: 1;
+  }
+
+  .workspace-api-row {
+    grid-template-columns: 1fr auto;
+  }
+
+  .workspace-api-row .workspace-action-row {
+    grid-column: 1 / -1;
+  }
+}
+
+.workspace-usage-controls {
+  display: flex;
+  align-self: start;
+  justify-self: end;
+  gap: 7px;
+}
+
+.workspace-usage-controls select,
+.workspace-usage-controls button {
+  min-height: 38px;
+  padding: 8px 11px;
+  color: var(--ink);
   border: 1px solid var(--line);
-  border-radius: 24px;
-  background: var(--panel-strong);
+  background: #fff;
+  font-size: 10px;
+}
+
+.workspace-usage-controls button {
+  cursor: pointer;
 }
 
-.panel {
+.workspace-usage-summary {
   display: grid;
-  gap: 14px;
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+  margin-top: 24px;
+  border-top: 1px solid var(--line);
+  border-left: 1px solid var(--line);
+}
+
+.workspace-usage-summary article {
+  display: flex;
+  flex-direction: column;
+  gap: 5px;
+  min-height: 116px;
   padding: 18px;
+  border-right: 1px solid var(--line);
+  border-bottom: 1px solid var(--line);
+  background: rgba(255, 255, 255, 0.68);
+}
+
+.workspace-usage-summary article > span,
+.workspace-usage-grid > section > span {
+  color: var(--mute);
+  font: 9px/1 var(--mono);
+  letter-spacing: .12em;
+}
+
+.workspace-usage-summary strong {
+  color: #2c2925;
+  font-family: Georgia, "Times New Roman", serif;
+  font-size: 27px;
+  font-weight: 500;
 }
 
-.status-panel {
-  align-content: start;
+.workspace-usage-summary small {
+  color: var(--mute);
+  font-size: 9.5px;
 }
 
-.detail-list {
+.workspace-usage-grid {
   display: grid;
-  grid-template-columns: repeat(2, minmax(0, 1fr));
-  gap: 10px;
-  margin: 0;
+  grid-template-columns: 1fr 1fr;
+  gap: 14px;
+  margin-top: 14px;
+}
+
+.workspace-usage-grid > section {
+  min-height: 240px;
+  padding: 17px;
+  border: 1px solid var(--line);
+  background: rgba(255, 255, 255, 0.68);
 }
 
-.button-row,
-.button-grid {
+.workspace-usage-list {
   display: flex;
-  flex-wrap: wrap;
-  gap: 10px;
+  flex-direction: column;
+  gap: 14px;
+  margin-top: 18px;
+  color: var(--mute);
+  font-size: 10px;
 }
 
-.button-grid button {
-  flex: 1 1 220px;
+.workspace-usage-list > div {
+  display: flex;
+  flex-direction: column;
+  gap: 7px;
 }
 
-.inline-form {
-  display: grid;
-  grid-template-columns: minmax(0, 1fr) auto auto;
+.workspace-usage-list > div > div {
+  display: flex;
+  justify-content: space-between;
   gap: 12px;
-  align-items: end;
-  margin: 16px 0;
-  padding: 14px;
 }
 
-.inline-form span {
-  color: var(--muted);
-  font-size: 0.9rem;
+.workspace-usage-list strong {
+  overflow: hidden;
+  color: #4a4640;
+  font-size: 10.5px;
+  font-weight: 500;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 
-.memory-list,
-.connection-list,
-.evidence-list,
-.panel ul {
-  display: grid;
-  gap: 10px;
-  padding: 0;
-  margin: 0;
-  list-style: none;
+.workspace-usage-list > div > div > span {
+  color: var(--mute);
+  font: 9px/1 var(--mono);
+}
+
+.workspace-usage-track {
+  display: block;
+  height: 3px;
+  overflow: hidden;
+  background: #ebe7df;
+}
+
+.workspace-usage-track > span {
+  display: block;
+  width: 100%;
+  height: 100%;
+  background: var(--acc);
+  transform-origin: left center;
+}
+
+@media (max-width: 760px) {
+  .workspace-usage-summary {
+    grid-template-columns: 1fr 1fr;
+  }
+
+  .workspace-usage-grid {
+    grid-template-columns: 1fr;
+  }
 }
 
-.memory-row,
-.connection-list li,
-.evidence-row,
-.panel li {
+.workspace-credits-summary {
   display: grid;
-  grid-template-columns: minmax(0, 1fr) minmax(180px, 0.8fr) auto;
-  gap: 12px;
-  align-items: center;
-  padding: 14px;
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+  margin-top: 24px;
+  border-top: 1px solid var(--line);
+  border-left: 1px solid var(--line);
 }
 
-.boundary-list li {
-  grid-template-columns: minmax(0, 1fr);
-  align-items: start;
+.workspace-credits-summary article {
+  display: flex;
+  flex-direction: column;
+  gap: 5px;
+  min-height: 118px;
+  padding: 18px;
+  border-right: 1px solid var(--line);
+  border-bottom: 1px solid var(--line);
+  background: rgba(255, 255, 255, 0.68);
 }
 
-.memory-row div,
-.connection-list li,
-.evidence-row {
-  min-width: 0;
+.workspace-credits-summary span {
+  color: var(--mute);
+  font: 9px/1 var(--mono);
+  letter-spacing: .12em;
 }
 
-.memory-row span,
-.connection-list span,
-.evidence-row span,
-.evidence-row small,
-.panel li span {
-  display: block;
-  color: var(--muted);
-  overflow-wrap: anywhere;
+.workspace-credits-summary strong {
+  overflow: hidden;
+  color: #2c2925;
+  font-family: Georgia, "Times New Roman", serif;
+  font-size: 25px;
+  font-weight: 500;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 
-.memory-row.is-deleted,
-.evidence-row.is-bad {
-  border-color: rgba(255, 143, 143, 0.36);
+.workspace-credits-summary small {
+  color: var(--mute);
+  font-size: 9.5px;
 }
 
-.evidence-row.is-ok {
-  border-color: rgba(126, 226, 168, 0.38);
+.workspace-credits-actions {
+  display: grid;
+  grid-template-columns: auto minmax(260px, 1fr) auto auto;
+  gap: 8px;
+  align-items: end;
+  margin-top: 14px;
+  padding: 16px;
+  border: 1px solid var(--line);
+  background: rgba(255, 255, 255, 0.68);
 }
 
-.empty-row {
-  grid-template-columns: 1fr !important;
-  color: var(--muted);
-  border-style: dashed;
+.workspace-credits-actions label {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
 }
 
-.status-pill {
-  justify-self: start;
-  border: 1px solid rgba(139, 211, 255, 0.34);
-  border-radius: 999px;
-  padding: 0.32rem 0.72rem;
-  color: var(--accent);
-  background: rgba(139, 211, 255, 0.08);
-  font-size: 0.82rem;
-  font-weight: 700;
+.workspace-credits-actions label > span {
+  color: var(--mute);
+  font: 9px/1 var(--mono);
+  letter-spacing: .1em;
   text-transform: uppercase;
 }
 
-.honesty-note {
-  color: var(--warn);
+.workspace-credits-actions input,
+.workspace-credits-actions button {
+  min-height: 40px;
+  padding: 8px 12px;
+  color: var(--ink);
+  border: 1px solid var(--line);
+  background: #fff;
+  font-size: 10px;
 }
 
-@media (max-width: 820px) {
-  .shell-hero,
-  .two-column,
-  .inline-form,
-  .memory-row,
-  .connection-list li,
-  .evidence-row,
-  .panel li {
-    grid-template-columns: 1fr;
+.workspace-credits-actions button {
+  cursor: pointer;
+}
+
+.workspace-credits-actions .workspace-send-btn {
+  color: #fff;
+  border-color: #a64022;
+  background: var(--acc);
+}
+
+@media (max-width: 900px) {
+  .workspace-credits-summary {
+    grid-template-columns: 1fr 1fr;
   }
 
-  .screen-heading {
-    display: block;
+  .workspace-credits-actions {
+    grid-template-columns: 1fr;
   }
+}
+
+.workspace-payment-panel {
+  display: grid;
+  gap: 12px;
+  margin-top: 14px;
+  padding: 16px;
+  border: 1px solid var(--line);
+  background: rgba(255, 255, 255, 0.68);
+}
+
+.workspace-payment-panel > div:first-child {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.workspace-payment-panel > div:first-child span {
+  color: var(--acc);
+  font: 9px/1 var(--mono);
+  letter-spacing: .12em;
+}
+
+.workspace-payment-panel > div:first-child strong {
+  color: #3c3833;
+  font-size: 12px;
+  font-weight: 500;
+}
+
+.workspace-payment-controls,
+.workspace-payment-settle {
+  display: grid;
+  grid-template-columns: minmax(180px, 1fr) minmax(170px, .7fr) auto;
+  gap: 8px;
+}
 
-  .summary-grid,
-  .detail-list {
+.workspace-payment-settle {
+  grid-template-columns: minmax(260px, 1fr) auto auto;
+}
+
+.workspace-payment-panel select,
+.workspace-payment-panel input,
+.workspace-payment-panel button {
+  min-height: 39px;
+  padding: 8px 11px;
+  color: var(--ink);
+  border: 1px solid var(--line);
+  background: #fff;
+  font-size: 10px;
+}
+
+.workspace-payment-panel button {
+  cursor: pointer;
+}
+
+.workspace-payment-panel .workspace-send-btn {
+  color: #fff;
+  border-color: #a64022;
+  background: var(--acc);
+}
+
+.workspace-payment-panel pre {
+  min-height: 94px;
+  overflow: auto;
+  padding: 12px;
+  color: #6c665e;
+  border: 1px solid var(--line);
+  background: #faf9f6;
+  font: 9.5px/1.6 var(--mono);
+  white-space: pre-wrap;
+}
+
+@media (max-width: 800px) {
+  .workspace-payment-controls,
+  .workspace-payment-settle {
     grid-template-columns: 1fr;
   }
 }
+
+#workspacePaymentCheckoutBtn[hidden] {
+  display: none;
+}