/**
 * Mailbox Factory — Product Design Layer v3
 * Reference: Linear / Vercel / Stripe Dashboard craft
 * Rules: no gradients, no glow, no Inter CDN, monochrome action, hairline borders
 */

:root {
  --mf-void: #08090a;
  --mf-raised: #0e0f11;
  --mf-panel: #121316;
  --mf-panel-2: #16171a;
  --mf-hover: #1c1d21;
  --mf-line: #22242a;
  --mf-line-strong: #2e3038;
  --mf-text: #ececee;
  --mf-text-2: #9b9ba3;
  --mf-text-3: #83838d;
  --mf-invert: #08090a;
  --mf-white: #f4f4f5;
  --mf-ok: #3dd68c;
  --mf-ok-dim: rgba(61, 214, 140, 0.12);
  --mf-ok-line: rgba(61, 214, 140, 0.28);
  --mf-run: #5b9fd4;
  --mf-run-dim: rgba(91, 159, 212, 0.12);
  --mf-warn: #d4a017;
  --mf-warn-dim: rgba(212, 160, 23, 0.1);
  --mf-warn-line: rgba(212, 160, 23, 0.3);
  --mf-danger: #e5484d;
  --mf-danger-dim: rgba(229, 72, 77, 0.1);
  --mf-danger-line: rgba(229, 72, 77, 0.28);
  --mf-r: 5px;
  --mf-r-md: 6px;
  --mf-r-lg: 7px;
  --mf-bg: var(--mf-void);
  --mf-pad: 16px;
  --mf-max: 1180px;
  --mf-header: 48px;
  --mf-font: "SF Pro Text", "SF Pro Display", -apple-system, BlinkMacSystemFont,
    "Segoe UI", system-ui, sans-serif;
  --mf-mono: "SF Mono", ui-monospace, Menlo, Consolas, monospace;
  --mf-track: -0.022em;

  /* Bridge legacy tokens used across the app */
  --bg: var(--mf-void);
  --surface: var(--mf-panel);
  --surface-2: var(--mf-panel-2);
  --border: var(--mf-line);
  --border-soft: var(--mf-line);
  --text: var(--mf-text);
  --muted: var(--mf-text-2);
  --color-brand: var(--mf-white);
  --color-brand-hover: #e4e4e7;
  --color-brand-fg: var(--mf-invert);
  --color-success: var(--mf-ok);
  --color-success-fg: var(--mf-ok);
  --color-success-muted: var(--mf-ok-dim);
  --color-success-border: var(--mf-ok-line);
  --status-running: var(--mf-run);
  --accent: var(--mf-white);
  --accent-2: var(--mf-run);
  --warn: var(--mf-warn);
  --danger: var(--mf-danger);
  --radius: var(--mf-r);
  --radius-md: var(--mf-r);
  --radius-lg: var(--mf-r-lg);
  --font: var(--mf-font);
  --mono: var(--mf-mono);
  --focus-ring: 0 0 0 1px var(--mf-void), 0 0 0 3px rgba(244, 244, 245, 0.35);
  --page-max: var(--mf-max);
  --header-h: var(--mf-header);
}

html {
  color-scheme: dark;
  font-size: 15px;
}

body,
.app-body {
  margin: 0 !important;
  min-height: 100vh !important;
  font-family: var(--mf-font) !important;
  font-size: 13.5px !important;
  font-weight: 400 !important;
  line-height: 1.45 !important;
  letter-spacing: -0.006em;
  color: var(--mf-text) !important;
  background: var(--mf-void) !important;
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* ——— Shell ——— */
.app-header {
  height: var(--mf-header) !important;
  border-bottom: 1px solid var(--mf-line) !important;
  background: rgba(8, 9, 10, 0.85) !important;
  backdrop-filter: saturate(1.2) blur(12px) !important;
  -webkit-backdrop-filter: saturate(1.2) blur(12px) !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 50 !important;
}

.app-header-inner,
.header-inner {
  max-width: var(--mf-max) !important;
  height: 100% !important;
  margin: 0 auto !important;
  padding: 0 20px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 24px !important;
}

.brand-link {
  display: inline-flex !important;
  align-items: center !important;
  gap: 9px !important;
  color: var(--mf-text) !important;
  text-decoration: none !important;
  flex-shrink: 0 !important;
}

.brand-mark {
  width: 15px !important;
  height: 15px !important;
  border-radius: 3.5px !important;
  background: var(--mf-white) !important;
  box-shadow: none !important;
  background-image: none !important;
}

.brand-name {
  font-size: 13px !important;
  font-weight: 510 !important;
  letter-spacing: var(--mf-track) !important;
}

.brand-block,
.brand-tagline {
  display: none !important;
}

.nav {
  display: flex !important;
  flex: 1 1 auto !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  gap: 2px !important;
  min-width: 0 !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  white-space: nowrap;
}

.nav::-webkit-scrollbar {
  display: none;
}

.nav-spacer {
  width: 8px;
  flex: 0 0 8px;
}

.nav-item,
.nav a,
.nav-link {
  display: inline-flex !important;
  align-items: center !important;
  height: 28px !important;
  padding: 0 9px !important;
  border-radius: var(--mf-r) !important;
  font-size: 12.5px !important;
  font-weight: 450 !important;
  letter-spacing: -0.01em !important;
  color: var(--mf-text-2) !important;
  background: transparent !important;
  border: none !important;
  text-decoration: none !important;
  transition: color 0.1s ease, background 0.1s ease !important;
}

.nav-item:hover,
.nav a:hover {
  color: var(--mf-text) !important;
  background: var(--mf-hover) !important;
}

.nav-item.is-active,
.nav a.is-active,
.nav-item[aria-current="page"],
.nav a[aria-current="page"],
.nav-active,
.nav a.nav-active {
  color: var(--mf-text) !important;
  background: var(--mf-hover) !important;
  font-weight: 500 !important;
}

.nav-item--muted {
  color: var(--mf-text-3) !important;
}

.app-main,
main.main-shell,
.main-shell {
  max-width: var(--mf-max) !important;
  margin: 0 auto !important;
  padding: 28px 20px 64px !important;
}

.skip-link {
  position: fixed !important;
  top: 8px !important;
  left: 8px !important;
  z-index: 1000 !important;
  transform: translateY(-160%) !important;
  padding: 8px 12px !important;
  border: 1px solid var(--mf-line-strong) !important;
  border-radius: var(--mf-r) !important;
  color: var(--mf-invert) !important;
  background: var(--mf-white) !important;
  text-decoration: none !important;
}

.skip-link:focus,
.skip-link:focus-visible {
  transform: translateY(0) !important;
}

.app-main:focus {
  outline: none !important;
  box-shadow: none !important;
}

/* ——— Type & page ——— */
.page {
  display: flex !important;
  flex-direction: column !important;
  gap: 20px !important;
}

.page-header {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: flex-end !important;
  justify-content: space-between !important;
  gap: 16px !important;
  padding-bottom: 4px !important;
}

.page-title,
.saas-topbar-brand h1,
.settings-header h1 {
  margin: 0 !important;
  font-size: 18px !important;
  font-weight: 510 !important;
  letter-spacing: var(--mf-track) !important;
  line-height: 1.25 !important;
  color: var(--mf-text) !important;
}

.page-desc,
.saas-topbar-brand p,
.settings-header p {
  margin: 6px 0 0 !important;
  font-size: 12.5px !important;
  font-weight: 400 !important;
  color: var(--mf-text-2) !important;
  line-height: 1.45 !important;
  max-width: 40rem !important;
}

/* ——— Surfaces ——— */
.panel,
.card-surface,
.saas-panel,
.saas-panel--highlight,
.saas-panel--activity,
.saas-panel--error,
.saas-panel--compact,
.settings-card,
.tenant-card,
.job-card,
.kpi-card,
.stat-card,
.empty-state,
.auth-card {
  background: var(--mf-panel) !important;
  border: 1px solid var(--mf-line) !important;
  border-radius: var(--mf-r-lg) !important;
  box-shadow: none !important;
  background-image: none !important;
}

.saas-panel--highlight {
  border-color: var(--mf-line-strong) !important;
}

.panel {
  padding: 18px 18px !important;
}

.card-surface {
  padding: 18px 18px !important;
}

.panel-title,
.saas-panel-title,
.settings-card h2 {
  margin: 0 0 12px !important;
  font-size: 12px !important;
  font-weight: 510 !important;
  letter-spacing: -0.01em !important;
  color: var(--mf-text) !important;
}

.saas-panel-head {
  padding: 12px 14px !important;
  border-bottom: 1px solid var(--mf-line) !important;
  background: transparent !important;
}

.saas-panel-desc,
.card-desc {
  margin: 3px 0 0 !important;
  font-size: 11.5px !important;
  color: var(--mf-text-3) !important;
  font-weight: 400 !important;
}

.saas-panel-body {
  padding: 14px !important;
}

.saas-panel-body--flush {
  padding: 0 !important;
}

/* ——— Buttons ——— */
.btn,
a.btn,
button.btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  height: 30px !important;
  padding: 0 11px !important;
  border-radius: var(--mf-r) !important;
  font-family: inherit !important;
  font-size: 12.5px !important;
  font-weight: 500 !important;
  letter-spacing: -0.01em !important;
  line-height: 1 !important;
  border: 1px solid var(--mf-line-strong) !important;
  background: var(--mf-panel-2) !important;
  color: var(--mf-text) !important;
  box-shadow: none !important;
  transition: background 0.1s ease, border-color 0.1s ease, color 0.1s ease,
    opacity 0.1s ease !important;
  cursor: pointer !important;
  text-decoration: none !important;
}

