/* ============================================================
   Вишня · інтерактивна обучалка — стилі рушія
   13 ГРУП hub. Самодостатній, тема light/dark, мобільний.
   Префікс класів: .vt-  (vishnya tour)
   ============================================================ */

:root{
  --vt-accent:#16a34a;          /* акцент = зелений «онлайн/далі» */
  --vt-accent-press:#15803d;
  --vt-ring:#22c55e;            /* колір кільця підсвітки */
  --vt-card-bg:#ffffff;
  --vt-card-fg:#1f2430;
  --vt-card-sub:#6b7280;
  --vt-card-border:rgba(0,0,0,.08);
  --vt-btn-bg:#f1f3f5;
  --vt-btn-fg:#1f2430;
  --vt-btn-hover:#e7eaee;
  --vt-overlay:rgba(15,18,24,.55);
  --vt-shadow:0 18px 48px -12px rgba(0,0,0,.45);
  --vt-radius:24px;
  --vt-dot:#cbd5e1;
}
/* темна тема: підхоплює і власний data-theme, і клас хаба */
[data-theme="dark"], .theme-dark, .dark{
  --vt-card-bg:#171a21;
  --vt-card-fg:#eef1f6;
  --vt-card-sub:#9aa3b2;
  --vt-card-border:rgba(255,255,255,.10);
  --vt-btn-bg:#232732;
  --vt-btn-fg:#eef1f6;
  --vt-btn-hover:#2c313e;
  --vt-overlay:rgba(0,0,0,.62);
  --vt-shadow:0 18px 48px -10px rgba(0,0,0,.7);
  --vt-dot:#3a4150;
}

/* ---------- кнопка «?» у шапці (близнюк тумблера теми) ---------- */
.vt-help-btn{
  display:inline-flex;align-items:center;justify-content:center;
  width:38px;height:38px;border-radius:50%;
  border:1px solid var(--vt-card-border);
  background:var(--vt-btn-bg);color:var(--vt-btn-fg);
  font:600 18px/1 system-ui,Segoe UI,Roboto,sans-serif;
  cursor:pointer;padding:0;transition:transform .12s,background .15s;
  -webkit-tap-highlight-color:transparent;
}
.vt-help-btn:hover{background:var(--vt-btn-hover);transform:translateY(-1px)}
.vt-help-btn:active{transform:translateY(0)}
.vt-help-btn:focus-visible{outline:2px solid var(--vt-accent);outline-offset:2px}

/* ---------- кореневий шар тура ---------- */
.vt-root{position:fixed;inset:0;z-index:99999;}
.vt-root[hidden]{display:none}

/* SVG-оверлей із вирізом-spotlight */
.vt-overlay{position:fixed;inset:0;width:100%;height:100%;pointer-events:auto}
.vt-overlay rect.vt-dim{fill:var(--vt-overlay)}
.vt-spot-ring{
  fill:none;stroke:var(--vt-ring);stroke-width:3;
  filter:drop-shadow(0 0 6px var(--vt-ring));
}
.vt-anim .vt-spot-ring{animation:vt-pulse 1.8s ease-in-out infinite}
@keyframes vt-pulse{0%,100%{opacity:.55}50%{opacity:1}}
/* плавний рух виразу між кроками */
.vt-anim .vt-mask-rect{transition:x .32s cubic-bezier(.4,0,.2,1),y .32s cubic-bezier(.4,0,.2,1),width .32s cubic-bezier(.4,0,.2,1),height .32s cubic-bezier(.4,0,.2,1)}
.vt-anim .vt-spot-ring{transition:x .32s cubic-bezier(.4,0,.2,1),y .32s cubic-bezier(.4,0,.2,1),width .32s cubic-bezier(.4,0,.2,1),height .32s cubic-bezier(.4,0,.2,1)}

/* ---------- картка Вишні ---------- */
.vt-card{
  position:fixed;width:600px;max-width:calc(100vw - 24px);
  background:var(--vt-card-bg);color:var(--vt-card-fg);
  border:1px solid var(--vt-card-border);border-radius:var(--vt-radius);
  box-shadow:var(--vt-shadow);padding:30px 32px 26px;
  z-index:100000;
}
.vt-anim .vt-card{transition:top .28s cubic-bezier(.4,0,.2,1),left .28s cubic-bezier(.4,0,.2,1),opacity .18s}
.vt-card.vt-enter{opacity:0;transform:scale(.98)}
.vt-card.vt-shown{opacity:1;transform:none;transition:opacity .18s,transform .18s}

