/* Женское счастье — трекер, вход, служебные элементы.
   Палитра и шрифты — те же, что в landing/assets/css/style.css. */

:root{
  --ink:#1E2A27; --ink-soft:#3D4A47; --muted:#6E7B77;
  --dark:#2F3E3B; --dark-2:#3B4E49; --green:#536E69; --green-2:#6C847E;
  --sage:#A3AFAD; --sage-tint:#DCE4E1; --mist:#F2F6F4; --mist-2:#E8EEEB;
  --paper:#FBFBF9; --white:#FFFFFF;
  --ochre:#A97C4F; --ochre-2:#C08F5C; --ochre-tint:#F3E9DE;
  --shadow-s:0 2px 10px rgba(30,42,39,.06);
  --shadow-m:0 10px 30px rgba(30,42,39,.08);
  --r-s:10px; --r-m:18px; --r-l:28px;
  --font-display:'Onest','Golos Text','Segoe UI',system-ui,sans-serif;
  --font-body:'Golos Text','Onest','Segoe UI',system-ui,sans-serif;
}

[hidden]{ display:none !important; }

/* Служебный виджет: должен загрузиться, но не должен быть виден и занимать место */
.zs-service{
  position:absolute !important; left:-10000px !important; top:0 !important;
  width:320px !important; height:1px !important; overflow:hidden !important;
  opacity:0; pointer-events:none;
}

/* ---------- Трекер ---------- */
.zs-tracker{
  background:var(--white);
  border-radius:var(--r-l);
  box-shadow:var(--shadow-m);
  overflow:hidden;
  font-family:var(--font-body);
  color:var(--ink);
}

.zs-tracker__head{
  display:flex; align-items:flex-end; justify-content:space-between; gap:16px;
  padding:24px 28px 22px;
  background:var(--dark);
  color:var(--white);
}
.zs-tracker__kicker{
  margin:0 0 6px;
  font:600 12px/1.2 var(--font-display);
  letter-spacing:.16em; text-transform:uppercase;
  color:var(--ochre-2);
}
.zs-tracker__name{
  margin:0;
  font:700 26px/1.15 var(--font-display);
  word-spacing:.08em;
}
.zs-tracker__bonus{
  flex-shrink:0; text-align:right;
  padding:10px 16px;
  border-radius:var(--r-m);
  background:rgba(255,255,255,.08);
}
.zs-tracker__bonus span{
  display:block;
  font-size:12px; color:var(--sage);
}
.zs-tracker__bonus b{
  display:block;
  font:700 22px/1.2 var(--font-display);
  color:var(--white);
  font-variant-numeric:tabular-nums;
}

/* Шаги */
.zs-steps{
  list-style:none; margin:0;
  padding:18px 20px 22px;
}
.zs-step{
  position:relative;
  display:grid; grid-template-columns:22px 1fr; gap:14px;
  padding:12px 12px 14px;
  border-radius:var(--r-m);
}
.zs-step + .zs-step{ margin-top:2px; }

/* линия между точками */
.zs-step::before{
  content:''; position:absolute;
  left:22px; top:34px; bottom:-14px;
  width:2px; background:var(--sage-tint);
}
.zs-step:last-child::before{ display:none; }

.zs-step__dot{
  position:relative; z-index:1;
  width:22px; height:22px; margin-top:1px;
  border-radius:50%;
  border:2px solid var(--sage);
  background:var(--white);
}
.zs-step--open .zs-step__dot,
.zs-step--done .zs-step__dot{
  border-color:var(--green); background:var(--green);
}
.zs-step--open .zs-step__dot::after,
.zs-step--done .zs-step__dot::after{
  content:''; position:absolute; left:6px; top:2px;
  width:5px; height:10px;
  border:solid var(--white); border-width:0 2px 2px 0;
  transform:rotate(45deg);
}
.zs-step--active .zs-step__dot{
  border-color:var(--ochre);
  box-shadow:0 0 0 5px var(--ochre-tint);
}
.zs-step--active .zs-step__dot::after{
  content:''; position:absolute; inset:4px;
  border-radius:50%; background:var(--ochre);
}
.zs-step--missed .zs-step__dot{ border-style:dashed; }

.zs-step__title{
  margin:0 0 4px;
  font:600 17px/1.3 var(--font-display);
  color:var(--ink);
}
.zs-step--locked .zs-step__title,
.zs-step--missed .zs-step__title{ color:var(--muted); }