.btn:hover {
  background: var(--mf-hover) !important;
  border-color: #3a3c44 !important;
}

.btn:disabled {
  opacity: 0.38 !important;
  cursor: not-allowed !important;
}

.btn-sm {
  height: 26px !important;
  padding: 0 9px !important;
  font-size: 12px !important;
}

.btn-lg,
.btn-block {
  height: 34px !important;
  padding: 0 14px !important;
  font-size: 13px !important;
}

.btn-block {
  width: 100% !important;
}

.btn-primary,
.btn-run,
.btn-continue {
  background: var(--mf-white) !important;
  color: var(--mf-invert) !important;
  border-color: var(--mf-white) !important;
}

.btn-primary:hover,
.btn-run:hover,
.btn-continue:hover {
  background: #e4e4e7 !important;
  border-color: #e4e4e7 !important;
  color: var(--mf-invert) !important;
}

.btn-secondary,
.btn-ghost {
  background: transparent !important;
  color: var(--mf-text) !important;
  border-color: var(--mf-line-strong) !important;
}

.btn-secondary:hover,
.btn-ghost:hover {
  background: var(--mf-hover) !important;
}

.btn-warn {
  background: var(--mf-warn-dim) !important;
  color: #e8c547 !important;
  border-color: var(--mf-warn-line) !important;
}

.btn-danger {
  background: transparent !important;
  color: #f2a0a0 !important;
  border-color: var(--mf-danger-line) !important;
}

.btn-danger:hover {
  background: var(--mf-danger-dim) !important;
}

.btn-dry {
  background: var(--mf-panel-2) !important;
  color: var(--mf-text-2) !important;
}

.btn-row,
.form-actions-row,
.saas-topbar-actions {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  align-items: center !important;
}

/* ——— Forms ——— */
.field-input,
.input-md,
input.input-md,
select.input-md,
textarea.input-md,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
select,
textarea {
  width: 100% !important;
  height: 34px !important;
  padding: 0 11px !important;
  font-family: inherit !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  color: var(--mf-text) !important;
  background: var(--mf-void) !important;
  border: 1px solid var(--mf-line) !important;
  border-radius: var(--mf-r) !important;
  box-shadow: none !important;
  outline: none !important;
  transition: border-color 0.1s ease !important;
}

textarea,
textarea.input-md {
  height: auto !important;
  min-height: 72px !important;
  padding: 9px 11px !important;
}

.field-input:hover,
.input-md:hover,
input:hover,
select:hover {
  border-color: var(--mf-line-strong) !important;
}

.field-input:focus,
.input-md:focus,
input:focus,
select:focus,
textarea:focus {
  border-color: #4a4c55 !important;
  box-shadow: var(--focus-ring) !important;
}

.field-label,
.form-group label {
  display: block !important;
  margin: 0 0 6px !important;
  font-size: 11.5px !important;
  font-weight: 500 !important;
  color: var(--mf-text-2) !important;
  letter-spacing: -0.005em !important;
}

.stack-form,
.settings-stack {
  display: flex !important;
  flex-direction: column !important;
  gap: 14px !important;
}

.field {
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
}

/* ——— Auth ——— */
.auth-shell {
  min-height: calc(100vh - var(--mf-header) - 80px) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 24px 0 48px !important;
}

.auth-panel {
  width: 100% !important;
  max-width: 340px !important;
  border: none !important;
  background: transparent !important;
  padding: 0 !important;
}

.auth-kicker {
  margin: 0 0 10px !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  color: var(--mf-text-3) !important;
}

