.dlg {
  position: fixed; inset: 0; z-index: 100;
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
  background: rgba(8, 14, 30, .6);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  animation: dlgFade .16s ease;
}
.dlg[hidden] { display: none; }
.dlg.is-out { opacity: 0; transition: opacity .16s ease; pointer-events: none; }

.dlg-box {
  width: 400px; max-width: 100%; box-sizing: border-box; padding: 22px 24px 20px;
  background: #ffffff; border-radius: 18px;
  box-shadow: 0 30px 80px rgba(6, 16, 40, .3);
  animation: dlgPop .18s cubic-bezier(.2, .8, .3, 1);
}
.dlg.is-out .dlg-box { transform: scale(.98); transition: transform .16s ease; }

.dlg-title { margin: 0; font-size: 17px; line-height: 24px; font-weight: 700; color: #0C1626; }
.dlg-text {
  margin: 8px 0 0; font-size: 13.5px; line-height: 21px;
  color: rgba(30, 50, 80, .78);
}
.dlg-text[hidden] { display: none; }

.dlg-field { display: block; margin: 16px 0 0; }
.dlg-field[hidden] { display: none; }
.dlg-label {
  display: block; margin-bottom: 7px;
  font-size: 13px; line-height: 18px; font-weight: 600; color: rgba(30, 50, 80, .72);
}
.dlg-input {
  display: block; width: 100%; box-sizing: border-box; height: 40px; padding: 0 12px;
  border: 1px solid rgba(13, 38, 90, .16); border-radius: 10px;
  background: #ffffff; color: #0C1626;
  font-family: inherit; font-size: 14px; line-height: 38px; font-weight: 500;
  outline: none; transition: border-color .15s ease, box-shadow .15s ease;
}
.dlg-input:focus { border-color: rgba(var(--brand-rgb), .55); box-shadow: 0 0 0 3px rgba(var(--brand-rgb), 0.072); }
.dlg-input::placeholder { color: rgba(30, 50, 80, .38); }
.dlg-field.is-bad .dlg-input { border-color: rgba(192, 38, 31, .55); }
.dlg-field.is-bad .dlg-input:focus { box-shadow: 0 0 0 3px rgba(192, 38, 31, .12); }
.dlg-warn {
  display: none; margin-top: 6px;
  font-size: 12px; line-height: 17px; font-weight: 600; color: #C0261F;
}
.dlg-field.is-bad .dlg-warn { display: block; }

.dlg-foot { display: flex; justify-content: flex-end; gap: 10px; margin-top: 20px; }
.dlg-btn {
  flex: none; min-width: 84px; height: 40px; padding: 0 18px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid transparent; border-radius: 10px;
  font-family: inherit; font-size: 14px; line-height: 20px; font-weight: 700;
  cursor: pointer; transition: background .15s ease, border-color .15s ease, transform .1s ease;
}
.dlg-btn:active { transform: scale(.97); }
.dlg-no { background: #ffffff; border-color: rgba(13, 38, 90, .18); color: rgba(30, 50, 80, .82); }
.dlg-no:hover { background: rgba(13, 38, 90, .04); border-color: rgba(13, 38, 90, .28); }
.dlg-yes { background: var(--brand-gradient); color: #ffffff; }
.dlg-yes:hover { background: var(--brand-gradient-hover); }
.dlg-yes.is-danger { background: #C0261F; }
.dlg-yes.is-danger:hover { background: #A61E18; }

@keyframes dlgFade { from { opacity: 0; } }
@keyframes dlgPop { from { opacity: 0; transform: scale(.96); } }

@media (prefers-reduced-motion: reduce) {
  .dlg, .dlg-box { animation: none; }
  .dlg.is-out .dlg-box { transition: none; }
  .dlg-btn { transition-property: background, border-color; }
}

@media (max-width: 560px) {
  .dlg { padding: 16px; }
  .dlg-box { width: 100%; padding: 20px 18px 18px; border-radius: 16px; }
  .dlg-foot { gap: 8px; }
  .dlg-btn { flex: 1; min-width: 0; height: 44px; }
}