.hero-section.feedback-page { --feedback-gutter: 16px; display: block; height: 100%; min-height: 0; overflow-y: auto; padding: max(12px, env(safe-area-inset-top)) var(--feedback-gutter) max(20px, env(safe-area-inset-bottom)) !important; }
.feedback-view { width: 100%; max-width: 640px; margin-inline: auto; }
.feedback-content { padding: 12px 0 24px; }
.feedback-intro { margin: 0 0 24px; color: #e3eee7; font-size: 16px; line-height: 1.55; }
.feedback-form { display: grid; gap: 20px; text-align: left; }
.feedback-form[hidden], .feedback-success[hidden], .feedback-error[hidden] { display: none; }
.feedback-field { display: grid; gap: 8px; min-width: 0; }
.feedback-field label { color: #f5f8f6; font-size: 15px; font-weight: 600; }
.feedback-field :is(select, textarea) { box-sizing: border-box; width: 100%; min-width: 0; border: 1px solid var(--product-line-strong); border-radius: var(--product-radius-control); background: var(--product-surface); color: #f5f8f6; font: inherit; font-size: 16px; line-height: 1.5; padding: 12px; caret-color: var(--product-focus); }
.feedback-field select { min-height: var(--product-control-regular); }
.feedback-field textarea { min-height: 150px; resize: vertical; }
.feedback-field [aria-invalid="true"] { border-color: var(--product-error); }
.feedback-meta { display: flex; align-items: baseline; gap: 12px; color: #bed1c5; font-size: 14px; line-height: 1.5; }
.feedback-meta p { flex: 1; margin: 0; }
#feedbackCount { flex-shrink: 0; font-variant-numeric: tabular-nums; }
.feedback-note { margin: 0; color: #bed1c5; font-size: 14px; line-height: 1.5; }
.feedback-error { margin: 0; color: var(--product-error); font-size: 15px; line-height: 1.5; }
.feedback-form .app-primary-action, .feedback-success .app-primary-action { width: 100%; max-width: none; text-decoration: none; font-size: 16px; }
.feedback-secondary { width: 100%; min-height: var(--product-control-compact); margin-top: 12px; border: 1px solid var(--product-line); border-radius: var(--product-radius-control); background: var(--product-surface); color: #e3eee7; cursor: pointer; font: inherit; font-size: 15px; padding: 10px 16px; }
.feedback-secondary:hover { background: var(--product-surface-hover); }
.feedback-page :is(select, textarea, button, a):focus-visible { outline: 2px solid var(--product-focus); outline-offset: 3px; }
.feedback-page button:disabled { cursor: wait; opacity: .65; }
.feedback-success h2 { margin: 12px 0; font-family: var(--font-head); font-size: 26px; color: #f5f8f6; }
.feedback-success p { margin: 0 0 24px; color: #e3eee7; font-size: 16px; line-height: 1.55; }
@media (max-width: 420px) { .hero-section.feedback-page { --feedback-gutter: 12px; } .feedback-content { padding-top: 8px; } .feedback-intro { margin-bottom: 20px; } .feedback-form { gap: 16px; } .feedback-meta { align-items: flex-start; gap: 8px; } }