.auth-title {
  margin: 0 0 8px !important;
  font-size: 20px !important;
  font-weight: 510 !important;
  letter-spacing: var(--mf-track) !important;
  line-height: 1.2 !important;
}

.auth-lead {
  margin: 0 0 22px !important;
  font-size: 13px !important;
  color: var(--mf-text-2) !important;
  line-height: 1.45 !important;
}

.auth-meta {
  margin: 18px 0 0 !important;
  font-size: 12.5px !important;
  color: var(--mf-text-3) !important;
  text-align: center !important;
}

.auth-meta a {
  color: var(--mf-text) !important;
  text-decoration: underline !important;
  text-underline-offset: 2px !important;
}

/* ——— Banners / badges ——— */
.banner,
.setup-banner {
  padding: 10px 12px !important;
  border-radius: var(--mf-r) !important;
  border: 1px solid var(--mf-line) !important;
  background: var(--mf-panel-2) !important;
  font-size: 12.5px !important;
  line-height: 1.45 !important;
  color: var(--mf-text-2) !important;
  box-shadow: none !important;
  background-image: none !important;
}

.banner--error,
.auth-error {
  border-color: var(--mf-danger-line) !important;
  background: var(--mf-danger-dim) !important;
  color: #f2a0a0 !important;
}

.banner--warn,
.setup-banner {
  border-color: var(--mf-warn-line) !important;
  background: var(--mf-warn-dim) !important;
  color: #e0c56a !important;
}

.banner--info {
  border-color: var(--mf-line) !important;
  background: var(--mf-panel-2) !important;
  color: var(--mf-text-2) !important;
}

.badge,
.phase-pill,
.status-pill {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  height: 20px !important;
  padding: 0 7px !important;
  border-radius: 999px !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  border: 1px solid var(--mf-line) !important;
  background: var(--mf-panel-2) !important;
  color: var(--mf-text-2) !important;
  white-space: nowrap !important;
}

.badge--ok,
.phase-pill--done,
.phase-pill--connected,
.status-pill--done {
  border-color: var(--mf-ok-line) !important;
  background: var(--mf-ok-dim) !important;
  color: var(--mf-ok) !important;
}

.phase-pill--running,
.phase-pill--current,
.status-pill--running {
  border-color: rgba(91, 159, 212, 0.3) !important;
  background: var(--mf-run-dim) !important;
  color: #8ebfe0 !important;
}

.phase-pill--awaiting_authorization {
  border-color: rgba(251, 191, 36, 0.3) !important;
  background: rgba(120, 53, 15, 0.18) !important;
  color: #fbbf24 !important;
}

.phase-pill--failed,
.phase-pill--partial,
.status-pill--error {
  border-color: var(--mf-danger-line) !important;
  background: var(--mf-danger-dim) !important;
  color: #f2a0a0 !important;
}

.status-pill-dot,
.live-pulse,
.kpi-pulse {
  width: 5px !important;
  height: 5px !important;
  border-radius: 50% !important;
  background: currentColor !important;
}

/* ——— KPI grid ——— */
.kpi-grid,
.stats-grid {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 8px !important;
  margin: 0 0 4px !important;
}

@media (max-width: 720px) {
  :root {
    --mf-header: 52px;
  }

  .app-header-inner,
  .header-inner {
    gap: 10px !important;
    padding: 0 12px !important;
  }

  .nav-item,
  .nav a,
  .nav-link {
    height: 44px !important;
    padding: 0 10px !important;
  }

  .btn,
  a.btn,
  button.btn {
    min-height: 44px !important;
    height: auto !important;
    padding: 8px 12px !important;
  }

  .btn-sm {
    min-height: 40px !important;
  }

  .field-input,
  .input-md,
  input.input-md,
  select.input-md,
  textarea.input-md,
  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="number"],
  select {
    min-height: 44px !important;
  }

  .kpi-grid,
  .stats-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

.kpi-card,
.stat-card {
  position: relative !important;
  padding: 12px 13px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
}

.kpi-label,
.stat-label {
  font-size: 11px !important;
  font-weight: 500 !important;
  color: var(--mf-text-3) !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
}

.kpi-value,
.stat-value {
  font-size: 20px !important;
  font-weight: 510 !important;
  letter-spacing: var(--mf-track) !important;
  color: var(--mf-text) !important;
  line-height: 1.1 !important;
}

.kpi-card--live.is-active {
  border-color: rgba(91, 159, 212, 0.35) !important;
}

.kpi-card--alert {
  border-color: var(--mf-danger-line) !important;
}

/* ——— Tenant cards ——— */
.tenant-list,
.job-list {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  padding: 10px !important;
}

.tenant-card,
.job-card {
  padding: 14px 14px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
  transition: border-color 0.12s ease !important;
}

.tenant-card:hover,
.job-card:hover {
  border-color: var(--mf-line-strong) !important;
  box-shadow: none !important;
}

.tenant-card--running,
.tenant-card--connecting {
  border-color: rgba(91, 159, 212, 0.35) !important;
}

.tenant-card--error {
  border-color: var(--mf-danger-line) !important;
}

.tenant-card--done {
  border-color: var(--mf-line) !important;
}

.tenant-card-head,
.job-card-header {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 10px !important;
}

.tenant-card-domain,
.job-domain {
  margin: 0 !important;
  font-size: 13.5px !important;
  font-weight: 510 !important;
  letter-spacing: var(--mf-track) !important;
  color: var(--mf-text) !important;
}

.tenant-card-meta,
.job-meta {
  margin: 4px 0 0 !important;
  font-size: 11.5px !important;
  color: var(--mf-text-3) !important;
}

.tenant-card-meta code,
.job-meta code {
  font-family: var(--mf-mono) !important;
  font-size: 11px !important;
  color: var(--mf-text-2) !important;
}

.progress-track,
.progress-track--lg,
.sub-progress {
  height: 3px !important;
  border-radius: 99px !important;
  background: var(--mf-hover) !important;
  overflow: hidden !important;
}

.progress-bar-fill,
.sub-progress-fill,
.progress-fill {
  height: 100% !important;
  background: var(--mf-text-2) !important;
  border-radius: 99px !important;
}

.tenant-card--running .progress-bar-fill,
.progress-bar-fill.is-live {
  background: var(--mf-run) !important;
}

.progress-labels {
  display: flex !important;
  gap: 8px !important;
  margin-top: 6px !important;
  font-size: 11.5px !important;
  color: var(--mf-text-3) !important;
}

.progress-step {
  color: var(--mf-text-2) !important;
  font-weight: 500 !important;
}

.tenant-card-detail,
.progress-message {
  margin: 6px 0 0 !important;
  font-size: 12px !important;
  color: var(--mf-text-2) !important;
  line-height: 1.4 !important;
}

