.onboarding { --ob-green:#1e3a8a; --ob-mint:#dbeafe; --ob-ink:#1e293b; --ob-muted:#64748b; --ob-line:#e2e8f0; color:var(--ob-ink); background:#f6f8fc; min-height:100dvh; }
.ob-header { min-height:82px; display:flex; align-items:center; justify-content:space-between; gap:16px; padding:16px clamp(20px,5vw,76px); border-bottom:1px solid var(--ob-line); background:#fff; }
.ob-header .brand { margin:0; }
.ob-tools { display:flex; flex-wrap:wrap; gap:8px; }
.ob-layout { max-width:1320px; margin:auto; display:grid; grid-template-columns:320px minmax(0,1fr); padding:40px clamp(20px,5vw,64px); gap:48px; }
.ob-sidebar { align-self:start; padding:28px; border-radius:22px; background:var(--ob-green); color:#fff; }
.ob-eyebrow { font-size:12px; font-weight:700; letter-spacing:.05em; margin:0 0 12px; }
.ob-sidebar .ob-eyebrow { color:var(--ob-mint); }
.ob-sidebar h2 { font-size:22px; line-height:1.6; margin:0 0 8px; color:#fff; }
.ob-sidebar p { color:#dbeafe; font-size:13px; line-height:1.9; }
.ob-steps { list-style:none; margin:28px 0; padding:0; display:grid; gap:6px; }
.ob-step { width:100%; display:flex; align-items:center; text-align:start; gap:12px; padding:12px 8px; border:0; background:transparent; color:#dbeafe; border-radius:10px; font:inherit; font-size:13px; }
.ob-step:not(:disabled) { cursor:pointer; }
.ob-step[aria-current=step] { background:#ffffff16; color:#fff; }
.ob-step:disabled { opacity:.55; }
.ob-step-number { display:grid; place-items:center; flex-shrink:0; width:30px; height:30px; border:1px solid #ffffff45; border-radius:50%; font-size:12px; }
.ob-step-number svg { width:16px; height:16px; }
.ob-step.done .ob-step-number { color:var(--ob-green); background:var(--ob-mint); border-color:var(--ob-mint); }
.ob-step small { display:block; color:#bfdbfe; font-size:11px; }
.ob-save { padding-top:18px; border-top:1px solid #ffffff35; font-size:12px; color:#dbeafe; display:flex; align-items:center; gap:8px; }
.ob-content { min-width:0; padding-block:12px; max-width:790px; }
.ob-content h1 { font-size:clamp(27px,3vw,38px); font-weight:700; line-height:1.5; margin:8px 0 12px; letter-spacing:-.025em; }
.ob-lead { color:var(--ob-muted); font-size:15px; line-height:1.95; margin-bottom:28px; max-width:660px; }
.ob-progress { display:flex; justify-content:space-between; gap:16px; color:var(--ob-muted); font-size:12px; }
.ob-progress-track { height:4px; background:var(--ob-line); border-radius:4px; overflow:hidden; margin:12px 0 30px; }
.ob-progress-track i { display:block; height:100%; background:var(--ob-green); transition:width .3s; }
.ob-content .field { margin-bottom:18px; }
.ob-content label { font-size:13px; font-weight:600; }
.ob-content input:not([type=checkbox]), .ob-content select { min-height:46px; background:#fff; }
.ob-grid { display:grid; grid-template-columns:1fr 1fr; gap:0 20px; }
.ob-note { display:flex; align-items:flex-start; gap:12px; background:#eff6ff; border-inline-start:3px solid #2563eb; padding:16px 18px; margin:20px 0; border-radius:0 8px 8px 0; font-size:13px; line-height:1.9; }
[dir=rtl] .ob-note { border-radius:8px 0 0 8px; }
.ob-note svg { flex-shrink:0; width:20px; margin-top:4px; }
.ob-workflow { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin:24px 0; }
.ob-workflow article { border-top:2px solid var(--ob-green); padding:18px 4px; }
.ob-workflow article span { color:var(--ob-muted); font-size:12px; }
.ob-workflow h3 { font-size:16px; margin:10px 0; }
.ob-workflow p { font-size:13px; line-height:1.9; color:var(--ob-muted); }
.ob-actions { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px; margin-top:30px; padding-top:24px; border-top:1px solid var(--ob-line); }
.ob-actions .btn { min-height:44px; }
.ob-actions .primary { background:var(--ob-green); color:#fff; border-color:var(--ob-green); }
.ob-actions-group { display:flex; gap:8px; flex-wrap:wrap; }
.ob-error { padding:14px 16px; background:#fff0ed; color:#9c3528; border-radius:8px; font-size:13px; line-height:1.8; }
.ob-error:empty { display:none; }
.ob-label { font-size:11px; background:#dbeafe; color:#1e3a8a; padding:4px 8px; border-radius:5px; }
.ob-section { padding:20px 0; border-bottom:1px solid var(--ob-line); }
.ob-section:first-child { padding-top:0; }
.ob-section h3 { font-size:15px; margin:0 0 10px; }
.ob-section p { color:var(--ob-muted); font-size:13px; line-height:1.9; }
.ob-chip-list { display:flex; gap:8px; flex-wrap:wrap; margin:12px 0; }
.ob-chip { display:inline-block; border:1px solid var(--ob-line); background:#fff; padding:6px 10px; border-radius:6px; font-size:12px; }
.ob-review { margin:0; display:grid; grid-template-columns:minmax(120px,1fr) 2fr; font-size:14px; line-height:1.8; }
.ob-review dt,.ob-review dd { margin:0; padding:12px 0; border-bottom:1px solid var(--ob-line); overflow-wrap:anywhere; }
.ob-review dt { color:var(--ob-muted); }
.ob-choice { display:flex; gap:10px; align-items:center; padding:16px; background:#fff; border:1px solid var(--ob-line); border-radius:10px; margin:18px 0; line-height:1.8; }
.ob-choice input { width:18px; height:18px; flex-shrink:0; accent-color:var(--ob-green); }
.ob-guide-card { display:flex; gap:14px; padding:20px 0; border-bottom:1px solid var(--ob-line); }
.ob-guide-card > svg { width:24px; flex-shrink:0; margin-top:4px; color:var(--ob-green); }
.ob-guide-card h3 { font-size:16px; margin:0 0 8px; }
.ob-guide-card p { color:var(--ob-muted); font-size:13px; line-height:1.9; margin:0; }
.ob-guide-card small { display:block; color:var(--ob-muted); margin-top:8px; }
.ob-return { background:#eff6ff; border:1px solid var(--ob-line); padding:14px 20px; margin-bottom:20px; border-radius:10px; display:flex; justify-content:space-between; align-items:center; gap:12px; font-size:13px; }
.onboarding :focus-visible { outline:3px solid #2563eb; outline-offset:4px; }
.ob-content-enter { animation:ob-enter .22s ease-out; }
@keyframes ob-enter { from { opacity:0; transform:translateY(6px); } to { opacity:1; transform:translateY(0); } }
@media(max-width:980px) { .ob-layout { grid-template-columns:260px minmax(0,1fr); gap:28px; padding:28px 24px; } .ob-sidebar { padding:22px; } }
@media(max-width:720px) { .ob-header { min-height:68px; padding:12px 16px; } .ob-header .brand small { display:none; } .ob-layout { display:block; padding:18px 16px; } .ob-sidebar { padding:18px; border-radius:14px; } .ob-sidebar h2 { font-size:18px; } .ob-sidebar > p, .ob-save { display:none; } .ob-steps { grid-template-columns:repeat(6,1fr); gap:4px; margin:16px 0 0; } .ob-step { padding:4px; justify-content:center; } .ob-step .ob-step-text { display:none; } .ob-content { padding-block:24px; } .ob-grid { grid-template-columns:1fr; } .ob-workflow { grid-template-columns:1fr; gap:0; } .ob-workflow article { padding:12px 0; } .ob-workflow h3 { margin:4px 0; } .ob-progress-track { margin-bottom:20px; } .ob-actions { align-items:stretch; } .ob-actions-group { flex:1; justify-content:flex-end; } .ob-return { align-items:flex-start; flex-direction:column; } }
@media(prefers-reduced-motion:reduce) { .ob-content-enter { animation:none; } .ob-progress-track i { transition:none; } }