.app-modal-lock { overflow: hidden; }
.app-modal-layer { position: fixed; inset: 0; z-index: 12000; display: grid; place-items: center; padding: 18px; background: rgba(10, 22, 42, .58); backdrop-filter: blur(5px); opacity: 0; visibility: hidden; transition: opacity .18s ease, visibility .18s ease; }
.app-modal-layer.is-open { opacity: 1; visibility: visible; }
.app-modal-dialog { width: min(100%, 460px); background: #fff; border-radius: 18px; box-shadow: 0 24px 70px rgba(0, 0, 0, .28); overflow: hidden; transform: translateY(14px) scale(.98); transition: transform .2s ease; }
.app-modal-layer.is-open .app-modal-dialog { transform: none; }
.app-modal-accent { height: 6px; background: #1976d2; }
.app-modal-dialog[data-type=success] .app-modal-accent { background: #2e7d32; }
.app-modal-dialog[data-type=error] .app-modal-accent { background: #c62828; }
.app-modal-dialog[data-type=warning] .app-modal-accent { background: #f57c00; }
.app-modal-body { padding: 26px; }
.app-modal-icon { width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center; margin-bottom: 16px; background: #e3f2fd; color: #1565c0; font-size: 25px; }
.app-modal-dialog[data-type=success] .app-modal-icon { background: #e8f5e9; color: #2e7d32; }
.app-modal-dialog[data-type=error] .app-modal-icon { background: #ffebee; color: #c62828; }
.app-modal-dialog[data-type=warning] .app-modal-icon { background: #fff3e0; color: #ef6c00; }
.app-modal-title { margin: 0 0 8px; color: #172033; font-size: 1.25rem; font-weight: 700; }
.app-modal-message { margin: 0; color: #586477; line-height: 1.55; white-space: pre-line; }
.app-modal-secret { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 8px; margin-top: 18px; padding: 8px; border: 1px solid #d8e1eb; border-radius: 10px; background: #f7f9fc; }
.app-modal-secret[hidden] { display: none; }
.app-modal-secret-code { padding: 5px 8px; color: #172033; font-size: 1.05rem; font-weight: 700; letter-spacing: .05em; overflow-wrap: anywhere; }
.app-modal-copy { display: flex; align-items: center; gap: 6px; border: 0; border-radius: 8px; padding: 9px 12px; background: #e3f2fd; color: #0d47a1; font-weight: 650; cursor: pointer; }
.app-modal-actions { display: flex; justify-content: flex-end; gap: 10px; padding: 0 26px 24px; }
.app-modal-button { border: 0; border-radius: 9px; padding: 10px 18px; font-weight: 650; cursor: pointer; }
.app-modal-confirm { background: linear-gradient(135deg, #0d47a1, #1976d2); color: #fff; }
.app-modal-dialog[data-type=success] .app-modal-confirm { background: linear-gradient(135deg, #1b5e20, #43a047); }
.app-modal-dialog[data-type=error] .app-modal-confirm,
.app-modal-dialog[data-type=warning] .app-modal-confirm { background: linear-gradient(135deg, #b71c1c, #e53935); }
.app-modal-cancel { background: #eef2f6; color: #344054; }
.app-modal-button:focus-visible,
.app-modal-copy:focus-visible { outline: 3px solid rgba(25, 118, 210, .3); outline-offset: 2px; }

@media (max-width: 575.98px) {
    .app-modal-layer { align-items: end; padding: 10px; }
    .app-modal-dialog { width: 100%; border-radius: 18px 18px 12px 12px; }
    .app-modal-body { padding: 22px 20px; }
    .app-modal-secret { grid-template-columns: 1fr; }
    .app-modal-copy { justify-content: center; }
    .app-modal-actions { padding: 0 20px 20px; }
    .app-modal-button { flex: 1; }
}