.md-app {
  background: linear-gradient(180deg, #f7faff 0%, #eef6ff 100%);
  border: 1px solid #d9e8f7;
}

#md-tabs {
  grid-template-columns: repeat(4, minmax(125px, 1fr));
  gap: 8px;
  padding: 10px;
  background: #f3f7fb;
}

#md-tabs button {
  min-height: 88px;
  border: 1px solid #dce8f3;
  border-radius: 12px;
  background: #ffffff;
  text-align: left;
  padding: 12px;
}

#md-tabs button i {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  margin-bottom: 7px;
  border-radius: 8px;
  background: #e9f4ff;
  color: #004aad;
  font-size: 17px;
  font-style: normal;
}

#md-tabs button span { display: block; line-height: 1.15; }
#md-tabs button.active { border-color: #004aad; box-shadow: 0 8px 20px rgba(0,74,173,.16); }
#md-tabs button.active i { background: rgba(255,255,255,.18); color: #fff; }

.md-products article {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  min-height: 88px;
  padding: 13px;
}

.md-product-icon {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 11px;
  background: linear-gradient(145deg, #e4f4ff, #f2fbff);
  border: 1px solid #cfe9f6;
  color: #004aad;
  font-size: 21px;
}

.md-product-copy { min-width: 0; }
.md-product-copy h3 { font-size: 13px; line-height: 1.25; }
.md-step { height: 36px; align-items: stretch; }
.md-step input {
  width: 44px;
  height: 34px;
  padding: 0;
  line-height: 34px;
  text-align: center !important;
  vertical-align: middle;
  appearance: textfield;
  -moz-appearance: textfield;
}
.md-step input::-webkit-inner-spin-button,
.md-step input::-webkit-outer-spin-button { margin: 0; appearance: none; }
.md-step button { height: 34px; line-height: 34px; padding: 0; }
.md-price { text-align: right; font-variant-numeric: tabular-nums; }
.md-line b, .md-totals b { font-variant-numeric: tabular-nums; }

@media (max-width: 900px) { #md-tabs { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { #md-tabs { grid-template-columns: 1fr 1fr; } .md-products article { grid-template-columns: 36px minmax(0,1fr); } .md-step { grid-column: 2; margin-top: 8px; justify-self: start; } }