:root {
  --ink: #101d33;
  --paper: #f2f5f9;
  --card: #ffffff;
  --navy: #12294b;
  --navy-press: #0b1c36;
  --sky: #d7e5f5;
  --sky-line: #a9c4e4;
  --accent: #96bee6;
  --success: #157a43;
  --warn: #c2740a;
  --muted: #5a6678;
  --danger: #d63b2f;
  --danger-press: #a52a20;
  --edge: #101d33;
  --brand: #12294b;
  --hairline: #e5eaf2;
  --plate: #e7edf6;
  --hub-gutter: 1.1rem;
  --hub-glow: rgba(150, 190, 230, 0.45);
  --hub-halo: rgba(18, 41, 75, 0.1);
}
:root[data-theme=dark] {
  --ink: #e8eef7;
  --paper: #0f1826;
  --card: #1c2b45;
  --navy: #17335c;
  --navy-press: #0f2447;
  --sky: #cfe1f5;
  --sky-line: #3a5074;
  --accent: #96bee6;
  --success: #43cf88;
  --warn: #e6a53c;
  --muted: #94a3ba;
  --danger: #ec5a4e;
  --danger-press: #b23a30;
  --edge: #35496a;
  --brand: #8fbdf0;
  --hairline: #2a3a56;
  --plate: #2b3d5c;
  --hub-glow: rgba(140, 190, 245, 0.6);
  --hub-halo: rgba(120, 175, 235, 0.22);
}
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
}
html {
  touch-action: pan-x pan-y;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
body {
  font-family:
    "Archivo",
    system-ui,
    -apple-system,
    sans-serif;
  background: var(--paper);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
}
button {
  font-family: inherit;
  border: none;
  cursor: pointer;
  background: none;
}
[hidden] {
  display: none !important;
}
#splash {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--paper);
  transition: transform 0.55s cubic-bezier(0.65, 0, 0.35, 1), opacity 0.45s ease 0.1s;
}
#splash.is-hiding {
  transform: translateY(-100%);
  opacity: 0;
}
.splash-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.4rem;
  margin-bottom: 6vh;
}
.splash-wordmark {
  font-weight: 900;
  letter-spacing: 0.12em;
  font-size: clamp(1.5rem, 6vw, 2.1rem);
  color: var(--ink);
  animation: splash-rise 0.5s cubic-bezier(0.2, 0.8, 0.3, 1) both;
}
.splash-wordmark em {
  font-style: normal;
  color: var(--navy);
  background: var(--sky);
  padding: 0.1em 0.35em;
  border-radius: 0.3em;
}
.splash-bar {
  position: relative;
  overflow: hidden;
  width: 7.5rem;
  height: 5px;
  border-radius: 999px;
  background: var(--hairline);
}
.splash-bar i {
  position: absolute;
  top: 0;
  right: auto;
  bottom: 0;
  left: 0;
  width: 45%;
  border-radius: 999px;
  background: var(--brand);
  animation: splash-slide 1.15s ease-in-out infinite;
}
@keyframes splash-rise {
  from {
    opacity: 0;
    transform: translateY(0.6rem);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes splash-slide {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(222%);
  }
}
@media (prefers-reduced-motion: reduce) {
  #splash {
    transition: opacity 0.3s ease;
  }
  #splash.is-hiding {
    transform: none;
    opacity: 0;
  }
  .splash-wordmark {
    animation: none;
  }
  .splash-bar i {
    animation: none;
    width: 100%;
    opacity: 0.5;
  }
}
.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.1rem clamp(1.2rem, 4vw, 3rem);
}
.wordmark {
  font-weight: 900;
  letter-spacing: 0.12em;
  font-size: 0.95rem;
}
.wordmark em {
  font-style: normal;
  color: var(--navy);
  background: var(--sky);
  padding: 0.1em 0.35em;
  border-radius: 0.3em;
}
.nav-signin {
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--brand);
  padding: 0.6rem 1.1rem;
  border: 2.5px solid var(--brand);
  border-radius: 0.6rem;
}
.hero {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  align-items: center;
  gap: 2rem;
  padding: clamp(2rem, 6vw, 5rem) clamp(1.2rem, 4vw, 3rem);
  max-width: 72rem;
  margin: 0 auto;
}
@media (min-width: 761px) {
  .landing-top {
    display: flex;
    flex-direction: column;
    min-height: 88vh;
    min-height: 88svh;
  }
  .landing-top .hero {
    flex: 1;
    padding-block: clamp(1.5rem, 4.5vh, 5rem);
  }
  .landing-top .hero-copy h1 {
    font-size: clamp(2.6rem, min(7vw, 9vh), 4.6rem);
  }
}
.hero-copy h1 {
  font-size: clamp(2.6rem, 7vw, 4.6rem);
  font-weight: 900;
  line-height: 0.98;
  letter-spacing: -0.01em;
}
.hl {
  color: var(--brand);
  background: linear-gradient(transparent 90%, var(--accent) 70%);
}
.hero-sub {
  margin-top: 1.2rem;
  font-size: 1.15rem;
  line-height: 1.55;
  color: var(--muted);
  font-weight: 500;
  max-width: 30rem;
}
.google-btn {
  margin-top: 1.8rem;
  display: inline-flex;
  align-items: center;
  gap: 0.8rem;
  background: var(--card);
  color: var(--ink);
  font-size: 1.15rem;
  font-weight: 700;
  padding: 1rem 1.6rem;
  border-radius: 0.9rem;
  border: 3px solid var(--edge);
  box-shadow: 0 4px 0 var(--edge);
  transition: transform 80ms ease, box-shadow 80ms ease;
}
.google-btn:active {
  transform: translateY(3px);
  box-shadow: 0 1px 0 var(--edge);
}
.auth-error {
  margin-top: 0.9rem;
  color: #a93226;
  font-weight: 700;
}
.fine {
  margin-top: 0.9rem;
  color: var(--muted);
  font-size: 0.92rem;
  font-weight: 500;
}
.vendor-signin-toggle {
  display: block;
  margin-top: 0.9rem;
  padding: 0;
  background: none;
  border: 0;
  cursor: pointer;
  color: var(--muted);
  font-size: 0.92rem;
  font-weight: 700;
  text-decoration: underline;
  text-align: left;
}
.vendor-signin-toggle:hover {
  color: var(--ink);
}
.vendor-signin {
  margin-top: 0.7rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  max-width: 30rem;
}
.vendor-signin input {
  flex: 1 1 12rem;
  min-width: 0;
  font: inherit;
  font-size: 1rem;
  font-weight: 500;
  padding: 0.65rem 0.8rem;
  border-radius: 0.7rem;
  border: 2px solid var(--edge);
  background: var(--card);
  color: var(--ink);
}
.vendor-signin input:focus-visible {
  outline: 3px solid var(--brand);
  outline-offset: 1px;
}
.vendor-signin-go {
  flex: 0 0 auto;
  font: inherit;
  font-size: 1rem;
  font-weight: 800;
  cursor: pointer;
  padding: 0.65rem 1.2rem;
  border-radius: 0.7rem;
  border: 2px solid var(--edge);
  background: var(--navy);
  color: #fff;
}
.vendor-signin-go:disabled {
  opacity: 0.6;
  cursor: default;
}
.vendor-invite {
  margin-top: 0.35rem;
}
.vendor-invite a {
  color: var(--brand);
  font-weight: 800;
  text-decoration: underline;
}
.hero-card {
  position: relative;
  display: flex;
  justify-content: center;
}
.mock-card {
  background: var(--navy);
  color: #fff;
  border-radius: 1.4rem;
  padding: 1.6rem 1.8rem;
  width: min(19rem, 80%);
  transform: rotate(3deg);
  box-shadow: 0 18px 40px rgba(16, 29, 51, 0.28);
}
.mock-vendor {
  font-weight: 900;
  letter-spacing: 0.14em;
  font-size: 0.8rem;
  color: var(--accent);
}
.mock-points {
  font-size: 3.4rem;
  font-weight: 900;
  line-height: 1.1;
}
.mock-points small {
  font-size: 0.35em;
  font-weight: 700;
  margin-left: 0.25em;
  letter-spacing: 0.08em;
}
.mock-code {
  margin: 1rem 0 0.8rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  background: #fff;
  padding: 0.8rem 0.7rem;
  border-radius: 0.7rem;
}
.mock-code-label {
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.18em;
  color: #7a8aa3;
}
.mock-code-qr {
  display: block;
}
.mock-hint {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--sky);
}
.chip {
  position: absolute;
  background: var(--card);
  border: 3px solid var(--edge);
  border-radius: 2rem;
  padding: 0.45rem 0.9rem;
  font-weight: 900;
  font-size: 0.95rem;
  box-shadow: 0 3px 0 var(--edge);
}
.chip-1 {
  top: 8%;
  right: 4%;
  transform: rotate(-6deg);
  color: var(--success);
}
.chip-2 {
  bottom: -7%;
  left: 6%;
  transform: rotate(4deg);
  color: var(--brand);
}
.how {
  background: var(--navy);
  color: #fff;
  padding: clamp(2.5rem, 6vw, 4.5rem) clamp(1.2rem, 4vw, 3rem);
}
.how h2 {
  max-width: 72rem;
  margin: 0 auto 2rem;
  font-size: 1rem;
  font-weight: 900;
  letter-spacing: 0.22em;
  color: var(--accent);
}
.steps {
  max-width: 72rem;
  margin: 0 auto;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
}
.step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.6rem;
  height: 2.6rem;
  border-radius: 50%;
  background: var(--accent);
  color: var(--navy);
  font-weight: 900;
  font-size: 1.25rem;
  margin-bottom: 0.9rem;
}
.steps h3 {
  font-size: 1.35rem;
  font-weight: 900;
  margin-bottom: 0.5rem;
}
.steps p {
  color: var(--sky);
  line-height: 1.55;
  font-weight: 500;
}
.footer {
  border-top: 1px solid var(--hairline);
  padding: 2.5rem 2rem 2rem;
  color: var(--muted);
  font-size: 0.92rem;
  font-weight: 500;
}
.footer-inner {
  max-width: 72rem;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.25rem 2rem;
}
.footer-word {
  font-weight: 900;
  letter-spacing: 0.12em;
  font-size: 0.95rem;
  color: var(--ink);
}
.footer-word em {
  font-style: normal;
  color: var(--navy);
  background: var(--sky);
  padding: 0.1em 0.35em;
  border-radius: 0.3em;
}
.footer-tag {
  margin-top: 0.55rem;
  max-width: 24rem;
  line-height: 1.45;
}
.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem 1.25rem;
}
.footer-links a {
  color: var(--brand);
  font-weight: 700;
  text-decoration: none;
}
.footer-links a:hover {
  text-decoration: underline;
}
.footer-legal {
  max-width: 72rem;
  margin: 1.75rem auto 0;
  text-align: center;
}
.footer-legal a {
  color: var(--brand);
  font-weight: 700;
}
:root {
  --skel: #e2e8f1;
  --skel-plate: #d2dcec;
  --skel-sheen: rgba(255, 255, 255, 0.72);
}
:root[data-theme=dark] {
  --skel: #26364f;
  --skel-plate: #3b5075;
  --skel-sheen: rgba(255, 255, 255, 0.07);
}
.skel {
  position: relative;
  overflow: hidden;
  background: var(--skel);
  border-radius: 0.45rem;
}
.skel::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  transform: translateX(-100%);
  background:
    linear-gradient(
      90deg,
      transparent,
      var(--skel-sheen),
      transparent);
  animation: skel-sweep 1.4s var(--skel-delay, 0s) ease-in-out infinite;
}
@keyframes skel-sweep {
  to {
    transform: translateX(100%);
  }
}
@media (prefers-reduced-motion: reduce) {
  .skel::after {
    animation: none;
  }
}
.vendor-skel[hidden] {
  display: none;
}
.vskel-row {
  display: flex;
  gap: 1rem;
  padding: 0.4rem 1.3rem 0.45rem;
  overflow: hidden;
}
.vskel-row > :nth-child(2) {
  --skel-delay: 0.12s;
}
.vskel-dots {
  height: 2rem;
  margin: 0 1.3rem 0.9rem;
}
.vskel-card {
  flex: 0 0 85%;
  max-width: 300px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--card);
  border: 3px solid var(--edge);
  border-radius: 1.3rem;
  box-shadow: 0 5px 0 var(--edge);
}
.vskel-band {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.7rem 1.3rem;
  background: var(--plate);
  border-bottom: 3px solid var(--edge);
}
.vskel-band .skel {
  background: var(--skel-plate);
}
.vskel-mark {
  flex: 0 0 auto;
  width: 2.3rem;
  height: 2.3rem;
}
.vskel-body {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 0.35rem;
  padding: 1.1rem 1.3rem;
}
.vskel-name {
  flex: 0 1 auto;
  width: 62%;
  height: 1.22rem;
}
.vskel-num {
  width: 45%;
  height: 3rem;
}
.vskel-rate {
  width: 55%;
  height: 1rem;
  border-radius: 0.3rem;
}
.vskel-addr {
  width: 82%;
  height: 0.82rem;
  margin-top: 0.6rem;
  border-radius: 0.3rem;
}
.vskel-map {
  display: none;
}
:root[data-vendor-map=on] .vskel-map {
  display: block;
  flex: 0 0 150px;
  border-radius: 0;
  border-top: 2px solid var(--edge);
}
:root[data-vendor-map=on] .vskel-card {
  min-height: 200px;
}
.cc-amount[hidden] {
  display: none;
}
.cc-amount-skel {
  width: 5.4rem;
  height: 1.85rem;
  border-radius: 0.4rem;
}
.hub-tier-skel {
  flex: 0 0 auto;
  width: 3.1rem;
  height: 1.55rem;
  border-radius: 2em;
  background: rgba(255, 255, 255, 0.16);
}
.hub-tier-skel::after {
  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(255, 255, 255, 0.24),
      transparent);
}
#home {
  min-height: 100%;
  display: flex;
  flex-direction: column;
}
.brand-banner {
  padding: calc(0.55rem + env(safe-area-inset-top)) var(--hub-gutter) 0;
}
.brand-word {
  font-weight: 900;
  letter-spacing: 0.01em;
  font-size: 1.45rem;
  line-height: 1;
}
.brand-word em {
  font-style: normal;
  color: var(--accent);
}
.hub-toggle {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 0.55rem;
  text-align: left;
  color: #fff;
  padding: 0.8rem 1.05rem;
}
.hub-pill {
  background: var(--navy);
  border: 2px solid var(--hub-glow);
  border-radius: 2em;
  box-shadow: 0 0 16px var(--hub-halo), 0 4px 14px rgba(8, 16, 32, 0.18);
  transition: transform 80ms ease;
}
.hub-pill:active {
  transform: scale(0.985);
}
.hub-toggle:focus {
  outline: none;
}
.hub-toggle:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 2em;
}
.hub-summary {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.5rem;
}
.hub-tier {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-weight: 900;
  font-size: 0.82rem;
  white-space: nowrap;
  padding: 0.24em 0.62em;
  border-radius: 2em;
  border: 1.5px solid currentColor;
  color: var(--accent);
}
.hub-tier i {
  font-style: normal;
  font-size: 0.78em;
}
.hub-tier.t2 {
  color: #ffd76e;
}
.hub-tier.t3 {
  color: #ffb84d;
}
.hub-dot {
  flex: 0 0 auto;
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 50%;
  background: var(--danger);
  box-shadow: 0 0 0 2px var(--navy);
}
.hub-chev {
  flex: 0 0 auto;
  display: flex;
  color: rgba(255, 255, 255, 0.75);
}
.hub-chev svg {
  width: 1.25rem;
  height: 1.25rem;
  display: block;
}
.hub-toggle-open {
  touch-action: none;
}
.hub-toggle-open .hub-chev {
  transition: transform 180ms cubic-bezier(0.3, 0.1, 0.7, 0.4);
}
.hub-modal.is-open .hub-toggle-open .hub-chev {
  transform: rotate(180deg);
  transition: transform 320ms cubic-bezier(0.22, 1, 0.36, 1);
}
.hub-modal {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 25;
  background: rgba(8, 16, 32, 0);
  transition: background 180ms cubic-bezier(0.3, 0.1, 0.7, 0.4);
}
.hub-modal.is-open {
  background: rgba(8, 16, 32, 0.5);
  transition: background 220ms ease;
}
.hub-panel {
  --hub-pad: 1.05rem;
  position: absolute;
  top: calc(0.55rem + env(safe-area-inset-top));
  left: var(--hub-gutter);
  right: var(--hub-gutter);
  background: var(--navy);
  color: #fff;
  border: 2px solid var(--hub-glow);
  border-radius: 1.7rem;
  box-shadow: 0 0 16px var(--hub-halo), 0 4px 14px rgba(8, 16, 32, 0.18);
  transition: box-shadow 180ms cubic-bezier(0.3, 0.1, 0.7, 0.4);
}
.hub-modal.is-open .hub-panel {
  box-shadow: 0 0 22px var(--hub-halo), 0 18px 44px rgba(8, 16, 32, 0.45);
  transition: box-shadow 320ms cubic-bezier(0.22, 1, 0.36, 1);
}
.hub-body {
  display: grid;
  grid-template-rows: 0fr;
  overflow: hidden;
  border-radius: 0 0 1.55rem 1.55rem;
  transition: grid-template-rows 180ms cubic-bezier(0.3, 0.1, 0.7, 0.4);
}
.hub-body-inner {
  min-height: 0;
  padding-bottom: 1.25rem;
}
.hub-modal.is-open .hub-body {
  grid-template-rows: 1fr;
  transition: grid-template-rows 320ms cubic-bezier(0.22, 1, 0.36, 1);
}
.hub-panel.is-dragging .hub-body {
  transition: none;
}
@media (prefers-reduced-motion: reduce) {
  .hub-body,
  .hub-modal.is-open .hub-body,
  .hub-panel,
  .hub-modal.is-open .hub-panel,
  .hub-toggle-open .hub-chev,
  .hub-modal.is-open .hub-toggle-open .hub-chev {
    transition: none;
  }
}
.tier-bar {
  margin: 0.55rem var(--hub-pad) 0;
}
.tier-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.6rem;
  margin-bottom: 1.05rem;
}
.tier-head-label {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-weight: 900;
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.72);
  white-space: nowrap;
}
.tier-earning {
  flex: 1;
  min-width: 0;
  text-align: right;
  font-size: 0.68rem;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.6);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tier-earning b {
  color: var(--accent);
  font-weight: 900;
}
.tier-hint {
  margin-top: 0.6rem;
  text-align: center;
  font-size: 0.82rem;
  font-weight: 800;
  color: var(--accent);
}
.tier-info-btn {
  flex: 0 0 auto;
  width: 1.15rem;
  height: 1.15rem;
  border-radius: 50%;
  border: 1.5px solid rgba(255, 255, 255, 0.5);
  color: #fff;
  font-size: 0.7rem;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 120ms ease, border-color 120ms ease;
}
.tier-info-btn:active {
  background: rgba(255, 255, 255, 0.2);
}
.info-overlay {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 50;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: calc(4.5rem + env(safe-area-inset-top)) 1.1rem 1.1rem;
  background: rgba(10, 20, 40, 0.35);
  opacity: 0;
  transition: opacity 150ms ease;
}
.info-overlay.is-open {
  opacity: 1;
}
.info-card {
  position: relative;
  width: min(23rem, 100%);
  background: var(--card);
  color: var(--ink);
  border: 3px solid var(--edge);
  border-radius: 1.1rem;
  box-shadow: 0 12px 30px rgba(16, 29, 51, 0.3);
  padding: 1.3rem 1.3rem 1.4rem;
  transform: translateY(-8px) scale(0.97);
  transition: transform 150ms cubic-bezier(0.22, 1, 0.36, 1);
}
.info-overlay.is-open .info-card {
  transform: translateY(0) scale(1);
}
.info-card h3 {
  font-size: 1.15rem;
  font-weight: 900;
  margin: 0.1rem 0 0.6rem;
  padding-right: 1.6rem;
}
.info-card p {
  font-size: 0.9rem;
  line-height: 1.5;
  font-weight: 500;
  color: var(--ink);
  margin-bottom: 0.7rem;
}
.info-card p:last-child {
  margin-bottom: 0;
}
.info-card ul {
  list-style: none;
  margin: 0 0 0.7rem;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.info-card li {
  font-size: 0.9rem;
  line-height: 1.4;
  font-weight: 500;
  padding-left: 1rem;
  position: relative;
}
.info-card li::before {
  content: "\2022";
  position: absolute;
  left: 0.1rem;
  color: var(--brand);
  font-weight: 900;
}
.info-card strong {
  color: var(--brand);
  font-weight: 900;
}
.info-close {
  position: absolute;
  top: 0.6rem;
  right: 0.6rem;
  width: 1.8rem;
  height: 1.8rem;
  border-radius: 50%;
  background: var(--paper);
  color: var(--muted);
  font-size: 0.85rem;
  font-weight: 900;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}
.info-close:active {
  background: var(--sky);
  color: var(--navy);
}
.tier-meter {
  --tier-dot: 2.75rem;
  --tier-inset: calc(var(--tier-dot) / 2);
  position: relative;
  height: calc(var(--tier-dot) + 1.95rem);
}
.tier-track {
  position: absolute;
  left: var(--tier-inset);
  right: var(--tier-inset);
  top: calc(var(--tier-dot) / 2);
  transform: translateY(-50%);
  height: 0.6rem;
  border-radius: 1rem;
  background: rgba(255, 255, 255, 0.14);
  overflow: hidden;
}
.tier-fill {
  height: 100%;
  width: 0;
  border-radius: 1rem;
  background:
    linear-gradient(
      90deg,
      var(--accent),
      #7fb3ea);
  transition: width 700ms cubic-bezier(0.22, 1, 0.36, 1);
}
.tier-nodes {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}
.tier-node {
  position: absolute;
  top: 0;
  width: 4.6rem;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3rem;
}
.tier-node-dot {
  width: var(--tier-dot);
  height: var(--tier-dot);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
  font-weight: 900;
  line-height: 1;
  background: var(--navy);
  color: rgba(255, 255, 255, 0.72);
  border: 2.5px solid rgba(255, 255, 255, 0.3);
  transition:
    border-color 200ms ease,
    color 200ms ease,
    box-shadow 200ms ease;
}
.tier-node.is-done .tier-node-dot {
  border-color: var(--accent);
  color: #fff;
}
.tier-node.is-current .tier-node-dot {
  border-color: #ffd76e;
  color: #ffd76e;
  box-shadow: 0 0 0 4px rgba(255, 215, 110, 0.14);
}
.tier-node-cap {
  font-size: 0.6rem;
  font-weight: 800;
  letter-spacing: 0.03em;
  color: rgba(255, 255, 255, 0.45);
  white-space: nowrap;
  text-align: center;
}
.tier-node.is-current .tier-node-cap {
  color: #ffd76e;
}
.tier-node.is-current .tier-node-cap::before {
  content: "\25b2";
  display: block;
  font-size: 0.5rem;
  line-height: 1;
  margin-bottom: 0.1rem;
}
.tier-levers {
  margin: 1.15rem var(--hub-pad) 0;
  padding-top: 1.1rem;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.lever-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.6rem;
  margin-bottom: 0.95rem;
}
.lever-title {
  font-weight: 900;
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.72);
  white-space: nowrap;
}
.lever-window {
  font-size: 0.66rem;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.42);
  white-space: nowrap;
}
.lever {
  display: flex;
  flex-direction: column;
  gap: 0.42rem;
  margin-bottom: 0.85rem;
}
.lever:last-of-type {
  margin-bottom: 0;
}
.lever-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.6rem;
}
.lever-name {
  font-size: 0.82rem;
  font-weight: 800;
  color: rgba(255, 255, 255, 0.88);
}
.lever-val {
  font-size: 0.76rem;
  font-weight: 900;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.lever-track {
  display: block;
  height: 0.35rem;
  border-radius: 1rem;
  background: rgba(255, 255, 255, 0.12);
  overflow: hidden;
}
.lever-fill {
  display: block;
  height: 100%;
  width: 0;
  border-radius: 1rem;
  background: var(--accent);
  transition: width 700ms cubic-bezier(0.22, 1, 0.36, 1);
}
.lever-tip {
  margin-top: 1.05rem;
  padding: 0.68rem 0.8rem;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 0.85rem;
  font-size: 0.76rem;
  font-weight: 700;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.75);
}
.home-main {
  flex: 1;
  padding: 0.9rem 0 0;
  display: flex;
  flex-direction: column;
}
.home-main > * {
  flex: 0 0 auto;
}
.home-stack {
  margin: auto 1.3rem;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}
