.panel-toast { display: flex; align-items: center; gap: 11px; }
.panel-toast-copy { min-width: 0; overflow-wrap: anywhere; }
.panel-feedback-icon { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; flex: 0 0 24px; color: #5ee0b4; animation: panel-feedback-pop .42s cubic-bezier(.2,.8,.3,1.2) both; }
.panel-feedback-icon svg { display: block; width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.panel-feedback-icon path { stroke-dasharray: 32; stroke-dashoffset: 32; animation: panel-feedback-draw .36s .08s ease-out forwards; }
.panel-feedback-icon[data-tone="error"] { color: #f87171; }
.panel-feedback-icon[data-tone="error"] path + path { animation-delay: .16s; }
.panel-feedback-icon[data-tone="warning"] { color: #facc15; }
.apanel-page #toast:not([hidden]) { align-items: center; }
.apanel-page #toast > .panel-feedback-icon { margin-top: 0; flex: 0 0 24px; }
@keyframes panel-feedback-pop { from { opacity: 0; transform: scale(.65); } to { opacity: 1; transform: scale(1); } }
@keyframes panel-feedback-draw { to { stroke-dashoffset: 0; } }
html:is([data-ui-motion="reduced"],[data-motion="reduce"]) .panel-feedback-icon,
html:is([data-ui-motion="reduced"],[data-motion="reduce"]) .panel-feedback-icon path { animation: none; stroke-dashoffset: 0; }
@media (prefers-reduced-motion: reduce) {
  .panel-feedback-icon, .panel-feedback-icon path { animation: none; stroke-dashoffset: 0; }
}