/*
  Vibes Checker design system.
  Direction: Pudgy shop product-page styling translated into local tokens.
  Use this file as the shared visual layer for canonical pages.
*/

@font-face {
  font-family: 'Fat Pengu';
  src: url('./fonts/FATPENG-Flat.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Primitive colors */
  --ds-ink: #061833;
  --ds-ink-soft: #213b5f;
  --ds-muted: #6d7891;
  --ds-blue: #467cf6;
  --ds-blue-deep: #245fdf;
  --ds-blue-soft: #dceafe;
  --ds-ice: #d0e0f4;
  --ds-cream: #d0e0f4;
  --ds-cream-2: #f8efd9;
  --ds-surface: #e9f2fe;
  --ds-surface-blue: #e9f2fe;
  --ds-pink: #f3a7b8;
  --ds-coral: #e96964;
  --ds-yellow: #ffd66e;
  --ds-green: #51b96a;
  --ds-shop-stroke: #061833;
  --ds-shop-blue: #477cf6;
  --ds-shop-blue-hi: #5c8df9;
  --ds-shop-blue-low: #356ce2;
  --ds-shop-shadow: #b7c8d0;
  --ds-shop-white-low: #edf1f1;
  --ds-shop-green: #48b968;
  --ds-shop-green-low: #2f9f52;
  --ds-shop-coral: #ef6f67;
  --ds-shop-coral-low: #d95550;

  /* Semantic aliases used by existing app CSS */
  --pp-crayola: var(--ds-blue);
  --pp-pengu: #8bb2ff;
  --pp-azure: var(--ds-ice);
  --pp-blizzard: #f8fcff;
  --pp-oxford: var(--ds-ink);
  --pp-creamy: var(--ds-cream);
  --pp-polly: #ffe5ee;
  --pp-blush: var(--ds-coral);
  --pp-jasmine: var(--ds-yellow);
  --pp-mint: #c9f7bd;
  --pp-plum: #f8c9dc;

  --ice-50: var(--ds-surface-blue);
  --ice-100: #e5f2ff;
  --ice-200: #cfe5ff;
  --ice-300: #9fc0ff;
  --ice-400: #6c96f6;
  --ice-500: var(--ds-blue);
  --navy: var(--ds-ink);
  --navy-2: var(--ds-ink-soft);
  --ink: var(--ds-ink);
  --muted: var(--ds-muted);
  --card: var(--ds-surface);
  --beak: var(--ds-yellow);
  --beak-dk: #d6a91d;
  --pink: var(--ds-pink);
  --green: var(--ds-green);

  /* Typography */
  --font-display: 'Fat Pengu', 'Londrina Solid', 'FatFrank', 'Menco', sans-serif;
  --font-body: 'Menco', 'FatFrank', sans-serif;
  --font-label: 'Menco', 'FatFrank', sans-serif;
  --ds-text-xs: 0.75rem;
  --ds-text-sm: 0.875rem;
  --ds-text-base: 1rem;
  --ds-text-lg: 1.125rem;
  --ds-text-xl: 1.375rem;
  --ds-text-2xl: clamp(1.85rem, 3.2vw, 3rem);
  --ds-text-display: clamp(4rem, 8.8vw, 7.75rem);
  --ds-hero-control-width: 940px;
  --ds-vibes-gradient: linear-gradient(252.74deg, #e5007e 0%, #3c2683 98.51%);
  --ds-hero-stroke: clamp(5px, .62vw, 9px);
  --ds-hero-shadow-x: clamp(7px, .85vw, 12px);
  --ds-hero-shadow-y: clamp(8px, .95vw, 14px);
  --ds-hero-hover-duration: 260ms;
  --ds-hero-hover-ease: cubic-bezier(.32, .72, 0, 1);

  /* Spacing and shape */
  --ds-space-1: 0.25rem;
  --ds-space-2: 0.5rem;
  --ds-space-3: 0.75rem;
  --ds-space-4: 1rem;
  --ds-space-5: 1.25rem;
  --ds-space-6: 1.5rem;
  --ds-space-8: 2rem;
  --ds-space-10: 2.5rem;
  --ds-radius-sm: 0.75rem;
  --ds-radius-md: 1rem;
  --ds-radius-lg: 1.5rem;
  --ds-radius-xl: 2rem;
  --ds-radius-pill: 999px;

  /* Borders, shadows, motion */
  --ds-border: 0 solid transparent;
  --ds-border-strong: 1.5px solid var(--ds-ink);
  --shadow-sm: 0 4px 0 rgba(6, 24, 51, 0.12);
  --shadow: 0 18px 42px rgba(6, 24, 51, 0.14);
  --ds-box-shadow:
    0 2px 3px rgba(0, 0, 0, .05),
    inset 0 0 2px 1px #ffffff;
  --ds-button-frame: inset 0 0 0 2.5px var(--ds-shop-stroke);
  --ds-shadow-lift: 4px 5px 0 rgba(6, 24, 51, .18);
  --ds-shadow-soft: var(--ds-box-shadow);
  --ds-button-shadow-blue:
    var(--ds-button-frame),
    inset 0 2px 0 rgba(255, 255, 255, .10),
    inset 0 -7px 0 rgba(6, 24, 51, .17),
    inset -6px 0 0 rgba(6, 24, 51, .035),
    var(--ds-shadow-lift);
  --ds-button-shadow-white:
    var(--ds-button-frame),
    inset 0 3px 0 rgba(255, 255, 255, .9),
    inset 0 -7px 0 rgba(6, 24, 51, .12),
    inset -6px 0 0 rgba(6, 24, 51, .03),
    var(--ds-shadow-lift);
  --ds-button-shadow-pressed:
    var(--ds-button-frame),
    inset 0 1px 0 rgba(255, 255, 255, .06),
    inset 0 -4px 0 rgba(6, 24, 51, .13),
    1px 2px 0 rgba(6, 24, 51, .16);
  --ds-scrollbar-track: rgba(233, 242, 254, .62);
  --ds-scrollbar-thumb: rgba(6, 24, 51, .26);
  --ds-scrollbar-thumb-hover: rgba(6, 24, 51, .42);
  --ds-duration-fast: 120ms;
  --ds-duration: 220ms;
  --ds-ease: cubic-bezier(.2, .8, .2, 1);
  --ds-button-ease: cubic-bezier(.22, 1, .36, 1);
}

html {
  background: #d0e0f4;
}

body {
  font-family: var(--font-body);
  font-weight: 400;
  color: var(--ds-ink);
  background: #d0e0f4;
  font-feature-settings: "kern" 1, "liga" 1;
}

* {
  scrollbar-color: var(--ds-scrollbar-thumb) var(--ds-scrollbar-track);
  scrollbar-width: thin;
}

*::-webkit-scrollbar {
  width: 14px;
  height: 14px;
}

*::-webkit-scrollbar-track {
  background: var(--ds-scrollbar-track);
  border-radius: var(--ds-radius-pill);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .72);
}

*::-webkit-scrollbar-thumb {
  background: var(--ds-scrollbar-thumb);
  border: 4px solid var(--ds-scrollbar-track);
  border-radius: var(--ds-radius-pill);
  box-shadow: inset 0 0 0 1px rgba(6, 24, 51, .14);
}

*::-webkit-scrollbar-thumb:hover {
  background: var(--ds-scrollbar-thumb-hover);
}

*::-webkit-scrollbar-corner {
  background: transparent;
}

@keyframes vc-page-rise-in {
  from {
    opacity: 0;
    transform: translate3d(0, 22px, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

.hero-logo,
.hero-title-stage,
header.hero .sub,
.search-wrap,
.stats .stat,
.layout > .panel,
.tracker > h2,
.tracker > p,
.tracker-grid > .panel,
footer {
  animation: vc-page-rise-in 520ms cubic-bezier(.16, 1, .3, 1) both;
  will-change: transform, opacity;
}

.hero-logo { animation-delay: 80ms; }
.hero-title-stage { animation-delay: 140ms; }
header.hero .sub { animation-delay: 200ms; }
.search-wrap { animation-delay: 260ms; }
.stats .stat:nth-child(1) { animation-delay: 320ms; }
.stats .stat:nth-child(2) { animation-delay: 360ms; }
.stats .stat:nth-child(3) { animation-delay: 400ms; }
.stats .stat:nth-child(4) { animation-delay: 440ms; }
.layout > .panel:nth-child(1) { animation-delay: 500ms; }
.layout > .panel:nth-child(2) { animation-delay: 560ms; }
.tracker > h2 { animation-delay: 620ms; }
.tracker > p { animation-delay: 660ms; }
.tracker-grid > .panel:nth-child(1) { animation-delay: 720ms; }
.tracker-grid > .panel:nth-child(2) { animation-delay: 780ms; }
footer { animation-delay: 840ms; }

h1,
h2,
h3,
h4,
h5,
h6,
.display,
.admin-hero h1,
.login-card h2,
.modal-head h2,
.panel-head h2,
.section-title,
.reward-title {
  font-family: var(--font-display);
  font-weight: 400;
  color: var(--ds-ink);
  letter-spacing: 0;
  text-transform: uppercase;
}

.stat .num,
.stat-card .num,
.tab,
.btn,
button.btn {
  font-family: var(--font-label);
  letter-spacing: .035em;
}

a {
  color: var(--ds-blue-deep);
  text-underline-offset: 0.18em;
}

button,
a,
input,
textarea,
select {
  touch-action: manipulation;
}

button:focus-visible,
a:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
.store-item:focus-visible,
.tab:focus-visible {
  outline: 3px solid rgba(70, 124, 246, .42);
  outline-offset: 3px;
}

header.hero {
  padding-top: clamp(2.15rem, 5vw, 4.25rem);
}

.hero-logo {
  display: block;
  width: 250px;
  max-width: 58vw;
  height: auto;
  margin: 0 auto 0;
}

header.hero h1 {
  font-family: var(--font-display);
  font-size: var(--ds-text-display);
  line-height: .8;
  max-width: 14ch;
  margin: .22rem auto 1.45rem;
  white-space: nowrap;
  color: transparent;
  -webkit-text-stroke: 0 transparent;
  overflow: visible;
  padding: 0;
  position: relative;
  text-shadow: none;
}

.hero-text-title {
  cursor: pointer;
  isolation: isolate;
  transform: translate3d(0, 0, 0);
  transform-origin: center 56%;
  transition: transform var(--ds-hero-hover-duration) var(--ds-hero-hover-ease);
  user-select: none;
  will-change: transform;
}

.hero-title-text-base,
.hero-title-text-gradient {
  display: block;
  font: inherit;
  line-height: inherit;
  paint-order: stroke fill;
  white-space: inherit;
}

.hero-title-text-base {
  color: #ffffff;
  -webkit-text-stroke: var(--ds-hero-stroke) #061833;
  opacity: 1;
  text-shadow:
    var(--ds-hero-shadow-x) var(--ds-hero-shadow-y) 0 #061833,
    clamp(3px, .35vw, 5px) clamp(4px, .45vw, 7px) 0 #061833;
  transition:
    opacity var(--ds-hero-hover-duration) var(--ds-hero-hover-ease),
    text-shadow var(--ds-hero-hover-duration) var(--ds-hero-hover-ease);
  will-change: opacity, text-shadow;
}

.hero-title-text-gradient {
  background: var(--ds-vibes-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font: inherit;
  inset: 0;
  line-height: inherit;
  opacity: 0;
  paint-order: stroke fill;
  pointer-events: none;
  position: absolute;
  transition: opacity var(--ds-hero-hover-duration) var(--ds-hero-hover-ease);
  -webkit-text-fill-color: transparent;
  white-space: inherit;
  will-change: opacity;
}

.hero-title-text-gradient-shadow,
.hero-title-text-gradient-stroke {
  -webkit-text-stroke: var(--ds-hero-stroke) transparent;
}

.hero-title-text-gradient-shadow {
  transform: translate(var(--ds-hero-shadow-x), var(--ds-hero-shadow-y));
  transform-origin: center 56%;
  transition:
    opacity var(--ds-hero-hover-duration) var(--ds-hero-hover-ease),
    transform var(--ds-hero-hover-duration) var(--ds-hero-hover-ease);
  z-index: 0;
}

.hero-title-text-gradient-stroke {
  z-index: 1;
}

.hero-title-text-gradient-fill {
  background: none;
  color: #ffffff;
  opacity: 1;
  -webkit-text-fill-color: #ffffff;
  -webkit-text-stroke: 0 transparent;
  z-index: 2;
  will-change: auto;
}

@media (hover: hover) and (pointer: fine) {
  .hero-text-title:hover {
    transform: translate3d(0, -5px, 0) scale(1.004);
  }

  .hero-text-title.is-pressing,
  .hero-text-title:active {
    transform: translate3d(0, 0, 0) scale(.998);
    transition-duration: 120ms;
  }

  .hero-text-title:hover .hero-title-text-base {
    opacity: 0;
  }

  .hero-text-title:hover .hero-title-text-gradient {
    opacity: 1;
  }

  .hero-text-title:hover .hero-title-text-gradient-shadow {
    transform:
      translate(
        calc(var(--ds-hero-shadow-x) + clamp(2px, .2vw, 4px)),
        calc(var(--ds-hero-shadow-y) + clamp(3px, .25vw, 5px))
      )
      scale(1.01);
  }

  .hero-text-title.is-pressing .hero-title-text-base,
  .hero-text-title:active .hero-title-text-base {
    opacity: 1;
    text-shadow:
      clamp(5px, .52vw, 7px) clamp(5px, .58vw, 8px) 0 #061833,
      clamp(2px, .26vw, 4px) clamp(3px, .32vw, 5px) 0 #061833;
    transition-duration: 90ms;
  }

  .hero-text-title.is-pressing .hero-title-text-gradient,
  .hero-text-title:active .hero-title-text-gradient {
    opacity: 0;
    transition-duration: 60ms;
  }

  .hero-text-title.is-pressing .hero-title-text-gradient-shadow,
  .hero-text-title:active .hero-title-text-gradient-shadow {
    transform:
      translate(
        clamp(5px, .52vw, 7px),
        clamp(5px, .58vw, 8px)
      );
    transition-duration: 90ms;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-text-title,
  .hero-text-title:hover,
  .hero-text-title.is-pressing {
    transform: none;
    transition: none;
  }

  .hero-title-text-gradient,
  .hero-text-title:hover .hero-title-text-gradient {
    opacity: 0;
    transition: none;
  }

  .hero-title-text-base,
  .hero-text-title:hover .hero-title-text-base {
    opacity: 1;
    transition: none;
  }

  .hero-title-text-gradient-shadow,
  .hero-text-title:hover .hero-title-text-gradient-shadow {
    transform: translate(var(--ds-hero-shadow-x), var(--ds-hero-shadow-y));
  }
}

header.hero p.sub {
  font-family: var(--font-body);
  font-weight: 400;
  margin-top: 0;
  max-width: 42rem;
  color: var(--ds-ink-soft);
  font-size: var(--ds-text-lg);
  line-height: 1.3;
}

.hero-badge,
.external-link,
.user-badge {
  background: var(--ds-surface);
  border: 0;
  border-radius: var(--ds-radius-pill);
  box-shadow: var(--ds-box-shadow);
}

.pp-marquee {
  background: #477DF6;
  border: 0;
  color: #fff;
}

.search-card,
.panel,
.stat,
.stat-card,
.post-card,
.login-card,
.modal,
.modal-box,
.share-card,
.reward-card {
  background: var(--ds-surface);
  border: 0;
  border-radius: var(--ds-radius-lg);
  box-shadow: var(--ds-box-shadow);
}

.tabs,
.empty-state,
.store-item,
.feed-item,
.lb-item,
.pc-preview,
.embed-fallback,
.reward-status,
.platform-opt,
.photo-drop,
.pc-note,
.amgr-snippet,
.mb-row {
  background: var(--ds-surface);
  border: 0;
  border-radius: var(--ds-radius-md);
  box-shadow: var(--ds-box-shadow);
}

.panel-head,
.modal-head {
  border-bottom-color: rgba(6, 24, 51, .1);
}

.search-wrap {
  max-width: min(var(--ds-hero-control-width), calc(100vw - 2rem));
}

.search-card {
  gap: 1rem;
  padding: 1rem;
}

.search-card .field {
  flex: 1 1 auto;
  min-width: 0;
}

.search-field-icon {
  width: 1.18rem;
  height: 1.18rem;
  flex: 0 0 auto;
  display: block;
}

#zipSearchBtn,
#geoBtn {
  flex: 0 0 auto;
}

@media (min-width: 861px) {
  .search-card {
    flex-wrap: nowrap;
  }
}

.stats {
  max-width: min(var(--ds-hero-control-width), calc(100vw - 2rem));
  margin: clamp(1rem, 2vw, 1.75rem) auto 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: .75rem;
}

.stat {
  min-width: 0;
  min-height: 5.9rem;
  padding: 1rem .75rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .65rem;
  text-align: center;
}

.stat .num {
  font-family: var(--font-display);
  font-size: clamp(2.7rem, 4vw, 3.75rem);
  line-height: .82;
  color: var(--ds-ink);
  letter-spacing: 0;
  font-variant-numeric: tabular-nums;
}

.stat .lbl {
  max-width: 16rem;
  font-size: .95rem;
  line-height: 1.15;
  color: var(--ds-ink);
  letter-spacing: 0;
  text-transform: none;
}

.field-block label {
  display: block;
  margin-bottom: .4rem;
  color: var(--ds-ink);
  font-size: clamp(.88rem, 1vw, 1rem);
  line-height: 1.2;
}

.search-card .field,
.field-block input[type=text],
.field-block input[type=email],
.field-block input[type=url],
.field-block input[type=password],
.field-block textarea,
.field-block select,
.search-input,
.mb-input,
.login-card input {
  min-height: 3.38rem;
  background: rgba(255, 255, 255, .92);
  border: 0;
  border-radius: var(--ds-radius-md);
  color: var(--ds-ink);
  font-size: clamp(.92rem, 1.03vw, 1.04rem);
  font-weight: 400;
  box-shadow:
    var(--ds-button-frame),
    inset 0 -5px 0 rgba(6, 24, 51, .08),
    2px 3px 0 rgba(6, 24, 51, .08);
}

.search-card .field:focus-within,
.field-block input[type=text]:focus,
.field-block input[type=email]:focus,
.field-block input[type=url]:focus,
.field-block input[type=password]:focus,
.field-block textarea:focus,
.field-block select:focus,
.search-input:focus,
.mb-input:focus,
.login-card input:focus {
  border-color: transparent;
  box-shadow:
    var(--ds-button-frame),
    0 0 0 4px rgba(70, 124, 246, .22),
    inset 0 -5px 0 rgba(6, 24, 51, .08);
}

button.btn,
.btn,
.tab,
.header-btn,
.logout-btn,
.external-link,
.mb-actions button,
.login-card button,
.login-card button[type=submit],
.user-badge .logout-btn,
.popup-btn {
  min-height: 56px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .45rem;
  border-radius: var(--ds-radius-pill);
  border: 0;
  appearance: none;
  -webkit-appearance: none;
  background-clip: border-box;
  box-shadow: var(--ds-button-shadow-white);
  font-family: var(--font-body);
  font-weight: 400;
  font-size: clamp(.86rem, 1.2vw, 1rem);
  line-height: 1;
  letter-spacing: .04em;
  text-transform: uppercase;
  text-decoration: none;
  padding: .72rem 1.25rem .8rem;
  cursor: pointer;
  touch-action: manipulation;
  transition:
    transform 180ms var(--ds-button-ease),
    background-color 180ms var(--ds-button-ease),
    border-color 180ms var(--ds-button-ease),
    color 180ms var(--ds-button-ease),
    box-shadow 180ms var(--ds-button-ease),
    filter 180ms var(--ds-button-ease);
}

.btn-primary,
.btn-green,
.btn-trust,
.mb-btn-primary,
.login-card button,
.login-card button[type=submit],
.popup-btn,
.tab.active {
  background: #5084fb;
  color: #ffffff;
  border-color: var(--ds-shop-stroke);
  box-shadow: var(--ds-button-shadow-blue);
}

.btn-beak,
.header-btn {
  background: linear-gradient(180deg, #ffffff 0%, #ffffff 48%, var(--ds-shop-white-low) 100%);
  color: var(--ds-ink);
  border-color: var(--ds-shop-stroke);
  box-shadow: var(--ds-button-shadow-white);
}

.btn-ghost,
.btn-ghost-light,
.mb-btn-ghost,
.logout-btn,
.user-badge .logout-btn,
.tab:not(.active) {
  background: linear-gradient(180deg, #ffffff 0%, #ffffff 48%, var(--ds-shop-white-low) 100%);
  color: var(--ds-ink);
  border: 0;
  box-shadow: var(--ds-button-shadow-white);
}

.btn-approve {
  background: linear-gradient(180deg, #66cf82 0%, var(--ds-shop-green) 55%, var(--ds-shop-green-low) 100%);
  color: #ffffff;
  border-color: var(--ds-shop-stroke);
  box-shadow:
    var(--ds-button-frame),
    inset 0 2px 0 rgba(255, 255, 255, .10),
    inset 0 -7px 0 rgba(6, 24, 51, .17),
    inset -6px 0 0 rgba(6, 24, 51, .035),
    var(--ds-shadow-lift);
}

.btn-reject {
  background: linear-gradient(180deg, #ff8981 0%, var(--ds-shop-coral) 55%, var(--ds-shop-coral-low) 100%);
  color: #ffffff;
  border-color: var(--ds-shop-stroke);
  box-shadow:
    var(--ds-button-frame),
    inset 0 2px 0 rgba(255, 255, 255, .10),
    inset 0 -7px 0 rgba(6, 24, 51, .17),
    inset -6px 0 0 rgba(6, 24, 51, .035),
    var(--ds-shadow-lift);
}

@media (hover: hover) {
  button.btn:hover,
  .btn:hover,
  .tab:hover,
  .header-btn:hover,
  .logout-btn:hover,
  .external-link:hover,
  .mb-actions button:hover,
  .login-card button:hover,
  .login-card button[type=submit]:hover,
  .user-badge .logout-btn:hover,
  .popup-btn:hover {
    transform: translateY(4px);
    filter: none;
  }

  .btn-primary:hover,
  .btn-green:hover,
  .btn-approve:hover,
  .btn-trust:hover,
  .mb-btn-primary:hover,
  .login-card button:hover,
  .login-card button[type=submit]:hover,
  .popup-btn:hover,
  .tab.active:hover {
    background: #5084fb;
    box-shadow: var(--ds-button-frame);
  }

  .btn-beak:hover,
  .btn-ghost:hover,
  .btn-ghost-light:hover,
  .mb-btn-ghost:hover,
  .header-btn:hover,
  .logout-btn:hover,
  .user-badge .logout-btn:hover,
  .external-link:hover,
  .tab:not(.active):hover {
    background: linear-gradient(180deg, #ffffff 0%, #ffffff 42%, #f3f6f5 100%);
    box-shadow: var(--ds-button-frame);
  }

  .btn-approve:hover {
    background: linear-gradient(180deg, #76db90 0%, #55c775 55%, #37a95b 100%);
    box-shadow: var(--ds-button-frame);
  }

  .btn-reject:hover {
    background: linear-gradient(180deg, #ff9790 0%, #fb7a73 55%, #e25f59 100%);
    box-shadow: var(--ds-button-frame);
  }
}

button.btn:active,
.btn:active,
.tab:active,
.header-btn:active,
.logout-btn:active,
.external-link:active,
.mb-actions button:active,
.login-card button:active,
.login-card button[type=submit]:active,
.user-badge .logout-btn:active,
.popup-btn:active {
  transform: translateY(4px) scale(.99);
  box-shadow: var(--ds-button-frame);
}

button.btn:disabled,
.btn:disabled,
.mb-actions button:disabled,
.login-card button:disabled,
.popup-btn:disabled {
  cursor: not-allowed;
  opacity: .64;
  transform: none;
  box-shadow:
    inset 0 -8px 0 rgba(6, 24, 51, .08),
    4px 5px 0 rgba(183, 200, 208, .7);
}

p,
li,
label,
input,
textarea,
select,
.sub,
.search-hint,
.field-hint,
.store-item .addr,
.store-item .meta,
.panel-head .count,
.list-empty,
.popup-addr,
.modal-head .sub,
.reward-sub,
.reward-status,
.feed-sub,
.feed-item-embed,
.bp-cap,
.buy-post .bp-meta,
.buy-post .bp-cap,
.share-card .caption,
.pc-meta,
.pc-caption,
.pc-email,
.empty-state,
.footer-note,
footer {
  font-family: var(--font-body);
  font-weight: 400;
}

.chip,
.badge,
.flag,
.hero-badge .tag,
.stat .lbl,
.stat-card .lbl {
  font-family: var(--font-label);
  letter-spacing: .05em;
  border-radius: var(--ds-radius-pill);
}

.chip-type,
.flag-platform,
.badge.pending {
  background: var(--ds-blue-soft);
  color: var(--ds-ink-soft);
}

.chip-buys,
.badge.approved,
.flag-trust {
  background: #e5f8e4;
  color: #237432;
}

.chip-buys.zero {
  background: #f1f4f6;
  color: var(--ds-muted);
}

.chip-soldout,
.badge.rejected,
.flag-reports {
  background: #ffe3df;
  color: #a93631;
}

.chip-potential,
.flag-sold {
  background: #fff1c9;
  color: #805c05;
}

.social-tag {
  --social-bg: #ffffff;
  --social-ink: var(--ds-ink);
  --social-frame: rgba(6, 24, 51, .12);
  --social-shadow: rgba(6, 24, 51, .05);
  display: inline-flex;
  align-items: center;
  gap: .38rem;
  min-height: 1.7rem;
  padding: .28rem .66rem .32rem;
  border-radius: var(--ds-radius-pill);
  background: var(--social-bg);
  color: var(--social-ink);
  font-family: var(--font-label);
  font-size: .74rem;
  line-height: 1;
  letter-spacing: .035em;
  white-space: nowrap;
  box-shadow:
    inset 0 0 0 1.5px var(--social-frame),
    inset 0 0 2px 1px #ffffff,
    0 1px 2px var(--social-shadow);
}

.social-tag[data-platform="X"] {
  --social-bg: #f1f3f6;
  --social-ink: #061833;
  --social-frame: rgba(6, 24, 51, .2);
  --social-shadow: rgba(6, 24, 51, .08);
}

.social-tag[data-platform="Instagram"] {
  --social-bg: #ffe8f1;
  --social-ink: #a91762;
  --social-frame: rgba(225, 48, 108, .24);
  --social-shadow: rgba(225, 48, 108, .08);
}

.social-tag[data-platform="TikTok"] {
  --social-bg: #e6fbfd;
  --social-ink: #006d78;
  --social-frame: rgba(0, 242, 234, .32);
  --social-shadow: rgba(0, 242, 234, .1);
}

.social-tag[data-platform="Other"],
.social-tag:not([data-platform]),
.social-tag[data-platform="YouTube"],
.social-tag[data-platform="Facebook"],
.social-tag[data-platform="Threads"],
.social-tag[data-platform="Reddit"],
.social-tag[data-platform="Bluesky"],
.social-tag[data-platform="Snapchat"],
.social-tag[data-platform="Twitch"],
.social-tag[data-platform="Pinterest"],
.social-tag[data-platform="Discord"] {
  --social-bg: #eef5ff;
  --social-ink: var(--ds-blue-deep);
  --social-frame: rgba(70, 124, 246, .22);
  --social-shadow: rgba(70, 124, 246, .08);
}

.social-tag img {
  width: 1rem;
  height: 1rem;
  flex: 0 0 auto;
  display: block;
}

.social-tag-note {
  display: inline-flex;
  align-items: center;
  min-height: 1.1rem;
  margin-left: .1rem;
  padding: .1rem .34rem .12rem;
  border-radius: var(--ds-radius-pill);
  background: rgba(255, 255, 255, .58);
  color: var(--social-ink);
  font-size: .62rem;
  line-height: 1;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.detect-good .social-tag {
  margin-inline: .2rem .15rem;
  vertical-align: middle;
}

#storeList .chip {
  background: #ffffff;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, .86),
    0 1px 2px rgba(6, 24, 51, .04);
}

#storeList .chip-type {
  background: #f8fcff;
  color: var(--ds-blue-deep);
}

#storeList .chip-buys {
  background: #efffe9;
  color: #237432;
}

#storeList .chip-buys.zero {
  background: #ffffff;
  color: #6d7891;
}

#map {
  position: relative;
  border-radius: var(--ds-radius-lg);
  border: 0;
  background: #b4cbe9;
  box-shadow: var(--ds-box-shadow);
  overflow: hidden;
}

#map .leaflet-map-pane::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 350;
  pointer-events: none;
  background: #b4cbe9;
  mix-blend-mode: color;
  opacity: .82;
}

#map .leaflet-tile-pane {
  background: #b4cbe9;
}

#map .vibes-map-tiles {
  filter:
    sepia(64%)
    saturate(520%)
    hue-rotate(178deg)
    brightness(90%)
    contrast(98%);
  opacity: .96;
}

#map .leaflet-control-zoom a {
  border: 0;
  background: rgba(248, 252, 255, .92);
  color: var(--ds-blue-deep);
  box-shadow: inset 0 0 0 1.5px rgba(6, 24, 51, .1);
}

#map .leaflet-control-attribution {
  background: rgba(248, 252, 255, .86);
  color: var(--ds-muted);
  font-family: var(--font-body);
  font-size: .68rem;
}

#map .leaflet-popup-content-wrapper {
  border-radius: var(--ds-radius-lg);
  box-shadow:
    0 18px 34px rgba(6, 24, 51, .2),
    inset 0 0 2px 1px #ffffff;
}

#map .leaflet-popup-content {
  margin: 1.1rem 1.45rem 1.35rem;
  font-family: var(--font-body);
}

#map .leaflet-container a.leaflet-popup-close-button,
#map a.leaflet-popup-close-button {
  top: .66rem;
  right: .72rem;
  width: 1.75rem;
  height: 1.75rem;
  color: rgba(6, 24, 51, .62);
  font-size: 1.72rem;
  font-weight: 400;
  line-height: 1.52rem;
}

