/* ===== SAMOUCZEK ===== */

.tut-overlay{
  position:fixed;
  inset:0;
  z-index:5000;
  display:none;
  /* czerń u góry przechodząca do pełnej przezroczystości na dole */
  background:linear-gradient(180deg,
    rgba(2,4,8,.88) 0%,
    rgba(2,4,8,.62) 45%,
    rgba(2,4,8,.28) 75%,
    rgba(2,4,8,0) 100%);
  animation:tutFade .35s ease;
}
.tut-overlay.open{display:block}
@keyframes tutFade{from{opacity:0}to{opacity:1}}

/* wycięcie na podświetlany element — cień jest czarny (zero poświat) */
.tut-hole{
  position:fixed;
  border:2px solid #4C9FFF;
  border-radius:10px;
  box-shadow:0 0 0 9999px rgba(2,4,8,.55);
  pointer-events:none;
  transition:left .35s cubic-bezier(.3,.9,.3,1), top .35s cubic-bezier(.3,.9,.3,1),
             width .35s cubic-bezier(.3,.9,.3,1), height .35s cubic-bezier(.3,.9,.3,1),
             opacity .25s ease;
}

.tut-card{
  position:fixed;
  width:380px;
  max-width:calc(100vw - 32px);
  background:var(--card, #14161A);
  border:1px solid #2C323A;
  border-radius:12px;
  padding:16px 18px 14px;
  box-shadow:0 24px 70px rgba(0,0,0,.65);
  transition:left .35s cubic-bezier(.3,.9,.3,1), top .35s cubic-bezier(.3,.9,.3,1);
}
.tut-card.tut-in{animation:tutSlide .3s ease}
@keyframes tutSlide{
  from{opacity:0;translate:0 10px}
  to{opacity:1;translate:0 0}
}
.tut-card.tut-center{width:440px}

.tut-count{
  font-size:10px;
  font-weight:800;
  letter-spacing:.16em;
  color:#4C9FFF;
  margin-bottom:6px;
}
.tut-title{
  font-size:16px;
  font-weight:800;
  color:var(--text, #E8ECF1);
  margin-bottom:8px;
}
.tut-desc{
  font-size:12.5px;
  line-height:1.65;
  color:#B9C1CC;
}
.tut-desc b{color:#E8ECF1}
.tut-nav{
  display:flex;
  align-items:center;
  gap:8px;
  margin-top:14px;
}
.tut-sp{flex:1}
.tut-nav button{
  padding:7px 13px;
  border-radius:7px;
  font-size:11px;
  font-weight:700;
  letter-spacing:.04em;
}
.tut-skip{color:#737D89}
.tut-skip:hover{color:#B9C1CC}
.tut-prev{border:1px solid #2C323A;color:#B9C1CC}
.tut-prev:hover{border-color:#3A414B;color:#E8ECF1}
.tut-next{
  background:rgba(76,159,255,.16);
  border:1px solid #4C9FFF;
  color:#9CCBFF;
}
.tut-next:hover{background:rgba(76,159,255,.28)}

/* przycisk w ustawieniach profilu */
.tut-launch{
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin-top:14px;
  padding:9px 14px;
  border:1px solid #4C9FFF;
  border-radius:8px;
  background:rgba(76,159,255,.10);
  color:#9CCBFF;
  font-size:12px;
  font-weight:700;
}
.tut-launch:hover{background:rgba(76,159,255,.2)}

.tut-hole{display:none;z-index:5800}
.tut-card{display:none;z-index:5900}
.tut-above{z-index:5600 !important;position:relative}
.tpl-modal.tut-above, #lightbox.tut-above, #twModal.tut-above, #settingsModal.tut-above{position:fixed}

/* overlay nie blokuje klikania — zadania wykonujesz bezposrednio w panelu */
.tut-overlay{pointer-events:none}
.tut-hole{pointer-events:none}
.tut-card{pointer-events:auto}

.tut-task{
  display:flex;
  align-items:flex-start;
  gap:8px;
  margin-top:12px;
  padding:9px 12px;
  border:1px dashed #4C9FFF;
  border-radius:8px;
  background:rgba(76,159,255,.07);
  font-size:12px;
  line-height:1.55;
  color:#B9C1CC;
}
.tut-task b{color:#9CCBFF}
.tut-task-dot{
  flex-shrink:0;
  width:9px;height:9px;
  margin-top:4px;
  border-radius:50%;
  background:#4C9FFF;
  animation:tutPulse 1.1s ease infinite;
}
.tut-task-dot.ok{background:#2EE59D;animation:none}
@keyframes tutPulse{0%,100%{opacity:1}50%{opacity:.35}}
.tut-card.tut-done{border-color:#2EE59D}
.tut-card.tut-done .tut-task{border-color:#2EE59D;background:rgba(46,229,157,.07)}

/* tryb zadania: przyciemnienie gasnie, kafelek w rogu */
.tut-overlay{transition:clip-path .35s cubic-bezier(.3,.9,.3,1), opacity .3s ease}
.tut-overlay.tut-clear{opacity:0}
.tut-start{
  background:rgba(46,229,157,.14);
  border:1px solid #2EE59D;
  color:#7FF0C0;
}
.tut-start:hover{background:rgba(46,229,157,.26)}
.tut-stepskip{border:1px solid #2C323A;background:none;color:#737D89}
.tut-stepskip:hover{color:#B9C1CC;border-color:#3A414B}
.tut-card.tut-mini{width:300px;padding:12px 14px}
.tut-mini .tut-desc, .tut-mini .tut-prev, .tut-mini .tut-skip, .tut-mini .tut-start{display:none}
.tut-mini .tut-title{font-size:13px;margin-bottom:5px}
.tut-mini .tut-task{margin-top:8px;padding:7px 10px;font-size:11px}
.tut-mini .tut-nav{margin-top:9px}
.tut-mini .tut-stepskip{padding:5px 10px;font-size:10px}