/* ===== ONBOARDING SHELL ===== */
.onboarding-shell { display:flex; flex-direction:column; min-height:100vh; background:#F8F9FA; }

.ob-navbar { height:64px; background:var(--deep-blue); border-bottom:none; display:flex; align-items:center; justify-content:space-between; padding:0 32px; position:sticky; top:0; z-index:100; }
.ob-logo { font-family:'Plus Jakarta Sans',sans-serif; font-weight:700; font-size:22px; color:#fff; cursor:pointer; text-decoration:none; }
.ob-nav-right { display:flex; align-items:center; gap:12px; }
.ob-nav-btn { height:36px; padding:0 16px; border-radius:8px; border:1px solid rgba(255,255,255,0.4); background:rgba(255,255,255,0.1); font-size:14px; font-weight:500; color:#fff; cursor:pointer; transition:.2s; }
.ob-nav-btn:hover { background:rgba(255,255,255,0.2); }
.ob-close { width:36px; height:36px; border-radius:50%; border:none; background:none; cursor:pointer; display:flex; align-items:center; justify-content:center; font-size:20px; color:rgba(255,255,255,0.8); transition:.2s; }
.ob-close:hover { background:rgba(255,255,255,0.15); }
.ob-user-avatar { width:36px; height:36px; border-radius:50%; background:var(--deep-blue); color:#fff; display:flex; align-items:center; justify-content:center; font-size:13px; font-weight:700; }

.ob-content { flex:1; display:flex; justify-content:center; padding:40px 24px 60px; }
.ob-content-wide { flex:1; display:flex; justify-content:center; padding:40px 24px 60px; }

/* Auth card container */
.ob-card { background:#fff; border-radius:16px; border:1px solid var(--border); padding:48px 40px; width:100%; max-width:540px; box-shadow:0 1px 3px rgba(0,0,0,.04); }
.ob-card-wide { background:#fff; border-radius:16px; border:1px solid var(--border); padding:48px 40px; width:100%; max-width:640px; box-shadow:0 1px 3px rgba(0,0,0,.04); }
.ob-card-full { width:100%; max-width:780px; }

.ob-card h1 { font-size:28px; font-weight:700; color:var(--deep-blue); margin-bottom:8px; text-align:center; }
.ob-card h2 { font-size:24px; font-weight:700; color:var(--deep-blue); margin-bottom:8px; }
.ob-card .ob-subtitle { font-size:15px; color:var(--text-muted); text-align:center; margin-bottom:32px; line-height:1.5; }
.ob-card-wide .ob-subtitle { font-size:15px; color:var(--text-muted); margin-bottom:32px; line-height:1.5; }

.ob-divider { height:1px; background:var(--border); margin:24px 0; }
.ob-divider-text { display:flex; align-items:center; gap:16px; margin:24px 0; color:var(--text-muted); font-size:14px; }
.ob-divider-text::before, .ob-divider-text::after { content:''; flex:1; height:1px; background:var(--border); }

/* Form styles */
.ob-form-row { display:flex; gap:16px; }
.ob-form-group { margin-bottom:20px; flex:1; }
.ob-label { display:block; font-size:14px; font-weight:600; color:var(--charcoal); margin-bottom:6px; }
.ob-label-accent { color:var(--deep-blue); }
.ob-input { width:100%; height:48px; padding:0 16px; border:1px solid #E0E0E0; border-radius:10px; font-size:15px; font-family:'Inter',sans-serif; background:#F9FAFB; color:var(--charcoal); transition:border .2s, background .2s; }
.ob-input:focus { outline:none; border-color:var(--deep-blue); background:#fff; }
.ob-input::placeholder { color:var(--text-light); }
select.ob-input { appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236B7280' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 14px center; padding-right:40px; cursor:pointer; }
textarea.ob-input { height:auto; min-height:180px; padding:16px; resize:vertical; line-height:1.6; }
.ob-input-icon { position:relative; }
.ob-input-icon .ob-input { padding-right:48px; }
.ob-input-icon button { position:absolute; right:12px; top:50%; transform:translateY(-50%); background:none; border:none; cursor:pointer; color:var(--text-muted); padding:4px; }
.ob-helper { font-size:13px; color:var(--text-light); margin-top:4px; }

/* Phone input */
.ob-phone-row { display:flex; gap:8px; }
.ob-phone-code { width:100px; flex-shrink:0; }
.ob-phone-input { flex:1; }

/* Password strength */
.ob-strength-bar { display:flex; gap:4px; margin-top:8px; height:4px; }
.ob-strength-seg { flex:1; border-radius:2px; background:var(--border); transition:background .3s; }
.ob-strength-seg.s1 { background:var(--danger); }
.ob-strength-seg.s2 { background:var(--warm-coral); }
.ob-strength-seg.s3 { background:#EAB308; }
.ob-strength-seg.s4 { background:var(--vibrant-green); }
.ob-strength-label { display:flex; justify-content:space-between; margin-top:6px; font-size:12px; font-weight:600; }
.ob-strength-label .level { color:var(--vibrant-green); text-transform:uppercase; }
.ob-strength-label .reqs { color:var(--text-light); font-weight:400; }

/* Password requirements checklist */
.ob-pw-reqs { background:#F9FAFB; border-radius:10px; padding:16px; margin-top:12px; }
.ob-pw-reqs p { font-size:14px; font-weight:600; margin-bottom:8px; }
.ob-pw-req { display:flex; align-items:center; gap:8px; font-size:14px; color:var(--text-muted); margin-bottom:4px; }
.ob-pw-req .dot { width:18px; height:18px; border-radius:50%; border:2px solid var(--border); flex-shrink:0; }
.ob-pw-req.met .dot { background:var(--vibrant-green); border-color:var(--vibrant-green); }
.ob-pw-req.met { color:var(--charcoal); }

/* Checkboxes */
.ob-checkbox { display:flex; align-items:flex-start; gap:10px; margin-bottom:12px; cursor:pointer; font-size:14px; color:var(--charcoal); line-height:1.4; }
.ob-checkbox input { width:18px; height:18px; margin-top:2px; flex-shrink:0; accent-color:var(--vibrant-green); }
.ob-checkbox a { color:var(--deep-blue); font-weight:500; text-decoration:underline; }

/* Buttons */
.ob-btn-primary { width:100%; height:52px; border-radius:12px; border:none; background:var(--vibrant-green); color:#fff; font-size:16px; font-weight:600; font-family:'Inter',sans-serif; cursor:pointer; transition:all .2s; display:flex; align-items:center; justify-content:center; gap:8px; }
.ob-btn-primary:hover { background:#1CAD4E; }
.ob-btn-secondary { width:100%; height:48px; border-radius:10px; border:1px solid var(--border); background:#fff; color:var(--charcoal); font-size:15px; font-weight:500; font-family:'Inter',sans-serif; cursor:pointer; transition:.2s; display:flex; align-items:center; justify-content:center; gap:10px; }
.ob-btn-secondary:hover { background:#F9FAFB; }
.ob-btn-sm { height:44px; padding:0 24px; border-radius:10px; border:none; background:var(--deep-blue); color:#fff; font-size:14px; font-weight:600; cursor:pointer; transition:.2s; }
.ob-btn-sm:hover { opacity:.9; }
.ob-btn-inline { display:inline-flex; align-items:center; gap:8px; height:44px; padding:0 28px; border-radius:26px; border:none; background:var(--vibrant-green); color:#fff; font-size:15px; font-weight:600; cursor:pointer; transition:.2s; float:right; }
.ob-btn-inline:hover { background:#1CAD4E; }

.ob-link { color:var(--deep-blue); font-weight:600; cursor:pointer; text-decoration:none; }
.ob-link:hover { text-decoration:underline; }
.ob-link-green { color:var(--vibrant-green); cursor:pointer; font-weight:600; text-decoration:none; }
.ob-link-green:hover { text-decoration:underline; }
.ob-link-muted { color:var(--text-muted); font-weight:500; cursor:pointer; text-decoration:none; }
.ob-text-center { text-align:center; font-size:14px; color:var(--text-muted); margin-top:20px; }

/* SSO buttons */
.ob-sso-row { display:flex; gap:12px; margin-bottom:8px; }
.ob-sso-btn { flex:1; height:48px; border-radius:26px; border:1px solid var(--border); background:#fff; font-size:15px; font-weight:500; cursor:pointer; display:flex; align-items:center; justify-content:center; gap:10px; transition:.2s; }
.ob-sso-btn:hover { background:#F9FAFB; }
.ob-sso-btn img { width:20px; height:20px; }

/* OTP inputs */
.ob-otp-row { display:flex; gap:12px; justify-content:center; margin:28px 0; }
.ob-otp-box { width:52px; height:56px; border-radius:10px; border:2px solid #E0E0E0; background:#F5F5F5; text-align:center; font-size:24px; font-family:'Plus Jakarta Sans',sans-serif; font-weight:700; color:var(--charcoal); transition:border .2s; }
.ob-otp-box:focus { outline:none; border-color:var(--deep-blue); background:#fff; }

.ob-resend-row { display:flex; justify-content:space-between; align-items:center; font-size:14px; color:var(--text-muted); }
.ob-resend-row .timer { color:var(--deep-blue); font-weight:500; }

/* Shield / lock icons */
.ob-icon-circle { width:72px; height:72px; border-radius:50%; display:flex; align-items:center; justify-content:center; margin:0 auto 20px; }
.ob-icon-circle.green { background:var(--green-tint); }
.ob-icon-circle.blue { background:#E3F2FD; }
.ob-icon-circle svg { width:32px; height:32px; }

/* MFA option cards */
.ob-option-card { display:flex; align-items:center; gap:16px; padding:20px; border:1px solid var(--border); border-radius:12px; cursor:pointer; transition:.2s; margin-bottom:12px; }
.ob-option-card:hover { border-color:var(--deep-blue); background:#FAFBFF; }
.ob-option-icon { width:44px; height:44px; border-radius:10px; background:#F3F4F6; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.ob-option-icon svg { width:22px; height:22px; stroke:var(--charcoal); fill:none; stroke-width:1.5; }
.ob-option-text { flex:1; }
.ob-option-text h4 { font-size:15px; font-weight:600; color:var(--deep-blue); margin-bottom:2px; }
.ob-option-text p { font-size:13px; color:var(--text-muted); }
.ob-option-chevron { color:var(--text-light); font-size:18px; }

/* Section headers */
.ob-section-title { font-size:20px; font-weight:700; color:var(--deep-blue); margin:32px 0 16px; padding-left:12px; border-left:4px solid var(--deep-blue); }

/* Fee transparency card */
.ob-fee-card { background:#F9FAFB; border-radius:12px; padding:20px; margin:20px 0; }
.ob-fee-card h4 { display:flex; align-items:center; gap:8px; font-size:15px; font-weight:600; margin-bottom:12px; }
.ob-fee-row { display:flex; justify-content:space-between; font-size:14px; padding:6px 0; }
.ob-fee-row .val { font-weight:600; }
.ob-fee-row .val .free { color:var(--vibrant-green); text-decoration:line-through; margin-left:4px; }
.ob-fee-link { font-size:13px; color:var(--deep-blue); font-weight:600; margin-top:8px; display:inline-flex; align-items:center; gap:4px; cursor:pointer; }

/* Goal amount input */
.ob-goal-input { display:flex; align-items:center; border:2px solid var(--border); border-radius:12px; padding:0 20px; margin-top:8px; height:64px; transition:border .2s; }
.ob-goal-input:focus-within { border-color:var(--deep-blue); }
.ob-goal-input .currency { font-size:24px; color:var(--text-muted); margin-right:12px; }
.ob-goal-input input { border:none; outline:none; font-size:32px; font-family:'Plus Jakarta Sans',sans-serif; font-weight:700; width:100%; background:transparent; }

/* Upload zone */
.ob-upload-zone { border:2px dashed var(--border); border-radius:16px; padding:48px 20px; text-align:center; cursor:pointer; transition:.2s; background:#FAFBFC; }
.ob-upload-zone:hover { border-color:var(--deep-blue); background:#F5F7FF; }
.ob-upload-zone .icon { width:48px; height:48px; margin:0 auto 12px; background:var(--deep-blue); border-radius:50%; display:flex; align-items:center; justify-content:center; }
.ob-upload-zone .icon svg { width:24px; height:24px; stroke:#fff; fill:none; stroke-width:1.5; }
.ob-upload-zone h4 { font-size:16px; font-weight:600; color:var(--charcoal); margin-bottom:4px; }
.ob-upload-zone p { font-size:13px; color:var(--text-muted); }

/* Media thumbnails */
.ob-media-row { display:flex; gap:12px; margin-top:16px; flex-wrap:wrap; }
.ob-media-thumb { width:72px; height:72px; border-radius:10px; overflow:hidden; border:1px solid var(--border); }
.ob-media-thumb img { width:100%; height:100%; object-fit:cover; }
.ob-media-add { width:72px; height:72px; border-radius:10px; border:2px dashed var(--border); display:flex; flex-direction:column; align-items:center; justify-content:center; cursor:pointer; font-size:11px; color:var(--text-light); gap:2px; }

/* Rich text toolbar */
.ob-toolbar { display:flex; gap:2px; padding:8px; border:1px solid var(--border); border-bottom:none; border-radius:10px 10px 0 0; background:#FAFAFA; }
.ob-toolbar button { width:32px; height:32px; border:none; background:none; border-radius:6px; cursor:pointer; display:flex; align-items:center; justify-content:center; font-size:14px; font-weight:700; color:var(--text-muted); transition:.2s; }
.ob-toolbar button:hover { background:#E8E8E8; }
.ob-toolbar .sep { width:1px; background:var(--border); margin:4px 6px; }
textarea.ob-input.with-toolbar { border-radius:0 0 10px 10px; }

/* Important callout */
.ob-callout { display:flex; gap:12px; padding:16px; background:#F0F4FF; border-radius:10px; font-size:14px; color:#1E40AF; margin:16px 0; align-items:flex-start; }
.ob-callout svg { width:20px; height:20px; flex-shrink:0; margin-top:1px; }

/* Warning text */
.ob-warning { display:flex; align-items:center; gap:6px; font-size:13px; color:var(--warm-coral); justify-content:center; margin-top:8px; }

/* Split layout (password reset) */
.ob-split { display:flex; gap:60px; width:100%; max-width:1100px; align-items:flex-start; }
.ob-split-left { flex:1; padding-top:20px; }
.ob-split-left h1 { font-size:36px; font-weight:700; color:var(--deep-blue); line-height:1.2; margin-bottom:16px; text-align:left; }
.ob-split-left p { font-size:16px; color:var(--text-muted); line-height:1.6; margin-bottom:32px; }
.ob-split-left img { width:100%; border-radius:16px; }
.ob-split-right { flex:1; max-width:480px; }

/* Check inbox state */
.ob-inbox-card { text-align:center; margin-top:24px; padding-top:24px; border-top:1px solid var(--border); }
.ob-inbox-card .icon { width:56px; height:56px; border-radius:50%; background:var(--green-tint); display:flex; align-items:center; justify-content:center; margin:0 auto 12px; }
.ob-inbox-card h3 { font-size:20px; font-weight:700; color:var(--charcoal); margin-bottom:8px; }
.ob-inbox-card p { font-size:14px; color:var(--text-muted); margin-bottom:16px; }
.ob-inbox-card .expires { background:#F3F4F6; border-radius:8px; padding:10px 16px; font-size:14px; color:var(--text-muted); display:inline-flex; align-items:center; gap:6px; }

/* QR code area */
.ob-qr-area { border:1px solid var(--border); border-radius:12px; padding:24px; text-align:center; margin:16px 0; background:#FAFAFA; }
.ob-qr-area img { width:140px; height:140px; margin-bottom:12px; }
.ob-qr-area .secret { font-family:monospace; font-size:14px; color:var(--text-muted); letter-spacing:1px; }

/* Step labels */
.ob-step-label { display:flex; align-items:center; gap:10px; font-size:16px; font-weight:700; color:var(--deep-blue); margin:24px 0 12px; }
.ob-step-num { width:28px; height:28px; border-radius:50%; background:var(--green-tint); color:var(--vibrant-green); display:flex; align-items:center; justify-content:center; font-size:14px; font-weight:700; flex-shrink:0; }

/* Review page */
.ob-progress-wrap { margin-bottom:8px; }
.ob-progress-bar { height:6px; border-radius:3px; background:var(--border); overflow:hidden; }
.ob-progress-fill { height:100%; border-radius:3px; background:var(--vibrant-green); }
.ob-verified-badge { display:flex; align-items:center; gap:6px; font-size:14px; color:var(--vibrant-green); margin:8px 0 24px; }

.ob-campaign-id { background:var(--deep-blue); border-radius:12px; padding:16px 20px; display:flex; justify-content:space-between; align-items:center; margin-bottom:28px; }
.ob-campaign-id .label { font-size:11px; text-transform:uppercase; letter-spacing:1px; color:rgba(255,255,255,.6); }
.ob-campaign-id .id { font-size:20px; font-weight:700; color:#fff; font-family:'Plus Jakarta Sans',sans-serif; }
.ob-campaign-id .hint { font-size:12px; color:rgba(255,255,255,.5); text-align:right; }

/* Live preview card */
.ob-preview-card { border:1px solid var(--border); border-radius:16px; overflow:hidden; margin-bottom:32px; }
.ob-preview-img { width:100%; height:280px; object-fit:cover; position:relative; }
.ob-preview-img img { width:100%; height:100%; object-fit:cover; }
.ob-preview-badge { position:absolute; top:16px; left:16px; background:var(--deep-blue); color:#fff; font-size:12px; font-weight:600; padding:4px 12px; border-radius:6px; }
.ob-preview-body { padding:24px; }
.ob-preview-body h3 { font-size:20px; font-weight:700; margin-bottom:8px; }
.ob-preview-meta { font-size:13px; color:var(--text-muted); margin-bottom:12px; display:flex; gap:8px; align-items:center; }
.ob-preview-raised { font-size:20px; font-weight:700; color:var(--vibrant-green); }
.ob-preview-goal { font-size:13px; color:var(--text-muted); }
.ob-preview-story { font-size:14px; color:var(--text-muted); line-height:1.6; margin:16px 0; font-style:italic; border-left:3px solid var(--deep-blue); padding-left:12px; }
.ob-preview-organizer { display:flex; align-items:center; gap:10px; font-size:14px; margin-top:16px; }
.ob-preview-organizer .av { width:36px; height:36px; border-radius:50%; background:var(--deep-blue); color:#fff; display:flex; align-items:center; justify-content:center; font-size:13px; font-weight:700; }

/* Details table */
.ob-details-table { width:100%; border:1px solid var(--border); border-radius:12px; overflow:hidden; margin-bottom:32px; }
.ob-details-row { display:flex; align-items:center; padding:16px 20px; border-bottom:1px solid var(--soft-gray); }
.ob-details-row:last-child { border-bottom:none; }
.ob-details-row .dt-label { width:160px; font-size:14px; color:var(--text-muted); flex-shrink:0; }
.ob-details-row .dt-value { flex:1; font-size:14px; font-weight:600; }
.ob-details-row .dt-value small { display:block; font-weight:400; color:var(--text-muted); font-size:13px; }
.ob-details-row .dt-edit { color:var(--deep-blue); font-size:14px; font-weight:500; cursor:pointer; display:flex; align-items:center; gap:4px; }

.ob-launch-btn { width:100%; max-width:400px; height:56px; border-radius:30px; border:none; background:var(--vibrant-green); color:#fff; font-size:17px; font-weight:700; cursor:pointer; display:flex; align-items:center; justify-content:center; gap:10px; margin:0 auto 16px; transition:.2s; }
.ob-launch-btn:hover { background:#1CAD4E; }
.ob-draft-link { text-align:center; font-size:14px; color:var(--text-muted); cursor:pointer; display:flex; align-items:center; justify-content:center; gap:6px; }
.ob-legal { text-align:center; font-size:12px; color:var(--text-light); margin-top:16px; max-width:400px; margin-left:auto; margin-right:auto; line-height:1.5; }
.ob-encryption-badge { text-align:center; font-size:14px; color:var(--vibrant-green); margin-top:40px; display:flex; align-items:center; justify-content:center; gap:6px; font-weight:500; }

/* Footer */
.ob-footer { padding:20px 32px; text-align:center; font-size:13px; color:var(--text-light); border-top:1px solid var(--border); background:#fff; }
.ob-footer a { color:var(--text-muted); margin:0 12px; cursor:pointer; text-decoration:none; }
.ob-footer a:hover { text-decoration:underline; }
.ob-footer-badges { display:flex; justify-content:center; gap:24px; margin-bottom:12px; font-size:13px; color:var(--text-muted); }
.ob-footer-badges span { display:flex; align-items:center; gap:6px; }

/* RESPONSIVE */
@media(max-width:768px) {
  .ob-navbar { padding:0 16px; }
  .ob-content, .ob-content-wide { padding:24px 16px 40px; }
  .ob-card, .ob-card-wide { padding:32px 24px; }
  .ob-form-row { flex-direction:column; gap:0; }
  .ob-split { flex-direction:column; gap:32px; }
  .ob-split-left h1 { font-size:28px; }
  .ob-split-right { max-width:100%; }
  .ob-details-row .dt-label { width:120px; }
  .ob-sso-row { flex-direction:column; }
}
@media(max-width:480px) {
  .ob-card h1 { font-size:22px; }
  .ob-otp-row { gap:8px; }
  .ob-otp-box { width:44px; height:48px; font-size:20px; }
  .ob-goal-input input { font-size:24px; }
  .ob-preview-img { height:200px; }
}