#map .popup-nm {
  display: flex;
  align-items: baseline;
  gap: .35rem;
  padding-right: 2.1rem;
  color: var(--ds-ink);
}

#map .popup-title {
  font-family: var(--font-display);
  font-size: 1.42rem;
  line-height: .9;
  letter-spacing: 0;
  text-transform: uppercase;
}

#map .popup-id {
  color: var(--ds-muted);
  font-family: var(--font-body);
  font-size: .92rem;
  line-height: 1;
}

#map .popup-addr {
  margin: .45rem 0 .72rem;
  color: var(--ds-muted);
  font-size: .95rem;
  line-height: 1.25;
}

#map .popup-btn {
  min-height: 48px;
  height: 48px;
  width: 100%;
  padding: .55rem 1.2rem .62rem;
  font-size: .92rem;
  line-height: 1;
}

#map .marker-cluster {
  --cluster-core: #e7f5f9;
  --cluster-halo: rgba(231, 245, 249, .7);
  --cluster-glow: rgba(71, 125, 246, .24);
  background: var(--cluster-halo);
  animation: vc-cluster-glow 2.4s ease-in-out infinite;
  box-shadow:
    0 0 0 0 var(--cluster-glow),
    0 6px 18px rgba(6, 24, 51, .12);
}

#map .marker-cluster-small {
  --cluster-core: #e7f5f9;
  --cluster-halo: rgba(231, 245, 249, .74);
  --cluster-glow: rgba(231, 245, 249, .74);
}

