@openpalm/ui 0.11.0-rc.2

package/build/client/setup/wizard.css

@@ -0,0 +1,1639 @@
+/* =========================================================================
+   OpenPalm Setup Wizard — Standalone CSS
+   ========================================================================= */
+
+/* ── CSS Custom Properties (Design Tokens) ─────────────────────────────── */
+:root {
+  /* Spacing scale */
+  --space-1: 4px;
+  --space-2: 8px;
+  --space-3: 12px;
+  --space-4: 16px;
+  --space-5: 20px;
+  --space-6: 24px;
+  --space-7: 28px;
+  --space-8: 32px;
+
+  /* Typography */
+  --font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
+  --font-mono: 'SF Mono', 'Cascadia Code', 'Fira Code', Consolas, monospace;
+  --text-xs: 0.75rem;
+  --text-sm: 0.8125rem;
+  --text-base: 0.875rem;
+  --text-lg: 1.125rem;
+  --text-xl: 1.25rem;
+  --text-2xl: 1.5rem;
+  --font-medium: 500;
+  --font-semibold: 600;
+  --font-bold: 700;
+  --leading-tight: 1.25;
+
+  /* Radii */
+  --radius-sm: 6px;
+  --radius-md: 8px;
+  --radius-lg: 12px;
+  --radius-full: 9999px;
+
+  /* Colors */
+  --color-bg: #ffffff;
+  --color-bg-secondary: #f8f9fb;
+  --color-text: #1a1a1a;
+  --color-text-secondary: #6b7280;
+  --color-text-tertiary: #9ca3af;
+  --color-border: #e5e7eb;
+  --color-border-hover: #adb5bd;
+  --color-primary: #ff9d00;
+  --color-primary-hover: #e68a00;
+  --color-primary-subtle: rgba(255, 157, 0, 0.1);
+  --color-success: #2f9e44;
+  --color-success-bg: rgba(64, 192, 87, 0.1);
+  --color-success-border: rgba(64, 192, 87, 0.25);
+  --color-danger: #dc2626;
+  --color-error: #dc2626;
+
+  /* Additional colors from reference design */
+  --color-blue: #2563EB;
+  --color-blue-soft: #EFF6FF;
+  --color-teal: #0d9488;
+  --color-teal-soft: #f0fdfa;
+  --color-purple: #7c3aed;
+  --color-purple-soft: #f5f3ff;
+  --color-red-soft: #fef2f2;
+  --color-green-soft: #f0fdf4;
+  --color-yellow: #FFD21E;
+  --color-yellow-soft: #FFF3C4;
+  --color-yellow-dark: #F59E0B;
+
+  /* Transitions */
+  --transition-fast: 0.15s ease;
+}
+
+/* ── Reset / Base ──────────────────────────────────────────────────────── */
+*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
+
+body {
+  font-family: var(--font-sans);
+  font-size: var(--text-base);
+  color: var(--color-text);
+  background: var(--color-bg-secondary);
+  line-height: 1.5;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+/* ── Page Layout ───────────────────────────────────────────────────────── */
+.setup-page {
+  min-height: 100vh;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  /* flex instead of grid+place-items avoids the grid column being sized to the
+     card's max-width, which caused the card to exceed the viewport width on
+     narrow screens (< 720px). */
+  padding: var(--space-6);
+  background:
+    radial-gradient(ellipse 80% 60% at 15% 10%, rgba(255, 157, 0, 0.06) 0%, transparent 60%),
+    radial-gradient(ellipse 60% 50% at 85% 90%, rgba(99, 102, 241, 0.05) 0%, transparent 55%),
+    #f8f9fb;
+  position: relative;
+  /* Only clip horizontally (to hide the decorative radial-gradient bleed).
+     overflow:hidden was clipping the card vertically on short viewports. */
+  overflow-x: hidden;
+  overflow-y: auto;
+}
+
+/* ── Wizard Card ───────────────────────────────────────────────────────── */
+.wizard-card {
+  width: 100%;
+  max-width: min(100%, 720px);
+  /* Cap height so the card never taller than the viewport minus the page
+     padding (2 × 24px). The body scrolls internally; step-actions sticks
+     at the bottom of the visible card area, not at the bottom of the
+     full scroll-height. Use calc() so it responds to any viewport height. */
+  max-height: calc(100vh - 48px);
+  background: var(--color-bg);
+  border: 1px solid rgba(0, 0, 0, 0.08);
+  border-radius: 20px;
+  box-shadow:
+    0 0 0 1px rgba(0, 0, 0, 0.04),
+    0 4px 6px -1px rgba(0, 0, 0, 0.06),
+    0 16px 40px -8px rgba(0, 0, 0, 0.1);
+  padding: 0;
+  position: relative;
+  z-index: 1;
+  min-height: 520px;
+  display: flex;
+  flex-direction: column;
+  animation: card-enter 0.45s cubic-bezier(0.16, 1, 0.3, 1) both;
+}
+
+@keyframes card-enter {
+  from { opacity: 0; transform: translateY(16px) scale(0.98); }
+  to { opacity: 1; transform: translateY(0) scale(1); }
+}
+
+@keyframes fadeIn {
+  from { opacity: 0; transform: translateY(6px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .wizard-card { animation: none; }
+}
+
+.wizard-header {
+  padding: var(--space-6) var(--space-8) var(--space-5);
+  border-bottom: 1px solid var(--color-border);
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+.hdr-logo {
+  width: 30px;
+  height: 30px;
+  border-radius: 8px;
+  background: var(--color-primary);
+  display: grid;
+  place-items: center;
+  font-weight: 700;
+  font-size: 12px;
+  color: #1a1a1a;
+  flex-shrink: 0;
+}
+
+.wizard-header h1 {
+  font-size: 15px;
+  font-weight: var(--font-semibold);
+  color: var(--color-text);
+  letter-spacing: -0.01em;
+  line-height: 1.1;
+}
+
+.hdr-suffix {
+  color: var(--color-text-tertiary);
+  font-weight: 400;
+  margin-left: 4px;
+}
+
+.wizard-body {
+  padding: var(--space-6) var(--space-8) var(--space-8);
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+}
+
+/* ── Segmented Progress Bar ───────────────────────────────────────────── */
+.prog-bar {
+  margin-bottom: var(--space-6);
+}
+
+.prog-segments {
+  display: flex;
+  gap: 3px;
+  margin-bottom: 6px;
+}
+
+.prog-seg {
+  flex: 1;
+  height: 3px;
+  border-radius: 2px;
+  background: var(--color-border);
+  transition: background 0.3s;
+}
+
+.prog-seg.on {
+  background: var(--color-primary-hover);
+}
+
+.prog-labels {
+  display: flex;
+  gap: 3px;
+}
+
+.prog-lbl {
+  flex: 1;
+  font-size: 11px;
+  font-weight: var(--font-medium);
+  color: var(--color-text-tertiary);
+  transition: color 0.3s;
+  cursor: pointer;
+}
+
+.prog-lbl.on {
+  color: var(--color-text-secondary);
+}
+
+.prog-lbl.active {
+  color: var(--color-text);
+  font-weight: var(--font-semibold);
+}
+
+/* ── Step Content ──────────────────────────────────────────────────────── */
+.step-content {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  /* Make step-content the scroll container so sticky step-actions works.
+     wizard-body provides the flex layout; step-content scrolls internally. */
+  overflow-y: auto;
+  min-height: 0;
+  animation: fadeIn 0.25s ease;
+}
+
+.step-content h2 {
+  font-size: var(--text-2xl);
+  font-weight: var(--font-bold);
+  color: var(--color-text);
+  margin-bottom: var(--space-2);
+  letter-spacing: -0.01em;
+}
+
+.step-description {
+  font-size: var(--text-sm);
+  color: var(--color-text-secondary);
+  margin-bottom: var(--space-6);
+  line-height: 1.5;
+}
+
+/* ── Welcome Hero ──────────────────────────────────────────────────────── */
+.welcome-hero {
+  text-align: center;
+  padding: 40px 0 24px;
+  animation: fadeIn 0.25s ease;
+}
+
+.welcome-icon {
+  font-size: 48px;
+  margin-bottom: var(--space-4);
+}
+
+.welcome-hero h2 {
+  font-size: 28px;
+  text-align: center;
+}
+
+.welcome-subtitle {
+  max-width: 380px;
+  margin: 8px auto 28px;
+  font-size: var(--text-sm);
+  color: var(--color-text-secondary);
+  line-height: 1.5;
+}
+
+.welcome-pills {
+  display: flex;
+  gap: 8px;
+  justify-content: center;
+  flex-wrap: wrap;
+  margin-bottom: var(--space-8);
+}
+
+.pill {
+  font-size: 13px;
+  color: var(--color-text-secondary);
+  background: var(--color-bg);
+  border: 1px solid var(--color-border);
+  padding: 5px 14px;
+  border-radius: 100px;
+}
+
+/* ── Step Actions ──────────────────────────────────────────────────────── */
+.step-actions {
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+  gap: var(--space-3);
+  /* Stick to the bottom of the visible wizard-body scroll area. This keeps
+     nav buttons permanently in view on content-heavy steps (providers,
+     models, voice, options, review) where the step-content scroll height
+     exceeds the body's client height.
+     NOTE: negative margins break sticky in most browsers, so the separator
+     is achieved with a box-shadow inset rather than a border-top + bleed. */
+  position: sticky;
+  bottom: 0;
+  background: var(--color-bg);
+  padding-top: var(--space-5);
+  padding-bottom: var(--space-2);
+  /* Use inset box-shadow as top separator — avoids needing negative-margin
+     bleed that would break sticky positioning. */
+  box-shadow: 0 -1px 0 var(--color-border);
+}
+
+.nav-info {
+  font-size: var(--text-xs);
+  color: var(--color-text-tertiary);
+  margin-right: auto;
+  margin-left: var(--space-2);
+}
+
+.nav-info b {
+  color: var(--color-success);
+  font-weight: var(--font-semibold);
+}
+
+/* ── Buttons ───────────────────────────────────────────────────────────── */
+.btn {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-2);
+  padding: 10px 24px;
+  font-family: var(--font-sans);
+  font-size: var(--text-sm);
+  font-weight: var(--font-bold);
+  line-height: 1.4;
+  border: 1.5px solid transparent;
+  border-radius: var(--radius-full);
+  cursor: pointer;
+  transition: all 0.2s ease;
+  white-space: nowrap;
+  justify-content: center;
+  text-decoration: none;
+}
+
+.btn:disabled {
+  opacity: 0.45;
+  cursor: not-allowed;
+}
+
+.btn-primary {
+  background: var(--color-primary);
+  color: #1a1a1a;
+  border-color: transparent;
+  box-shadow: 0 1px 3px rgba(255, 157, 0, 0.3), 0 4px 12px rgba(255, 157, 0, 0.2);
+}
+
+.btn-primary:hover:not(:disabled) {
+  background: var(--color-primary-hover);
+  box-shadow: 0 2px 6px rgba(255, 157, 0, 0.4), 0 8px 20px rgba(255, 157, 0, 0.25);
+  transform: translateY(-1px);
+}
+
+.btn-primary:active:not(:disabled) {
+  transform: translateY(0);
+  box-shadow: 0 1px 4px rgba(255, 157, 0, 0.2);
+  transition-duration: 0.1s;
+}
+
+.btn-primary-lg {
+  background: var(--color-primary);
+  color: #1a1a1a;
+  border-color: transparent;
+  padding: 12px 32px;
+  font-size: 15px;
+  font-weight: var(--font-bold);
+  border-radius: var(--radius-lg);
+  box-shadow: 0 1px 3px rgba(255, 157, 0, 0.3), 0 4px 12px rgba(255, 157, 0, 0.2);
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-2);
+  font-family: var(--font-sans);
+  line-height: 1.4;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  white-space: nowrap;
+  justify-content: center;
+  text-decoration: none;
+  border: none;
+}
+
+.btn-primary-lg:hover {
+  background: var(--color-primary-hover);
+  box-shadow: 0 2px 6px rgba(255, 157, 0, 0.4), 0 8px 20px rgba(255, 157, 0, 0.25);
+  transform: translateY(-1px);
+}
+
+.btn-secondary {
+  background: var(--color-bg);
+  color: var(--color-text);
+  border-color: var(--color-border-hover);
+}
+
+.btn-secondary:hover:not(:disabled) {
+  background: var(--color-bg-secondary);
+  border-color: var(--color-text-secondary);
+}
+
+.btn-outline {
+  background: transparent;
+  color: var(--color-primary);
+  border-color: var(--color-primary);
+}
+
+.btn-outline:hover:not(:disabled) {
+  background: var(--color-primary-subtle);
+}
+
+/* ── Form Fields ───────────────────────────────────────────────────────── */
+.field-group {
+  margin-bottom: var(--space-5);
+}
+
+.field-group--compact {
+  margin-bottom: 0;
+}
+
+.field-group label {
+  display: block;
+  font-size: var(--text-sm);
+  font-weight: var(--font-semibold);
+  color: var(--color-text);
+  margin-bottom: var(--space-2);
+}
+
+.field-group input,
+.field-group select {
+  width: 100%;
+  height: 44px;
+  border: 1.5px solid var(--color-border);
+  border-radius: var(--radius-lg);
+  padding: 0 14px;
+  background: var(--color-bg);
+  color: var(--color-text);
+  font-family: var(--font-sans);
+  font-size: var(--text-base);
+  transition: all 0.2s ease;
+}
+
+.field-group input::placeholder {
+  color: var(--color-text-tertiary);
+}
+
+.field-group input:hover,
+.field-group select:hover {
+  border-color: var(--color-border-hover);
+}
+
+.field-group input:focus,
+.field-group select:focus {
+  outline: none;
+  border-color: var(--color-primary);
+  box-shadow: 0 0 0 4px var(--color-primary-subtle);
+}
+
+.field-hint {
+  margin-top: var(--space-2);
+  font-size: var(--text-xs);
+  color: var(--color-text-secondary);
+  line-height: 1.5;
+}
+
+.field-hint--accent {
+  color: var(--color-primary-hover);
+  font-weight: var(--font-medium);
+}
+
+.field-error {
+  margin: 0 0 var(--space-3);
+  padding: var(--space-2) var(--space-3);
+  background: #fef2f2;
+  border: 1px solid #fecaca;
+  border-radius: var(--radius-md);
+  color: #dc2626;
+  font-size: var(--text-sm);
+  font-weight: var(--font-medium);
+}
+
+.field-warn {
+  margin-top: var(--space-2);
+  font-size: var(--text-xs);
+  color: #b45309;
+  line-height: 1.5;
+}
+
+.field-warning {
+  margin: 0 0 var(--space-3);
+  padding: var(--space-2) var(--space-3);
+  background: #fffbeb;
+  border: 1px solid #fde68a;
+  border-radius: var(--radius-md);
+  color: #92400e;
+  font-size: var(--text-sm);
+  font-weight: var(--font-medium);
+}
+
+/* ── Provider Card Grid ──────────────────────────────────────────────── */
+.provider-grid {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-5);
+  margin-bottom: var(--space-4);
+}
+
+.provider-group-header {
+  display: flex;
+  align-items: baseline;
+  gap: var(--space-3);
+  margin-bottom: var(--space-2);
+  padding-bottom: var(--space-2);
+  border-bottom: 1px solid var(--color-border);
+}
+
+.provider-group-label {
+  font-size: var(--text-base);
+  font-weight: var(--font-semibold);
+  color: var(--color-fg);
+  margin: 0;
+}
+
+.provider-group-desc {
+  font-size: var(--text-sm);
+  color: var(--color-fg-muted);
+}
+
+.provider-group-cards {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
+  gap: 8px;
+}
+
+/* ── Provider Cards ──────────────────────────────────────────────────── */
+.pcard {
+  background: var(--color-bg);
+  border: 1.5px solid var(--color-border);
+  border-radius: var(--radius-lg);
+  padding: 14px;
+  cursor: pointer;
+  transition: all 0.15s;
+}
+
+.pcard:hover {
+  border-color: var(--color-border-hover);
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.04);
+}
+
+.pcard.selected {
+  border-color: var(--color-primary-hover);
+  background: var(--color-primary-subtle);
+}
+
+.pcard.verified {
+  border-color: var(--color-success);
+  background: var(--color-success-bg);
+}
+
+.pcard.wide {
+  grid-column: 1 / -1;
+}
+
+.pcard-header {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+.pcard-icon {
+  width: 36px;
+  height: 36px;
+  border-radius: var(--radius-md);
+  background: var(--color-bg-secondary);
+  border: 1px solid var(--color-border);
+  display: grid;
+  place-items: center;
+  font-size: 18px;
+  flex-shrink: 0;
+}
+
+.pcard-info {
+  flex: 1;
+  min-width: 0;
+}
+
+.pcard-name {
+  font-size: var(--text-sm);
+  font-weight: var(--font-semibold);
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  flex-wrap: wrap;
+}
+
+.pcard-desc {
+  font-size: var(--text-xs);
+  color: var(--color-text-tertiary);
+  margin-top: 1px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.pcard-check {
+  width: 18px;
+  height: 18px;
+  border-radius: 6px;
+  border: 2px solid var(--color-border);
+  flex-shrink: 0;
+  display: grid;
+  place-items: center;
+  font-size: 11px;
+  color: white;
+  transition: all 0.15s;
+}
+
+.pcard.selected .pcard-check {
+  background: var(--color-primary-hover);
+  border-color: var(--color-primary-hover);
+}
+
+.pcard.verified .pcard-check {
+  background: var(--color-success);
+  border-color: var(--color-success);
+}
+
+/* ── Badges ──────────────────────────────────────────────────────────── */
+.badge {
+  font-size: 10px;
+  font-weight: var(--font-semibold);
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+  padding: 1px 6px;
+  border-radius: 4px;
+}
+
+.badge-cloud { background: var(--color-blue-soft); color: var(--color-blue); }
+.badge-local { background: var(--color-teal-soft); color: var(--color-teal); }
+.badge-hybrid { background: var(--color-purple-soft); color: var(--color-purple); }
+
+/* ── Verification Status ─────────────────────────────────────────────── */
+.vs {
+  font-size: var(--text-sm);
+  flex-shrink: 0;
+  margin-left: 2px;
+}
+
+.vs-ok { color: var(--color-success); }
+.vs-err { color: var(--color-error); }
+.vs-wait { color: var(--color-primary-hover); animation: blink 1.2s ease infinite; }
+
+@keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }
+
+/* ── Inline Auth Panel ───────────────────────────────────────────────── */
+.pcard-auth {
+  margin-top: var(--space-3);
+  padding-top: var(--space-3);
+  border-top: 1px solid var(--color-border);
+  animation: fadeIn 0.2s ease;
+}
+
+.auth-row {
+  display: flex;
+  gap: 6px;
+  margin-bottom: var(--space-2);
+}
+
+.auth-row input {
+  flex: 1;
+  min-width: 0;
+  padding: 9px 12px;
+  border-radius: var(--radius-md);
+  border: 1.5px solid var(--color-border);
+  background: var(--color-bg);
+  color: var(--color-text);
+  font-size: 13px;
+  font-family: var(--font-mono);
+  outline: none;
+  transition: border-color 0.15s;
+}
+
+.auth-row input:focus {
+  border-color: var(--color-primary);
+}
+
+.auth-row input::placeholder {
+  color: var(--color-text-tertiary);
+}
+
+.auth-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 5px;
+  padding: 9px 14px;
+  border-radius: var(--radius-md);
+  border: none;
+  font-family: var(--font-sans);
+  font-size: 13px;
+  font-weight: var(--font-semibold);
+  cursor: pointer;
+  transition: all 0.15s;
+  white-space: nowrap;
+}
+
+.auth-btn:hover:not(:disabled) { filter: brightness(0.95); }
+.auth-btn:disabled { opacity: 0.35; cursor: not-allowed; }
+.auth-btn-verify { background: var(--color-primary); color: #1a1a1a; }
+.auth-btn-verified { background: var(--color-success-bg); color: var(--color-success); border: 1px solid var(--color-success-border); }
+.auth-btn-detect { background: var(--color-teal); color: white; }
+.auth-btn-detected { background: var(--color-teal-soft); color: var(--color-teal); border: 1px solid #99f6e4; }
+
+/* ── Auth Feedback ───────────────────────────────────────────────────── */
+.auth-feedback {
+  margin-top: var(--space-2);
+  padding: var(--space-2) var(--space-3);
+  border-radius: var(--radius-md);
+  font-size: var(--text-xs);
+  animation: fadeIn 0.2s;
+}
+
+.auth-feedback-ok {
+  background: var(--color-green-soft);
+  border: 1px solid #bbf7d0;
+  color: #15803d;
+}
+
+.auth-feedback-err {
+  background: var(--color-red-soft);
+  border: 1px solid #fecaca;
+  color: #b91c1c;
+}
+
+/* ── Ollama Mode Prompt ──────────────────────────────────────────────── */
+.ollama-mode-prompt {
+  background: var(--color-bg-secondary);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-lg);
+  padding: 14px;
+  text-align: center;
+}
+
+.ollama-mode-prompt p {
+  font-size: 13px;
+  color: var(--color-text-secondary);
+  margin-bottom: 10px;
+}
+
+.ollama-mode-buttons {
+  display: flex;
+  gap: 8px;
+  justify-content: center;
+}
+
+.ollama-mode-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 5px;
+  padding: 9px 18px;
+  border-radius: var(--radius-md);
+  border: none;
+  font-family: var(--font-sans);
+  font-size: 13px;
+  font-weight: var(--font-semibold);
+  cursor: pointer;
+  transition: all 0.15s;
+  white-space: nowrap;
+}
+
+.ollama-mode-btn:hover { filter: brightness(0.95); }
+.ollama-mode-btn-detect { background: var(--color-teal); color: white; }
+.ollama-mode-btn-stack { background: var(--color-bg); color: var(--color-text-secondary); border: 1px solid var(--color-border); }
+.ollama-mode-btn-stack:hover { border-color: var(--color-border-hover); color: var(--color-text); }
+
+/* ── Advanced Toggle ─────────────────────────────────────────────────── */
+.adv-toggle {
+  grid-column: 1 / -1;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 8px 0;
+  cursor: pointer;
+  color: var(--color-text-tertiary);
+  font-size: 13px;
+  font-weight: var(--font-medium);
+  user-select: none;
+  border: none;
+  background: none;
+  width: 100%;
+}
+
+.adv-toggle:hover { color: var(--color-text-secondary); }
+.adv-toggle::before, .adv-toggle::after {
+  content: '';
+  flex: 1;
+  height: 1px;
+  background: var(--color-border);
+}
+
+.adv-toggle .arr {
+  display: inline-block;
+  transition: transform 0.2s;
+  font-size: 10px;
+  margin-left: 2px;
+}
+
+.adv-toggle.open .arr { transform: rotate(90deg); }
+
+/* ── Model Groups ────────────────────────────────────────────────────── */
+.model-group {
+  background: var(--color-bg);
+  border: 1.5px solid var(--color-border);
+  border-radius: var(--radius-lg);
+  padding: var(--space-4);
+  margin-bottom: 10px;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
+  /* Constrain model option lists so each group shows ~5 options before
+     scrolling, rather than expanding to show all 100+ models and pushing
+     the step-actions button 600px below the visible area. */
+  display: flex;
+  flex-direction: column;
+}
+
+/* The list of .model-opt rows within a group scrolls independently */
+.model-group .model-filter-row ~ .model-opt,
+.model-group > .model-opt {
+  /* Handled via the scroll container below */
+}
+
+/* Wrap the scrollable option list so only options scroll, not the header */
+.model-opts-scroll {
+  max-height: 220px;
+  overflow-y: auto;
+  /* Subtle inner shadow indicates there is more content to scroll */
+  mask-image: linear-gradient(to bottom, black calc(100% - 24px), transparent 100%);
+  -webkit-mask-image: linear-gradient(to bottom, black calc(100% - 24px), transparent 100%);
+}
+
+.model-group-header {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-bottom: 2px;
+}
+
+.model-group-title {
+  font-size: var(--text-sm);
+  font-weight: var(--font-bold);
+}
+
+.model-group-tag {
+  font-size: 10px;
+  font-weight: var(--font-semibold);
+  padding: 1px 6px;
+  border-radius: 4px;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+}
+
+.model-group-tag-required {
+  background: var(--color-primary-subtle);
+  color: var(--color-primary-hover);
+}
+
+.model-group-tag-optional {
+  background: var(--color-teal-soft);
+  color: var(--color-teal);
+}
+
+.model-group-desc {
+  font-size: var(--text-xs);
+  color: var(--color-text-tertiary);
+  margin-bottom: var(--space-3);
+}
+
+/* ── Model Search Filter ──────────────────────────────────────────── */
+.model-filter-row {
+  margin-bottom: 6px;
+}
+.model-filter-input {
+  width: 100%;
+  padding: 8px 12px;
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-md);
+  font-size: 0.85rem;
+  background: var(--color-surface);
+  color: var(--color-text-primary);
+  outline: none;
+  transition: border-color 0.15s;
+}
+.model-filter-input:focus {
+  border-color: var(--color-primary);
+}
+.model-filter-input::placeholder {
+  color: var(--color-text-tertiary);
+}
+.model-opt-filtered {
+  display: none !important;
+}
+
+/* ── Model Option (radio-style) ──────────────────────────────────────── */
+.model-opt {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 10px 12px;
+  border-radius: var(--radius-md);
+  cursor: pointer;
+  transition: all 0.1s;
+  margin-bottom: 2px;
+  border: 1.5px solid transparent;
+}
+
+.model-opt:hover { background: var(--color-bg-secondary); }
+
+.model-opt.on {
+  background: var(--color-primary-subtle);
+  border-color: #fde68a;
+}
+
+.model-opt-dot {
+  width: 16px;
+  height: 16px;
+  border-radius: 50%;
+  border: 2px solid var(--color-border);
+  flex-shrink: 0;
+  display: grid;
+  place-items: center;
+}
+
+.model-opt.on .model-opt-dot {
+  border-color: var(--color-primary-hover);
+}
+
+.model-opt-dot-inner {
+  width: 7px;
+  height: 7px;
+  border-radius: 50%;
+  background: transparent;
+}
+
+.model-opt.on .model-opt-dot-inner {
+  background: var(--color-primary-hover);
+}
+
+.model-opt-name {
+  font-size: 13px;
+  color: var(--color-text-secondary);
+}
+
+.model-opt.on .model-opt-name {
+  color: var(--color-text);
+  font-weight: var(--font-medium);
+}
+
+.model-opt-meta {
+  font-size: 11px;
+  color: var(--color-text-tertiary);
+  margin-top: 1px;
+}
+
+.model-opt-badge {
+  font-size: 9px;
+  font-weight: var(--font-semibold);
+  padding: 1px 6px;
+  border-radius: 4px;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+  margin-left: auto;
+  flex-shrink: 0;
+}
+
+.model-opt-badge-top {
+  background: var(--color-primary-subtle);
+  color: var(--color-primary-hover);
+}
+
+.model-opt-badge-auto {
+  background: var(--color-blue-soft);
+  color: var(--color-blue);
+}
+
+/* ── Review Summary ──────────────────────────────────────────────────── */
+.review-card {
+  background: var(--color-bg);
+  border: 1.5px solid var(--color-border);
+  border-radius: var(--radius-lg);
+  padding: 18px;
+  margin-bottom: var(--space-4);
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.04);
+}
+
+.review-card-title {
+  font-size: 11px;
+  font-weight: var(--font-semibold);
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+  color: var(--color-text-tertiary);
+  margin-bottom: 8px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.review-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 6px 0;
+  border-bottom: 1px solid var(--color-bg-secondary);
+  font-size: 13px;
+}
+
+.review-row:last-child { border-bottom: none; }
+
+.review-row-label {
+  color: var(--color-text-secondary);
+}
+
+.review-row-value {
+  font-family: var(--font-mono);
+  font-size: var(--text-xs);
+  color: var(--color-text);
+  text-align: right;
+  /* Raised from 240px — model names like
+     "adrienbrault/nous-hermes2theta-llama3-8b:q4_K_M (Ollama)" are 404px wide
+     and were always truncated. 60% of the row gives the value enough room
+     while keeping the label readable. */
+  max-width: 60%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.review-row-value-ok {
+  color: var(--color-success);
+  font-family: var(--font-sans);
+}
+
+.review-json-toggle {
+  margin-bottom: var(--space-3);
+}
+
+.btn-json-toggle {
+  background: none;
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-md);
+  color: var(--color-text-secondary);
+  font-size: var(--text-xs);
+  font-weight: var(--font-medium);
+  padding: 6px 12px;
+  cursor: pointer;
+  transition: all 0.15s;
+  font-family: var(--font-sans);
+}
+
+.btn-json-toggle:hover {
+  border-color: var(--color-border-hover);
+  color: var(--color-text);
+}
+
+.review-json pre {
+  background: var(--color-bg-secondary);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-lg);
+  padding: 14px;
+  font-family: var(--font-mono);
+  font-size: 11px;
+  line-height: 1.6;
+  color: var(--color-text-secondary);
+  white-space: pre;
+  overflow-x: auto;
+  max-height: 360px;
+  margin-bottom: var(--space-3);
+}
+
+/* ── Legacy Review Grid (kept for backward compat / tests) ───────────── */
+.review-grid {
+  display: flex;
+  flex-direction: column;
+  background: var(--color-bg-secondary);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-lg);
+  overflow: hidden;
+  margin-bottom: var(--space-2);
+}
+
+.review-section-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 8px var(--space-4);
+  background: rgba(0, 0, 0, 0.04);
+  font-size: var(--text-xs);
+  font-weight: var(--font-semibold);
+  color: var(--color-text-secondary);
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  border-bottom: 1px solid var(--color-border);
+}
+
+.review-edit-btn {
+  background: none;
+  border: none;
+  color: var(--color-primary);
+  font-size: var(--text-xs);
+  font-weight: var(--font-medium);
+  cursor: pointer;
+  padding: 2px 8px;
+  border-radius: var(--radius-md);
+  transition: all 0.15s ease;
+  text-transform: none;
+  letter-spacing: normal;
+}
+
+.review-edit-btn:hover { background: var(--color-primary-subtle); color: var(--color-primary-hover); }
+
+.review-item {
+  display: flex;
+  justify-content: space-between;
+  align-items: baseline;
+  gap: var(--space-4);
+  padding: 10px var(--space-4);
+  border-bottom: 1px solid var(--color-border);
+}
+
+.review-item:last-child { border-bottom: none; }
+.review-item:nth-child(even) { background: rgba(0, 0, 0, 0.03); }
+
+.review-label {
+  font-size: var(--text-sm);
+  color: var(--color-text-secondary);
+  flex-shrink: 0;
+  min-width: 140px;
+}
+
+.review-label--muted { color: var(--color-text-tertiary); font-style: italic; }
+
+.review-value {
+  font-size: var(--text-sm);
+  color: var(--color-text);
+  text-align: right;
+  word-break: break-all;
+  font-weight: var(--font-medium);
+}
+
+.review-value.mono { font-family: var(--font-mono); font-size: 0.8rem; }
+
+.install-error { margin-top: var(--space-3); color: var(--color-danger); font-size: var(--text-sm); }
+
+/* ── Optional Add-ons ──────────────────────────────────────────────────── */
+.addon-row {
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-md);
+  margin-bottom: var(--space-3);
+  overflow: hidden;
+}
+
+.addon-row--active { border-color: var(--color-primary); }
+
+.addon-toggle-row {
+  display: flex;
+  align-items: flex-start;
+  gap: var(--space-3);
+  padding: var(--space-3) var(--space-4);
+}
+
+.addon-toggle-label {
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+  cursor: pointer;
+  flex-shrink: 0;
+}
+
+.addon-label-text { font-size: var(--text-sm); font-weight: var(--font-medium); color: var(--color-text); }
+.addon-help { font-size: var(--text-xs); color: var(--color-text-secondary); line-height: 1.4; padding-top: 2px; }
+
+/* ── Reranking & Field Layout ──────────────────────────────────────────── */
+.reranking-options {
+  padding: var(--space-2) var(--space-4) var(--space-3);
+  border-left: 2px solid var(--color-border);
+  margin-left: var(--space-4);
+  margin-bottom: var(--space-3);
+}
+
+.field-select {
+  width: 100%;
+  padding: var(--space-2) var(--space-3);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-md);
+  background: var(--color-bg);
+  font-size: var(--text-sm);
+  font-family: var(--font-sans);
+  color: var(--color-text);
+}
+
+.field-row {
+  display: flex;
+  gap: var(--space-4);
+}
+
+.field-group-half {
+  flex: 1;
+  min-width: 0;
+}
+
+/* ── Deploy Screen ─────────────────────────────────────────────────────── */
+.deploy-header { text-align: center; margin-bottom: var(--space-6); }
+
+.deploy-progress-summary {
+  margin-bottom: var(--space-5);
+  padding: var(--space-4);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-lg);
+  background: var(--color-bg-secondary);
+}
+
+.deploy-progress-meta {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: var(--space-3);
+  margin-bottom: var(--space-3);
+}
+
+.deploy-progress-label { font-size: var(--text-sm); font-weight: var(--font-semibold); color: var(--color-text); }
+.deploy-progress-value { font-size: var(--text-sm); font-weight: var(--font-bold); color: var(--color-primary-hover); }
+.deploy-progress-value--error { color: var(--color-danger); }
+
+.deploy-progress-bar {
+  height: 10px;
+  border-radius: 999px;
+  overflow: hidden;
+  background: var(--color-bg);
+  border: 1px solid var(--color-border);
+}
+
+.deploy-progress-bar--error { background: #fef2f2; border-color: rgba(220, 38, 38, 0.24); }
+
+.deploy-progress-fill {
+  height: 100%;
+  border-radius: inherit;
+  background: linear-gradient(90deg, #ffb020 0%, #2f9e44 100%);
+  transition: width 0.4s ease;
+}
+
+.deploy-progress-fill--error { background: linear-gradient(90deg, #f59e0b 0%, #dc2626 100%); }
+
+.deploy-progress-note { margin: var(--space-3) 0 0; font-size: var(--text-xs); color: var(--color-text-secondary); line-height: 1.5; }
+
+.deploy-services { display: flex; flex-direction: column; gap: var(--space-3); margin-bottom: var(--space-6); }
+
+.deploy-service-row {
+  display: grid;
+  grid-template-columns: 28px 1fr 120px;
+  align-items: center;
+  gap: var(--space-3);
+  padding: var(--space-3) var(--space-4);
+  background: var(--color-bg);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-md);
+}
+
+.deploy-service-indicator { display: flex; align-items: center; justify-content: center; }
+.deploy-check,
+.deploy-warning,
+.deploy-spinner { display: flex; align-items: center; justify-content: center; }
+.deploy-service-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
+.deploy-service-name { font-size: var(--text-sm); font-weight: var(--font-medium); color: var(--color-text); }
+.deploy-service-status { font-size: var(--text-xs); color: var(--color-text-tertiary); }
+
+.deploy-service-bar { height: 6px; background: var(--color-bg-secondary); border-radius: 3px; overflow: hidden; }
+.deploy-bar-fill { height: 100%; border-radius: 3px; transition: all 0.4s ease; }
+.deploy-bar-fill.indeterminate { width: 40%; background: var(--color-primary); animation: indeterminate-bar 1.5s ease-in-out infinite; }
+.deploy-bar-fill.ready { width: 72%; background: #ffb020; animation: none; }
+.deploy-bar-fill.stopped { width: 72%; background: #d97706; animation: none; opacity: 0.9; }
+.deploy-bar-fill.complete { width: 100%; background: var(--color-success); animation: none; }
+
+@keyframes indeterminate-bar { 0% { transform: translateX(-100%); } 50% { transform: translateX(150%); } 100% { transform: translateX(-100%); } }
+@media (prefers-reduced-motion: reduce) { .deploy-bar-fill.indeterminate { animation: none; width: 100%; opacity: 0.5; } }
+
+.deploy-done { text-align: center; margin-top: var(--space-4); }
+
+/* Deploy failure card */
+.deploy-failure-card {
+  margin-bottom: var(--space-5);
+  padding: var(--space-4);
+  border-radius: var(--radius-lg);
+  border: 1px solid rgba(220, 38, 38, 0.18);
+  background: linear-gradient(180deg, rgba(254, 242, 242, 0.96) 0%, rgba(255, 251, 251, 0.99) 100%);
+}
+
+.deploy-failure-header { margin-bottom: var(--space-2); }
+.deploy-failure-kicker { display: inline-block; margin-bottom: var(--space-1); font-size: var(--text-xs); font-weight: var(--font-semibold); text-transform: uppercase; letter-spacing: 0.06em; color: #b91c1c; }
+.deploy-failure-header h3 { margin: 0; font-size: var(--text-lg); color: var(--color-text); }
+.deploy-failure-summary { margin: 0 0 var(--space-3); font-size: var(--text-sm); color: var(--color-text-secondary); line-height: 1.55; }
+
+/* Deploy tips */
+.deploy-tips {
+  margin-top: var(--space-5);
+  padding: var(--space-4);
+  border-radius: var(--radius-lg);
+  border: 1px solid rgba(255, 176, 32, 0.28);
+  background: linear-gradient(180deg, rgba(255, 248, 235, 0.95) 0%, rgba(255, 253, 247, 0.95) 100%);
+}
+
+.deploy-tips-header { margin-bottom: var(--space-3); }
+.deploy-tips-kicker { display: inline-block; font-size: var(--text-xs); font-weight: var(--font-semibold); text-transform: uppercase; letter-spacing: 0.06em; color: #a16207; margin-bottom: var(--space-1); }
+.deploy-tips h3 { margin: 0; font-size: var(--text-base); color: var(--color-text); }
+.deploy-tips ul { margin: 0; padding-left: 1.1rem; display: grid; gap: var(--space-2); }
+.deploy-tips li { font-size: var(--text-sm); color: var(--color-text-secondary); line-height: 1.5; }
+
+/* Deploy error details */
+.deploy-error-details {
+  margin-top: var(--space-3);
+  padding: var(--space-3);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-md);
+  background: var(--color-bg-secondary);
+}
+
+.deploy-error-details summary { cursor: pointer; font-size: var(--text-sm); font-weight: var(--font-semibold); color: var(--color-text); }
+.deploy-error-details pre { margin: var(--space-3) 0 0; white-space: pre-wrap; word-break: break-word; font-size: var(--text-xs); color: var(--color-text-secondary); line-height: 1.5; }
+
+/* ── Spinner ───────────────────────────────────────────────────────────── */
+.spinner {
+  display: inline-block;
+  width: 14px;
+  height: 14px;
+  border: 2px solid currentColor;
+  border-right-color: transparent;
+  border-radius: 50%;
+  animation: spin 0.6s linear infinite;
+}
+
+@keyframes spin { to { transform: rotate(360deg); } }
+@media (prefers-reduced-motion: reduce) { .spinner { animation: none; } }
+
+/* ── Loading State ─────────────────────────────────────────────────────── */
+.loading-state { display: flex; justify-content: center; align-items: center; padding: var(--space-8); }
+
+/* ── Done State ────────────────────────────────────────────────────────── */
+.done-state { text-align: center; padding: var(--space-4) 0; }
+.done-icon { display: inline-block; margin-bottom: var(--space-4); }
+.done-state h2 { font-size: var(--text-2xl); font-weight: var(--font-bold); color: var(--color-text); margin-bottom: var(--space-2); }
+.done-subtitle { font-size: var(--text-sm); color: var(--color-text-secondary); margin-bottom: var(--space-5); }
+
+.service-list {
+  list-style: none;
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--space-2);
+  justify-content: center;
+  margin-bottom: var(--space-6);
+}
+
+.service-list li {
+  font-size: var(--text-sm);
+  background: var(--color-success-bg);
+  color: var(--color-text);
+  border: 1px solid var(--color-success-border);
+  padding: var(--space-2) var(--space-4);
+  border-radius: var(--radius-md);
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+  width: 100%;
+  justify-content: flex-start;
+}
+
+.service-list {
+  flex-direction: column;
+  align-items: stretch;
+  max-width: 420px;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+.deploy-svc-name {
+  font-weight: var(--font-semibold);
+  min-width: 130px;
+}
+
+.deploy-svc-link {
+  font-family: var(--font-mono);
+  font-size: var(--text-xs);
+  color: var(--color-accent);
+  text-decoration: none;
+}
+
+.deploy-svc-link:hover {
+  text-decoration: underline;
+}
+
+.deploy-svc-status {
+  font-size: var(--text-xs);
+  color: var(--color-success);
+  margin-left: auto;
+}
+
+/* ── Voice Hint ───────────────────────────────────────────────────────── */
+.voice-hint {
+  font-size: var(--text-sm);
+  color: var(--color-text-secondary);
+  background: var(--color-bg-secondary);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-md);
+  padding: var(--space-3) var(--space-4);
+  margin-bottom: var(--space-4);
+  line-height: 1.5;
+}
+
+/* ── Options Sections ─────────────────────────────────────────────────── */
+.options-section {
+  margin-bottom: var(--space-5);
+}
+
+.options-section-title {
+  font-size: var(--text-base);
+  font-weight: var(--font-bold);
+  color: var(--color-text);
+  margin-bottom: var(--space-1);
+}
+
+.options-section-desc {
+  font-size: var(--text-xs);
+  color: var(--color-text-secondary);
+  margin-bottom: var(--space-3);
+  line-height: 1.5;
+}
+
+/* ── Toggle Card Grid ─────────────────────────────────────────────────── */
+.toggle-grid {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.toggle-card {
+  background: var(--color-bg);
+  border: 1.5px solid var(--color-border);
+  border-radius: var(--radius-md);
+  padding: 10px 14px;
+  cursor: pointer;
+  transition: all 0.15s;
+}
+
+.toggle-card:hover {
+  border-color: var(--color-border-hover);
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.04);
+}
+
+.toggle-card.on {
+  border-color: var(--color-primary-hover);
+  background: var(--color-primary-subtle);
+}
+
+.toggle-card.locked {
+  cursor: default;
+  opacity: 0.85;
+}
+
+.toggle-card.locked:hover {
+  box-shadow: none;
+}
+
+.toggle-card-header {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+.toggle-card-icon {
+  width: 32px;
+  height: 32px;
+  border-radius: var(--radius-sm);
+  background: var(--color-bg-secondary);
+  border: 1px solid var(--color-border);
+  display: grid;
+  place-items: center;
+  font-size: 16px;
+  flex-shrink: 0;
+}
+
+.toggle-card-info {
+  flex: 1;
+  min-width: 0;
+}
+
+.toggle-card-name {
+  font-size: var(--text-sm);
+  font-weight: var(--font-semibold);
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  flex-wrap: wrap;
+}
+
+.toggle-card-desc {
+  font-size: var(--text-xs);
+  color: var(--color-text-tertiary);
+  margin-top: 1px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.toggle-card-switch {
+  flex-shrink: 0;
+}
+
+/* ── Toggle Track (iOS-style) ─────────────────────────────────────────── */
+.toggle-track {
+  width: 36px;
+  height: 20px;
+  border-radius: 10px;
+  background: var(--color-border);
+  position: relative;
+  transition: background 0.2s;
+}
+
+.toggle-track.on {
+  background: var(--color-primary-hover);
+}
+
+.toggle-track.locked {
+  background: var(--color-success);
+}
+
+.toggle-thumb {
+  width: 16px;
+  height: 16px;
+  border-radius: 50%;
+  background: white;
+  position: absolute;
+  top: 2px;
+  left: 2px;
+  transition: transform 0.2s;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
+}
+
+.toggle-track.on .toggle-thumb,
+.toggle-track.locked .toggle-thumb {
+  transform: translateX(16px);
+}
+
+/* ── Channel Credential Expansion ─────────────────────────────────────── */
+.toggle-card.wide {
+  grid-column: 1 / -1;
+}
+
+.toggle-card .pcard-auth {
+  margin-top: var(--space-3);
+  padding-top: var(--space-3);
+  border-top: 1px solid var(--color-border);
+  animation: fadeIn 0.2s ease;
+}
+
+.channel-cred-label {
+  display: block;
+  font-size: var(--text-xs);
+  font-weight: var(--font-semibold);
+  color: var(--color-text-secondary);
+  margin-bottom: 4px;
+}
+
+.channel-cred-required {
+  color: var(--color-error, #ef4444);
+}
+
+/* ── Hidden utility ────────────────────────────────────────────────────── */
+.hidden { display: none !important; }
+
+/* ── Responsive ────────────────────────────────────────────────────────── */
+@media (min-width: 900px) {
+  .wizard-card { max-width: 800px; }
+}
+
+@media (min-width: 1200px) {
+  /* On wide displays give the card more room so the provider grid and
+     model lists don't feel cramped with 400px of empty gutter on each side. */
+  .wizard-card { max-width: 920px; }
+}
+
+@media (max-width: 540px) {
+  /* Reduce page padding so the card has more usable width on phones */
+  .setup-page { padding: var(--space-3); }
+  .wizard-card {
+    max-height: calc(100vh - 24px);
+    min-height: 0;
+    border-radius: 16px;
+  }
+  .wizard-header { padding: var(--space-4) var(--space-5) var(--space-3); }
+  .wizard-body { padding: var(--space-4) var(--space-5) var(--space-4); }
+  /* No margin compensation needed — step-actions no longer uses negative margins */
+}
+
+@media (max-width: 480px) {
+  .review-item { flex-direction: column; align-items: flex-start; }
+  .review-value { text-align: left; }
+  .deploy-service-row { grid-template-columns: 28px 1fr; }
+  .deploy-service-bar { display: none; }
+}
+
+.rerun-banner {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 8px 16px;
+  background: var(--color-surface, #f0f4ff);
+  border-bottom: 1px solid var(--color-border, #dde3f0);
+  font-size: 0.8rem;
+  color: var(--color-text-secondary, #555);
+}
+.rerun-back-link {
+  color: var(--color-primary, #4f6ef7);
+  text-decoration: none;
+  font-weight: 500;
+}
+.rerun-back-link:hover { text-decoration: underline; }