/* РАЙОНЫ: spotlight tutorial with mobile and desktop safe areas. */
.tutorial-root[hidden]{display:none!important}
.tutorial-root{
  position:fixed;inset:0;z-index:5000;pointer-events:auto;
  font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}
.tutorial-spotlight{
  position:fixed;border:2px solid #ff3db4;border-radius:16px;
  box-shadow:0 0 0 200vmax rgba(0,0,0,.78),0 0 20px rgba(255,61,180,.45);
  pointer-events:none;transition:all .25s ease;z-index:1;
}
.tutorial-card{
  position:absolute;z-index:2;left:50%;bottom:calc(22px + env(safe-area-inset-bottom,0px));
  transform:translateX(-50%);width:min(400px,calc(100% - 32px));
  padding:21px;border-radius:22px;border:1px solid #46333f;
  background:#151115;color:#fff;box-shadow:0 18px 75px #000d;
}
.tutorial-card.top-position{top:calc(20px + env(safe-area-inset-top,0px));bottom:auto}
.tutorial-card.centered{top:50%;bottom:auto;transform:translate(-50%,-50%)}
.tutorial-top,.tutorial-bottom{display:flex;align-items:center;justify-content:space-between;gap:12px}
.tutorial-brand{font-size:11px;font-weight:800;letter-spacing:.1em;color:#ff55bd}
.tutorial-skip{border:0;background:none;color:#afa1ab;font-size:12px;padding:8px;cursor:pointer}
.tutorial-progress{display:flex;gap:5px;margin:18px 0 20px}
.tutorial-progress span{height:3px;flex:1;border-radius:10px;background:#46343f}
.tutorial-progress .is-active{background:#ff43b8}
.tutorial-title{margin:0 0 9px;font-size:23px;font-weight:790;letter-spacing:-.03em;line-height:1.12}
.tutorial-description{margin:0;color:#d4cbd1;font-size:14px;line-height:1.55}
.tutorial-bottom{margin-top:23px}
.tutorial-counter{font-size:12px;color:#a99ca6;font-variant-numeric:tabular-nums}
.tutorial-next{border:0;background:#f83bac;color:#170812;border-radius:12px;padding:12px 21px;font-weight:800;font-size:14px;cursor:pointer}
.tutorial-next:disabled,.tutorial-skip:disabled{opacity:.5}
.tutorial-reward{position:fixed;left:50%;top:calc(20px + env(safe-area-inset-top,0px));transform:translateX(-50%);z-index:6000;
  max-width:calc(100vw - 32px);padding:15px 22px;text-align:center;border-radius:14px;
  background:#191019;color:#fff;border:1px solid #f83bac;box-shadow:0 12px 40px #0009;font-weight:700}
.appbar-logo{display:block;font-size:17px;line-height:1;font-weight:900;letter-spacing:-.08em;color:#ff52b9}
@media(max-height:520px){.tutorial-card{padding:12px 16px;bottom:8px}.tutorial-title{font-size:19px}.tutorial-progress{margin:8px 0}.tutorial-bottom{margin-top:10px}.tutorial-card.top-position{top:8px}}
@media(prefers-reduced-motion:reduce){.tutorial-spotlight{transition:none}}