/* ─────────────────────────────────────────────────────────────────────────
   Обучающий тур по кабинету «Новый клип»: подсветка кнопок/полей по очереди,
   показывается один раз новым пользователям (localStorage), закрывается
   в любой момент. Код — onboard.js.
   ───────────────────────────────────────────────────────────────────────── */

.onb-blocker{ position:fixed; inset:0; z-index:9998; background:rgba(5,6,10,.45); }

/* box-shadow со spread 9999px красит весь экран вокруг элемента — без
   отдельных панелей-масок и без вычисления выреза под каждый размер/позицию. */
.onb-hl{
  position:relative !important; z-index:10000;
  box-shadow:0 0 0 9999px rgba(5,6,10,.72), 0 0 0 3px var(--vio2,#a274ff), 0 10px 30px rgba(125,92,245,.4);
  border-radius:14px;
  transition:box-shadow .2s ease;
}

.onb-box{
  position:fixed; z-index:10001; width:300px; max-width:calc(100vw - 24px);
  background:var(--panel,#17171c); border:1px solid var(--bd2,rgba(255,255,255,.14));
  border-radius:14px; padding:16px 18px; box-shadow:var(--sh,0 10px 30px rgba(0,0,0,.4));
}
.onb-step{ font-size:11.5px; font-weight:700; letter-spacing:.02em; color:var(--vio2,#a274ff); margin:0 0 6px; text-transform:uppercase; }
.onb-title{ font-size:15px; font-weight:700; color:var(--tx,#eeeef2); margin:0 0 6px; }
.onb-text{ font-size:13px; line-height:1.45; color:var(--mut,#9d9da8); margin:0 0 16px; }
.onb-actions{ display:flex; align-items:center; justify-content:space-between; gap:12px; }
.onb-skip{ background:none; border:none; padding:6px 2px; color:var(--faint,#6b6b78); font-size:12.5px; cursor:pointer; }
.onb-skip:hover{ color:var(--mut,#9d9da8); }
.onb-next{ background:var(--grad,linear-gradient(135deg,#7d5cf5,#a274ff)); border:none; color:#fff;
           font-weight:600; font-size:13px; padding:8px 18px; border-radius:999px; cursor:pointer; white-space:nowrap; }
.onb-next:hover{ filter:brightness(1.08); }

@media (max-width:640px){
  .onb-box{ width:auto; left:12px !important; right:12px; }
}