:root {
  color: #1d2939;
  background: #f6f8fb;
  font-family: Inter, "PingFang SC", "Microsoft YaHei", sans-serif;
}

* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; }
button, input, select { font: inherit; }

.app-shell { width: min(860px, calc(100% - 32px)); margin: 0 auto; padding: 64px 0; }
.hero { margin-bottom: 32px; }
.eyebrow { color: #6457e8; font-size: .78rem; font-weight: 800; letter-spacing: .13em; margin: 0 0 8px; }
h1, h2, p { margin-top: 0; }
h1 { font-size: clamp(2rem, 6vw, 3.25rem); margin-bottom: 10px; letter-spacing: -.04em; }
h2 { font-size: 1.2rem; margin-bottom: 5px; }
.subtitle, .section-heading p, #feedback-count { color: #667085; }

.composer, .board { background: #fff; border: 1px solid #e6e9ef; border-radius: 18px; box-shadow: 0 12px 30px rgba(27, 36, 65, .05); padding: 24px; }
.composer { margin-bottom: 20px; }
#feedback-form { display: grid; grid-template-columns: 1fr 130px auto; gap: 12px; align-items: end; }
label { display: grid; gap: 7px; color: #344054; font-size: .88rem; font-weight: 700; }
input, select { width: 100%; border: 1px solid #cfd5df; border-radius: 9px; color: #1d2939; min-height: 43px; padding: 0 12px; background: #fff; }
input:focus, select:focus { outline: 3px solid rgba(100, 87, 232, .18); border-color: #6457e8; }
button { border: 0; border-radius: 9px; cursor: pointer; font-weight: 800; min-height: 43px; padding: 0 18px; }
#feedback-form button { background: #6457e8; color: #fff; }
#feedback-form button:hover { background: #5144d2; }
.board-header { display: flex; justify-content: space-between; align-items: end; gap: 20px; margin-bottom: 16px; }
.filter-label { width: 150px; }
.feedback-list { display: grid; gap: 10px; list-style: none; margin: 0; padding: 0; }
.feedback-card { align-items: center; border: 1px solid #eaecf0; border-radius: 12px; display: flex; justify-content: space-between; gap: 16px; padding: 15px; }
.feedback-text { margin: 8px 0 0; line-height: 1.5; }
.priority { border-radius: 999px; font-size: .76rem; font-weight: 800; padding: 4px 9px; }
.priority-high { background: #fee4e2; color: #b42318; }
.priority-medium { background: #fef0c7; color: #93370d; }
.priority-low { background: #dcfae6; color: #067647; }
.delete-button { background: #f2f4f7; color: #475467; min-height: 36px; padding: 0 12px; }
.delete-button:hover { background: #eaecf0; }
.empty-state { color: #667085; margin: 24px 0 4px; text-align: center; }

@media (max-width: 640px) {
  .app-shell { padding: 34px 0; }
  .composer, .board { padding: 18px; }
  #feedback-form { grid-template-columns: 1fr; }
  #feedback-form button { width: 100%; }
  .board-header { align-items: start; flex-direction: column; }
  .filter-label { width: 100%; }
}