.zs-step__body{
  display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 14px;
  font-size:15px; line-height:1.5;
  color:var(--ink-soft);
}
.zs-step--locked .zs-step__body,
.zs-step--missed .zs-step__body{ color:var(--muted); }

/* ближайший шаг */
.zs-step--next{ background:var(--ochre-tint); }
.zs-step--next::before{ background:linear-gradient(var(--ochre-tint), var(--sage-tint)); }

.zs-here{
  display:inline-block; vertical-align:2px;
  margin-left:6px; padding:2px 9px;
  border-radius:100px;
  background:var(--dark); color:var(--white);
  font:600 11px/1.5 var(--font-display);
  font-style:normal;
  letter-spacing:.08em; text-transform:uppercase;
}

.zs-ok{ color:var(--green); font-weight:600; }
.zs-live{ color:#B4452F; font-weight:700; }
.zs-left{ color:var(--muted); }
.zs-left b{
  font-weight:600; color:var(--ink);
  font-variant-numeric:tabular-nums;
}
.zs-note{
  flex-basis:100%;
  margin:6px 0 0;
  font-size:14px; line-height:1.45; color:var(--muted);
}
.zs-note a{ color:var(--ochre); }
.zs-note--warn{ color:#9A4A2F; }

.zs-hw{ flex-basis:100%; margin-top:10px; }

/* Кнопки */
.zs-btn{
  display:inline-flex; align-items:center; justify-content:center;
  min-height:46px; padding:12px 22px;
  border:0; border-radius:100px;
  background:var(--dark); color:var(--white);
  font:600 15px/1.2 var(--font-display);
  text-decoration:none; cursor:pointer;
  transition:background .2s ease, transform .2s ease;
}
.zs-btn:hover{ background:var(--dark-2); }
.zs-btn:active{ transform:translateY(1px); }
.zs-btn:disabled{ background:var(--sage); cursor:progress; }
.zs-btn--link{
  min-height:0; padding:0;
  background:none; color:var(--ochre);
  font-weight:600;
}
.zs-btn--link:hover{ background:none; color:var(--dark); }

/* Загрузка и ошибка */
.zs-tracker--loading{
  min-height:380px;
  background:linear-gradient(100deg, var(--mist) 30%, var(--white) 50%, var(--mist) 70%) 0 0/300% 100%;
  animation:zs-shimmer 1.4s linear infinite;
}
@keyframes zs-shimmer{ to{ background-position:-150% 0; } }
@media (prefers-reduced-motion:reduce){ .zs-tracker--loading{ animation:none; } }

.zs-tracker--msg{ padding:28px; text-align:center; }
.zs-tracker--msg p{ margin:0 0 14px; color:var(--ink-soft); }

/* ---------- Вход: трекер под размытием, форма поверх ---------- */
.zs-trackbox{ position:relative; }
.zs-trackbox--locked{ min-height:560px; }
.zs-trackbox--locked .zs-view{
  filter:blur(6px);
  opacity:.6;
  pointer-events:none; user-select:none;
}
.zs-gate{
  position:absolute; z-index:2;
  top:64px; left:50%; transform:translateX(-50%);
  width:min(460px, calc(100% - 32px));
}
.zs-bar{
  display:inline-block; vertical-align:middle;
  width:190px; max-width:70%; height:12px;
  border-radius:6px; background:var(--sage-tint);
}
.zs-bar--light{ width:140px; height:18px; background:rgba(255,255,255,.25); }

.zs-auth{
  padding:28px;
  border-radius:var(--r-l);
  background:var(--white);
  box-shadow:0 24px 60px rgba(30,42,39,.18);
  font-family:var(--font-body);
}
.zs-auth__title{
  margin:0 0 8px;
  font:700 22px/1.25 var(--font-display);
  color:var(--ink);
}
.zs-auth__text{
  margin:0 0 16px;
  font-size:15px; line-height:1.5; color:var(--ink-soft);
}

/* ---------- Мобильные ---------- */
@media (max-width:560px){
  .zs-tracker__head{ flex-direction:column; align-items:flex-start; padding:20px 20px 18px; }
  .zs-tracker__bonus{ text-align:left; }
  .zs-tracker__name{ font-size:22px; }
  .zs-steps{ padding:12px 8px 16px; }
  .zs-step{ gap:12px; padding:12px 10px 14px; }
  .zs-step::before{ left:20px; }
  .zs-auth{ padding:22px 20px; }
}