#map .marker-cluster-medium {
  --cluster-core: #81abff;
  --cluster-halo: rgba(129, 171, 255, .48);
  --cluster-glow: rgba(129, 171, 255, .6);
}

#map .marker-cluster-large {
  --cluster-core: #477df6;
  --cluster-halo: rgba(71, 125, 246, .42);
  --cluster-glow: rgba(71, 125, 246, .58);
}

#map .marker-cluster div {
  background: var(--cluster-core);
  color: var(--ds-ink);
  font-family: var(--font-body);
  font-weight: 400;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, .42),
    inset 0 -4px 0 rgba(6, 24, 51, .07),
    0 2px 4px rgba(6, 24, 51, .1);
}

#map .marker-cluster-medium div,
#map .marker-cluster-large div {
  color: #ffffff;
  text-shadow: 0 1px 1px rgba(6, 24, 51, .2);
}

@keyframes vc-cluster-glow {
  0%,
  100% {
    box-shadow:
      0 0 0 0 var(--cluster-glow),
      0 6px 18px rgba(6, 24, 51, .12);
  }

  50% {
    box-shadow:
      0 0 0 8px rgba(71, 125, 246, 0),
      0 10px 24px rgba(6, 24, 51, .16);
  }
}

.store-item,
.feed-item,
.lb-item,
.post-card {
  border-color: rgba(6, 24, 51, .1);
}

