.app-shell { background: var(--brand-on-accent); }
.app-header { border-bottom: 2px solid var(--brand-gold); }
.app-content { background: var(--brand-on-accent); }
.fun-icon { width: 20px; height: 20px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; color: var(--brand-accent); }
.fun-icon svg { width: 100%; height: 100%; }
.section-underline { padding-bottom: 6px; }
.section-underline::after { width: 52px; background: var(--brand-accent-line); }
.photo-banner { position: relative; margin-bottom: 24px; border-radius: 6px; overflow: hidden; border-bottom: 4px solid var(--brand-gold); }
.photo-banner img { display: block; width: 100%; height: 144px; object-fit: cover; }
.photo-banner .photo-stamp { position: absolute; right: 12px; bottom: 12px; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; background: var(--brand-accent); border: 2px solid var(--brand-gold); border-radius: 50%; transform: rotate(8deg); }
.photo-stamp .fun-icon { color: var(--brand-on-accent); width: 22px; height: 22px; }
.welcome-panel { border-bottom: 4px solid var(--brand-gold); }
.welcome-spark { position: absolute; top: 26px; right: 22px; color: var(--brand-gold); transform: rotate(12deg); }
.welcome-spark .fun-icon { width: 30px; height: 30px; color: inherit; }
.stars-snapshot { background: var(--brand-gold-soft) !important; border-color: var(--brand-gold) !important; box-shadow: none !important; }
.stars-snapshot p:first-child { display: flex; align-items: center; gap: 6px; }
.getting-started { background: var(--brand-accent-soft); border-color: var(--brand-accent); }
.getting-started-title { font-family: 'Helvetica Welcome', sans-serif !important; font-size: 20px; font-weight: 700; font-synthesis: weight; }
.getting-started-steps { border-color: var(--brand-border); }
.getting-started-step { background: var(--brand-on-accent); border-left-color: var(--brand-gold); }
.getting-started-circle { display: flex; align-items: center; justify-content: center; border: none; border-radius: 6px; background: var(--brand-accent-soft); }
.getting-started-circle .fun-icon { width: 18px; height: 18px; }
.getting-started-step:nth-child(2) .getting-started-circle { background: var(--brand-gold-soft); }
.intro-resource { display: grid; grid-template-columns: 78px minmax(0, 1fr); gap: 12px; padding: 12px; border-color: var(--brand-border); border-left-color: var(--brand-accent); background: var(--brand-on-accent); box-shadow: var(--brand-play-shadow); }
.intro-resource:nth-child(even) { border-left-color: var(--brand-gold); }
.resource-photo { width: 78px; height: 100%; min-height: 84px; object-fit: cover; border-radius: 3px; }
.intro-resource h3 { line-height: 1.4; }
.brand-button { background: var(--brand-ink); color: var(--brand-on-accent); border: 1px solid var(--brand-ink); border-bottom: 3px solid var(--brand-gold); }
.brand-button:hover { background: var(--brand-accent); border-color: var(--brand-accent); border-bottom-color: var(--brand-gold); }
.ghost-button { border-color: var(--brand-gold); }
.shared-card { border-radius: 6px; border-color: var(--brand-border); box-shadow: var(--brand-play-shadow); }
.home-tabs { border-bottom-color: var(--brand-gold); }
.home-tabs button { display: flex; flex-direction: column; align-items: center; gap: 5px; padding-top: 8px; padding-bottom: 10px; }
.home-tabs button .fun-icon { width: 16px; height: 16px; color: inherit; }
.home-tabs button.is-selected { color: var(--brand-accent); background: var(--brand-accent-soft); }
.community-page .shared-card { background: var(--brand-on-accent); border-left-color: var(--brand-accent) !important; }
.community-page .shared-card:nth-child(even) { border-left-color: var(--brand-gold) !important; background: var(--brand-gold-soft); }
.group-avatar { background: var(--brand-accent-soft) !important; border-color: var(--brand-accent) !important; }
.group-avatar .fun-icon { width: 24px; height: 24px; }
.community-page .shared-card:nth-child(even) .group-avatar { background: var(--brand-gold-soft) !important; }
.community-page .shared-card button { border-bottom: 2px solid var(--brand-gold); }
.rewards-search { border: 1px solid var(--brand-gold); background: var(--brand-gold-soft); }
.rewards-search svg { color: var(--brand-accent); opacity: 1; }
.rewards-tools { gap: 4px; }
.rewards-page .rewards-tool { border-radius: 6px; }
.how-it-works ol { border: 0; padding: 0; background: transparent; gap: 22px; }
.how-step-number { border-radius: 6px; background: var(--brand-accent-soft); color: var(--brand-accent); position: relative; border-bottom: 3px solid var(--brand-gold); }
.how-step-number .fun-icon { width: 24px; height: 24px; }
.how-step-number small { position: absolute; top: -6px; right: -6px; width: 18px; height: 18px; font-size: 10px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--brand-ink); color: var(--brand-gold); }
.how-it-works li:nth-child(even) .how-step-number { background: var(--brand-gold-soft); }
.how-support { border-top: 4px solid var(--brand-accent); border-bottom: 3px solid var(--brand-gold); }
.brand-room > div:first-of-type { border-bottom: 4px solid var(--brand-accent); }
.brand-room > div:last-child { border-left: 3px solid var(--brand-gold); padding-left: 14px; }
.app-nav { border-top: 2px solid var(--brand-gold); }
.app-nav button[aria-current='page'] { background: var(--brand-accent-soft); border-radius: 6px; }
.app-nav button[aria-current='page'] svg { stroke: var(--brand-accent); }
.app-nav button[aria-current='page'] span { color: var(--brand-accent); }
.campaign-nav-icon { background: var(--brand-gold-soft); border: 1px solid var(--brand-gold); border-radius: 8px; }
@media (prefers-reduced-motion: reduce) { .hover-lift, .screen-enter, .progress-animate { animation: none; transition: none; } .hover-lift:hover { transform: none; } }