body { min-height: 100vh; }
.app-shell { margin: 0 auto; max-width: calc(var(--s20) * 6); min-height: 100vh; padding-bottom: calc(var(--s20) + var(--s8)); }
.app-shell.focused { padding-bottom: var(--s8); }
.app-header {
  align-items: center;
  background: var(--paper);
  display: flex;
  gap: var(--s3);
  justify-content: space-between;
  padding: var(--s4);
  position: sticky;
  top: 0;
  z-index: 20;
}
.brand-logo { height: var(--s12); object-fit: contain; width: calc(var(--s20) * 1.25); }
.brand-logo.dark-logo { display: none; }
:root[data-theme="dark"] .brand-logo.light-logo { display: none; }
:root[data-theme="dark"] .brand-logo.dark-logo { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .brand-logo.light-logo { display: none; }
  :root:not([data-theme="light"]) .brand-logo.dark-logo { display: block; }
}
.screen { display: grid; gap: var(--s5); padding: var(--s3) var(--s4) var(--s10); }
.screen-title { font-size: var(--text-xl); }
.hero-title { font-size: var(--text-2xl); }
.welcome {
  align-content: space-between;
  background: var(--froyo);
  color: var(--app-on-brand);
  display: grid;
  margin-inline: auto;
  max-width: calc(var(--s20) * 6);
  min-height: 100vh;
  overflow: hidden;
  padding: var(--s8) var(--s6);
  position: relative;
}
.welcome > * { min-width: 0; }
.welcome::after {
  background: var(--glow-gradient);
  border-radius: var(--r-pill);
  content: '';
  filter: blur(var(--s8));
  height: calc(var(--s20) * 3);
  opacity: .65;
  position: absolute;
  right: calc(var(--s20) * -1);
  top: var(--s20);
  width: calc(var(--s20) * 3);
}
.welcome-logo { position: relative; width: calc(var(--s20) * 2); z-index: 1; }
.welcome-copy { display: grid; gap: var(--s4); position: relative; z-index: 1; }
.welcome-copy p { color: var(--app-on-brand); }
.onboarding-card { background: var(--surface); color: var(--ink); position: relative; z-index: 1; }
.bottom-nav {
  background: var(--surface-2);
  border: calc(var(--s1) / 4) solid var(--line);
  border-radius: var(--r-2xl);
  bottom: var(--s3);
  box-shadow: var(--shadow-lg);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  left: 50%;
  max-width: calc((var(--s20) * 6) - var(--s8));
  padding: var(--s2);
  position: fixed;
  transform: translateX(-50%);
  width: calc(100% - var(--s8));
  z-index: 30;
}
.bottom-nav a { border-radius: var(--r-lg); color: var(--faint); display: grid; font-size: var(--text-xs); gap: var(--s1); justify-items: center; padding: var(--s2); text-decoration: none; }
.bottom-nav a.active { background: var(--green-100); color: var(--froyo); font-weight: 700; }
.nav-icon { font-size: var(--text-md); }
.greeting { align-items: center; display: flex; gap: var(--s3); }
.avatar { background: var(--glow-gradient); border-radius: var(--r-pill); display: grid; height: var(--s12); place-items: center; width: var(--s12); }
.stats { display: grid; gap: var(--s3); grid-template-columns: repeat(2, 1fr); }
.stat { background: var(--green-100); border-radius: var(--r-lg); color: var(--froyo); padding: var(--s4); }
.stat.coral { background: var(--coral-100); color: var(--app-coral-ink); }
.stat strong { display: block; font-family: var(--font-display); font-size: var(--text-xl); line-height: var(--leading-tight); }
.meter-card { background: var(--surface-2); display: grid; justify-items: center; text-align: center; }
.meter {
  --progress: 75;
  background: conic-gradient(var(--glow-from) 0%, var(--glow-mid) 35%, var(--glow-to) calc(var(--progress) * 1%), var(--line) calc(var(--progress) * 1%) 100%);
  border-radius: 50%;
  display: grid;
  height: calc(var(--s20) * 2);
  place-items: center;
  width: calc(var(--s20) * 2);
}
.meter-core { background: var(--surface-2); border-radius: 50%; box-shadow: var(--shadow-md); display: grid; height: calc(100% - var(--s6)); place-content: center; width: calc(100% - var(--s6)); }
.meter-core strong { font-family: var(--font-display); font-size: var(--text-xl); }
.quick-grid { display: grid; gap: var(--s3); grid-template-columns: repeat(2, 1fr); }
.quick-card { color: var(--app-on-brand); display: grid; gap: var(--s2); min-height: var(--s20); text-decoration: none; }
.quick-card.green { background: var(--froyo); }
.quick-card.coral { background: var(--coral); }
.quick-card.glow { background: var(--glow-gradient); grid-column: 1 / -1; }
.link-grid { display: grid; gap: var(--s3); grid-template-columns: repeat(2, 1fr); }
.mini-link { display: grid; gap: var(--s1); min-height: var(--s20); text-decoration: none; }
.glow-panel { background: var(--glow-gradient-soft); border-color: var(--glow-mid); color: var(--ink); }
.featured-outline { border-color: var(--coral); }
.passport-grid { display: grid; gap: var(--s3); grid-template-columns: repeat(2, 1fr); }
.stamp { align-content: space-between; display: grid; gap: var(--s4); min-height: var(--s20); }
.stamp.visited { background: var(--green-100); border-color: var(--froyo); color: var(--froyo); }
.list { display: grid; gap: var(--s3); }
.list-card { align-items: center; display: grid; gap: var(--s3); grid-template-columns: 1fr auto; text-decoration: none; }
.brand-grid { display: grid; gap: var(--s3); grid-template-columns: repeat(2, 1fr); }
.brand-card { cursor: pointer; display: grid; gap: var(--s2); min-height: var(--s20); text-align: left; }
.brand-card.active { background: var(--green-100); border-color: var(--froyo); color: var(--froyo); }
.product-card { cursor: pointer; }
.price { color: var(--froyo); font-weight: 700; }
.choice-grid { display: flex; flex-wrap: wrap; gap: var(--s2); }
.choice { background: var(--surface-2); border: calc(var(--s1) / 4) solid var(--line); border-radius: var(--r-pill); color: var(--ink); cursor: pointer; max-width: 100%; padding: var(--s2) var(--s4); white-space: normal; }
.choice.selected { background: var(--green-100); border-color: var(--froyo); color: var(--froyo); font-weight: 700; }
.choice.premium.selected { background: var(--coral-100); border-color: var(--coral); color: var(--app-coral-ink); }
.choice .check { margin-right: var(--s1); }
.cart-row { align-items: start; display: grid; gap: var(--s3); grid-template-columns: 1fr auto; }
.list-card > span:first-child { display: grid; gap: var(--s1); }
.progress { background: var(--green-100); border-radius: var(--r-pill); height: var(--s2); overflow: hidden; }
.progress span { background: var(--froyo); border-radius: inherit; display: block; height: 100%; }
.mission.featured { background: var(--coral); border-color: transparent; color: var(--app-on-brand); }
.mission.featured .muted { color: var(--app-on-brand); }
.mission.featured .pill.coral { background: var(--coral-700); color: var(--app-on-brand); }
.reward-card.locked { border-style: dashed; }
.tier-card { color: var(--app-on-brand); overflow: hidden; position: relative; }
.tier-card.spark { background: linear-gradient(150deg, var(--tier-silver-a), var(--tier-silver-b)); color: var(--ink); }
.tier-card.radiant { background: linear-gradient(150deg, var(--tier-gold-a), var(--tier-gold-b)); }
.tier-card.aura { background: linear-gradient(150deg, var(--tier-plat-a), var(--tier-plat-b)); }
.tier-card.current { box-shadow: var(--glow-magenta); }
.qr { background: var(--surface-2); border: var(--s3) solid var(--ink); display: grid; gap: var(--s2); grid-template-columns: repeat(7, 1fr); padding: var(--s2); width: calc(var(--s20) * 2); }
.qr i { aspect-ratio: 1; background: var(--ink); }
.qr i.off { background: var(--surface-2); }
.success-mark { background: var(--success); border-radius: var(--r-pill); color: var(--app-on-brand); display: grid; font-size: var(--text-xl); height: var(--s16); margin: 0 auto; place-items: center; width: var(--s16); }
.section-link { color: var(--froyo); font-size: var(--text-sm); font-weight: 700; text-decoration: none; }
.sticky-cta { bottom: var(--s4); position: sticky; z-index: 15; }
.sticky-cta:disabled { position: static; }
@media (min-width: 40rem) {
  .app-shell { border-left: calc(var(--s1) / 4) solid var(--line); border-right: calc(var(--s1) / 4) solid var(--line); }
}