.tenant-card-sequencer {
  padding: 8px 10px !important;
  border-radius: var(--mf-r) !important;
  border: 1px solid var(--mf-line) !important;
  background: var(--mf-void) !important;
  font-size: 12px !important;
}

.tenant-card-sequencer-label {
  display: block !important;
  font-size: 10.5px !important;
  font-weight: 500 !important;
  color: var(--mf-text-3) !important;
  margin-bottom: 2px !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
}

.tenant-action-bar,
.job-card-actions {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px !important;
  padding-top: 10px !important;
  border-top: 1px solid var(--mf-line) !important;
}

/* ——— Empty state ——— */
.empty-state {
  text-align: center !important;
  padding: 40px 24px !important;
  margin: 10px !important;
}

.empty-state-title {
  margin: 0 0 6px !important;
  font-size: 14px !important;
  font-weight: 510 !important;
  letter-spacing: var(--mf-track) !important;
  color: var(--mf-text) !important;
}

.empty-state-desc {
  margin: 0 0 16px !important;
  font-size: 12.5px !important;
  color: var(--mf-text-3) !important;
  max-width: 28rem !important;
  margin-left: auto !important;
  margin-right: auto !important;
  line-height: 1.45 !important;
}

/* ——— Live execution ——— */
.live-idle p,
.saas-empty {
  margin: 0 !important;
  font-size: 12.5px !important;
  color: var(--mf-text-3) !important;
}

.pipeline-rail {
  gap: 0 !important;
}

.pipeline-dot {
  width: 7px !important;
  height: 7px !important;
  border: 1px solid var(--mf-line-strong) !important;
  background: var(--mf-void) !important;
  box-shadow: none !important;
}

.pipeline-step.is-done .pipeline-dot {
  background: var(--mf-text-2) !important;
  border-color: var(--mf-text-2) !important;
}

.pipeline-step.is-current .pipeline-dot {
  background: var(--mf-run) !important;
  border-color: var(--mf-run) !important;
}

.pipeline-label {
  font-size: 10px !important;
  color: var(--mf-text-3) !important;
}

.live-metric-label {
  font-size: 10.5px !important;
  color: var(--mf-text-3) !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
}

.live-metric-value {
  font-size: 12.5px !important;
  font-weight: 500 !important;
  color: var(--mf-text) !important;
}

.saas-live-badge {
  height: 20px !important;
  padding: 0 7px !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  border-radius: 999px !important;
  background: var(--mf-panel-2) !important;
  color: var(--mf-text-3) !important;
  border: 1px solid var(--mf-line) !important;
}

.saas-live-badge.is-on {
  background: var(--mf-run-dim) !important;
  color: #8ebfe0 !important;
  border-color: rgba(91, 159, 212, 0.3) !important;
}

/* ——— Workspace layout ——— */
.saas-workspace {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 12px !important;
  align-items: start !important;
}

@media (min-width: 1080px) {
  .saas-workspace {
    grid-template-columns: minmax(0, 1fr) 280px !important;
    gap: 12px !important;
  }
  .saas-col-side {
    position: sticky !important;
    top: calc(var(--mf-header) + 16px) !important;
  }
}

.saas-col-main,
.saas-col-side {
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
  min-width: 0 !important;
}

.grid-2 {
  display: grid !important;
  gap: 12px !important;
}

@media (min-width: 800px) {
  .grid-2 {
    grid-template-columns: 1.15fr 0.85fr !important;
  }
}

.meta-list {
  margin: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
}

.meta-list > div {
  display: grid !important;
  grid-template-columns: 88px 1fr !important;
  gap: 8px !important;
  font-size: 12.5px !important;
}

.meta-list dt {
  margin: 0 !important;
  color: var(--mf-text-3) !important;
  font-weight: 450 !important;
}

.meta-list dd {
  margin: 0 !important;
  color: var(--mf-text) !important;
}

.feature-list {
  margin: 0 !important;
  padding-left: 1.05rem !important;
  color: var(--mf-text-2) !important;
  font-size: 12.5px !important;
  line-height: 1.65 !important;
}

.muted,
.text-muted {
  color: var(--mf-text-3) !important;
}

.link-accent,
a.link-accent {
  color: var(--mf-text) !important;
  text-decoration: underline !important;
  text-underline-offset: 2px !important;
  text-decoration-color: var(--mf-line-strong) !important;
}

.link-accent:hover {
  text-decoration-color: var(--mf-text-2) !important;
}

.text-ok {
  color: var(--mf-ok) !important;
}

/* Activity feed */
.activity-card,
.activity-lines {
  background: transparent !important;
  border-color: var(--mf-line) !important;
}

.activity-line {
  font-family: var(--mf-mono) !important;
  font-size: 11px !important;
  color: var(--mf-text-3) !important;
  border-color: var(--mf-line) !important;
}

.activity-card-header {
  border-color: var(--mf-line) !important;
  padding: 10px 12px !important;
}

.activity-card-header h3 {
  font-size: 12px !important;
  font-weight: 510 !important;
}

/* Settings density */
.settings-page {
  max-width: 560px !important;
}

.settings-grid-2 {
  display: grid !important;
  gap: 12px !important;
}

@media (min-width: 540px) {
  .settings-grid-2 {
    grid-template-columns: 1fr 1fr !important;
  }
}

.settings-card h2 {
  margin-bottom: 4px !important;
}

/* Utility noise kill — force quiet slate utilities toward system */
.bg-slate-950,
.bg-slate-900,
.bg-slate-900\/80,
.bg-slate-800 {
  background: var(--mf-panel) !important;
}

.border-slate-800,
.border-slate-700 {
  border-color: var(--mf-line) !important;
}

.text-slate-400,
.text-slate-500 {
  color: var(--mf-text-3) !important;
}

.text-slate-300,
.text-slate-200 {
  color: var(--mf-text-2) !important;
}

/* ——— UI clarity pass helpers ——— */
.req { color: var(--mf-danger); }
.field-hint {
  margin: 4px 0 0 !important;
  font-size: 11.5px !important;
  color: var(--mf-text-3) !important;
  line-height: 1.4 !important;
}
.card-title-sm {
  margin: 0 0 8px !important;
  font-size: 12.5px !important;
  font-weight: 510 !important;
  letter-spacing: var(--mf-track) !important;
  color: var(--mf-text) !important;
}
.card-surface--compact {
  padding: 14px 16px !important;
}
.steps-list {
  margin: 0 !important;
  padding-left: 1.15rem !important;
  font-size: 12.5px !important;
  color: var(--mf-text-2) !important;
  line-height: 1.55 !important;
}
.steps-list li + li { margin-top: 4px !important; }
.status-list {
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
  font-size: 12.5px !important;
  color: var(--mf-text-2) !important;
}
.status-list li + li { margin-top: 6px !important; }
.text-ok { color: var(--mf-ok) !important; }
.text-warn { color: var(--mf-warn) !important; }
.text-danger { color: var(--mf-danger) !important; }

