.modal {
  width: min(1000px, 96vw);
  padding: 30px;
}

#fields > .grid {
  gap: 18px;
  margin-bottom: 22px;
}

#servicePanel {
  padding: 24px !important;
  margin: 24px 0 28px !important;
  border-radius: 14px !important;
}

#servicePanel > h3 {
  margin: 0 0 22px !important;
  font-size: 20px;
}

#servicePanel > .grid {
  gap: 20px;
  margin-bottom: 24px;
}

#servicePanel > label {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 9px;
  width: 100%;
  margin: 0 !important;
  color: #586678;
  font-size: 12px;
  font-weight: 700;
}

#servicePanel > label > textarea {
  display: block !important;
  width: 100% !important;
  min-height: 155px !important;
  margin: 0 !important;
  padding: 14px !important;
  resize: vertical;
  line-height: 1.55;
  font-size: 15px;
  color: #172335;
  background: #fff;
}

#servicePreview {
  margin: 20px 0 0 !important;
  padding-top: 16px;
  border-top: 1px solid #dbe7f5;
}

#fields > h3 {
  margin: 30px 0 16px;
}

#fields > #addLine {
  margin-top: 8px;
}

#fields > #total {
  margin: 28px 0 8px;
  padding-top: 18px;
  border-top: 1px solid #e4e9ef;
}

@media (max-width: 800px) {
  .modal { padding: 20px; }
  #servicePanel { padding: 18px !important; }
  #servicePanel > .grid { grid-template-columns: 1fr; }
}