nodewarden/webapp/src/styles/overlays.css

.dialog-mask {
  @apply fixed inset-0 grid h-dvh w-screen place-items-center p-5 opacity-0;
  background: rgba(15, 23, 42, 0.5);
  z-index: 1200;
  animation: fade-in var(--dur-medium) var(--ease-smooth) both;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.dialog-card {
  @apply rounded-[20px] border bg-white p-5 text-center;
  width: min(500px, 100%);
  border: 1px solid var(--line);
  box-shadow: 0 20px 50px rgba(15, 23, 42, 0.2);
  transform-origin: 50% 30%;
  animation: dialog-in 240ms var(--ease-out-strong) both;
}

.dialog-mask.warning {
  background:
    radial-gradient(circle at top, rgba(255, 237, 213, 0.32), transparent 34%),
    linear-gradient(180deg, rgba(127, 29, 29, 0.36), rgba(15, 23, 42, 0.72));
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.dialog-card.warning {
  width: min(520px, 100%);
  border: 1px solid rgba(220, 38, 38, 0.22);
  background:
    linear-gradient(180deg, rgba(255, 246, 246, 0.98), rgba(255, 255, 255, 0.99));
  box-shadow:
    0 36px 90px rgba(69, 10, 10, 0.28),
    0 0 0 1px rgba(255, 255, 255, 0.7) inset;
}

.dialog-warning-head {
  @apply mb-2 flex items-center justify-center gap-3;
}

.dialog-warning-badge {
  @apply inline-flex h-12 w-12 items-center justify-center rounded-2xl;
  background: linear-gradient(180deg, #fff1f2, #ffe4e6);
  color: #dc2626;
  box-shadow:
    0 12px 30px rgba(220, 38, 38, 0.18),
    0 0 0 1px rgba(220, 38, 38, 0.08) inset;
}

.dialog-warning-kicker {
  @apply text-xs font-extrabold uppercase tracking-[0.16em];
  color: #b91c1c;
}

.dialog-mask.closing {
  animation: fade-out 220ms var(--ease-smooth) both;
}

.dialog-card.closing {
  animation: dialog-out 220ms var(--ease-smooth) both;
}

.dialog-card .field {
  @apply text-left;
}

.dialog-title {
  @apply my-1.5 text-3xl;
}

.dialog-message {
  @apply mb-2.5;
  color: #475467;
}

.dialog-card.warning .dialog-title {
  @apply mb-2.5;
  color: #7f1d1d;
}

.dialog-message.warning {
  @apply mb-4 rounded-2xl px-4 py-3.5 leading-[1.65];
  border: 1px solid rgba(220, 38, 38, 0.16);
  background: linear-gradient(180deg, rgba(255, 241, 242, 0.94), rgba(255, 247, 237, 0.9));
  color: #7a2832;
  box-shadow: 0 10px 28px rgba(248, 113, 113, 0.08) inset;
}

.dialog-btn {
  @apply mt-2 h-[50px] w-full text-xl;
}

.dialog-extra {
  @apply mt-2;
}

.dialog-divider {
  @apply my-2 mb-2.5 h-px;
  background: var(--line);
}

.import-summary-dialog {
  @apply relative max-w-[520px] pt-4 text-left;
}

.import-summary-close {
  @apply absolute right-2.5 top-2.5 cursor-pointer border-0 bg-transparent text-2xl leading-none text-slate-500;
}

.import-summary-close:hover {
  color: #0f172a;
}

.import-summary-table-wrap {
  @apply mt-2 overflow-hidden rounded-[10px];
  border: 1px solid var(--line);
}

.import-summary-table {
  @apply w-full text-sm;
  border-collapse: collapse;
}

.import-summary-table th,
.import-summary-table td {
  @apply px-3 py-2.5;
  border-bottom: 1px solid var(--line);
}

.import-summary-table th {
  @apply bg-slate-50 text-left;
  color: #475467;
}

.import-summary-table td:last-child,
.import-summary-table th:last-child {
  @apply w-24 text-right;
}

.import-summary-table tbody tr:last-child td {
  border-bottom: none;
}

.import-summary-failed-list {
  @apply mt-2.5 rounded-[10px] px-3 py-2.5 text-[13px];
  border: 1px solid #fecaca;
  background: #fef2f2;
  color: #991b1b;
}

.import-summary-failed-title {
  @apply mb-1.5 font-bold;
}

.import-summary-failed-list ul {
  @apply m-0 pl-[18px];
}

.import-summary-failed-list li + li {
  @apply mt-1;
}

.settings-twofactor-grid {
  @apply grid gap-3;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.settings-subcard {
  @apply rounded-xl bg-white p-3;
  border: 1px solid var(--line);
}

.settings-subcard h3 {
  @apply mb-2.5 mt-0;
}

.toast-stack {
  @apply fixed grid list-none gap-2.5 p-0;
  top: 16px;
  right: 16px;
  z-index: 1400;
  width: min(420px, calc(100vw - 20px));
  margin: 0;
}

.toast-item {
  @apply relative flex items-center justify-between overflow-hidden rounded-[10px] px-3.5 py-3;
  border: 1px solid #bbdfc6;
  background: #dff4e5;
  color: #0f5132;
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.12);
  animation: toast-in 240ms var(--ease-out-strong) both;
}

.toast-item.error {
  border-color: #f2b8c1;
  background: #fde7eb;
  color: #9f1239;
}

.toast-item.warning {
  border-color: #f2b8c1;
  background: #fde7eb;
  color: #9f1239;
}

.toast-text {
  @apply pr-2.5 font-bold;
}

.toast-close {
  @apply cursor-pointer border-0 bg-transparent text-xl;
  color: inherit;
  transition: transform var(--dur-fast) var(--ease-out-soft), opacity var(--dur-fast) var(--ease-smooth);
}

.toast-close:hover {
  transform: scale(1.08);
  opacity: 0.84;
}

.toast-progress {
  @apply absolute bottom-0 left-0 h-[3px] w-full;
  background: rgba(15, 23, 42, 0.2);
  animation: toast-life 4.5s linear forwards;
}