/* مودال النجاح */
:root{ --green:#00ab61; }
.success-modal{ background: linear-gradient(180deg,#fff,#f9fafb); border-radius:18px; }
.success-hero{ width:96px; height:96px; display:grid; place-items:center; border-radius:50%;
  background: radial-gradient(closest-side, #eafff4, #ffffff); }
.success-svg{ width:78px; height:78px; }
.success-svg .ring{ fill:none; stroke: rgba(0,171,97,.15); stroke-width:8; }
.success-svg .tick{
  fill:none; stroke:var(--green); stroke-width:8; stroke-linecap:round; stroke-linejoin:round;
  stroke-dasharray:120; stroke-dashoffset:120; animation: draw 700ms 120ms ease forwards;
  filter: drop-shadow(0 3px 6px rgba(0,171,97,.35));
}
@keyframes draw{ to{ stroke-dashoffset:0; } }
.success-progress{ height:4px; background:#eef2f7; overflow:hidden; border-radius:0 0 18px 18px; }
.success-progress span{ display:block; height:100%; width:0%; background:linear-gradient(90deg,#22c55e,#16a34a,#22c55e); transition:width linear; }