.im-shell {
  display: grid;
  gap: 14px;
  color: #171a20;
}

.im-head,
.im-contract-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 24px;
  border: 1px solid #dfe3e8;
  border-radius: 16px;
  background: #fff;
}

.im-head > div:first-child,
.im-contract-head > div:first-child {
  display: grid;
  gap: 5px;
}

.im-head span,
.im-contract-head > div:first-child span,
.im-payment header span,
.im-schedule header span,
.im-history header span {
  color: #df1f2d;
  font-size: 10px;
  font-weight: 850;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.im-head h2,
.im-contract-head h2 {
  margin: 0;
  font-size: 28px;
  letter-spacing: -.03em;
}

.im-head p {
  margin: 0;
  color: #76808c;
  font-size: 12px;
}

.im-head-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(120px, 1fr));
  gap: 8px;
}

.im-head-metrics > span {
  display: grid;
  gap: 4px;
  padding: 12px 14px;
  border-radius: 10px;
  background: #f3f5f7;
}

.im-head-metrics small,
.im-metrics small,
.im-card small,
.im-contract-balance small {
  color: #7e8792;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .03em;
  text-transform: uppercase;
}

.im-head-metrics b { font-size: 17px; }
.im-head-metrics .is-alert,
.im-metrics .is-alert { color: #b71d29; background: #fff0f1; }

.im-tools {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 12px;
}

.im-search {
  display: grid;
  flex: 1 1 360px;
  max-width: 520px;
  gap: 5px;
}

.im-search span {
  color: #6f7884;
  font-size: 9px;
  font-weight: 800;
  text-transform: uppercase;
}

.im-search input {
  width: 100%;
  height: 44px;
  padding: 0 14px;
  border: 1px solid #d7dce2;
  border-radius: 10px;
  background: #fff;
  font: inherit;
}

.im-search input:focus {
  border-color: #df1f2d;
  outline: 3px solid rgba(223, 31, 45, .1);
}

.im-filters { display: flex; gap: 7px; }
.im-filters button {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  gap: 8px;
  padding: 0 13px;
  border: 1px solid #dfe3e8;
  border-radius: 10px;
  background: #fff;
  font: inherit;
  font-size: 12px;
  font-weight: 750;
  cursor: pointer;
}
.im-filters button b {
  display: grid;
  min-width: 21px;
  height: 21px;
  place-items: center;
  border-radius: 7px;
  background: #f0f2f4;
  font-size: 10px;
}
.im-filters button.is-active { color: #fff; border-color: #1b1f25; background: #1b1f25; }
.im-filters button.is-active b { color: #1b1f25; background: #fff; }

.im-list { display: grid; gap: 8px; }
.im-card {
  display: grid;
  grid-template-columns: minmax(200px, 1.5fr) minmax(150px, .8fr) minmax(150px, .8fr) 20px;
  gap: 20px;
  align-items: center;
  min-height: 92px;
  padding: 16px 18px;
  border: 1px solid #e0e4e9;
  border-radius: 13px;
  background: #fff;
  color: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color 120ms ease, transform 120ms ease;
}
.im-card:hover { border-color: #aeb5be; transform: translateY(-1px); }
.im-card:focus-visible { outline: 3px solid rgba(223, 31, 45, .16); }
.im-card > span { display: grid; gap: 3px; }
.im-card-person b { font-size: 16px; }
.im-card em { color: #717b87; font-size: 11px; font-style: normal; }
.im-card-next {
  padding: 10px 13px;
  border-left: 3px solid #df1f2d;
  border-radius: 5px;
  background: #fff5f6;
}
.im-card-next b { font-size: 16px; }
.im-card-next em { color: #b71d29; font-weight: 800; }
.im-card-balance { text-align: right; }
.im-card-balance b { font-size: 18px; }
.im-card > i { color: #9aa2ac; font-size: 22px; font-style: normal; }
.im-card.is-overdue { border-color: #e3a5ab; }
.im-card.is-overdue .im-card-next { color: #fff; border-color: #971520; background: #b71d29; }
.im-card.is-overdue .im-card-next small,
.im-card.is-overdue .im-card-next em { color: #fff; }

.im-empty,
.im-paid {
  display: grid;
  gap: 5px;
  padding: 46px;
  border: 1px dashed #d5dae0;
  border-radius: 14px;
  color: #818995;
  text-align: center;
}
.im-empty b,
.im-paid b { color: #343a43; }

.im-back {
  width: max-content;
  padding: 6px 0;
  border: 0;
  background: transparent;
  font: inherit;
  font-weight: 800;
  cursor: pointer;
}

.im-contract-head a { color: #626c78; }
.im-contract-balance { display: grid; min-width: 250px; gap: 5px; text-align: right; }
.im-contract-balance strong { font-size: 31px; letter-spacing: -.03em; }
.im-contract-balance > span { color: #79828d; font-size: 10px; }
.im-contract-balance i { display: block; height: 6px; overflow: hidden; border-radius: 5px; background: #e8ebee; }
.im-contract-balance i em { display: block; height: 100%; border-radius: inherit; background: #df1f2d; }

.im-metrics {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
}
.im-metrics > span {
  display: grid;
  gap: 5px;
  padding: 15px;
  border: 1px solid #e0e4e9;
  border-radius: 11px;
  background: #fff;
}
.im-metrics b { font-size: 16px; }
.im-metrics em { color: #818995; font-size: 10px; font-style: normal; }
.im-metrics .im-next { color: #fff; border-color: #1d2229; background: #1d2229; }
.im-metrics .im-next small,
.im-metrics .im-next em { color: #d8dce1; }

.im-payment,
.im-schedule,
.im-history {
  padding: 18px;
  border: 1px solid #dfe3e8;
  border-radius: 14px;
  background: #fff;
}
.im-payment header,
.im-schedule header,
.im-history header {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 12px;
}
.im-payment header > div { display: grid; gap: 4px; }
.im-payment header > div b { color: #68727e; font-size: 11px; }
.im-payment header strong { font-size: 13px; }
.im-payment > div { display: grid; grid-template-columns: 1fr 1fr auto; gap: 9px; }
.im-payment label { display: grid; gap: 5px; color: #6f7884; font-size: 9px; font-weight: 800; }
.im-payment input,
.im-payment select { height: 44px; padding: 0 11px; border: 1px solid #d7dce2; border-radius: 8px; background: #fff; }
.im-payment button { align-self: end; height: 44px; padding: 0 20px; color: #fff; border: 0; border-radius: 8px; background: #df1f2d; font-weight: 850; cursor: pointer; }
.im-payment button:disabled { opacity: .55; }

.im-detail-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(300px, .85fr); gap: 12px; align-items: start; }
.im-schedule article {
  display: grid;
  grid-template-columns: 34px 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 11px 0;
  border-top: 1px solid #edf0f2;
}
.im-schedule article > i { display: grid; width: 28px; height: 28px; place-items: center; border-radius: 8px; background: #20242b; color: #fff; font-style: normal; }
.im-schedule article > span,
.im-history article > span { display: grid; gap: 3px; }
.im-schedule article small,
.im-history article small,
.im-history article em { color: #818995; font-size: 10px; font-style: normal; }
.im-schedule article.is-paid { opacity: .52; }
.im-schedule article.is-paid > i { background: #2b9a62; }
.im-schedule article.is-overdue small { color: #b71d29; font-weight: 750; }
.im-history article { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 0; border-top: 1px solid #edf0f2; }
.im-history > p { color: #818995; font-size: 11px; }

@media (max-width: 1050px) {
  .im-head { align-items: flex-start; flex-direction: column; }
  .im-head-metrics { width: 100%; }
  .im-tools { align-items: stretch; flex-direction: column; }
  .im-search { max-width: none; }
  .im-metrics { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .im-detail-grid { grid-template-columns: 1fr; }
}

@media (max-width: 720px) {
  .im-head,
  .im-contract-head { align-items: flex-start; flex-direction: column; padding: 18px; }
  .im-head-metrics { grid-template-columns: 1fr; }
  .im-filters { overflow-x: auto; padding-bottom: 2px; }
  .im-filters button { flex: 0 0 auto; }
  .im-card { grid-template-columns: 1fr 1fr; gap: 12px; }
  .im-card-person { grid-column: 1 / -1; }
  .im-card-balance { text-align: left; }
  .im-card > i { display: none; }
  .im-contract-balance { width: 100%; min-width: 0; text-align: left; }
  .im-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .im-payment > div { grid-template-columns: 1fr; }
}