/* Dark (default) — aligned with sci_onboarding / onboarding.scimarketing.ai */
:root,
html[data-sci-color-scheme="dark"],
html[data-mantine-color-scheme="dark"]{
  --bg0:#060b1a;
  --bg1:#0d1730;
  --panel:#0d1730;
  --panel-2:#111d40;
  --text:#eef2fb;
  --muted:#93a5cc;
  --text-muted:#5b6b8f;
  --accent:#5fd7a3;
  --accent2:#4f8ef7;
  --accent-light:#7fb0ff;
  --accent-dim:#2a4d8f;
  --danger:#FF4D6D;
  --warn:#FFB020;
  --border:#1e2c52;
  --border-soft:#162244;
  --shadow:0 10px 30px rgba(0,0,0,0.35);
  --radius:14px;
  --display: "Space Grotesk", ui-sans-serif, system-ui, sans-serif;
  --sans: "Inter", ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  --sci-input-bg: #0a1330;
  --sci-glow-a: rgba(79,142,247,0.22);
  --sci-glow-b: rgba(16,33,79,0.55);
  --sci-panel-bg: rgba(13, 23, 48, 0.82);
  --sci-sidebar-bg: linear-gradient(180deg, rgba(13, 23, 48, 0.98), rgba(6, 11, 26, 0.98));
  --sci-surface-1: rgba(231, 236, 255, 0.04);
  --sci-surface-2: rgba(231, 236, 255, 0.08);
  --sci-surface-hover: rgba(79, 142, 247, 0.14);
  --sci-surface-hover-strong: rgba(79, 142, 247, 0.22);
  --sci-link-active-bg: linear-gradient(90deg, rgba(95, 215, 163, 0.18), rgba(79, 142, 247, 0.12));
  --sci-scrollbar-thumb: rgba(147, 165, 204, 0.28);
  --sci-backdrop: rgba(3, 6, 15, 0.55);
  --sci-input-focus-bg: rgba(10, 19, 48, 0.88);
  --sci-focus-ring: rgba(79, 142, 247, 0.18);
  --sci-switch-track: rgba(147, 165, 204, 0.22);
  --sci-switch-thumb: #eef2fb;
  --sci-loader-overlay: color-mix(in srgb, var(--bg0) 82%, transparent);
  --z-tray: 1040;
  --z-navbar: 2000;
  --z-dropdown: 10700;
  --z-navbar-dropdown: 10550;
  --z-toast: 10600;
  /* iPhone Dynamic Island / home indicator / landscape notch */
  --sci-safe-top: env(safe-area-inset-top, 0px);
  --sci-safe-right: env(safe-area-inset-right, 0px);
  --sci-safe-bottom: env(safe-area-inset-bottom, 0px);
  --sci-safe-left: env(safe-area-inset-left, 0px);
  --sci-app-h: 100vh;
  --sci-app-h: 100dvh;
}

