.task-deadline-settings{
  display:grid;
  gap:14px;
}

.task-deadline-intro{
  display:grid;
  gap:4px;
}

.task-deadline-intro>strong{
  color:var(--ink,#33263a);
  font-size:1rem;
}

.task-deadline-intro>small,
.task-deadline-note{
  color:var(--muted,#6f6577);
  line-height:1.45;
}

.task-deadline-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
}

.task-deadline-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:12px 14px;
  border:1px solid rgba(55,34,63,.12);
  border-radius:16px;
  background:rgba(255,255,255,.76);
}

.task-deadline-row>span{
  display:grid;
  gap:3px;
  min-width:0;
}

.task-deadline-row small{
  color:var(--muted,#6f6577);
  font-size:.76rem;
}

.task-deadline-row input[type="time"]{
  width:112px;
  min-height:42px;
  padding:8px 10px;
  border:1px solid rgba(55,34,63,.18);
  border-radius:12px;
  background:#fff;
  color:#37223f;
  font:700 .92rem/1 inherit;
}

.task-deadline-row input[type="time"]:focus{
  outline:3px solid rgba(217,255,87,.42);
  border-color:#78921d;
}

.task-deadline-note{
  margin:0;
  padding:10px 12px;
  border-radius:12px;
  background:rgba(217,255,87,.18);
  color:#4d4254;
  font-size:.79rem;
}

.task-category-switch .task-deadline-label{
  display:block;
  margin-top:3px;
  color:inherit;
  opacity:.74;
  font-size:.72rem;
  font-weight:700;
}

.task-row.overdue-pending{background:#fff0ed!important;box-shadow:inset 4px 0 #d44838}
.task-row.late-completed{background:#fff5e8!important;box-shadow:inset 4px 0 #dd8a2f}
.task-timing-badge{display:inline-flex!important;width:max-content;max-width:100%;margin-top:5px;padding:4px 8px;border-radius:999px;background:#ffe0b8;color:#7f410d;font-size:.7rem;font-weight:850;line-height:1.25}
.overdue-pending .task-timing-badge{background:#ffd8d2;color:#992f24}
.task-row.score-focus{outline:3px solid #d9ff57;outline-offset:-3px;animation:score-task-focus 1.5s ease both}
@keyframes score-task-focus{0%,100%{filter:none}35%{filter:drop-shadow(0 0 10px rgba(217,255,87,.75))}}

@media(max-width:680px){
  .task-deadline-grid{grid-template-columns:1fr}
  .task-deadline-row{padding:11px 12px}
}