.footer-feedback {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 11px;
  min-height: 38px;
  padding: 7px 13px;
  border: 1px solid currentColor;
  border-radius: 999px;
  color: inherit;
  font-size: 12px;
  font-weight: 750;
  text-decoration: none;
  white-space: nowrap;
  transition: background .18s ease, transform .18s ease;
}
.footer-feedback:hover { background: rgba(127, 127, 127, .12); transform: translateY(-2px); }
.footer-feedback span { font-size: 16px; line-height: 1; }

.page-feedback {
  min-height: 100vh;
  color-scheme: dark;
  color: #f5f5f5;
  background: radial-gradient(ellipse 650px 480px at 23% 28%, rgba(29, 185, 84, .13), transparent 74%), #121212;
}
.page-feedback .site-shell { display: flex; flex-direction: column; min-height: 100vh; }
.page-feedback .site-header {
  min-height: 78px;
  margin-top: 22px;
  padding: 0 25px;
  border: 1px solid rgba(179, 179, 179, .22);
  border-radius: 22px;
  background: #212121;
}
.page-feedback .brand, .page-feedback .footer-brand { color: #f5f5f5; }
.page-feedback .brand-icon { background: #1db954; }
.page-feedback .brand-icon span { background: #121212; }
.page-feedback .header-note, .page-feedback .site-footer { color: #b3b3b3; }
.page-feedback .site-footer { border-color: rgba(179, 179, 179, .18); }
.page-feedback .eyebrow { color: #1db954; }
.page-feedback .eyebrow-dot { background: #1db954; box-shadow: 0 0 0 5px rgba(29, 185, 84, .15); }

.feedback-main {
  display: grid;
  grid-template-columns: minmax(0, .76fr) minmax(0, 1fr);
  align-items: start;
  gap: clamp(36px, 7vw, 96px);
  flex: 1;
  width: 100%;
  padding: 76px 0 94px;
}
.feedback-intro { padding-top: 34px; }
.feedback-intro h1 {
  max-width: 510px;
  margin: 23px 0 20px;
  font-size: clamp(44px, 5vw, 66px);
  line-height: 1.08;
  letter-spacing: -.065em;
}
.feedback-intro h1 em {
  color: #65d58e;
  font-family: Georgia, 'Times New Roman', serif;
  font-weight: 400;
  letter-spacing: -.075em;
}
.feedback-intro-copy { max-width: 420px; margin: 0; color: #b3b3b3; font-size: 16px; line-height: 1.65; }
.feedback-aside {
  display: flex;
  align-items: flex-start;
  gap: 15px;
  max-width: 410px;
  margin-top: 44px;
  padding-top: 22px;
  border-top: 1px solid rgba(179, 179, 179, .24);
}
.feedback-aside-icon { color: #65d58e; font-size: 25px; line-height: 1; }
.feedback-aside p { margin: 0; color: #aebdb1; font-size: 13px; line-height: 1.6; }

.feedback-card {
  min-width: 0;
  padding: clamp(26px, 3vw, 42px);
  border: 1px solid rgba(179, 179, 179, .2);
  border-radius: 25px;
  background: #212121;
  box-shadow: inset 0 1px rgba(255, 255, 255, .06), 0 26px 68px rgba(0, 0, 0, .16);
}
.feedback-card-heading { display: flex; align-items: center; justify-content: space-between; gap: 15px; margin-bottom: 30px; }
.page-feedback .field-label { margin-bottom: 8px; color: #1db954; }
.feedback-card-heading h2, .feedback-success h2 { margin: 0; font-size: clamp(29px, 3.4vw, 38px); line-height: 1.15; letter-spacing: -.055em; }
.feedback-card-mark { display: grid; place-items: center; flex: none; width: 38px; height: 38px; border-radius: 12px; background: #1db954; color: #121212; font-size: 25px; line-height: 1; }
.feedback-alert { margin: -8px 0 24px; padding: 15px 17px; border: 1px solid #925453; border-radius: 12px; background: #432a29; color: #ffe4e0; font-size: 13px; line-height: 1.5; }

.feedback-categories { min-width: 0; margin: 0 0 27px; padding: 0; border: 0; }
.feedback-categories legend, .feedback-field label { margin: 0 0 11px; font-size: 13px; font-weight: 750; }
.feedback-categories legend { padding: 0; }
.feedback-required { color: #65d58e; }
.feedback-category-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; }
.feedback-category { position: relative; display: block; cursor: pointer; }
.feedback-category input { position: absolute; width: 1px; height: 1px; margin: 0; opacity: 0; }
.feedback-category-body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-height: 129px;
  padding: 15px 13px;
  border: 1px solid rgba(179, 179, 179, .25);
  border-radius: 13px;
  background: #292d29;
  transition: border-color .18s ease, background .18s ease, transform .18s ease;
}
.feedback-category:hover .feedback-category-body { transform: translateY(-2px); border-color: rgba(101, 213, 142, .55); }
.feedback-category input:checked + .feedback-category-body { border-color: #1db954; background: #233e2c; box-shadow: inset 0 0 0 1px #1db954; }
.feedback-category input:focus-visible + .feedback-category-body { outline: 3px solid #1db954; outline-offset: 3px; }
.feedback-category svg { width: 23px; height: 23px; margin-bottom: 17px; color: #65d58e; }
.feedback-category strong { font-size: 12px; line-height: 1.25; }
.feedback-category small { margin-top: 4px; color: #aebdb1; font-size: 11px; line-height: 1.3; }

.feedback-field { margin-bottom: 26px; }
.feedback-label-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.feedback-count { color: #aebdb1; font-size: 11px; font-variant-numeric: tabular-nums; }
.feedback-field label { display: block; }
.feedback-field textarea, .feedback-field input {
  display: block;
  width: 100%;
  min-height: 50px;
  padding: 13px 15px;
  border: 1px solid rgba(179, 179, 179, .31);
  border-radius: 11px;
  background: #303630;
  color: #f5f5f5;
  font: inherit;
  font-size: 14px;
  line-height: 1.55;
}
.feedback-field textarea { min-height: 156px; resize: vertical; }
.feedback-field textarea::placeholder, .feedback-field input::placeholder { color: #a6b0a7; opacity: 1; }
.feedback-field textarea:focus, .feedback-field input:focus { border-color: #1db954; outline: 2px solid rgba(29, 185, 84, .36); outline-offset: 1px; }
.feedback-help, .feedback-privacy { margin: 7px 0 0; color: #aebdb1; font-size: 11px; line-height: 1.5; }
.feedback-privacy { display: flex; align-items: baseline; gap: 5px; color: #a9ccaf; }
.feedback-privacy::before { content: '◦'; color: #65d58e; font-size: 19px; line-height: 0; }
.feedback-optional { margin-left: 5px; color: #aebdb1; font-size: 11px; font-weight: 500; }
.feedback-trap { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.feedback-submit-row { display: flex; align-items: center; flex-wrap: wrap; gap: 16px; margin-top: 8px; }
.feedback-submit-row > span { color: #aebdb1; font-size: 11px; line-height: 1.5; }
.feedback-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  min-height: 49px;
  padding: 0 19px;
  border: 0;
  border-radius: 11px;
  font: inherit;
  font-size: 13px;
  font-weight: 800;
  text-decoration: none;
  transition: background .18s ease, transform .18s ease, box-shadow .18s ease;
}
.feedback-button-primary { background: #1db954; color: #121212; box-shadow: 0 8px 20px rgba(29, 185, 84, .16); }
.feedback-button-primary:hover { background: #35ce6b; transform: translateY(-2px); box-shadow: 0 11px 25px rgba(29, 185, 84, .23); }
.feedback-button span { font-size: 19px; line-height: 1; }

.feedback-success { align-self: center; padding-block: clamp(38px, 5vw, 65px); }
.feedback-success-icon { display: grid; place-items: center; width: 70px; height: 70px; margin-bottom: 27px; border-radius: 20px; background: #254830; color: #65d58e; }
.feedback-success-icon svg { width: 45px; height: 45px; }
.feedback-success h2 { max-width: 380px; }
.feedback-success > p:not(.field-label) { max-width: 360px; margin: 16px 0 30px; color: #b3b3b3; font-size: 14px; line-height: 1.65; }

html[data-theme="light"] .page-feedback {
  color-scheme: light;
  color: #17231a;
  background: radial-gradient(ellipse 670px 500px at 23% 28%, rgba(29, 185, 84, .13), transparent 74%), #f7f8f4;
}
html[data-theme="light"] .page-feedback .site-header { border-color: #fff; background: #fff; box-shadow: 0 18px 48px rgba(18, 33, 22, .075); }
html[data-theme="light"] .page-feedback .brand, html[data-theme="light"] .page-feedback .footer-brand { color: #121212; }
html[data-theme="light"] .page-feedback .header-note, html[data-theme="light"] .page-feedback .site-footer { color: #59635c; }
html[data-theme="light"] .page-feedback .site-footer { border-color: #e0e8df; }
html[data-theme="light"] .page-feedback .eyebrow, html[data-theme="light"] .page-feedback .field-label { color: #147b3a; }
html[data-theme="light"] .page-feedback .feedback-intro h1 em { color: #147b3a; }
html[data-theme="light"] .page-feedback .feedback-intro-copy { color: #505b53; }
html[data-theme="light"] .page-feedback .feedback-aside { border-color: #d7e2d7; }
html[data-theme="light"] .page-feedback .feedback-aside-icon { color: #147b3a; }
html[data-theme="light"] .page-feedback .feedback-aside p { color: #566359; }
html[data-theme="light"] .page-feedback .feedback-card { border-color: #fff; background: #fff; box-shadow: 0 24px 60px rgba(18, 33, 22, .08); }
html[data-theme="light"] .page-feedback .feedback-alert { border-color: #e6b5b5; background: #fff1f1; color: #9c3434; }
html[data-theme="light"] .page-feedback .feedback-category-body { border-color: #dce7dd; background: #f6f9f5; }
html[data-theme="light"] .page-feedback .feedback-category:hover .feedback-category-body { border-color: #75c78f; }
html[data-theme="light"] .page-feedback .feedback-category input:checked + .feedback-category-body { border-color: #198e45; background: #e7f6eb; box-shadow: inset 0 0 0 1px #198e45; }
html[data-theme="light"] .page-feedback .feedback-category svg { color: #147b3a; }
html[data-theme="light"] .page-feedback .feedback-category small,
html[data-theme="light"] .page-feedback .feedback-count,
html[data-theme="light"] .page-feedback .feedback-help,
html[data-theme="light"] .page-feedback .feedback-optional,
html[data-theme="light"] .page-feedback .feedback-submit-row > span { color: #566359; }
html[data-theme="light"] .page-feedback .feedback-field textarea,
html[data-theme="light"] .page-feedback .feedback-field input { border-color: #cbd8cc; background: #fff; color: #17231a; }
html[data-theme="light"] .page-feedback .feedback-field textarea::placeholder,
html[data-theme="light"] .page-feedback .feedback-field input::placeholder { color: #657169; }
html[data-theme="light"] .page-feedback .feedback-privacy { color: #356745; }
html[data-theme="light"] .page-feedback .feedback-success-icon { background: #e5f5e8; color: #147b3a; }
html[data-theme="light"] .page-feedback .feedback-success > p:not(.field-label) { color: #505b53; }

@media (max-width: 900px) {
  .feedback-main { grid-template-columns: 1fr; gap: 34px; max-width: 680px; margin-inline: auto; padding: 48px 0 72px; }
  .feedback-intro { padding-top: 0; }
  .feedback-intro h1 { max-width: 630px; }
  .feedback-intro-copy { max-width: 570px; }
  .feedback-aside { display: none; }
}

@media (max-width: 560px) {
  .feedback-main { gap: 29px; padding: 38px 0 55px; }
  .feedback-intro h1 { margin: 18px 0 15px; font-size: clamp(42px, 9vw, 56px); }
  .feedback-intro-copy { font-size: 14px; }
  .feedback-card { padding: 24px 20px; border-radius: 20px; }
  .feedback-card-heading { margin-bottom: 25px; }
  .feedback-category-grid { grid-template-columns: 1fr; }
  .feedback-category-body { flex-direction: row; align-items: center; flex-wrap: wrap; column-gap: 12px; min-height: 60px; padding: 12px 14px; }
  .feedback-category svg { width: 21px; height: 21px; margin: 0; }
  .feedback-category strong { font-size: 13px; }
  .feedback-category small { flex-basis: 100%; margin: 0 0 0 33px; }
  .feedback-submit-row { align-items: stretch; flex-direction: column; gap: 11px; }
  .feedback-button { width: 100%; }
  .feedback-submit-row > span { text-align: center; }
}

@media (max-width: 430px) {
  .page-feedback .site-shell { padding: 0 14px; }
  .page-feedback .site-header { min-height: 68px; padding: 0 15px; }
  .feedback-intro { padding: 0 8px; }
}

@media (prefers-reduced-motion: reduce) {
  .footer-feedback, .feedback-category-body, .feedback-button { transition: none; }
}