html[data-sci-color-scheme="light"],
html[data-mantine-color-scheme="light"]{
  --bg0:#f3f6fc;
  --bg1:#e8eef8;
  --panel:#ffffff;
  --panel-2:#f0f4fb;
  --text:#0c1228;
  --muted:#5b6b8f;
  --text-muted:#7a89a8;
  --accent:#0d9f6c;
  --accent2:#2a6de0;
  --accent-light:#4f8ef7;
  --accent-dim:#9bb8e8;
  --danger:#d93856;
  --warn:#c27a00;
  --border:rgba(12,18,40,0.12);
  --border-soft:rgba(12,18,40,0.08);
  --shadow:0 10px 28px rgba(12,18,40,0.08);
  --sci-input-bg:#ffffff;
  --sci-glow-a: rgba(79,142,247,0.14);
  --sci-glow-b: rgba(79,142,247,0.06);
  --sci-panel-bg: #ffffff;
  --sci-sidebar-bg: linear-gradient(180deg, #ffffff 0%, #e8eef8 100%);
  --sci-surface-1: rgba(12, 18, 40, 0.04);
  --sci-surface-2: rgba(12, 18, 40, 0.07);
  --sci-surface-hover: rgba(42, 109, 224, 0.10);
  --sci-surface-hover-strong: rgba(42, 109, 224, 0.16);
  --sci-link-active-bg: linear-gradient(90deg, rgba(13, 159, 108, 0.14), rgba(42, 109, 224, 0.10));
  --sci-scrollbar-thumb: rgba(91, 107, 143, 0.32);
  --sci-backdrop: rgba(12, 18, 40, 0.32);
  --sci-input-focus-bg: #ffffff;
  --sci-focus-ring: rgba(42, 109, 224, 0.2);
  --sci-switch-track: rgba(91, 107, 143, 0.24);
  --sci-switch-thumb: #ffffff;
  --sci-loader-overlay: color-mix(in srgb, var(--bg0) 88%, transparent);
}

html{
  height: 100%;
  background-color: var(--bg0);
  color-scheme: dark;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/* Soft theme cross-fade (class toggled while preference changes). */
html.sci-theme-animating,
html.sci-theme-animating *:not(svg):not(canvas):not(iframe),
html.sci-theme-animating *::before,
html.sci-theme-animating *::after {
  transition:
    background-color 0.38s ease,
    color 0.38s ease,
    border-color 0.38s ease,
    box-shadow 0.38s ease,
    fill 0.38s ease,
    stroke 0.38s ease !important;
}
@media (prefers-reduced-motion: reduce) {
  html.sci-theme-animating,
  html.sci-theme-animating *:not(svg):not(canvas):not(iframe),
  html.sci-theme-animating *::before,
  html.sci-theme-animating *::after {
    transition: none !important;
  }
}

.sci-theme-switch-wrap{
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  max-width: 420px;
}
.sci-theme-switch__side{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  color: var(--muted);
  background: var(--sci-surface-1);
  flex: 0 0 auto;
}
.sci-theme-switch__side--sun{
  color: #d4a017;
}
.sci-theme-switch__side--moon{
  color: #7fb0ff;
}
.sci-theme-switch{
  flex: 1 1 220px;
  min-width: 200px;
}

html[data-sci-color-scheme="light"],
html[data-mantine-color-scheme="light"]{
  color-scheme: light;
}

body{
  margin: 0;
  min-height: 100%;
  min-height: var(--sci-app-h);
  background-color: var(--bg0);
  background-image:
    radial-gradient(1100px 600px at 85% -10%, var(--sci-glow-b), transparent 60%),
    radial-gradient(900px 500px at -10% 20%, var(--sci-glow-a), transparent 55%),
    linear-gradient(180deg, var(--bg0), var(--bg1));
  background-repeat: no-repeat;
  background-size: 100% 100%;
  color: var(--text);
  font-family: var(--sans);
  overscroll-behavior-y: none;
}

h1, h2, h3, h4, h5, h6,
.navbar-brand,
.sci-brand,
.sci-side-brand,
.sci-confirm-title,
.job-tray-summary-label{
  font-family: var(--display);
  font-weight: 600;
  letter-spacing: -0.01em;
}

.mono, code, kbd, pre{
  font-family: var(--mono);
}

/* Logged-in shell: lock document scroll so iOS can't reveal a dead band under the app. */
html:has(.app-shell--main),
body:has(.app-shell--main){
  height: var(--sci-app-h);
  overflow: hidden;
}

#_dash-app-content,
#react-entry-point{
  min-height: 100%;
  background-color: var(--bg0);
}

#_dash-app-content:has(.app-shell--main),
#react-entry-point:has(.app-shell--main){
  height: var(--sci-app-h);
  overflow: hidden;
}

.app-shell{
  padding: 18px 20px 28px;
  max-width: 1400px;
  margin: 0 auto;
}

/* Main app shell: fixed viewport column — navbar pinned, page area scrolls. */
.app-shell--main{
  display: flex;
  flex-direction: column;
  width: 100%;
  height: var(--sci-app-h);
  max-height: var(--sci-app-h);
  padding: 18px 20px 0;
  padding-left: calc(20px + var(--sci-safe-left));
  padding-right: calc(20px + var(--sci-safe-right));
  box-sizing: border-box;
  overflow: hidden;
  background-color: var(--bg0);
}
/* Navbar stays at the top of the column; never scrolls away. */
.app-shell--main > .navbar,
.app-shell--main > .sci-navbar{
  flex: 0 0 auto;
  padding-top: var(--sci-safe-top);
}

/* Page shell + route loader: see assets/motion.css */

/* Shell job tray: fixed geometry (inline min() + flex ancestors were collapsing width on some setups) */
.job-progress-tray-shell{
  position: fixed;
  right: calc(16px + var(--sci-safe-right));
  bottom: calc(16px + var(--sci-safe-bottom));
  z-index: 1040;
  box-sizing: border-box;
  min-width: 280px;
  width: 380px;
  max-width: calc(94vw - var(--sci-safe-left) - var(--sci-safe-right));
  max-height: 55vh;
  flex-shrink: 0;
}

