#toasts{position:fixed;top:1rem;right:1rem;z-index:200;display:flex;flex-direction:column;gap:.7rem;width:min(390px,calc(100vw - 2rem));pointer-events:none}
.toast{pointer-events:auto;position:relative;overflow:hidden;display:flex;gap:.75rem;align-items:flex-start;padding:.9rem 1rem;border-radius:14px;background:var(--paper);border:1.5px solid var(--ink);box-shadow:var(--sh);cursor:pointer;animation:tin .35s cubic-bezier(.2,.9,.3,1.2)}
.toast.out{animation:tout .25s ease-in forwards}
.toast i{flex:none;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;border:1.5px solid var(--ink);background:#c9f0e0}.toast i svg{width:15px;height:15px;stroke:var(--ink);fill:none;stroke-width:2.8;stroke-linecap:round;stroke-linejoin:round}
.toast.err i{background:#ffd5cc}.toast.info i{background:var(--hl)}
.toast span{flex:1;line-height:1.4;font-size:.93rem;padding-top:2px}
.toast .tp{position:absolute;left:0;bottom:0;height:4px;width:100%;background:var(--ac2);transform-origin:left;animation:tp linear forwards}.toast.err .tp{background:var(--bad)}.toast.info .tp{background:var(--ink)}
@keyframes tin{from{opacity:0;transform:translateX(34px) scale(.96)}}@keyframes tout{to{opacity:0;transform:translateX(34px)}}@keyframes tp{to{transform:scaleX(0)}}
.ov{position:fixed;inset:0;z-index:150;background:#15120fb3;display:grid;place-items:center;padding:1rem;animation:fade .2s}
.dlg{background:var(--paper);border:1.5px solid var(--ink);border-radius:22px;padding:1.6rem;max-width:430px;width:100%;box-shadow:8px 8px 0 var(--ink);animation:pop .22s ease-out}.dlg h3{margin-bottom:.5rem}.acts{display:flex;gap:.6rem;justify-content:flex-end;margin-top:1.2rem}
#toasts{top:4.8rem}