.store-item:hover,
.store-item.active {
  background: var(--ds-cream);
}

#storeList .store-item {
  background: transparent;
  border: 0;
  border-bottom: 1px solid rgba(6, 24, 51, .1);
  border-radius: 0;
  box-shadow: none;
}

#storeList .store-item:last-child {
  border-bottom: 0;
}

#storeList .store-item:hover,
#storeList .store-item.active {
  background: #d9e6ff;
}

.tracker {
  margin-bottom: clamp(3rem, 6vw, 5.25rem);
}

.tracker-grid {
  --tracker-panel-height: clamp(31rem, 58dvh, 40rem);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1rem, 2.2vw, 1.6rem);
  align-items: stretch;
}

.tracker-grid > .panel {
  display: flex;
  flex-direction: column;
  min-width: 0;
  height: var(--tracker-panel-height);
  overflow: hidden;
}

.tracker-grid .panel-head {
  position: sticky;
  top: 0;
  z-index: 2;
  padding: 1rem 1.1rem .85rem;
  margin: 0;
  background: rgba(233, 242, 254, .94);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(6, 24, 51, .08);
}

#feed.feed-scroll,
#leaderboard.feed-scroll {
  display: grid;
  gap: .72rem;
  flex: 1 1 auto;
  min-height: 0;
  max-height: none;
  padding: .85rem;
  overflow-y: auto;
  scrollbar-gutter: stable;
}