/* Delegated domain connection */
.domain-connect-page {
  max-width: 880px !important;
}
.domain-connect-grid {
  display: grid !important;
  gap: 14px !important;
}
@media (min-width: 760px) {
  .domain-connect-grid {
    grid-template-columns: minmax(0, 1.45fr) minmax(260px, .75fr) !important;
    align-items: start !important;
  }
}
.domain-connect-head {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 12px !important;
}
.domain-connection-steps {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 8px !important;
  margin: 18px 0 !important;
  padding: 0 !important;
  list-style: none !important;
}
.domain-connection-steps li {
  display: flex !important;
  align-items: center !important;
  gap: 7px !important;
  min-width: 0 !important;
  padding: 8px 9px !important;
  border: 1px solid var(--mf-line) !important;
  border-radius: var(--mf-r-md) !important;
  color: var(--mf-text-2) !important;
  font-size: 11.5px !important;
}
.domain-connection-steps li > span {
  display: grid !important;
  place-items: center !important;
  width: 20px !important;
  height: 20px !important;
  flex: 0 0 20px !important;
  border-radius: 999px !important;
  background: var(--mf-bg) !important;
  border: 1px solid var(--mf-line-strong) !important;
  font-size: 10px !important;
  font-weight: 700 !important;
}
.domain-connection-steps li.is-complete {
  border-color: color-mix(in srgb, var(--mf-ok) 34%, var(--mf-line)) !important;
  color: var(--mf-text) !important;
}
.domain-connection-steps li.is-complete > span {
  color: var(--mf-ok) !important;
  border-color: color-mix(in srgb, var(--mf-ok) 52%, var(--mf-line)) !important;
  background: color-mix(in srgb, var(--mf-ok) 8%, var(--mf-panel)) !important;
}
.domain-check-result {
  display: grid !important;
  gap: 3px !important;
  margin: 0 0 14px !important;
  padding: 10px 12px !important;
  border: 1px solid var(--mf-line-strong) !important;
  border-radius: var(--mf-r-md) !important;
  background: var(--mf-bg) !important;
  color: var(--mf-text-2) !important;
  font-size: 12px !important;
}
.domain-check-result strong { color: var(--mf-text) !important; }
.domain-check-result small { color: var(--mf-text-3) !important; }
.domain-check-result.level-success {
  border-color: color-mix(in srgb, var(--mf-ok) 42%, var(--mf-line)) !important;
  background: color-mix(in srgb, var(--mf-ok) 6%, var(--mf-panel)) !important;
}
.domain-check-result.level-warning {
  border-color: color-mix(in srgb, var(--mf-warn) 42%, var(--mf-line)) !important;
  background: color-mix(in srgb, var(--mf-warn) 6%, var(--mf-panel)) !important;
}
.domain-check-result.level-error {
  border-color: color-mix(in srgb, var(--mf-danger) 42%, var(--mf-line)) !important;
  background: color-mix(in srgb, var(--mf-danger) 6%, var(--mf-panel)) !important;
}
@media (max-width: 620px) {
  .domain-connection-steps { grid-template-columns: 1fr !important; }
}
.nameserver-list {
  display: grid !important;
  gap: 8px !important;
  margin: 18px 0 12px !important;
}
.nameserver-row {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  gap: 8px !important;
  align-items: stretch !important;
}
.nameserver-value {
  display: block !important;
  padding: 11px 12px !important;
  border: 1px solid var(--mf-line-strong) !important;
  border-radius: var(--mf-r-md) !important;
  background: var(--mf-bg) !important;
  color: var(--mf-text) !important;
  font-size: 13px !important;
  user-select: all !important;
  overflow-wrap: anywhere !important;
}
.nameserver-row .btn-copy {
  min-width: 72px !important;
}
.domain-connect-message {
  margin: 10px 0 0 !important;
  color: var(--mf-text-2) !important;
  font-size: 12.5px !important;
  line-height: 1.5 !important;
}
.domain-connect-note {
  margin-top: 14px !important;
}
.code-block {
  display: block !important;
  margin-top: 8px !important;
  padding: 8px 10px !important;
  background: var(--mf-void) !important;
  border: 1px solid var(--mf-line) !important;
  border-radius: var(--mf-r) !important;
  font-size: 11.5px !important;
  word-break: break-all !important;
  color: var(--mf-ok) !important;
}
.advanced-block {
  margin-top: 12px !important;
  padding-top: 10px !important;
  border-top: 1px solid var(--mf-line) !important;
}
.advanced-block summary {
  cursor: pointer !important;
  font-size: 12px !important;
  color: var(--mf-text-3) !important;
  user-select: none !important;
}
.advanced-block[open] summary {
  margin-bottom: 10px !important;
  color: var(--mf-text-2) !important;
}
.add-tenant-layout { align-items: start !important; }
.stack-aside { display: flex !important; flex-direction: column !important; gap: 12px !important; }
.preview-form {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  align-items: center !important;
}
.input-md--narrow { max-width: 72px !important; }
.name-preview {
  margin-top: 10px !important;
  font-size: 12px !important;
  color: var(--mf-text-3) !important;
  font-family: var(--mf-mono) !important;
}
.form-actions-span { grid-column: 1 / -1 !important; }
.mt-3 { margin-top: 0.75rem !important; }
.mt-4 { margin-top: 1rem !important; }
.mt-6 { margin-top: 1.5rem !important; }
.mb-4 { margin-bottom: 1rem !important; }
.mb-6 { margin-bottom: 1.5rem !important; }
.break-all { word-break: break-all !important; }
.activity-log {
  margin: 8px 0 0 !important;
  max-height: 280px !important;
  overflow: auto !important;
  padding: 10px !important;
  background: var(--mf-void) !important;
  border-radius: var(--mf-r) !important;
  font-size: 11px !important;
  color: var(--mf-text-3) !important;
  white-space: pre-wrap !important;
}
.guide-checklist-head {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  margin-bottom: 12px !important;
}
.guide-progress-track {
  width: 140px !important;
  flex-shrink: 0 !important;
}
.guide-blockers { margin-bottom: 12px !important; }
.guide-steps {
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
}
.guide-step {
  display: flex !important;
  gap: 10px !important;
  align-items: flex-start !important;
  padding: 8px 10px !important;
  border-radius: var(--mf-r) !important;
  background: var(--mf-panel-2) !important;
  border: 1px solid transparent !important;
}
.guide-step--complete { background: var(--mf-ok-dim) !important; }
.guide-step--current {
  background: var(--mf-run-dim) !important;
  border-color: rgba(91, 159, 212, 0.35) !important;
}
.guide-step--warning { background: var(--mf-warn-dim) !important; }
.guide-step-num {
  flex-shrink: 0 !important;
  width: 22px !important;
  height: 22px !important;
  border-radius: 99px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  background: var(--mf-line-strong) !important;
  color: var(--mf-text) !important;
}
.guide-step--complete .guide-step-num {
  background: var(--mf-ok) !important;
  color: var(--mf-invert) !important;
}
.guide-step--current .guide-step-num { background: var(--mf-run) !important; color: #fff !important; }
.guide-step-title {
  font-size: 12.5px !important;
  font-weight: 510 !important;
  color: var(--mf-text) !important;
}
.guide-step-summary,
.guide-step-detail {
  font-size: 11.5px !important;
  color: var(--mf-text-3) !important;
  margin-top: 2px !important;
}
.guide-step-action {
  display: inline-block !important;
  margin-top: 4px !important;
  font-size: 11.5px !important;
}
.settings-page { max-width: 720px !important; }
.consent-result {
  max-width: 420px !important;
  margin: 2.5rem auto !important;
  text-align: center !important;
}
.consent-result--ok { border-color: var(--mf-ok-line) !important; }
.consent-result--err { border-color: var(--mf-danger-line) !important; }
.guide-compact {
  padding: 12px 14px !important;
}
.guide-compact-head {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  margin-bottom: 8px !important;
}
.guide-compact-label {
  font-size: 12px !important;
  font-weight: 510 !important;
}
.guide-compact-list {
  margin: 10px 0 0 !important;
  padding: 0 !important;
  list-style: none !important;
  font-size: 11.5px !important;
  color: var(--mf-text-3) !important;
}
.guide-compact-item {
  display: flex !important;
  gap: 8px !important;
  padding: 2px 0 !important;
}
.guide-compact-item--complete { color: var(--mf-ok) !important; }
.guide-compact-item--current { color: var(--mf-run) !important; }
.guide-compact-item--warning { color: var(--mf-warn) !important; }
.grid-2 {
  display: grid !important;
  gap: 16px !important;
}
@media (min-width: 800px) {
  .grid-2 { grid-template-columns: 1fr 1fr !important; }
}

/* Focus */
:focus-visible {
  outline: none !important;
  box-shadow: var(--focus-ring) !important;
}

/* Selection */
::selection {
  background: rgba(244, 244, 245, 0.16);
  color: var(--mf-text);
}

/* Scrollbar (webkit) — subtle, engineered */
*::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
*::-webkit-scrollbar-track {
  background: transparent;
}
*::-webkit-scrollbar-thumb {
  background: var(--mf-line-strong);
  border-radius: 99px;
  border: 2px solid var(--mf-void);
}
*::-webkit-scrollbar-thumb:hover {
  background: #3a3c44;
}

/* ——— Product foundation v4 ———
 * Canonical shell, navigation, form, diagnostic, and fleet primitives.
 * Keep new page work in semantic components below instead of adding utilities.
 */
.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.brand-context {
  padding-left: 9px !important;
  border-left: 1px solid var(--mf-line-strong) !important;
  color: var(--mf-text-3) !important;
  font-size: 11px !important;
  white-space: nowrap !important;
}

.header-actions {
  display: flex !important;
  align-items: center !important;
  flex: 0 0 auto !important;
}

.account-menu,
.action-menu {
  position: relative !important;
}

.account-menu > summary,
.action-menu > summary {
  list-style: none !important;
}

.account-menu > summary::-webkit-details-marker,
.action-menu > summary::-webkit-details-marker {
  display: none !important;
}

.account-menu > summary {
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;
  min-height: 32px !important;
  padding: 0 8px !important;
  border: 1px solid transparent !important;
  border-radius: var(--mf-r) !important;
  color: var(--mf-text-2) !important;
  cursor: pointer !important;
}

.account-menu > summary:hover,
.account-menu[open] > summary {
  color: var(--mf-text) !important;
  background: var(--mf-hover) !important;
  border-color: var(--mf-line) !important;
}

.account-avatar {
  display: inline-grid !important;
  width: 22px !important;
  height: 22px !important;
  place-items: center !important;
  border: 1px solid var(--mf-line-strong) !important;
  border-radius: 50% !important;
  background: var(--mf-panel-2) !important;
  color: var(--mf-text) !important;
  font-size: 10px !important;
  font-weight: 650 !important;
}

.account-avatar--lg {
  width: 38px !important;
  height: 38px !important;
  font-size: 14px !important;
}

.account-menu-popover,
.action-menu-popover {
  position: absolute !important;
  right: 0 !important;
  top: calc(100% + 7px) !important;
  z-index: 100 !important;
  min-width: 190px !important;
  padding: 6px !important;
  border: 1px solid var(--mf-line-strong) !important;
  border-radius: var(--mf-r-lg) !important;
  background: var(--mf-raised) !important;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.42) !important;
}

