.spfs-dialog[hidden], .spfs-mask[hidden],
.spfs-dialog [hidden] { display: none !important; }

.spfs-mask {
  position: fixed; inset: 0; z-index: 2147483645;
  background: rgba(0, 0, 0, .82);
}
dialog.spfs-dialog {
  position: fixed; inset: 0; margin: auto;
  z-index: 2147483646; box-sizing: border-box;
  width: min(440px, calc(100vw - 32px)); height: max-content;
  max-height: calc(100vh - 32px);
  max-height: calc(100dvh - 32px);
  overflow-y: auto;
  padding: 30px;
  color: #f4f4f5; background: #18181b;
  border: 1px solid #34d399; border-top-width: 4px;
  border-radius: 12px;
  box-shadow: 0 20px 90px #000b, 0 0 35px #34d39912;
  font: 16px/1.6 system-ui, sans-serif;
  text-align: center;
}
dialog.spfs-dialog::backdrop { background: rgba(0, 0, 0, .82); }
dialog.spfs-dialog[data-fallback="true"] {
  inset: auto; left: 50%; top: 50%; margin: 0;
  transform: translate(-50%, -50%);
}
.spfs-brand {
  color: #34d399; font-size: 12px; font-weight: 700;
  letter-spacing: 3px;
}
.spfs-icon {
  margin: 12px 0 4px; color: #34d399;
  font: 64px/1.1 system-ui, sans-serif;
}
.spfs-title {
  margin: 12px 0; color: #fafafa;
  font: 800 26px/1.35 system-ui, sans-serif;
}
.spfs-description {
  margin: 0 0 18px; color: #a1a1aa;
  font: 14px/1.8 system-ui, sans-serif;
}
.spfs-notice {
  margin: 0; color: #fbbf24; font-size: 12px;
}
.spfs-notice:not(:empty) { margin-bottom: 14px; }
.spfs-actions { display: flex; flex-direction: column; gap: 10px; }
.spfs-dialog button {
  box-sizing: border-box; width: 100%; min-height: 46px;
  padding: 10px 16px; border-radius: 6px; cursor: pointer;
  font: 700 16px/1.4 system-ui, sans-serif;
  touch-action: manipulation;
}
.spfs-dialog .spfs-primary {
  background: #34d399; color: #052e23; border: 1px solid #34d399;
}
.spfs-dialog .spfs-primary:hover { background: #6ee7b7; }
.spfs-dialog .spfs-secondary {
  background: #27272a; color: #a1a1aa; border: 1px solid #3f3f46;
  font-size: 14px;
}
.spfs-dialog button:focus-visible {
  outline: 3px solid #a7f3d0; outline-offset: 3px;
}
.spfs-dialog button:disabled { opacity: .6; cursor: default; }
@media (max-height: 450px) {
  dialog.spfs-dialog { padding: 16px 24px; }
  .spfs-icon { font-size: 38px; margin-top: 4px; }
  .spfs-title { font-size: 22px; margin: 6px 0; }
  .spfs-description { margin-bottom: 10px; }
  .spfs-actions { flex-direction: row; }
}