.home-stack > * {
  flex: 0 0 auto;
}
.home-spots {
  margin: 0 0 auto;
}
.home-sub-row {
  position: relative;
  display: flex;
  align-items: center;
  margin: 0.9rem 1.3rem 0.85rem;
}
.home-sub {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  height: 2.3rem;
  padding: 10px;
  margin: 0;
  background: none;
  border: 2px var(--muted) solid;
  border-radius: 25px;
  color: var( --muted);
  appearance: none;
  -webkit-appearance: none;
  touch-action: manipulation;
  cursor: pointer;
}
.home-sub-label {
  font-weight: 900;
  letter-spacing: 0.16em;
  font-size: 0.8rem;
}
.home-sub-caret {
  margin-left: 0.3rem;
  font-size: 1.2rem;
  line-height: 1;
  transition: transform 120ms ease;
}
.home-sub[aria-expanded=true] {
  color: var(--ink);
}
.home-sub[aria-expanded=true] .home-sub-caret {
  transform: rotate(180deg);
}
.home-sub.is-static {
  cursor: default;
}
.home-sub.is-static .home-sub-caret {
  display: none;
}
.home-sub:focus-visible {
  outline: 3px solid var(--brand);
  outline-offset: 2px;
  border-radius: 6px;
}
.home-lens-menu {
  position: absolute;
  top: calc(100% - 0.35rem);
  left: 0;
  z-index: 30;
  min-width: 11rem;
  display: flex;
  flex-direction: column;
  padding: 0.3rem;
  background: var(--card);
  border: 2.5px solid var(--edge);
  border-radius: 0.9rem;
  box-shadow: 0 5px 0 var(--edge);
}
.home-lens-menu[hidden] {
  display: none;
}
.home-lens-item {
  font: inherit;
  font-size: 0.85rem;
  font-weight: 800;
  text-align: left;
  color: var(--ink);
  padding: 0.55rem 0.6rem;
  border-radius: 0.6rem;
  background: none;
  border: 0;
  appearance: none;
  -webkit-appearance: none;
  touch-action: manipulation;
  cursor: pointer;
}
.home-lens-item[aria-checked=true] {
  background: var(--brand);
  color: var(--card);
}
.home-lens-item:focus-visible {
  outline: 3px solid var(--brand);
  outline-offset: -1px;
}
.community-card {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  text-align: left;
  background: var(--card);
  border: 3px solid var(--edge);
  border-radius: 1.2rem;
  box-shadow: 0 5px 0 var(--edge);
  padding: 0.75rem 0.95rem;
  transition: transform 80ms ease, box-shadow 80ms ease;
}
.community-card:active {
  transform: translateY(3px);
  box-shadow: 0 2px 0 var(--edge);
}
.cc-icon {
  flex: 0 0 auto;
  align-self: stretch;
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.9rem;
  line-height: 1;
  background: var(--sky);
  border-radius: 0.9rem;
  padding: 0px 5px;
}
.cc-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}
.cc-label {
  font-weight: 900;
  letter-spacing: 0.1em;
  font-size: 0.76rem;
  color: #8564b9;
}
.cc-amount {
  display: flex;
  align-items: baseline;
  gap: 0.25rem;
}
.cc-num {
  font-size: 1.85rem;
  font-weight: 900;
  line-height: 1;
  color: var(--brand);
  font-variant-numeric: tabular-nums;
}
.cc-amount small {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--muted);
}
.cc-sub {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--muted);
  line-height: 1.25;
}
.cc-chevron {
  flex: 0 0 auto;
  color: var(--muted);
  display: flex;
}
.cc-chevron svg {
  width: 1.15rem;
  height: 1.15rem;
  display: block;
}
.hub-deals {
  margin: 1.15rem var(--hub-pad) 0;
  padding-top: 1.1rem;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}