#leaderboard.feed-scroll {
  gap: 0;
  padding: 0 .95rem .25rem;
}

#leaderboard .lb-item {
  display: block;
  padding: .95rem 0;
  border: 0;
  border-bottom: 1px solid rgba(6, 24, 51, .1);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

#leaderboard .lb-item:last-child {
  border-bottom: 0;
}

#leaderboard .lb-item:hover {
  background: #d9e6ff;
  margin-inline: -.95rem;
  padding-inline: .95rem;
}

#leaderboard .lb-item .row1 {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: .6rem;
}

#leaderboard .lb-item .nm {
  display: inline-flex;
  align-items: baseline;
  min-width: 0;
  color: var(--ds-ink);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.15;
}

#leaderboard .lb-rank {
  width: 2.2rem;
  flex: 0 0 auto;
  margin-right: .45rem;
  color: var(--ds-blue-deep);
  font-family: var(--font-display);
  font-size: 1.32rem;
  line-height: .9;
  text-align: center;
}

#leaderboard .lb-item .dist {
  flex: 0 0 auto;
  color: var(--ds-blue-deep);
  font-size: .82rem;
  line-height: 1;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

#leaderboard .lb-item .addr {
  margin-top: .18rem;
  color: var(--ds-muted);
  font-size: .84rem;
  line-height: 1.25;
}

#leaderboard .lb-item .meta {
  display: flex;
  flex-wrap: wrap;
  gap: .38rem;
  align-items: center;
  margin-top: .52rem;
}

#leaderboard .lb-count,
#leaderboard .lb-main,
#leaderboard .feed-name {
  display: contents;
}

#feed .feed-item-embed {
  position: relative;
  display: grid;
  gap: .72rem;
  padding: clamp(.95rem, 1.7vw, 1.2rem);
  border: 1px solid rgba(6, 24, 51, .1);
  border-radius: var(--ds-radius-lg);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .72), rgba(248, 252, 255, .58)),
    var(--ds-surface);
  box-shadow:
    0 2px 3px rgba(0, 0, 0, .05),
    inset 0 0 2px 1px #ffffff;
  transition:
    transform var(--ds-duration) var(--ds-ease),
    box-shadow var(--ds-duration) var(--ds-ease),
    background-color var(--ds-duration) var(--ds-ease);
}

