/* S2ND Tools • Progress UI v1.0 | Namespace: s2ndl- */
:root {
  --s2ndl-pink: #f43fa5;
  --s2ndl-purple: #ab45de;
  --s2ndl-violet: #7438cc;
  --s2ndl-ink: #3a215c;
  --s2ndl-muted: #807391;
}
.s2ndl-overlay[hidden] { display: none !important; }
.s2ndl-overlay,
.s2ndl-overlay * { box-sizing: border-box; }
.s2ndl-overlay {
  position: fixed;
  z-index: 2147483000;
  inset: 0;
  display: grid;
  place-items: center;
  overflow: auto;
  padding: max(14px, env(safe-area-inset-top, 0px)) 14px max(14px, env(safe-area-inset-bottom, 0px));
  isolation: isolate;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}
.s2ndl-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(31, 13, 56, .54);
  -webkit-backdrop-filter: blur(10px) saturate(115%);
  backdrop-filter: blur(10px) saturate(115%);
  animation: s2ndl-fade-in .26s ease both;
}
.s2ndl-panel {
  position: relative;
  width: min(100%, 450px);
  margin: auto;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.95);
  border-radius: 28px;
  background: linear-gradient(150deg, #ffffff 2%, #fffafd 42%, #f8f0ff 100%);
  box-shadow: 0 36px 110px rgba(35, 13, 74, .3), inset 0 1px 0 rgba(255,255,255,1);
  text-align: center;
  color: var(--s2ndl-ink);
  padding: 28px 30px 24px;
  animation: s2ndl-rise .38s cubic-bezier(.2, .84, .28, 1.1) both;
}
.s2ndl-panel::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 5px;
  background: linear-gradient(90deg, #ff72b6, #ffca68, #81e0bb, #7ac4fa, #c778f4);
}
.s2ndl-panel::after {
  content: '';
  position: absolute;
  z-index: 0;
  pointer-events: none;
  width: 225px; height: 225px;
  top: -120px; right: -130px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(239,94,212,.16), transparent 67%);
}
.s2ndl-panel > * { position: relative; z-index: 1; }
.s2ndl-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.s2ndl-brand { display: flex; align-items: center; gap: 10px; text-align: left; min-width: 0; }
.s2ndl-logo {
  display: grid; place-items: center; flex: none;
  width: 38px; height: 38px;
  color: #fff;
  background: linear-gradient(140deg, #f340a6, #af40e0);
  border-radius: 12px;
  box-shadow: 0 5px 16px rgba(208, 53, 170, .22);
  font-size: 21px; font-weight: 850;
}
.s2ndl-brand-text { font-size: 16px; font-weight: 850; letter-spacing: -.5px; white-space: nowrap; }
.s2ndl-brand-text span { color: #d734ad; }
.s2ndl-hide {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 60px;
  padding: 8px 12px;
  border: 1px solid #ecdff3;
  border-radius: 30px;
  background: rgba(255,255,255,.83);
  color: #796589;
  font-size: 12px; font-weight: 750;
  cursor: pointer;
  transition: background .2s, transform .2s;
}
.s2ndl-hide:hover { background: #f9eafa; transform: translateY(-1px); }
.s2ndl-hide:focus-visible { outline: 3px solid #a765e4; outline-offset: 3px; }
.s2ndl-eyebrow {
  display: inline-flex;
  gap: 7px; align-items: center;
  margin-top: 17px;
  padding: 7px 11px;
  border: 1px solid #f3dff5;
  border-radius: 999px;
  background: linear-gradient(135deg, #fff0f8, #f5eeff);
  font-size: 10px;
  font-weight: 850;
  letter-spacing: .12em;
  color: #b04aaf;
  text-transform: uppercase;
}
.s2ndl-pulse { width: 7px; height: 7px; border-radius: 50%; background: #f143a7; box-shadow: 0 0 0 4px rgba(241,67,167,.14); animation: s2ndl-pulse 1.45s ease-in-out infinite; }
.s2ndl-orbit { position: relative; width: 207px; height: 207px; margin: 12px auto 2px; display: grid; place-items: center; }
.s2ndl-orbit::before {
  content:''; position:absolute; inset: 18px;
  border-radius: 50%;
  background: radial-gradient(circle at 38% 30%, #fff 15%, #fdf3ff 72%, #f8edff);
  box-shadow: 0 9px 38px rgba(204,92,214,.08), inset 0 0 24px rgba(241,198,255,.12);
}
.s2ndl-orbit::after {
  content:''; position:absolute; inset: 6px;
  border-radius: 50%; border: 1px dashed rgba(204, 108, 212, .3);
  animation: s2ndl-spin 20s linear infinite;
}
.s2ndl-ring {
  position: absolute;
  width: 204px; height: 204px;
  overflow: visible;
  transform: rotate(-90deg);
  filter: drop-shadow(0 4px 6px rgba(228, 59, 169, .10));
}
.s2ndl-ring-track { fill: none; stroke: #efe6f5; stroke-width: 10; }
.s2ndl-ring-progress {
  fill: none;
  stroke: url(#s2ndl-ring-gradient);
  stroke-width: 10;
  stroke-linecap: round;
  stroke-dasharray: 502.655;
  stroke-dashoffset: 502.655;
  transition: stroke-dashoffset .17s linear;
}
.s2ndl-orbit-spark {
  position: absolute; z-index: 3;
  width: 11px; height: 11px; border-radius: 50%;
  background: linear-gradient(135deg, #ffb84f, #fa5aaf);
  box-shadow: 0 0 0 6px rgba(251,91,178,.09);
  top: 17px; right: 30px;
  animation: s2ndl-float 2.7s ease-in-out infinite;
}
.s2ndl-orbit-spark.secondary { width: 7px; height: 7px; top: auto; right: auto; bottom: 30px; left: 13px; background: #a95df1; animation-delay: -1s; }
.s2ndl-core { position: relative; z-index: 4; margin-top: 2px; }
.s2ndl-icon-wrap {
  display: inline-flex; justify-content: center; align-items: center;
  width: 42px; height: 42px; border-radius: 15px;
  background: linear-gradient(135deg, #ffe1f0, #eee0fe);
  box-shadow: inset 0 1px 0 #fff;
  color: #db41a3;
}
.s2ndl-icon { width: 23px; height: 23px; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; fill: none; }
.s2ndl-number { margin-top: 7px; font-size: 46px; font-weight: 900; letter-spacing: -2.5px; line-height: 1; font-variant-numeric: tabular-nums; color: #512b76; }
.s2ndl-number small { font-size: 22px; letter-spacing: -1px; font-weight: 800; color: #a66fc0; margin-left: 1px; }
.s2ndl-percent-note { font-size: 10px; font-weight: 800; letter-spacing: .08em; color: #9e8bad; text-transform: uppercase; margin-top: 8px; }
.s2ndl-title { font-size: clamp(21px, 5vw, 25px); line-height: 1.22; margin: 9px 0 7px; letter-spacing: -.65px; font-weight: 870; color: #472268; }
.s2ndl-subtitle { color: #897795; font-size: 13px; line-height: 1.6; max-width: 345px; min-height: 40px; margin: auto; }
.s2ndl-progress-area { margin-top: 18px; text-align: left; }
.s2ndl-progress-caption { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 9px; font-size: 12px; color: #6c567f; font-weight: 700; }
.s2ndl-progress-caption span:last-child { color: #bc65c5; font-size: 11px; font-variant-numeric: tabular-nums; }
.s2ndl-bar { height: 12px; border-radius: 999px; background: #f0e7f6; border: 1px solid #f1e3f5; overflow: hidden; box-shadow: inset 0 1px 3px rgba(90,51,103,.06); }
.s2ndl-bar-fill {
  position: relative;
  width: 0%; height: 100%; border-radius: inherit;
  background: linear-gradient(90deg, #f148a2 0%, #d54dc5 48%, #9954e1 100%);
  box-shadow: 0 2px 8px rgba(235,65,158,.22);
  transition: width .17s linear;
}
.s2ndl-bar-fill::before {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,.38) 50%, transparent 70%);
  transform: translateX(-115%);
  animation: s2ndl-shimmer 2s infinite linear;
}
.s2ndl-stages { margin-top: 20px; display: grid; grid-template-columns: 1fr 1fr 1fr; column-gap: 6px; position: relative; }
.s2ndl-stages::before { content: ''; position: absolute; top: 12px; left: 15%; right: 15%; height: 2px; background: #efdef3; }
.s2ndl-stage { position: relative; z-index: 1; display: flex; align-items: center; flex-direction: column; gap: 9px; color: #b3a5be; font-size: 10px; font-weight: 700; white-space: nowrap; }
.s2ndl-stage-dot { display: grid; place-items: center; width: 25px; height: 25px; border: 2px solid #ecdff2; background: #fbf6fd; border-radius: 50%; color: #af9ebe; font-size: 11px; box-shadow: 0 0 0 4px #fcf8ff; }
.s2ndl-stage.is-current { color: #9f49bd; }
.s2ndl-stage.is-current .s2ndl-stage-dot { color: white; background: linear-gradient(145deg, #ef4fa7, #b45ae0); border-color: transparent; box-shadow: 0 0 0 4px #fce9f7, 0 3px 7px #f9bddd; }
.s2ndl-stage.is-done { color: #bf73b8; }
.s2ndl-stage.is-done .s2ndl-stage-dot { background: #ffe6f3; color: #d549ab; border-color: #f6cce6; }
.s2ndl-footer { display: flex; align-items: center; justify-content: center; gap: 7px; margin-top: 19px; padding-top: 13px; border-top: 1px solid rgba(214,189,228,.45); color: #9a89a4; font-size: 11px; line-height: 1.4; }
.s2ndl-footer svg { width: 13px; height: 13px; flex: none; color: #b98acc; }
.s2ndl-panel.is-success .s2ndl-orbit::after,
.s2ndl-panel.is-error .s2ndl-orbit::after { animation-play-state: paused; }
.s2ndl-panel.is-success .s2ndl-orbit-spark,
.s2ndl-panel.is-error .s2ndl-orbit-spark { animation-play-state: paused; }
.s2ndl-panel.is-success .s2ndl-ring-progress { stroke: #42c8a8; }
.s2ndl-panel.is-success .s2ndl-icon-wrap { color: #1d9f81; background: linear-gradient(135deg, #d6fff4, #e9faff); }
.s2ndl-panel.is-success .s2ndl-bar-fill { background: linear-gradient(90deg, #36c7a6, #66d8c4); }
.s2ndl-panel.is-error .s2ndl-ring-progress { stroke: #f27a8b; }
.s2ndl-panel.is-error .s2ndl-icon-wrap { color: #d74775; background: #ffeaf0; }
.s2ndl-panel.is-error .s2ndl-bar-fill { background: linear-gradient(90deg, #f0a4a4, #e45b83); }
body.s2ndl-lock-scroll { overflow: hidden !important; }
@keyframes s2ndl-rise { from { opacity: 0; transform: translateY(17px) scale(.965); } to { opacity:1; transform: translateY(0) scale(1); } }
@keyframes s2ndl-fade-in { from { opacity:0; } to { opacity:1; } }
@keyframes s2ndl-spin { to { transform: rotate(360deg); } }
@keyframes s2ndl-float { 50% { transform: translateY(-6px) scale(.9); } }
@keyframes s2ndl-pulse { 50% { opacity:.5; box-shadow:0 0 0 7px rgba(241,67,167,.08); } }
@keyframes s2ndl-shimmer { to { transform: translateX(115%); } }
@media (max-width: 480px) {
  .s2ndl-panel { padding: 21px 19px 19px; border-radius: 24px; }
  .s2ndl-orbit { width: 193px; height: 193px; margin-top: 9px; }
  .s2ndl-ring { width: 191px; height: 191px; }
  .s2ndl-orbit::before { inset: 14px; }
  .s2ndl-number { font-size: 43px; }
  .s2ndl-title { margin-top: 8px; }
  .s2ndl-subtitle { font-size: 12px; }
  .s2ndl-stages { margin-top: 18px; }
  .s2ndl-progress-area { margin-top: 14px; }
}
@media (max-height: 680px) {
  .s2ndl-panel { padding-top: 17px; padding-bottom: 14px; }
  .s2ndl-eyebrow { margin-top: 7px; }
  .s2ndl-orbit { height: 159px; width: 159px; margin-top: 4px; }
  .s2ndl-ring { height: 157px; width: 157px; }
  .s2ndl-orbit::before { inset: 10px; }
  .s2ndl-number { font-size: 37px; }
  .s2ndl-icon-wrap { height: 31px; width: 31px; }
  .s2ndl-icon { width: 18px; height: 18px; }
  .s2ndl-footer { margin-top: 10px; }
  .s2ndl-stages { margin-top: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .s2ndl-overlay *, .s2ndl-overlay *::before, .s2ndl-overlay *::after { animation: none !important; transition: none !important; }
}