add reward card feature with barcodes

static/style.css

@@ -403,3 +403,52 @@ textarea:focus { border-color: var(--deep-sage); box-shadow: 0 0 0 4px rgba(85,
   .side-column { grid-template-columns: 1fr; }
   .site-footer { margin-bottom: 20px; }
 }
+
+/* Rewards cards */
+.rewards-grid { display: grid; gap: 16px; }
+.rewards-card {
+  padding: 18px;
+  border: 1px solid var(--line);
+  border-radius: 18px;
+  background: #fff;
+}
+.rewards-card-heading {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 12px;
+  margin-bottom: 14px;
+}
+.rewards-card-heading strong { font-size: 1.05rem; }
+.rewards-barcode {
+  display: flex;
+  justify-content: center;
+  padding: 14px;
+  border-radius: 12px;
+  background: #fff;
+}
+.rewards-barcode svg { width: 100%; height: auto; max-width: 340px; }
+.rewards-number {
+  margin: 12px 0 0;
+  text-align: center;
+  color: var(--muted);
+  font-size: .85rem;
+  letter-spacing: .08em;
+}
+.rewards-unencodable {
+  display: block;
+  color: var(--coral);
+  font-weight: 700;
+}
+select {
+  width: 100%;
+  min-height: 46px;
+  padding: 10px 13px;
+  border: 1px solid var(--line);
+  border-radius: 12px;
+  outline: none;
+  color: var(--ink);
+  background: #fff;
+  font: inherit;
+}
+select:focus { border-color: var(--deep-sage); box-shadow: 0 0 0 4px rgba(85, 113, 93, .12); }