.rewards-hub {
  --rewards-ink: #073b31;
  --rewards-muted: #687a74;
  --rewards-line: #d5e0d7;
  --rewards-lime: #d8ff3e;
  display: grid;
  gap: 14px;
  color: var(--rewards-ink);
}

.rewards-head,
.rewards-section,
.rewards-loading,
.rewards-login {
  border: 1px solid var(--rewards-line);
  border-radius: 20px;
  background: #fffefa;
}

.rewards-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 20px 22px;
}

.rewards-head p,
.rewards-head h2,
.rewards-head span,
.rewards-section-head h3,
.rewards-section-head span,
.rewards-section-head small {
  margin: 0;
}

.rewards-head p,
.rewards-section-head span {
  color: #08715e;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.rewards-head h2 {
  margin: 3px 0 4px;
  font: 700 28px/1.25 "Songti SC", "STSong", Georgia, serif;
}

.rewards-head > div > span,
.rewards-section-head small {
  color: var(--rewards-muted);
  font-size: 13px;
}

.rewards-rule-note {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 11px;
  border-radius: 999px;
  color: #0a6d5b;
  background: #edf5f0;
  font-size: 12px;
  font-weight: 850;
}

.rewards-rule-note svg { width: 16px; }

.rewards-overview {
  display: grid;
  grid-template-columns: minmax(250px, .72fr) minmax(0, 1.28fr);
  gap: 14px;
}

.rewards-balance-card,
.rewards-invite-card {
  min-height: 190px;
  border-radius: 20px;
}

.rewards-balance-card {
  position: relative;
  display: grid;
  align-content: center;
  gap: 6px;
  overflow: hidden;
  padding: 24px;
  color: #fff;
  background: #073f34;
  box-shadow: 0 16px 36px rgba(6, 48, 38, .13);
}

.rewards-balance-card::after {
  content: "POINTS";
  position: absolute;
  top: 12px;
  right: 16px;
  color: rgba(255, 255, 255, .07);
  font-size: 42px;
  font-weight: 950;
}