/* Shell toast: clear Dynamic Island / status bar in standalone + Safari. */
#app-toast-ui.app-toast-ui,
.app-toast-ui{
  position: fixed !important;
  top: calc(72px + var(--sci-safe-top)) !important;
  right: calc(16px + var(--sci-safe-right)) !important;
  width: min(420px, calc(92vw - var(--sci-safe-left) - var(--sci-safe-right))) !important;
  z-index: var(--z-toast) !important;
}

@media (max-width: 991.98px) {
  #app-toast-ui.app-toast-ui,
  .app-toast-ui {
    top: calc(var(--sci-topbar-h, 60px) + 10px + var(--sci-safe-top)) !important;
    width: min(420px, calc(100vw - 24px - var(--sci-safe-left) - var(--sci-safe-right))) !important;
  }
}
.job-progress-tray-shell.job-progress-tray--hidden{
  display: none !important;
}
.job-progress-tray-shell.job-progress-tray--collapsed{
  width: 218px;
  min-width: 218px; /* override base min-width so folded tray is visibly narrower */
  max-height: none;
}

.job-progress-tray-inner{
  width: 100%;
  min-width: inherit;
}
.job-progress-tray-card{
  min-width: 0;
  width: 100%;
  overflow: hidden;
  background: var(--sci-panel-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  color: var(--text);
  backdrop-filter: blur(10px);
}
.job-progress-tray-header{
  background: transparent;
  border-bottom: 1px solid var(--border);
  min-width: 0;
}
.job-progress-tray-body{
  overflow-y: auto;
  max-height: calc(55vh - 52px);
}
.job-progress-tray-shell .job-tray-summary,
.job-progress-tray-shell .job-tray-summary-label,
.job-progress-tray-shell .job-tray-entry-label{
  color: var(--text);
  line-height: 1.2;
}
.job-progress-tray-shell .job-tray-entry-msg{
  color: var(--muted);
}

.panel{
  background: var(--sci-panel-bg);
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
  border-radius: var(--radius);
  backdrop-filter: blur(10px);
}

.kpi-card{
  padding: 14px 16px;
}

.kpi-label{
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  font-family: var(--mono);
}

.kpi-value{
  font-size: 26px;
  margin-top: 6px;
  font-family: var(--mono);
}

.subtle{
  color: var(--muted);
}

/* Cube spinner */
.cube-spinner-wrap{
  display:flex;
  align-items:center;
  justify-content:center;
  padding: 26px 0;
}

.cube-spinner{
  width: 26px;
  height: 26px;
  position: relative;
  transform-style: preserve-3d;
  animation: cubeSpin 1.1s infinite ease-in-out;
}
.cube-spinner::before,
.cube-spinner::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius: 6px;
  background: linear-gradient(135deg, var(--accent2), var(--accent));
  opacity:0.85;
}
.cube-spinner::after{
  transform: translateZ(-14px) rotateY(180deg);
  opacity:0.50;
}

@keyframes cubeSpin{
  0%{ transform: rotateX(0deg) rotateY(0deg); }
  50%{ transform: rotateX(180deg) rotateY(180deg); }
  100%{ transform: rotateX(360deg) rotateY(360deg); }
}

/* Route transition loader (scoped to #sci-page-shell — see motion.css) */
.sci-route-loader{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  user-select: none;
}

.sci-route-loader__mark{
  display: flex;
  align-items: baseline;
  gap: 1px;
  font-family: var(--display);
  font-weight: 700;
  font-size: 30px;
  letter-spacing: -0.03em;
  line-height: 1;
}

.sci-route-loader__bracket,
.sci-route-loader__slash{
  color: var(--text);
}

.sci-route-loader__word{
  color: var(--accent-light);
}

.sci-route-loader__track{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 10px;
}

.sci-route-loader__dot{
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent-light);
  opacity: 0.14;
  transform: scale(0.72);
  animation: sciLoaderDotSweep 1s ease-in-out infinite;
  will-change: opacity, transform;
}

.sci-route-loader__dot[data-i="0"] { animation-delay: 0s; }
.sci-route-loader__dot[data-i="1"] { animation-delay: 0.125s; }
.sci-route-loader__dot[data-i="2"] { animation-delay: 0.25s; }
.sci-route-loader__dot[data-i="3"] { animation-delay: 0.375s; }
.sci-route-loader__dot[data-i="4"] { animation-delay: 0.5s; }
.sci-route-loader__dot[data-i="5"] { animation-delay: 0.625s; }
.sci-route-loader__dot[data-i="6"] { animation-delay: 0.75s; }
.sci-route-loader__dot[data-i="7"] { animation-delay: 0.875s; }

