.rewards-shell {
  --re-bg: #f3f5f8;
  --re-card: #ffffff;
  --re-border: #dce2ea;
  --re-text: #1d2430;
  --re-muted: #6b7482;
  --re-primary: #087443;
  --re-primary-dark: #055d35;
  --re-accent: #f3b31f;
  background: var(--re-bg);
  border: 1px solid var(--re-border);
  border-radius: 14px;
  padding: 20px;
  margin: 14px 0;
  color: var(--re-text);
  font-family: "Segoe UI", "Helvetica Neue", sans-serif;
}

.rewards-dashboard {
  background: linear-gradient(180deg, #f7f9fc 0%, #eff3f8 100%);
}

.rewards-hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 16px;
}

.rewards-hero h2 {
  margin: 0;
  font-size: 34px;
  letter-spacing: -0.02em;
  text-transform: uppercase;
}

.rewards-subtitle {
  margin: 4px 0 0;
  color: var(--re-muted);
}

.rewards-wallet-chip {
  min-width: 220px;
  background: var(--re-card);
  border: 1px solid var(--re-border);
  border-radius: 12px;
  padding: 12px 16px;
  text-align: left;
}

.rewards-wallet-chip span {
  display: block;
  color: var(--re-muted);
  font-size: 12px;
  text-transform: uppercase;
}

.rewards-wallet-chip strong {
  font-size: 24px;
}

.rewards-kpis {
  display: grid;
  grid-template-columns: repeat(3, minmax(180px, 1fr));
  gap: 12px;
  margin-bottom: 14px;
}

.rewards-kpi {
  background: var(--re-card);
  border: 1px solid var(--re-border);
  border-radius: 12px;
  padding: 14px;
}

.rewards-kpi span {
  color: var(--re-muted);
  display: block;
  font-size: 12px;
  margin-bottom: 6px;
  text-transform: uppercase;
}

.rewards-kpi strong {
  font-size: 28px;
  line-height: 1;
}

.rewards-progress__meta {
  display: flex;
  justify-content: space-between;
  margin-bottom: 6px;
  font-size: 12px;
  color: var(--re-muted);
}

.rewards-progress__track {
  height: 10px;
  border-radius: 999px;
  background: #dce3ee;
  overflow: hidden;
}

.rewards-progress__bar {
  height: 100%;
  background: linear-gradient(90deg, #0e8f54 0%, #1dbf73 100%);
}

.rewards-card {
  background: #fff;
}

.rewards-card h3 {
  margin: 0 0 6px;
  font-size: 30px;
  text-transform: uppercase;
  letter-spacing: -0.01em;
}

.rewards-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(250px, 1fr));
  gap: 14px;
  margin-top: 10px;
}

.rewards-grid--rewards {
  grid-template-columns: repeat(3, minmax(220px, 1fr));
}

.rewards-item {
  background: #fff;
  border: 1px solid var(--re-border);
  border-radius: 12px;
  padding: 14px;
}

.rewards-item__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}

.rewards-item__head h4 {
  margin: 0;
  font-size: 18px;
}

.rewards-item__head span {
  font-weight: 700;
  color: var(--re-accent);
}

.rewards-item__desc {
  font-size: 13px;
  color: var(--re-muted);
  margin-top: 8px;
}

.rewards-form {
  display: grid;
  gap: 10px;
  margin-top: 10px;
}

.rewards-form label span {
  display: block;
  font-size: 11px;
  color: var(--re-muted);
  margin-bottom: 4px;
  text-transform: uppercase;
}

.rewards-form input,
.rewards-form textarea {
  width: 100%;
  border: 1px solid #cad4e1;
  border-radius: 8px;
  padding: 9px 10px;
  min-height: 40px;
  background: #fff;
}

.rewards-form input:focus,
.rewards-form textarea:focus {
  outline: none;
  border-color: #1f6feb;
  box-shadow: 0 0 0 3px rgba(31, 111, 235, 0.12);
}

.rewards-form small {
  color: var(--re-muted);
  font-size: 12px;
}

.rewards-btn {
  border: 0;
  border-radius: 8px;
  min-height: 40px;
  padding: 10px 14px;
  color: #fff;
  font-weight: 700;
  cursor: pointer;
}

.rewards-btn--primary {
  background: var(--re-primary);
}

.rewards-btn--primary:hover {
  background: var(--re-primary-dark);
}

.rewards-btn--disabled {
  background: #d7dbe3;
  color: #8a92a0;
  cursor: not-allowed;
}

.rewards-btn--completed {
  background: #ef8e22;
  color: #fff;
  cursor: not-allowed;
}

.rewards-alert {
  border-radius: 10px;
  padding: 12px 14px;
  margin-bottom: 12px;
  font-weight: 600;
}

.rewards-alert--success {
  background: #e8f8ef;
  border: 1px solid #9de3bb;
  color: #0b6d3f;
}

.rewards-alert--error {
  background: #ffeef0;
  border: 1px solid #ffccd3;
  color: #9e2434;
}

.rewards-table-wrap {
  overflow-x: auto;
}

.rewards-table {
  width: 100%;
  border-collapse: collapse;
}

.rewards-table th,
.rewards-table td {
  text-align: left;
  border-bottom: 1px solid #e4e9f1;
  padding: 10px 8px;
  font-size: 14px;
}

.rewards-table th {
  color: var(--re-muted);
  font-size: 12px;
  text-transform: uppercase;
}

.rewards-table tr.is-me {
  background: #edf7ff;
}

.rewards-badge {
  padding: 4px 8px;
  border-radius: 999px;
  font-size: 11px;
  text-transform: uppercase;
  font-weight: 700;
}

.rewards-badge--earn { background: #e7f8ef; color: #0b6d3f; }
.rewards-badge--spend { background: #fff3e0; color: #9a6200; }
.rewards-badge--expire { background: #ffe8e8; color: #9e2434; }
.rewards-badge--hold,
.rewards-badge--release,
.rewards-badge--reversal { background: #edf2ff; color: #2e4a9c; }

.rewards-reward-head {
  display: flex;
  gap: 12px;
  align-items: center;
  margin-bottom: 8px;
}

.rewards-thumb {
  width: 68px;
  height: 68px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid #f0f3f8;
}

.rewards-thumb--placeholder {
  background: radial-gradient(circle at 30% 30%, #f7f7f7, #d8dde7);
}

.rewards-stock {
  color: var(--re-muted);
  font-size: 12px;
}

@media (max-width: 960px) {
  .rewards-hero,
  .rewards-kpis,
  .rewards-grid,
  .rewards-grid--rewards {
    grid-template-columns: 1fr;
    display: grid;
  }

  .rewards-hero h2,
  .rewards-card h3 {
    font-size: 26px;
  }
}