.account-menu-popover a,
.action-menu-item {
  display: flex !important;
  width: 100% !important;
  min-height: 34px !important;
  align-items: center !important;
  padding: 0 9px !important;
  border: 0 !important;
  border-radius: var(--mf-r) !important;
  background: transparent !important;
  color: var(--mf-text-2) !important;
  font: inherit !important;
  font-size: 12.5px !important;
  text-align: left !important;
  text-decoration: none !important;
  cursor: pointer !important;
}

.account-menu-popover a:hover,
.action-menu-item:hover {
  background: var(--mf-hover) !important;
  color: var(--mf-text) !important;
}

.action-menu-item:disabled {
  opacity: .42 !important;
  cursor: not-allowed !important;
}

.account-menu-email {
  display: block !important;
  padding: 5px 9px 8px !important;
  border-bottom: 1px solid var(--mf-line) !important;
  margin-bottom: 4px !important;
  color: var(--mf-text-3) !important;
  font-size: 11px !important;
  overflow-wrap: anywhere !important;
}

.page-title,
.saas-topbar-brand h1,
.settings-header h1 {
  font-size: 21px !important;
  font-weight: 540 !important;
}

.eyebrow {
  margin: 0 0 5px !important;
  color: var(--mf-text-3) !important;
  font-size: 10.5px !important;
  font-weight: 600 !important;
  letter-spacing: .055em !important;
  text-transform: uppercase !important;
}

