.feedback-host { position: sticky; top: 0; z-index: 1100; width: 100%; }
.feedback-host:empty { display: none; }
.feedback-banner {
    --feedback-base: #edf0f3;
    --feedback-ink: #233044;
    display: flex; align-items: center; gap: .8rem;
    padding: .85rem max(1rem, 5vw); border: 0; border-bottom: 2px solid;
    background: var(--feedback-base); color: var(--feedback-ink);
    background: color-mix(in srgb, var(--feedback-base) 92%, var(--accent, #377d61));
    border-color: color-mix(in srgb, var(--feedback-ink) 65%, var(--accent, #377d61));
    font: 600 1rem/1.5 system-ui, sans-serif;
    box-shadow: 0 2px 8px #00000012;
}
.feedback-success { --feedback-base: #e1f4e7; --feedback-ink: #16442a; }
.feedback-error, .feedback-warning { --feedback-base: #fbe5e3; --feedback-ink: #76251e; }
.feedback-icon { flex: 0 0 auto; font-size: 1.4rem; }
.feedback-text { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.feedback-banner .feedback-close {
    flex: 0 0 auto; border: 1px solid currentColor; background: transparent;
    color: inherit; border-radius: .4rem; padding: .25rem .65rem; margin: 0;
    font: inherit; font-size: 1.2rem; cursor: pointer; min-width: 44px; min-height: 44px;
}
.feedback-close:focus-visible { outline: 3px solid currentColor; outline-offset: 2px; }