add screen to view a barcode isolated

static/style.css

@@ -412,10 +412,20 @@ textarea:focus { border-color: var(--deep-sage); box-shadow: 0 0 0 4px rgba(85,
 /* Rewards cards */
 .rewards-grid { display: grid; gap: 16px; }
 .rewards-card {
+  position: relative;
   padding: 18px;
   border: 1px solid var(--line);
   border-radius: 18px;
   background: #fff;
+  transition: border-color .16s ease, transform .16s ease;
+}
+.rewards-card:hover { border-color: var(--sage); transform: translateY(-1px); }
+/* Stretched link: makes the whole card clickable to open the scan view. */
+.rewards-card-link {
+  position: absolute;
+  inset: 0;
+  border-radius: inherit;
+  z-index: 1;
 }
 .rewards-card-heading {
   display: flex;
@@ -445,6 +455,44 @@ textarea:focus { border-color: var(--deep-sage); box-shadow: 0 0 0 4px rgba(85,
   color: var(--coral);
   font-weight: 700;
 }
+/* Keep the Remove button above the stretched link so it stays clickable. */
+.rewards-card-heading form { position: relative; z-index: 2; }
+
+/* Single-card scan view */
+.scan-page {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 22px;
+  padding: 12px 0 40px;
+}
+.scan-back { align-self: flex-start; }
+.scan-card {
+  width: min(100%, 460px);
+  padding: clamp(24px, 6vw, 42px);
+  border: 1px solid var(--line);
+  border-radius: 28px;
+  background: #fff;
+  box-shadow: var(--shadow);
+  text-align: center;
+}
+.scan-store { margin: 4px 0 26px; font-size: clamp(1.3rem, 4vw, 1.7rem); }
+.scan-barcode {
+  display: flex;
+  justify-content: center;
+  padding: 22px;
+  border-radius: 14px;
+  background: #fff;
+}
+.scan-barcode svg {
+  width: 100%;
+  height: auto;
+  max-width: 420px;
+}
+.scan-card .rewards-number {
+  margin-top: 18px;
+  font-size: 1rem;
+}
 select {
   width: 100%;
   min-height: 46px;