.sci-route-loader__mark{
  position: relative;
  isolation: isolate;
}

.sci-route-loader__mark::after{
  content: "";
  position: absolute;
  inset: -6px -10px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(127, 176, 255, 0) 35%,
    rgba(127, 176, 255, 0.22) 50%,
    rgba(127, 176, 255, 0) 65%,
    transparent 100%
  );
  background-size: 220% 100%;
  background-position: 120% 0;
  animation: sciLoaderMarkSweep 1s ease-in-out infinite;
  pointer-events: none;
  z-index: -1;
  border-radius: 8px;
}

.sci-page-route-loader__label{
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}

@keyframes sciLoaderDotSweep{
  0%, 100%{
    opacity: 0.14;
    transform: scale(0.72);
    box-shadow: none;
  }
  40%, 60%{
    opacity: 1;
    transform: scale(1);
    box-shadow: 0 0 12px color-mix(in srgb, var(--accent-light) 55%, transparent);
  }
}

@keyframes sciLoaderMarkSweep{
  0%, 100% { background-position: 120% 0; opacity: 0.35; }
  50%      { background-position: -20% 0; opacity: 1; }
}

@media (prefers-reduced-motion: reduce){
  .sci-route-loader__dot{
    animation: none;
    opacity: 0.55;
  }
  .sci-route-loader__dot[data-i="3"],
  .sci-route-loader__dot[data-i="4"]{
    opacity: 1;
    transform: scale(1);
  }
  .sci-route-loader__mark::after{
    animation: none;
    opacity: 0.4;
    background-position: 50% 0;
  }
}

/* Dash AG Grid dark tweaks */
.ag-theme-alpine-dark{
  --ag-background-color: rgba(13,23,48,0.55);
  --ag-odd-row-background-color: rgba(13,23,48,0.28);
  --ag-header-background-color: rgba(13,23,48,0.95);
  --ag-header-foreground-color: var(--text);
  --ag-foreground-color: var(--text);
  --ag-border-color: var(--border);
  --ag-row-border-color: var(--border-soft);
  --ag-selected-row-background-color: rgba(79,142,247,0.22);
  --ag-font-family: var(--sans);
}

/* Platform grids (Tenants / Users / Onboarding): single-select only */
.sci-onboarding-grid .ag-row-selected,
.sci-platform-grid .ag-row-selected{
  background-color: rgba(79,142,247,0.28) !important;
  box-shadow: inset 3px 0 0 #4f8ef7;
}
.sci-onboarding-grid .ag-header-select-all,
.sci-onboarding-grid .ag-header-cell.ag-selection-column-header .ag-labeled-input,
.sci-platform-grid .ag-header-select-all,
.sci-platform-grid .ag-header-cell.ag-selection-column-header .ag-labeled-input{
  display: none !important;
}
.sci-onboarding-grid .ag-selection-checkbox,
.sci-onboarding-grid .ag-selection-column,
.sci-platform-grid .ag-selection-checkbox,
.sci-platform-grid .ag-selection-column{
  display: flex;
  align-items: center;
  justify-content: center;
}

html[data-sci-color-scheme="light"] .ag-theme-alpine-dark,
html[data-mantine-color-scheme="light"] .ag-theme-alpine-dark{
  --ag-background-color: #ffffff;
  --ag-odd-row-background-color: #f3f6fc;
  --ag-header-background-color: #e8eef8;
  --ag-header-foreground-color: var(--text);
  --ag-foreground-color: var(--text);
  --ag-border-color: var(--border);
  --ag-row-border-color: var(--border-soft);
  --ag-selected-row-background-color: rgba(79,142,247,0.12);
  color-scheme: light;
}

.sci-tasks-grid .ag-cell{
  line-height: 1.35;
  white-space: nowrap;
}

.sci-tasks-grid .ag-header-cell-text{
  white-space: nowrap;
}

.sci-ag-cell-mono{
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: -0.02em;
}

/* Derived list row muted style */
.row-derived{
  color: rgba(231,236,255,0.72) !important;
  background: rgba(231,236,255,0.04) !important;
}

/* Domains Generate tab availability coloring */
.row-gen-ok{
  background: rgba(34, 197, 94, 0.16) !important;
}
.row-gen-warn{
  background: rgba(245, 158, 11, 0.18) !important;
}

