.toast-region { position:fixed; inset:20px 20px auto auto; margin:0; padding:0; border:0; width:360px; max-width:calc(100vw - 32px); background:transparent; color:var(--ink); overflow:visible; }
.toast-region:popover-open { display:grid; gap:10px; }
.toast { display:flex; align-items:flex-start; gap:10px; padding:13px 12px; background:var(--surface); border:1px solid var(--line); border-radius:8px; box-shadow:0 6px 24px #0002; animation:toast-enter 150ms ease-out; }
.toast-symbol { display:flex; padding-top:1px; color:var(--muted); }
.toast-symbol .icon { width:17px; height:17px; }
.toast-success .toast-symbol { color:#2e9c63; }
.toast-error .toast-symbol { color:#cf5274; }
.toast-content { flex:1; min-width:0; font-size:12px; line-height:1.7; overflow-wrap:anywhere; display:grid; gap:4px; }
.toast-action { justify-self:start; border:0; padding:0; background:transparent; font:inherit; color:var(--ink); text-decoration:underline; cursor:pointer; }
.toast-close { display:flex; padding:2px; border:0; background:transparent; color:var(--muted); cursor:pointer; }
.toast-close .icon { width:15px; height:15px; }
.toast-close:hover { color:var(--ink); }
@keyframes toast-enter { from { opacity:0; transform:translateY(-5px); } to { opacity:1; transform:translateY(0); } }
@media(prefers-reduced-motion:reduce){.toast{animation:none;}}
@media(max-width:540px){.toast-region{inset:12px 16px auto 16px;width:auto;max-width:none;}}