/* wm-onboarding.css — first-run wizard (warm reskin). Overlays the app-shell.
   Visual spec = dev-onboarding-preview.html. Self-contained vars on .onboarding. */
.onboarding{--parch:#F1EADB;--cream:#F7F1E3;--ink:#2C2A26;--ink2:#6B6557;--ink3:#A39C8A;--gold:#B08A45;--sage:#3C6B54;--line:rgba(60,55,40,.12);position:absolute;inset:0;z-index:200;display:none;flex-direction:column;background:var(--parch);overflow:hidden}
.onboarding.active{display:flex}
.ob-slides{display:flex;flex:1;width:500%;transition:transform .42s cubic-bezier(.4,0,.2,1);min-height:0}
.ob-slide{width:20%;flex-shrink:0;display:flex;flex-direction:column;align-items:center;text-align:center;padding:36px 26px 16px;overflow-y:auto;position:relative;background-color:var(--parch);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='58' height='58'%3E%3Cg fill='none' stroke='%23B08A45' stroke-opacity='0.08' stroke-width='1'%3E%3Crect x='9' y='9' width='40' height='40'/%3E%3Crect x='9' y='9' width='40' height='40' transform='rotate(45 29 29)'/%3E%3C/g%3E%3C/svg%3E");background-size:58px 58px}
.ob-glow{position:absolute;width:300px;height:300px;border-radius:50%;background:radial-gradient(circle,rgba(176,138,69,.16) 0%,transparent 70%);top:30px;left:50%;transform:translateX(-50%);pointer-events:none}
.ob-arabic{font-family:'Amiri',serif;font-size: 24px;direction:rtl;color:var(--gold);line-height:1.95;margin:16px 0 14px;position:relative}
.ob-quote{font-size: 13px;color:var(--ink2);line-height:1.7;max-width:300px}
.ob-source{font-size:11px;color:var(--gold);font-weight:600;margin-top:8px}
.ob-desc{font-size: 13px;color:var(--ink2);line-height:1.8;margin-top:18px;max-width:300px}
.ob-desc strong{color:var(--ink);font-weight:700}
.ob-backup-hint{font-size:10.5px;color:var(--ink3);background:var(--cream);border:1px solid var(--line);border-radius:12px;padding:9px 12px;margin-top:16px;line-height:1.5;max-width:300px}
.ob-waqaf{font-family:'Amiri',serif;font-size:60px;color:var(--gold);margin-top:auto;line-height:1;opacity:.92}
.ob-brand{font-size:9.5px;font-weight:800;letter-spacing:2px;color:var(--ink3);margin-top:10px}
.ob-btn-mulakan,.ob-btn{margin-top:16px;width:100%;max-width:300px;border:none;border-radius:16px;padding:15px;font-family:'DM Sans',sans-serif;font-size:14px;font-weight:700;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:transform .12s}
.ob-btn-mulakan,.ob-btn-primary{background:var(--sage);color:#2C2A26}
.ob-btn-mulakan:active,.ob-btn-primary:active{transform:scale(.98)}
.ob-btn-ghost{background:transparent;color:var(--ink2);border:1px solid var(--line);margin-top:9px;font-weight:600}
.ob-restore-link{margin-top:12px;background:none;border:none;color:var(--ink3);font-size:11.5px;font-family:'DM Sans';cursor:pointer}
.ob-step-lbl{font-size:10px;font-weight:800;letter-spacing:1.2px;text-transform:uppercase;color:var(--gold);margin-top:6px}
.ob-title{font-family:'Cormorant Garamond',serif;font-size:34px;font-weight:600;color:var(--ink);margin-top:6px;line-height:1.05}
.ob-sub{font-size: 13px;color:var(--ink2);margin-top:6px;max-width:280px}
.ob-feats{width:100%;max-width:300px;margin-top:20px;background:var(--cream);border:1px solid var(--line);border-radius:16px;padding:2px 14px}
.ob-feat{display:flex;gap:11px;align-items:flex-start;text-align:left;padding:11px 0;border-bottom:1px solid var(--line)}
.ob-feat:last-child{border-bottom:none}
.ob-feat-icon{font-size:16px;flex-shrink:0;margin-top:1px}
.ob-feat-text{font-size: 13px;color:var(--ink2);line-height:1.5}
.ob-feat-text strong{color:var(--ink);font-weight:700}
.ob-gps-visual{position:relative;width:96px;height:96px;display:flex;align-items:center;justify-content:center;margin-top:26px}
.ob-gps-ring{position:absolute;border:2px solid var(--sage);border-radius:50%;opacity:0;animation:obpulse 2s infinite}
.ob-gps-ring:nth-child(1){width:40px;height:40px;animation-delay:0s}
.ob-gps-ring:nth-child(2){width:65px;height:65px;animation-delay:.5s}
.ob-gps-ring:nth-child(3){width:90px;height:90px;animation-delay:1s}
.ob-gps-center{font-size:28px;position:relative;z-index:1}
.ob-arwah-visual{font-size:40px;margin-top:26px}
.ob-gender-btn{flex:1;padding:10px;border:1px solid var(--line);border-radius:12px;background:var(--cream);color:var(--ink2);font-family:'DM Sans';font-size:13px;font-weight:600;cursor:pointer}
.ob-gender-btn.active{background:var(--sage);color:#2C2A26;border-color:var(--sage)}
.ob-tag{background:var(--sage);color:#2C2A26;font-size:11px;padding:5px 11px;border-radius:10px;font-family:'DM Sans'}
.ob-dots{display:flex;gap:6px;justify-content:center;padding:14px 0 18px}
.ob-dot{width:7px;height:7px;border-radius:50%;background:var(--line);transition:.3s}
.ob-dot.active{background:var(--sage);width:18px;border-radius:4px}
.ob-done{position:absolute;inset:0;background:var(--parch);display:none;flex-direction:column;align-items:center;justify-content:center;gap:14px;text-align:center;padding:30px;z-index:5}
.ob-done.show{display:flex}
@keyframes obpulse{0%{opacity:.55;transform:scale(.7)}