:root{--brand:#ff385c;--brand-hover:#e31c5f;--brand-dark:#d91f4d;--ink:#222222;--ink-2:#484848;--muted:#717171;--line:#ebebeb;--surface:#ffffff;--canvas:#f7f7f7;--soft:#fcfcfc;--warning:#f5a623;--success:#008a05;--danger:#e21c3f;--focus:rgba(255,56,92,0.2);--shadow-sm:0 1px 2px rgba(0,0,0,0.08),0 4px 12px rgba(0,0,0,0.05);--shadow-md:0 6px 16px rgba(0,0,0,0.12);--shadow-lg:0 14px 28px rgba(0,0,0,0.12),0 10px 10px rgba(0,0,0,0.08);--radius:12px;--font:"Plus Jakarta Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;--transition:0.2s cubic-bezier(0.2,0,0,1);}*{box-sizing:border-box;}body{margin:0;min-height:100vh;color:var(--ink);background:var(--canvas);font-family:var(--font);}.topbar{position:sticky;top:0;z-index:100;height:70px;padding:0 40px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);background:rgba(255,255,255,0.85);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);box-shadow:0 1px 0 rgba(0,0,0,0.02);}.text-logo{font-family:'Plus Jakarta Sans',sans-serif;font-size:21px;color:var(--brand);text-decoration:none;display:flex;align-items:center;gap:3px;letter-spacing:0;transition:transform var(--transition);}.text-logo:hover{transform:scale(1.02);}.text-logo .logo-icon{font-size:28px;margin-right:2px;color:var(--brand);}.text-logo .logo-bold{font-weight:800;color:var(--brand);}.text-logo .logo-light{font-weight:300;letter-spacing:1px;color:var(--brand);}.nav-back{color:var(--ink-2);font-size:15px;font-weight:600;text-decoration:none;transition:color var(--transition);}.nav-back:hover{color:var(--brand);}.onboarding-shell{width:min(1200px,calc(100vw - 48px));margin:40px auto 80px;display:grid;grid-template-columns:360px minmax(0,1fr);gap:32px;}dialog.otp-modal{border:none;border-radius:16px;box-shadow:var(--shadow);padding:0;max-width:440px;width:100%;background:transparent;}dialog.otp-modal::backdrop{background:rgba(17,24,39,0.4);backdrop-filter:blur(8px);}.modal-box{background:var(--surface);padding:32px;border-radius:16px;box-shadow:0 24px 60px rgba(0,0,0,0.1);display:flex;flex-direction:column;gap:16px;}.modal-box h3{margin:0;font-size:24px;}.modal-box p{color:var(--muted);margin-bottom:8px;}.process-panel,.verify-panel,.auth-panel,.wizard-panel,.review-panel,.summary-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);}.process-panel{position:sticky;top:88px;top:110px;background:var(--surface);border-radius:20px;padding:32px;box-shadow:var(--shadow-md);height:max-content;max-height:calc(100vh - 140px);overflow-y:auto;border:1px solid var(--line);}.process-panel::-webkit-scrollbar{width:6px;}.process-panel::-webkit-scrollbar-thumb{background:#ccc;border-radius:10px;}.panel-kicker{color:var(--brand);font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:0.5px;margin-bottom:12px;}.process-panel h1{font-size:18px;line-height:1.2;margin:0 0 16px;font-weight:800;color:var(--ink);letter-spacing:-0.5px;white-space:normal;word-break:break-word;overflow-wrap:break-word;}.panel-copy{color:#555555;font-weight:400;font-size:16px;line-height:1.65;margin-bottom:32px;letter-spacing:-0.01em;}.session-card{display:flex;align-items:flex-start;gap:16px;padding:20px;background:var(--canvas);border-radius:var(--radius);margin-bottom:32px;border:1px solid var(--line);}.status-dot{width:10px;height:10px;border-radius:50%;background:var(--muted);margin-top:6px;box-shadow:0 0 0 4px rgba(113,113,113,0.1);transition:all var(--transition);}.status-dot.active{background:var(--success);box-shadow:0 0 0 4px rgba(0,138,5,0.15);}.status-dot.in-progress{background:#f5a623;box-shadow:0 0 0 4px rgba(245,166,35,0.15);}.status-dot.pending{background:#4a90e2;box-shadow:0 0 0 4px rgba(74,144,226,0.15);}.session-card strong{display:block;font-size:15px;font-weight:700;margin-bottom:4px;color:var(--ink);}.session-card span{display:block;font-size:13px;color:var(--muted);line-height:1.5;}.step-rail{list-style:none;padding:0;margin:0;display:grid;gap:8px;}.step-rail li{min-height:44px;padding:10px 12px;border:1px solid var(--line);border-radius:var(--radius);color:var(--muted);background:#fff;font-size:13px;font-weight:700;}.step-rail li.active{color:var(--ink);border-color:var(--brand);background:#fff5f7;}.step-rail li.locked{color:var(--success);border-color:#bde7ce;background:#f1faf5;}.step-rail li.reopen{color:var(--warning);border-color:#f4d27a;background:#fff9e8;}.security-note{margin-top:32px;padding:16px;border-radius:var(--radius);background:var(--soft);border:1px solid var(--line);font-size:13px;line-height:1.5;}.security-note strong{display:block;color:var(--ink);margin-bottom:6px;font-weight:700;}.security-note span{color:var(--muted);}.workspace{background:var(--surface);border-radius:20px;padding:40px;box-shadow:var(--shadow-sm);border:1px solid var(--line);min-height:600px;}.section-head{margin-bottom:40px;animation:slideUp 0.4s ease-out;}.eyebrow{display:inline-block;padding:6px 12px;background:var(--canvas);color:var(--ink-2);font-size:13px;font-weight:700;border-radius:20px;margin-bottom:16px;border:1px solid var(--line);}.section-head h2{font-size:28px;font-weight:800;margin:0 0 12px;color:var(--ink);letter-spacing:-0.5px;}.section-head p{font-size:16px;color:var(--muted);margin:0;line-height:1.6;}.verify-panel,.auth-panel,.wizard-panel,.review-panel{padding:28px;animation:slideUp 0.4s ease-out;}.auth-panel{max-width:440px;}.summary-stack{display:grid;gap:12px;margin-bottom:16px;}.summary-card{padding:18px;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);}.summary-card h3{margin-bottom:8px;font-size:16px;}.summary-list,.review-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;}.summary-list div,.review-grid div{min-width:0;padding:12px;border:1px solid var(--line);border-radius:var(--radius);background:#fbfcfe;}.summary-list span,.review-grid span{display:block;margin-bottom:4px;color:var(--muted);font-size:12px;font-weight:700;}.summary-list strong,.review-grid strong{display:block;overflow-wrap:anywhere;font-size:14px;}.form-grid{display:grid;gap:24px;animation:slideUp 0.4s ease-out;}.field{display:flex;flex-direction:column;gap:8px;}.field.full,.action-row,.check-group,.file-list,.agreement-box{grid-column:1 / -1;}.field span{font-size:14px;font-weight:600;color:var(--ink);}.field input,.field select,.field textarea{font-family:inherit;font-size:15px;padding:14px 16px;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);color:var(--ink);transition:all var(--transition);box-shadow:0 1px 2px rgba(0,0,0,0.02);}.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 4px var(--focus);}.field input::placeholder,.field textarea::placeholder{color:#a0a0a0;}.file-drop{border:2px dashed var(--line);border-radius:var(--radius);padding:40px 24px;text-align:center;background:var(--canvas);cursor:pointer;transition:all var(--transition);}.file-drop:hover{border-color:var(--brand);background:var(--soft);}input[readonly],input[disabled]{color:var(--muted);background:#f3f5f8;}.otp-field{display:none;}.otp-field.show{display:grid;}.check-group{margin:0;padding:0;border:0;}.check-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:8px;}.check-grid label,.agreement-box label{min-height:44px;padding:10px 12px;display:flex;align-items:center;gap:9px;border:1px solid var(--line);border-radius:var(--radius);background:#fff;font-size:14px;font-weight:700;}.check-grid input,.agreement-box input{width:16px;min-height:16px;flex:none;}.file-list{display:grid;gap:8px;color:var(--muted);font-size:13px;}.file-pill{padding:9px 10px;border:1px solid var(--line);border-radius:var(--radius);background:#fbfcfe;}.agreement-box{display:grid;gap:12px;padding:16px;border:1px solid #cad7df;border-radius:var(--radius);background:var(--soft);}.agreement-terms{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;}.agreement-terms div{padding:12px;border-radius:var(--radius);background:#fff;border:1px solid var(--line);}.agreement-terms span,.agreement-terms strong{display:block;}.agreement-terms span{margin-bottom:4px;color:var(--muted);font-size:12px;font-weight:800;}.action-row{display:flex;justify-content:flex-end;gap:12px;margin-top:6px;}.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:48px;padding:0 24px;font-family:inherit;font-size:15px;font-weight:600;border-radius:var(--radius);cursor:pointer;transition:all var(--transition);border:none;text-decoration:none;}.btn.primary{background:linear-gradient(to right,var(--brand),var(--brand-hover));color:white;box-shadow:0 4px 12px rgba(255,56,92,0.2);}.btn.primary:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 6px 16px rgba(255,56,92,0.3);}.btn.primary:active:not(:disabled){transform:translateY(1px);}.btn.secondary{background:var(--surface);color:var(--ink);border:1px solid var(--line);}.btn.secondary:hover:not(:disabled){background:var(--canvas);border-color:var(--muted);}.btn:disabled{cursor:not-allowed;opacity:0.55;}.inline-link{display:inline-flex;align-items:center;margin-top:22px;}#toast{position:fixed;right:20px;bottom:20px;z-index:30;max-width:min(360px,calc(100vw - 40px));padding:12px 16px;color:#fff;border-radius:var(--radius);background:#263238;box-shadow:var(--shadow);transform:translateY(80px);opacity:0;transition:transform 0.2s ease,opacity 0.2s ease;}#toast.show{transform:translateY(0);opacity:1;}#toast.success{background:var(--success);}#toast.error{background:var(--danger);}@media (max-width:920px){.onboarding-shell{grid-template-columns:1fr;}.process-panel{position:static;}}@media (max-width:680px){.topbar{padding:0 18px;}.onboarding-shell{width:min(100vw - 20px,680px);margin-top:14px;}.verify-panel,.wizard-panel,.review-panel,.process-panel{padding:18px;}.form-grid,.summary-list,.review-grid,.agreement-terms{grid-template-columns:1fr;}.check-grid{grid-template-columns:1fr 1fr;}.action-row{flex-direction:column;}}.step-rail li.clickable{cursor:pointer;user-select:none;transition:all var(--transition);}.step-rail li.clickable:hover:not(.active){border-color:var(--brand);background:#fff9fa;transform:translateX(3px);}.step-rail li.active{color:var(--ink)!important;border-color:var(--brand)!important;background:#fff5f7!important;}

/* Host Transition Overlay */
.host-transition-overlay {
  position: fixed;
  inset: 0;
  z-index: 999999;
  background: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 1;
  visibility: visible;
  transition: opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.4s ease;
}
.host-transition-overlay.fade-out {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}
.host-transition-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  max-width: 460px;
  width: 90%;
  padding: 40px 24px;
  text-align: center;
  animation: hostPop 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
@keyframes hostPop {
  0% { transform: scale(0.9); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}
.host-nodes-flow {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-bottom: 32px;
  width: 100%;
}
.host-node-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 84px;
}
.host-circle-badge {
  width: 76px;
  height: 76px;
  border-radius: 50%;
  background: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  transition: transform 0.3s ease;
}
.host-badge-gruvora {
  border: 2px solid #ff385c;
  box-shadow: 0 8px 24px rgba(255, 56, 92, 0.16);
  padding: 14px;
  animation: hostPulseLeft 2s infinite ease-in-out;
}
.host-badge-gruvora img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.host-badge-man {
  border: 2.5px solid #ff385c;
  box-shadow: 0 8px 24px rgba(255, 56, 92, 0.2);
  overflow: hidden;
  animation: hostPulseRight 2s infinite ease-in-out;
  padding: 10px;
  background: #f8fafc;
}
.host-badge-man img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
@keyframes hostPulseLeft {
  0%, 100% { transform: scale(1); box-shadow: 0 4px 16px rgba(255, 56, 92, 0.15); }
  50% { transform: scale(1.04); box-shadow: 0 10px 28px rgba(255, 56, 92, 0.28); }
}
@keyframes hostPulseRight {
  0%, 100% { transform: scale(1); box-shadow: 0 4px 16px rgba(255, 56, 92, 0.18); }
  50% { transform: scale(1.05); box-shadow: 0 12px 30px rgba(255, 56, 92, 0.32); }
}
.host-label-brand {
  margin-top: 10px;
  font-family: 'Baloo 2', 'Plus Jakarta Sans', sans-serif;
  font-size: 15px;
  font-weight: 700;
  color: #ff385c;
  letter-spacing: -0.3px;
}
.host-label-man {
  margin-top: 10px;
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  font-size: 15px;
  font-weight: 800;
  color: #1e293b;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}
.host-connector-line {
  flex: 1;
  max-width: 140px;
  min-width: 70px;
  display: flex;
  align-items: center;
  position: relative;
  margin-top: -24px;
  gap: 3px;
}
.host-line-track {
  flex: 1;
  height: 4px;
  background: #ffe4e6;
  border-radius: 99px;
  position: relative;
  overflow: hidden;
}
.host-line-beam {
  position: absolute;
  top: 0;
  left: -40%;
  width: 45%;
  height: 100%;
  background: linear-gradient(90deg, transparent, #ff385c 70%, #e11d48 100%);
  border-radius: 99px;
  box-shadow: 0 0 8px #ff385c;
  animation: hostBeamTravel 1.3s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}
@keyframes hostBeamTravel {
  0% { left: -45%; }
  100% { left: 105%; }
}
.host-line-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ff385c;
  flex-shrink: 0;
  line-height: 1;
  animation: hostArrowPulse 1.3s ease-in-out infinite;
}
@keyframes hostArrowPulse {
  0%, 100% { transform: translateX(0); opacity: 0.7; }
  50% { transform: translateX(3px); opacity: 1; }
}
.host-title-text {
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  font-size: 18px;
  font-weight: 700;
  color: #1e293b;
  margin-bottom: 6px;
  letter-spacing: -0.3px;
}
.host-subtitle-text {
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  font-size: 13.5px;
  color: #64748b;
  font-weight: 500;
  margin-bottom: 0;
}


/* ── Mobile Responsive & Horizontal Scroll Prevention ── */
html, body {
  overflow-x: hidden !important;
  max-width: 100vw !important;
  width: 100% !important;
  position: relative;
  box-sizing: border-box;
}

*, *::before, *::after {
  box-sizing: border-box;
}

.process-panel h1 {
  white-space: normal !important;
  word-break: break-word !important;
  overflow-wrap: break-word !important;
}

.panel-copy, .session-card strong, .session-card span, .step-rail li {
  word-break: break-word !important;
  overflow-wrap: break-word !important;
}

.session-card {
  max-width: 100% !important;
  box-sizing: border-box !important;
}

@media (max-width: 920px) {
  .onboarding-shell {
    grid-template-columns: 1fr !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 16px !important;
    margin: 16px auto 60px !important;
    gap: 20px !important;
    box-sizing: border-box !important;
  }
  .process-panel {
    position: static !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
}

@media (max-width: 680px) {
  .topbar {
    padding: 0 14px !important;
    height: 58px !important;
    max-width: 100vw !important;
    overflow-x: hidden !important;
  }
  .topbar .logo img {
    height: 24px !important;
  }
  .topbar .logo span {
    font-size: 18px !important;
  }
  .topbar .nav-back {
    font-size: 13px !important;
    white-space: nowrap !important;
  }
  .onboarding-shell {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 12px !important;
    margin: 12px auto 50px !important;
    box-sizing: border-box !important;
  }
  .workspace {
    padding: 16px !important;
    border-radius: 16px !important;
    min-height: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
  }
  .verify-panel, .auth-panel, .wizard-panel, .review-panel, .process-panel {
    padding: 16px !important;
    border-radius: 16px !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  .form-grid, .summary-list, .review-grid, .agreement-terms {
    grid-template-columns: 1fr !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  .field {
    width: 100% !important;
    max-width: 100% !important;
  }
  .field input, .field select, .field textarea {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  .action-row {
    flex-direction: column !important;
    width: 100% !important;
  }
  .action-row .btn {
    width: 100% !important;
  }
  .bed-pricing-section {
    padding: 12px !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  .bed-pricing-section div[style*="minmax(300px"],
  .bed-pricing-section div[style*="minmax(240px"] {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
  .location-picker-container {
    padding: 14px !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
}

@media (max-width: 440px) {
  .check-grid {
    grid-template-columns: 1fr !important;
  }
  .onboarding-shell {
    padding: 0 8px !important;
  }
  .process-panel, .workspace, .auth-panel, .wizard-panel {
    padding: 14px 12px !important;
  }
}