/* Cube loading overlay (Dash emits data-dash-is-loading=true on loading targets) */
.cube-loading{
  position: relative;
  min-height: 40px;
  min-width: 0; /* flex children: allow ECharts/Dash width:100% to resolve real width */
  width: 100%;
}
.cube-loading-content{
  min-width: 0;
  width: 100%;
}
.cube-loading-spinner{
  display:none;
  position:absolute;
  inset:0;
  align-items:center;
  justify-content:center;
  background: rgba(7,11,20,0.35);
  border-radius: var(--radius);
}
.cube-loading[data-dash-is-loading="true"] .cube-loading-spinner,
.cube-loading:has([data-dash-is-loading="true"]) .cube-loading-spinner{
  display:flex;
}
/* Dim content only on in-page refresh AFTER route reveal — never during pageEnter (see motion.css) */
#_pages_content[data-page-revealed="1"] .cube-loading[data-dash-is-loading="true"] .cube-loading-content,
#_pages_content[data-page-revealed="1"] .cube-loading:has([data-dash-is-loading="true"]) .cube-loading-content{
  opacity: 0.35;
  filter: blur(0.4px);
  pointer-events: none;
}

/*
 * Overlay stacking for Mantine comboboxes/date pickers (portal z-index is set
 * in the Python adapters) and Bootstrap navbar dropdowns.
 */
.dropdown-menu{
  z-index: var(--z-dropdown) !important;
}
.navbar .dropdown-menu{
  z-index: var(--z-navbar-dropdown) !important;
}
.sci-nav-links{
  position: relative;
  z-index: calc(var(--z-navbar) + 1);
}

/* Flex cols need min-width:0; avoid position:relative (it traps absolute menus). */
.app-shell .row > [class*="col"]{
  min-width: 0;
}

/* Panels with dropdowns/datepickers: no clip; elevate only while open */
.panel--dropdown-host{
  overflow: visible !important;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  will-change: auto;
  isolation: auto;
}
.panel--dropdown-host:focus-within,
.panel--dropdown-host:has([aria-expanded="true"]),
.panel--dropdown-host:has([data-expanded="true"]){
  position: relative;
  z-index: 50;
}

/* Settings page */
.settings-page__header{
  padding: 16px 18px;
}
.settings-page__title{
  font-weight: 700;
  font-size: 20px;
  letter-spacing: -0.01em;
}
.settings-page__subtitle{
  margin-top: 6px;
  font-family: var(--mono);
  font-size: 12px;
}

/* Tab panel enter (Settings and any sci_tabs) */
.sci-tabs .sci-tabs-panel{
  animation: sci-tab-panel-in 0.38s cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes sci-tab-panel-in{
  from{
    opacity: 0;
    transform: translateY(10px);
  }
  to{
    opacity: 1;
    transform: translateY(0);
  }
}
@media (prefers-reduced-motion: reduce){
  .sci-tabs .sci-tabs-panel{
    animation: none;
  }
}

.settings-save-diff{
  max-height: min(42vh, 360px);
  overflow: auto;
  margin: 10px 0 14px;
  padding: 10px 12px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--bg1) 70%, transparent);
  font-family: var(--mono);
  font-size: 12px;
  line-height: 1.45;
}
.settings-save-diff__row{
  display: grid;
  grid-template-columns: minmax(120px, 34%) 1fr;
  gap: 8px;
  padding: 4px 0;
  border-bottom: 1px solid color-mix(in srgb, var(--border) 55%, transparent);
}
.settings-save-diff__row:last-child{ border-bottom: 0; }
.settings-save-diff__key{ color: var(--muted); word-break: break-all; }
.settings-save-diff__vals{ word-break: break-word; }
.settings-save-diff__empty{ color: var(--muted); }

