.hsk-onboarding {
    position: fixed;
    inset: 0;
    z-index: 2147482500;
    display: grid;
    place-items: center;
    padding: max(18px, env(safe-area-inset-top)) 16px max(18px, env(safe-area-inset-bottom));
    overflow: auto;
    color: #f7fbff;
    background:
        radial-gradient(circle at 78% 12%, rgba(20, 213, 255, .18), transparent 32%),
        radial-gradient(circle at 12% 85%, rgba(128, 43, 255, .2), transparent 34%),
        #06152f;
    font-family: Inter, system-ui, sans-serif;
}
.hsk-onboarding[hidden] { display: none !important; }
.hsk-onboarding-card {
    width: min(100%, 470px);
    min-height: min(690px, calc(100dvh - 36px));
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    padding: 24px;
    border: 1px solid rgba(43, 190, 255, .42);
    border-radius: 30px;
    background: linear-gradient(160deg, rgba(12, 38, 82, .98), rgba(7, 18, 49, .98));
    box-shadow: 0 28px 80px rgba(0, 0, 0, .46), inset 0 1px rgba(255,255,255,.08);
}
.hsk-onboarding-brand { display:flex; align-items:center; gap:12px; margin-bottom:22px; }
.hsk-onboarding-logo { display:grid; place-items:center; width:44px; height:44px; border-radius:15px; background:linear-gradient(135deg,#13ddeb,#2771ff 55%,#b238ff); box-shadow:0 0 28px rgba(24,197,255,.35); font-size:25px; font-weight:900; }
.hsk-onboarding-brand b { display:block; font-size:19px; letter-spacing:.01em; }
.hsk-onboarding-brand small { display:block; margin-top:2px; color:#8daed0; font-size:11px; }
.hsk-onboarding-progress { display:flex; gap:7px; margin-left:auto; }
.hsk-onboarding-progress i { width:7px; height:7px; border-radius:20px; background:#29476b; transition:.2s ease; }
.hsk-onboarding-progress i.active { width:22px; background:linear-gradient(90deg,#22e5e9,#3c89ff); box-shadow:0 0 12px rgba(34,229,233,.55); }
.hsk-onboarding-step { flex:1; display:flex; flex-direction:column; animation:hskOnboardingIn .24s ease both; }
.hsk-onboarding-kicker { color:#43e5f1; font-size:11px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; }
.hsk-onboarding-step h1 { margin:9px 0 8px; font-size:clamp(26px, 8vw, 36px); line-height:1.08; }
.hsk-onboarding-step > p { margin:0 0 22px; color:#9cb5d2; font-size:14px; line-height:1.5; }
.hsk-onboarding-options { display:grid; gap:11px; }
.hsk-onboarding-field { display:grid; gap:7px; color:#9fb8d7; font-size:12px; font-weight:700; }
.hsk-onboarding-field input { width:100%; min-height:48px; box-sizing:border-box; border:1px solid #28588d; border-radius:14px; background:#081f43; color:#fff; padding:0 14px; font:inherit; color-scheme:dark; }
.hsk-onboarding-check { display:flex; align-items:center; gap:9px; color:#dcecff; font-size:12px; }
.hsk-onboarding-check input { width:18px; height:18px; accent-color:#28dbe8; }
.hsk-onboarding-options > small { color:#7899bc; line-height:1.4; }
.hsk-onboarding-choice {
    width:100%; min-height:72px; display:flex; align-items:center; gap:14px; padding:13px 15px;
    border:1px solid #245588; border-radius:18px; color:#eef9ff; background:rgba(8,33,70,.8); text-align:left; cursor:pointer;
    transition:transform .16s ease, border-color .16s ease, background .16s ease;
}
.hsk-onboarding-choice:active { transform:scale(.985); }
.hsk-onboarding-choice.selected { border-color:#24dce9; background:linear-gradient(110deg,rgba(10,107,179,.45),rgba(17,51,103,.78)); box-shadow:0 0 0 2px rgba(36,220,233,.1),0 10px 24px rgba(0,0,0,.18); }
.hsk-onboarding-choice > i { width:44px; height:44px; flex:0 0 44px; display:grid; place-items:center; border-radius:14px; background:#102b57; font-style:normal; font-size:23px; }
.hsk-onboarding-choice span { min-width:0; }
.hsk-onboarding-choice b, .hsk-onboarding-choice small { display:block; }
.hsk-onboarding-choice b { font-size:15px; }
.hsk-onboarding-choice small { margin-top:4px; color:#93b0d0; font-size:11px; line-height:1.35; }
.hsk-onboarding-choice em { margin-left:auto; color:#48e9f4; font-style:normal; font-size:21px; opacity:0; }
.hsk-onboarding-choice.selected em { opacity:1; }
.hsk-onboarding-layouts { grid-template-columns:1fr 1fr; }
.hsk-onboarding-layout { min-height:205px; display:block; padding:10px; }
.hsk-onboarding-layout img { width:100%; height:124px; display:block; object-fit:cover; border-radius:13px; margin-bottom:10px; }
.hsk-onboarding-layout b, .hsk-onboarding-layout small { padding:0 4px; }
.hsk-onboarding-actions { display:flex; gap:10px; margin-top:auto; padding-top:22px; }
.hsk-onboarding-button { min-height:51px; flex:1; border:0; border-radius:16px; color:white; font-weight:800; font-size:14px; cursor:pointer; }
.hsk-onboarding-primary { background:linear-gradient(90deg,#8c29f4,#1dcce2); box-shadow:0 10px 28px rgba(65,105,255,.3); }
.hsk-onboarding-secondary { border:1px solid #28588d; background:#0b2853; color:#dcecff; }
.hsk-onboarding-back { flex:0 0 51px; font-size:22px; }
.hsk-onboarding-hsk-system, .hsk-onboarding-levels { display:grid; gap:9px; }
.hsk-onboarding-hsk-system { grid-template-columns:1fr 1fr; margin:4px 0 18px; }
.hsk-onboarding-levels { grid-template-columns:repeat(3,1fr); }
.hsk-onboarding-pill { min-height:50px; border:1px solid #28588d; border-radius:15px; background:#0b2853; color:#dcecff; font-weight:800; cursor:pointer; }
.hsk-onboarding-pill.selected { border-color:#2de2ee; color:white; background:linear-gradient(135deg,#0e82dd,#3154db); box-shadow:0 0 18px rgba(38,193,255,.25); }
.hsk-onboarding-account-benefits { display:grid; gap:10px; margin-top:5px; }
.hsk-onboarding-benefit { display:flex; gap:12px; align-items:center; padding:13px; border-radius:16px; background:rgba(10,38,78,.74); border:1px solid rgba(51,102,153,.5); }
.hsk-onboarding-benefit i { display:grid; place-items:center; width:38px; height:38px; border-radius:12px; background:#12396c; font-style:normal; }
.hsk-onboarding-benefit b, .hsk-onboarding-benefit small { display:block; }
.hsk-onboarding-benefit small { margin-top:3px; color:#92aecb; }
.hsk-onboarding-note { margin:12px 0 0; color:#6f90b5; text-align:center; font-size:10px; }
body.hsk-onboarding-open { overflow:hidden !important; }
@keyframes hskOnboardingIn { from { opacity:0; transform:translateY(8px); } }
@media (max-width:520px) {
    .hsk-onboarding { padding:0; place-items:stretch; }
    .hsk-onboarding-card { width:100%; min-height:100dvh; border:0; border-radius:0; padding:22px 18px max(20px,env(safe-area-inset-bottom)); }
    .hsk-onboarding-layout { min-height:184px; }
    .hsk-onboarding-layout img { height:105px; }
}
@media (max-height:680px) {
    .hsk-onboarding-card { min-height:100%; }
    .hsk-onboarding-brand { margin-bottom:14px; }
    .hsk-onboarding-step h1 { font-size:26px; }
    .hsk-onboarding-step > p { margin-bottom:14px; }
    .hsk-onboarding-layout { min-height:160px; }
    .hsk-onboarding-layout img { height:82px; }
}