.hub-deals .lever-head {
  margin-bottom: 0;
}
.hub-deals-btn {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  width: 100%;
  text-align: left;
  background: rgba(255, 255, 255, 0.07);
  border: 1.5px solid rgba(255, 255, 255, 0.14);
  border-radius: 0.95rem;
  padding: 0.6rem 0.7rem;
  color: #fff;
  transition: background 80ms ease, transform 80ms ease;
}
.hub-deals-btn:active {
  background: rgba(255, 255, 255, 0.13);
  transform: scale(0.99);
}
.dc-icon {
  flex: 0 0 auto;
  width: 2.3rem;
  height: 2.3rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  line-height: 1;
  background: #fbe6c2;
  border-radius: 0.7rem;
}
.dc-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}
.dc-line {
  font-size: 0.92rem;
  font-weight: 800;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
}
.dc-sub {
  font-size: 0.72rem;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.5);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dc-dot {
  flex: 0 0 auto;
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 50%;
  background: var(--danger);
}
.dc-chevron {
  flex: 0 0 auto;
  color: rgba(255, 255, 255, 0.45);
  display: flex;
}
.dc-chevron svg {
  width: 1.05rem;
  height: 1.05rem;
  display: block;
}
.deals-alert-fix {
  font-size: 0.76rem;
  font-weight: 700;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.62);
}
.deals-alert-retry {
  font: inherit;
  font-weight: 900;
  color: var(--accent);
  background: none;
  border: none;
  padding: 0.1rem 0.2rem;
  text-decoration: underline;
}
.deals-alert-why {
  font-size: 0.72rem;
  font-weight: 600;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.45);
  margin-top: -0.35rem;
}
.deals-sheet {
  gap: 0.8rem;
}
.deals-list {
  list-style: none;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}
.deals-list li {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  text-align: left;
  background: var(--paper);
  border: 2.5px solid var(--edge);
  border-radius: 1rem;
  padding: 0.85rem 0.95rem;
}
.deals-list li.is-unread {
  border-color: #a56a14;
}
.deal-logo {
  flex: 0 0 auto;
  width: 2.6rem;
  height: 2.6rem;
  border-radius: 0.7rem;
  background: var(--sky) center / contain no-repeat;
  border: 2px solid var(--edge);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
}
.deal-text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}
.deal-vendor {
  font-size: 0.78rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}
.deal-head {
  font-size: 1.02rem;
  font-weight: 900;
  line-height: 1.25;
}
.deal-copy {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--muted);
  line-height: 1.35;
}
.deal-ends {
  font-size: 0.76rem;
  font-weight: 700;
  color: #a56a14;
}
.deals-empty {
  color: var(--muted);
  font-weight: 700;
  padding: 1.5rem 0;
}
.deals-optin {
  width: 100%;
  text-align: left;
  background: rgba(150, 190, 230, 0.12);
  border: 1.5px solid rgba(150, 190, 230, 0.34);
  border-radius: 0.95rem;
  padding: 0.7rem 0.8rem;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}
.deals-optin-text {
  font-size: 0.8rem;
  font-weight: 700;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.86);
}
.deals-optin-actions {
  display: flex;
  gap: 0.45rem;
}
.deals-optin-yes,
.deals-optin-no {
  font: inherit;
  font-weight: 900;
  font-size: 0.82rem;
  padding: 0.45rem 0.8rem;
  border-radius: 0.6rem;
  border: 1.5px solid var(--accent);
}
.deals-optin-yes {
  background: var(--accent);
  color: var(--navy);
}
.deals-optin-no {
  background: transparent;
  color: rgba(255, 255, 255, 0.72);
  border-color: rgba(255, 255, 255, 0.24);
}
.setting-note {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--muted);
  padding: 0 0.3rem;
  line-height: 1.35;
}
.nearby-optin {
  margin: 10px 1.3rem 0.9rem;
  background: var(--card);
  border: 3px solid var(--edge);
  border-radius: 1.1rem;
  padding: 0.9rem 1rem;
  box-shadow: 0 4px 0 var(--edge);
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  text-align: left;
}
.nearby-optin-text {
  font-size: 0.88rem;
  font-weight: 700;
  line-height: 1.4;
  color: var(--ink);
}
.nearby-optin-actions {
  display: flex;
  gap: 0.45rem;
  flex-wrap: wrap;
}
.nearby-optin-yes,
.nearby-optin-no {
  font: inherit;
  font-weight: 900;
  font-size: 0.85rem;
  padding: 0.5rem 0.9rem;
  border-radius: 0.65rem;
  border: 2px solid var(--navy);
}
.nearby-optin-yes {
  background: var(--navy);
  color: #fff;
}
.nearby-optin-no {
  background: transparent;
  color: var(--muted);
  border-color: var(--edge);
}
.nearby-help-steps {
  width: 100%;
  margin: 0.3rem 0 0.7rem;
  padding-left: 1.35rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  text-align: left;
  font-size: 0.9rem;
  font-weight: 600;
  line-height: 1.4;
  color: var(--ink);
}
.nearby-help-steps li {
  padding-left: 0.15rem;
}
.move-view {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.9rem;
}
.move-whatis {
  display: inline;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-weight: 800;
  color: var(--brand);
  text-decoration: underline;
}
.move-vendors {
  width: 100%;
  max-height: 11rem;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  flex: 0 0 auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
  scrollbar-width: thin;
  scrollbar-color: var(--edge) transparent;
}
.move-vendors::-webkit-scrollbar {
  width: 0.4rem;
}
.move-vendors::-webkit-scrollbar-thumb {
  background: var(--edge);
  border-radius: 999px;
}
.move-vendor {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  width: 100%;
  text-align: left;
  background: var(--card);
  border: 2.5px solid var(--edge);
  border-radius: 0.9rem;
  padding: 0.65rem 0.85rem;
}
.move-vendor.is-selected {
  border-color: var(--navy);
  box-shadow: inset 0 0 0 1.5px var(--navy);
  background: var(--sky);
}
.mv-name {
  min-width: 0;
  font-weight: 900;
  font-size: 1rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mv-balance {
  flex-shrink: 0;
  font-weight: 700;
  font-size: 0.78rem;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.move-empty {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--muted);
  text-align: center;
  padding: 0.6rem 0;
}
.move-amount-row {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
}
.move-amount-label {
  font-weight: 800;
  font-size: 0.9rem;
}
.move-amount-wrap {
  display: flex;
  align-items: center;
  gap: 0.45rem;
}
.move-amount {
  width: 6.2rem;
  padding: 0.5rem 0.6rem;
  text-align: right;
  font: inherit;
  font-weight: 900;
  font-size: 1.05rem;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  background: var(--card);
  border: 2.5px solid var(--edge);
  border-radius: 0.7rem;
}
.move-max {
  padding: 0.5rem 0.7rem;
  font-weight: 900;
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  background: var(--sky);
  color: var(--navy);
  border-radius: 0.7rem;
}
.move-final {
  font-size: 0.9rem;
  font-weight: 800;
  color: var(--warn);
  text-align: center;
}
.home-actions {
  display: grid;
  gap: 0.7rem;
}
.home-actions-row {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: 0.7rem;
}
.home-actions-row > [hidden] {
  display: none;
}
.earn-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  text-align: center;
  background: var(--card);
  color: var(--ink);
  border: 3px solid var(--edge);
  border-radius: 1.1rem;
  padding: 0.7rem 0.45rem;
  box-shadow: 0 4px 0 var(--edge);
  transition: transform 80ms ease, box-shadow 80ms ease;
}
.earn-btn:active {
  transform: translateY(3px);
  box-shadow: 0 1px 0 var(--edge);
}
.earn-btn-wide {
  flex-direction: row;
  gap: 0.7rem;
  padding: 0.7rem 0.9rem;
}
.et-icon {
  flex: 0 0 auto;
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 0.7rem;
  background: var(--sky);
  color: var(--navy);
  display: flex;
  align-items: center;
  justify-content: center;
}
.et-icon svg {
  width: 1.35rem;
  height: 1.35rem;
  display: block;
}
.et-title {
  font-size: 0.85rem;
  font-weight: 900;
  line-height: 1.15;
}
.earn-btn-wide .et-title {
  font-size: 1rem;
}
.et-abbr {
  display: none;
}
.home-actions.is-flat {
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
}
.home-actions.is-flat .home-actions-row {
  display: contents;
}
.home-actions.is-flat .earn-btn-wide {
  flex-direction: column;
  gap: 0.4rem;
  padding: 0.7rem 0.45rem;
}
.home-actions.is-flat .earn-btn-wide .et-title {
  font-size: 0.85rem;
}
.home-actions.is-flat .et-full {
  display: none;
}
.home-actions.is-flat .et-abbr {
  display: inline;
}
.show-code-btn {
  background: var(--navy);
  color: #fff;
}
.show-code-btn .et-icon {
  background: rgba(255, 255, 255, 0.13);
  color: var(--accent);
}
.show-code-btn .et-title {
  color: #3DDC97;
}
.invite-btn .et-icon {
  background: var(--accent);
  color: var(--navy);
}
.receipt-preview {
  width: 100%;
  max-height: 40vh;
  object-fit: contain;
  border: 2px solid var(--edge);
  border-radius: 0.8rem;
  background: var(--bg);
}
.receipt-view {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.7rem;
  width: 100%;
}
.vendor-search-icon {
  flex: 0 0 auto;
  font-size: 0.85rem;
  line-height: 1;
  opacity: 0.75;
}
.vendor-search-clear {
  flex: 0 0 auto;
  width: 1.6rem;
  height: 1.6rem;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  font-weight: 900;
  line-height: 1;
  color: var(--muted);
  background: var(--hairline);
  border: 0;
  cursor: pointer;
}
.vendor-search-clear[hidden] {
  display: none;
}
.vendor-search-clear:active {
  transform: scale(0.92);
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  -webkit-clip-path: inset(50%);
  clip-path: inset(50%);
  white-space: nowrap;
}
.vendor-carousel {
  display: flex;
  gap: 1rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  padding: 0.4rem 1.3rem 0.9rem;
  scroll-padding: 0 1.3rem;
  scrollbar-width: none;
  overscroll-behavior-x: contain;
}
.vendor-carousel::-webkit-scrollbar {
  display: none;
}
.vendor-card {
  flex: 0 0 85%;
  max-width: 300px;
  scroll-snap-align: center;
  scroll-snap-stop: always;
  background: var(--card);
  border: 3px solid var(--edge);
  border-radius: 1.3rem;
  box-shadow: 0 5px 0 var(--edge);
  padding: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  text-align: left;
  transition: transform 90ms ease;
  min-height: 200px;
  min-width: min-content;
}
.vendor-card:first-child {
  scroll-snap-align: start;
}
.vendor-card:last-child {
  scroll-snap-align: end;
}
.vendor-card:hover {
  transform: scale(1.02);
}
.vendor-card:active {
  transform: scale(0.98);
}
.vendor-carousel.single .vendor-card {
  flex-basis: 100%;
  max-width: none;
}
.vendor-dots {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 2rem;
  margin: 0 1.3rem 0.9rem;
}
.vendor-dots[hidden] {
  display: none;
}
.vendor-carousel {
  padding-bottom: 0.45rem;
}
.vendor-carousel.single,
.vendor-carousel:empty {
  padding-bottom: 0.9rem;
}
.vdot {
  flex: 0 0 auto;
  width: 1.5rem;
  height: 2rem;
  padding: 0;
  border: 0;
  background: none;
  appearance: none;
  -webkit-appearance: none;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 0;
  touch-action: manipulation;
}
.vdot-i {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background-color: var(--muted);
  opacity: 0.45;
  transform: scale(1);
  box-shadow: 0 0 0 0 transparent;
  transition:
    transform 160ms ease,
    background-color 160ms ease,
    opacity 160ms ease,
    box-shadow 160ms ease;
}
.vdot.is-active .vdot-i {
  transform: scale(1.24);
  background-color: var(--brand);
  opacity: 1;
  box-shadow: 0 0 0 1.5px var(--edge);
}
.vdot.is-edge .vdot-i {
  transform: scale(0.64);
  opacity: 0.3;
}
@media (prefers-reduced-motion: reduce) {
  .vdot-i {
    transition: none;
  }
}
.vc-body {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 0.35rem;
  padding: 1.1rem 1.3rem;
}
.vendor-card.no-map {
  align-self: center;
  min-height: 0;
}
.vc-band {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.7rem 1.3rem;
  background: var(--plate);
  border-bottom: 3px solid var(--edge);
}
.vc-mark {
  flex: 0 0 auto;
  width: 2.3rem;
  height: 2.3rem;
  border-radius: 0.45rem;
  overflow: hidden;
}
.vc-logo {
  display: block;
  width: 100%;
  height: 100%;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}
