.ayna-toast-region { position: fixed; z-index: 10000; top: 18px; right: 18px; display: grid; width: min(340px, calc(100vw - 36px)); gap: 8px; pointer-events: none; }
.ayna-toast { display: grid; grid-template-columns: 8px minmax(0, 1fr); align-items: center; gap: 11px; min-height: 44px; padding: 10px 14px; border: 1px solid #d2dfdb; border-radius: 10px; background: #fff; color: #173a35; box-shadow: 0 8px 24px rgba(23, 58, 53, .12); font: 600 14px/1.35 "Segoe UI", Arial, sans-serif; pointer-events: none; animation: ayna-toast-in .2s ease both; }
.ayna-toast::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #37776b; }
.ayna-toast.is-error::before { background: #b44a42; }
.ayna-toast.is-success::before { background: #2f856b; }
.ayna-toast.is-warning::before { background: #d4a72f; }
.ayna-dialog { width: min(430px, calc(100vw - 32px)); padding: 0; overflow: hidden; border: 1px solid #cbdad6; border-radius: 16px; background: #fff; color: #173a35; box-shadow: 0 24px 70px rgba(23, 58, 53, .22); font-family: "Segoe UI", Arial, sans-serif; }
.ayna-dialog::backdrop { background: rgba(14, 37, 33, .45); backdrop-filter: blur(2px); }
.ayna-dialog__body { padding: 22px 22px 16px; }
.ayna-dialog__title { margin: 0 0 8px; font-size: 19px; line-height: 1.25; }
.ayna-dialog__message { margin: 0; color: #526963; font-size: 14px; line-height: 1.5; white-space: pre-line; }
.ayna-dialog__actions { display: flex; justify-content: flex-end; gap: 8px; padding: 14px 22px 18px; border-top: 1px solid #e2e9e7; background: #f8faf9; }
.ayna-dialog__actions button { width: auto; min-width: 108px; min-height: 40px; margin: 0; padding: 0 15px; }
.ayna-dialog__cancel { border: 1px solid #bdcdc8 !important; background: #fff !important; color: #173a35 !important; box-shadow: none !important; }
.ayna-dialog__confirm.is-danger { background: #a9443e !important; color: #fff !important; }
@keyframes ayna-toast-in { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } }
@media (max-width: 560px) { .ayna-toast-region { top: 10px; right: 10px; width: calc(100vw - 20px); } .ayna-dialog__actions { flex-direction: column-reverse; } .ayna-dialog__actions button { width: 100%; } }
@media (prefers-reduced-motion: reduce) { .ayna-toast { animation: none; } }