#feed .feed-item-embed:last-child {
  border-bottom: 1px solid rgba(6, 24, 51, .1);
}

@media (hover: hover) {
  #feed .feed-item-embed:hover {
    transform: translateY(-2px);
    box-shadow:
      0 8px 18px rgba(6, 24, 51, .1),
      inset 0 0 2px 1px #ffffff;
  }
}

#feed .feed-item-embed .meta-row {
  display: grid;
  grid-template-columns: 2.7rem minmax(0, 1fr) auto;
  align-items: center;
  gap: .35rem .68rem;
  margin: 0;
}

#feed .feed-item-embed .meta-row::before {
  content: "";
  grid-row: span 2;
  width: 2.7rem;
  height: 2.7rem;
  border-radius: .9rem;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .8), rgba(233, 242, 254, .74)),
    url("./pudgy.png") center / 72% auto no-repeat;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, .82),
    0 2px 4px rgba(6, 24, 51, .08);
}

#feed .feed-item-embed .who {
  min-width: 0;
  color: var(--ds-ink);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#feed .feed-item-embed .where {
  grid-column: 2;
  min-width: 0;
  color: var(--ds-muted);
  font-size: .83rem;
  line-height: 1.2;
}

#feed .feed-chips {
  grid-column: 3;
  grid-row: 1 / span 2;
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: .35rem;
  align-self: start;
}

#feed .feed-item-embed .chip {
  min-height: 1.55rem;
  padding: .24rem .62rem .28rem;
  font-size: .68rem;
  line-height: 1;
}

#feed .feed-chips .social-tag,
.store-detail-modal .meta-row .social-tag {
  min-height: 1.55rem;
  padding: .24rem .62rem .28rem;
  font-size: .68rem;
}

#feed .bp-cap {
  position: relative;
  margin: 0 !important;
  padding: .78rem .9rem .82rem;
  border-radius: var(--ds-radius-md);
  background: rgba(255, 255, 255, .68);
  color: var(--ds-ink-soft);
  font-size: .94rem;
  line-height: 1.35;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .82);
}

#feed .embed-wrap {
  min-height: 0;
  margin-top: 0;
}

#feed .embed-wrap iframe,
#feed .embed-wrap blockquote,
#feed .embed-fallback,
#feed .embed-photo,
#feed .local-post-preview {
  width: 100%;
  max-width: none;
}

#feed .local-post-preview {
  border: 0;
  border-radius: var(--ds-radius-md);
  background: rgba(255, 255, 255, .64);
  box-shadow: none;
}

#feed .local-post-preview-head {
  padding: .9rem;
  border-bottom: 1px solid rgba(6, 24, 51, .08);
  background: rgba(233, 242, 254, .76);
}

#feed .local-post-preview-head img {
  width: 3rem;
  height: 3rem;
  border-radius: .85rem;
}

#feed .local-post-preview-kicker,
#feed .local-post-preview-stat,
#feed .sample-note,
#feed .report-link {
  font-size: .74rem;
}

#feed .local-post-preview-title {
  color: var(--ds-ink);
  font-family: var(--font-body);
  font-size: .98rem;
  line-height: 1.15;
}

#feed .local-post-preview-body {
  padding: .9rem;
  color: var(--ds-ink-soft);
  font-size: .9rem;
  line-height: 1.42;
}

#feed .local-post-preview-stat {
  min-height: 1.6rem;
  align-items: center;
  margin-top: .72rem;
  background: var(--ds-blue-soft);
  color: var(--ds-ink-soft);
}

#feed .card-footer-row {
  align-items: center;
  justify-content: flex-end;
  margin-top: -.1rem;
  padding-top: .18rem;
}

#feed .report-link {
  color: var(--ds-muted);
}

#feed .report-link:hover {
  color: var(--ds-coral-low);
}

@media (max-width: 880px) {
  .tracker-grid {
    --tracker-panel-height: auto;
    grid-template-columns: 1fr;
  }

  .tracker-grid > .panel {
    height: auto;
  }

  #feed.feed-scroll,
  #leaderboard.feed-scroll {
    max-height: none;
    overflow-y: visible;
  }
}

@media (max-width: 560px) {
  #feed.feed-scroll {
    padding: .65rem;
  }

  #feed .feed-item-embed {
    border-radius: var(--ds-radius-md);
  }

  #feed .feed-item-embed .meta-row {
    grid-template-columns: 2.5rem minmax(0, 1fr);
  }

  #feed .feed-item-embed .meta-row::before {
    width: 2.5rem;
    height: 2.5rem;
  }

  #feed .feed-item-embed .where,
  #feed .feed-chips {
    grid-column: 2;
    justify-self: start;
  }

  #feed .feed-chips {
    grid-row: auto;
    justify-content: flex-start;
  }

  #leaderboard.feed-scroll {
    padding-inline: .75rem;
  }

  #leaderboard .lb-item:hover {
    margin-inline: -.75rem;
    padding-inline: .75rem;
  }
}

.modal-overlay {
  background: rgba(6, 24, 51, .58);
  backdrop-filter: blur(6px);
}

.modal-overlay.open {
  animation: vc-modal-overlay-in 520ms cubic-bezier(.16, 1, .3, 1) both;
}

@keyframes vc-modal-overlay-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

.store-detail-modal {
  width: min(98vw, 1500px);
  max-width: 1500px;
  max-height: min(94dvh, 860px);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background: #f8fcff;
  border: 3px solid var(--ds-ink);
  border-radius: 2rem;
  box-shadow:
    0 24px 58px rgba(6, 24, 51, .34),
    inset 0 0 2px 1px #ffffff;
  transform-origin: center bottom;
  will-change: transform, opacity;
}

.modal-overlay.open .store-detail-modal {
  animation: vc-page-rise-in 520ms cubic-bezier(.16, 1, .3, 1) both;
}

.store-detail-modal .modal-head {
  position: relative;
  top: auto;
  z-index: 2;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: .9rem;
  padding: clamp(1.05rem, 1.9vw, 1.55rem) clamp(1.15rem, 2.6vw, 1.8rem) .6rem;
  background: #f8fcff;
  border: 0;
  border-radius: 0;
}

.store-modal-heading {
  min-width: 0;
  flex: 1 1 auto;
  display: flex;
  align-items: flex-start;
  gap: clamp(.72rem, 1.05vw, .95rem);
}

.store-modal-avatar {
  width: clamp(3.65rem, 4.8vw, 4.55rem);
  height: clamp(3.65rem, 4.8vw, 4.55rem);
  flex: 0 0 auto;
  overflow: hidden;
  border-radius: 50%;
  background: var(--ds-blue-soft);
  box-shadow:
    inset 0 0 0 3px rgba(255, 255, 255, .88),
    inset 0 0 0 5px rgba(6, 24, 51, .08),
    0 2px 3px rgba(0, 0, 0, .05);
}

.store-modal-avatar img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: 50% 14%;
  transform: scale(1.28);
}

.store-modal-heading-copy {
  min-width: 0;
  flex: 1 1 auto;
  max-width: calc(100vw - 10rem);
  display: grid;
  gap: .2rem;
}

.store-modal-title-row {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: clamp(.55rem, 1.05vw, .9rem);
  flex-wrap: wrap;
}

.store-detail-modal .modal-head h2 {
  margin: 0;
  max-width: 13.5ch;
  color: var(--ds-ink);
  font-size: clamp(1.95rem, 2.65vw, 2.55rem);
  line-height: .82;
  letter-spacing: 0;
}