.section-heading {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 12px !important;
}

.section-nav {
  position: sticky !important;
  top: calc(var(--mf-header) + 8px) !important;
  z-index: 20 !important;
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 3px !important;
  padding: 6px !important;
  border: 1px solid var(--mf-line) !important;
  border-radius: var(--mf-r-lg) !important;
  background: rgba(14, 15, 17, .92) !important;
  backdrop-filter: blur(12px) !important;
}

.section-nav a {
  display: inline-flex !important;
  min-height: 30px !important;
  align-items: center !important;
  padding: 0 9px !important;
  border-radius: var(--mf-r) !important;
  color: var(--mf-text-2) !important;
  font-size: 12px !important;
  text-decoration: none !important;
}

.section-nav a:hover {
  color: var(--mf-text) !important;
  background: var(--mf-hover) !important;
}

.async-status {
  margin-left: auto !important;
  padding: 0 8px !important;
  color: var(--mf-text-3) !important;
  font-size: 11px !important;
}

.async-status.is-saving { color: var(--mf-run) !important; }
.async-status.is-saved { color: var(--mf-ok) !important; }
.async-status.is-error { color: var(--mf-danger) !important; }

.form-section-heading {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 4px 0 2px !important;
}

.form-section-step {
  display: inline-grid !important;
  width: 24px !important;
  height: 24px !important;
  flex: 0 0 24px !important;
  place-items: center !important;
  border: 1px solid var(--mf-line-strong) !important;
  border-radius: 50% !important;
  background: var(--mf-panel-2) !important;
  color: var(--mf-text) !important;
  font-size: 11px !important;
  font-weight: 650 !important;
}

.form-section-heading > div {
  display: grid !important;
  gap: 1px !important;
}

.form-section-heading strong {
  font-size: 12.5px !important;
  font-weight: 560 !important;
}

.form-section-heading span:not(.form-section-step) {
  color: var(--mf-text-3) !important;
  font-size: 11px !important;
}

.fleet-toolbar {
  display: grid !important;
  grid-template-columns: minmax(180px, 1fr) 150px !important;
  gap: 8px !important;
  padding: 10px !important;
  border-bottom: 1px solid var(--mf-line) !important;
  background: var(--mf-raised) !important;
}

.fleet-filter .input-md {
  height: 32px !important;
  background: var(--mf-void) !important;
}

.tenant-card[hidden] {
  display: none !important;
}

.panel-disclosure {
  border: 1px solid var(--mf-line) !important;
  border-radius: var(--mf-r-lg) !important;
  background: var(--mf-panel) !important;
  overflow: hidden !important;
}

.panel-disclosure > summary {
  padding: 12px 14px !important;
  color: var(--mf-text-2) !important;
  font-size: 12px !important;
  font-weight: 510 !important;
  cursor: pointer !important;
}

.panel-disclosure[open] > summary {
  border-bottom: 1px solid var(--mf-line) !important;
  color: var(--mf-text) !important;
}

.panel-disclosure .saas-panel {
  border: 0 !important;
  border-radius: 0 !important;
}

.health-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 12px !important;
}

.health-card {
  display: flex !important;
  min-height: 154px !important;
  flex-direction: column !important;
  align-items: flex-start !important;
}

.health-card > .btn,
.health-card > a.btn {
  margin-top: auto !important;
}

.health-card-head {
  display: flex !important;
  width: 100% !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px !important;
  margin-bottom: 10px !important;
}

.health-card-head .card-title-sm {
  margin: 0 !important;
}

.health-status {
  display: inline-flex !important;
  min-height: 20px !important;
  align-items: center !important;
  padding: 0 7px !important;
  border: 1px solid var(--mf-line) !important;
  border-radius: 999px !important;
  color: var(--mf-text-2) !important;
  background: var(--mf-panel-2) !important;
  font-size: 10.5px !important;
  white-space: nowrap !important;
}

.health-status.is-ok {
  border-color: var(--mf-ok-line) !important;
  background: var(--mf-ok-dim) !important;
  color: var(--mf-ok) !important;
}

.health-status.is-warn {
  border-color: var(--mf-warn-line) !important;
  background: var(--mf-warn-dim) !important;
  color: var(--mf-warn) !important;
}

.health-status.is-error {
  border-color: var(--mf-danger-line) !important;
  background: var(--mf-danger-dim) !important;
  color: #f2a0a0 !important;
}

.settings-page {
  max-width: 760px !important;
}

.settings-card {
  scroll-margin-top: calc(var(--mf-header) + 70px) !important;
}

.settings-footer {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 14px !important;
  padding: 12px 0 0 !important;
}

.account-identity {
  display: flex !important;
  align-items: center !important;
  gap: 11px !important;
  padding-bottom: 16px !important;
  margin-bottom: 16px !important;
  border-bottom: 1px solid var(--mf-line) !important;
}

.account-identity > div {
  display: grid !important;
  gap: 2px !important;
}

.account-identity strong {
  font-size: 13px !important;
}

.account-identity span {
  color: var(--mf-text-3) !important;
  font-size: 11.5px !important;
}

.auth-privacy-note {
  margin-bottom: 12px !important;
}

.auth-code-copy {
  appearance: none !important;
  padding: 4px 7px !important;
  border: 1px solid transparent !important;
  border-radius: var(--mf-r) !important;
  background: transparent !important;
  cursor: copy !important;
}

.auth-code-copy:hover {
  border-color: var(--mf-ok-line) !important;
  background: var(--mf-ok-dim) !important;
}

.account-menu > summary:focus-visible,
.action-menu > summary:focus-visible,
.action-menu-item:focus-visible,
.auth-code-copy:focus-visible {
  outline: none !important;
  box-shadow: var(--focus-ring) !important;
}

@media (max-width: 760px) {
  .brand-context,
  .account-menu-label {
    display: none !important;
  }

  .app-header-inner,
  .header-inner {
    gap: 7px !important;
  }

  .account-menu > summary {
    min-width: 44px !important;
    justify-content: center !important;
    padding: 0 8px !important;
  }

  .fleet-toolbar,
  .health-grid {
    grid-template-columns: 1fr !important;
  }

  .section-nav {
    top: calc(var(--mf-header) + 4px) !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
  }

  .section-nav .async-status {
    display: none !important;
  }

  .settings-footer {
    align-items: stretch !important;
    flex-direction: column !important;
  }

  .settings-footer .btn {
    width: 100% !important;
  }
}

/* ——— Tenant-scoped sequencer workspace ——— */
.credential-workspace {
  margin: 18px 0 12px !important;
}

