.sluma-confirm-overlay {
  position: fixed;
  inset: 0;
  z-index: 12050;
  display: grid;
  place-items: center;
  padding: 18px;
  background: radial-gradient(circle at 50% 18%, rgba(34, 211, 238, .1), transparent 38%), rgba(1, 5, 10, .9);
  backdrop-filter: blur(12px);
}

.sluma-confirm-overlay[hidden] { display: none !important; }

.sluma-confirm-card {
  --confirm-accent: 103, 232, 249;
  position: relative;
  width: min(450px, 94vw);
  padding: 28px 27px 24px;
  overflow: hidden;
  border: 1px solid rgba(var(--confirm-accent), .38);
  border-radius: 20px 6px;
  background: radial-gradient(circle at 50% 8%, rgba(var(--confirm-accent), .13), transparent 42%), linear-gradient(145deg, #101823, #05090f 72%);
  box-shadow: 0 34px 90px rgba(0, 0, 0, .78), 0 0 36px rgba(var(--confirm-accent), .1);
  color: #f7fbff;
  text-align: center;
}

.sluma-confirm-card::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .15;
  background-image: linear-gradient(rgba(var(--confirm-accent), .1) 1px, transparent 1px), linear-gradient(90deg, rgba(var(--confirm-accent), .1) 1px, transparent 1px);
  background-size: 27px 27px;
  mask-image: linear-gradient(#000, transparent 78%);
}

.sluma-confirm-card.is-destructive {
  --confirm-accent: 251, 113, 133;
  background: radial-gradient(circle at 50% 8%, rgba(190, 18, 60, .18), transparent 42%), linear-gradient(145deg, #1a0d12, #07090d 72%);
}

.sluma-confirm-close {
  position: absolute;
  z-index: 2;
  top: 12px;
  right: 12px;
  width: 38px;
  height: 38px;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 10px;
  background: rgba(255, 255, 255, .05);
  color: #dce7ed;
  font-size: 23px;
  cursor: pointer;
}

.sluma-confirm-art {
  position: relative;
  width: 108px;
  height: 108px;
  display: grid;
  place-items: center;
  margin: 0 auto 15px;
  border: 1px solid rgba(var(--confirm-accent), .28);
  border-radius: 18px 5px;
  background: radial-gradient(circle, rgba(var(--confirm-accent), .16), transparent 68%);
}

.sluma-confirm-art[hidden] { display: none !important; }
.sluma-confirm-art img { width: 92px; height: 92px; object-fit: contain; filter: drop-shadow(0 10px 9px rgba(0, 0, 0, .66)); }
.sluma-confirm-card > small { position: relative; color: rgb(var(--confirm-accent)); font: 800 7px/1 var(--font-game, monospace); letter-spacing: .14em; }
.sluma-confirm-card h2 { position: relative; margin: 11px 0 9px; font: 800 15px/1.35 var(--font-game, monospace); }
.sluma-confirm-card > p { position: relative; margin: 0; color: #aab8c2; font-size: 11px; line-height: 1.6; }

.sluma-confirm-detail {
  position: relative;
  margin: 15px auto 0;
  padding: 10px 12px;
  border: 1px solid rgba(var(--confirm-accent), .24);
  border-radius: 10px 3px;
  background: rgba(var(--confirm-accent), .08);
  color: #e7f7fb;
  font: 800 8px/1.45 var(--font-game, monospace);
}

.sluma-confirm-detail[hidden] { display: none !important; }
.sluma-confirm-actions { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin-top: 19px; }
.sluma-confirm-actions button { min-height: 44px; border: 1px solid rgba(148, 163, 184, .24); border-radius: 10px 3px; background: rgba(15, 23, 42, .62); color: #dce8ed; font: 800 8px/1.3 var(--font-game, monospace); cursor: pointer; }
.sluma-confirm-actions button:hover, .sluma-confirm-actions button:focus-visible { border-color: rgb(var(--confirm-accent)); outline: none; }
.sluma-confirm-accept { border-color: rgba(var(--confirm-accent), .48) !important; background: linear-gradient(145deg, rgba(var(--confirm-accent), .34), rgba(var(--confirm-accent), .15)) !important; color: #fff !important; }
body.sluma-confirm-open { overflow: hidden; }

@media (max-width: 520px) {
  .sluma-confirm-card { padding: 24px 18px 19px; }
  .sluma-confirm-art { width: 88px; height: 88px; }
  .sluma-confirm-art img { width: 74px; height: 74px; }
}