* { box-sizing: border-box; }
body { margin: 0; background: #f4f5f7; color: #172b4d; font: 15px/1.4 system-ui, sans-serif; }
header, form, li { display: flex; gap: 6px; align-items: center; }
header { padding: 10px 16px; background: #e6e8ec; }
header a { font-weight: 700; color: inherit; }
main { padding: 16px; }
#msg, small { color: #5e6c84; font-size: 13px; }
button, input { font: inherit; min-width: 0; padding: 4px 8px; border: 1px solid #a5adba; border-radius: 6px; background: #fff; }
form input, li div { flex: 1; }
.columns { display: flex; gap: 12px; align-items: flex-start; overflow-x: auto; }
section { flex: 0 0 290px; padding: 10px; border-radius: 10px; background: #e6e8ec; }
h3 { margin: 0 0 8px; font-size: 15px; }
ul { list-style: none; margin: 0 0 8px; padding: 0; min-height: 16px; }
li { margin-bottom: 8px; padding: 8px; border-radius: 6px; background: #fff; cursor: grab; overflow-wrap: anywhere; }
small { display: block; }
@media (max-width: 700px) {
  .columns { flex-direction: column; align-items: stretch; }
  section { flex: none; }
}