crewswarm 0.9.2 → 0.9.4

package/apps/dashboard/src/styles.css

@@ -1,2085 +0,0 @@
-:root {
-  /* Backgrounds */
-  --bg: #060a10;
-  --bg-0: #040810;
-  --bg-1: #0d1420; /* alias: --bg-card */
-  --bg-2: #111827; /* alias: --bg-card2 */
-  --bg-card: #0d1420;
-  --bg-card2: #111827;
-  --bg-hover: #141e2e;
-  --surface-2: #16202e;
-
-  /* Borders */
-  --border: rgba(255, 255, 255, 0.07);
-  --border-hi: rgba(56, 189, 248, 0.35);
-
-  /* Text */
-  --text: #f0f6ff;
-  --text-1: #f0f6ff; /* alias: --text */
-  --text-2: #a0b3cc; /* Improved contrast from #8b9db3 for WCAG AA */
-  --text-3: #7a8a9f; /* Improved contrast from #4a5568 for WCAG AA */
-
-  /* Accent */
-  --accent: #38bdf8;
-  --accent2: #818cf8;
-  --purple: #818cf8; /* alias: --accent2 */
-
-  /* Semantic colors — muted (for backgrounds/borders) */
-  --green: #34d399;
-  --red: #f87171;
-  --yellow: #fbbf24;
-  --amber: #f59e0b;
-
-  /* Semantic colors — vivid (for text labels, badges) */
-  --green-hi: #22c55e;
-  --red-hi: #ef4444;
-  --sky: #38bdf8;
-
-  --blue: #4a7ab5; /* links, project paths */
-  --teal: #0f766e; /* provider model buttons */
-  --warning: #f59e0b;
-  --radius: 10px;
-}
-*,
-*::before,
-*::after {
-  box-sizing: border-box;
-  margin: 0;
-  padding: 0;
-}
-body {
-  font-family:
-    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu,
-    sans-serif;
-  background: var(--bg);
-  color: var(--text);
-  display: flex;
-  height: 100vh;
-  overflow: hidden;
-  font-size: 14px;
-  touch-action: manipulation;
-}
-
-/* ── Accessibility ── */
-/* Skip link for keyboard navigation */
-.skip-link {
-  position: absolute;
-  top: -40px;
-  left: 0;
-  background: var(--accent);
-  color: #000;
-  padding: 8px 16px;
-  text-decoration: none;
-  font-weight: 600;
-  border-radius: 0 0 4px 0;
-  z-index: 9999;
-}
-.skip-link:focus {
-  top: 0;
-}
-
-/* Focus visible styles for keyboard navigation */
-*:focus-visible {
-  outline: 3px solid var(--accent);
-  outline-offset: 2px;
-}
-
-/* Override for buttons and inputs to have better contrast */
-button:focus-visible,
-a:focus-visible,
-input:focus-visible,
-select:focus-visible,
-textarea:focus-visible {
-  outline: 3px solid var(--accent);
-  outline-offset: 2px;
-}
-
-/* ── Sidebar ── */
-.sidebar {
-  width: 216px;
-  min-width: 216px;
-  background: var(--bg-card);
-  border-right: 1px solid var(--border);
-  display: flex;
-  flex-direction: column;
-  overflow-y: auto;
-}
-.sidebar-brand {
-  display: flex;
-  align-items: center;
-  gap: 10px;
-  padding: 18px 16px 14px;
-  border-bottom: 1px solid var(--border);
-  text-decoration: none;
-}
-.brand-icon {
-  width: 24px;
-  height: 24px;
-  object-fit: contain;
-  display: block;
-}
-.brand-name {
-  font-size: 15px;
-  font-weight: 800;
-  color: var(--text);
-  letter-spacing: 0.06em;
-  text-transform: uppercase;
-}
-.brand-name span {
-  color: var(--accent);
-}
-.sidebar-status {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  padding: 10px 16px;
-  border-bottom: 1px solid var(--border);
-}
-.status-dot {
-  width: 7px;
-  height: 7px;
-  border-radius: 50%;
-  background: var(--text-3);
-  flex-shrink: 0;
-}
-.status-dot.online {
-  background: var(--green);
-  box-shadow: 0 0 6px var(--green);
-}
-.status-dot.error {
-  background: var(--red);
-}
-#status {
-  font-size: 12px;
-  color: var(--text-2);
-}
-.nav-section {
-  padding: 12px 8px 4px;
-}
-.nav-label {
-  font-size: 10px;
-  font-weight: 600;
-  color: var(--text-3);
-  letter-spacing: 0.08em;
-  text-transform: uppercase;
-  padding: 0 8px 6px;
-}
-.nav-item {
-  display: flex;
-  align-items: center;
-  gap: 9px;
-  width: 100%;
-  padding: 8px 10px;
-  border-radius: 7px;
-  border: none;
-  background: transparent;
-  color: var(--text-2);
-  font-size: 13px;
-  font-weight: 500;
-  cursor: pointer;
-  text-align: left;
-  transition:
-    background 0.12s,
-    color 0.12s;
-  font-family: inherit;
-}
-.stab {
-  padding: 7px 16px;
-  border: none;
-  background: transparent;
-  color: var(--text-2);
-  font-size: 13px;
-  font-weight: 500;
-  cursor: pointer;
-  border-bottom: 2px solid transparent;
-  margin-bottom: -1px;
-  font-family: inherit;
-  transition:
-    color 0.12s,
-    border-color 0.12s;
-  white-space: nowrap;
-}
-.stab:hover {
-  color: var(--text-1);
-}
-.stab.active {
-  color: var(--accent);
-  border-bottom-color: var(--accent);
-}
-.nav-item:hover {
-  background: var(--bg-hover);
-  color: var(--text);
-}
-.nav-item.active {
-  background: rgba(56, 189, 248, 0.1);
-  color: var(--accent);
-}
-.nav-item .nav-icon {
-  font-size: 15px;
-  width: 18px;
-  text-align: center;
-}
-.nav-badge {
-  margin-left: auto;
-  background: var(--red);
-  color: #fff;
-  font-size: 10px;
-  font-weight: 700;
-  padding: 1px 6px;
-  border-radius: 999px;
-  min-width: 18px;
-  text-align: center;
-}
-.nav-badge.hidden {
-  display: none;
-}
-.sidebar-bottom {
-  margin-top: auto;
-  padding: 12px 8px;
-  border-top: 1px solid var(--border);
-}
-
-/* ── Main wrap ── */
-.main-wrap {
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  overflow: hidden;
-}
-.view {
-  display: none;
-  flex: 1;
-  overflow-y: auto;
-  padding: 24px;
-}
-.view.active {
-  display: block;
-}
-.view-sessions {
-  display: none;
-  flex: 1;
-  overflow: hidden;
-}
-.view-sessions.active {
-  display: grid;
-  grid-template-columns: 34% 66%;
-}
-.view-sessions > section {
-  padding: 16px;
-  overflow-y: auto;
-}
-.view-sessions > section + section {
-  border-left: 1px solid var(--border);
-}
-
-/* ── Msg bar ── */
-.msg-bar {
-  padding: 10px 16px;
-  border-top: 1px solid var(--border);
-  background: var(--bg-card);
-  display: flex;
-  gap: 8px;
-  align-items: center;
-  flex-shrink: 0;
-}
-
-/* ── Cards / content ── */
-.card {
-  background: var(--bg-card);
-  border: 1px solid var(--border);
-  border-radius: var(--radius);
-  padding: 16px;
-  margin-bottom: 12px;
-}
-.card-title {
-  font-size: 15px;
-  font-weight: 600;
-  margin-bottom: 4px;
-}
-.status-badge {
-  display: inline-flex;
-  align-items: center;
-  gap: 5px;
-  font-size: 12px;
-  font-weight: 600;
-  padding: 4px 10px;
-  border-radius: 20px;
-  letter-spacing: 0.02em;
-}
-.status-active {
-  background: rgba(34, 197, 94, 0.15);
-  color: var(--green-hi);
-  border: 1px solid rgba(34, 197, 94, 0.3);
-}
-.status-running {
-  background: rgba(34, 197, 94, 0.15);
-  color: var(--green-hi);
-  border: 1px solid rgba(34, 197, 94, 0.3);
-}
-.status-stopped {
-  background: rgba(239, 68, 68, 0.12);
-  color: var(--red-hi);
-  border: 1px solid rgba(239, 68, 68, 0.25);
-}
-.meta {
-  font-size: 12px;
-  color: var(--text-2);
-}
-.page-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: flex-start;
-  margin-bottom: 20px;
-}
-.page-title {
-  font-size: 18px;
-  font-weight: 700;
-  letter-spacing: -0.3px;
-}
-.page-sub {
-  font-size: 13px;
-  color: var(--text-2);
-  margin-top: 3px;
-}
-h3 {
-  font-size: 14px;
-  font-weight: 600;
-  margin-bottom: 8px;
-}
-
-/* ── Messages ── */
-.msg {
-  border: 1px solid var(--border);
-  border-radius: var(--radius);
-  padding: 10px 12px;
-  margin-bottom: 8px;
-  background: var(--bg-card);
-}
-.msg.u {
-  border-left: 3px solid var(--accent);
-  background: rgba(56, 189, 248, 0.07);
-  margin-left: 40px;
-}
-.msg.a {
-  border-left: 3px solid var(--green);
-  background: rgba(52, 211, 153, 0.04);
-}
-.dlq-item {
-  border-left: 3px solid var(--red) !important;
-}
-.t {
-  white-space: pre-wrap;
-  font-size: 13px;
-  line-height: 1.5;
-  font-family: "SF Mono", "Fira Code", monospace;
-}
-
-/* ── Chat Bubbles (streaming + final) ── */
-.chat-bubble {
-  background: var(--surface-2);
-  border-radius: 10px;
-  padding: 12px 14px;
-  font-size: 14px;
-  line-height: 1.6;
-  white-space: pre-wrap;
-  word-break: break-word;
-  max-width: 85%;
-  will-change: contents;
-  contain: layout style paint;
-}
-.chat-bubble.user {
-  background: rgba(56, 189, 248, 0.1);
-  border: 1px solid rgba(56, 189, 248, 0.2);
-  margin-left: auto;
-}
-.chat-bubble.assistant {
-  background: var(--bg-card);
-  border: 1px solid var(--border);
-}
-
-/* ── Project Tabs ── */
-#chatProjectTabs {
-  scrollbar-width: thin;
-  scrollbar-color: var(--border) transparent;
-}
-#chatProjectTabs::-webkit-scrollbar {
-  height: 4px;
-}
-#chatProjectTabs::-webkit-scrollbar-track {
-  background: transparent;
-}
-#chatProjectTabs::-webkit-scrollbar-thumb {
-  background: var(--border);
-  border-radius: 2px;
-}
-.project-tab {
-  padding: 6px 14px;
-  border-radius: 6px;
-  font-size: 12px;
-  white-space: nowrap;
-  cursor: pointer;
-  border: none;
-  background: rgba(255, 255, 255, 0.04);
-  color: var(--text-2);
-  font-weight: 500;
-  transition: all 0.2s;
-  font-family: inherit;
-}
-.project-tab:hover {
-  background: rgba(255, 255, 255, 0.08);
-}
-.project-tab.active {
-  background: var(--accent);
-  color: var(--bg);
-  font-weight: 600;
-}
-.row {
-  padding: 10px 12px;
-  border: 1px solid var(--border);
-  border-radius: var(--radius);
-  margin-bottom: 8px;
-  cursor: pointer;
-  background: var(--bg-card);
-  transition:
-    border-color 0.12s,
-    background 0.12s;
-}
-.row:hover {
-  background: var(--bg-hover);
-}
-.row.active {
-  border-color: var(--accent);
-  background: rgba(56, 189, 248, 0.06);
-}
-
-/* ── Buttons ── */
-button {
-  background: var(--accent);
-  color: #000;
-  border: none;
-  border-radius: 7px;
-  padding: 7px 14px;
-  cursor: pointer;
-  font-weight: 600;
-  font-size: 13px;
-  font-family: inherit;
-  transition: opacity 0.12s;
-}
-button:hover {
-  opacity: 0.85;
-}
-.btn-ghost {
-  background: transparent;
-  color: var(--text-2);
-  border: 1px solid var(--border);
-}
-.btn-ghost:hover {
-  background: var(--bg-hover);
-  color: var(--text);
-}
-.btn-green {
-  background: var(--green);
-  color: #000;
-}
-.btn-sky {
-  background: #0ea5e9;
-  color: #000;
-  border: 1px solid #0ea5e9;
-}
-.btn-sky:hover {
-  background: var(--accent);
-}
-.btn-red {
-  background: var(--red);
-  color: #fff;
-}
-.btn-yellow {
-  background: var(--yellow);
-  color: #000;
-}
-.btn-purple {
-  background: var(--accent2);
-  color: #fff;
-}
-.btn-muted {
-  background: var(--bg-card2);
-  color: var(--text-2);
-  border: 1px solid var(--border);
-}
-.reply-btn {
-  font-size: 11px;
-  padding: 3px 8px;
-  background: var(--accent2);
-  color: #fff;
-  margin-left: 8px;
-}
-.replay-btn {
-  font-size: 11px;
-  padding: 3px 8px;
-  background: var(--yellow);
-  color: #000;
-  margin-left: 8px;
-}
-.send-btn {
-  background: var(--green);
-  color: #000;
-}
-/* ── Emoji picker ── */
-.emoji-btn {
-  width: 46px;
-  height: 46px;
-  font-size: 22px;
-  background: rgba(255, 255, 255, 0.04);
-  border: 1px solid rgba(255, 255, 255, 0.1);
-  border-radius: var(--radius);
-  cursor: pointer;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  flex-shrink: 0;
-  transition:
-    border-color 0.15s,
-    background 0.15s;
-  color: inherit;
-}
-.emoji-btn:hover {
-  border-color: var(--accent);
-  background: rgba(56, 189, 248, 0.08);
-}
-.emoji-picker-wrap {
-  position: relative;
-  flex-shrink: 0;
-}
-.emoji-picker-panel {
-  display: none;
-  position: absolute;
-  top: 50px;
-  right: 0;
-  z-index: 200;
-  background: var(--bg-card);
-  border: 1px solid var(--border-hi);
-  border-radius: var(--radius);
-  padding: 10px;
-  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
-  width: 260px;
-}
-.emoji-picker-panel.open {
-  display: block;
-}
-.emoji-grid {
-  display: grid;
-  grid-template-columns: repeat(6, 1fr);
-  gap: 6px;
-}
-.emoji-opt {
-  font-size: 22px;
-  width: 36px;
-  height: 36px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  cursor: pointer;
-  border-radius: 6px;
-  transition: background 0.1s;
-}
-.emoji-opt:hover {
-  background: rgba(56, 189, 248, 0.15);
-}
-
-/* Files view */
-.file-row {
-  display: flex;
-  align-items: center;
-  gap: 10px;
-  padding: 8px 12px;
-  background: var(--bg-card);
-  border: 1px solid var(--border);
-  border-radius: 6px;
-  transition: border-color 0.15s;
-}
-.file-row:hover {
-  border-color: var(--accent);
-}
-.file-info {
-  flex: 1;
-  min-width: 0;
-}
-.file-name {
-  display: block;
-  font-size: 13px;
-  color: var(--text);
-  font-family: "SF Mono", "Fira Code", monospace;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-.file-meta {
-  font-size: 11px;
-  color: var(--text-2);
-}
-.file-actions {
-  display: flex;
-  gap: 5px;
-  flex-shrink: 0;
-}
-.file-btn {
-  font-size: 11px;
-  padding: 3px 8px;
-  border-radius: 4px;
-  border: 1px solid var(--border);
-  background: var(--bg-card2);
-  color: var(--text-2);
-  cursor: pointer;
-  text-decoration: none;
-  transition: all 0.15s;
-  white-space: nowrap;
-}
-.file-btn:hover {
-  color: var(--text);
-  border-color: var(--accent);
-}
-.file-btn-cursor {
-  border-color: rgba(99, 102, 241, 0.4);
-  color: #818cf8;
-}
-.file-btn-cursor:hover {
-  background: rgba(99, 102, 241, 0.15);
-}
-.file-btn-opencode {
-  border-color: rgba(52, 211, 153, 0.4);
-  color: #34d399;
-}
-.file-btn-opencode:hover {
-  background: rgba(52, 211, 153, 0.1);
-}
-
-/* ── Form inputs — single source of truth ── */
-select,
-input[type="text"],
-input[type="password"],
-input[type="number"],
-input[type="email"],
-input:not([type]),
-textarea {
-  background: var(--bg-1);
-  color: var(--text-1);
-  border: 1px solid var(--border);
-  border-radius: 6px;
-  padding: 6px 10px;
-  font-size: 13px;
-  font-family: inherit;
-  outline: none;
-  transition:
-    border-color 0.15s,
-    background 0.15s,
-    box-shadow 0.15s;
-  width: 100%;
-  box-sizing: border-box;
-}
-select:focus,
-input:not([type]):focus,
-input[type="text"]:focus,
-input[type="password"]:focus,
-input[type="number"]:focus,
-input[type="email"]:focus,
-textarea:focus {
-  border-color: var(--accent);
-  background: rgba(56, 189, 248, 0.04);
-  box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.08);
-}
-select {
-  cursor: pointer;
-}
-::placeholder {
-  color: var(--text-3);
-  opacity: 1;
-}
-input[type="text"] {
-  flex: 1;
-}
-textarea {
-  resize: vertical;
-  width: 100%;
-}
-input,
-textarea,
-select {
-  user-select: text;
-  -webkit-user-select: text;
-  cursor: text;
-}
-
-/* ── Input size variants — use instead of inline styles ── */
-/* .inp-sm  — compact rows (env vars, config tables) */
-.inp-sm {
-  padding: 5px 8px !important;
-  font-size: 12px !important;
-}
-/* .inp-xs  — very tight rows (number spinners, short codes) */
-.inp-xs {
-  padding: 3px 6px !important;
-  font-size: 12px !important;
-  width: auto !important;
-}
-/* .inp-mono — monospace content (keys, paths, code) */
-.inp-mono {
-  font-family: "SF Mono", "Fira Code", ui-monospace, monospace !important;
-}
-/* .inp-flex — takes remaining row width */
-.inp-flex {
-  flex: 1;
-  width: auto !important;
-}
-
-/* ── Notification ── */
-.notification {
-  position: fixed;
-  top: 20px;
-  right: 20px;
-  background: var(--green);
-  color: #000;
-  padding: 12px 20px;
-  border-radius: 8px;
-  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
-  z-index: 1000;
-  animation: slideIn 0.25s ease;
-  font-weight: 600;
-  font-size: 13px;
-}
-.notification.error {
-  background: var(--red);
-  color: #fff;
-}
-.notification.warning {
-  background: var(--amber);
-  color: #000;
-}
-@keyframes slideIn {
-  from {
-    transform: translateX(120%);
-    opacity: 0;
-  }
-  to {
-    transform: translateX(0);
-    opacity: 1;
-  }
-}
-@keyframes pulse {
-  0%,
-  100% {
-    opacity: 0.3;
-    transform: scale(0.85);
-  }
-  50% {
-    opacity: 1;
-    transform: scale(1.15);
-  }
-}
-
-/* ── Terminal / log blocks ── */
-.log-block {
-  background: var(--bg);
-  border: 1px solid var(--border);
-  border-radius: var(--radius);
-  padding: 12px;
-  font-family: "SF Mono", "Fira Code", monospace;
-  font-size: 12px;
-  color: var(--accent);
-  max-height: 220px;
-  overflow-y: auto;
-  white-space: pre-wrap;
-  line-height: 1.5;
-}
-.rm-textarea {
-  width: 100%;
-  font-family: "SF Mono", "Fira Code", monospace;
-  font-size: 12px;
-  background: var(--bg);
-  color: var(--text-2);
-  border: 1px solid var(--border);
-  border-radius: 8px;
-  padding: 12px;
-  line-height: 1.6;
-  resize: vertical;
-  box-sizing: border-box;
-}
-.log-block.green {
-  color: var(--green);
-  border-color: rgba(52, 211, 153, 0.2);
-}
-.log-block.mono {
-  color: var(--text-2);
-}
-
-/* ── Provider cards ── */
-.provider-card {
-  background: var(--bg-card);
-  border: 1px solid var(--border);
-  border-radius: var(--radius);
-  overflow: hidden;
-  margin-bottom: 10px;
-}
-.provider-header {
-  display: flex;
-  align-items: center;
-  gap: 12px;
-  padding: 13px 16px;
-  cursor: pointer;
-  user-select: none;
-  transition: background 0.12s;
-}
-.provider-header:hover {
-  background: var(--bg-hover);
-}
-.provider-badge {
-  font-size: 11px;
-  padding: 2px 8px;
-  border-radius: 999px;
-  font-weight: 600;
-}
-.provider-body {
-  display: none;
-  padding: 16px;
-  border-top: 1px solid var(--border);
-  background: var(--bg);
-}
-.provider-body.open {
-  display: block;
-}
-.key-row {
-  display: flex;
-  gap: 8px;
-  align-items: center;
-  margin-bottom: 12px;
-}
-.key-input {
-  flex: 1;
-  font-family: "SF Mono", "Fira Code", ui-monospace, monospace;
-}
-.model-tag {
-  display: inline-block;
-  background: var(--bg-card2);
-  border: 1px solid var(--border);
-  border-radius: 5px;
-  padding: 2px 8px;
-  font-size: 11px;
-  margin: 2px;
-  font-family: "SF Mono", monospace;
-  color: var(--text-2);
-}
-.test-ok {
-  color: var(--green);
-  font-size: 12px;
-  margin-left: 8px;
-  font-weight: 600;
-}
-.test-err {
-  color: var(--red);
-  font-size: 12px;
-  margin-left: 8px;
-}
-
-/* ── PM badge ── */
-.pm-badge {
-  font-size: 11px;
-  padding: 2px 10px;
-  border-radius: 999px;
-  font-weight: 600;
-  margin-left: 10px;
-  background: var(--bg-card2);
-  color: var(--text-2);
-  border: 1px solid var(--border);
-}
-.pm-badge.running {
-  background: rgba(52, 211, 153, 0.1);
-  color: var(--green);
-  border-color: rgba(52, 211, 153, 0.3);
-}
-
-/* ── Progress bar ── */
-.prog-bar {
-  height: 4px;
-  background: var(--bg-card2);
-  border-radius: 2px;
-  overflow: hidden;
-  margin: 8px 0;
-}
-.prog-fill {
-  height: 100%;
-  border-radius: 2px;
-  transition: width 0.3s;
-}
-
-/* ── Divider ── */
-.divider {
-  border: none;
-  border-top: 1px solid var(--border);
-  margin: 20px 0;
-}
-
-/* ── Agent cards ── */
-.agent-card {
-  background: var(--bg-card);
-  border: 1px solid var(--border);
-  border-radius: var(--radius);
-  overflow: hidden;
-}
-.agent-card-header {
-  display: flex;
-  align-items: center;
-  gap: 12px;
-  padding: 14px 16px;
-}
-.agent-avatar {
-  width: 38px;
-  height: 38px;
-  border-radius: 10px;
-  background: var(--bg-card2);
-  border: 1px solid var(--border);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-size: 18px;
-  flex-shrink: 0;
-}
-.agent-meta {
-  flex: 1;
-  min-width: 0;
-}
-.agent-id {
-  font-weight: 700;
-  font-size: 14px;
-}
-.agent-model {
-  font-size: 12px;
-  color: var(--text-2);
-  font-family: "SF Mono", monospace;
-  margin-top: 2px;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-.agent-body {
-  border-top: 1px solid var(--border);
-  padding: 14px 16px;
-  background: var(--bg);
-  display: grid;
-  gap: 12px;
-}
-.agent-row {
-  display: grid;
-  grid-template-columns: 110px 1fr auto auto;
-  gap: 8px;
-  align-items: center;
-}
-.agent-row label {
-  font-size: 12px;
-  color: var(--text-2);
-  font-weight: 500;
-}
-.agent-badge {
-  font-size: 11px;
-  padding: 2px 8px;
-  border-radius: 999px;
-  background: rgba(56, 189, 248, 0.1);
-  color: var(--accent);
-  border: 1px solid rgba(56, 189, 248, 0.2);
-  font-weight: 600;
-}
-.agent-badge.online {
-  background: rgba(52, 211, 153, 0.1);
-  color: var(--green);
-  border-color: rgba(52, 211, 153, 0.3);
-}
-.field-label {
-  font-size: 11px;
-  font-weight: 600;
-  color: var(--text-2);
-  margin-bottom: 5px;
-  text-transform: uppercase;
-  letter-spacing: 0.05em;
-}
-.tool-profile-opt {
-  cursor: pointer;
-}
-.tool-profile-opt input[type="radio"] {
-  display: none;
-}
-.tp-card {
-  border: 1px solid var(--border);
-  border-radius: 8px;
-  padding: 10px 12px;
-  transition:
-    border-color 0.12s,
-    background 0.12s;
-}
-.tool-profile-opt:hover .tp-card {
-  border-color: var(--accent);
-  background: var(--bg-hover);
-}
-.tool-profile-opt input:checked + .tp-card {
-  border-color: var(--accent);
-  background: rgba(56, 189, 248, 0.07);
-}
-.tp-name {
-  font-size: 13px;
-  font-weight: 700;
-  margin-bottom: 4px;
-  color: var(--text);
-  font-family: "SF Mono", monospace;
-}
-.tp-desc {
-  font-size: 11px;
-  color: var(--text-2);
-  line-height: 1.4;
-}
-
-/* ── Scrollbar ── */
-::-webkit-scrollbar {
-  width: 5px;
-  height: 5px;
-}
-::-webkit-scrollbar-track {
-  background: transparent;
-}
-::-webkit-scrollbar-thumb {
-  background: var(--border);
-  border-radius: 3px;
-}
-#rtView::-webkit-scrollbar {
-  width: 8px;
-}
-#rtView::-webkit-scrollbar-track {
-  background: var(--bg-card);
-  border-radius: 4px;
-}
-#rtView::-webkit-scrollbar-thumb {
-  background: var(--accent);
-  border-radius: 4px;
-  opacity: 0.7;
-}
-#rtView::-webkit-scrollbar-thumb:hover {
-  background: var(--accent);
-  opacity: 1;
-}
-#rtView {
-  scrollbar-width: thin;
-  scrollbar-color: var(--accent) var(--bg-card);
-}
-
-/* ── Responsive / Mobile ─────────────────────────────────────────── */
-@media (max-width: 1100px) {
-  body {
-    flex-direction: column;
-  }
-  .sidebar {
-    width: 100% !important;
-    min-width: 0 !important;
-    flex-direction: row;
-    flex-wrap: wrap;
-    padding: 8px 12px;
-    gap: 4px;
-    border-right: none;
-    border-bottom: 1px solid var(--border);
-  }
-  .sidebar .nav-item {
-    padding: 6px 10px;
-    font-size: 12px;
-  }
-  .sidebar .nav-section {
-    display: flex;
-    flex-wrap: wrap;
-    padding: 0;
-    gap: 4px;
-  }
-  .sidebar .nav-label {
-    display: none;
-  }
-  .sidebar .sidebar-bottom {
-    display: none;
-  }
-  .main-wrap {
-    min-width: 0;
-  }
-}
-
-@media (max-width: 768px) {
-  .sidebar .nav-label {
-    display: none;
-  }
-  .sidebar .nav-item {
-    padding: 8px;
-    min-width: 36px;
-    justify-content: center;
-  }
-  #servicesGrid,
-  #agentsList,
-  #projectsList,
-  #runSkillsGrid {
-    grid-template-columns: 1fr !important;
-  }
-  .chat-input-row {
-    flex-wrap: wrap;
-    gap: 6px;
-  }
-  .chat-input-row button {
-    height: 44px;
-  }
-  #chatInput {
-    min-height: 44px;
-  }
-  .page-header {
-    flex-direction: column;
-    align-items: flex-start;
-    gap: 8px;
-  }
-  .page-header .actions {
-    flex-wrap: wrap;
-  }
-  /* Mobile responsive containers */
-  .container,
-  .dashboard-grid,
-  .view,
-  .card {
-    width: 100%;
-    max-width: 100%;
-    padding: 1rem;
-  }
-  /* Responsive images and videos */
-  img,
-  video {
-    max-width: 100%;
-    height: auto;
-  }
-  /* Ensure all interactive elements meet touch target size */
-  button,
-  a,
-  .nav-item,
-  input,
-  select,
-  textarea {
-    min-height: 44px;
-  }
-}
-
-@media (max-width: 480px) {
-  body {
-    font-size: 13px;
-  }
-  .card {
-    padding: 12px;
-  }
-  .card-title {
-    font-size: 14px;
-  }
-  .page-title {
-    font-size: 18px;
-  }
-  .tab-bar {
-    flex-wrap: wrap;
-    gap: 4px;
-  }
-  .stab {
-    padding: 4px 10px;
-    font-size: 11px;
-  }
-  /* Touch-friendly buttons and inputs */
-  button {
-    min-height: 44px;
-    font-size: 16px;
-    padding: 8px 16px;
-  }
-  input,
-  select,
-  textarea {
-    font-size: 16px;
-    min-height: 44px;
-  }
-  /* Prevent zoom on input focus */
-  input:focus,
-  select:focus,
-  textarea:focus {
-    font-size: 16px;
-  }
-}
-
-/* ── Prompts Tab ── */
-.prompt-card {
-  background: var(--bg-card);
-  border: 1px solid var(--border);
-  border-radius: var(--radius);
-  padding: 16px;
-  transition: all 0.2s;
-}
-.prompt-card:hover {
-  border-color: var(--border-hi);
-  background: var(--bg-hover);
-}
-.prompt-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: flex-start;
-  margin-bottom: 12px;
-  gap: 12px;
-}
-.prompt-preview {
-  font-size: 12px;
-  color: var(--text-2);
-  line-height: 1.5;
-  font-family: "SF Mono", Monaco, monospace;
-  white-space: pre-wrap;
-  word-break: break-word;
-}
-.prompt-edit-btn {
-  flex-shrink: 0;
-}
-
-/* ── Agent Chat Tab ── */
-.agent-info-card {
-  background: var(--bg-card);
-  border: 1px solid var(--border);
-  border-radius: 8px;
-  padding: 16px;
-}
-
-.agent-info-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  margin-bottom: 12px;
-}
-
-.agent-info-header h4 {
-  margin: 0;
-  font-size: 16px;
-  font-weight: 600;
-}
-
-.agent-status {
-  padding: 4px 10px;
-  border-radius: 12px;
-  font-size: 11px;
-  font-weight: 600;
-  text-transform: uppercase;
-  letter-spacing: 0.05em;
-}
-
-.agent-status.active {
-  background: var(--green-hi);
-  color: #000;
-}
-
-.agent-status.idle {
-  background: var(--bg-card2);
-  color: var(--text-3);
-}
-
-.agent-info-details {
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-}
-
-.detail-row {
-  display: flex;
-  justify-content: space-between;
-  font-size: 13px;
-  align-items: center;
-}
-
-.detail-row .label {
-  color: var(--text-3);
-  font-weight: 600;
-}
-
-.detail-row .value {
-  color: var(--text-1);
-  font-family: "SF Mono", Monaco, monospace;
-  font-size: 12px;
-}
-
-#agentChatMessages {
-  display: flex;
-  flex-direction: column;
-  gap: 12px;
-}
-
-.user-message,
-.agent-message {
-  padding: 12px 16px;
-  border-radius: 12px;
-  max-width: 75%;
-  word-wrap: break-word;
-}
-
-.user-message {
-  background: var(--accent);
-  color: #fff;
-  align-self: flex-end;
-  border-bottom-right-radius: 4px;
-}
-
-.agent-message {
-  background: var(--bg-card);
-  border: 1px solid var(--border);
-  align-self: flex-start;
-  border-bottom-left-radius: 4px;
-}
-
-.message-header {
-  display: flex;
-  justify-content: space-between;
-  margin-bottom: 6px;
-  font-size: 11px;
-  font-weight: 600;
-  text-transform: uppercase;
-  letter-spacing: 0.05em;
-  opacity: 0.8;
-}
-
-.message-time {
-  color: var(--text-3);
-  font-size: 10px;
-  font-weight: 400;
-  text-transform: none;
-  letter-spacing: 0;
-}
-
-.message-content {
-  font-size: 14px;
-  line-height: 1.6;
-}
-
-.message-content code {
-  background: rgba(0, 0, 0, 0.3);
-  padding: 2px 6px;
-  border-radius: 4px;
-  font-family: "SF Mono", Monaco, monospace;
-  font-size: 13px;
-}
-
-.message-content pre {
-  background: rgba(0, 0, 0, 0.4);
-  padding: 12px;
-  border-radius: 6px;
-  overflow-x: auto;
-  margin: 8px 0;
-  border: 1px solid var(--border);
-}
-
-.message-content pre code {
-  background: none;
-  padding: 0;
-}
-
-.message-content a {
-  color: var(--accent);
-  text-decoration: none;
-}
-
-.message-content a:hover {
-  text-decoration: underline;
-}
-
-.process-card {
-  background: var(--bg-card);
-  padding: 12px;
-  border-radius: 8px;
-  margin-bottom: 8px;
-}
-
-.process-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  margin-bottom: 8px;
-}
-
-.process-cli {
-  font-weight: 600;
-  font-family: "SF Mono", Monaco, monospace;
-  font-size: 13px;
-}
-
-.process-status {
-  text-transform: uppercase;
-  font-size: 11px;
-  font-weight: 700;
-  color: var(--text-3);
-  letter-spacing: 0.05em;
-}
-
-.process-details {
-  font-size: 12px;
-  color: var(--text-2);
-  line-height: 1.6;
-  font-family: "SF Mono", Monaco, monospace;
-}
-
-.empty-state {
-  text-align: center;
-  padding: 60px 20px;
-  color: var(--text-3);
-  font-size: 14px;
-}
-
-.process-status-empty {
-  padding: 12px;
-  text-align: center;
-  color: var(--text-3);
-  font-size: 12px;
-  font-style: italic;
-}
-
-#workflowsLayout {
-  display: grid;
-  grid-template-columns: minmax(260px, 340px) minmax(420px, 1fr);
-  gap: 16px;
-  align-items: start;
-}
-
-@media (max-width: 980px) {
-  #workflowsLayout {
-    grid-template-columns: 1fr;
-  }
-}
-
-/* ── Setup Wizard Overlay ──────────────────────────────────────────────────── */
-
-.setup-wizard-overlay {
-  position: fixed;
-  inset: 0;
-  z-index: 9999;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  background: rgba(4, 8, 16, 0.92);
-  backdrop-filter: blur(12px);
-  -webkit-backdrop-filter: blur(12px);
-  opacity: 0;
-  transition: opacity 260ms ease;
-}
-
-.setup-wizard-overlay.visible {
-  opacity: 1;
-}
-
-.setup-wizard-overlay.dismissing {
-  opacity: 0;
-}
-
-.setup-wizard-card {
-  width: 100%;
-  max-width: 520px;
-  margin: 0 16px;
-  background: var(--bg-card);
-  border: 1px solid var(--border);
-  border-radius: 16px;
-  padding: 40px 36px 32px;
-  box-shadow:
-    0 0 0 1px rgba(255, 255, 255, 0.04),
-    0 24px 64px rgba(0, 0, 0, 0.5);
-  transform: translateY(12px) scale(0.98);
-  opacity: 0;
-  transition:
-    transform 300ms cubic-bezier(0.16, 1, 0.3, 1),
-    opacity 300ms ease;
-}
-
-.setup-wizard-card.visible {
-  transform: translateY(0) scale(1);
-  opacity: 1;
-}
-
-/* ── Step indicator ── */
-
-.setup-wizard-steps {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: 0;
-  margin-bottom: 32px;
-}
-
-.setup-wizard-step {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 6px;
-}
-
-.setup-wizard-step-dot {
-  width: 10px;
-  height: 10px;
-  border-radius: 50%;
-  border: 2px solid var(--text-3);
-  background: transparent;
-  padding: 0;
-  cursor: default;
-  transition:
-    background 200ms ease,
-    border-color 200ms ease,
-    box-shadow 200ms ease;
-}
-
-.setup-wizard-step-dot.active {
-  border-color: var(--accent);
-  background: var(--accent);
-  box-shadow: 0 0 8px rgba(56, 189, 248, 0.4);
-}
-
-.setup-wizard-step-dot.completed {
-  border-color: var(--green);
-  background: var(--green);
-}
-
-.setup-wizard-step-label {
-  font-size: 11px;
-  color: var(--text-3);
-  font-weight: 500;
-  letter-spacing: 0.02em;
-}
-
-.setup-wizard-step .active ~ .setup-wizard-step-label,
-.setup-wizard-step-dot.active + .setup-wizard-step-label {
-  color: var(--accent);
-}
-
-.setup-wizard-step-dot.completed + .setup-wizard-step-label {
-  color: var(--green);
-}
-
-.setup-wizard-step-line {
-  width: 48px;
-  height: 2px;
-  background: var(--text-3);
-  margin: 0 12px;
-  margin-bottom: 18px;
-  border-radius: 1px;
-  transition: background 200ms ease;
-}
-
-.setup-wizard-step-line.completed {
-  background: var(--green);
-}
-
-/* ── Content area ── */
-
-.setup-wizard-content {
-  display: flex;
-  flex-direction: column;
-}
-
-/* ── Step 1: Welcome hero ── */
-
-.setup-wizard-hero {
-  text-align: center;
-  margin-bottom: 28px;
-}
-
-.setup-wizard-logo-ring {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: 64px;
-  height: 64px;
-  border-radius: 16px;
-  background: var(--bg-card2);
-  border: 1px solid var(--border);
-  margin-bottom: 20px;
-}
-
-.setup-wizard-logo {
-  width: 36px;
-  height: 36px;
-}
-
-.setup-wizard-title {
-  font-size: 24px;
-  font-weight: 700;
-  color: var(--text);
-  line-height: 1.2;
-  margin-bottom: 8px;
-  letter-spacing: -0.02em;
-}
-
-.setup-wizard-subtitle {
-  font-size: 15px;
-  color: var(--text-2);
-  line-height: 1.5;
-}
-
-.setup-wizard-checklist {
-  display: flex;
-  flex-direction: column;
-  gap: 10px;
-  padding: 16px 20px;
-  background: var(--bg-card2);
-  border: 1px solid var(--border);
-  border-radius: 10px;
-  margin-bottom: 28px;
-}
-
-.setup-wizard-check-item {
-  display: flex;
-  align-items: center;
-  gap: 10px;
-  font-size: 14px;
-  color: var(--text-2);
-}
-
-.setup-wizard-check-icon {
-  width: 20px;
-  height: 20px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  border-radius: 50%;
-  font-size: 12px;
-  flex-shrink: 0;
-}
-
-.setup-wizard-check-icon.done {
-  background: rgba(52, 211, 153, 0.15);
-  color: var(--green);
-  border: 1px solid rgba(52, 211, 153, 0.3);
-}
-
-.setup-wizard-check-icon.pending {
-  background: var(--bg-card);
-  color: var(--text-3);
-  border: 1px solid var(--border);
-  font-size: 8px;
-}
-
-/* ── Step 2: Provider list ── */
-
-.setup-wizard-section-header {
-  margin-bottom: 20px;
-}
-
-.setup-wizard-section-title {
-  font-size: 20px;
-  font-weight: 700;
-  color: var(--text);
-  line-height: 1.2;
-  margin-bottom: 6px;
-  letter-spacing: -0.01em;
-}
-
-.setup-wizard-section-desc {
-  font-size: 14px;
-  color: var(--text-2);
-  line-height: 1.5;
-}
-
-.setup-wizard-provider-list {
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-  margin-bottom: 20px;
-  max-height: 360px;
-  overflow-y: auto;
-}
-
-.setup-wizard-provider-row {
-  display: flex;
-  flex-direction: column;
-  gap: 6px;
-  padding: 12px 14px;
-  background: var(--bg-card2);
-  border: 1px solid var(--border);
-  border-radius: 10px;
-  transition:
-    border-color 200ms ease,
-    background 200ms ease;
-}
-
-.setup-wizard-provider-row.has-key {
-  border-color: rgba(52, 211, 153, 0.3);
-  background: rgba(52, 211, 153, 0.04);
-}
-
-.setup-wizard-provider-label {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-}
-
-.setup-wizard-provider-icon {
-  font-size: 16px;
-  width: 22px;
-  text-align: center;
-  flex-shrink: 0;
-}
-
-.setup-wizard-provider-name {
-  font-size: 14px;
-  font-weight: 600;
-  color: var(--text);
-}
-
-.setup-wizard-provider-link {
-  margin-left: auto;
-  font-size: 12px;
-  color: var(--accent);
-  text-decoration: none;
-  opacity: 0.7;
-  transition: opacity 150ms ease;
-}
-
-.setup-wizard-provider-link:hover {
-  opacity: 1;
-  text-decoration: underline;
-}
-
-.setup-wizard-provider-input-wrap {
-  display: flex;
-  align-items: center;
-  gap: 6px;
-}
-
-.setup-wizard-provider-input {
-  flex: 1;
-  background: var(--bg);
-  border: 1px solid var(--border);
-  border-radius: 7px;
-  padding: 8px 10px;
-  color: var(--text);
-  font-size: 13px;
-  font-family: inherit;
-  outline: none;
-  transition: border-color 200ms ease;
-}
-
-.setup-wizard-provider-input::placeholder {
-  color: var(--text-3);
-}
-
-.setup-wizard-provider-input:focus {
-  border-color: var(--accent);
-}
-
-.setup-wizard-toggle-vis {
-  background: transparent;
-  border: 1px solid var(--border);
-  border-radius: 6px;
-  padding: 6px 8px;
-  font-size: 14px;
-  cursor: pointer;
-  color: var(--text-3);
-  transition: color 150ms ease;
-}
-
-.setup-wizard-toggle-vis:hover {
-  color: var(--text);
-}
-
-/* ── Step 3: Engine cards ── */
-
-.setup-wizard-engine-grid {
-  display: grid;
-  grid-template-columns: repeat(2, 1fr);
-  gap: 12px;
-  margin-bottom: 16px;
-}
-
-.setup-wizard-engine-card {
-  background: var(--bg);
-  border: 1px solid var(--border);
-  border-radius: 10px;
-  padding: 16px;
-  display: flex;
-  flex-direction: column;
-  gap: 6px;
-  transition: border-color 150ms ease, background 150ms ease;
-}
-
-.setup-wizard-engine-card.available {
-  border-color: rgba(52, 211, 153, 0.3);
-  background: rgba(52, 211, 153, 0.03);
-}
-
-.setup-wizard-engine-card:not(.available) {
-  opacity: 0.7;
-}
-
-.setup-wizard-engine-badge {
-  font-size: 11px;
-  font-weight: 600;
-  text-transform: uppercase;
-  letter-spacing: 0.05em;
-}
-
-.setup-wizard-engine-badge.installed {
-  color: var(--green, #34d399);
-}
-
-.setup-wizard-engine-badge.missing {
-  color: var(--text-3, #666);
-}
-
-.setup-wizard-engine-title {
-  font-size: 15px;
-  font-weight: 600;
-  color: var(--text);
-}
-
-.setup-wizard-engine-cmd {
-  font-size: 12px;
-  color: var(--text-3);
-  background: var(--bg-card);
-  padding: 2px 8px;
-  border-radius: 4px;
-  display: inline-block;
-  width: fit-content;
-  font-family: var(--font-mono, monospace);
-}
-
-.setup-wizard-engine-desc {
-  font-size: 12px;
-  color: var(--text-2);
-  line-height: 1.4;
-  margin: 4px 0 8px;
-}
-
-.setup-wizard-engine-action {
-  margin-top: auto;
-  display: flex;
-  align-items: center;
-  gap: 6px;
-  font-size: 12px;
-}
-
-.setup-wizard-engine-auth-label {
-  color: var(--text-3);
-}
-
-.setup-wizard-engine-auth-cmd {
-  font-size: 11px;
-  color: var(--accent);
-  background: rgba(99, 102, 241, 0.1);
-  padding: 3px 8px;
-  border-radius: 4px;
-  font-family: var(--font-mono, monospace);
-}
-
-.setup-wizard-engine-key-note {
-  font-size: 12px;
-}
-
-.setup-wizard-engine-key-note.key-ok {
-  color: var(--green, #34d399);
-}
-
-.setup-wizard-engine-key-note.key-missing {
-  color: var(--yellow, #fbbf24);
-}
-
-.setup-wizard-engine-install-btn {
-  font-size: 12px;
-  color: var(--accent);
-  text-decoration: none;
-  font-weight: 500;
-  padding: 4px 12px;
-  border: 1px solid var(--accent);
-  border-radius: 6px;
-  transition: background 150ms ease;
-}
-
-.setup-wizard-engine-install-btn:hover {
-  background: rgba(99, 102, 241, 0.1);
-}
-
-.setup-wizard-engine-hint {
-  font-size: 13px;
-  color: var(--text-2);
-  text-align: center;
-  margin: 8px 0;
-}
-
-.setup-wizard-provider-icon {
-  font-size: 16px;
-  width: 24px;
-  text-align: center;
-  flex-shrink: 0;
-}
-
-/* ── Legacy preset grid (kept for backwards compat) ── */
-
-.setup-wizard-preset-grid {
-  display: grid;
-  grid-template-columns: repeat(3, 1fr);
-  gap: 10px;
-  margin-bottom: 24px;
-}
-
-.setup-wizard-preset-card {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  text-align: center;
-  padding: 20px 12px;
-  background: var(--bg-card2);
-  border: 2px solid var(--border);
-  border-radius: 12px;
-  cursor: pointer;
-  transition:
-    border-color 200ms ease,
-    background 200ms ease,
-    transform 150ms ease;
-}
-
-.setup-wizard-preset-card:hover {
-  background: var(--bg-hover);
-  transform: translateY(-1px);
-}
-
-.setup-wizard-preset-card.selected {
-  border-color: var(--accent);
-  background: rgba(56, 189, 248, 0.06);
-}
-
-.setup-wizard-preset-icon {
-  font-size: 28px;
-  margin-bottom: 10px;
-  line-height: 1;
-}
-
-.setup-wizard-preset-label {
-  font-size: 15px;
-  font-weight: 700;
-  color: var(--text);
-  margin-bottom: 6px;
-  letter-spacing: -0.01em;
-}
-
-.setup-wizard-preset-desc {
-  font-size: 12px;
-  color: var(--text-2);
-  line-height: 1.4;
-}
-
-/* ── Wizard buttons ── */
-
-.setup-wizard-actions {
-  display: flex;
-  justify-content: flex-end;
-  gap: 10px;
-  margin-top: 8px;
-}
-
-.setup-wizard-btn-primary {
-  background: var(--accent);
-  color: #000;
-  border: none;
-  border-radius: 8px;
-  padding: 10px 24px;
-  font-size: 14px;
-  font-weight: 600;
-  font-family: inherit;
-  cursor: pointer;
-  transition:
-    opacity 150ms ease,
-    transform 100ms ease;
-}
-
-.setup-wizard-btn-primary:hover {
-  opacity: 0.9;
-}
-
-.setup-wizard-btn-primary:active {
-  transform: scale(0.98);
-}
-
-.setup-wizard-btn-primary:disabled {
-  opacity: 0.4;
-  cursor: not-allowed;
-}
-
-.setup-wizard-btn-ghost {
-  background: transparent;
-  color: var(--text-2);
-  border: 1px solid var(--border);
-  border-radius: 8px;
-  padding: 10px 20px;
-  font-size: 14px;
-  font-weight: 500;
-  font-family: inherit;
-  cursor: pointer;
-  transition:
-    background 150ms ease,
-    color 150ms ease;
-}
-
-.setup-wizard-btn-ghost:hover {
-  background: var(--bg-hover);
-  color: var(--text);
-}
-
-/* ── Error state ── */
-
-.setup-wizard-error {
-  padding: 10px 14px;
-  background: rgba(248, 113, 113, 0.1);
-  border: 1px solid rgba(248, 113, 113, 0.25);
-  border-radius: 8px;
-  color: var(--red);
-  font-size: 13px;
-  margin-bottom: 12px;
-}
-
-.setup-wizard-error.hidden {
-  display: none;
-}
-
-/* ── Responsive ── */
-
-@media (max-width: 640px) {
-  .setup-wizard-card {
-    padding: 28px 20px 24px;
-    margin: 0 12px;
-    border-radius: 12px;
-  }
-
-  .setup-wizard-engine-grid {
-    grid-template-columns: 1fr;
-    gap: 8px;
-  }
-
-  .setup-wizard-preset-grid {
-    grid-template-columns: 1fr;
-    gap: 8px;
-  }
-
-  .setup-wizard-preset-card {
-    flex-direction: row;
-    text-align: left;
-    gap: 12px;
-    padding: 14px 16px;
-  }
-
-  .setup-wizard-preset-icon {
-    font-size: 22px;
-    margin-bottom: 0;
-  }
-
-  .setup-wizard-preset-label {
-    margin-bottom: 2px;
-  }
-
-  .setup-wizard-step-line {
-    width: 28px;
-    margin: 0 6px;
-  }
-
-  .setup-wizard-actions {
-    flex-direction: column-reverse;
-  }
-
-  .setup-wizard-btn-primary,
-  .setup-wizard-btn-ghost {
-    width: 100%;
-    text-align: center;
-  }
-}