.feedback-layout { display: grid; grid-template-columns: minmax(0, 680px) minmax(0, 260px); gap: 80px; padding-block: 48px 80px; }
.feedback-main { min-width: 0; }
.form-intro, .field-hint, .submission-note, .feedback-aside p { color: var(--muted); }
.form-intro { margin: 0 0 28px; font-size: 14px; }
#feedback-fields { min-width: 0; margin: 0; padding: 0; border: 0; }
.form-field { margin-bottom: 24px; }
.form-field label { display: block; margin-bottom: 8px; font-size: 14px; font-weight: 600; }
.form-field label span, .issue-details summary span { color: var(--muted); font-size: 12px; font-weight: 400; }
.form-field input, .form-field select, .form-field textarea { display: block; width: 100%; min-height: 46px; padding: 11px 13px; border: 1px solid var(--line); border-radius: 8px; background: white; color: var(--ink); font: inherit; font-size: 14px; }
.form-field textarea { resize: vertical; line-height: 1.65; }
.form-field input::placeholder, .form-field textarea::placeholder { color: #6b7666; }
.form-field input:focus-visible, .form-field select:focus-visible, .form-field textarea:focus-visible, .issue-details summary:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; }
.field-hint { margin: 6px 0 8px; font-size: 12px; line-height: 1.65; }
.character-count { display: block; margin-top: 6px; text-align: right; color: var(--muted); font-size: 11px; }
.issue-details { margin-bottom: 24px; }
.issue-details summary { min-height: 54px; font-size: 14px; justify-content: start; gap: 6px; }
.issue-details summary::after { margin-left: auto; }
.issue-details .form-field:first-of-type { margin-top: 8px; }
.feedback-trap { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.submission-note { margin: 0 0 20px; font-size: 12px; line-height: 1.8; }
#feedback-submit { min-width: 160px; cursor: pointer; }
#feedback-submit:disabled { opacity: .6; cursor: default; }
.feedback-status { min-height: 24px; margin: 14px 0 0; color: #9b3434; font-size: 13px; line-height: 1.7; }
.feedback-aside { align-self: start; padding-left: 25px; border-left: 1px solid var(--line); }
.feedback-aside h2 { font-size: 21px; line-height: 1.5; letter-spacing: -.4px; }
.feedback-aside h3 { margin-top: 28px; font-size: 14px; }
.feedback-aside p, .feedback-aside > a { font-size: 13px; line-height: 1.9; }
.feedback-success { padding: 30px; border: 1px solid var(--line); border-radius: 12px; background: var(--soft); }
.feedback-success h2 { font-size: 27px; }
.feedback-success p { font-size: 14px; line-height: 1.9; }
#feedback-reference { overflow-wrap: anywhere; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
@media (max-width: 900px) { .feedback-layout { gap: 36px; grid-template-columns: minmax(0, 1fr) minmax(0, 220px); } }
@media (max-width: 650px) { .feedback-layout { grid-template-columns: minmax(0, 1fr); gap: 32px; padding-block: 30px 50px; } .feedback-aside { padding: 24px 0 0; border-left: 0; border-top: 1px solid var(--line); } #feedback-submit { width: 100%; } .feedback-success { padding: 22px; } }