.vc-mono {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  font-size: 0.85rem;
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--brand);
}
.vc-name {
  min-width: 0;
  font-weight: 900;
  font-size: 1.06rem;
  line-height: 1.15;
  color: var(--ink);
  overflow-wrap: anywhere;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.vc-points {
  display: flex;
  align-items: baseline;
  gap: 0.3rem;
  flex-wrap: nowrap;
}
.vc-num {
  font-size: 3rem;
  font-weight: 900;
  line-height: 1;
  color: var(--brand);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.vc-points small {
  font-size: 1rem;
  font-weight: 700;
  color: var(--muted);
  white-space: nowrap;
}
.vc-rate {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--muted);
  line-height: 1.25;
  overflow-wrap: anywhere;
}
.vc-pool {
  align-self: flex-start;
  max-width: 100%;
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
  background: var(--plate);
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 800;
  line-height: 1.3;
  overflow-wrap: anywhere;
}
.vc-address {
  margin-top: 0.6rem;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--muted);
  line-height: 1.25;
  overflow-wrap: anywhere;
  text-decoration: underline;
  text-underline-offset: 2px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.vc-map {
  position: relative;
  display: block;
  flex: 0 0 150px;
  height: 150px;
  overflow: hidden;
  background: #e5e7eb;
  border-top: 2px solid var(--edge);
}
.vc-map-inner {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 512px;
  height: 512px;
}
.vc-tile {
  position: absolute;
  width: 256px;
  height: 256px;
  display: block;
}
.vc-map-pin {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -100%);
  font-size: 1.6rem;
  line-height: 1;
  filter: drop-shadow(0 1px 1.5px rgba(0, 0, 0, .4));
  pointer-events: none;
}
.signout-big {
  width: 100%;
  background: var(--danger);
  color: #fff;
  font-size: 1.2rem;
  font-weight: 900;
  padding: 1.15rem;
  border-radius: 0.9rem;
  box-shadow: 0 4px 0 var(--danger-press);
  transition: transform 80ms ease, box-shadow 80ms ease;
}
.signout-big:active {
  transform: translateY(3px);
  box-shadow: 0 1px 0 var(--danger-press);
}
.points-bar {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 0.9rem;
  padding: 1rem 1.3rem;
  padding-top: calc(1rem + env(safe-area-inset-top));
  background: var(--navy);
  color: #fff;
  border-radius: 0 0 1.2rem 1.2rem;
}
.pb-back {
  flex-shrink: 0;
  width: 2.6rem;
  height: 2.6rem;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  font-size: 1.5rem;
  font-weight: 900;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}
