.wrap-cell {
  max-width: 260px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.task-s1 { background: #e8f7ef; color: var(--green); }
.task-s2 { background: #f1f2f5; color: #707789; }
.task-s3 { background: #ffebed; color: #d92d40; }
.modal {
  position: fixed;
  inset: 0;
  z-index: 80;
  background: rgba(12, 18, 31, .55);
  display: grid;
  place-items: center;
  padding: 22px;
}
.modal-card {
  width: min(520px, 100%);
  max-height: 92vh;
  overflow: auto;
  background: #fff;
  border-radius: 18px;
  padding: 25px;
  box-shadow: 0 30px 90px rgba(0, 0, 0, .25);
}
.modal-card.large { width: min(980px, 100%); }
.modal-head, .task-form-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}
.modal-head { margin-bottom: 22px; }
.modal-head .eyebrow { margin: 0 0 6px; }
.modal-head h3 { margin: 0; }
.modal-close { font-size: 28px; line-height: 1; background: transparent; color: #7b8291; }
.modal-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 8px; }
.task-form-head { align-items: center; }
.task-form-head small { display: block; color: var(--muted); margin-top: 4px; }
.task-items { display: grid; gap: 10px; }
.task-item {
  display: grid;
  grid-template-columns: 2fr 1.25fr .75fr .75fr 1.5fr 34px;
  gap: 10px;
  align-items: end;
  background: #f8f9fc;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 13px;
}
.task-item label { gap: 5px; }
.task-item input, .task-item select { width: 100%; padding: 9px; }
.remove-task { height: 38px; border-radius: 9px; background: #ffeaec; color: #d92d40; font-size: 20px; }
.action-link.danger { color: #c93240; background: #ffeaec; }
.danger-hint { margin: -8px 0 16px; padding: 11px 13px; border-radius: 9px; background: #fff5f5; color: #a73a43; line-height: 1.65; }
.muted-inline { color: var(--muted); font-size: 12px; }
@media (max-width: 1000px) {
  .task-item { grid-template-columns: 1fr 1fr; }
  .task-desc { grid-column: 1 / -2; }
  .remove-task { grid-column: -2 / -1; }
}
@media (max-width: 600px) {
  .modal { padding: 8px; }
  .modal-card { padding: 18px; }
  .task-item { grid-template-columns: 1fr; }
  .task-desc, .remove-task { grid-column: auto; }
  .remove-task { width: 100%; }
}