:root,
html[data-theme="light"]{
  --bg:#efefec;
  --surface:#f7f7f4;
  --panel:#ffffff;
  --border:#ddddda;
  --text:#171717;
  --muted:#6f6f73;
  --muted-2:#8f8f94;
  --brand:#ee7125;
  --brand-2:#d56cff;
  --shadow:0 22px 60px rgba(34,34,34,.08);
  --radius-xl:28px;
  --radius-lg:18px;
  --radius-md:14px;
  --font:"Avenir Next","Helvetica Neue","Segoe UI",sans-serif;
}

html[data-theme="dark"]{
  /* Pure neutral greys — R=G=B, no blue/green tint. Matches the
     dashboard/admin desaturated palette in
     frontends/app/css/theme.css so the onboarding page reads as a
     sibling. --brand stays the project orange so the logo / CTAs
     still pop. */
  --bg:#0f0f0f;
  --surface:#161616;
  --panel:#1a1a1a;
  --border:#2c2c2c;
  --text:#f0f0f0;
  --muted:#b8b8b8;
  --muted-2:#7a7a7a;
  --brand:#ee7125;
  --brand-2:#e4a8ff;
  --shadow:0 28px 70px rgba(0,0,0,.5);
}

*{box-sizing:border-box}
html,body{margin:0;min-height:100%}
body{
  font-family:var(--font);
  background:
    radial-gradient(circle at top, rgba(255,255,255,.85), transparent 30%),
    linear-gradient(180deg,#f3f2ef 0%,#ecebe7 100%);
  color:var(--text);
}
html[data-theme="dark"] body{
  background:var(--bg);
}
button,input,select,textarea{font:inherit}

.topbar{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:10px;
  padding:18px 24px;
  position:relative;
}
.topbar-actions{
  position:absolute;
  right:24px;
  display:flex;
  align-items:center;
  gap:10px;
}
.topbar-theme{
  min-width:44px;
  height:44px;
  padding:0 14px;
  border-radius:999px;
  border:1px solid #d8d6d0;
  background:rgba(255,255,255,.82);
  color:var(--text);
  font-weight:700;
  box-shadow:var(--shadow);
  display:grid;
  place-items:center;
}
.brand-logo{display:block}
.brand-logo-dark{display:none}
html[data-theme="dark"] .brand-logo{display:none}
html[data-theme="dark"] .brand-logo-dark{display:block}

.wizard-shell{
  width:min(1260px,calc(100% - 32px));
  margin:20px auto 40px;
  background:rgba(255,255,255,.35);
  border:1px solid var(--border);
  border-radius:32px;
  overflow:hidden;
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(420px,48%);
  box-shadow:var(--shadow);
}
html[data-theme="dark"] .wizard-shell{background:rgba(22,22,22,.44)}

.wizard-panel,.preview-panel{padding:42px 52px;position:relative;min-height:760px}
.wizard-panel{background:rgba(255,255,255,.62)}
.preview-panel{
  border-left:1px solid var(--border);
  background:rgba(252,252,250,.9);
  overflow:hidden;
}
html[data-theme="dark"] .wizard-panel{background:rgba(22,22,22,.72)}
html[data-theme="dark"] .preview-panel{background:rgba(18,18,18,.88)}

.preview-grid{
  position:absolute;inset:0;
  background-image:radial-gradient(#e0dfdc 1.15px, transparent 1.15px);
  background-size:24px 24px;
  opacity:.75;
}

.step-meta,.step-card,.browser-card,.sources-card,.chat-card,#chatPreviewCard{position:relative;z-index:1}
.step-count{font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.step-rail{display:flex;gap:10px;margin-top:14px;margin-bottom:36px}
.step-dot{height:6px;flex:1;border-radius:999px;background:#ddd9d1;cursor:pointer;transition:opacity .2s,transform .15s}
.step-dot:hover{transform:scaleY(1.5);opacity:.85}
.step-dot:nth-child(1).active,.step-dot:nth-child(1).done{background:#e53e3e}
.step-dot:nth-child(2).active,.step-dot:nth-child(2).done{background:#ed8936}
.step-dot:nth-child(3).active,.step-dot:nth-child(3).done{background:#ecc94b}
.step-dot:nth-child(4).active,.step-dot:nth-child(4).done{background:#48bb78}
.step-dot:nth-child(5).active,.step-dot:nth-child(5).done{background:#4299e1}
.step-dot:nth-child(6).active,.step-dot:nth-child(6).done{background:#d53f8c}

.step-card{display:none;max-width:520px}
.step-card.active{display:block}
.step-card h1{font-size:26px;line-height:1.1;letter-spacing:-.03em;margin:0 0 12px}
.step-copy{margin:0 0 30px;color:var(--muted);font-size:15px;line-height:1.55}

.field-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.field,.toggle-field{display:flex;flex-direction:column;gap:8px}
.field-wide{grid-column:1 / -1}
.field span,.toggle-field span{font-size:13px;font-weight:700;color:#5d5d61}
input,select,textarea{
  width:100%;
  background:#fafaf8;
  border:1px solid #e0dfdc;
  border-radius:12px;
  padding:14px 15px;
  color:var(--text);
  transition:border-color .18s ease, box-shadow .18s ease;
}
input:focus,select:focus,textarea:focus{
  outline:none;
  border-color:#f1a36f;
  box-shadow:0 0 0 4px rgba(238,113,37,.12);
}
textarea{resize:vertical;min-height:120px}

.button-row{
  display:flex;
  gap:12px;
  margin-top:30px;
}
.btn{
  border:none;
  border-radius:12px;
  padding:14px 20px;
  font-weight:700;
  cursor:pointer;
  transition:transform .16s ease, opacity .16s ease, background .16s ease;
}
.btn:hover{transform:translateY(-1px)}
.btn-primary{background:#111;color:#fff;min-width:180px}
.btn-secondary{background:#ece9e2;color:#111}
.btn-ghost{background:#fff;border:1px solid #d8d6d0;color:#333}
html[data-theme="dark"] .btn-secondary{background:#262626;color:var(--text)}
html[data-theme="dark"] .btn-ghost{background:#1d1d1d;border-color:#333;color:var(--text)}

.source-list{
  display:flex;
  flex-direction:column;
  gap:10px;
}
.source-row,.source-drawer{
  background:rgba(255,255,255,.7);
  border:1px solid #e0dfdc;
  border-radius:16px;
}
.source-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:18px 18px 18px 20px;
}
.source-title{font-size:18px;font-weight:700}
.source-sub{font-size:14px;color:var(--muted);margin-top:4px}
.icon-btn{
  width:40px;height:40px;border-radius:12px;border:1px solid #d6d3cd;background:#fff;
  font-size:22px;line-height:1;color:#666;cursor:pointer;
}
.action-btn{
  min-width:72px;
  height:40px;
  padding:0 14px;
  border-radius:12px;
  border:1px solid #d6d3cd;
  background:#fff;
  color:#444;
  font-weight:700;
  cursor:pointer;
  white-space:nowrap;
  flex-shrink:0;
}
.source-drawer{display:none;padding:18px}
.source-drawer.open{display:block}
.mini-note{font-size:13px;color:var(--muted);margin-top:10px}

.file-drop{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:6px;padding:28px 20px;
  border:2px dashed var(--border);border-radius:var(--radius-md);
  cursor:pointer;transition:border-color .2s,background .2s;
  text-align:center;
}
.file-drop:hover,.file-drop.dragover{
  border-color:var(--brand);background:rgba(238,113,37,.04);
}
.file-drop-icon{
  font-size:24px;line-height:1;color:var(--muted);
  transition:color .2s;
}
.file-drop:hover .file-drop-icon,.file-drop.dragover .file-drop-icon{color:var(--brand)}
.file-drop-text{font-size:14px;color:var(--text)}
.file-drop-link{color:var(--brand);font-weight:600}
.file-drop-hint{font-size:12px;color:var(--muted-2)}

.chip-list,.stack-list{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.file-chip,.stack-item{
  background:#fff;
  border:1px solid #dfdcd6;
  border-radius:12px;
  padding:10px 12px;
}
.stack-item{width:100%}
.stack-item strong{display:block;margin-bottom:4px}

.color-row{display:grid;grid-template-columns:58px 1fr;gap:10px}
input[type="color"]{padding:4px;min-height:48px}
.toggle-field{
  flex-direction:row;
  justify-content:space-between;
  align-items:center;
  padding:14px 16px;
  background:#fafaf8;
  border:1px solid #e0dfdc;
  border-radius:12px;
}
.toggle-field input{width:18px;height:18px}

.browser-card,.sources-card,.chat-card{
  background:rgba(255,255,255,.85);
  border:1px solid #e7e5e0;
  border-radius:24px;
  box-shadow:0 16px 44px rgba(0,0,0,.06);
}
.browser-card{
  width:min(320px,82%);
  margin:170px auto 26px;
  border:4px solid transparent;
  background:
    linear-gradient(#fff,#fff) padding-box,
    linear-gradient(90deg,var(--brand),var(--brand-2)) border-box;
}
.browser-header{display:flex;gap:8px;padding:14px 16px 6px}
.browser-header span{
  width:10px;height:10px;border-radius:999px;display:block;
}
.browser-header span:nth-child(1){background:#f2994a}
.browser-header span:nth-child(2){background:#e7bc55}
.browser-header span:nth-child(3){background:#8fca67}
.browser-body{padding:8px 16px 18px}
.browser-url{
  border:1px solid #ece8e1;border-radius:10px;padding:10px 14px;color:#8a8781;background:#fbfaf8;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.site-scan-status{
  margin-top:14px;
  padding:14px;
  background:#f7f5f0;
  border:1px solid #ece5dc;
  border-radius:14px;
}
.scan-pill{
  display:inline-flex;
  align-items:center;
  gap:8px;
  min-height:28px;
  padding:6px 12px;
  border-radius:999px;
  background:#fff;
  border:1px solid #e8dfd4;
  font-size:12px;
  font-weight:800;
  letter-spacing:.04em;
  text-transform:uppercase;
  color:#6a665f;
}
.scan-pill.running::before,
.scan-pill.completed::before{
  content:"";
  width:8px;
  height:8px;
  border-radius:999px;
  display:block;
}
.scan-pill.running::before{background:#f4a261;box-shadow:0 0 0 6px rgba(244,162,97,.12)}
.scan-pill.completed::before{background:#5aa469;box-shadow:0 0 0 6px rgba(90,164,105,.12)}
.scan-pill.failed::before{content:"";width:8px;height:8px;border-radius:999px;display:block;background:#c0392b}
.scan-copy{margin-top:10px;color:var(--muted);font-size:13px;line-height:1.5}

.sources-card{
  width:min(470px,90%);
  margin:26px auto;
  padding:24px 26px;
  border:5px solid transparent;
  background:
    linear-gradient(#fff,#fff) padding-box,
    linear-gradient(90deg,var(--brand),var(--brand-2)) border-box;
}
.sources-card h3{margin:0 0 14px;font-size:28px;letter-spacing:-.03em}
.sources-topline{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
}
.tree-badge{
  font-size:11px;
  font-weight:800;
  letter-spacing:.06em;
  text-transform:uppercase;
  padding:8px 10px;
  border-radius:999px;
  background:#f6f1ea;
  color:#7e7468;
}
.tree-summary-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:10px;
  margin:18px 0 14px;
}
.tree-stat{
  background:#f7f6f2;
  border-radius:14px;
  padding:14px;
}
.tree-stat span{
  display:block;
  color:var(--muted);
  font-size:12px;
  margin-bottom:6px;
}
.tree-stat strong{font-size:24px;letter-spacing:-.04em}
.tree-intro{
  color:var(--muted);
  font-size:14px;
  line-height:1.5;
  margin-bottom:14px;
}
.tree-progress{
  margin:4px 0 16px;
}
.tree-progress-copy{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:8px;
  font-size:12px;
  color:var(--muted);
}
.tree-progress-copy strong{
  color:#3c3a36;
  font-size:12px;
}
.tree-progress-bar{
  width:100%;
  height:10px;
  border-radius:999px;
  background:#f0ebe3;
  overflow:hidden;
}
.tree-progress-bar span{
  display:block;
  height:100%;
  width:0%;
  border-radius:999px;
  background:linear-gradient(90deg,var(--brand),var(--brand-2));
  transition:width .3s ease;
}
.tree-canvas{
  display:flex;
  flex-direction:column;
  gap:10px;
}
.tree-placeholder{
  background:#faf8f4;
  border:1px dashed #e7ded2;
  border-radius:16px;
  padding:18px;
  color:var(--muted);
  font-size:14px;
}
.tree-loading{
  display:flex;
  align-items:center;
  gap:10px;
}
.tree-loading::before{
  content:"";
  width:16px;
  height:16px;
  border-radius:999px;
  border:2px solid #eadfd1;
  border-top-color:var(--brand);
  animation:spin .8s linear infinite;
}
.tree-node{
  position:relative;
  background:#fbfaf7;
  border:1px solid #ede7de;
  border-radius:16px;
  padding:12px 14px 12px 18px;
}
.tree-node::before{
  content:"";
  position:absolute;
  left:0;
  top:12px;
  bottom:12px;
  width:4px;
  border-radius:999px;
  background:linear-gradient(180deg,var(--brand),var(--brand-2));
}
.tree-node.root{
  background:#f7f3ee;
}
.tree-row{
  display:flex;
  align-items:center;
  gap:10px;
}
.tree-bullet{
  width:10px;
  height:10px;
  border-radius:999px;
  background:linear-gradient(180deg,var(--brand),var(--brand-2));
  flex-shrink:0;
}
.tree-text{
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:2px;
}
.tree-label{
  font-size:14px;
  font-weight:700;
  color:#222;
}
.tree-label-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}
.tree-chip{
  flex-shrink:0;
  font-size:10px;
  font-weight:800;
  letter-spacing:.04em;
  text-transform:uppercase;
  padding:5px 8px;
  border-radius:999px;
  background:#f1ebe2;
  color:#7b6a58;
}
.tree-sub{
  font-size:12px;
  color:var(--muted);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.tree-children{
  margin-top:10px;
  padding-left:18px;
  display:flex;
  flex-direction:column;
  gap:10px;
  border-left:1px solid #ebe5db;
}

@keyframes spin{to{transform:rotate(360deg)}}

.scan-banner{
  position:relative;z-index:1;
  width:min(520px,92%);
  margin:0 auto 12px;
  display:flex;
  align-items:center;
  gap:10px;
  padding:12px 16px;
  border-radius:14px;
  background:rgba(244,162,97,.12);
  border:1px solid rgba(244,162,97,.3);
  font-size:13px;
  font-weight:600;
  color:#7a5a2f;
}
.scan-banner-dot{
  width:8px;height:8px;border-radius:999px;
  background:#f4a261;
  box-shadow:0 0 0 4px rgba(244,162,97,.18);
  flex-shrink:0;
  animation:pulse 1.6s ease-in-out infinite;
}
@keyframes pulse{
  0%,100%{opacity:1}
  50%{opacity:.4}
}

/* Chat preview — uses the unified chat-widget stylesheet
   (frontends/shared/chat-widget/chat-widget.css) so onboarding,
   dashboard preview, and embed widget all look identical. Only
   size/positioning constraints live here. */
#chatPreviewCard.chat-widget{
  width:420px;max-width:92%;
  margin:60px auto 0;
  height:580px;
  max-height:70vh;
}

.summary-box{
  display:grid;
  gap:12px;
  padding:18px;
  border:1px solid #e0dfdc;
  border-radius:16px;
  background:#fafaf8;
}

.pipeline-box{margin-top:8px}
.pipeline-row{
  display:flex;
  justify-content:space-between;
  gap:16px;
  align-items:center;
  font-size:14px;
}
.pipeline-row span:last-child{color:var(--muted);font-weight:700}
.pipeline-bar-shell{
  width:100%;
  height:14px;
  border-radius:999px;
  background:#ece9e2;
  overflow:hidden;
}
.pipeline-bar-fill{
  width:0%;
  height:100%;
  border-radius:999px;
  background:linear-gradient(90deg,var(--brand),#ffb36d);
  transition:width .35s ease;
}
.pipeline-percent{
  font-size:12px;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--muted);
}
.pipeline-spinner{
  display:inline-block;
  width:18px;height:18px;
  border:3px solid #ece9e2;
  border-top-color:var(--brand);
  border-radius:50%;
  animation:spin .8s linear infinite;
  vertical-align:middle;
  margin-right:8px;
}
@keyframes spin{to{transform:rotate(360deg)}}
.pipeline-error{
  color:#b42318;
  font-size:13px;
  line-height:1.5;
}

.toast-stack{
  position:fixed;right:18px;bottom:18px;display:flex;flex-direction:column;gap:10px;z-index:20;
}
.toast{
  background:#111;color:#fff;padding:13px 16px;border-radius:14px;box-shadow:var(--shadow);font-size:14px;
}
.toast.error{background:#9c1d1d}

@media (max-width: 1080px){
  .wizard-shell{grid-template-columns:1fr}
  .preview-panel{min-height:640px;border-left:none;border-top:1px solid var(--border)}
  #chatPreviewCard.chat-widget{margin-top:40px}
}

@media (max-width: 720px){
  .wizard-shell{width:min(100%,calc(100% - 12px))}
  .wizard-panel,.preview-panel{padding:28px 20px}
  .topbar{justify-content:flex-start;padding:18px 20px}
  .topbar-actions{position:static;margin-left:auto}
  .field-grid{grid-template-columns:1fr}
  .button-row{flex-direction:column}
  .btn{width:100%}
  .sources-card h3{font-size:22px}
  .tree-summary-grid{grid-template-columns:1fr 1fr}
}

html[data-theme="dark"] .topbar-theme,
html[data-theme="dark"] input,
html[data-theme="dark"] select,
html[data-theme="dark"] textarea,
html[data-theme="dark"] .toggle-field,
html[data-theme="dark"] .source-row,
html[data-theme="dark"] .source-drawer,
html[data-theme="dark"] .icon-btn,
html[data-theme="dark"] .action-btn,
html[data-theme="dark"] .file-chip,
html[data-theme="dark"] .stack-item,
html[data-theme="dark"] .browser-card,
html[data-theme="dark"] .sources-card,
html[data-theme="dark"] .browser-url,
html[data-theme="dark"] .site-scan-status,
html[data-theme="dark"] .scan-pill,
html[data-theme="dark"] .tree-badge,
html[data-theme="dark"] .tree-stat,
html[data-theme="dark"] .tree-placeholder,
html[data-theme="dark"] .tree-node,
html[data-theme="dark"] .tree-node.root,
html[data-theme="dark"] .tree-chip,
html[data-theme="dark"] .preview-note,
html[data-theme="dark"] .summary-box,
html[data-theme="dark"] .pipeline-bar-shell{
  background:var(--panel);
  color:var(--text);
  border-color:var(--border);
}

html[data-theme="dark"] .browser-card,
html[data-theme="dark"] .sources-card{
  background:
    linear-gradient(var(--panel),var(--panel)) padding-box,
    linear-gradient(90deg,var(--brand),var(--brand-2)) border-box;
}

html[data-theme="dark"] .scan-banner{
  background:rgba(238,113,37,.16);
  border-color:rgba(238,113,37,.3);
  color:#ffd4b8;
}

html[data-theme="dark"] .tree-progress-bar{
  background:var(--surface3);
}

html[data-theme="dark"] .tree-label{color:var(--text)}
html[data-theme="dark"] .tree-children{border-left-color:var(--border)}

/* ── Resume prompt modal ──────────────────────────────────────────── */

.resume-modal-backdrop{
  position:fixed;inset:0;background:rgba(0,0,0,.45);
  display:grid;place-items:center;z-index:9000;padding:24px;
  backdrop-filter:blur(3px);
}
/* The HTML `hidden` attribute would normally set display:none, but our
   own `display:grid` above wins because it's an author rule with the
   same specificity as the [hidden] user-agent rule. Without this
   explicit override the modal is visible on every page load whether
   or not the JS decided to show it, and the buttons appear "dead"
   because showResumePrompt never wired up click handlers. */
.resume-modal-backdrop[hidden]{display:none !important}

.resume-modal{
  background:var(--surface, #fff);color:var(--text, #1f1f1f);
  border:1px solid var(--border, #e4dfd7);border-radius:14px;
  padding:28px 28px 24px;max-width:460px;width:100%;
  box-shadow:0 30px 80px rgba(0,0,0,.22);
}

.resume-modal h2{
  margin:0 0 8px;font-size:20px;letter-spacing:-.02em;
}

.resume-modal p{
  margin:0 0 20px;color:var(--muted, #67645d);font-size:14px;line-height:1.5;
}

.resume-modal-buttons{
  display:flex;gap:10px;justify-content:flex-end;flex-wrap:wrap;
}

.resume-modal-buttons .btn{min-width:120px}

/* ── Existing-business banner on step 1 ───────────────────────────── */

.existing-biz-banner{
  display:flex;gap:12px;align-items:flex-start;
  margin:8px 0 20px;padding:14px 16px;
  background:rgba(99,102,241,.08);
  border:1px solid rgba(99,102,241,.22);
  border-radius:10px;
  color:var(--text);
}
/* Same gotcha as .resume-modal-backdrop above: the [hidden] HTML
   attribute would normally evaluate to display:none, but our own
   display:flex rule wins because it shares specificity with the
   user-agent [hidden] rule. Without this, the banner is visible on
   every page load whether or not the JS decided to show it — even
   for unauthenticated visitors with no account. */
.existing-biz-banner[hidden]{display:none !important}

.existing-biz-banner-icon{
  font-size:18px;line-height:1;flex-shrink:0;padding-top:2px;
  color:#6366f1;
}

.existing-biz-banner-body strong{
  display:block;font-size:14px;margin-bottom:3px;
}

.existing-biz-banner-sub{
  font-size:12.5px;color:var(--muted, #67645d);line-height:1.4;
}

html[data-theme="dark"] .existing-biz-banner{
  background:rgba(99,102,241,.14);
  border-color:rgba(99,102,241,.32);
}