.onboarding-review{ display: flex; flex-direction: column; gap: 16px; width: 100%; min-width: 0; }
.onboarding-review__meta{
  font-family: var(--mono);
  font-size: 12px;
  line-height: 1.45;
  word-break: break-word;
}
.onboarding-review__grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  width: 100%;
}
@media (max-width: 900px){
  .onboarding-review__grid{ grid-template-columns: 1fr; }
}
.onboarding-review__card{
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  padding: 14px 16px;
  background: color-mix(in srgb, var(--bg1) 72%, transparent);
  min-width: 0;
}
.onboarding-review__card--form{ border-left: 3px solid #8aa4c8; }
.onboarding-review__card--gen{ border-left: 3px solid #4f8ef7; }
.onboarding-review__card-title{
  font-weight: 700;
  font-size: 14px;
  margin-bottom: 12px;
  letter-spacing: 0.01em;
}
.onboarding-review__kv{
  display: grid;
  grid-template-columns: minmax(110px, 34%) minmax(0, 1fr);
  gap: 8px 14px;
  padding: 6px 0;
  font-size: 12.5px;
  line-height: 1.4;
  border-bottom: 1px solid color-mix(in srgb, var(--border) 40%, transparent);
  align-items: start;
}
.onboarding-review__kv:last-child{ border-bottom: 0; }
.onboarding-review__k{ color: var(--muted); }
.onboarding-review__v{ word-break: break-word; overflow-wrap: anywhere; }
.onboarding-review__list{
  margin: 0;
  padding-left: 18px;
  font-size: 12px;
  font-family: var(--mono);
  max-height: 360px;
  overflow: auto;
  line-height: 1.45;
}

/* Wide review / results modals */
.onboarding-review-modal.mantine-Modal-root .mantine-Modal-content,
.mantine-Modal-root.onboarding-review-modal .mantine-Modal-content,
.onboarding-results-modal.mantine-Modal-root .mantine-Modal-content,
.mantine-Modal-root.onboarding-results-modal .mantine-Modal-content{
  width: min(1280px, calc(100vw - 24px));
  max-width: min(1280px, calc(100vw - 24px));
}
.onboarding-review-modal .sci-modal-body,
.onboarding-review-modal .onboarding-review,
.onboarding-results-modal .sci-modal-body,
.onboarding-results-modal .onboarding-review{
  max-height: min(78vh, 900px);
  overflow: auto;
}
.onboarding-review__run-pre{
  margin: 0;
  white-space: pre-wrap;
  font-size: 12px;
  max-height: 280px;
  overflow: auto;
  padding: 10px 12px;
  border: 1px solid var(--border-soft);
  border-radius: calc(var(--radius) - 2px);
  font-family: var(--mono);
}

/* Edit-inputs workspace (Open) */
.onboarding-workspace-modal.mantine-Modal-root .mantine-Modal-content,
.mantine-Modal-root.onboarding-workspace-modal .mantine-Modal-content{
  width: min(1280px, calc(100vw - 24px));
  max-width: min(1280px, calc(100vw - 24px));
}
.onboarding-workspace-modal .sci-modal-body{
  max-height: min(82vh, 940px);
  overflow: auto;
  padding-right: 4px;
}
.onboarding-workspace__meta{
  font-size: 12px;
  font-family: var(--mono);
  margin-bottom: 14px;
}
.onboarding-workspace__grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-bottom: 14px;
  align-items: stretch;
}
.onboarding-workspace__grid--tall{
  min-height: min(62vh, 640px);
}
.onboarding-workspace__card{
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  padding: 14px 16px;
  background: color-mix(in srgb, var(--panel) 88%, transparent);
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.onboarding-workspace__card--grow{
  min-height: min(62vh, 640px);
}
.onboarding-workspace__title{
  font-weight: 700;
  font-size: 14px;
  margin-bottom: 6px;
  flex: 0 0 auto;
}
.onboarding-workspace__subtitle{
  font-weight: 600;
  font-size: 12px;
  margin-bottom: 6px;
  color: var(--muted);
}
.onboarding-workspace__hint{
  font-size: 12px;
  line-height: 1.45;
  margin-bottom: 10px;
  flex: 0 0 auto;
}
.onboarding-workspace__summary{
  font-size: 12px;
  font-family: var(--mono);
  margin-bottom: 8px;
  color: var(--text);
  flex: 0 0 auto;
}
.onboarding-workspace__icp-summary{
  margin: 0 0 8px;
  white-space: pre-wrap;
  font-size: 11px;
  max-height: 88px;
  overflow: auto;
  flex: 0 0 auto;
}
.onboarding-workspace__card .onboarding-workspace__textarea,
.onboarding-workspace__card .sci-input.onboarding-workspace__textarea{
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-height: 280px;
  width: 100%;
}
.onboarding-workspace__card .onboarding-workspace__textarea .mantine-Textarea-wrapper,
.onboarding-workspace__card .sci-input.onboarding-workspace__textarea .mantine-Textarea-wrapper{
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  height: 100%;
}
.onboarding-workspace__card .onboarding-workspace__textarea textarea,
.onboarding-workspace__card .onboarding-workspace__textarea .mantine-Textarea-input,
.onboarding-workspace__card .sci-input.onboarding-workspace__textarea textarea,
.onboarding-workspace__card .sci-input.onboarding-workspace__textarea .mantine-Textarea-input{
  flex: 1 1 auto !important;
  min-height: 280px !important;
  height: 100% !important;
  font-family: var(--mono) !important;
  font-size: 12px !important;
}

/* Inline form JSON editor on Platform > Onboarding */
.onboarding-inline-editors{
  align-items: stretch;
}
.onboarding-editor-panel{
  display: flex;
  flex-direction: column;
  min-height: 420px;
}
.onboarding-editor-panel .onboarding-editor-textarea,
.onboarding-editor-panel .sci-input.onboarding-editor-textarea{
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-height: 320px;
  width: 100%;
}
.onboarding-editor-panel .onboarding-editor-textarea .mantine-Textarea-wrapper,
.onboarding-editor-panel .sci-input.onboarding-editor-textarea .mantine-Textarea-wrapper{
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  height: 100%;
}
.onboarding-editor-panel .onboarding-editor-textarea textarea,
.onboarding-editor-panel .onboarding-editor-textarea .mantine-Textarea-input,
.onboarding-editor-panel .sci-input.onboarding-editor-textarea textarea,
.onboarding-editor-panel .sci-input.onboarding-editor-textarea .mantine-Textarea-input{
  flex: 1 1 auto !important;
  min-height: 320px !important;
  height: 100% !important;
  font-family: var(--mono) !important;
  font-size: 12px !important;
}

@media (max-width: 900px){
  .onboarding-review__kv{
    grid-template-columns: 1fr;
    gap: 2px 0;
  }
  .onboarding-review-modal.mantine-Modal-root .mantine-Modal-content,
  .mantine-Modal-root.onboarding-review-modal .mantine-Modal-content,
  .onboarding-results-modal.mantine-Modal-root .mantine-Modal-content,
  .mantine-Modal-root.onboarding-results-modal .mantine-Modal-content,
  .onboarding-workspace-modal.mantine-Modal-root .mantine-Modal-content,
  .mantine-Modal-root.onboarding-workspace-modal .mantine-Modal-content{
    width: calc(100vw - 16px);
    max-width: calc(100vw - 16px);
  }
  .onboarding-workspace__grid,
  .onboarding-workspace__grid--tall{
    grid-template-columns: 1fr;
    min-height: 0;
  }
  .onboarding-workspace__card--grow{
    min-height: 420px;
  }
}

.settings-section{
  padding: 16px 18px;
  height: 100%;
}
.settings-section__title{
  font-weight: 700;
  font-size: 14px;
  margin-bottom: 14px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
}
.settings-section__favicon{
  width: 16px;
  height: 16px;
  border-radius: 3px;
  margin-right: 5px;
  vertical-align: -3px;
  object-fit: contain;
}
.settings-section__favicon:last-of-type{
  margin-right: 7px;
}
.sci-help-icon{
  cursor: help;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  line-height: 1;
  text-align: center;
  border-radius: 50%;
  background: var(--sci-surface-2);
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  margin-left: 6px;
  vertical-align: middle;
  user-select: none;
}
.sci-help-icon:hover{
  color: var(--text);
  background: var(--sci-surface-hover);
}
.settings-section__subtitle{
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--muted);
  font-family: var(--mono);
  margin-bottom: 2px;
}
.settings-section__divider{
  margin: 14px 0 6px;
  border: none;
  border-top: 1px solid var(--border);
  opacity: 0.85;
}
.settings-section__note{
  font-size: 12px;
  line-height: 1.45;
}
.settings-section__actions{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  margin-top: 4px;
}
.settings-section__output{
  font-family: var(--mono);
  font-size: 12px;
  line-height: 1.4;
}

.settings-push__toolbar{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 12px 0 8px;
}
.settings-push__status{
  font-family: var(--mono);
  font-size: 12px;
  line-height: 1.45;
  min-height: 0;
  margin-bottom: 4px;
  max-width: 100%;
  word-break: break-word;
}
.settings-push__status:empty{
  display: none;
}
.settings-push__status--error{
  color: #ff8a8a;
}
.settings-push__status--ok{
  color: var(--ok, #6ee7a8);
}
.settings-push__devices-hint{
  margin-top: 14px;
  margin-bottom: 8px;
}
.settings-push__devices{
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.settings-push__device{
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px 16px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: rgba(7, 11, 20, 0.35);
}
.settings-push__device-info{
  flex: 1 1 220px;
  min-width: 0;
}
.settings-push__device-label{
  font-size: 13px;
  font-weight: 600;
  line-height: 1.35;
  word-break: break-word;
}
.settings-push__device-ua{
  font-size: 11px;
  line-height: 1.4;
  margin-top: 4px;
  word-break: break-word;
}
.settings-push__device-controls{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  flex: 0 0 auto;
}

.settings-field{
  margin-bottom: 4px;
}
.settings-field__label{
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--muted);
  margin-bottom: 6px;
  font-family: var(--mono);
}
.settings-field__help{
  font-size: 12px;
  color: var(--muted);
  margin-top: 6px;
  line-height: 1.4;
}
.settings-field--narrow .form-control{
  max-width: 220px;
}
.settings-field--switch{
  padding-top: 2px;
}
.settings-field__switch .form-check-label{
  color: var(--text);
  font-size: 13px;
}
.settings-field__checkbox .form-check-label{
  color: var(--text);
  font-size: 13px;
}

.settings-section .form-control,
.settings-section .input-group .form-control,
.settings-save-bar .form-control{
  background: rgba(7,11,20,0.55);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 10px;
}
.settings-section .form-control::placeholder,
.settings-save-bar .form-control::placeholder{
  color: rgba(169,179,209,0.55);
}
.settings-section .form-control:focus,
.settings-save-bar .form-control:focus{
  background: rgba(7,11,20,0.7);
  border-color: var(--accent2);
  box-shadow: 0 0 0 3px rgba(45,125,255,0.18);
  color: var(--text);
}
.settings-section .input-group .btn{
  border-radius: 0 10px 10px 0;
  white-space: nowrap;
  font-size: 12px;
}
.settings-section .input-group .form-control{
  border-radius: 10px 0 0 10px;
}

.settings-save-bar{
  position: sticky;
  bottom: 12px;
  z-index: 50;
  padding: 14px 18px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}
.settings-save-bar__out{
  font-family: var(--mono);
  font-size: 12px;
  text-align: right;
}

/* In-app docs browser (/docs) */
.docs-nav-link{
  color: var(--text) !important;
  padding: 3px 6px;
  border-radius: 6px;
  font-size: 13px;
}
.docs-nav-link:hover{
  background: rgba(45,125,255,0.12);
}
.docs-markdown-body{
  line-height: 1.6;
}
.docs-markdown-body h1,
.docs-markdown-body h2,
.docs-markdown-body h3{
  margin-top: 1.2em;
}
.docs-markdown-body h1:first-child{
  margin-top: 0;
}
.docs-markdown-body code{
  font-family: var(--mono);
  font-size: 0.9em;
}
.docs-markdown-body table{
  width: 100%;
  border-collapse: collapse;
  margin: 1em 0;
}
.docs-markdown-body th,
.docs-markdown-body td{
  border: 1px solid rgba(169,179,209,0.25);
  padding: 6px 10px;
  text-align: left;
}
.docs-markdown-body blockquote{
  border-left: 3px solid var(--accent2);
  padding-left: 12px;
  margin-left: 0;
  color: rgba(169,179,209,0.9);
}

/* iOS Safari auto-zooms focused fields when font-size < 16px, which
   blows up the layout on phones. Force 16px on touch UIs (after other
   !important input rules) and disable double-tap zoom. */
@media (hover: none) and (pointer: coarse){
  html,
  body{
    touch-action: manipulation;
  }
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]),
  select,
  textarea,
  .form-control,
  .form-select,
  .mantine-Input-input,
  .mantine-PasswordInput-input,
  .mantine-Textarea-input,
  .mantine-Select-input,
  .mantine-NumberInput-input,
  .mantine-TagsInput-inputField,
  .mantine-Autocomplete-input,
  .ag-input-field-input,
  .ag-text-field-input,
  .ag-picker-field-wrapper,
  .onboarding-workspace__card .onboarding-workspace__textarea textarea,
  .onboarding-workspace__card .onboarding-workspace__textarea .mantine-Textarea-input,
  .onboarding-workspace__card .sci-input.onboarding-workspace__textarea textarea,
  .onboarding-workspace__card .sci-input.onboarding-workspace__textarea .mantine-Textarea-input,
  .onboarding-editor-panel .onboarding-editor-textarea textarea,
  .onboarding-editor-panel .onboarding-editor-textarea .mantine-Textarea-input,
  .onboarding-editor-panel .sci-input.onboarding-editor-textarea textarea,
  .onboarding-editor-panel .sci-input.onboarding-editor-textarea .mantine-Textarea-input{
    font-size: 16px !important;
  }
}