/* ==========================================================================
   نافذة تأكيد داخل التطبيق — بديل confirm() الأصلي
   السبب: confirm() يجمّد الجافاسكربت فتبقى موجة الضغط عالقة،
   ويعرض «reelnix.com says» بخط النظام فيكسر إحساس التطبيق.
   ========================================================================== */

.stm-sheet-back {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: rgba(3, 5, 16, .72);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display: grid;
  align-items: end;
  animation: stm-fade-in 200ms ease both;
}

.stm-sheet {
  width: 100%;
  max-width: var(--stm-maxw);
  margin-inline: auto;
  padding: var(--stm-s5) var(--stm-s5) calc(var(--stm-s5) + var(--stm-safe-bottom));
  border-start-start-radius: 28px;
  border-start-end-radius: 28px;
  border: 1px solid var(--stm-border);
  border-block-end: 0;
  background: linear-gradient(180deg, rgba(20, 26, 66, .99), rgba(9, 12, 34, 1));
  box-shadow: 0 -18px 50px rgba(0, 0, 0, .55);
  animation: stm-sheet-up 300ms cubic-bezier(.22, .61, .36, 1) both;
}

/* مقبض السحب أعلى الورقة */
.stm-sheet::before {
  content: "";
  display: block;
  width: 42px; height: 4px;
  margin: 0 auto var(--stm-s5);
  border-radius: var(--stm-r-pill);
  background: rgba(255, 255, 255, .22);
}

.stm-sheet__title {
  margin: 0 0 var(--stm-s2);
  font-size: var(--stm-fs-card);
  font-weight: 900;
  text-align: center;
}
.stm-sheet__text {
  margin: 0 0 var(--stm-s5);
  font-size: var(--stm-fs-caption);
  color: var(--stm-text-secondary);
  text-align: center;
  line-height: 1.8;
}

.stm-sheet__actions { display: grid; gap: var(--stm-s3); }

@keyframes stm-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes stm-sheet-up {
  from { transform: translateY(100%); }
  to   { transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .stm-sheet-back, .stm-sheet { animation: none; }
}
