:root {
  --red: #ec2637;
  --red-dark: #c9192c;
  --red-soft: #fff0f1;
  --green: #22aa64;
  --green-dark: #16804a;
  --ink: #1f2525;
  --muted: #7d8582;
  --line: #e6e8e4;
  --paper: #ffffff;
  --canvas: #f7f8f5;
  --shadow: 0 28px 80px rgba(31, 37, 37, 0.12);
  font-family: "DM Sans", Arial, sans-serif;
  color: var(--ink);
  background: var(--canvas);
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

body {
  margin: 0;
  min-width: 320px;
  min-height: 100vh;
  background:
    radial-gradient(circle at 7% 15%, rgba(236, 38, 55, 0.06), transparent 23rem),
    radial-gradient(circle at 95% 90%, rgba(34, 170, 100, 0.07), transparent 27rem),
    var(--canvas);
}

button { font: inherit; }

.app-shell {
  min-height: 100vh;
  padding: 34px;
  display: grid;
  place-items: center;
}

.tablet-app {
  width: min(1400px, 100%);
  min-height: min(850px, calc(100vh - 68px));
  overflow: hidden;
  background: var(--paper);
  border: 1px solid rgba(31, 37, 37, 0.08);
  border-radius: 28px;
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
}

.topbar {
  min-height: 92px;
  border-bottom: 1px solid var(--line);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 0 34px;
}

.icon-button {
  border: 0;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 13px;
  color: var(--red);
  background: var(--red-soft);
  cursor: pointer;
  transition: transform .2s ease, background .2s ease;
}

.icon-button:hover { transform: translateY(-2px); background: #ffe3e6; }
.icon-button svg { width: 21px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; }
.is-hidden { visibility: hidden; pointer-events: none; }
.topbar.is-hidden { display: none; }

.brand-lockup { text-align: center; line-height: 1; }
.brand-mark { font: 700 26px/1 "Space Grotesk", sans-serif; letter-spacing: -.08em; color: var(--red); }
.brand-mark span { color: var(--green); margin-left: 2px; }
.brand-caption { display: block; margin-top: 6px; color: var(--muted); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; }

.workspace { position: relative; flex: 1; min-height: 0; display: flex; }
.page { display: none; min-height: 100%; }
.page.active { display: block; flex: 1; width: 100%; }
.coupon-page.active { display: flex; }
.coupon-panel { width: 100%; margin-inline: auto; align-items: center; justify-content: center; padding: 70px 48px; background: radial-gradient(circle at 50% 45%, rgba(236, 38, 55, .045), transparent 31rem), #fff; }

.benefits-page { background: radial-gradient(circle at 50% 55%, rgba(236, 38, 55, .045), transparent 28rem), #fcfcfa; }
.benefits-page.active { display: flex; flex-direction: column; align-items: center; justify-content: center; }
.business-sidebar { width: min(900px, 100%); min-height: 0; margin: 0 auto; padding: clamp(36px, 6vw, 72px) clamp(22px, 7vw, 92px); background: transparent; }
.sidebar-heading { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.eyebrow { margin: 0 0 9px; color: var(--red); font-size: 11px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; }
h1, h2, h3, p { margin-top: 0; }
h1 { max-width: 290px; margin-bottom: 0; font: 600 clamp(28px, 3vw, 43px)/1.03 "Space Grotesk", sans-serif; letter-spacing: -.06em; }
.partner-count { display: grid; place-items: center; min-width: 42px; height: 42px; color: var(--red); background: var(--red-soft); border-radius: 50%; font: 600 13px "Space Grotesk", sans-serif; }
.sidebar-intro { max-width: 360px; margin: 19px 0 31px; color: var(--muted); font-size: 14px; line-height: 1.6; }

.business-list { display: grid; gap: 14px; }
.business-loading { min-height: 120px; display: grid; place-items: center; padding: 24px; border: 1px dashed var(--line); border-radius: 18px; color: var(--muted); background: rgba(255, 255, 255, .72); font-size: 14px; text-align: center; }
.business-loading.is-error { color: var(--red-dark); }
.business-card { position: relative; width: 100%; min-height: 132px; padding: 15px 52px; border: 1px solid color-mix(in srgb, var(--partner-contrast, #fff) 24%, var(--partner-color, var(--line))); border-radius: 18px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; color: var(--partner-contrast, var(--ink)); background: var(--partner-color, var(--paper)); text-align: center; cursor: pointer; transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease; }
.business-card:hover { transform: translateY(-4px); border-color: var(--partner-contrast, #f4a1a9); box-shadow: 0 14px 28px color-mix(in srgb, var(--partner-color, #ec2637) 25%, transparent); }
.business-card.active { border-color: var(--partner-contrast, var(--red)); box-shadow: 0 14px 28px color-mix(in srgb, var(--partner-color, #ec2637) 30%, transparent); }
.business-logo { display: grid; place-items: center; width: 68px; height: 68px; flex: 0 0 68px; overflow: hidden; border: 0; border-radius: 18px; padding: 9px; color: var(--partner-contrast, #fff); background: var(--partner-color, #7b6eea); font: 700 15px "Space Grotesk", sans-serif; letter-spacing: -.06em; }
.business-logo img { display: block; width: auto; height: auto; max-width: 100%; max-height: 100%; padding: 0; border-radius: 10px; background: transparent; object-fit: contain; object-position: center; }
.business-logo.has-image { padding: 0; background: #fff; color: var(--partner-color, #202727); }
.business-logo.has-image img { width: 100%; height: 100%; }
.business-logo.vivo { font-size: 16px; }
.business-logo.snack { font-size: 21px; }
.business-logo.clinic { font-size: 20px; }
.business-logo.custom { font-size: 16px; }
.business-copy { min-width: 0; flex: 1; }
.business-copy strong { display: block; margin-bottom: 4px; color: var(--partner-contrast, var(--ink)); font-size: 15px; }
.business-copy span { display: block; color: color-mix(in srgb, var(--partner-contrast, var(--muted)) 76%, transparent); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.business-arrow { position: absolute; right: 18px; top: 50%; color: color-mix(in srgb, var(--partner-contrast, #b3bab6) 72%, transparent); font-size: 25px; line-height: 1; transform: translateY(-50%); transition: color .2s ease, transform .2s ease; }
.business-card.active .business-arrow, .business-card:hover .business-arrow { color: var(--partner-contrast, var(--red)); transform: translate(3px, -50%); }
.business-card.is-activating { animation: business-card-select .28s ease both; }

.business-list.layout-list { grid-template-columns: 1fr; }
.business-list.layout-list .business-card { min-height: 84px; padding: 12px 52px 12px 16px; border-radius: 17px; flex-direction: row; justify-content: flex-start; gap: 14px; text-align: left; aspect-ratio: auto; }
.business-list.layout-list .business-card .business-logo { width: 56px; height: 56px; flex-basis: 56px; border-radius: 15px; }
.business-list.layout-list .business-card .business-copy { flex: 1; }
.business-list.layout-columns { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); align-items: start; }
.business-list.layout-columns .business-card { min-height: 220px; padding: 22px; aspect-ratio: 1 / 1; flex-direction: column; justify-content: center; gap: 10px; text-align: center; }
.business-list.layout-columns .business-card .business-logo { width: 86px; height: 86px; flex-basis: 86px; }
.business-list.layout-columns .business-card .business-copy { flex: 0 0 auto; }
.business-list.layout-row { display: flex; overflow-x: auto; gap: 14px; padding-bottom: 8px; scroll-snap-type: x proximity; }
.business-list.layout-row .business-card { flex: 0 0 min(250px, 78vw); min-height: 220px; padding: 22px; aspect-ratio: 1 / 1; flex-direction: column; justify-content: center; gap: 10px; text-align: center; scroll-snap-align: start; }
.business-list.layout-row .business-card .business-logo { width: 86px; height: 86px; flex-basis: 86px; }
.business-list.layout-row .business-card .business-copy { flex: 0 0 auto; }

@keyframes business-card-select {
  0% { transform: scale(1); }
  45% { transform: scale(.97); filter: brightness(1.12); }
  100% { transform: scale(1); }
}

.coupon-content { z-index: 1; width: min(560px, 100%); margin-inline: auto; text-align: center; }
.coupon-label { display: inline-flex; align-items: center; gap: 7px; margin-bottom: 17px; color: var(--partner-color, var(--green-dark)); font-size: 11px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; }
.coupon-label::before, .coupon-label::after { width: 18px; height: 1px; background: color-mix(in srgb, var(--partner-color, var(--green-dark)) 55%, white); content: ""; }
.coupon-content h2 { margin-bottom: 13px; font: 600 clamp(32px, 4.4vw, 57px)/.98 "Space Grotesk", sans-serif; letter-spacing: -.07em; }
.coupon-content h2 em { color: var(--partner-color, var(--red)); font-style: normal; }
.coupon-subtitle { max-width: 400px; margin: 0 auto 30px; color: var(--muted); font-size: 14px; line-height: 1.6; }

.qr-stage { width: min(304px, 76vw); margin: 0 auto 25px; padding: 14px; border: 1px solid color-mix(in srgb, var(--partner-color, #edf0ed) 28%, #edf0ed); border-radius: 24px; background: #fff; box-shadow: 0 20px 44px rgba(31, 37, 37, .1); }
.qr-frame { position: relative; padding: 15px; border-radius: 15px; background: color-mix(in srgb, var(--partner-color, #f9faf8) 4%, #f9faf8); }
.qr-frame canvas { display: block; width: 100% !important; height: auto !important; image-rendering: pixelated; }
.qr-frame.expired { opacity: .22; filter: grayscale(1); }
.qr-overlay { position: absolute; inset: 0; display: none; place-items: center; padding: 20px; border-radius: 15px; background: rgba(255,255,255,.76); color: var(--red-dark); font-size: 14px; font-weight: 700; }
.qr-frame.expired .qr-overlay { display: grid; }

.timer-row { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 13px; padding: 9px 14px; border-radius: 99px; color: var(--partner-color, var(--red-dark)); background: color-mix(in srgb, var(--partner-color, var(--red)) 12%, white); font-size: 12px; font-weight: 700; }
.timer-icon { width: 16px; height: 16px; border: 2px solid currentColor; border-radius: 50%; position: relative; }
.timer-icon::before { position: absolute; width: 1px; height: 5px; left: 6px; top: 2px; background: currentColor; content: ""; }
.timer-icon::after { position: absolute; width: 4px; height: 1px; left: 6px; top: 7px; background: currentColor; transform: rotate(28deg); transform-origin: left center; content: ""; }
.progress { height: 4px; width: min(300px, 75vw); margin: 0 auto 22px; overflow: hidden; border-radius: 99px; background: color-mix(in srgb, var(--partner-color, var(--red)) 20%, white); }
.progress-bar { height: 100%; width: 100%; border-radius: inherit; background: var(--partner-color, var(--red)); transform-origin: left; transition: width 1s linear; }
.qr-count { margin: 0 auto 16px; color: var(--muted); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; }
.qr-count strong { color: var(--partner-color, var(--ink)); font: 700 20px "Space Grotesk", sans-serif; letter-spacing: .04em; }
.coupon-hint { color: var(--muted); font-size: 12px; }
.coupon-hint strong { color: var(--ink); }

.empty-state { text-align: center; }
.empty-symbol { display: grid; place-items: center; width: 88px; height: 88px; margin: 0 auto 23px; border-radius: 28px; color: var(--red); background: var(--red-soft); font: 600 37px "Space Grotesk", sans-serif; }
.empty-state h2 { margin-bottom: 12px; font: 600 35px/1 "Space Grotesk", sans-serif; letter-spacing: -.06em; }
.empty-state p { max-width: 300px; margin: 0 auto; color: var(--muted); font-size: 14px; line-height: 1.6; }

.expired-state .coupon-label { color: var(--red); }
.expired-state .coupon-label::before, .expired-state .coupon-label::after { background: #f3aab0; }
.expired-state h2 { margin-bottom: 12px; }
.expired-state h2 em { color: var(--red); font-style: normal; }
.expired-state p { max-width: 375px; }
.new-coupon-button { margin-top: 24px; padding: 13px 22px; border: 0; border-radius: 12px; color: #fff; background: var(--red); font-weight: 700; cursor: pointer; box-shadow: 0 8px 18px rgba(236, 38, 55, .2); transition: transform .2s ease, background .2s ease; }
.new-coupon-button:hover { transform: translateY(-2px); background: var(--red-dark); }

.mobile-coupon { width: min(540px, 100%); padding: 48px 36px; border: 1px solid var(--line); border-radius: 28px; background: #fff; box-shadow: var(--shadow); text-align: center; }
.mobile-coupon .mobile-brand { margin-bottom: 42px; text-align: center; }
.mobile-brand .brand-mark { font-size: 22px; }
.mobile-coupon .coupon-label { margin: 0 auto 28px; font-size: 12px; }
.mobile-coupon h2 { font-size: clamp(44px, 11vw, 52px); }
.mobile-coupon h2 em { color: var(--partner-color, var(--red)); font-style: normal; }
.mobile-coupon .coupon-subtitle { margin: 0 auto 28px; font-size: 15px; line-height: 1.65; text-align: center; }
.coupon-ticket { position: relative; padding: 25px 20px; border: 1px dashed #e2e6e2; border-radius: 18px; background: #fbfcfa; text-align: center; }
.coupon-ticket::before, .coupon-ticket::after { position: absolute; top: 50%; width: 12px; height: 24px; border-radius: 50%; background: var(--canvas); content: ""; transform: translateY(-50%); }
.coupon-ticket::before { left: -7px; }
.coupon-ticket::after { right: -7px; }
.ticket-label { display: block; margin-bottom: 8px; color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: .1em; }
.ticket-code { display: block; color: var(--partner-color, var(--red)); font: 700 29px "Space Grotesk", sans-serif; letter-spacing: .12em; }
.mobile-coupon .valid-note { display: block; margin-top: 17px; color: var(--partner-color, var(--green-dark)); font-size: 13px; line-height: 1.45; text-align: center; }
.coupon-identifier { display: block; margin-top: 11px; color: var(--muted); font-size: 12px; letter-spacing: .04em; overflow-wrap: anywhere; }
.mobile-coupon .coupon-hint { margin-top: 24px; font-size: 13px; line-height: 1.55; }

.toast { position: fixed; left: 50%; bottom: 24px; z-index: 10; padding: 12px 17px; border-radius: 10px; color: #fff; background: var(--ink); font-size: 12px; opacity: 0; pointer-events: none; transform: translate(-50%, 12px); transition: opacity .2s ease, transform .2s ease; }
.toast.show { opacity: 1; transform: translate(-50%, 0); }

.blocked-entry { width: min(520px, 100%); margin: auto; padding: 56px 34px; border: 1px solid var(--line); border-radius: 28px; background: #fff; box-shadow: var(--shadow); text-align: center; }
.blocked-entry h1 { max-width: none; margin: 0 auto 14px; font-size: clamp(30px, 5vw, 46px); }
.blocked-entry p:last-child { margin: 0 auto; color: var(--muted); font-size: 14px; line-height: 1.6; }

@media (max-width: 850px) {
  .app-shell { padding: 0; }
  .tablet-app { min-height: 100vh; border-radius: 0; border: 0; }
  .business-sidebar { padding: 45px 22px 55px; }
  .sidebar-intro { margin-bottom: 21px; }
  .business-list { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
  .business-card { min-height: 130px; padding: 12px 10px; display: flex; }
  .business-logo { margin-bottom: 0; }
  .business-copy strong { font-size: 13px; }
  .business-copy span { font-size: 10px; }
  .business-arrow { display: none; }
  .business-list.layout-list .business-card { min-height: 92px; padding: 10px; }
  .business-list.layout-list .business-card .business-logo { width: 56px; height: 56px; flex-basis: 56px; }
  .business-list.layout-columns .business-card, .business-list.layout-row .business-card { min-height: 200px; padding: 18px; }
  .business-list.layout-columns .business-card .business-logo, .business-list.layout-row .business-card .business-logo { width: 78px; height: 78px; flex-basis: 78px; }
  .coupon-panel { min-height: 610px; padding: 55px 22px; }
  .topbar { padding: 0 20px; }
}

@media (max-width: 480px) {
  .topbar { min-height: 75px; }
  .brand-mark { font-size: 22px; }
  .brand-caption { font-size: 8px; }
  .business-sidebar { padding-top: 26px; }
  h1 { font-size: 29px; }
  .business-list { grid-template-columns: 1fr; gap: 7px; }
  .business-card { min-height: 118px; padding: 10px 7px; border-radius: 15px; }
  .business-logo { width: 54px; height: 54px; flex-basis: 54px; border-radius: 15px; font-size: 12px; }
  .business-logo.vivo { font-size: 13px; }
  .business-logo.snack { font-size: 15px; }
  .business-logo.clinic { font-size: 15px; }
  .business-copy strong { font-size: 11px; }
  .business-copy span { font-size: 9px; }
  .business-arrow { right: 9px; font-size: 21px; }
  .business-list.layout-list .business-card { min-height: 82px; padding: 8px; }
  .business-list.layout-list .business-card .business-logo { width: 50px; height: 50px; flex-basis: 50px; }
  .business-list.layout-columns .business-card, .business-list.layout-row .business-card { min-height: 180px; }
  .coupon-panel { min-height: 560px; align-items: center; justify-content: flex-start; padding: 34px 16px 50px; }
  .coupon-label { margin-bottom: 21px; font-size: 12px; }
  .coupon-content h2 { margin-bottom: 18px; font-size: 45px; }
  .coupon-content .coupon-subtitle { margin-bottom: 30px; font-size: 14px; }
  .coupon-content .qr-stage { width: min(340px, 88vw); padding: 16px; }
  .coupon-content .progress { width: min(340px, 85vw); height: 5px; }
}

@media (min-width: 481px) and (max-width: 1100px) {
  .benefits-page.active { justify-content: flex-start; }
  .business-sidebar { width: 100%; padding: clamp(30px, 4vw, 46px) clamp(22px, 5vw, 54px) clamp(58px, 8vw, 80px); }
  .sidebar-heading { justify-content: space-between; align-items: flex-end; gap: 20px; }
  .eyebrow { margin-bottom: 14px; font-size: clamp(14px, 1.8vw, 18px); }
  h1 { max-width: none; font-size: clamp(42px, 6vw, 68px); }
  .partner-count { min-width: clamp(54px, 6vw, 66px); height: clamp(54px, 6vw, 66px); margin-bottom: 4px; font-size: clamp(16px, 2vw, 20px); }
  .sidebar-intro { max-width: 720px; margin: clamp(22px, 3vw, 30px) 0 clamp(34px, 5vw, 48px); font-size: clamp(16px, 2vw, 20px); }
  .business-list { gap: clamp(14px, 2vw, 22px); }
  .business-card { min-height: clamp(250px, 36vw, 330px); padding: clamp(20px, 3vw, 30px); gap: clamp(11px, 1.8vw, 16px); }
  .business-logo { width: clamp(110px, 15vw, 150px); height: clamp(110px, 15vw, 150px); flex-basis: clamp(110px, 15vw, 150px); border-radius: clamp(20px, 2.8vw, 26px); }
  .business-copy strong { font-size: clamp(19px, 2.5vw, 25px); }
  .business-copy span { font-size: clamp(14px, 1.8vw, 17px); }
  .business-list.layout-list { grid-template-columns: 1fr; }
  .business-list.layout-columns { grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }
  .business-list.layout-columns .business-card, .business-list.layout-row .business-card { min-height: clamp(270px, 38vw, 350px); padding: clamp(22px, 3vw, 32px); }
  .business-list.layout-columns .business-card .business-logo, .business-list.layout-row .business-card .business-logo { width: clamp(118px, 16vw, 160px); height: clamp(118px, 16vw, 160px); flex-basis: clamp(118px, 16vw, 160px); }
  .business-list.layout-row .business-card { flex-basis: clamp(240px, 34vw, 320px); }
  .business-list.layout-list .business-card { min-height: clamp(104px, 14vw, 128px); padding: 16px clamp(42px, 5vw, 52px) 16px 18px; }
  .business-list.layout-list .business-card .business-logo { width: clamp(70px, 9vw, 84px); height: clamp(70px, 9vw, 84px); flex-basis: clamp(70px, 9vw, 84px); border-radius: 18px; }
}

@media (min-width: 481px) and (max-width: 1100px) {
  .coupon-panel { align-items: center; justify-content: flex-start; padding: clamp(34px, 5vw, 58px) clamp(22px, 5vw, 54px) 72px; }
  .coupon-content { width: min(680px, 100%); }
  .coupon-label { margin-bottom: clamp(22px, 3vw, 30px); font-size: clamp(16px, 2vw, 20px); }
  .coupon-content h2 { margin-bottom: clamp(20px, 2.8vw, 28px); font-size: clamp(52px, 7vw, 80px); }
  .coupon-subtitle { max-width: 620px; margin-bottom: clamp(34px, 4.5vw, 48px); font-size: clamp(18px, 2.3vw, 22px); }
  .timer-row { margin-bottom: 20px; padding: 13px 19px; font-size: clamp(15px, 1.8vw, 18px); }
  .timer-icon { width: 18px; height: 18px; }
  .qr-stage { width: min(390px, 82vw); margin-bottom: 30px; padding: 18px; border-radius: 26px; }
  .qr-frame { padding: 17px; border-radius: 17px; }
  .progress { width: min(390px, 80vw); height: 5px; margin-bottom: 26px; }
}