.assignment-panel {
  margin: 0 0 1.2rem;
  padding: 1rem;
  border: 1px solid #decbd7;
  border-radius: 16px;
  background: #fcf8fa;
}
.assignment-heading h3 { margin: 0; color: var(--plum-dark); font-family: Georgia, serif; font-size: 1.25rem; }
.assignment-heading p { margin: .35rem 0 0; color: var(--muted); font-size: .84rem; }
.assignment-controls { display: grid; grid-template-columns: minmax(14rem, 1fr) auto auto; gap: .8rem; align-items: end; margin-top: 1rem; }
.assignment-list { display: grid; margin-top: .4rem; }
.assignment-item { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; gap: .75rem; align-items: center; padding: .75rem 0; border-top: 1px solid var(--line); }
.assignment-item:first-child { border-top: 0; }
.assignment-item > div { min-width: 0; display: flex; flex-direction: column; }
.assignment-item strong, .assignment-item small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.assignment-item small { color: var(--muted); font-size: .75rem; }
.assignment-badge { border-radius: 999px; padding: .32rem .58rem; background: #dff0e9; color: var(--success); font-size: .7rem; font-weight: 800; }
.assignment-remove { border: 0; background: transparent; color: var(--danger); font-weight: 800; padding: .5rem; }
.assignment-empty { padding: .9rem 0; color: var(--muted); font-size: .84rem; }
@media (max-width: 700px) {
  .assignment-controls { grid-template-columns: 1fr; }
  .assignment-item { grid-template-columns: auto minmax(0, 1fr) auto; }
  .assignment-badge { grid-column: 2; }
  .assignment-remove { grid-column: 3; grid-row: 1 / 3; }
}