.view { display: none; }
.view.active { display: block; }
.row {
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr .8fr auto;
  gap: 10px;
  align-items: center;
  padding: 14px 0;
  border-top: 1px solid #edf0f4;
  font-size: 13px;
}
.row small { display: block; color: #7a8698; }
.notice {
  padding: 16px;
  border-radius: 12px;
  background: #eef7ff;
  color: #23496f;
  margin: 14px 0;
}
.cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-top: 16px;
}
.cards > div {
  border: 1px solid #e6ebf2;
  border-radius: 12px;
  padding: 18px;
}
.cards strong { display: block; font-size: 22px; margin-top: 5px; }
.action-card {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border: 1px solid #e6ebf2;
  border-radius: 14px;
  padding: 20px;
  margin-top: 14px;
}
.action-card p { color: #6a778c; font-size: 13px; }
@media (max-width: 900px) {
  .cards, .row { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 520px) {
  .cards, .row { grid-template-columns: 1fr; }
  .action-card { display: block; }
  .action-card .export { display: inline-block; margin-top: 12px; }
}
.supplier-form-panel { margin-bottom: 20px; }
.supplier-form-panel[hidden] { display: none; }
.supplier-row small { display: block; margin-top: 5px; }
.wide-input { grid-column: span 2; }
button.secondary { background: #eef1f5; color: #253041; }
@media (max-width: 760px) {
  .wide-input { grid-column: span 1; }
}