/* Saga Member V5 — Urban Coffee Club */
:root {
  --v5-ink: #1d1815;
  --v5-espresso: #34211b;
  --v5-roast: #70442f;
  --v5-clay: #e2764a;
  --v5-lime: #c9f06c;
  --v5-butter: #f2d66b;
  --v5-paper: #f4eee5;
  --v5-milk: #fffdf8;
  --v5-concrete: #d6d0c7;
  --v5-muted: #6a625d;
  --v5-line: rgb(29 24 21 / 10%);
  --v5-line-strong: rgb(29 24 21 / 16%);
  --v5-shadow-flat: inset 0 1px 0 rgb(255 255 255 / 60%);
  --v5-shadow-lift: 0 1px 0 rgb(29 24 21 / 5%), 0 14px 28px -20px rgb(52 33 27 / 32%);
  --v5-shadow-focus: 0 24px 44px -28px rgb(52 33 27 / 55%);
  --v5-radius-s: 13px;
  --v5-radius-m: 18px;
  --v5-radius-l: 24px;
  --v5-radius-xl: 30px;
  --v5-nav-space: calc(98px + env(safe-area-inset-bottom));
}

html { scroll-padding-bottom: var(--v5-nav-space); background: var(--v5-concrete); }

body {
  padding-bottom: var(--v5-nav-space);
  color: var(--v5-ink);
  background-color: var(--v5-paper);
  background-image: url("/assets/v5/paper-grain.svg");
  background-size: 160px 160px;
}

button, input, summary { font: inherit; }
button { -webkit-tap-highlight-color: transparent; }

.topbar {
  min-height: calc(64px + env(safe-area-inset-top));
  padding: env(safe-area-inset-top) 18px 0;
  border-bottom: 0;
  background: rgb(244 238 229 / 96%);
}

.brand { display: inline-flex; align-items: center; gap: 7px; font-size: inherit; }
.brand-name { color: var(--v5-ink); font-size: 0.78rem; font-weight: 750; }
.brand-name b { color: var(--v5-roast); }
.brand-edition { padding-left: 7px; border-left: 1px solid var(--v5-line-strong); color: var(--v5-muted); font-size: 0.75rem; font-weight: 650; }
.brand-star, .v5-mini-star {
  display: inline-block;
  width: 15px;
  height: 15px;
  flex: 0 0 auto;
  background: var(--v5-lime);
  clip-path: polygon(50% 0, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0 50%, 39% 39%);
}
.v5-mini-star { width: 12px; height: 12px; background: currentColor; }
.topbar .icon-button { border-color: var(--v5-line); background: var(--v5-milk); box-shadow: var(--v5-shadow-flat); }

.scale-context {
  width: auto;
  max-width: calc(100% - 36px);
  min-height: 28px;
  margin: 4px 18px 0;
  padding: 5px 10px;
  border: 1px solid var(--v5-line);
  border-radius: 999px;
  background: rgb(255 253 248 / 72%);
  color: var(--v5-muted);
  font-size: 0.75rem;
  font-weight: 600;
}

main { min-height: calc(100dvh - 120px); padding: 18px 16px 64px; }
.member-view { gap: 28px; }
.member-view > * { animation: none; }
.member-view h1, .member-view h2, .member-view h3 { text-wrap: balance; }
.member-view p, .member-view small { text-wrap: pretty; }
.member-view h1 { font-size: clamp(1.75rem, 7.7vw, 2.125rem); font-weight: 750; line-height: 1.06; }
.member-view h2 { font-size: 1.25rem; font-weight: 700; line-height: 1.28; }
.member-view h3 { font-size: 1rem; font-weight: 650; line-height: 1.35; }
.member-view p { color: var(--v5-muted); font-size: 0.9375rem; line-height: 1.48; }
.member-view small { font-size: 0.75rem; line-height: 1.38; }
.eyebrow { margin: 0 0 6px; color: var(--v5-roast); font-size: 0.75rem; font-weight: 700; opacity: 1; }
.pill, .tier-chip { min-height: 28px; padding: 6px 10px; font-size: 0.75rem; line-height: 1.2; }
.tabular, .v5-wallet-balance strong, .v5-wallet-footer strong, .v4-profile-stats strong, .v4-points-orb strong { font-variant-numeric: tabular-nums; }

