:root {
  --sms-ink: #202936;
  --sms-muted: #6b7687;
  --sms-border: #e3e8f0;
  --sms-soft: #f7f9fc;
  --sms-blue: #5d87ff;
  --sms-blue-soft: #eef3ff;
  --sms-green: #17845b;
  --sms-green-soft: #edf9f4;
  --sms-orange: #b9680a;
  --sms-orange-soft: #fff7e8;
  --sms-red: #bd4050;
  --sms-red-soft: #fff1f3;
}

.sms-usage-panel {
  overflow: hidden;
  margin-bottom: 14px;
  border: 1px solid var(--sms-border);
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 12px 32px rgba(35, 50, 73, .06);
}

.sms-usage-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 20px 22px;
  border-bottom: 1px solid var(--sms-border);
}

.sms-usage-heading {
  display: flex;
  align-items: center;
  min-width: 0;
  gap: 13px;
}

.sms-usage-icon {
  display: grid;
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  place-items: center;
  border: 1px solid #d6e0fb;
  border-radius: 13px;
  background: var(--sms-blue-soft);
  color: #456fda;
}

.sms-usage-icon .kl-inline-icon,
.sms-usage-icon i {
  width: 21px;
  height: 21px;
  font-size: 21px;
}

.sms-usage-heading h2 {
  margin: 0 0 4px;
  color: var(--sms-ink);
  font-size: 1.03rem;
  font-weight: 760;
}

.sms-usage-heading p {
  margin: 0;
  color: var(--sms-muted);
  font-size: .78rem;
  line-height: 1.5;
}

.sms-usage-actions {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 8px;
}

.sms-usage-action {
  display: inline-flex;
  min-height: 38px;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 8px 12px;
  border: 1px solid var(--sms-border);
  border-radius: 10px;
  background: #fff;
  color: #526177;
  font-size: .75rem;
  font-weight: 720;
  text-decoration: none;
}

.sms-usage-action:hover,
.sms-usage-action:focus-visible {
  border-color: #b9c9f5;
  background: #f8faff;
  color: #315bc4;
}

.sms-usage-action:disabled {
  cursor: wait;
  opacity: .68;
}

.sms-usage-body {
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: 16px;
  padding: 20px 22px 22px;
}

.sms-balance-card {
  position: relative;
  display: flex;
  min-height: 196px;
  flex-direction: column;
  justify-content: space-between;
  padding: 22px;
  border: 1px solid #dce5f7;
  border-radius: 16px;
  background: #f8faff;
}

.sms-balance-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}

.sms-balance-label {
  display: block;
  margin-bottom: 8px;
  color: #617087;
  font-size: .74rem;
  font-weight: 760;
  letter-spacing: .055em;
  text-transform: uppercase;
}

.sms-balance-number {
  display: block;
  color: var(--sms-ink);
  font-size: clamp(2.3rem, 5vw, 3.7rem);
  font-weight: 800;
  letter-spacing: -.045em;
  line-height: .98;
}

.sms-balance-caption {
  margin-top: 9px;
  color: var(--sms-muted);
  font-size: .79rem;
}

.sms-health-badge {
  display: inline-flex;
  min-height: 30px;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border: 1px solid #cce9dd;
  border-radius: 999px;
  background: var(--sms-green-soft);
  color: var(--sms-green);
  font-size: .7rem;
  font-weight: 800;
  white-space: nowrap;
}

.sms-health-dot {
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: currentColor;
}

.sms-balance-card.is-low .sms-health-badge {
  border-color: #f0d6ad;
  background: var(--sms-orange-soft);
  color: var(--sms-orange);
}

.sms-balance-card.is-critical .sms-health-badge,
.sms-balance-card.is-empty .sms-health-badge {
  border-color: #efcbd1;
  background: var(--sms-red-soft);
  color: var(--sms-red);
}

.sms-balance-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-top: 16px;
  border-top: 1px solid #dfe7f5;
  color: var(--sms-muted);
  font-size: .73rem;
}

.sms-balance-footer strong {
  color: #344158;
  font-weight: 750;
}

.sms-usage-details {
  display: grid;
  grid-template-rows: auto 1fr;
  gap: 14px;
}

.sms-stat-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.sms-stat-card {
  min-width: 0;
  padding: 16px;
  border: 1px solid var(--sms-border);
  border-radius: 14px;
  background: #fff;
}

.sms-stat-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 13px;
}

.sms-stat-head span:first-child {
  color: var(--sms-muted);
  font-size: .75rem;
  font-weight: 700;
}

.sms-stat-symbol {
  display: grid;
  width: 31px;
  height: 31px;
  flex: 0 0 31px;
  place-items: center;
  border-radius: 9px;
  background: var(--sms-soft);
  color: #65748a;
}

.sms-stat-symbol .kl-inline-icon,
.sms-stat-symbol i {
  width: 16px;
  height: 16px;
  font-size: 16px;
}

.sms-stat-card strong {
  display: block;
  overflow: hidden;
  color: var(--sms-ink);
  font-size: clamp(1.35rem, 2.2vw, 1.85rem);
  font-weight: 780;
  letter-spacing: -.025em;
  line-height: 1.1;
  text-overflow: ellipsis;
}

.sms-progress-card {
  display: flex;
  min-height: 105px;
  flex-direction: column;
  justify-content: center;
  padding: 17px;
  border: 1px solid var(--sms-border);
  border-radius: 14px;
  background: #fff;
}

.sms-progress-head,
.sms-progress-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.sms-progress-head {
  margin-bottom: 11px;
}

.sms-progress-head span {
  color: var(--sms-muted);
  font-size: .75rem;
  font-weight: 700;
}

.sms-progress-head strong {
  color: var(--sms-ink);
  font-size: .86rem;
  font-weight: 800;
}

.sms-progress-track {
  height: 9px;
  overflow: hidden;
  border-radius: 999px;
  background: #e9edf4;
}

.sms-progress-fill {
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: var(--sms-blue);
  transition: width .28s ease;
}

.sms-balance-card.is-low ~ .sms-usage-details .sms-progress-fill {
  background: #d78220;
}

.sms-balance-card.is-critical ~ .sms-usage-details .sms-progress-fill,
.sms-balance-card.is-empty ~ .sms-usage-details .sms-progress-fill {
  background: var(--sms-red);
}

.sms-progress-meta {
  margin-top: 9px;
  color: #8590a0;
  font-size: .69rem;
}

.sms-message {
  display: none;
  margin: 0 22px 20px;
  padding: 11px 13px;
  border: 1px solid #efcbd1;
  border-radius: 11px;
  background: var(--sms-red-soft);
  color: var(--sms-red);
  font-size: .74rem;
  line-height: 1.5;
}

.sms-message:not(:empty) {
  display: block;
}

.sms-usage-panel.is-loading .sms-balance-number,
.sms-usage-panel.is-loading .sms-stat-card strong {
  color: #99a3b2;
}

.sms-usage-panel.is-loading .sms-progress-fill {
  width: 18% !important;
  opacity: .45;
}

@media (max-width: 991.98px) {
  .sms-usage-body {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 575.98px) {
  .sms-usage-header {
    align-items: flex-start;
    flex-direction: column;
    padding: 17px;
  }

  .sms-usage-actions {
    width: 100%;
  }

  .sms-usage-action {
    flex: 1 1 0;
  }

  .sms-usage-body {
    padding: 16px;
  }

  .sms-balance-card {
    min-height: 180px;
    padding: 18px;
  }

  .sms-stat-grid {
    grid-template-columns: 1fr;
  }

  .sms-message {
    margin-right: 16px;
    margin-left: 16px;
  }
}