.store-detail-modal .modal-head .sub {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--ds-muted);
  font-size: clamp(.84rem, .88vw, .94rem);
  line-height: 1;
}

#mInfo,
#mMetaChips {
  min-width: 0;
}

.store-modal-chips {
  display: flex;
  align-items: center;
  gap: .42rem;
  flex-wrap: wrap;
}

.store-modal-chips .chip {
  min-height: 1.62rem;
  display: inline-flex;
  align-items: center;
  padding: .3rem .68rem .26rem;
  font-size: .68rem;
  line-height: 1;
  text-transform: uppercase;
  box-shadow: var(--ds-box-shadow);
}

.store-modal-stockline {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin: .48rem 0 0;
  color: var(--ds-muted);
  display: flex;
  align-items: center;
  gap: .35rem;
  font-size: clamp(.82rem, .88vw, .94rem);
  line-height: 1.18;
}

.store-modal-stockline span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.store-modal-directions {
  flex: 0 0 auto;
  color: var(--ds-blue-deep);
  font-weight: 700;
  white-space: nowrap;
}

.store-detail-modal .soldout-banner,
.store-detail-modal .potential-banner {
  margin: .3rem 0 0;
}

.store-detail-modal .modal-close {
  width: clamp(3rem, 3.8vw, 3.55rem);
  height: clamp(3rem, 3.8vw, 3.55rem);
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 50%;
  background: #ffffff;
  color: var(--ds-ink);
  font-size: clamp(1.8rem, 2.5vw, 2.2rem);
  line-height: 1;
  box-shadow:
    var(--ds-button-frame),
    inset 0 -7px 0 rgba(6, 24, 51, .1),
    4px 5px 0 rgba(6, 24, 51, .16);
  transition:
    transform 180ms var(--ds-button-ease),
    background-color 180ms var(--ds-button-ease),
    box-shadow 180ms var(--ds-button-ease);
}

@media (hover: hover) {
  .store-detail-modal .modal-close:hover {
    transform: translateY(4px);
    background: #ffffff;
    box-shadow: var(--ds-button-frame);
  }
}

.store-detail-modal .modal-body {
  min-height: 0;
  overflow: auto;
  padding: .72rem clamp(1rem, 2.45vw, 1.65rem) clamp(1rem, 2.2vw, 1.45rem);
}

.store-modal-layout {
  display: grid;
  grid-template-columns: minmax(340px, .95fr) minmax(420px, 1.05fr);
  gap: clamp(.95rem, 2vw, 1.35rem);
  align-items: start;
}

.store-modal-left,
.store-modal-right {
  min-width: 0;
}

.store-modal-left {
  display: grid;
  gap: .85rem;
}

.store-modal-card,
.store-modal-right {
  background: rgba(233, 242, 254, .5);
  border: 1px solid rgba(6, 24, 51, .11);
  border-radius: var(--ds-radius-lg);
  box-shadow: var(--ds-box-shadow);
}

.store-modal-card {
  padding: clamp(.98rem, 1.55vw, 1.32rem);
}

.store-modal-right {
  padding: clamp(.98rem, 1.55vw, 1.32rem);
}

.store-detail-modal .section-title {
  margin: 0 0 .65rem;
  color: var(--ds-ink);
  font-family: var(--font-display);
  font-size: clamp(1.12rem, 1.45vw, 1.45rem);
  line-height: .95;
  letter-spacing: 0;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: .48rem;
}

.store-modal-title-icon {
  width: 1.3rem;
  height: 1.3rem;
  flex: 0 0 auto;
}

.store-modal-intro > p {
  margin-bottom: clamp(.88rem, 1.3vw, 1.12rem) !important;
  color: var(--ds-muted) !important;
  font-size: clamp(.92rem, 1.04vw, 1.02rem) !important;
  line-height: 1.34;
}

.store-detail-modal .reward-card {
  margin: 0;
  padding: clamp(.9rem, 1.45vw, 1.15rem);
  background: rgba(255, 255, 255, .75);
  border: 0;
  border-radius: var(--ds-radius-md);
  box-shadow:
    0 2px 3px rgba(0, 0, 0, .05),
    inset 0 0 0 2px rgba(6, 24, 51, .08),
    inset 0 0 2px 1px #ffffff;
}

.store-detail-modal .reward-title {
  color: var(--ds-blue-deep);
  font-size: clamp(1rem, 1.25vw, 1.24rem);
  line-height: 1.1;
  letter-spacing: 0;
  display: flex;
  align-items: center;
  gap: .5rem;
}

.store-detail-modal .reward-sub {
  margin: .45rem 0 .88rem;
  color: var(--ds-ink);
  font-size: clamp(.88rem, .98vw, .98rem);
  line-height: 1.34;
}

.store-detail-modal .reward-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .7rem;
}

.store-detail-modal .backpack-chip {
  min-height: 3.25rem;
  justify-content: flex-start;
  gap: .58rem;
  border-width: 2px;
  border-radius: var(--ds-radius-md);
  background: #ffffff;
  box-shadow: var(--ds-button-shadow-white);
  font-size: clamp(.86rem, .96vw, .98rem);
  line-height: 1.12;
  text-align: left;
  white-space: normal;
  padding: .72rem .95rem .82rem;
}

.store-detail-modal .backpack-chip img {
  width: 1.65rem;
  height: 1.65rem;
  flex: 0 0 auto;
}