.v5-home-greeting { align-items: center; gap: 14px; padding: 4px 2px 0; }
.v5-home-greeting h1 { margin: 0; font-size: 1.8rem; }
.v5-home-greeting .pill { max-width: 126px; background: var(--v5-milk); color: var(--v5-muted); text-align: right; }
.v5-greeting-note { margin: 5px 0 0; font-size: 0.8125rem !important; }

.v5-member-wallet {
  min-height: 218px;
  padding: 20px;
  border: 1px solid rgb(29 24 21 / 7%);
  border-radius: var(--v5-radius-xl);
  background-color: var(--v5-lime);
  background-image: linear-gradient(128deg, rgb(255 253 248 / 86%), rgb(201 240 108 / 88%)), url("/assets/v5/cement-speckle.svg");
  background-size: auto, 180px 180px;
  box-shadow: var(--v5-shadow-focus), var(--v5-shadow-flat);
}
.v5-member-wallet::before { display: none; }
.v5-wallet-top > span:first-child { display: inline-flex; align-items: center; gap: 7px; font-size: 0.75rem; }
.v5-wallet-top .tier-chip { background: rgb(255 253 248 / 72%); }
.v5-wallet-balance { align-content: center; margin-top: 10px; }
.v5-wallet-balance > span { order: -1; color: #34432a; font-size: 0.75rem; font-weight: 650; opacity: 1; }
.v5-wallet-balance strong { margin: 2px 0; font-size: 3.45rem; line-height: 0.96; }
.v5-wallet-balance small { color: #34432a; font-size: 0.75rem; font-weight: 550; }
.v5-wallet-footer > div { gap: 2px; }
.v5-wallet-footer span { color: #34432a; font-size: 0.75rem; opacity: 1; }
.v5-wallet-footer strong { font-size: 1.06rem; }
.v5-wallet-star { top: 66px; right: 29px; width: 30px; height: 30px; color: rgb(29 24 21 / 17%); }
.v5-wallet-orbit { position: absolute; top: -75px; right: -65px; width: 190px; height: 190px; border: 1px solid rgb(29 24 21 / 8%); border-radius: 50%; }
.v5-wallet-orbit::before { position: absolute; inset: 28px; border: 1px solid rgb(29 24 21 / 8%); border-radius: inherit; content: ""; }

.v5-icon-cta { display: inline-flex; align-items: center; justify-content: space-between; gap: 10px; padding: 5px 5px 5px 14px; border-radius: 999px; }
.v5-icon-cta > i { display: grid; width: 34px; height: 34px; flex: 0 0 auto; place-items: center; border-radius: 50%; background: rgb(29 24 21 / 8%); font-style: normal; }

.editorial-section-heading { align-items: end; }
.editorial-section-heading h2 { font-size: 1.22rem; }
.content-section { gap: 13px; }

.destination-grid { gap: 8px; }
.v5-destination-card {
  min-height: 94px;
  gap: 7px;
  padding: 9px 4px;
  border: 0;
  border-radius: var(--v5-radius-m);
  background: transparent;
}
.v5-destination-card > i {
  display: grid;
  width: 46px;
  height: 46px;
  place-items: center;
  border: 1px solid var(--v5-line);
  border-radius: 16px;
  background: var(--v5-milk);
  color: var(--v5-espresso);
  box-shadow: var(--v5-shadow-lift), var(--v5-shadow-flat);
  font-style: normal;
}
.v5-destination-card > .feather-icon:first-child { padding: 0; border: 0; background: transparent; box-shadow: none; }
.v5-destination-card strong { font-size: 0.8125rem; }
.v5-destination-card small { color: var(--v5-muted); font-size: 0.75rem; }

.v5-context-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; border: 0; }
.v5-context-grid button {
  grid-template-columns: 42px minmax(0, 1fr);
  align-content: start;
  min-height: 152px;
  gap: 12px;
  padding: 14px;
  border: 1px solid var(--v5-line);
  border-radius: var(--v5-radius-m);
  background: var(--v5-milk);
  box-shadow: var(--v5-shadow-flat);
}
.v5-context-grid button > .feather-icon:last-child { position: absolute; top: 16px; right: 14px; }
.v5-context-grid button > span:nth-child(2) { grid-column: 1 / -1; gap: 4px; }
.v5-context-grid small { color: var(--v5-muted); font-size: 0.75rem; }
.v5-context-grid strong { font-size: 0.875rem; white-space: normal; }
.v5-context-grid em { color: var(--v5-muted); font-size: 0.75rem; font-style: normal; line-height: 1.35; }
.v5-context-grid .v4-context-icon { background: var(--v5-paper); color: var(--v5-espresso); }

.v5-progress-story { padding: 17px; border-color: var(--v5-line); border-radius: var(--v5-radius-m); background: var(--v5-milk); box-shadow: var(--v5-shadow-flat); }
.v5-progress-story .progress-card-head > span { max-width: 130px; font-size: 0.75rem; line-height: 1.35; }
.v5-progress-story p { margin: 9px 0 0; font-size: 0.75rem; }
.progress { height: 7px; background: #e4ddd3; }
.progress span { background: var(--v5-clay); animation: v5-progress-in 180ms ease-out both; }
@keyframes v5-progress-in { from { transform: scaleX(0); } to { transform: scaleX(1); } }

.activity-preview { border-top-color: var(--v5-line); }
.activity-preview li { min-height: 68px; padding: 11px 2px; border-color: var(--v5-line); }
.activity-preview strong { font-size: 0.875rem; }
.activity-preview small { color: var(--v5-muted); font-size: 0.75rem; }
.v5-demo-note { margin: -6px 0 0; color: var(--v5-muted) !important; font-size: 0.6875rem !important; }

.v5-page-head { padding: 9px 3px 0; }
.v5-page-head h1 { max-width: 11ch; margin: 0 0 10px; font-size: 2.125rem; }
.v5-page-head > p:last-child { max-width: 29ch; margin: 0; font-size: 0.9375rem; }
.v4-page-head-compact.v5-page-head h1 { max-width: 9ch; }
.member-view-explore { gap: 20px; container: explore-layout / inline-size; }
.explore-page-head { padding: 4px 10px 6px; text-align: center; }
.explore-page-head > .eyebrow { margin: 0 0 8px; }
.explore-page-head h1 { display: grid; max-width: none; margin: 0 auto 13px; gap: 2px; font-size: clamp(1.75rem, 7.4vw, 2rem); line-height: 1.12; text-wrap: balance; }
.explore-page-head h1 span { display: block; white-space: normal; }
.explore-page-head > p:last-child { max-width: 31ch; margin: 0 auto; font-size: 0.9375rem; line-height: 1.55; text-wrap: pretty; }

.v4-sticky-tools { top: calc(64px + env(safe-area-inset-top)); margin: -7px -2px 0; padding: 8px 2px 10px; background: rgb(244 238 229 / 96%); }
.search-field { min-height: 54px; border: 1px solid var(--v5-line); border-radius: 18px; background: var(--v5-milk); box-shadow: var(--v5-shadow-lift); }
.search-field input { font-size: 0.9375rem; }
.filter-rail { gap: 8px; }
.filter-chip { min-height: 44px; padding: 10px 14px; border-color: var(--v5-line); border-radius: 999px; color: var(--v5-ink); font-size: 0.75rem; }
.filter-chip[aria-pressed="true"] { border-color: var(--v5-ink); background: var(--v5-ink); color: var(--v5-milk); }

.v4-discovery-list { gap: 13px; }
.tenant-card { border-color: var(--v5-line); background: var(--v5-milk); box-shadow: var(--v5-shadow-flat); }
.v5-tenant-featured { grid-template-columns: 43% minmax(0, 1fr); min-height: 224px; border-radius: var(--v5-radius-l); }
.v5-tenant-row { grid-template-columns: 108px minmax(0, 1fr); min-height: 150px; border-radius: var(--v5-radius-m); }
.member-view-explore .v5-tenant-featured { grid-template-columns: minmax(0, 1fr); }
.member-view-explore, .member-view-explore > *, .member-view-explore .discovery-results, .member-view-explore .tenant-copy { min-width: 0; }
.member-view-explore .tenant-copy { overflow-wrap: anywhere; }
.member-view-explore .card-meta { flex-wrap: wrap; }
.member-view-explore .content-section { grid-template-columns: minmax(0, 1fr); }
.member-view-explore .editorial-section-heading { flex-wrap: wrap; }
.member-view-explore .editorial-section-heading > div { min-width: 0; }
.member-view-explore .v5-tenant-featured .tenant-copy { padding: 16px; }
.member-view-explore .v5-tenant-featured h2 { font-size: 1.25rem; line-height: 1.25; }
.member-view-explore .v5-tenant-row .text-action { display: inline-flex; align-items: center; min-height: 44px; }
.member-view-explore .explore-photo-note { margin: -5px 0 2px; font-size: 0.75rem; line-height: 1.5; color: var(--v5-muted); }
.explore-photo { position: relative; overflow: hidden; min-height: 150px; background: #e5dacc; color: #65452f; }
.explore-photo-coffee { min-height: 0; aspect-ratio: 16 / 9; }
.explore-photo picture, .explore-photo img { display: block; position: absolute; inset: 0; width: 100%; height: 100%; }
.explore-photo img { object-fit: cover; }
.explore-photo-fallback { position: absolute; inset: 0; display: grid; place-items: center; }
.explore-photo.is-unavailable picture { visibility: hidden; }
/* Font-relative breakpoint: preserve compact rows normally, give enlarged text
   the full card width. The existing grid remains a usable legacy fallback. */
@container explore-layout (width < 18em) {
  .member-view-explore .v5-tenant-row { grid-template-columns: minmax(0, 1fr); }
  .member-view-explore .v5-tenant-row .explore-photo { min-height: 0; height: 120px; }
}
@media (forced-colors: active) {
  .explore-photo picture { visibility: hidden; }
  .explore-photo { background: Canvas; color: CanvasText; }
}
.v5-scene { min-height: 100%; color: var(--v5-espresso); background: var(--v5-concrete); }
.v5-scene::before { background-image: url("/assets/v5/cement-speckle.svg"); background-size: 180px 180px; opacity: 1; }
.v5-scene-coffee { background: var(--v5-clay); }
.v5-scene-studio { background: #bdcbb0; }
.v5-scene-quest { background: var(--v5-butter); }
.v5-scene-reward { background: var(--v5-lime); }
.v5-scene-index { top: 13px; left: 13px; padding: 4px 7px; border: 1px solid currentColor; border-radius: 999px; font-size: 0.75rem; }
.v5-scene-kicker { right: auto; bottom: 13px; left: 13px; max-width: calc(100% - 26px); font-size: 0.75rem; writing-mode: horizontal-tb; }
.v5-scene-icon { width: 70px; height: 70px; border-color: rgb(255 253 248 / 52%); background: rgb(255 253 248 / 68%); box-shadow: inset 0 1px 0 rgb(255 255 255 / 65%); }
.v5-scene-star { top: 15px; right: 13px; width: 17px; height: 17px; }
.v5-scene-line { position: absolute; right: -24px; bottom: 30px; width: 112px; height: 112px; border: 1px solid currentColor; border-radius: 50%; opacity: 0.12; }
.tenant-copy { padding: 15px; }
.tenant-copy h2 { margin: 10px 0 5px; font-size: 1.05rem; }
.tenant-copy p { margin-bottom: 9px; font-size: 0.8125rem; }
.card-meta > span:last-child { font-size: 0.75rem; }

.v5-community-card { min-height: 166px; border-radius: var(--v5-radius-l); background: var(--v5-espresso); box-shadow: var(--v5-shadow-focus); }
.v5-community-card .wide-story-visual { background: var(--v5-lime); }
.v5-community-card .wide-story-visual span { border-radius: 16px; }
.v5-community-card h2 { color: var(--v5-milk); }
.v5-community-card p { color: #e6d9d0; }
.v5-community-card .eyebrow { color: var(--v5-lime); }

.v5-member-pass {
  min-height: 304px;
  padding: 22px;
  border: 1px solid rgb(255 255 255 / 7%);
  border-radius: var(--v5-radius-xl);
  background-color: var(--v5-espresso);
  background-image: linear-gradient(132deg, #211713, #563328 64%, #7c5038), url("/assets/v5/coffee-halftone.svg");
  background-size: auto, 112px 112px;
  box-shadow: var(--v5-shadow-focus);
}
.v5-member-pass::before { background-image: url("/assets/v5/coffee-halftone.svg"); background-size: 112px 112px; opacity: 0.7; }
.v5-member-pass .pass-top > span:first-child { display: inline-flex; align-items: center; gap: 7px; font-size: 0.75rem; }
.v5-member-pass .pass-top .v5-mini-star { color: var(--v5-lime); }
.v5-member-pass .pass-identity { margin-top: 48px; }
.v5-member-pass .pass-identity p, .v5-member-pass .pass-balances span, .v5-member-pass .pass-disclosure { font-size: 0.75rem; }
.v5-member-pass .pass-disclosure { max-width: 52%; line-height: 1.25; }
.v5-member-pass .pass-identity h2 { font-size: 1.75rem; }
.v5-member-pass .pass-balances strong { font-size: 1.1rem; }
.v5-pass-since { position: absolute; right: 22px; bottom: 20px; color: #ead9cf; font-size: 0.6875rem; font-weight: 650; opacity: 0.74; }
.v4-pass-rings { top: 58px; right: -44px; }
.v4-pass-meta > div:first-child { font-size: 0.75rem; }
.v4-pass-meta p { font-size: 0.75rem; }
.v4-instruction { grid-template-columns: 104px minmax(0, 1fr); min-height: 170px; border-color: var(--v5-line); border-radius: var(--v5-radius-m); background: var(--v5-milk); box-shadow: var(--v5-shadow-flat); }
.v4-scan-symbol { background: #d8c4b7; }
.v4-scan-symbol span { font-size: 0.75rem; }
.inline-actions { gap: 10px; }

.v5-reward-head { align-items: center; padding: 9px 3px 0; }
.v5-reward-head h1 { margin: 0; font-size: 2.125rem; }
.v5-reward-head p:last-child { max-width: 20ch; margin: 9px 0 0; font-size: 0.8125rem; }
.v5-points-orb { width: 86px; height: 86px; border: 1px solid rgb(29 24 21 / 8%); background: var(--v5-lime); box-shadow: var(--v5-shadow-lift), var(--v5-shadow-flat); }
.v5-points-orb strong { font-size: 1.35rem; }
.v5-points-orb span { font-size: 0.75rem; }
.v4-quest-strip { min-height: 116px; padding: 14px; border: 1px solid rgb(29 24 21 / 7%); border-radius: var(--v5-radius-m); background: var(--v5-butter); box-shadow: var(--v5-shadow-flat); }
.v4-quest-strip h2 { font-size: 1rem; }
.v4-quest-strip p { color: #51452f; font-size: 0.75rem; }
.v4-quest-strip .pill { background: rgb(255 253 248 / 60%); }

.reward-grid { gap: 10px; }
.v5-reward-card { grid-template-columns: 78px minmax(0, 1fr); min-height: 158px; border-color: var(--v5-line); border-radius: var(--v5-radius-m); background: var(--v5-milk); box-shadow: var(--v5-shadow-flat); }
.v5-reward-featured { grid-template-columns: 43% minmax(0, 1fr); min-height: 238px; border-radius: var(--v5-radius-l); }
.v5-reward-featured .v5-scene { min-height: 238px; }
.reward-monogram { background: #e1e9d5; color: var(--v5-espresso); }
.reward-copy { padding: 13px; }
.reward-copy h3 { font-size: 1rem; }
.reward-copy p { font-size: 0.8125rem; }
.reward-action strong { font-size: 0.75rem; }
.reward-action .button { min-width: 84px; }
.button:disabled { color: #625b56; background: #ddd6ce; opacity: 1; }
.owned-reward-list { border-top-color: var(--v5-line); }
.owned-reward { min-height: 74px; border-color: var(--v5-line); }
.owned-reward strong { font-size: 0.875rem; }
.owned-reward span { font-size: 0.75rem; }

.v5-profile-head {
  position: relative;
  grid-template-columns: 64px minmax(0, 1fr) 44px;
  min-height: 174px;
  padding: 22px 18px 42px;
  overflow: hidden;
  border-radius: var(--v5-radius-l);
  background: var(--v5-espresso) url("/assets/v5/coffee-halftone.svg");
  color: var(--v5-milk);
  box-shadow: var(--v5-shadow-focus);
}
.v5-profile-head::after { position: absolute; right: -34px; bottom: -60px; width: 148px; height: 148px; border: 1px solid rgb(255 255 255 / 12%); border-radius: 50%; content: ""; }
.v5-profile-head .profile-avatar { position: relative; width: 64px; height: 64px; background: var(--v5-lime); color: var(--v5-ink); }
.v5-profile-head .profile-avatar span { font-size: 1.35rem; font-weight: 750; }
.v5-profile-head .profile-avatar .v5-mini-star { position: absolute; right: -2px; bottom: 3px; color: var(--v5-clay); }
.v5-profile-head .eyebrow { color: var(--v5-lime); }
.v5-profile-head h1 { color: var(--v5-milk); font-size: 1.75rem; }
.v5-profile-head p:last-child { color: #e9ddd5; font-size: 0.75rem; }
.v5-profile-head .icon-button { border-color: rgb(255 255 255 / 14%); background: rgb(255 255 255 / 9%); color: var(--v5-milk); }
.v5-profile-wordmark { position: absolute; bottom: 17px; left: 18px; color: #d9c7bd; font-size: 0.6875rem; font-weight: 650; opacity: 0.8; }
.v4-profile-stats { padding: 16px 0; border-color: var(--v5-line); }
.v4-profile-stats div { border-color: var(--v5-line); }
.v4-profile-stats strong { font-size: 1.02rem; }
.v4-profile-stats span { color: var(--v5-muted); font-size: 0.75rem; }
.settings-list { display: grid; gap: 8px; overflow: visible; border: 0; }
.settings-row { min-height: 70px; padding: 11px 12px; border: 1px solid var(--v5-line); border-radius: var(--v5-radius-s); background: var(--v5-milk); box-shadow: var(--v5-shadow-flat); }
.settings-row:last-child { border-bottom: 1px solid var(--v5-line); }
.settings-row strong { font-size: 0.875rem; }
.settings-row small { color: var(--v5-muted); font-size: 0.75rem; }
.settings-row > .feather-icon:first-child { background: var(--v5-paper); }
.v4-profile-panels { gap: 8px; border: 0; }
.v4-profile-panels .editorial-card { padding: 16px; border: 1px solid var(--v5-line); border-radius: var(--v5-radius-s); background: var(--v5-milk); box-shadow: var(--v5-shadow-flat); }
.v4-profile-panels .editorial-card summary { min-height: 44px; font-size: 0.875rem; }

.secondary-header { min-height: 50px; }
.secondary-header h1 { font-size: 1.25rem; }
.secondary-intro, .editorial-hero, .detail-visual { border-radius: var(--v5-radius-l); box-shadow: var(--v5-shadow-flat); }
.editorial-card, .quest-detail, .inbox-item { border-color: var(--v5-line); border-radius: var(--v5-radius-m); background: var(--v5-milk); box-shadow: var(--v5-shadow-flat); }
.timeline small, .inbox-item span, .muted { font-size: 0.75rem; }

.button { min-height: 44px; border-radius: 999px; background: var(--v5-ink); color: var(--v5-milk); font-size: 0.8125rem; font-weight: 700; transition: transform 90ms ease-out, opacity 90ms ease-out; }
.button.secondary { border-color: var(--v5-line-strong); background: var(--v5-milk); color: var(--v5-ink); }
.text-action { min-height: 44px; color: var(--v5-roast); font-size: 0.8125rem; font-weight: 700; }
.destination-card, .settings-row, .v4-context-list button, .v4-wallet-pass, .filter-chip { transition: transform 90ms ease-out, opacity 90ms ease-out; }
.button:active, .destination-card:active, .settings-row:active, .v4-context-list button:active, .v4-wallet-pass:active, .filter-chip:active { transform: scale(0.985); }
.inline-status:not(:empty) { margin-top: 8px; padding: 9px 10px; border-radius: 10px; background: #e7f1dc; color: #294323; font-size: 0.75rem; }
.inline-status.error:not(:empty) { background: #f5dfd8; color: #6d2e20; }

.bottom-nav {
  right: max(12px, calc((100vw - 430px) / 2 + 12px));
  bottom: calc(10px + env(safe-area-inset-bottom));
  left: max(12px, calc((100vw - 430px) / 2 + 12px));
  max-width: 406px;
  padding: 5px;
  border: 1px solid rgb(255 255 255 / 9%);
  border-radius: 22px;
  background: rgb(29 24 21 / 97%);
  box-shadow: var(--v5-shadow-focus);
}
.bottom-nav button { min-height: 52px; border-radius: 17px; color: #cfc7c1; font-size: 0.75rem; transition: transform 120ms ease-out, opacity 120ms ease-out; }
.bottom-nav button[aria-current="page"] { background: var(--v5-lime); color: var(--v5-ink); }
.bottom-nav button[aria-current="page"] .feather-icon { transform: translateY(-1px); }

@media (max-width: 350px) {
  main { padding-right: 12px; padding-left: 12px; }
  .v5-member-wallet { min-height: 210px; padding: 17px; }
  .v5-wallet-balance strong { font-size: 3.1rem; }
  .v5-context-grid { grid-template-columns: 1fr; }
  .v5-context-grid button { min-height: 112px; }
  .v5-tenant-featured, .v5-reward-featured { grid-template-columns: 40% minmax(0, 1fr); }
  .v5-reward-head { grid-template-columns: minmax(0, 1fr) 76px; }
  .v5-points-orb { width: 76px; height: 76px; }
}

@media (min-width: 700px) {
  body, .topbar, .scale-context, main { width: 430px; }
}

@media (prefers-reduced-motion: reduce) {
  .progress span { animation: none; }
  .button, .destination-card, .settings-row, .v4-context-list button, .v4-wallet-pass, .filter-chip, .bottom-nav button { transition: none; }
}

@media (forced-colors: active) {
  .v5-member-wallet, .v5-scene, .v5-member-pass, .v4-quest-strip, .v5-points-orb, .v5-profile-head { border: 1px solid CanvasText; background: Canvas; color: CanvasText; }
}