/** Shared Pulsive onboarding surface. Loaded after each page's legacy rules. */
:root {
  --bg: #f5f6f8;
  --card: #ffffff;
  --card2: #f9fafb;
  --bd: #dfe3e9;
  --border: #dfe3e9;
  --pr: #6547d8;
  --prl: #6547d8;
  --prd: #5639c4;
  --accent: #6547d8;
  --accent-h: #5639c4;
  --ac: #246fa8;
  --tx: #19202d;
  --text: #19202d;
  --txs: #4e596b;
  --subtle: #4e596b;
  --txm: #697386;
  --muted: #697386;
  --ok: #16805d;
  --success: #16805d;
  --warn-bg: #fbecef;
  --warn-bd: #e7aab3;
  --warn-txt: #8f2635;
  --input-bg: #ffffff;
  --gd: #6547d8;
  --r: 11px;
  --radius: 11px;
}

body {
  position: relative;
  background: var(--bg);
  color: var(--tx);
  font-family: 'General Sans', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}

body::before {
  content: '';
  position: fixed;
  inset: 0 auto 0 0;
  width: clamp(8px, 1.2vw, 16px);
  background: var(--pr);
}

.site-header { margin-bottom: 28px; }
.logo-mark { border-radius: 8px; background: var(--pr); box-shadow: none; }
.logo-text { color: var(--tx); font-family: 'General Sans', system-ui, sans-serif; font-weight: 720; letter-spacing: -.045em; }
.logo-text span { color: var(--pr); }

.reg-card,
.wiz-card,
body > .card {
  border: 1px solid var(--bd);
  border-radius: 12px;
  background: var(--card);
  box-shadow: 0 1px 2px rgba(25,32,45,.04), 0 18px 48px rgba(25,32,45,.08);
}

.section-title,.step-title,h1 { color: var(--tx); font-weight: 680; letter-spacing: -.035em; }
.section-sub,.step-sub,.subtitle,.note { color: var(--txm); }

.step-item:not(:last-child)::after,
.prog-item:not(:last-child)::after { background: var(--bd); }
.step-item.done:not(:last-child)::after,
.prog-item.done:not(:last-child)::after { background: var(--pr); }

.step-bubble,.prog-dot {
  border-color: var(--bd);
  background: var(--card);
  color: var(--txm);
}

.step-item.active .step-bubble,
.prog-item.active .prog-dot { border-color: var(--pr); background: var(--pr); }
.step-item.done .step-bubble,
.prog-item.done .prog-dot { border-color: var(--pr); color: var(--pr); }
.step-item.active .step-label,.step-item.done .step-label,
.prog-item.active .prog-label,.prog-item.done .prog-label { color: var(--pr); }

.field label { color: var(--txs); font-weight: 640; }
.field-row,
input:not([type="radio"]):not([type="checkbox"]),
select,
textarea,
.fi {
  border-color: #cdd2da;
  border-radius: 8px;
  background: var(--input-bg);
  color: var(--tx);
}

.field-row:focus-within,
input:focus,
select:focus,
textarea:focus,
.fi:focus { border-color: var(--pr); outline: none; box-shadow: 0 0 0 3px rgba(101,71,216,.15); }

.field-row input:not([type="radio"]):not([type="checkbox"]) {
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.btn { border-radius: 8px; font-family: inherit; font-weight: 650; }
.btn-primary { border-color: var(--pr); background: var(--pr); color: #fff; box-shadow: 0 1px 2px rgba(41,27,99,.18); }
.btn-primary:hover { border-color: var(--prd); background: var(--prd); transform: none; box-shadow: 0 4px 12px rgba(65,42,157,.2); }
.btn-ghost { border-color: var(--bd); background: var(--card); color: var(--txs); }
.btn-ghost:hover { border-color: #c9ced7; background: #f9fafb; color: var(--tx); }
.btn-add { border-color: var(--bd); border-radius: 8px; background: var(--card2); color: var(--pr); }

.plans-grid { gap: 10px; }
.plan-card,.contact-card,.token-box,.done-link,.steps {
  border-color: var(--bd);
  border-radius: 10px;
  background: var(--card2);
  color: var(--tx);
}
.plan-card:hover,.done-link:hover { border-color: #c9ced7; background: #fff; }
.plan-card.selected { border-color: var(--pr); background: #f0edff; box-shadow: 0 0 0 1px var(--pr); }
.plan-badge,.bld-badge { border-radius: 5px; background: #f0edff; color: var(--pr); }
.workspace-preview,.summary-table,.rooms-table { border-color: var(--bd); background: var(--card2); }
.email-highlight,.contact-link { color: var(--pr); }
.envelope-icon { background: #f0edff; color: var(--pr); }
.step-dot { border-color: #d9d1ff; background: #f0edff; color: var(--pr); }

.lb { border-color: var(--bd); border-radius: 6px; color: var(--txm); }
.lb:hover { border-color: #c9ced7; color: var(--tx); }
.lb.on { border-color: var(--pr); background: var(--pr); color: #fff; }

.alert-error { border-color: var(--warn-bd); background: var(--warn-bg); color: var(--warn-txt); }
.toast { border: 1px solid var(--bd); border-radius: 10px; background: var(--card); color: var(--tx); box-shadow: 0 14px 40px rgba(25,32,45,.16); }

:where(button,a,input,select,textarea,[tabindex]):focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px #fff, 0 0 0 5px rgba(101,71,216,.42) !important;
}

@media (max-width: 640px) {
  body { padding-left: 24px; }
  .reg-card,.wiz-card,body > .card { padding: 28px 20px; }
}

@media (prefers-reduced-motion: reduce) {
  *,*::before,*::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}