.qm-feedback-page { max-width: 760px; padding-top: clamp(24px, 5vw, 44px); }
.qm-feedback-heading { text-align: center; margin: 0 auto 26px; max-width: 520px; }
.qm-feedback-icon { display: inline-grid; place-items: center; width: 52px; height: 52px; border-radius: 16px; background: var(--qm-soft); color: var(--qm-action); font-size: 24px; margin-bottom: 14px; }
.qm-feedback-heading h1 { color: var(--qm-title); font-size: clamp(1.6rem, 5vw, 2.25rem); letter-spacing: -.035em; text-wrap: balance; }
.qm-feedback-heading p { margin: 10px 0 0; line-height: 1.65; text-wrap: pretty; }
.qm-feedback-form { padding: clamp(16px, 4vw, 28px); border: 1px solid var(--qm-border); border-radius: 24px; background: var(--qm-card); }
.qm-feedback-ratings { display: grid; gap: 12px; }
.qm-feedback-rating { min-width: 0; margin: 0; padding: 16px 8px; border: 1px solid var(--qm-border); border-radius: 14px; }
.qm-feedback-rating legend { float: none; width: auto; margin: 0; padding: 0 5px; font-size: .9rem; font-weight: 700; color: var(--qm-title); text-wrap: balance; overflow-wrap: anywhere; max-width: 100%; }
.qm-feedback-rating legend i { margin-inline-end: 8px; color: var(--qm-action); }
.qm-feedback-stars { display: flex; justify-content: center; gap: 4px; }
.qm-feedback-star { position: relative; display: grid; place-items: center; width: 44px; height: 44px; margin: 0; border-radius: 10px; color: color-mix(in srgb, var(--qm-text) 25%, var(--qm-card)); cursor: pointer; transition: color 150ms ease, background-color 150ms ease; }
.qm-feedback-star input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; margin: 0; }
.qm-feedback-star i { pointer-events: none; font-size: 28px; }
.qm-feedback-star.is-active { color: #d99513; }
.qm-feedback-star:has(input:focus-visible) { outline: 2px solid var(--qm-action); outline-offset: 2px; }
.qm-feedback-star:has(input:disabled) { cursor: default; }
.qm-feedback-comment { margin-top: 24px; display: grid; gap: 10px; }
.qm-feedback-comment > label { font-weight: 700; color: var(--qm-title); }
.qm-feedback-comment textarea { width: 100%; min-height: 120px; resize: vertical; border: 1px solid var(--qm-border); border-radius: 12px; padding: 14px; font: inherit; font-size: 16px; line-height: 1.6; color: var(--qm-text); background: var(--qm-bg); }
.qm-feedback-comment textarea:focus-visible { outline: 2px solid var(--qm-action); outline-offset: 2px; }
.qm-feedback-count { justify-self: end; font-size: .75rem; font-variant-numeric: tabular-nums; }
.qm-feedback-submit { width: 100%; min-height: 48px; display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 18px; border: 0; border-radius: 12px; padding: 12px 16px; color: #fff; background: var(--qm-action); font: inherit; font-weight: 700; transition: opacity 150ms ease; }
.qm-feedback-submit:disabled { opacity: .5; cursor: not-allowed; }
.qm-feedback-submit:focus-visible, .qm-feedback-return:focus-visible { outline: 2px solid var(--qm-action); outline-offset: 3px; }
.qm-feedback-return { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; margin-top: 8px; color: var(--qm-text); text-decoration: none; }
.qm-feedback-status { margin: 16px 0 0; padding: 14px; border: 1px solid var(--qm-border); border-radius: 12px; background: var(--qm-soft); line-height: 1.6; overflow-wrap: anywhere; }
.qm-feedback-status.is-error { border-color: #bd4545; }
@media (hover: hover) { .qm-feedback-star:hover { background: var(--qm-soft); } .qm-feedback-submit:not(:disabled):hover { opacity: .88; } }
@media (prefers-reduced-motion: reduce) { .qm-feedback-star, .qm-feedback-submit { transition: none; } }