.feedback-dialog {
    width: min(calc(100vw - 28px), 448px);
    max-width: 448px;
    max-height: none;
    overflow: visible;
    padding: 0;
    border: 0;
    border-radius: 28px;
    background: transparent;
    color: #183756;
    box-shadow: none;
}
.feedback-dialog::backdrop {
    background: rgba(5, 20, 45, .58);
    backdrop-filter: blur(8px);
    animation: feedback-backdrop-in .22s ease both;
}
.feedback-dialog.is-closing::backdrop { animation: feedback-backdrop-out .15s ease both; }
.feedback-dialog[open] { animation: feedback-dialog-in .34s cubic-bezier(.2, .8, .2, 1) both; }
.feedback-dialog.is-closing { animation: feedback-dialog-out .16s cubic-bezier(.4, 0, 1, 1) both; }
.feedback-surface {
    position: relative;
    isolation: isolate;
    display: grid;
    justify-items: center;
    gap: 0;
    max-height: none;
    overflow: visible;
    padding: 34px 27px 25px;
    border: 1px solid #e0eafa;
    border-radius: 28px;
    background: radial-gradient(ellipse at 50% -14%, #e8f4ff 0, transparent 46%), linear-gradient(155deg, #fff, #fbfcff 72%);
    text-align: center;
    box-shadow: 0 30px 90px rgba(0, 22, 55, .29), 0 8px 24px rgba(14, 61, 121, .1);
}
.feedback-surface::before {
    position: absolute;
    inset: 0 22% auto;
    height: 3px;
    border-radius: 0 0 8px 8px;
    background: linear-gradient(90deg, #10a7e8, #1567dc 55%, #5b4bdb);
    content: "";
}
.feedback-decoration {
    position: absolute;
    z-index: -1;
    border: 1px solid #2585e912;
    border-radius: 50%;
    pointer-events: none;
}
.feedback-decoration-one { top: -88px; left: -55px; width: 190px; height: 190px; box-shadow: 0 0 0 18px #2585e908; }
.feedback-decoration-two { right: -62px; bottom: -115px; width: 210px; height: 210px; }
.feedback-close {
    position: absolute;
    top: 12px;
    right: 12px;
    display: grid;
    place-items: center;
    width: 35px;
    height: 35px;
    border: 1px solid #e5ecf4;
    border-radius: 12px;
    background: rgba(255, 255, 255, .9);
    color: #718198;
    cursor: pointer;
    transition: background .18s ease, color .18s ease, transform .18s ease;
}
.feedback-close:hover { transform: rotate(5deg); background: #f1f6fc; color: #173e69; }
.feedback-close .material-symbols-outlined { font-size: 18px; }
.feedback-icon-wrap {
    position: relative;
    display: grid;
    place-items: center;
    width: 68px;
    height: 68px;
    margin: 0 0 15px;
    border: 1px solid #cfe5ff;
    border-radius: 23px;
    background: linear-gradient(145deg, #eff7ff, #e2f0ff);
    color: #1476df;
    box-shadow: 0 10px 26px #1176df1b;
    animation: feedback-icon-in .48s cubic-bezier(.2, .8, .2, 1) both;
}
.feedback-icon-wrap::after {
    position: absolute;
    inset: -7px;
    border: 1px solid #6db3f42b;
    border-radius: 28px;
    content: "";
    animation: feedback-ring-in .8s ease both;
}
.feedback-icon-wrap > .material-symbols-outlined { font-size: 33px; font-variation-settings: 'FILL' 1; }
.feedback-eyebrow { color: #4382c0; font-size: .59rem; font-weight: 900; letter-spacing: .15em; }
.feedback-surface h2 {
    max-width: 100%;
    margin: 8px 0 9px;
    color: #15375f;
    font: 800 clamp(1.18rem, 5vw, 1.5rem)/1.2 Manrope, sans-serif;
    letter-spacing: -.04em;
    overflow-wrap: anywhere;
}
.feedback-surface > p {
    max-width: 370px;
    margin: 0;
    color: #647a95;
    font: 500 .86rem/1.62 'DM Sans', sans-serif;
    white-space: pre-line;
    overflow-wrap: anywhere;
}
.feedback-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;
    width: 100%;
    margin-top: 22px;
}
.feedback-primary, .feedback-cancel {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 128px;
    min-height: 45px;
    padding: 0 17px;
    border: 1px solid transparent;
    border-radius: 14px;
    font: 800 .77rem 'DM Sans', sans-serif;
    cursor: pointer;
    transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.feedback-primary { background: linear-gradient(110deg, #1377e7, #058be9); color: #fff; box-shadow: 0 8px 18px #106fd932; }
.feedback-primary:hover { transform: translateY(-2px); box-shadow: 0 11px 23px #106fd94d; }
.feedback-primary:active { transform: translateY(0) scale(.98); }
.feedback-cancel { border-color: #dce6f1; background: #fff; color: #55708f; }
.feedback-cancel:hover { background: #f4f8fc; }
.feedback-cancel[hidden] { display: none; }
.feedback-error .feedback-icon-wrap { border-color: #f6d0cc; background: linear-gradient(145deg, #fff3f1, #ffe9e7); color: #bd3f3a; box-shadow: 0 9px 24px #bd3f3a18; }
.feedback-error .feedback-icon-wrap::after { border-color: #df6a6129; }
.feedback-error .feedback-eyebrow { color: #b34842; }
.feedback-warning .feedback-icon-wrap, .feedback-confirm .feedback-icon-wrap { border-color: #f1ddb1; background: linear-gradient(145deg, #fff9e9, #fff0d3); color: #a56a0a; box-shadow: 0 9px 24px #a56a0a16; }
.feedback-warning .feedback-icon-wrap::after, .feedback-confirm .feedback-icon-wrap::after { border-color: #d9a23b2b; }
.feedback-warning .feedback-eyebrow, .feedback-confirm .feedback-eyebrow { color: #9c701f; }
.feedback-success .feedback-icon-wrap { border-color: #bfe8d6; background: linear-gradient(145deg, #f0fff7, #def8ec); color: #0a8c68; box-shadow: 0 9px 24px #0a8c6818; }
.feedback-success .feedback-icon-wrap::after { border-color: #36b68d2b; }
.feedback-success .feedback-eyebrow { color: #218269; }
.feedback-dialog button:focus-visible { outline: 3px solid #64b4ff; outline-offset: 3px; }
@keyframes feedback-dialog-in { from { opacity: 0; transform: translateY(16px) scale(.955); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes feedback-dialog-out { to { opacity: 0; transform: translateY(5px) scale(.985); } }
@keyframes feedback-backdrop-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes feedback-backdrop-out { to { opacity: 0; } }
@keyframes feedback-icon-in { from { opacity: 0; transform: scale(.68) rotate(-10deg); } 72% { transform: scale(1.06) rotate(2deg); } to { opacity: 1; transform: scale(1) rotate(0); } }
@keyframes feedback-ring-in { 0% { opacity: 0; transform: scale(.8); } 42% { opacity: .9; } 100% { opacity: .35; transform: scale(1); } }
@media (max-width: 480px) {
    .feedback-dialog { width: calc(100vw - 22px); max-width: none; border-radius: 24px; }
    .feedback-surface { padding: 29px 19px 20px; border-radius: 24px; }
    .feedback-icon-wrap { width: 59px; height: 59px; border-radius: 20px; }
    .feedback-icon-wrap > .material-symbols-outlined { font-size: 29px; }
    .feedback-surface > p { font-size: .81rem; }
    .feedback-actions { margin-top: 19px; }
    .feedback-primary, .feedback-cancel { min-height: 43px; flex: 1 1 120px; }
}
@media (prefers-reduced-motion: reduce) {
    .feedback-dialog, .feedback-dialog::backdrop, .feedback-icon-wrap, .feedback-icon-wrap::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}