.rewards-balance-card > span { color: var(--rewards-lime); font-size: 12px; font-weight: 900; }
.rewards-balance-card > strong { font-size: 54px; line-height: 1; letter-spacing: -.05em; }
.rewards-balance-card > small { color: #afc7bf; font-size: 12px; }
.rewards-balance-actions { display: flex; gap: 8px; margin-top: 14px; }
.rewards-balance-actions button,
.rewards-invite-actions button,
.rewards-task-list button,
.rewards-catalog-grid button,
.rewards-login button {
  min-height: 38px;
  padding: 8px 13px;
  border: 0;
  border-radius: 10px;
  color: #143a32;
  background: var(--rewards-lime);
  font: inherit;
  font-size: 12px;
  font-weight: 900;
  cursor: pointer;
}
.rewards-balance-actions button.secondary { color: #fff; background: rgba(255,255,255,.13); }

.rewards-invite-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 14px 24px;
  align-items: center;
  padding: 24px;
  border: 1px solid var(--rewards-line);
  background: #fffefa;
}
.rewards-invite-card span { color: #08715e; font-size: 12px; font-weight: 900; }
.rewards-invite-card h3 { margin: 7px 0; font-size: 21px; }
.rewards-invite-card p { max-width: 620px; margin: 0; color: var(--rewards-muted); font-size: 13px; line-height: 1.65; }
.rewards-invite-code { min-width: 146px; padding: 14px 16px; border-radius: 14px; background: #f0f6f2; text-align: center; }
.rewards-invite-code small { display: block; color: var(--rewards-muted); font-size: 11px; }
.rewards-invite-code strong { display: block; margin-top: 5px; font-size: 21px; letter-spacing: .08em; }
.rewards-invite-actions { grid-column: 1 / -1; display: flex; align-items: center; gap: 12px; }
.rewards-invite-actions button { display: inline-flex; align-items: center; gap: 6px; background: var(--rewards-ink); color: #fff; }
.rewards-invite-actions button svg { width: 15px; }
.rewards-invite-actions span { color: var(--rewards-muted); font-size: 12px; }

.rewards-section { padding: 20px 22px; }
.rewards-section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; margin-bottom: 14px; }
.rewards-section-head h3 { margin-top: 4px; font-size: 19px; }
.rewards-task-list,
.rewards-ledger { display: grid; gap: 8px; }
.rewards-task-list article,
.rewards-ledger article {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  gap: 12px;
  align-items: center;
  min-height: 58px;
  padding: 10px 12px;
  border: 1px solid #e0e8e2;
  border-radius: 13px;
  background: #fbfcf8;
}
.rewards-task-status,
.rewards-ledger-icon,
.rewards-benefit-icon {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border-radius: 10px;
  color: #08715e;
  background: #eaf4ee;
}
.rewards-task-status svg,
.rewards-ledger-icon svg,
.rewards-benefit-icon svg { width: 17px; }
.rewards-task-list strong,
.rewards-task-list small,
.rewards-ledger strong,
.rewards-ledger small { display: block; }
.rewards-task-list small,
.rewards-ledger small { margin-top: 3px; color: var(--rewards-muted); font-size: 11px; }
.rewards-task-list article > b { color: #08715e; font-size: 14px; }
.rewards-task-list button:disabled,
.rewards-catalog-grid button:disabled { color: #82908b; background: #e9eeea; cursor: default; }
.rewards-task-list article.is-done { opacity: .68; }

.rewards-catalog-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.rewards-catalog-grid article { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px; padding: 16px; border: 1px solid #dce6df; border-radius: 15px; background: #fbfcf8; }
.rewards-catalog-grid strong { font-size: 16px; }
.rewards-catalog-grid p { margin: 5px 0 0; color: var(--rewards-muted); font-size: 12px; line-height: 1.55; }
.rewards-catalog-grid footer { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 11px; border-top: 1px solid #e2e9e4; }
.rewards-catalog-grid footer > b { font-size: 20px; }
.rewards-catalog-grid footer small { font-size: 11px; }

.rewards-ledger article { grid-template-columns: auto minmax(0, 1fr) auto; }
.rewards-ledger article > b { color: #08715e; }
.rewards-ledger article > b.is-out { color: #9a5c36; }
.rewards-ledger-icon.is-out { color: #9a5c36; background: #f7eee8; }
.rewards-empty { padding: 22px; color: var(--rewards-muted); text-align: center; }
.rewards-message { min-height: 18px; margin: 0; color: #9a4e2e; font-size: 12px; text-align: center; }

.rewards-loading,
.rewards-login { display: grid; min-height: 320px; place-content: center; justify-items: center; padding: 28px; text-align: center; }
.rewards-loading span { color: #08715e; font-size: 12px; font-weight: 900; }
.rewards-loading h2,
.rewards-login h2 { margin: 8px 0; font: 700 25px/1.3 "Songti SC", "STSong", Georgia, serif; }
.rewards-login > span { display: grid; width: 52px; height: 52px; place-items: center; border-radius: 16px; color: #073f34; background: var(--rewards-lime); }
.rewards-login p { max-width: 420px; margin: 0 0 16px; color: var(--rewards-muted); line-height: 1.65; }

@media (max-width: 900px) {
  .rewards-overview { grid-template-columns: 1fr; }
  .rewards-head { align-items: flex-start; flex-direction: column; }
}

@media (max-width: 640px) {
  .rewards-head,
  .rewards-section { padding: 16px; border-radius: 15px; }
  .rewards-balance-card,
  .rewards-invite-card { min-height: 0; padding: 18px; border-radius: 16px; }
  .rewards-invite-card { grid-template-columns: 1fr; }
  .rewards-invite-code { justify-self: stretch; }
  .rewards-invite-actions { grid-column: auto; align-items: stretch; flex-direction: column; }
  .rewards-section-head { align-items: flex-start; flex-direction: column; gap: 6px; }
  .rewards-task-list article { grid-template-columns: auto minmax(0, 1fr) auto; }
  .rewards-task-list button { grid-column: 2 / -1; }
  .rewards-catalog-grid { grid-template-columns: 1fr; }
}