/* стрілка-носик */
.vt-arrow{position:absolute;width:14px;height:14px;background:var(--vt-card-bg);
  border-left:1px solid var(--vt-card-border);border-top:1px solid var(--vt-card-border);
  transform:rotate(45deg);}
.vt-arrow[data-side="top"]{bottom:-8px;border:none;border-right:1px solid var(--vt-card-border);border-bottom:1px solid var(--vt-card-border)}
.vt-arrow[data-side="bottom"]{top:-8px}
.vt-arrow[data-side="left"]{right:-8px;transform:rotate(135deg)}
.vt-arrow[data-side="right"]{left:-8px;transform:rotate(-45deg)}

/* шапка картки: аватар + ім'я + закрити */
.vt-head{display:flex;align-items:center;gap:18px;margin-bottom:20px}
.vt-ava{position:relative;width:112px;height:112px;flex:0 0 112px;border-radius:50%;
  overflow:visible}
.vt-ava img{width:112px;height:112px;border-radius:50%;object-fit:cover;
  border:3px solid var(--vt-card-bg);box-shadow:0 0 0 3px var(--vt-ring)}
.vt-ava::after{content:"";position:absolute;right:2px;bottom:2px;width:22px;height:22px;
  border-radius:50%;background:var(--vt-accent);border:3px solid var(--vt-card-bg)}
.vt-id{flex:1;min-width:0}
.vt-name{font:600 24px/1.2 system-ui,Segoe UI,Roboto,sans-serif}
.vt-role{font:500 17px/1.3 system-ui;color:var(--vt-card-sub)}
.vt-online{color:var(--vt-accent)}
.vt-close{flex:0 0 auto;width:44px;height:44px;border:none;border-radius:10px;
  background:transparent;color:var(--vt-card-sub);font-size:32px;cursor:pointer}
.vt-close:hover{background:var(--vt-btn-hover);color:var(--vt-card-fg)}

/* тіло */
.vt-title{font:700 30px/1.25 system-ui;margin:6px 0 12px}
.vt-short{font:400 22px/1.5 system-ui;color:var(--vt-card-fg)}
.vt-long{font:400 20px/1.6 system-ui;color:var(--vt-card-sub);
  margin-top:14px;padding-top:14px;border-top:1px dashed var(--vt-card-border);
  display:none}
.vt-long.vt-open{display:block}
.vt-more{margin-top:14px;background:none;border:none;padding:0;cursor:pointer;
  color:var(--vt-accent);font:600 19px/1 system-ui;display:inline-flex;align-items:center;gap:6px}
.vt-more .vt-chev{transition:transform .15s}
.vt-more.vt-open .vt-chev{transform:rotate(180deg)}

/* підвал: прогрес + кнопки */
.vt-foot{display:flex;align-items:center;gap:14px;margin-top:26px}
.vt-dots{display:flex;gap:9px;flex:1;align-items:center;flex-wrap:wrap}
.vt-dot{width:11px;height:11px;border-radius:50%;background:var(--vt-dot);cursor:pointer;padding:0;border:none}
.vt-dot.vt-cur{background:var(--vt-accent);transform:scale(1.3)}
.vt-dot.vt-done{background:var(--vt-accent);opacity:.5}
.vt-count{font:600 18px/1 system-ui;color:var(--vt-card-sub);white-space:nowrap}
.vt-nav{display:flex;gap:12px}
.vt-btn{border:none;border-radius:13px;padding:15px 26px;font:600 19px/1 system-ui;cursor:pointer;
  transition:background .15s,transform .1s}
.vt-btn:active{transform:translateY(1px)}
.vt-btn-ghost{background:var(--vt-btn-bg);color:var(--vt-btn-fg)}
.vt-btn-ghost:hover{background:var(--vt-btn-hover)}
.vt-btn-primary{background:var(--vt-accent);color:#fff}
.vt-btn-primary:hover{background:var(--vt-accent-press)}
.vt-btn:focus-visible{outline:2px solid var(--vt-accent);outline-offset:2px}

/* ---------- мобільний: bottom-sheet ---------- */
@media (max-width:600px){
  .vt-card{
    left:0!important;right:0!important;bottom:0!important;top:auto!important;
    width:100%;max-width:100%;border-radius:20px 20px 0 0;
    padding:16px 16px calc(16px + env(safe-area-inset-bottom,0));
  }
  .vt-arrow{display:none}
  .vt-anim .vt-card{transition:transform .26s cubic-bezier(.4,0,.2,1),opacity .18s}
  .vt-card.vt-enter{transform:translateY(12px)}
}

/* ---------- повага до reduced-motion ---------- */
@media (prefers-reduced-motion:reduce){
  .vt-anim *{transition:none!important;animation:none!important}
}