.feedback-page { min-height: 100vh; background: #fbfaf7; color: #201915; }
.feedback-nav { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 1rem clamp(1rem,4vw,2rem); border-block-end: 1px solid #e9e1d8; gap: 1rem; }
.feedback-logo { width: 96px; height: auto; }
.feedback-lang,.feedback-home { display: inline-flex; align-items: center; gap: .4rem; color: #8b1e2d; min-height: 44px; font-weight: 700; text-decoration: none; }
.feedback-home { justify-self: end; min-width: 44px; justify-content: center; }
.feedback-lang,.feedback-home { width:44px; height:44px; justify-content:center; border:1px solid #e9d4d8; border-radius:50%; }
.feedback-lang span { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
.feedback-shell { width: min(100%,680px); margin: 0 auto; padding: clamp(2rem,7vw,4rem) 1.2rem 4rem; }
.feedback-eyebrow { color: #8b1e2d; font-weight: 800; letter-spacing: .06em; font-size: .9rem; margin-block-end: 1rem; }
.feedback-shell h1 { font-size: clamp(2rem,6vw,3.4rem); font-weight: 900; line-height: 1.2; margin: 0 0 1.5rem; max-width: 20ch; overflow-wrap: anywhere; }
.feedback-shell h2 { font-size: 1.25rem; line-height: 1.5; margin: 0 0 .8rem; }
.feedback-shell p { line-height: 1.65; }
.feedback-live { color: #33613f; min-height: 1.8rem; margin-block-end: .75rem; font-weight: 700; }
.feedback-error { background: #fbe6e7; color: #852233; border-radius: 8px; padding: .8rem 1rem; margin-block: .5rem 1rem; }
.feedback-reactions { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: .5rem; direction: ltr; margin-block: 2rem; }
.feedback-reactions button { font: inherit; padding: .8rem .25rem; min-height: 92px; color: #38251c; border: 1px solid #d7cabc; border-radius: 16px; background: #fffdf9; cursor: pointer; }
.feedback-reactions span { display: block; font-size: clamp(1.8rem,6vw,2.7rem); line-height: 1.3; }
.feedback-reactions small { display: block; font-size: .85rem; margin-block-start: .7rem; line-height: 1.2; }
.feedback-reactions [aria-pressed=true] { background: #f9e6cf; border-color: #8b1e2d; outline: 2px solid #8b1e2d; }
.feedback-soft { color: #665447; }
.feedback-actions { display: flex; flex-direction: column; gap: .7rem; margin-block: 1.5rem; }
.feedback-button { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; min-height: 48px; border: 1px solid #b9a998; background: #fffdf9; padding: .8rem 1rem; border-radius: 10px; font: inherit; font-weight: 700; text-decoration: none; color: #522e23; cursor: pointer; margin: .25rem .15rem; overflow-wrap: anywhere; }
.feedback-actions .feedback-button { margin: 0; }
.feedback-button.is-primary { background: #972a3b; border-color: #972a3b; color: #fff9ee; }
.feedback-button:hover:not(:disabled),.feedback-product:hover:not(:disabled) { background: #f4e8da; }
.feedback-button.is-primary:hover:not(:disabled) { background: #7b2030; }
.feedback-products { display: flex; flex-direction: column; gap: .8rem; margin-block: 1.5rem; }
.feedback-product { text-align: start; border: 1px solid #c9bcae; border-radius: 12px; background: #fffdf9; font: inherit; padding: 1rem; min-height: 70px; cursor: pointer; color: inherit; overflow-wrap: anywhere; }
.feedback-product strong,.feedback-product small { display: block; }
.feedback-product small { margin-block-start: .35rem; color: #665447; }
.feedback-chips { display: flex; flex-wrap: wrap; gap: .6rem; margin-block: 1rem; }
.feedback-chip { display: inline-flex; align-items: center; gap: .65rem; min-height: 48px; border: 1px solid #b9a998; border-radius: 10px; padding: .6rem .85rem; background: #fffdf9; cursor: pointer; max-width: 100%; overflow-wrap: anywhere; }
.feedback-chip input { width: 1.2rem; height: 1.2rem; flex-shrink: 0; accent-color: #972a3b; }
.feedback-chip:has(:checked) { border-color: #972a3b; background: #f9e5dc; font-weight: 700; }
.feedback-detail { margin-inline-start: 1rem; margin-block: .5rem; }
.feedback-field { display: flex; flex-direction: column; gap: .5rem; font-weight: 700; margin-block: 1.5rem; }
.feedback-field input,.feedback-field textarea { border: 1px solid #b9a998; border-radius: 8px; padding: .85rem; background: #fffdf9; color: #201915; font: inherit; font-weight: 400; width: 100%; min-height: 48px; }
.feedback-field textarea { resize: vertical; }
.feedback-optional { border-block-start: 1px solid #d9cbbd; padding-block-start: 1.5rem; margin-block-start: 1.5rem; }
.feedback-google { border-block-start: 1px solid #d9cbbd; padding-block-start: 1rem; margin-block-start: 2rem; }
.feedback-received { font-size: 1.25rem; }
.feedback-signal { display: flex; flex-wrap: wrap; gap: .4rem; }
.feedback-signal [aria-pressed=true] { border-color: #972a3b; background: #f9e5dc; }
.feedback-summary { display: flex; flex-wrap: wrap; gap: .5rem; margin-block: 1rem; }
.feedback-link-button { border: 0; background: transparent; color: #8b1e2d; text-decoration: underline; min-height: 44px; padding: .5rem; font: inherit; cursor: pointer; }
.feedback-shell :focus-visible,.feedback-nav :focus-visible { outline: 3px solid #8b1e2d; outline-offset: 4px; }
.feedback-shell button:disabled,.feedback-shell input:disabled,.feedback-shell textarea:disabled { opacity: .65; cursor: wait; }
#feedbackCard { animation: feedback-in 150ms ease-out; }
@keyframes feedback-in { from { opacity: .6; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { #feedbackCard { animation: none; } }
@media (max-width:380px) { .feedback-reactions { gap: .3rem; } .feedback-reactions small { font-size: .75rem; } .feedback-shell { padding-inline: .85rem; } }
[hidden] { display: none !important; }