/* VIZONDO Onboarding — scoped под .vz-onb / .vz-onb-hint. Только native www. Без внешних шрифтов/сети. */
.vz-onb, .vz-onb * { box-sizing: border-box; }
.vz-onb {
  position: fixed; inset: 0; z-index: 4000;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: calc(env(safe-area-inset-top,0px) + 16px) max(16px,env(safe-area-inset-right,0px)) calc(env(safe-area-inset-bottom,0px) + 16px) max(16px,env(safe-area-inset-left,0px));
  background: rgba(8, 14, 26, 0.72); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
}
.vz-onb[hidden] { display: none; }
.vz-onb-card {
  width: min(100%, 420px); background: var(--surface, #fff); color: var(--ink, #0f172a);
  border-radius: 26px; padding: 26px 22px 18px; box-shadow: 0 30px 80px rgba(2,6,23,.45);
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: 12px;
}
.vz-onb-ico { width: 76px; height: 76px; display: grid; place-items: center; border-radius: 22px;
  background: var(--primary-soft, #e8f0ff); color: var(--accent, #2563eb); }
.vz-onb-ico svg { width: 40px; height: 40px; }
.vz-onb-title { margin: 4px 0 0; font-size: 22px; line-height: 1.15; font-weight: 800; }
.vz-onb-text { margin: 0; font-size: 15px; line-height: 1.45; color: var(--soft, #64748b); }
.vz-onb-dots { display: flex; gap: 8px; margin: 10px 0 4px; }
.vz-onb-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--line, #cbd5e1); transition: background .2s, transform .2s; }
.vz-onb-dot.on { background: var(--accent, #2563eb); transform: scale(1.3); }
.vz-onb-actions { display: flex; flex-direction: column; gap: 10px; width: 100%; margin-top: 6px; }
.vz-onb-btn { width: 100%; min-height: 52px; border-radius: 16px; font: inherit; font-weight: 750; font-size: 16px;
  cursor: pointer; border: 1px solid var(--line, #cbd5e1); background: var(--surface, #fff); color: var(--ink, #0f172a); }
.vz-onb-btn.primary { background: var(--accent, #2563eb); color: #fff; border-color: var(--accent, #2563eb); box-shadow: 0 14px 32px rgba(37,99,235,.26); }
.vz-onb-btn.ghost { background: transparent; border-color: transparent; color: var(--soft, #64748b); min-height: 44px; }
.vz-onb-btn:focus-visible { outline: 3px solid var(--accent, #2563eb); outline-offset: 2px; }
.vz-onb-slide { display: flex; flex-direction: column; align-items: center; gap: 12px; will-change: transform, opacity; }
.vz-onb-anim { transition: transform .32s cubic-bezier(.22,.61,.36,1), opacity .28s ease; }

/* Контекстные подсказки */
.vz-onb-hint { position: fixed; z-index: 4500; max-width: min(82vw, 300px);
  background: #0f172a; color: #f8fafc; padding: 11px 13px; border-radius: 14px; font-size: 13.5px; line-height: 1.4;
  box-shadow: 0 16px 40px rgba(0,0,0,.4); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  display: flex; gap: 8px; align-items: flex-start; }
.vz-onb-hint[hidden] { display: none; }
.vz-onb-hint-x { flex: none; cursor: pointer; opacity: .8; font-weight: 700; padding: 0 2px; }
.vz-onb-hint-x:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

[dir="rtl"] .vz-onb-card { text-align: center; }

@media (prefers-reduced-motion: reduce) {
  .vz-onb, .vz-onb-anim, .vz-onb-dot { transition: none !important; }
}
@media (min-width: 760px) and (orientation: landscape) {
  .vz-onb-card { width: min(100%, 460px); }
}