.section-heading-row,
.credential-profile-head,
.credential-bind-row {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
}

.eyebrow {
  margin: 0 0 4px !important;
  color: var(--mf-text-3) !important;
  font-size: 10.5px !important;
  font-weight: 650 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
}

.credential-profile-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 10px !important;
  margin-top: 16px !important;
}

.credential-profile-card {
  min-width: 0 !important;
  padding: 14px !important;
  border: 1px solid var(--mf-line) !important;
  border-radius: var(--mf-r-lg) !important;
  background: var(--mf-raised) !important;
}

.credential-profile-card--ready {
  border-color: var(--mf-ok-line) !important;
}

.credential-profile-head {
  align-items: flex-start !important;
  padding-bottom: 12px !important;
}

.credential-profile-head h3 {
  margin: 0 0 3px !important;
  font-size: 13.5px !important;
}

.credential-profile-head p {
  margin: 0 !important;
  color: var(--mf-text-3) !important;
  font-size: 11.5px !important;
}

.credential-bind-form,
.credential-create,
.credential-import-form {
  padding-top: 11px !important;
  border-top: 1px solid var(--mf-line) !important;
}

.credential-bind-form label,
.credential-create label {
  display: block !important;
  margin-bottom: 5px !important;
  color: var(--mf-text-2) !important;
  font-size: 11.5px !important;
}

.credential-bind-row select {
  min-width: 0 !important;
  flex: 1 !important;
}

.credential-create {
  margin-top: 11px !important;
}

.credential-create > summary {
  cursor: pointer !important;
  color: var(--mf-text-2) !important;
  font-size: 12px !important;
  list-style-position: inside !important;
}

.credential-create[open] > summary {
  margin-bottom: 12px !important;
  color: var(--mf-text) !important;
}

.credential-create .stack-form {
  gap: 10px !important;
}

.credential-import-form {
  margin-top: 11px !important;
}

.credential-import-form .btn {
  width: 100% !important;
  white-space: normal !important;
}

.connect-provider-chip--disabled {
  opacity: 0.42 !important;
  cursor: not-allowed !important;
}

.action-menu {
  position: relative !important;
}

.action-menu > summary {
  list-style: none !important;
  cursor: pointer !important;
}

.action-menu > summary::-webkit-details-marker {
  display: none !important;
}

.action-menu-panel {
  position: absolute !important;
  z-index: 10 !important;
  top: calc(100% + 6px) !important;
  right: 0 !important;
  width: 190px !important;
  padding: 6px !important;
  border: 1px solid var(--mf-line-strong) !important;
  border-radius: var(--mf-r-md) !important;
  background: var(--mf-panel-2) !important;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.35) !important;
}

.action-menu-panel .btn {
  width: 100% !important;
  justify-content: flex-start !important;
}

@media (max-width: 900px) {
  .credential-profile-grid {
    grid-template-columns: 1fr !important;
  }
}

/* ——— Focused Connect workspace ——— */
.connect-command-card {
  margin: 0 0 14px !important;
  padding: 18px !important;
}

.connect-command-head,
.connect-live-panel-head,
.connect-command-state {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 12px !important;
}

.connect-command-state {
  flex-wrap: wrap !important;
  justify-content: flex-end !important;
}

.connect-command-card .connect-message {
  max-width: 42rem !important;
  margin: 4px 0 0 !important;
  line-height: 1.5 !important;
}

.connect-stats--compact {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 8px !important;
  margin: 16px 0 12px !important;
}

.connect-stats--compact .stat-card {
  min-width: 0 !important;
  padding: 10px 12px !important;
}

.connect-toolbar {
  margin: 12px 0 0 !important;
  padding-top: 12px !important;
  border-top: 1px solid var(--mf-line) !important;
}

.connect-toolbar-spacer {
  flex: 1 1 auto !important;
}

.connect-provider-status {
  margin: 12px 0 0 !important;
}

.connect-provider-status-card {
  min-width: 0 !important;
  flex: 1 1 11rem !important;
  padding: 8px 10px !important;
}

.connect-provider-status-detail {
  display: none !important;
}

.connect-live-state,
.connect-live-meta {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  color: var(--mf-text-3) !important;
  font-size: 11.5px !important;
  white-space: nowrap !important;
}

.connect-live-state .live-pulse {
  color: var(--mf-ok) !important;
}

.connect-live-state--paused {
  color: #e0c56a !important;
}

.connect-live-panel {
  margin: 0 0 14px !important;
  border: 1px solid var(--mf-line) !important;
  border-radius: var(--mf-r-lg) !important;
  background: var(--mf-raised) !important;
  overflow: hidden !important;
}

.connect-live-panel-head {
  align-items: center !important;
  padding: 13px 16px !important;
  border-bottom: 1px solid var(--mf-line) !important;
}

.connect-live-panel .eyebrow {
  margin-bottom: 2px !important;
}

.connect-live-panel .connect-section-title {
  margin: 0 !important;
}

.connect-activity-lines {
  max-height: 13rem !important;
  margin: 0 !important;
  padding: 6px 16px !important;
  overflow: auto !important;
  list-style: none !important;
  font-family: var(--mono) !important;
  font-size: 11.5px !important;
  line-height: 1.55 !important;
}

.connect-activity-lines li {
  padding: 6px 0 !important;
  color: var(--mf-text-2) !important;
  border-bottom: 1px solid var(--mf-line) !important;
  word-break: break-word !important;
}

.connect-activity-lines li:last-child {
  border-bottom: 0 !important;
}

.connect-activity-lines .line-error { color: #f2a0a0 !important; }
.connect-activity-lines .line-ok { color: var(--mf-ok) !important; }
.connect-activity-lines .line-start { color: #8ebfe0 !important; }

.connect-activity-empty {
  margin: 0 !important;
  padding: 18px 16px !important;
  color: var(--mf-text-3) !important;
  font-size: 12px !important;
}

.connect-page > .ms-session-advanced {
  margin: 0 0 14px !important;
  background: var(--mf-raised) !important;
  border-color: var(--mf-line) !important;
}

.connect-page > .ms-session-advanced > summary {
  padding: 11px 14px !important;
}

@media (max-width: 720px) {
  .connect-command-head,
  .connect-live-panel-head {
    align-items: stretch !important;
    flex-direction: column !important;
  }

  .connect-command-state {
    justify-content: flex-start !important;
  }

  .connect-stats--compact {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .connect-toolbar-spacer {
    display: none !important;
  }

  .connect-toolbar .btn,
  .connect-toolbar .action-menu {
    flex: 1 1 auto !important;
  }

  .connect-header-actions {
    width: 100% !important;
    justify-content: space-between !important;
  }
}