/* ============================================================
   VibeAgent · онбординг: мини-квиз + подсвеченный тур
   Правится свободно. Цвета совпадают с основной темой платформы.
   ============================================================ */

:root{
  --ob-ink:#111114;
  --ob-mut:#6B6B76;
  --ob-line:rgba(17,17,20,.10);
  --ob-acc:#6200FF;
  --ob-acc-2:#C9A7FF;
  --ob-veil:rgba(8,8,11,.66);
}

/* ---------- общий слой ---------- */
.ob-layer{position:fixed;inset:0;z-index:140;display:none;pointer-events:none}
.ob-layer.on{display:block}

/* затемнение вокруг подсветки: одна коробка + огромная тень */
.ob-spot{
  position:absolute;border-radius:16px;pointer-events:none;
  box-shadow:0 0 0 9999px var(--ob-veil);
  transition:top .5s cubic-bezier(.22,1,.36,1),left .5s cubic-bezier(.22,1,.36,1),
             width .5s cubic-bezier(.22,1,.36,1),height .5s cubic-bezier(.22,1,.36,1),
             border-radius .35s ease;
  will-change:top,left,width,height;
}
.ob-spot::before{
  content:'';position:absolute;inset:-3px;border-radius:inherit;
  border:1.5px solid rgba(201,167,255,.85);
  animation:ob-pulse 2.4s ease-in-out infinite;
}
/* бегущий блик по рамке */
.ob-spot::after{
  content:'';position:absolute;inset:-3px;border-radius:inherit;padding:1.5px;
  background:conic-gradient(from var(--ob-a,0deg),transparent 0 62%,rgba(201,167,255,.95) 78%,transparent 92%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
  animation:ob-spin 3.6s linear infinite;
}
@property --ob-a{syntax:'<angle>';initial-value:0deg;inherits:false}
@keyframes ob-spin{to{--ob-a:360deg}}
@keyframes ob-pulse{0%,100%{box-shadow:0 0 0 1px rgba(255,255,255,.10) inset,0 0 26px rgba(139,61,255,.40)}
                    50%{box-shadow:0 0 0 1px rgba(255,255,255,.10) inset,0 0 44px rgba(139,61,255,.70)}}

/* клик-ловушка: перехватывает клики мимо подсветки */
.ob-catch{position:absolute;inset:0;pointer-events:auto;cursor:default}

/* подсвеченный элемент поднимается над вуалью */
.ob-target{position:relative;z-index:141!important;
  transition:transform .35s cubic-bezier(.22,1,.36,1),filter .35s ease}
/* сайдбар — свой контекст наложения: поднимаем его целиком и затемняем изнутри,
   чтобы подсвеченный пункт меню оказался поверх вуали */
.ob-raise{z-index:141!important}
.ob-raise::after{content:'';position:absolute;inset:0;background:rgba(8,8,11,.74);z-index:0;pointer-events:none}
.ob-target.ob-lift{transform:translateY(-1px) scale(1.015);filter:drop-shadow(0 10px 26px rgba(98,0,255,.22))}
/* пункт меню внутри сайдбара: делаем его явно активным, а не блёклым */
.side .ob-target{background:var(--tint)!important;color:var(--indigo-dark)!important;font-weight:600!important;
  box-shadow:0 0 0 1px rgba(98,0,255,.18),0 8px 22px rgba(98,0,255,.18)}
.side .ob-target svg{stroke:var(--indigo)!important}
.side .ob-target .n{color:var(--indigo-dark)!important}

/* ---------- карточка-подсказка: тёмное стекло ---------- */
.ob-tip{
  position:absolute;width:min(370px,calc(100vw - 32px));pointer-events:auto;
  background:linear-gradient(168deg,#17171C 0%,#0C0C10 62%,#100D18 100%);
  border:1px solid rgba(255,255,255,.14);border-radius:18px;padding:20px 20px 16px;
  box-shadow:0 30px 70px rgba(0,0,0,.55),0 0 0 1px rgba(255,255,255,.05) inset,
             0 0 40px rgba(98,0,255,.18);
  backdrop-filter:blur(10px);
  opacity:0;transform:translateY(8px) scale(.98);
  transition:opacity .28s ease,transform .34s cubic-bezier(.22,1,.36,1),
             top .5s cubic-bezier(.22,1,.36,1),left .5s cubic-bezier(.22,1,.36,1);
}
.ob-tip.in{opacity:1;transform:translateY(0) scale(1)}
.ob-tip__ar{position:absolute;width:12px;height:12px;background:#15151A;
  border:1px solid rgba(255,255,255,.14);border-right:0;border-bottom:0}
.ob-tip__lb{font-family:'JetBrains Mono',monospace;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ob-acc-2);font-weight:500;margin-bottom:9px}
.ob-tip__t{font-family:'Jura',system-ui,sans-serif;font-size:20px;font-weight:600;letter-spacing:-.022em;
  color:#fff;margin:0 0 8px;line-height:1.25}
.ob-tip__x{font-size:14.5px;line-height:1.55;color:rgba(255,255,255,.70);margin:0 0 16px}
.ob-tip__ft{display:flex;align-items:center;gap:8px}
.ob-tip__dots{display:flex;gap:5px;flex:1;align-items:center}
.ob-tip__dots i{width:5px;height:5px;border-radius:50%;background:rgba(255,255,255,.22);transition:all .3s}
.ob-tip__dots i.on{width:18px;border-radius:3px;background:linear-gradient(90deg,var(--ob-acc-2),#fff)}

.ob-b{border:0;cursor:pointer;font:inherit;font-size:13.5px;font-weight:600;border-radius:11px;padding:9px 16px;
  transition:transform .15s ease,box-shadow .2s ease,background .2s ease,color .2s ease}
.ob-b--go{
  background:linear-gradient(154deg,#FFF 0%,#F7F9FC 18%,#E7EBF2 38%,#FFF 55%,#EAEEF4 72%,#DDE2EB 100%);
  color:#111114;text-shadow:0 1px 0 rgba(255,255,255,.9);
  box-shadow:0 1px 0 rgba(255,255,255,.9) inset,0 6px 18px rgba(0,0,0,.35)}
.ob-b--go:hover{transform:translateY(-1px);box-shadow:0 1px 0 rgba(255,255,255,.9) inset,0 10px 26px rgba(201,167,255,.35)}
.ob-b--gh{background:transparent;color:rgba(255,255,255,.55)}
.ob-b--gh:hover{color:#fff;background:rgba(255,255,255,.08)}

.ob-skip{position:fixed;top:18px;right:20px;z-index:143;pointer-events:auto;
  background:rgba(20,20,26,.72);color:rgba(255,255,255,.82);border:1px solid rgba(255,255,255,.16);
  border-radius:999px;padding:8px 16px;font-size:13px;font-weight:600;cursor:pointer;
  backdrop-filter:blur(10px);box-shadow:0 8px 24px rgba(0,0,0,.35);opacity:0;
  transition:opacity .3s,color .2s,background .2s;display:none}
.ob-skip.in{display:block;opacity:1}
.ob-skip:hover{background:rgba(30,30,38,.9);color:#fff}

/* ---------- мини-квиз ---------- */
.ob-quiz{position:fixed;inset:0;z-index:150;display:none;align-items:center;justify-content:center;padding:24px;
  background:rgba(8,8,11,.72);backdrop-filter:blur(7px)}
.ob-quiz.on{display:flex;animation:ob-fade .3s ease}
@keyframes ob-fade{from{opacity:0}to{opacity:1}}
.ob-quiz__box{width:min(560px,100%);background:linear-gradient(180deg,#fff,#FCFAFF);
  border:1px solid rgba(255,255,255,.6);border-radius:24px;padding:30px 28px 22px;
  box-shadow:0 40px 120px rgba(0,0,0,.5);animation:ob-up .4s cubic-bezier(.22,1,.36,1);position:relative;overflow:hidden}
@keyframes ob-up{from{opacity:0;transform:translateY(14px) scale(.97)}to{opacity:1;transform:none}}
.ob-quiz__box::before{content:'';position:absolute;top:-40%;left:-20%;width:70%;height:180%;
  background:radial-gradient(closest-side,rgba(201,167,255,.28),transparent);pointer-events:none}
.ob-quiz__lb{position:relative;font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ob-acc);font-weight:600;margin-bottom:10px}
.ob-quiz__q{position:relative;font-family:'Jura',system-ui,sans-serif;font-size:24px;font-weight:700;letter-spacing:-.015em;
  color:var(--ob-ink);margin:0 0 18px;line-height:1.25}
.ob-opts{position:relative;display:flex;flex-direction:column;gap:9px;margin-bottom:20px}
.ob-opt{text-align:left;background:#fff;border:1px solid var(--ob-line);border-radius:14px;padding:13px 15px;
  font:inherit;font-size:14.5px;color:var(--ob-ink);cursor:pointer;position:relative;overflow:hidden;
  transition:transform .18s cubic-bezier(.22,1,.36,1),border-color .2s,box-shadow .25s,background .2s}
.ob-opt:hover{transform:translateX(3px);border-color:rgba(98,0,255,.45);box-shadow:0 8px 22px rgba(98,0,255,.12)}
.ob-opt::after{content:'';position:absolute;inset:0;background:linear-gradient(105deg,transparent 30%,rgba(201,167,255,.35) 50%,transparent 70%);
  transform:translateX(-120%);transition:transform .6s ease}
.ob-opt:hover::after{transform:translateX(120%)}
.ob-opt.sel{border-color:var(--ob-acc);background:#F7F2FF;box-shadow:0 8px 22px rgba(98,0,255,.16)}
.ob-quiz__ft{position:relative;display:flex;align-items:center;gap:10px}
.ob-quiz__pr{flex:1;display:flex;gap:5px}
.ob-quiz__pr i{height:4px;flex:1;border-radius:2px;background:rgba(17,17,20,.10)}
.ob-quiz__pr i.on{background:linear-gradient(90deg,var(--ob-acc),var(--ob-acc-2))}

@media(max-width:760px){
  .ob-tip{width:calc(100vw - 28px)}
  .ob-quiz__box{padding:24px 20px 18px}
  .ob-quiz__q{font-size:20px}
  .ob-skip{top:12px;right:12px;padding:7px 13px;font-size:12.5px}
}
@media(prefers-reduced-motion:reduce){
  .ob-spot,.ob-tip{transition:none}
  .ob-spot::after,.ob-spot::before{animation:none}
}

/* ---------- финал тура: «Вперёд к обучению» ---------- */
.ob-fin{position:absolute;inset:0;display:grid;place-items:center;padding:16px;pointer-events:none;visibility:hidden}
.ob-fin.on{visibility:visible}
.ob-fin__box{pointer-events:auto;width:min(420px,calc(100vw - 32px));text-align:center;overflow:hidden;
  background:linear-gradient(168deg,#17171C 0%,#0C0C10 62%,#100D18 100%);
  border:1px solid rgba(255,255,255,.14);border-radius:22px;padding:28px 24px 0;
  box-shadow:0 30px 70px rgba(0,0,0,.55),0 0 0 1px rgba(255,255,255,.05) inset,0 0 60px rgba(98,0,255,.28);
  opacity:0;transform:translateY(14px) scale(.96);
  transition:opacity .3s ease,transform .5s cubic-bezier(.22,1,.36,1)}
.ob-fin.on .ob-fin__box{opacity:1;transform:none}
.ob-fin__ic{width:54px;height:54px;margin:0 auto 14px;border-radius:16px;display:grid;place-items:center;color:#2E0080;
  background:radial-gradient(circle at 30% 25%,#FFF 0,#E9E1FF 34%,#C9A7FF 78%);box-shadow:0 10px 30px rgba(201,167,255,.35)}
.ob-fin__t{font-family:'Prosto One','Jura',system-ui,sans-serif;font-size:26px;font-weight:400;letter-spacing:-.01em;
  color:#fff;margin:0 0 10px;line-height:1.2}
.ob-fin .ob-tip__x{margin:0 auto 20px;max-width:330px}
.ob-fin__ft{display:flex;flex-direction:column;gap:6px;margin-bottom:22px}
.ob-fin__ft .ob-b--go{padding:12px 18px;font-size:14.5px}
.ob-fin__bar{height:3px;margin:0 -24px;background:rgba(255,255,255,.08)}
.ob-fin__bar i{display:block;height:100%;transform-origin:left;background:linear-gradient(90deg,#6200FF,#C9A7FF)}
.ob-fin.on .ob-fin__bar i{animation:ob-drain 7s linear forwards}
.ob-fin.hold .ob-fin__bar i{animation-play-state:paused;opacity:.35}
@keyframes ob-drain{from{transform:scaleX(1)}to{transform:scaleX(0)}}
@media (prefers-reduced-motion:reduce){.ob-fin__box{transition:none}.ob-fin.on .ob-fin__bar i{animation:none}}