:root{
  --onb-bg:#f6f7fb; --onb-card:#ffffff; --onb-text:#0f172a; --onb-muted:#6b7280; --onb-border:#e6e8ec;
  --onb-primary:#0b57d0; --onb-success:#065f46; --onb-success-bg:#ecfdf5; --onb-success-bd:#a7f3d0;
  --onb-error:#b91c1c; --onb-error-bg:#fee2e2; --onb-error-bd:#fecaca;
}
.sud-onb-shell{background:linear-gradient(180deg,#fbfdff 0%,var(--onb-bg) 60%);padding:24px 16px;margin:0 auto;max-width:960px}
.sud-onb-header{display:flex;flex-direction:column;gap:14px;margin-bottom:12px}
.sud-onb-title{margin:0;font-weight:800;letter-spacing:-0.02em;font-size:28px;color:var(--onb-text)}
.sud-onb-progress{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px;list-style:none;padding:0;margin:0}
.sud-onb-step{display:flex;align-items:center;gap:8px;color:var(--onb-muted);font-size:12px;position:relative}
.sud-onb-step::after{content:"";position:absolute;right:-4px;top:50%;width:8px;height:2px;background:var(--onb-border)}
.sud-onb-step:last-child::after{display:none}
.sud-onb-step-index{display:inline-grid;place-items:center;width:22px;height:22px;border-radius:50%;border:1px solid var(--onb-border);background:#fff}
.sud-onb-step-label{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sud-onb-step.is-current .sud-onb-step-index{background:var(--onb-primary);color:#fff;border-color:var(--onb-primary)}
.sud-onb-step.is-current{color:var(--onb-text)}
.sud-onb-step.is-complete .sud-onb-step-index{background:#10b981;border-color:#10b981;color:#fff}
.sud-onb-step.is-complete{color:#0f766e}
.sud-onb-card{border:1px solid var(--onb-border);border-radius:16px;padding:16px;background:var(--onb-card);margin:16px 0;box-shadow:0 1px 2px rgba(0,0,0,.03)}
.sud-onb-form{display:flex;flex-direction:column;gap:12px}
.sud-onb-field label{display:block;font-weight:600;color:var(--onb-text)}
.sud-onb-field input[type=text],.sud-onb-field input[type=email],.sud-onb-field input[type=tel],.sud-onb-field select{width:100%;padding:12px;border:1px solid var(--onb-border);border-radius:12px;background:#fff;font-size:15px}
.sud-onb-row{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin:6px 0}
.sud-onb-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.sud-onb-grid-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
@media (max-width:640px){.sud-onb-grid,.sud-onb-grid-2{grid-template-columns:1fr}}
.sud-onb-chip{display:inline-flex;gap:8px;align-items:center;border:1px solid var(--onb-border);border-radius:999px;padding:8px 12px;background:#fff}
.sud-onb-chip input{accent-color:var(--onb-primary)}
.sud-onb-btn{display:inline-flex;justify-content:center;align-items:center;width:100%;min-height:44px;padding:12px 16px;background:var(--onb-primary);color:#fff;border:none;border-radius:12px;font-weight:700;text-decoration:none;cursor:pointer;transition:filter .15s ease}
.sud-onb-btn:hover{filter:brightness(.95)} .sud-onb-btn:active{filter:brightness(.9)}
.sud-onb-alert{padding:10px 12px;border-radius:10px;margin:10px 0}
.sud-onb-alert.sud-onb-alert-error{color:var(--onb-error);background:var(--onb-error-bg);border:1px solid var(--onb-error-bd)}
.sud-onb-success{color:var(--onb-success);background:var(--onb-success-bg);border:1px solid var(--onb-success-bd);padding:10px 12px;border-radius:10px}