dialog.rat-confirm {
  box-sizing: border-box; width: min(480px, calc(100vw - 32px)); max-height: calc(100dvh - 40px);
  margin: auto; padding: 26px; overflow: auto; color: #e4eee8; background: #101e17;
  border: 1px solid #426c55; border-radius: 20px; box-shadow: 0 24px 90px #0009;
  font: 15px/1.55 system-ui, sans-serif; text-align: left; color-scheme: dark;
}
dialog.rat-confirm::backdrop { background: #0208069e; backdrop-filter: blur(3px); }
.rat-confirm .rat-confirm-brand { display: block; color: #91c8a8; font-size: 10px; font-weight: 750; letter-spacing: .14em; }
.rat-confirm h2 { margin: 8px 0 12px; font-size: 22px; line-height: 1.25; color: #ecf5ef; }
.rat-confirm .rat-confirm-message { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; color: #c3d5c9; }
.rat-confirm .rat-confirm-actions { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
.rat-confirm button { border: 1px solid #41634e; border-radius: 11px; padding: 10px 18px; min-height: 44px; font: inherit; font-weight: 650; cursor: pointer; }
.rat-confirm .rat-confirm-cancel { color: #dbe8df; background: #1b3024; }
.rat-confirm .rat-confirm-accept { color: #102319; background: #91d3ac; border-color: #91d3ac; }
.rat-confirm .rat-confirm-danger { color: #ffe4e1; background: #70382f; border-color: #aa6254; }
.rat-confirm button:hover { filter: brightness(1.12); }
.rat-confirm button:focus-visible { outline: 2px solid #dbf7e7; outline-offset: 3px; }
@media (max-width: 480px) { dialog.rat-confirm { padding: 22px; border-radius: 16px; } .rat-confirm .rat-confirm-actions button { flex: 1; } }