body { background: #f6f8fb; }
.card { border-radius: 14px; }
.drawer-grid {
  display: grid;
  grid-template-columns: repeat(var(--cols), minmax(70px, 1fr));
  gap: 8px;
}
.drawer-cell {
  display: block;
  text-decoration: none;
  border-radius: 10px;
  padding: 8px;
  border: 1px solid #dce3ee;
  background: #fff;
  color: #1c2430;
  min-height: 62px;
}
.drawer-cell .label { display:block; font-size: .82rem; font-weight: 600; }
.drawer-cell .meta { display:block; font-size: .72rem; opacity: .8; }
.drawer-cell.empty { background: #ffffff; }
.drawer-cell.filled { background: #e8f7ea; border-color: #b9e3c0; }
.drawer-cell.blocked { background: #ffe7e7; border-color: #f2b3b3; color: #8b1d1d; }
@media (max-width: 576px){
  .drawer-grid { grid-template-columns: repeat(var(--cols), minmax(56px, 1fr)); gap: 6px; }
  .drawer-cell { padding: 6px; min-height: 54px; }
}