.pb-back:active {
  background: rgba(255, 255, 255, 0.24);
}
.pb-vendor {
  flex: 1;
  min-width: 0;
  font-weight: 900;
  letter-spacing: 0.1em;
  font-size: 1rem;
  color: var(--accent);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pb-points {
  display: flex;
  align-items: baseline;
  gap: 0.3rem;
  flex-shrink: 0;
  transform-origin: right center;
}
.pb-points span {
  font-size: 2.6rem;
  font-weight: 900;
  line-height: 1;
  transition: color 200ms ease;
}
.pb-points small {
  font-size: 1rem;
  font-weight: 700;
  color: var(--sky);
}
.pb-points.is-bump {
  animation: pbBump 480ms cubic-bezier(0.22, 1, 0.36, 1);
}
.pb-points.gain span {
  color: #7be0a6;
}
.pb-points.lose span {
  color: #f0b968;
}
@keyframes pbBump {
  0% {
    transform: scale(1);
  }
  35% {
    transform: scale(1.16);
  }
  100% {
    transform: scale(1);
  }
}
@media (prefers-reduced-motion: reduce) {
  .pb-points.is-bump {
    animation: none;
  }
}
.points-toast {
  position: fixed;
  left: 50%;
  top: calc(4.4rem + env(safe-area-inset-top));
  transform: translateX(-50%) translateY(-10px);
  z-index: 45;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.65rem 1.15rem;
  border-radius: 999px;
  font-weight: 900;
  font-size: 1.05rem;
  color: #fff;
  white-space: nowrap;
  box-shadow: 0 8px 20px rgba(16, 29, 51, 0.28);
  opacity: 0;
  pointer-events: none;
  transition: opacity 260ms ease, transform 260ms ease;
}
.points-toast[hidden] {
  display: none;
}
.points-toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
.points-toast.gain {
  background: var(--success);
}
.points-toast.lose {
  background: var(--warn);
}
.app-main {
  flex: 1 0 auto;
  padding: 1.3rem 1.3rem 3rem;
}
.vendor-map-cta {
  position: -webkit-sticky;
  position: sticky;
  bottom: 0;
  z-index: 6;
  flex: 0 0 auto;
  padding: 0.8rem;
  background: var(--paper);
  border-top: 2px solid var(--hairline);
}
.vendor-map-cta[hidden] {
  display: none;
}
.vendor-map-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.85rem 1rem;
  border-radius: 1.1rem;
  font: inherit;
  font-size: 1rem;
  font-weight: 900;
  background: var(--navy);
  color: #fff;
  border: 3px solid var(--edge);
  box-shadow: 0 4px 0 var(--edge);
  cursor: pointer;
  transition: transform 90ms ease, box-shadow 90ms ease;
}
.vmb-icon {
  margin-right: 0.5rem;
  font-size: 1.1rem;
  line-height: 1;
}
.vendor-map-btn:active {
  transform: translateY(4px);
  box-shadow: 0 0 0 var(--edge);
}
.vendor-map-btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}
.vendor-rate {
  margin-bottom: 1rem;
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--muted);
  line-height: 1.3;
  text-align: center;
}
.my-code {
  width: 100%;
  text-align: center;
  background: var(--card);
  border: 3px solid var(--edge);
  border-radius: 1.1rem;
  padding: 1.3rem;
  box-shadow: 0 4px 0 var(--edge);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
}
.mc-label {
  font-size: 0.8rem;
  font-weight: 900;
  letter-spacing: 0.16em;
  color: var(--muted);
}
.mc-value {
  font-size: 1.6rem;
  font-weight: 900;
  line-height: 1.05;
  letter-spacing: 0.18em;
  text-indent: 0.18em;
  white-space: nowrap;
  max-width: 100%;
  color: var(--brand);
  font-variant-numeric: tabular-nums;
}
.mc-sub {
  font-size: 0.92rem;
  font-weight: 500;
  color: var(--muted);
}
.qr-card {
  background: #fff;
  border: 2px solid var(--hairline);
  border-radius: 0.9rem;
  padding: 0.4rem;
  margin: 0.35rem 0 0.15rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.qr-canvas {
  display: block;
}
.qr-fallback {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--muted);
}
.app-sub {
  margin: 1.6rem 0 0.8rem;
  font-weight: 900;
  letter-spacing: 0.16em;
  font-size: 0.8rem;
  color: var(--muted);
}
.empty-state {
  color: var(--muted);
  font-weight: 900;
  padding: 1.5rem 0;
  text-align: center;
  font-style: italic;
  text-overflow: ellipsis;
  overflow: hidden;
  padding: 0px 20px;
}
.items {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}
.item-card {
  width: 100%;
  text-align: left;
  background: var(--card);
  border: 3px solid var(--edge);
  border-radius: 1.1rem;
  padding: 1rem 1.2rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  transition: transform 80ms ease;
}
.item-card:active {
  transform: scale(0.985);
}
.ic-emoji {
  font-size: 2rem;
  width: 3.4rem;
  height: 3.4rem;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--sky);
  border-radius: 0.9rem;
}
.ic-body {
  flex: 1;
  min-width: 0;
}
.ic-title {
  display: block;
  font-weight: 900;
  font-size: 1.15rem;
  line-height: 1.15;
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ic-status {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--success);
  margin-top: 0.2rem;
}
.ic-cost {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.1rem;
  font-weight: 900;
  color: var(--brand);
  font-size: 1.05rem;
  line-height: 1.2;
  text-align: right;
}
.ic-cost-line {
  white-space: nowrap;
}
.ic-cost-dot {
  color: var(--muted);
  font-size: 0.65rem;
  line-height: 1;
  font-weight: 900;
}
.item-card.locked {
  opacity: 0.55;
}
.item-card.locked .ic-emoji {
  background: #e3e7ee;
  filter: grayscale(1);
}
.item-card.locked .ic-status {
  color: var(--muted);
  font-weight: 500;
}
.item-card.locked .ic-cost {
  color: var(--muted);
}
.overlay {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 40;
  background: rgba(16, 29, 51, 0);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  transition: background 300ms ease;
}
.overlay[hidden] {
  display: none;
}
.overlay.is-open {
  background: rgba(16, 29, 51, 0.55);
}
.detail-card {
  position: relative;
  width: 100%;
  background: var(--card);
  border-top: 3px solid var(--edge);
  border-radius: 1.5rem 1.5rem 0 0;
  padding: 2.2rem 1.5rem calc(2rem + env(safe-area-inset-bottom, 0px));
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
  text-align: center;
  min-height: 42vh;
  max-height: 88vh;
  overflow-y: auto;
  transform: translateY(100%);
  transition: transform 340ms cubic-bezier(0.22, 1, 0.36, 1);
}
.overlay.is-open .detail-card {
  transform: translateY(0);
}
.detail-close {
  position: absolute;
  top: 0.9rem;
  right: 0.9rem;
  width: 2.6rem;
  height: 2.6rem;
  border-radius: 50%;
  border: 2.5px solid var(--edge);
  background: var(--paper);
  font-size: 1.1rem;
  font-weight: 900;
  color: var(--ink);
}
.earn-card {
  position: relative;
  width: 100%;
  max-height: 92vh;
  max-height: 92dvh;
  background: var(--card);
  border-top: 3px solid var(--edge);
  border-radius: 1.5rem 1.5rem 0 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow: hidden;
  transform: translateY(100%);
  transition: transform 380ms cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
}
.earn-sheet.is-open .earn-card {
  transform: translateY(0);
}
.earn-card.is-dragging {
  transition: none;
}
@media (prefers-reduced-motion: reduce) {
  .earn-card {
    transition: none;
  }
}
.earn-grab {
  position: relative;
  flex: 0 0 auto;
  width: 100%;
  height: 3.6rem;
  padding-top: 0.85rem;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  touch-action: none;
  cursor: grab;
}
.earn-grab:active {
  cursor: grabbing;
}
.earn-pill {
  width: 3.4rem;
  height: 0.35rem;
  border-radius: 999px;
  background: var(--muted);
  opacity: 0.55;
}
.earn-close {
  position: absolute;
  right: 0.9rem;
  top: 0.55rem;
  width: 2.6rem;
  height: 2.6rem;
  border-radius: 50%;
  border: 2.5px solid var(--edge);
  background: var(--paper);
  font-size: 1.1rem;
  font-weight: 900;
  color: var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
  touch-action: manipulation;
}
.earn-body {
  min-height: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  text-align: center;
  padding: 0 1.5rem calc(2rem + env(safe-area-inset-bottom, 0px));
  overflow-y: auto;
}
.earn-heading {
  font-size: 0.9rem;
  margin-bottom: 0.35rem;
}
.qr-card-xl {
  padding: 0.7rem;
  border-radius: 1.2rem;
  margin: 0;
}
.earn-value {
  font-size: 2.4rem;
  margin-top: 0.75rem;
}
.detail-emoji {
  font-size: 3.4rem;
}
.detail-title {
  font-size: 1.7rem;
  font-weight: 900;
  line-height: 1.1;
}
.detail-cost {
  font-weight: 900;
  color: var(--brand);
  font-size: 1.15rem;
}
.detail-desc {
  color: var(--muted);
  font-weight: 500;
  line-height: 1.5;
}
.detail-status {
  font-weight: 700;
  font-size: 1rem;
  min-height: 1.3em;
}
.detail-status.ok {
  color: var(--success);
}
.detail-status.locked {
  color: var(--muted);
}
.consent-check {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  width: 100%;
  margin-top: 0.5rem;
  padding: 0.85rem 0.95rem;
  border: 2.5px solid var(--edge);
  border-radius: 0.9rem;
  background: var(--paper);
  text-align: left;
  font-weight: 600;
  line-height: 1.45;
  cursor: pointer;
}
.consent-check input[type=checkbox] {
  flex-shrink: 0;
  width: 1.4rem;
  height: 1.4rem;
  margin-top: 0.1rem;
  accent-color: var(--navy);
  cursor: pointer;
}
.consent-check a {
  color: var(--brand);
  font-weight: 800;
  text-decoration: underline;
}
.consent-fine {
  margin-top: 0.15rem;
  color: var(--muted);
  font-size: 0.85rem;
  font-weight: 600;
  line-height: 1.4;
}
.btn-redeem {
  margin-top: 0.6rem;
  width: 100%;
  background: var(--navy);
  color: #fff;
  font-size: 1.3rem;
  font-weight: 900;
  padding: 1.1rem;
  border-radius: 0.9rem;
}
.btn-redeem:active {
  background: var(--navy-press);
}
.btn-redeem:disabled {
  opacity: 0.4;
}
.btn-redeem.secondary {
  background: var(--card);
  color: var(--brand);
  border: 3px solid var(--brand);
  padding: calc(1.1rem - 3px);
  margin-top: 0.35rem;
}
.btn-redeem.secondary:active {
  background: var(--sky-line);
}
.btn-redeem:focus-visible,
.item-card:focus-visible,
.punch-card:focus-visible,
.vdot:focus-visible,
.hfilter:focus-visible,
.history-more:focus-visible {
  outline: 3px solid var(--brand);
  outline-offset: 2px;
}
.item-forfeit {
  font-weight: 800;
  font-size: 0.95rem;
  color: var(--danger);
}
.item-notready {
  margin-top: 0.6rem;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.15rem;
  padding: 1rem;
  border-radius: 0.9rem;
  background: var(--sky);
  border: 2px dashed var(--sky-line);
}
.inr-icon {
  font-size: 1.6rem;
}
.inr-head {
  font-weight: 900;
  font-size: 1.15rem;
  color: var(--ink);
}
.inr-sub {
  font-weight: 600;
  font-size: 0.92rem;
  color: var(--muted);
}
.item-code {
  margin-top: 0.6rem;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.45rem;
}
.item-code-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.9rem;
  flex-wrap: wrap;
}
.item-code-value {
  font-size: 1.8rem;
  font-weight: 900;
  letter-spacing: 0.14em;
  text-indent: 0.14em;
  color: var(--brand);
  font-variant-numeric: tabular-nums;
}
.item-code-timer {
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--navy);
  background: var(--sky);
  border: 2px solid var(--sky-line);
  padding: 0.4rem 0.85rem;
  border-radius: 999px;
  font-variant-numeric: tabular-nums;
}
.install-steps {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: left;
  gap: 0.7rem;
}
.install-steps-lead {
  width: 100%;
  font-weight: 800;
  color: var(--ink);
  font-size: 1.05rem;
}
.install-step-list {
  width: 100%;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  counter-reset: install-step;
}
.install-step-list li {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  counter-increment: install-step;
  background: var(--paper);
  border: 2.5px solid var(--edge);
  border-radius: 0.9rem;
  padding: 0.8rem 0.9rem;
  font-weight: 600;
  line-height: 1.4;
  color: var(--ink);
}
.install-step-list li::before {
  content: counter(install-step);
  flex: 0 0 1.7rem;
  height: 1.7rem;
  display: grid;
  place-items: center;
  background: var(--navy);
  color: #fff;
  border-radius: 50%;
  font-weight: 900;
  font-size: 0.95rem;
}
.install-step-list .step-ico {
  font-size: 1.15rem;
}
.install-inapp {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.7rem;
}
.install-copied {
  text-align: center;
  font-weight: 800;
  color: var(--success);
  font-size: 0.95rem;
}
.install-guide {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 60;
  display: flex;
  justify-content: center;
  background: rgba(16, 29, 51, 0.72);
  opacity: 0;
  transition: opacity 240ms ease;
  align-items: flex-end;
  padding: 1.25rem 1.25rem calc(env(safe-area-inset-bottom) + 4.4rem);
}
.install-guide.is-ipad {
  align-items: flex-start;
  padding: calc(env(safe-area-inset-top) + 4.4rem) 1.25rem 1.25rem;
}
.install-guide.is-open {
  opacity: 1;
}
.install-guide-copy {
  width: 100%;
  max-width: 21rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  background: var(--card);
  border: 3px solid var(--edge);
  border-radius: 1.1rem;
  box-shadow: 0 5px 0 var(--edge);
  padding: 1rem;
}
.install-guide-title {
  font-weight: 900;
  font-size: 1.1rem;
  line-height: 1.25;
  color: var(--ink);
}
.install-guide-step {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  font-weight: 600;
  line-height: 1.4;
  color: var(--ink);
}
.install-guide-num {
  flex: 0 0 1.5rem;
  height: 1.5rem;
  display: grid;
  place-items: center;
  background: var(--navy);
  color: #fff;
  border-radius: 50%;
  font-weight: 900;
  font-size: 0.9rem;
}
.install-guide-hint {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--muted);
  text-align: center;
}
.install-guide-arrow {
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(env(safe-area-inset-bottom) + 0.4rem + 15px);
  text-align: right;
  padding-right: calc(1.1rem + 25px);
  font-size: 2.75rem;
  line-height: 1;
  font-weight: 900;
  color: var(--accent);
  text-shadow: 0 2px 0 var(--edge);
  animation: install-arrow-down 1.15s ease-in-out infinite;
}
.install-guide.is-ipad .install-guide-arrow {
  left: auto;
  right: 1.1rem;
  bottom: auto;
  top: calc(env(safe-area-inset-top) + 0.4rem);
  text-align: right;
  padding-right: 0;
  animation-name: install-arrow-up;
}
@keyframes install-arrow-down {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(9px);
  }
}
@keyframes install-arrow-up {
  0%, 100% {
    transform: rotate(180deg) translateY(0);
  }
  50% {
    transform: rotate(180deg) translateY(9px);
  }
}
@media (prefers-reduced-motion: reduce) {
  .install-guide-arrow {
    animation: none;
  }
  .install-guide.is-ipad .install-guide-arrow {
    transform: rotate(180deg);
  }
  .install-guide {
    transition: none;
  }
}
.install-banner {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  margin: 0;
  padding: 0.5rem 0.7rem;
  background: var(--card);
  border: 3px solid var(--edge);
  border-radius: 1.1rem;
  box-shadow: 0 4px 0 var(--edge);
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity 260ms ease, transform 260ms ease;
}
.install-banner.is-open {
  opacity: 1;
  transform: translateY(0);
}
.install-banner-emoji {
  font-size: 1.25rem;
  flex-shrink: 0;
}
.install-banner-text {
  flex: 1;
  min-width: 0;
  font-weight: 700;
  font-size: 0.85rem;
  line-height: 1.25;
}
.install-banner-add {
  flex-shrink: 0;
  background: var(--navy);
  color: #fff;
  font-weight: 900;
  font-size: 0.85rem;
  padding: 0.4rem 0.75rem;
  border-radius: 0.7rem;
}
.install-banner-add:active {
  background: var(--navy-press);
}
.install-banner-close {
  flex-shrink: 0;
  width: 1.7rem;
  height: 1.7rem;
  border-radius: 50%;
  font-size: 0.8rem;
  font-weight: 900;
  color: var(--muted);
  border: 2px solid var(--edge);
  background: var(--paper);
}
.install-devreset {
  opacity: 0.7;
  border-style: dashed;
}
#app {
  margin: 0 auto;
  height: 100vh;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--paper);
}
.tab-viewport {
  flex: 1;
  overflow: hidden;
  position: relative;
}
.tab-track {
  display: flex;
  height: 100%;
  transform: translateX(calc(var(--tab, 0) * -100%));
  transition: transform 360ms cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
}
.tab-track.is-dragging {
  transition: none;
}
@media (prefers-reduced-motion: reduce) {
  .tab-track {
    transition: none;
  }
}
.tab-page {
  flex: 0 0 100%;
  height: 100%;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  position: relative;
}
#vendor {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 5;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  background: var(--paper);
  touch-action: pan-y;
  transform: translateX(100%);
  will-change: transform;
}
#vendor[hidden] {
  display: none;
}
#vendor.is-open {
  transform: translateX(0);
}
#vendor.is-sliding {
  transition: transform 360ms cubic-bezier(0.22, 1, 0.36, 1);
}
#vendor.is-dragging {
  transition: none;
}
@media (prefers-reduced-motion: reduce) {
  #vendor.is-sliding {
    transition: none;
  }
}
.tabbar {
  flex-shrink: 0;
  display: flex;
  background: var(--card);
  border-top: 2px solid var(--hairline);
  padding-bottom: env(safe-area-inset-bottom);
  z-index: 30;
}
@media (display-mode: standalone) {
  .tabbar {
    padding-bottom: max(0.4rem, calc(env(safe-area-inset-bottom) - 0.6rem));
  }
}
.tab-btn {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.18rem;
  padding: 0.62rem 0 0.55rem;
  color: var(--muted);
  font-weight: 800;
  font-size: 0.68rem;
  letter-spacing: 0.02em;
  transition: color 160ms ease, transform 120ms ease;
}
.tab-btn svg {
  width: 25px;
  height: 25px;
  display: block;
}
.tab-btn:active {
  transform: scale(0.92);
}
.tab-btn.is-active {
  color: var(--brand);
}
.tab-btn.is-active::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 2.2rem;
  height: 3px;
  border-radius: 0 0 3px 3px;
  background: var(--brand);
}
#spots,
#history,
#account {
  min-height: 100%;
  display: flex;
  flex-direction: column;
  padding: calc(1.6rem + env(safe-area-inset-top)) 1.3rem 1.6rem;
}
.spots-sub-row {
  display: flex;
  align-items: center;
  margin-top: 0.2rem;
}
.spots-sub-row .page-sub {
  margin-top: 0;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.spots-filter {
  margin-left: auto;
  padding-left: 0.75rem;
  flex: 0 0 auto;
  position: relative;
  display: flex;
  align-items: center;
}
.spots-filter-btn {
  font-family: inherit;
  font-size: 1rem;
  font-weight: 800;
  color: var(--brand);
  background: var(--card);
  border: 2px solid var(--edge);
  border-radius: 999px;
  padding: 0.25rem 0.9rem;
  line-height: 1.25;
  cursor: pointer;
  outline: none;
  display: flex;
  align-items: center;
  max-width: 11rem;
}
.spots-filter-btn:focus-visible {
  border-color: var(--brand);
  box-shadow: inset 0 0 0 1.5px var(--brand);
}
.spots-filter-btn.is-on {
  border-color: var(--brand);
}
.spots-filter-ico {
  display: flex;
  align-items: center;
  margin-right: 0.35rem;
  flex: 0 0 auto;
}
.spots-filter-ico svg {
  width: 0.95rem;
  height: 0.95rem;
  display: block;
}
.spots-filter-label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.spots-filter-count {
  flex: 0 0 auto;
  margin-left: 0.35rem;
  min-width: 1.15rem;
  height: 1.15rem;
  padding: 0 0.25rem;
  border-radius: 999px;
  background: var(--brand);
  color: var(--card);
  font-size: 0.7rem;
  font-weight: 900;
  line-height: 1.15rem;
  text-align: center;
}
.filter-card {
  text-align: left;
}
.filter-group {
  border: 0;
  padding: 0;
  margin: 0 0 1.1rem;
  min-width: 0;
}
.filter-legend {
  padding: 0;
  margin-bottom: 0.5rem;
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}
.filter-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  align-items: center;
  justify-content: center;
}
.filter-chip {
  display: inline-flex;
  align-items: center;
  padding: 0.45rem 0.85rem;
  border-radius: 999px;
  border: 2.5px solid var(--edge);
  background: var(--card);
  color: var(--ink);
  font-size: 0.9rem;
  font-weight: 800;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
}
.filter-chip input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  -webkit-clip-path: inset(50%);
  clip-path: inset(50%);
  white-space: nowrap;
}
.filter-chip.is-on,
.filter-chip:has(input:checked) {
  border-color: var(--brand);
  background: var(--brand);
  color: var(--card);
}
.filter-chip:has(input:focus-visible) {
  box-shadow: 0 0 0 2px var(--edge);
}
.filter-note {
  margin-top: 0.45rem;
  font-size: 0.75rem;
  color: var(--muted);
  line-height: 1.35;
}
.filter-actions {
  margin-top: 1.2rem;
}
.spots-search-row {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  margin-bottom: 1rem;
  padding: 0.55rem 0.85rem;
  background: var(--card);
  border: 2px solid var(--edge);
  border-radius: 0.85rem;
}
.spots-search-row .vendor-search-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.35rem;
  height: 1.5rem;
  font-size: 0.95rem;
  line-height: 1;
}
.spots-search-input {
  flex: 1 1 auto;
  min-width: 0;
  border: none;
  background: none;
  outline: none;
  font-family: inherit;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--ink);
  -webkit-appearance: none;
  appearance: none;
}
.spots-search-input::-webkit-search-decoration,
.spots-search-input::-webkit-search-cancel-button {
  -webkit-appearance: none;
}
.spots-search-input::placeholder {
  color: var(--muted);
  font-weight: 600;
}
.spots-random {
  font-family: inherit;
  width: 100%;
  margin: -0.5rem 0 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.7rem 1rem;
  font-size: 0.95rem;
  font-weight: 800;
  color: var(--brand);
  background: var(--card);
  border: 2.5px solid var(--edge);
  border-radius: 0.85rem;
  box-shadow: 0 3px 0 var(--edge);
  cursor: pointer;
  outline: none;
  -webkit-appearance: none;
  appearance: none;
}
.spots-random[hidden] {
  display: none;
}
.spots-random:active {
  transform: translateY(3px);
  box-shadow: 0 0 0 var(--edge);
}
.spots-random:focus-visible {
  border-color: var(--brand);
  box-shadow: inset 0 0 0 1.5px var(--brand), 0 3px 0 var(--edge);
}
.spots-random-ico {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
}
.spots-random-ico svg {
  width: 1.15rem;
  height: 1.15rem;
  display: block;
}
.spots-random-label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.spots-random.is-rolling {
  color: var(--muted);
}
.spots-random.is-rolling .spots-random-ico {
  animation: diceRoll 0.55s linear infinite;
}
.spots-random.is-landed {
  border-color: var(--brand);
}
.pick-card {
  min-height: auto;
  gap: 0.4rem;
  padding-top: 1.9rem;
}
.pick-eyebrow {
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}
.pick-mark {
  width: 4rem;
  height: 4rem;
  margin: 0.2rem 0 0.15rem;
  border-radius: 1rem;
  overflow: hidden;
  background: var(--plate);
  border: 2.5px solid var(--edge);
  display: flex;
  align-items: center;
  justify-content: center;
}
.pick-mark .spot-mono {
  font-size: 1.35rem;
}
.pick-tags {
  font-size: 0.88rem;
  font-weight: 800;
  color: var(--brand);
}
.pick-tags[hidden] {
  display: none;
}
.pick-card .btn-redeem {
  margin-top: 0.9rem;
}
@keyframes diceRoll {
  to {
    transform: rotate(360deg);
  }
}
@media (prefers-reduced-motion: reduce) {
  .spots-random.is-rolling .spots-random-ico {
    animation: none;
  }
  .spots-random:active {
    transform: none;
    box-shadow: 0 3px 0 var(--edge);
  }
}
.spots-new {
  display: flex;
  flex-direction: column;
  max-height: 25vh;
  margin-bottom: 1rem;
  padding: 0.7rem 0.75rem 0.75rem;
  border: 2px solid var(--edge);
  border-radius: 1rem;
}
.spots-new[hidden] {
  display: none;
}
.spots-new-head {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  margin-bottom: 0.6rem;
  padding: 0 0.1rem;
}
.spots-new-badge {
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.12em;
  color: var(--sky);
  background: var(--navy);
  padding: 0.18rem 0.45rem;
  border-radius: 0.35rem;
  margin-right: 0.5rem;
}
.spots-new-label {
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  color: var(--brand);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.spots-new-list {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-y: contain;
  display: flex;
  flex-direction: column;
}
.spots-new-list > .spot-row + .spot-row {
  margin-top: 0.5rem;
}
.spots-new-list .spot-row {
  background: var(--card);
}
.spots-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.spots-list[hidden] {
  display: none;
}
.spot-row {
  display: grid;
  grid-template-columns: 2.6rem minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 0.8rem;
  width: 100%;
  padding: 0.7rem 0.85rem;
  background: var(--card);
  border: 2px solid var(--edge);
  border-radius: 0.9rem;
  text-align: left;
  font-family: inherit;
  transition: transform 90ms ease;
}
.spot-row:active {
  transform: scale(0.985);
}
.spot-mark {
  width: 2.6rem;
  height: 2.6rem;
  border-radius: 0.55rem;
  overflow: hidden;
  background: var(--plate);
  display: flex;
  align-items: center;
  justify-content: center;
}
.spot-logo {
  display: block;
  width: 100%;
  height: 100%;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}
.spot-mono {
  font-weight: 900;
  font-size: 0.85rem;
  letter-spacing: 0.02em;
  color: var(--brand);
}
.spot-name {
  min-width: 0;
  font-weight: 800;
  font-size: 0.98rem;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.spot-sub {
  display: block;
  font-weight: 600;
  font-size: 0.76rem;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 0.1rem;
}
.spot-pool {
  grid-column: 1 / -1;
  justify-self: start;
  margin-top: -0.2rem;
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
  background: var(--plate);
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 800;
  line-height: 1.3;
}
.spot-points {
  font-weight: 900;
  font-size: 0.95rem;
  color: var(--brand);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.spot-points small {
  font-size: 0.62em;
  font-weight: 800;
  margin-left: 0.15em;
  color: var(--muted);
}
.spot-heart {
  flex: 0 0 auto;
  width: 2.75rem;
  height: 2.75rem;
  margin: -0.4rem -0.35rem -0.4rem 0;
  padding: 0;
  border: 0;
  background: none;
  appearance: none;
  -webkit-appearance: none;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  touch-action: manipulation;
  transition: transform 120ms ease, color 120ms ease;
}
.spot-heart svg {
  width: 1.35rem;
  height: 1.35rem;
  display: block;
}
.spot-heart:active {
  transform: scale(0.86);
}
.spot-heart.is-on {
  color: var(--danger);
}
.spot-heart svg path {
  fill: none;
  stroke: currentColor;
}
.spot-heart.is-on svg path {
  fill: currentColor;
}
.spot-heart.is-busy {
  opacity: 0.55;
}
.spots-skel {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.spots-skel[hidden] {
  display: none;
}
.spots-skel-row {
  display: grid;
  grid-template-columns: 2.6rem minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.8rem;
  padding: 0.7rem 0.85rem;
  border: 2px solid var(--hairline);
  border-radius: 0.9rem;
}
.sskel-mark {
  width: 2.6rem;
  height: 2.6rem;
  border-radius: 0.55rem;
}
.sskel-name {
  height: 0.95rem;
  border-radius: 0.3rem;
}
.sskel-pts {
  width: 3.2rem;
  height: 0.95rem;
  border-radius: 0.3rem;
}
.spots-skel-row:nth-child(2) .sskel-name {
  width: 62%;
}
.spots-skel-row:nth-child(3) .sskel-name {
  width: 78%;
}
.spots-skel-row:nth-child(4) .sskel-name {
  width: 54%;
}
.spots-skel-row:nth-child(5) .sskel-name {
  width: 70%;
}
.spots-skel-row:nth-child(6) .sskel-name {
  width: 48%;
}
.page-head {
  margin-bottom: 1.2rem;
}
.page-title {
  font-size: 1.9rem;
  font-weight: 900;
  letter-spacing: -0.01em;
}
.page-sub {
  margin-top: 0.2rem;
  color: var(--muted);
  font-weight: 600;
  font-size: 0.95rem;
}
.history-list {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}
.history-day {
  margin: 1.15rem 0 0.25rem;
  font-weight: 900;
  letter-spacing: 0.12em;
  font-size: 0.72rem;
  text-transform: uppercase;
  color: var(--muted);
}
.history-day:first-child {
  margin-top: 0;
}
.history-row {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  background: var(--card);
  border: 2.5px solid var(--edge);
  border-radius: 1rem;
  padding: 0.8rem 1rem;
  box-shadow: 0 3px 0 var(--edge);
}
.hr-icon {
  flex-shrink: 0;
  width: 2.7rem;
  height: 2.7rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
  border-radius: 0.75rem;
  background: var(--sky);
}
.history-row.redeem .hr-icon {
  background: #ffe6c2;
}
.hr-body {
  flex: 1;
  min-width: 0;
}
.hr-title {
  display: block;
  font-weight: 900;
  font-size: 1rem;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.hr-sub {
  display: block;
  margin-top: 0.15rem;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--muted);
}
.hr-points {
  flex-shrink: 0;
  font-weight: 900;
  font-size: 1.05rem;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.hr-points small {
  font-size: 0.62em;
  font-weight: 800;
  margin-left: 0.15em;
}
.history-row.earn .hr-points {
  color: var(--success);
}
.history-row.redeem .hr-points {
  color: var(--warn);
}
.history-row.transfer .hr-icon {
  background: var(--sky);
}
.history-row.transfer .hr-points {
  color: var(--brand);
}
.history-filters {
  display: flex;
  margin: 0 -1.3rem 1rem;
  padding: 0.35rem 1.3rem;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  overscroll-behavior-x: contain;
}
.history-filters[hidden] {
  display: none;
}
.history-filters::-webkit-scrollbar {
  display: none;
}
.hfilter + .hfilter {
  margin-left: 0.4rem;
}
.hfilter {
  flex: 0 0 auto;
  height: 2.3rem;
  padding: 0 0.85rem;
  max-width: 11rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  border-radius: 999px;
  background: var(--card);
  color: var(--ink);
  border: 2.5px solid var(--edge);
  box-shadow: 0 3px 0 var(--edge);
  font-size: 0.8rem;
  font-weight: 900;
  letter-spacing: 0.04em;
}
.hfilter.is-selected {
  border-color: var(--sky);
  color: var(--sky);
  box-shadow: inset 0 0 0 1.5px var(--navy), 0 3px 0 var(--edge);
}
.hfilter:active {
  transform: translateY(3px);
  box-shadow: 0 0 0 var(--edge);
}
.hfilter.is-selected:active {
  box-shadow: inset 0 0 0 1.5px var(--navy), 0 0 0 var(--edge);
}
.history-more {
  width: 100%;
  margin-top: 1rem;
  background: var(--card);
  color: var(--ink);
  border: 3px solid var(--edge);
  border-radius: 1.1rem;
  padding: 0.7rem 0.9rem;
  box-shadow: 0 4px 0 var(--edge);
  font-size: 0.95rem;
  font-weight: 900;
}
.history-more:active {
  transform: translateY(3px);
  box-shadow: 0 1px 0 var(--edge);
}
.history-more:disabled {
  opacity: 0.55;
}
.history-skel {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}
.history-skel[hidden] {
  display: none;
}
.hskel-day {
  width: 4.4rem;
  height: 0.85rem;
  border-radius: 0.3rem;
  margin-bottom: 0.25rem;
}
.hskel-row {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  background: var(--card);
  border: 2.5px solid var(--edge);
  border-radius: 1rem;
  padding: 0.8rem 1rem;
  box-shadow: 0 3px 0 var(--edge);
}
.hskel-icon {
  flex-shrink: 0;
  width: 2.7rem;
  height: 2.7rem;
  border-radius: 0.75rem;
}
.hskel-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.34rem;
}
.hskel-title {
  height: 1rem;
  width: 64%;
  border-radius: 0.3rem;
}
.hskel-sub {
  height: 0.82rem;
  width: 46%;
  border-radius: 0.3rem;
}
.hskel-pts {
  flex-shrink: 0;
  width: 3.1rem;
  height: 1.05rem;
  border-radius: 0.3rem;
}
.history-skel > :nth-child(2) {
  --skel-delay: 0.07s;
}
.history-skel > :nth-child(3) {
  --skel-delay: 0.14s;
}
.history-skel > :nth-child(4) {
  --skel-delay: 0.21s;
}
.history-skel > :nth-child(5) {
  --skel-delay: 0.28s;
}
.history-skel > :nth-child(6) {
  --skel-delay: 0.35s;
}
.history-skel > :nth-child(3) .hskel-title {
  width: 52%;
}
.history-skel > :nth-child(3) .hskel-sub {
  width: 60%;
}
.history-skel > :nth-child(4) .hskel-title {
  width: 72%;
}
.history-skel > :nth-child(4) .hskel-sub {
  width: 38%;
}
.history-skel > :nth-child(5) .hskel-title {
  width: 45%;
}
.history-skel > :nth-child(5) .hskel-sub {
  width: 55%;
}
.history-skel > :nth-child(6) .hskel-title {
  width: 66%;
}
.history-skel > :nth-child(6) .hskel-sub {
  width: 42%;
}
.account-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.account-card {
  display: flex;
  align-items: center;
  gap: 1rem;
  background: var(--card);
  border: 3px solid var(--edge);
  border-radius: 1.1rem;
  padding: 1rem 1.15rem;
  box-shadow: 0 4px 0 var(--edge);
}
.account-avatar-wrap {
  flex-shrink: 0;
  width: 3.2rem;
  height: 3.2rem;
  border-radius: 50%;
  overflow: hidden;
  display: grid;
  place-items: center;
  background: var(--navy);
}
.account-avatar {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.account-avatar-fallback {
  color: #fff;
  font-weight: 900;
  font-size: 1.4rem;
  line-height: 1;
}
.account-id {
  display: flex;
  flex-direction: column;
  min-width: 0;
  gap: 0.1rem;
}
.account-name {
  font-weight: 900;
  font-size: 1.05rem;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.account-email {
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.account-section-title {
  margin: 0.6rem 0 -0.2rem;
  font-weight: 900;
  letter-spacing: 0.14em;
  font-size: 0.72rem;
  text-transform: uppercase;
  color: var(--muted);
}
.setting-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  background: var(--card);
  border: 3px solid var(--edge);
  border-radius: 1.1rem;
  padding: 1rem 1.15rem;
  box-shadow: 0 4px 0 var(--edge);
}
.setting-row[hidden] {
  display: none;
}
.setting-label {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
}
.setting-name {
  font-weight: 900;
  font-size: 1.05rem;
}
.setting-desc {
  font-weight: 600;
  font-size: 0.85rem;
  color: var(--muted);
}
.switch {
  flex-shrink: 0;
  position: relative;
  width: 3.4rem;
  height: 2rem;
  border-radius: 999px;
  background: var(--sky-line);
  border: 2.5px solid var(--edge);
  transition: background 180ms ease;
}
.switch-knob {
  position: absolute;
  top: 50%;
  left: 0.18rem;
  transform: translateY(-50%);
  width: 1.35rem;
  height: 1.35rem;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
  transition: left 200ms cubic-bezier(0.22, 1, 0.36, 1);
}
.switch[aria-checked=true] {
  background: var(--success);
}
.switch[aria-checked=true] .switch-knob {
  left: calc(100% - 1.35rem - 0.18rem);
}
.data-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  width: 100%;
  text-align: left;
  font-size: 1rem;
  background: var(--card);
  border: 3px solid var(--edge);
  border-radius: 1.1rem;
  padding: 1rem 1.15rem;
  box-shadow: 0 4px 0 var(--edge);
  transition: transform 60ms ease, box-shadow 60ms ease;
}
.data-btn:active {
  transform: translateY(3px);
  box-shadow: 0 1px 0 var(--edge);
}
.data-btn:disabled {
  opacity: 0.55;
}
.data-btn-label {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
}
.data-btn-name {
  font-weight: 900;
  font-size: 1.05rem;
  color: var(--ink);
}
.data-btn-desc {
  font-weight: 600;
  font-size: 0.85rem;
  color: var(--muted);
}
.data-btn-chevron {
  flex-shrink: 0;
  font-weight: 900;
  font-size: 1.2rem;
  color: var(--muted);
}
.data-btn.danger .data-btn-name,
.data-btn.danger .data-btn-chevron {
  color: var(--danger);
}
.btn-redeem.danger {
  background: var(--danger);
}
.btn-redeem.danger:active {
  background: var(--danger-press);
}
.detail-textbtn {
  margin-top: 0.1rem;
  color: var(--muted);
  font-weight: 800;
  font-size: 1rem;
  padding: 0.6rem 1rem;
}
#account-signout {
  margin-top: auto;
}
@media (max-width: 760px) {
  .hero {
    grid-template-columns: 1fr;
    padding-top: 1.5rem;
  }
  .hero-card {
    margin-top: 1.5rem;
  }
  .steps {
    grid-template-columns: 1fr;
  }
}
.pending-punch-note {
  margin: 0.9rem 0 0.2rem;
  padding: 0.8rem 1rem;
  border: 2.5px solid var(--edge);
  border-radius: 0.9rem;
  background: var(--card);
  font-weight: 700;
  font-size: 0.95rem;
}
.signup-bonus-note {
  margin: 0.9rem 0 0.2rem;
  padding: 0.8rem 1rem;
  border: 2.5px solid var(--accent);
  border-radius: 0.9rem;
  background: var(--card);
  font-weight: 700;
  font-size: 0.95rem;
}
.punch-card {
  width: 100%;
  text-align: left;
  background: var(--card);
  border: 3px solid var(--edge);
  border-radius: 1.1rem;
  padding: 1rem 1.2rem;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  box-shadow: 0 4px 0 var(--edge);
  transition: transform 80ms ease, box-shadow 80ms ease;
}
.punch-card:active {
  transform: translateY(3px);
  box-shadow: 0 1px 0 var(--edge);
}
.punch-card-head {
  display: flex;
  align-items: baseline;
  justify-content: flex-start;
  gap: 0.45rem;
}
.punch-count {
  font-weight: 900;
  font-size: 2.4rem;
  line-height: 1;
  color: var(--brand);
}
.punch-count-unit {
  font-weight: 800;
  font-size: 1rem;
  color: var(--muted);
}
.punch-next {
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--muted);
}
.punch-next.is-ready {
  color: var(--success);
}
.punch-pool-note {
  display: block;
  margin-top: 0.45rem;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--muted);
  line-height: 1.35;
}
.punch-pool-note[hidden] {
  display: none;
}
#punch-modal .detail-card {
  min-height: 0;
  max-height: 50vh;
  overflow: hidden;
}
.punch-modal-list {
  list-style: none;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-top: 0.4rem;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}
.punch-modal-list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.9rem;
  padding: 0.7rem 0.9rem;
  border: 2px solid var(--edge);
  border-radius: 0.8rem;
  font-weight: 800;
  text-align: left;
  flex-shrink: 0;
}
.pml-title {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pml-need {
  white-space: nowrap;
  color: var(--muted);
  font-size: 0.9rem;
}
.punch-modal-list li.is-ready {
  border-color: var(--success);
}
.punch-modal-list li.is-ready .pml-need {
  color: var(--success);
}
.punch-scan-btn {
  width: 100%;
  margin-top: 0.9rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.95rem;
  text-align: center;
  background: var(--navy);
  color: #fff;
  border: 3px solid var(--edge);
  border-radius: 1.1rem;
  padding: 1.05rem 1.2rem;
  box-shadow: 0 4px 0 var(--edge);
  transition: transform 80ms ease, box-shadow 80ms ease;
}
.punch-scan-btn:active {
  transform: translateY(3px);
  box-shadow: 0 1px 0 var(--edge);
}
.punch-scan-btn .psb-icon {
  flex: 0 0 auto;
  width: 3rem;
  height: 3rem;
  border-radius: 0.8rem;
  background: rgba(255, 255, 255, 0.13);
  color: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
}
.punch-scan-btn .psb-icon svg {
  width: 1.7rem;
  height: 1.7rem;
  display: block;
}
.psb-text {
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.15rem;
}
.psb-title {
  font-size: 1.15rem;
  font-weight: 900;
  line-height: 1.1;
}
.psb-sub {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--sky);
}
.psb-arrow {
  flex: 0 0 auto;
  color: var(--accent);
  display: flex;
}
.psb-arrow svg {
  width: 1.4rem;
  height: 1.4rem;
  display: block;
}
.punch-scan-card {
  position: relative;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  background: var(--card);
  display: flex;
  flex-direction: column;
  transform: translateY(100%);
  transition: transform 380ms cubic-bezier(0.22, 1, 0.36, 1);
}
.punch-scan-sheet.is-open .punch-scan-card {
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  .punch-scan-card {
    transition: none;
  }
}
.punch-scan-head {
  position: relative;
  flex: 0 0 auto;
  padding: calc(1.1rem + env(safe-area-inset-top, 0px)) 1.3rem 0.9rem;
  text-align: center;
}
.punch-scan-title {
  font-weight: 900;
  letter-spacing: 0.16em;
  font-size: 0.9rem;
  color: var(--muted);
}
.punch-scan-sub {
  font-weight: 900;
  font-size: 1.3rem;
  margin-top: 0.15rem;
}
.punch-scan-close {
  position: absolute;
  right: 0.9rem;
  top: calc(0.9rem + env(safe-area-inset-top, 0px));
  width: 2.6rem;
  height: 2.6rem;
  border-radius: 50%;
  border: 2.5px solid var(--edge);
  background: var(--paper);
  font-size: 1.1rem;
  font-weight: 900;
  color: var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
}
.punch-scan-frame {
  position: relative;
  flex: 1;
  min-height: 0;
  margin: 0 1.3rem;
  border-radius: 1.2rem;
  overflow: hidden;
  background: #0b1626;
}
.punch-scan-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.punch-scan-target {
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(62vw, 17rem);
  height: min(62vw, 17rem);
  transform: translate(-50%, -50%);
  border: 3px solid rgba(255, 255, 255, 0.9);
  border-radius: 1.2rem;
  box-shadow: 0 0 0 200vmax rgba(0, 0, 0, 0.25);
  pointer-events: none;
}
.punch-scan-status {
  flex: 0 0 auto;
  padding: 1rem 1.5rem calc(1.4rem + env(safe-area-inset-bottom, 0px));
  text-align: center;
  font-weight: 700;
  color: var(--muted);
  min-height: 3.4rem;
}
.punch-scan-status.is-error {
  color: var(--warn);
}
.map-open-btn {
  flex: 0 0 auto;
  margin-left: auto;
  height: 2.3rem;
  padding: 0 0.7rem;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  background: var(--card);
  color: var(--ink);
  border: 2.5px solid var(--edge);
  box-shadow: 0 3px 0 var(--edge);
  cursor: pointer;
  transition: transform 90ms ease, box-shadow 90ms ease;
}
.map-open-label {
  font-size: 0.8rem;
  font-weight: 900;
  letter-spacing: 0.08em;
}
.map-open-icon {
  margin-left: 0.35rem;
  font-size: 1.05rem;
}
.map-open-btn[hidden] {
  display: none;
}
.map-open-btn:active {
  transform: translateY(3px);
  box-shadow: 0 0 0 var(--edge);
}
.map-open-btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}
.map-card {
  position: relative;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  background: var(--card);
  display: flex;
  flex-direction: column;
  transform: translateY(100%);
  transition: transform 380ms cubic-bezier(0.22, 1, 0.36, 1);
}
.map-sheet.is-open .map-card {
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  .map-card {
    transition: none;
  }
}
.map-head {
  position: relative;
  flex: 0 0 auto;
  min-height: calc(4.4rem + env(safe-area-inset-top, 0px));
  padding: env(safe-area-inset-top, 0px) 4.4rem 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.map-title {
  font-weight: 900;
  letter-spacing: 0.16em;
  font-size: 0.9rem;
  color: var(--muted);
}
.map-close {
  position: absolute;
  right: 0.9rem;
  top: calc(0.9rem + env(safe-area-inset-top, 0px));
  width: 2.6rem;
  height: 2.6rem;
  border-radius: 50%;
  border: 2.5px solid var(--edge);
  background: var(--paper);
  font-size: 1.1rem;
  font-weight: 900;
  color: var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
}
.map-stage {
  position: relative;
  flex: 1;
  min-height: 0;
  --map-sheet-h: 0px;
}
.map-canvas {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 0;
  background: #e5e7eb;
}
:root[data-theme=dark] .map-canvas {
  background: #1a2334;
}
.leaflet-container {
  font: inherit;
  background: transparent;
  outline-offset: 2px;
}
:root[data-theme=dark] .map-canvas .leaflet-tile-pane {
  filter: invert(1) hue-rotate(180deg) brightness(0.93) contrast(0.9) saturate(0.7);
}
.leaflet-control-attribution {
  background: rgba(255, 255, 255, 0.82) !important;
  color: #33445e !important;
  font-size: 0.62rem;
  font-weight: 600;
  padding: 0.1rem 0.45rem;
  border-radius: 999px 0 0 0;
  transform: translateY(calc(-1 * var(--map-sheet-h)));
  transition: transform 300ms cubic-bezier(0.22, 1, 0.36, 1);
}
:root[data-theme=dark] .leaflet-control-attribution {
  background: rgba(15, 24, 38, 0.82) !important;
  color: #8fa3bd !important;
}
.leaflet-control-attribution a {
  color: inherit !important;
  text-decoration: underline;
}
.leaflet-bar {
  border: 2.5px solid var(--edge) !important;
  border-radius: 0.8rem !important;
  box-shadow: 0 3px 0 var(--edge) !important;
  overflow: hidden;
}
.leaflet-bar a,
.leaflet-bar a:hover {
  background: var(--card);
  color: var(--ink);
  border-bottom-color: var(--edge);
  font-weight: 900;
}
.leaflet-bar a.leaflet-disabled {
  background: var(--paper);
  color: var(--muted);
}
.map-locate {
  position: absolute;
  right: 0.9rem;
  z-index: 500;
  bottom: calc(0.9rem + var(--map-sheet-h) + env(safe-area-inset-bottom, 0px));
  width: 2.9rem;
  height: 2.9rem;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.15rem;
  font-weight: 900;
  line-height: 1;
  background: var(--card);
  color: var(--ink);
  border: 2.5px solid var(--edge);
  box-shadow: 0 3px 0 var(--edge);
  cursor: pointer;
  transition:
    transform 300ms cubic-bezier(0.22, 1, 0.36, 1),
    bottom 300ms cubic-bezier(0.22, 1, 0.36, 1),
    color 140ms ease;
}
.map-locate:active {
  transform: translateY(3px);
  box-shadow: 0 0 0 var(--edge);
}
.map-locate.is-on {
  color: var(--brand);
  border-color: var(--brand);
}
.map-locate.is-busy {
  opacity: 0.6;
}
.map-me {
  pointer-events: none;
}
.map-me-dot {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 1rem;
  height: 1rem;
  margin: -0.5rem 0 0 -0.5rem;
  border-radius: 50%;
  background: #2f7fe0;
  border: 2.5px solid #fff;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.25);
}
.map-me-ring {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 2.4rem;
  height: 2.4rem;
  margin: -1.2rem 0 0 -1.2rem;
  border-radius: 50%;
  background: rgba(47, 127, 224, 0.22);
  animation: mapMePulse 2.2s ease-out infinite;
}
@keyframes mapMePulse {
  0% {
    transform: scale(0.55);
    opacity: 0.85;
  }
  70% {
    transform: scale(1.25);
    opacity: 0;
  }
  100% {
    transform: scale(1.25);
    opacity: 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .map-me-ring {
    animation: none;
    opacity: 0.5;
  }
}
.map-note {
  position: absolute;
  left: 50%;
  top: 0.7rem;
  z-index: 500;
  transform: translateX(-50%);
  max-width: calc(100% - 1.8rem);
  padding: 0.35rem 0.8rem;
  border-radius: 999px;
  background: var(--card);
  color: var(--muted);
  border: 2px solid var(--edge);
  font-size: 0.74rem;
  font-weight: 800;
  line-height: 1.2;
  text-align: center;
}
.map-note[hidden] {
  display: none;
}
.map-pin-sheet {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 600;
  background: var(--card);
  border-top: 3px solid var(--edge);
  border-radius: 1.3rem 1.3rem 0 0;
  padding: 1.1rem 1.2rem calc(1.1rem + env(safe-area-inset-bottom, 0px));
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  transform: translateY(110%);
  transition: transform 320ms cubic-bezier(0.22, 1, 0.36, 1);
}
.map-pin-sheet[hidden] {
  display: none;
}
.map-pin-sheet.is-open {
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  .map-pin-sheet {
    transition: none;
  }
}
.map-pin-close {
  position: absolute;
  right: 0.8rem;
  top: 0.8rem;
  width: 2.1rem;
  height: 2.1rem;
  border-radius: 50%;
  border: 2px solid var(--edge);
  background: var(--paper);
  font-size: 0.85rem;
  font-weight: 900;
  color: var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
}
.map-pin-head {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding-right: 2.4rem;
}
.map-pin-logo {
  flex: 0 0 auto;
  width: 2.9rem;
  height: 2.9rem;
  border-radius: 0.8rem;
  border: 2.5px solid var(--edge);
  background: var(--paper) center / cover no-repeat;
}
.map-pin-logo[hidden] {
  display: none;
}
.map-pin-title {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}
.map-pin-name {
  font-weight: 900;
  font-size: 1.1rem;
  line-height: 1.15;
  overflow-wrap: anywhere;
}
.map-pin-points {
  display: flex;
  align-items: baseline;
  gap: 0.2rem;
  color: var(--brand);
}
.map-pin-num {
  font-weight: 900;
  font-size: 1.05rem;
}
.map-pin-points small {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--muted);
}
.map-pin-address {
  font-size: 0.84rem;
  font-weight: 600;
  color: var(--muted);
  line-height: 1.3;
}
.map-pin-address[hidden] {
  display: none;
}
.map-pin-rate {
  margin-top: 0.3rem;
  font-size: 0.84rem;
  font-weight: 700;
  color: var(--muted);
  line-height: 1.3;
}
.map-pin-rate[hidden] {
  display: none;
}
.map-pin-pool {
  margin-top: 0.3rem;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--muted);
  line-height: 1.3;
}
.map-pin-pool[hidden] {
  display: none;
}
.map-pin-actions {
  display: flex;
  gap: 0.6rem;
  margin-top: 0.1rem;
}
.map-pin-btn {
  flex: 1 1 0;
  min-width: 0;
  padding: 0.7rem 0.6rem;
  border-radius: 0.9rem;
  font: inherit;
  font-size: 0.92rem;
  font-weight: 900;
  background: var(--card);
  color: var(--ink);
  border: 2.5px solid var(--edge);
  box-shadow: 0 3px 0 var(--edge);
  cursor: pointer;
  transition: transform 90ms ease, box-shadow 90ms ease;
}
.map-pin-btn:active {
  transform: translateY(3px);
  box-shadow: 0 0 0 var(--edge);
}
.map-pin-btn-primary {
  background: var(--navy);
  color: #fff;
}
.map-pin-btn[hidden] {
  display: none;
}
.mp {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  transform-origin: 50% 100%;
  transition: transform 160ms cubic-bezier(0.22, 1, 0.36, 1);
}
.mp-body {
  position: absolute;
  left: 50%;
  top: 0;
  width: 40px;
  height: 40px;
  margin-left: -20px;
  border-radius: 50%;
  border: 2.5px solid var(--edge);
  background: var(--card) center / cover no-repeat;
  box-shadow: 0 2px 5px rgba(16, 29, 51, 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.mp-initial {
  font-weight: 900;
  font-size: 17px;
  color: var(--brand);
  line-height: 1;
}
.mp-tip {
  position: absolute;
  left: 50%;
  top: 37px;
  width: 0;
  height: 0;
  margin-left: -6px;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 11px solid var(--edge);
}
.mp-badge {
  position: absolute;
  right: -3px;
  top: -5px;
  min-width: 20px;
  padding: 1px 5px;
  border-radius: 999px;
  background: var(--navy);
  color: #fff;
  border: 2px solid var(--card);
  font-size: 10.5px;
  font-weight: 900;
  line-height: 1.35;
  text-align: center;
  box-shadow: 0 1px 3px rgba(16, 29, 51, 0.4);
}
.mp-badge.is-shared {
  border-style: dashed;
  border-color: var(--accent);
}
.mp.is-focus {
  transform: scale(1.24);
}
.mp.is-focus .mp-body {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px var(--hub-glow), 0 3px 7px rgba(16, 29, 51, 0.4);
}
.mp.is-focus .mp-tip {
  border-top-color: var(--brand);
}
.leaflet-marker-icon:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
  border-radius: 0.5rem;
}

/* flex-gap fallbacks for browsers below Safari 14.1 (see scripts/build-client.js) */
:root.no-flex-gap .splash-inner > * + * {
  margin-top: 1.4rem;
}
:root.no-flex-gap .google-btn > * + * {
  margin-left: 0.8rem;
}
:root.no-flex-gap .vendor-signin > * {
  margin-right: 0.5rem;
  margin-bottom: 0.5rem;
}
:root.no-flex-gap .mock-code > * + * {
  margin-top: 0.5rem;
}
:root.no-flex-gap .footer-inner > * {
  margin-right: 2rem;
  margin-bottom: 1.25rem;
}
:root.no-flex-gap .footer-links > * {
  margin-right: 1.25rem;
  margin-bottom: 0.55rem;
}
:root.no-flex-gap .vskel-row > * + * {
  margin-left: 1rem;
}
:root.no-flex-gap .vskel-band > * + * {
  margin-left: 0.65rem;
}
:root.no-flex-gap .vskel-body > * + * {
  margin-top: 0.35rem;
}
:root.no-flex-gap .hub-toggle > * + * {
  margin-left: 0.55rem;
}
:root.no-flex-gap .hub-summary > * + * {
  margin-left: 0.5rem;
}
:root.no-flex-gap .hub-tier > * + * {
  margin-left: 0.25rem;
}
:root.no-flex-gap .tier-head > * + * {
  margin-left: 0.6rem;
}
:root.no-flex-gap .tier-head-label > * + * {
  margin-left: 0.35rem;
}
:root.no-flex-gap .info-card ul > * + * {
  margin-top: 0.4rem;
}
:root.no-flex-gap .tier-node > * + * {
  margin-top: 0.3rem;
}
:root.no-flex-gap .lever-head > * + * {
  margin-left: 0.6rem;
}
:root.no-flex-gap .lever > * + * {
  margin-top: 0.42rem;
}
:root.no-flex-gap .lever-row > * + * {
  margin-left: 0.6rem;
}
:root.no-flex-gap .home-stack > * + * {
  margin-top: 0.7rem;
}
:root.no-flex-gap .community-card > * + * {
  margin-left: 0.8rem;
}
:root.no-flex-gap .cc-body > * + * {
  margin-top: 0.15rem;
}
:root.no-flex-gap .cc-amount > * + * {
  margin-left: 0.25rem;
}
:root.no-flex-gap .hub-deals > * + * {
  margin-top: 0.7rem;
}
:root.no-flex-gap .hub-deals-btn > * + * {
  margin-left: 0.7rem;
}
:root.no-flex-gap .dc-body > * + * {
  margin-top: 0.1rem;
}
:root.no-flex-gap .deals-list > * + * {
  margin-top: 0.7rem;
}
:root.no-flex-gap .deals-list li > * + * {
  margin-left: 0.75rem;
}
:root.no-flex-gap .deal-text > * + * {
  margin-top: 0.15rem;
}
:root.no-flex-gap .deals-optin > * + * {
  margin-top: 0.55rem;
}
:root.no-flex-gap .deals-optin-actions > * + * {
  margin-left: 0.45rem;
}
:root.no-flex-gap .nearby-optin > * + * {
  margin-top: 0.6rem;
}
:root.no-flex-gap .nearby-optin-actions > * {
  margin-right: 0.45rem;
  margin-bottom: 0.45rem;
}
:root.no-flex-gap .nearby-help-steps > * + * {
  margin-top: 0.5rem;
}
:root.no-flex-gap .move-view > * + * {
  margin-top: 0.9rem;
}
:root.no-flex-gap .move-vendors > * + * {
  margin-top: 0.5rem;
}
:root.no-flex-gap .move-vendor > * + * {
  margin-left: 0.6rem;
}
:root.no-flex-gap .move-amount-row > * + * {
  margin-left: 0.8rem;
}
:root.no-flex-gap .move-amount-wrap > * + * {
  margin-left: 0.45rem;
}
:root.no-flex-gap .earn-btn > * + * {
  margin-top: 0.4rem;
}
:root.no-flex-gap .receipt-view > * + * {
  margin-top: 0.7rem;
}
:root.no-flex-gap .vendor-carousel > * + * {
  margin-left: 1rem;
}
:root.no-flex-gap .vc-body > * + * {
  margin-top: 0.35rem;
}
:root.no-flex-gap .vc-band > * + * {
  margin-left: 0.65rem;
}
:root.no-flex-gap .vc-points > * + * {
  margin-left: 0.3rem;
}
:root.no-flex-gap .points-bar > * + * {
  margin-left: 0.9rem;
}
:root.no-flex-gap .pb-points > * + * {
  margin-left: 0.3rem;
}
:root.no-flex-gap .points-toast > * + * {
  margin-left: 0.4rem;
}
:root.no-flex-gap .my-code > * + * {
  margin-top: 0.35rem;
}
:root.no-flex-gap .items > * + * {
  margin-top: 0.9rem;
}
:root.no-flex-gap .item-card > * + * {
  margin-left: 1rem;
}
:root.no-flex-gap .ic-cost > * + * {
  margin-top: 0.1rem;
}
:root.no-flex-gap .detail-card > * + * {
  margin-top: 0.6rem;
}
:root.no-flex-gap .earn-body > * + * {
  margin-top: 0.4rem;
}
:root.no-flex-gap .consent-check > * + * {
  margin-left: 0.75rem;
}
:root.no-flex-gap .item-notready > * + * {
  margin-top: 0.15rem;
}
:root.no-flex-gap .item-code > * + * {
  margin-top: 0.45rem;
}
:root.no-flex-gap .item-code-row > * {
  margin-right: 0.9rem;
  margin-bottom: 0.9rem;
}
:root.no-flex-gap .install-steps > * + * {
  margin-top: 0.7rem;
}
:root.no-flex-gap .install-step-list > * + * {
  margin-top: 0.6rem;
}
:root.no-flex-gap .install-step-list li > * + * {
  margin-left: 0.75rem;
}
:root.no-flex-gap .install-inapp > * + * {
  margin-top: 0.7rem;
}
:root.no-flex-gap .install-guide-copy > * + * {
  margin-top: 0.6rem;
}
:root.no-flex-gap .install-guide-step > * + * {
  margin-left: 0.6rem;
}
:root.no-flex-gap .install-banner > * + * {
  margin-left: 0.55rem;
}
:root.no-flex-gap .tab-btn > * + * {
  margin-top: 0.18rem;
}
:root.no-flex-gap .filter-chips > * {
  margin-right: 0.4rem;
  margin-bottom: 0.4rem;
}
:root.no-flex-gap .spots-search-row > * + * {
  margin-left: 0.55rem;
}
:root.no-flex-gap .spots-random > * + * {
  margin-left: 0.5rem;
}
:root.no-flex-gap .spots-list > * + * {
  margin-top: 0.5rem;
}
:root.no-flex-gap .spots-skel > * + * {
  margin-top: 0.5rem;
}
:root.no-flex-gap .history-list > * + * {
  margin-top: 0.55rem;
}
:root.no-flex-gap .history-row > * + * {
  margin-left: 0.85rem;
}
:root.no-flex-gap .history-skel > * + * {
  margin-top: 0.55rem;
}
:root.no-flex-gap .hskel-row > * + * {
  margin-left: 0.85rem;
}
:root.no-flex-gap .hskel-body > * + * {
  margin-top: 0.34rem;
}
:root.no-flex-gap .account-body > * + * {
  margin-top: 1rem;
}
:root.no-flex-gap .account-card > * + * {
  margin-left: 1rem;
}
:root.no-flex-gap .account-id > * + * {
  margin-top: 0.1rem;
}
:root.no-flex-gap .setting-row > * + * {
  margin-left: 1rem;
}
:root.no-flex-gap .setting-label > * + * {
  margin-top: 0.15rem;
}
:root.no-flex-gap .data-btn > * + * {
  margin-left: 1rem;
}
:root.no-flex-gap .data-btn-label > * + * {
  margin-top: 0.15rem;
}
:root.no-flex-gap .punch-card > * + * {
  margin-top: 0.35rem;
}
:root.no-flex-gap .punch-card-head > * + * {
  margin-left: 0.45rem;
}
:root.no-flex-gap .punch-modal-list > * + * {
  margin-top: 0.5rem;
}
:root.no-flex-gap .punch-modal-list li > * + * {
  margin-left: 0.9rem;
}
:root.no-flex-gap .punch-scan-btn > * + * {
  margin-left: 0.95rem;
}
:root.no-flex-gap .psb-text > * + * {
  margin-top: 0.15rem;
}
:root.no-flex-gap .map-pin-sheet > * + * {
  margin-top: 0.6rem;
}
:root.no-flex-gap .map-pin-head > * + * {
  margin-left: 0.7rem;
}
:root.no-flex-gap .map-pin-title > * + * {
  margin-top: 0.1rem;
}
:root.no-flex-gap .map-pin-points > * + * {
  margin-left: 0.2rem;
}
:root.no-flex-gap .map-pin-actions > * + * {
  margin-left: 0.6rem;
}