/* Feedback Page Styles */
.feedback { padding: 16px; }
.feedback h2 { font-size: 18px; margin-bottom: 8px; }
.feedback__count { text-align: right; color: var(--text-secondary, #64748B); font-size: 12px; margin-top: -4px; margin-bottom: 8px; }

.feedback .muted {
  color: var(--text-secondary, #64748B);
  font-size: 13px;
  margin: 0 0 16px;
}

.feedback .input {
  display: block;
  width: 100%;
  padding: 10px 12px;
  margin-bottom: 12px;
  border: 1px solid var(--border, #E2E8F0);
  border-radius: var(--radius-md, 12px);
  font-size: 14px;
  font-family: inherit;
  background: #ffffff;
  color: var(--text, #1E293B);
  box-sizing: border-box;
  -webkit-appearance: none;
  appearance: none;
}
.feedback .input:focus {
  outline: none;
  border-color: var(--primary, #2563EB);
}
.feedback textarea.input {
  resize: vertical;
  min-height: 120px;
  line-height: 1.5;
}
.feedback select.input {
  background-image: linear-gradient(45deg, transparent 50%, #64748B 50%),
                    linear-gradient(135deg, #64748B 50%, transparent 50%);
  background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%;
  background-size: 5px 5px;
  background-repeat: no-repeat;
  padding-right: 32px;
}

.feedback .btn {
  display: inline-block;
  padding: 11px 18px;
  border: 0;
  border-radius: var(--radius-md, 12px);
  font-size: 15px;
  font-family: inherit;
  font-weight: 500;
  cursor: pointer;
  transition: opacity 150ms ease, background-color 150ms ease;
}
.feedback .btn--primary {
  background: var(--primary, #2563EB);
  color: #ffffff;
}
.feedback .btn--primary:hover {
  background: var(--primary-dark, #1D4ED8);
}
.feedback .btn--primary:active {
  opacity: 0.85;
}
.feedback .btn--block {
  display: block;
  width: 100%;
  margin-top: 4px;
}