/* ============================================================
   MIRRIM · Онбординг — общее ядро (направление-агностично)
   Источник: me/franchise/onboarding/onboarding.css (эталон)
   Ambient bg + glass + base reset. Подключать ДО ob-wizard.css.
   ============================================================ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --ink:#2A2A2A; --ink-2:#5A5567; --ink-3:#8B8698; --ink-4:#ABA6B8;
  --purple-700:#5B21B6; --purple-500:#7C3AED; --purple-400:#8B5CF6; --purple-300:#A78BFA; --purple-200:#C9B8FF; --purple-100:#E7DEFF;
  --lime:#C6F432; --lime-deep:#9CC400;
  --success:#5DD33C; --warning:#F59E0B; --error:#EF4444; --info:#2563EB;
  --glass:rgba(255,255,255,.66);
  --glass-strong:rgba(255,255,255,.82);
  --glass-soft:rgba(255,255,255,.44);
  --glass-line:rgba(255,255,255,.85);
  --glass-line-bot:rgba(124,58,237,.08);
  --blur:22px;
  --shadow:0 8px 32px rgba(46,24,92,.12);
  --shadow-sm:0 4px 18px rgba(46,24,92,.08);
  --shadow-pop:0 24px 60px -18px rgba(91,33,182,.4);
  --r-sm:14px; --r-md:20px; --r-lg:24px; --r-xl:28px;
  --font:"Manrope",system-ui,-apple-system,sans-serif;
}
html,body{height:100%}
body{font-family:var(--font);color:var(--ink);-webkit-font-smoothing:antialiased;background:#EEE9F7;min-height:100vh}
a{text-decoration:none;color:inherit}
button{font-family:inherit;cursor:pointer;border:0;background:none;color:inherit}
input,textarea,select{font-family:inherit}
img{display:block;max-width:100%}

/* ambient background */
.bg{position:fixed;inset:0;z-index:0;overflow:hidden;background:linear-gradient(160deg,#F3EFFB 0%,#ECE6F8 50%,#F0F4E6 100%)}
.blob{position:absolute;border-radius:50%;filter:blur(70px);opacity:.85}
.blob.b1{width:560px;height:560px;background:radial-gradient(circle,#A78BFA,transparent 68%);top:-160px;left:-120px;animation:obf1 22s ease-in-out infinite}
.blob.b2{width:520px;height:520px;background:radial-gradient(circle,#C9B8FF,transparent 70%);top:6%;right:-140px;animation:obf2 26s ease-in-out infinite}
.blob.b3{width:600px;height:600px;background:radial-gradient(circle,#E7DEFF,transparent 72%);bottom:-220px;left:34%;animation:obf1 30s ease-in-out infinite}
.blob.b4{width:360px;height:360px;background:radial-gradient(circle,rgba(198,244,50,.5),transparent 66%);bottom:-40px;right:12%;animation:obf2 24s ease-in-out infinite}
@keyframes obf1{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(40px,-30px) scale(1.07)}}
@keyframes obf2{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-46px,34px) scale(1.05)}}
.grain{position:fixed;inset:0;z-index:1;pointer-events:none;opacity:.5;mix-blend-mode:soft-light;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E")}

.glass{position:relative;background:var(--glass);-webkit-backdrop-filter:blur(var(--blur)) saturate(140%);backdrop-filter:blur(var(--blur)) saturate(140%);border:1px solid var(--glass-line);border-radius:var(--r-lg);box-shadow:var(--shadow),inset 0 1px 0 rgba(255,255,255,.5)}

/* ── layout ── */
.ob{position:relative;z-index:2;min-height:100vh;display:flex;flex-direction:column;max-width:920px;margin:0 auto;padding:22px 22px 120px}

/* top bar */
.ob-top{display:flex;align-items:center;gap:14px;margin-bottom:22px}
.ob-logo{display:flex;align-items:center;gap:11px}
.ob-logo img{width:42px;height:42px;border-radius:13px;box-shadow:0 10px 22px -8px rgba(124,58,237,.7)}
.ob-logo b{font:800 18px/1 var(--font)}
.ob-logo span{font:600 12px/1 var(--font);color:var(--purple-500);display:block;margin-top:4px}
.ob-exit{margin-left:auto;display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 16px;border-radius:999px;background:var(--glass-soft);border:1px solid var(--glass-line);font:700 13px/1 var(--font);color:var(--ink-2);transition:.16s}
.ob-exit:hover{background:var(--glass-strong);color:var(--purple-500)}
.ob-exit svg{width:16px;height:16px;stroke-width:2.2;fill:none;stroke:currentColor}

@media (max-width:768px){
  .ob{padding:16px 16px 130px}
}