.onboarding {
  position:fixed; z-index:8500; inset:0; width:min(100%,440px); margin:auto;
  pointer-events:auto; color:var(--ink); font-family:'Rubik',system-ui,sans-serif;
}
.onboarding[hidden] { display:none; }
.onboarding-shield { position:absolute; inset:0; background:rgba(35,31,49,.13); backdrop-filter:blur(.35px); }
.onboarding.welcome .onboarding-shield { background:var(--bg); backdrop-filter:none; }
.onboarding-card {
  position:absolute; inset:auto 16px calc(98px + env(safe-area-inset-bottom));
  padding:18px; border:1px solid rgba(41,38,63,.08); border-radius:23px;
  background:#fff; box-shadow:0 18px 48px rgba(41,38,63,.2); text-align:center;
}
.onboarding-card.welcome-card {
  inset:calc(28px + env(safe-area-inset-top)) 18px calc(24px + env(safe-area-inset-bottom));
  display:flex; flex-direction:column; justify-content:center; padding:25px 22px;
  background:var(--bg); box-shadow:none; border:0;
}
.onboarding-skip { position:absolute; z-index:2; top:calc(17px + env(safe-area-inset-top)); inset-inline-end:17px;
  padding:8px 10px; border:0; background:transparent; color:#77727f; font-weight:700; font-size:12px; cursor:pointer; }
.onboarding-hero { position:relative; width:218px; height:245px; display:grid; place-items:end center; margin:0 auto 12px; }
.onboarding-hero[hidden], .onboarding-yogi[hidden] { display:none; }
.onboarding-hero::before { content:""; position:absolute; bottom:8px; width:204px; height:204px; border-radius:50%; background:linear-gradient(145deg,#e8e2f5,#f2ead9); }
.onboarding-hero img { position:relative; z-index:1; width:156px; height:235px; object-fit:contain; filter:drop-shadow(0 12px 13px rgba(45,39,65,.16)); }
.onboarding-yogi { width:58px; height:73px; object-fit:contain; margin:-50px auto 3px; filter:drop-shadow(0 6px 8px rgba(45,39,65,.13)); }
.onboarding-kicker { display:inline-flex; align-self:center; padding:7px 11px; border-radius:999px; background:#ece8f6; color:#6555ad; font-size:10px; font-weight:800; }
.onboarding-title { margin:11px 0 7px; font-size:24px; line-height:1.15; letter-spacing:-.6px; }
.onboarding-title:focus { outline:none; }
.welcome-card .onboarding-title { font-size:29px; }
.onboarding-copy { margin:0 auto; max-width:330px; color:#74707d; font-size:13px; line-height:1.55; }
.welcome-card .onboarding-copy { font-size:14px; line-height:1.65; }
.onboarding-progress { display:flex; justify-content:center; gap:5px; margin:13px 0 12px; direction:ltr; }
.onboarding-dot { width:6px; height:6px; border-radius:999px; background:#d7d3de; }
.onboarding-dot.active { width:21px; background:#6555ad; }
.onboarding-actions { display:grid; grid-template-columns:1fr auto; gap:8px; margin-top:13px; }
.onboarding-next { min-height:47px; border:0; border-radius:15px; background:#6555ad; color:#fff; font-weight:800; font-size:14px; cursor:pointer; box-shadow:0 8px 18px rgba(101,85,173,.24); }
.onboarding-back { min-width:65px; min-height:47px; border:1px solid rgba(41,38,63,.1); border-radius:15px; background:#fff; color:#6555ad; font-weight:700; font-size:12px; cursor:pointer; }
.onboarding-back[hidden] { display:none; }
.onboarding-listen { display:inline-flex; align-items:center; justify-content:center; gap:7px; margin-top:12px; padding:8px 11px; border:1px solid rgba(41,38,63,.09); border-radius:12px; background:#fff; color:#6555ad; font-weight:700; font-size:11px; cursor:pointer; }
.onboarding-listen.playing { background:#6555ad; color:#fff; }
.onboarding-listen:disabled { opacity:.45; }
.onboarding-listen[hidden] { display:none; }
.app.onboarding-running .screen:not(.hidden) { animation:onboarding-screen-reveal .28s ease both; }
.app.onboarding-running .main-tabs { z-index:8600; pointer-events:none; box-shadow:0 -9px 25px rgba(47,39,74,.12); }
.app.onboarding-running .main-tab { opacity:.42; transition:opacity .2s ease,transform .2s ease,background .2s ease; }
.app.onboarding-running .main-tab.onboarding-focus {
  opacity:1; color:#fff; background:#6555ad; border-radius:17px;
  transform:translateY(-7px) scale(1.06); box-shadow:0 0 0 4px #fff,0 0 0 7px rgba(101,85,173,.3),0 9px 22px rgba(61,49,112,.3);
}
.app.onboarding-running .main-tab.onboarding-focus::after {
  content:"כאן"; position:absolute; top:-20px; width:auto; height:auto; padding:2px 7px;
  border-radius:99px; background:#6555ad; color:#fff; font-size:9px; font-weight:900;
  box-shadow:0 3px 8px rgba(61,49,112,.24);
}
.onboarding-quiz-preview {
  margin:12px 0 4px; padding:10px; border:1px solid rgba(101,85,173,.13); border-radius:18px;
  background:linear-gradient(180deg,#faf8ff,#f4f0ff); text-align:start;
}
.onboarding-quiz-preview[hidden] { display:none; }
.onboarding-quiz-topline { display:flex; align-items:center; gap:5px; color:#777184; font-size:10px; font-weight:700; }
.onboarding-quiz-topline img { width:34px; height:40px; object-fit:contain; margin-inline-end:3px; }
.onboarding-quiz-topline span { margin-inline-end:auto; }
.onboarding-quiz-topline i { width:14px; height:4px; border-radius:99px; background:#ddd8ea; }
.onboarding-quiz-topline i:first-of-type { background:#6555ad; }
.onboarding-quiz-preview > strong { display:block; margin:5px 0 8px; text-align:center; font-size:15px; }
.onboarding-quiz-options { display:grid; gap:5px; }
.onboarding-quiz-options span { display:flex; align-items:center; gap:7px; min-height:31px; padding:5px 8px; border-radius:10px; background:#fff; font-size:11px; font-weight:700; }
.onboarding-quiz-options b { font-size:17px; }
.quiz-preview-card .onboarding-title { margin-top:8px; }
.quiz-preview-card .onboarding-progress { margin-block:8px; }
.quiz-preview-card .onboarding-actions { margin-top:8px; }
@keyframes onboarding-screen-reveal { from{opacity:.72;transform:translateY(3px)} to{opacity:1;transform:none} }
@media (max-height:720px) {
  .onboarding-card { inset-inline:12px; padding:14px; }
  .onboarding-card.welcome-card { padding-top:48px; }
  .onboarding-hero { width:160px; height:178px; margin-bottom:4px; }
  .onboarding-hero::before { width:148px; height:148px; }
  .onboarding-hero img { width:112px; height:172px; }
  .welcome-card .onboarding-title { font-size:25px; }
  .welcome-card .onboarding-copy { font-size:12.5px; }
  .quiz-preview-card .onboarding-copy { font-size:11.5px; line-height:1.4; }
  .onboarding-quiz-preview { margin-top:7px; padding:7px; }
  .onboarding-quiz-options span { min-height:27px; padding-block:3px; }
}
@media (prefers-reduced-motion:reduce) { .onboarding * { animation:none!important; transition:none!important; } }