.store-detail-modal .bp-X {
  background: linear-gradient(180deg, #ffffff 0%, #f5f7fa 100%);
  color: var(--ds-ink);
  border-color: var(--ds-ink);
}

.store-detail-modal .bp-Instagram {
  background: linear-gradient(180deg, #fff7fb 0%, #ffe9f2 100%);
  color: #c2185b;
  border-color: #ec407a;
}

.store-detail-modal .bp-TikTok {
  background: linear-gradient(180deg, #f6fdff 0%, #e1f9fd 100%);
  color: #006e76;
  border-color: #18a9b8;
}

.store-detail-modal .bp-GOLD {
  background: linear-gradient(180deg, #fffaf0 0%, #fff0bd 100%);
  color: #8a5d00;
  border-color: #d99700;
}

.store-detail-modal .field-block {
  position: relative;
  margin-bottom: .82rem;
}

.store-detail-modal .field-block label {
  display: block;
  margin-bottom: .4rem;
  color: var(--ds-ink);
  font-size: clamp(.88rem, 1vw, 1rem);
  line-height: 1.2;
}

.store-detail-modal .field-block input[type=text],
.store-detail-modal .field-block textarea,
.store-detail-modal .field-block select {
  min-height: 3.38rem;
  padding: .82rem .95rem .82rem 3.25rem;
  border: 0;
  border-radius: var(--ds-radius-md);
  background: rgba(255, 255, 255, .92);
  color: var(--ds-ink);
  font-size: clamp(.92rem, 1.03vw, 1.04rem);
  font-weight: 400;
  box-shadow:
    var(--ds-button-frame),
    inset 0 -5px 0 rgba(6, 24, 51, .08),
    2px 3px 0 rgba(6, 24, 51, .08);
}

.store-detail-modal .field-block textarea {
  min-height: 5.35rem;
  resize: vertical;
}

.store-detail-modal .field-block input:focus,
.store-detail-modal .field-block textarea:focus,
.store-detail-modal .field-block select:focus {
  border-color: transparent;
  box-shadow:
    var(--ds-button-frame),
    0 0 0 4px rgba(70, 124, 246, .22),
    inset 0 -5px 0 rgba(6, 24, 51, .08);
}

.store-detail-modal .field-post-url::before,
.store-detail-modal .field-email::before,
.store-detail-modal .field-note::before {
  content: "";
  position: absolute;
  left: 1rem;
  top: 2.62rem;
  z-index: 1;
  width: 1.15rem;
  height: 1.15rem;
  background: var(--ds-ink);
  -webkit-mask: center / contain no-repeat;
  mask: center / contain no-repeat;
  pointer-events: none;
}

.store-detail-modal .field-post-url::before {
  -webkit-mask-image: url("./assets/icon-link.svg");
  mask-image: url("./assets/icon-link.svg");
}

.store-detail-modal .field-email::before {
  -webkit-mask-image: url("./assets/icon-mail.svg");
  mask-image: url("./assets/icon-mail.svg");
}

.store-detail-modal .field-note::before {
  -webkit-mask-image: url("./assets/icon-pen.svg");
  mask-image: url("./assets/icon-pen.svg");
}

.store-detail-modal .field-hint,
.store-detail-modal .detect-row {
  margin-top: .42rem;
  color: var(--ds-muted);
  font-size: .82rem;
  line-height: 1.24;
}

.store-detail-modal .photo-drop {
  min-height: 3.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .45rem;
  border: 2px dashed rgba(70, 124, 246, .52);
  background: rgba(255, 255, 255, .72);
}

.store-detail-modal .photo-drop::before {
  content: "";
  width: 1.2rem;
  height: 1.2rem;
  flex: 0 0 auto;
  background: var(--ds-blue-deep);
  -webkit-mask: url("./assets/icon-camera.svg") center / contain no-repeat;
  mask: url("./assets/icon-camera.svg") center / contain no-repeat;
}

.store-detail-modal .soldout-check,
.store-detail-modal .privacy-check {
  padding: .82rem .95rem;
  border-radius: var(--ds-radius-md);
  box-shadow: inset 0 0 2px 1px #ffffff;
  color: var(--ds-ink);
  font-size: clamp(.88rem, .96vw, .98rem);
  line-height: 1.3;
}

.store-detail-modal .soldout-check strong,
.store-detail-modal .privacy-check strong {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
}

.store-modal-inline-icon {
  width: 1.05rem;
  height: 1.05rem;
  display: inline-block;
  flex: 0 0 auto;
  vertical-align: -0.18em;
}

.store-modal-button-icon {
  width: 1.15rem;
  height: 1.15rem;
  flex: 0 0 auto;
  filter: brightness(0) invert(1);
}

.store-detail-modal .soldout-check {
  margin-top: .58rem;
  border-color: #ff5b58;
  background: rgba(255, 255, 255, .62);
}

.store-detail-modal .privacy-check {
  margin-top: .65rem;
  border-color: #83b9ff;
  background: rgba(255, 255, 255, .56);
}

.store-detail-modal input[type=checkbox] {
  width: 1.3rem;
  height: 1.3rem;
}

.store-detail-modal .form-actions {
  margin-top: 1rem;
}

.store-detail-modal .form-actions .btn {
  width: 100%;
  min-height: 3.85rem;
  font-size: clamp(.96rem, 1.1vw, 1.1rem);
}

.store-detail-modal .feed-item-embed {
  padding: 1rem 0;
}

.store-detail-modal .empty-mini {
  padding: .25rem 0 0;
  color: var(--ds-muted);
  font-size: .9rem;
  line-height: 1.3;
}

.store-detail-modal .share-result {
  margin-top: 1rem;
}

.store-detail-modal .share-card {
  border: 0;
  background: rgba(255, 255, 255, .74);
  box-shadow: var(--ds-box-shadow);
}

@media (max-width: 1080px) {
  .store-detail-modal {
    width: min(96vw, 760px);
  }

  .store-modal-layout {
    grid-template-columns: 1fr;
  }
}

.login-overlay {
  background: #d0e0f4;
  backdrop-filter: none;
}

.toast {
  background: var(--ds-ink);
  border: 2px solid rgba(255, 255, 255, .18);
  border-radius: var(--ds-radius-pill);
}

@media (max-width: 760px) {
  header.hero h1 {
    --ds-hero-stroke: clamp(4px, 1.15vw, 5px);
    --ds-hero-shadow-x: clamp(5px, 1.6vw, 7px);
    --ds-hero-shadow-y: clamp(6px, 1.85vw, 8px);
    font-size: clamp(3.5rem, 18vw, 5.5rem);
    white-space: normal;
    -webkit-text-stroke: var(--ds-hero-stroke) #00142d;
    text-shadow:
      var(--ds-hero-shadow-x) var(--ds-hero-shadow-y) 0 #000000,
      2px 3px 0 #00142d;
  }

  header.hero h1.hero-text-title {
    font-size: clamp(3.5rem, 18vw, 5.5rem);
    line-height: .8;
    max-width: calc(100vw - 1rem);
    margin: -0.05rem auto .7rem;
    padding-bottom: 0;
    white-space: normal;
    -webkit-text-stroke: 0 transparent;
    text-shadow: none;
  }

  .stats {
    max-width: calc(100vw - 2rem);
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .85rem;
    margin-top: 1rem;
  }

  .stat {
    min-height: 5.75rem;
    padding: 1rem .75rem;
  }

  .stat .num {
    font-size: clamp(2.8rem, 12vw, 3.7rem);
  }

  .stat .lbl {
    font-size: .95rem;
  }

  .search-card,
  .panel,
  .modal,
  .modal-box {
    border-radius: var(--ds-radius-md);
  }

  .modal-overlay {
    align-items: flex-start;
    padding: .75rem;
  }

  .store-detail-modal {
    width: 100%;
    max-height: calc(100dvh - 1.5rem);
    border-width: 2px;
    border-radius: var(--ds-radius-lg);
  }

  .store-detail-modal .modal-head {
    padding: 1rem .95rem .65rem;
  }

  .store-modal-heading {
    gap: .75rem;
  }

  .store-modal-avatar {
    width: 3.75rem;
    height: 3.75rem;
  }

  .store-detail-modal .modal-head h2 {
    font-size: clamp(1.65rem, 9.5vw, 2.35rem);
  }

  .store-detail-modal .modal-close {
    width: 3.2rem;
    height: 3.2rem;
    font-size: 1.85rem;
  }

  .store-modal-title-row {
    gap: .5rem;
  }

  .store-modal-chips .chip {
    min-height: 1.8rem;
    padding-inline: .72rem;
    font-size: .7rem;
  }

  .store-detail-modal .modal-body {
    padding: .65rem .85rem 1rem;
  }

  .store-modal-card,
  .store-modal-right {
    border-radius: var(--ds-radius-md);
    padding: 1rem;
  }

  .store-detail-modal .reward-row {
    grid-template-columns: 1fr;
  }

  .store-detail-modal .field-block input[type=text],
  .store-detail-modal .field-block textarea,
  .store-detail-modal .field-block select {
    min-height: 3.65rem;
  }

  .store-detail-modal .field-post-url::before,
  .store-detail-modal .field-email::before,
  .store-detail-modal .field-note::before {
    top: 2.9rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: .001ms !important;
  }

  .pp-marquee,
  .hero-logo,
  .hero-title-stage,
  header.hero .sub,
  .search-wrap,
  .stats .stat,
  .layout > .panel,
  .tracker > h2,
  .tracker > p,
  .tracker-grid > .panel,
  footer {
    opacity: 1 !important;
    transform: none !important;
  }
}