:root{
  --cream:#fbf4e8;
  --paper:#fffdf8;
  --green:#0f5b4c;
  --green2:#0a7660;
  --red:#b81922;
  --gold:#d89a2b;
  --ink:#14231f;
  --muted:#6f7b75;
  --line:rgba(20,35,31,.11);
  --shadow:0 22px 58px rgba(25,38,32,.12);
  --nav-h:76px;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{margin:0;min-height:100%;font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;background:var(--cream);color:var(--ink);-webkit-font-smoothing:antialiased}
body{overflow:hidden}
button,input{font:inherit}
button{cursor:pointer;border:0}
.club-shell{position:relative;min-height:100dvh;overflow:hidden;background:linear-gradient(180deg,#fff8eb,#f3ead9)}
.club-bg{position:fixed;inset:0;pointer-events:none;overflow:hidden;z-index:0;background:radial-gradient(circle at 10% 8%,rgba(15,91,76,.16),transparent 34%),radial-gradient(circle at 90% 18%,rgba(184,25,34,.11),transparent 30%),linear-gradient(180deg,#fff8ed,#f4ecdf)}
.club-bg span{position:absolute;width:42vw;height:42vw;min-width:240px;min-height:240px;border-radius:999px;filter:blur(30px);opacity:.52;animation:floaty 15s ease-in-out infinite alternate}
.club-bg span:nth-child(1){left:-10%;top:5%;background:rgba(15,91,76,.24)}
.club-bg span:nth-child(2){right:-12%;top:15%;background:rgba(184,25,34,.16);animation-duration:18s}
.club-bg span:nth-child(3){left:26%;bottom:-16%;background:rgba(216,154,43,.18);animation-duration:20s}
@keyframes floaty{from{transform:translate3d(0,0,0) scale(1)}to{transform:translate3d(22px,-24px,0) scale(1.08)}}
.auth-screen,.app-screen{position:relative;z-index:1;min-height:100dvh;overflow:hidden}
.auth-screen{display:grid;place-items:center;padding:max(18px,env(safe-area-inset-top)) 18px max(18px,env(safe-area-inset-bottom))}
.auth-card{width:min(440px,100%);padding:22px;border-radius:32px;background:rgba(255,253,248,.86);border:1px solid rgba(255,255,255,.82);box-shadow:var(--shadow);backdrop-filter:blur(18px) saturate(1.18);-webkit-backdrop-filter:blur(18px) saturate(1.18)}
.brand-lockup{display:flex;align-items:center;gap:12px;margin-bottom:18px}.brand-logo{width:60px;height:60px;border-radius:20px;object-fit:contain;background:#fff;box-shadow:0 12px 26px rgba(15,91,76,.16)}
.brand-lockup p{margin:0;color:var(--muted);font-size:12px;font-weight:900;text-transform:uppercase;letter-spacing:.08em}.brand-lockup strong{display:block;font-size:24px;letter-spacing:-.04em}
.auth-card h1{margin:0;font-size:clamp(34px,9vw,48px);line-height:.93;letter-spacing:-.07em}.auth-lead{margin:12px 0 18px;color:#51625b;line-height:1.45;font-weight:700}
.auth-tabs{display:grid;grid-template-columns:1fr 1fr;padding:5px;border-radius:18px;background:#efe5d5;margin-bottom:14px}.auth-tabs button{border-radius:14px;padding:12px;font-weight:950;background:transparent;color:#5c6962}.auth-tabs button.active{background:#fff;box-shadow:0 8px 18px rgba(20,35,31,.08);color:var(--green)}
.auth-form{display:grid;gap:12px}.auth-form label{display:grid;gap:7px;color:#43524d;font-size:12px;font-weight:950;text-transform:uppercase;letter-spacing:.06em}.auth-form input{width:100%;border:1px solid var(--line);border-radius:18px;padding:15px 14px;background:#fffdf8;color:var(--ink);font-size:16px;font-weight:850;outline:none}.auth-form input:focus{border-color:rgba(15,91,76,.45);box-shadow:0 0 0 4px rgba(15,91,76,.10)}
.primary,.ghost,.danger-light{border-radius:18px;padding:14px 16px;font-weight:1000;letter-spacing:-.02em}.primary{background:linear-gradient(135deg,var(--green),#083b34);color:#fff;box-shadow:0 14px 30px rgba(15,91,76,.22)}.ghost{background:#fff;border:1px solid var(--line);color:var(--green)}.danger-light{background:#fff0ef;color:var(--red);border:1px solid rgba(184,25,34,.18)}.wide{width:100%}.status{min-height:20px;margin:0;color:var(--muted);font-size:13px;font-weight:800}.status[data-tone="bad"]{color:var(--red)}
.reward-preview{margin-top:16px;padding:14px;border:1px dashed rgba(15,91,76,.24);border-radius:20px;background:rgba(15,91,76,.07)}.reward-preview span{display:block;font-size:11px;text-transform:uppercase;letter-spacing:.12em;color:var(--green);font-weight:1000}.reward-preview strong{display:block;margin-top:4px}
.app-screen{height:100dvh;min-height:100dvh;display:flex;flex-direction:column;padding:max(10px,env(safe-area-inset-top)) 14px 0;overflow:hidden}.club-topbar{height:50px;flex:0 0 50px;display:flex;align-items:center;justify-content:space-between;gap:10px;position:relative;z-index:3;margin-bottom:8px}.mini-brand{display:flex;align-items:center;gap:10px;font-weight:1000}.mini-brand img{width:38px;height:38px;border-radius:14px;background:#fff;object-fit:contain;box-shadow:0 10px 22px rgba(15,91,76,.14)}.top-pill{padding:9px 13px;border-radius:999px;background:rgba(255,253,248,.82);border:1px solid rgba(255,255,255,.86);box-shadow:0 10px 24px rgba(25,38,32,.08);color:var(--green);font-weight:950}
.view{display:none;flex:1;min-height:0;overflow-y:auto;padding:4px 0 calc(var(--nav-h) + env(safe-area-inset-bottom) + 34px);-webkit-overflow-scrolling:touch;scrollbar-width:none;overscroll-behavior:contain}.view::-webkit-scrollbar{display:none}.view.active{display:block}.card,.hero-card,.page-hero,.member-pass{border:1px solid rgba(255,255,255,.82);background:rgba(255,253,248,.88);box-shadow:0 16px 38px rgba(25,38,32,.09);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-radius:28px}.hero-card{position:relative;overflow:hidden;display:flex;align-items:center;justify-content:space-between;gap:14px;padding:20px;margin-bottom:12px;color:#fff;background:linear-gradient(135deg,#0f5b4c,#0a3e36)}.hero-card:after{content:"";position:absolute;right:-40px;top:-70px;width:170px;height:170px;border-radius:999px;background:rgba(255,255,255,.10)}.hero-card h1{position:relative;margin:5px 0 8px;font-size:32px;line-height:.95;letter-spacing:-.06em}.eyebrow{margin:0;color:inherit;opacity:.72;font-size:11px;font-weight:1000;text-transform:uppercase;letter-spacing:.12em}.member-code{display:inline-flex;padding:8px 10px;border-radius:999px;background:rgba(255,255,255,.14);font-size:12px;font-weight:1000}.qr-button{width:70px;height:70px;border-radius:24px;background:#fff;display:grid;place-items:center;box-shadow:0 16px 30px rgba(0,0,0,.16);position:relative;z-index:2}.qr-button span{position:relative;width:46px;height:34px;border-radius:12px;background:linear-gradient(135deg,#0f5b4c,#0a7660);box-shadow:inset 0 0 0 2px rgba(255,255,255,.28)}.qr-button span:before{content:"";position:absolute;left:7px;right:7px;top:9px;height:4px;border-radius:999px;background:rgba(255,255,255,.86)}.qr-button span:after{content:"";position:absolute;left:7px;bottom:7px;width:16px;height:5px;border-radius:999px;background:rgba(255,255,255,.72)}.stats-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:12px}.stat-card{padding:18px;border-radius:24px;background:rgba(255,253,248,.88);box-shadow:0 12px 26px rgba(25,38,32,.07);border:1px solid rgba(255,255,255,.84)}.stat-card span{display:block;color:var(--muted);font-size:12px;font-weight:950;text-transform:uppercase;letter-spacing:.08em}.stat-card strong{display:block;margin-top:4px;font-size:36px;letter-spacing:-.06em;color:var(--green)}.stat-card small{display:block;color:#718079;font-weight:800}.stat-card.points strong{color:var(--green)}
.progress-card,.quick-info,.reward-card,.profile-card{padding:18px;margin-bottom:12px}.section-row{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}.section-row h2,.quick-info h2,.reward-card h2,.profile-card h2{margin:4px 0 0;font-size:22px;letter-spacing:-.04em}.reward-badge,.tag{display:inline-flex;align-items:center;white-space:nowrap;border-radius:999px;padding:8px 10px;background:rgba(15,91,76,.10);color:var(--green);font-size:12px;font-weight:1000}.progress-track{height:12px;border-radius:999px;background:#e9dfd0;overflow:hidden;margin:15px 0}.progress-track span{display:block;height:100%;width:0;border-radius:999px;background:linear-gradient(90deg,var(--green),var(--gold));transition:width .25s ease}.progress-card p,.reward-card p,.muted{color:#5d6b65;font-weight:750;line-height:1.45}.info-steps{display:grid;grid-template-columns:30px 1fr;gap:10px;align-items:start}.info-steps span{display:grid;place-items:center;width:30px;height:30px;border-radius:12px;background:#e8f3ef;color:var(--green);font-weight:1000}.info-steps p{margin:4px 0;color:#52625c;font-weight:800}.page-hero{padding:20px;margin-bottom:12px;background:linear-gradient(135deg,rgba(15,91,76,.95),rgba(8,59,52,.95));color:#fff}.page-hero h1{margin:4px 0;font-size:34px;letter-spacing:-.06em}.page-hero span{color:rgba(255,255,255,.76);font-weight:800}.reward-card.is-ready{border-color:rgba(216,154,43,.45);box-shadow:0 18px 42px rgba(216,154,43,.14)}.big-balance{font-size:22px}.big-balance strong{font-size:42px;color:var(--green);letter-spacing:-.06em}.history-list{display:grid;gap:10px}.history-row{display:grid;grid-template-columns:42px minmax(0,1fr) auto;align-items:center;gap:12px;padding:14px;border-radius:22px;background:rgba(255,253,248,.9);border:1px solid rgba(255,255,255,.85);box-shadow:0 10px 24px rgba(25,38,32,.06)}.history-row>span{display:grid;place-items:center;width:42px;height:42px;border-radius:16px;background:#e8f3ef;color:var(--green);font-weight:1000}.history-row.reward>span{background:#fff3dc;color:#9b660f}.history-row strong,.history-row small{display:block}.history-row small{color:var(--muted);font-weight:750;margin-top:3px}.history-row time{color:#82908a;font-size:12px;font-weight:900}.empty-card{padding:22px}.member-pass{margin:4px auto 12px;padding:22px;max-width:390px;background:linear-gradient(180deg,#fffdf8,#f7eddd)}.pass-top{display:flex;align-items:center;gap:12px}.pass-top img{width:58px;height:58px;border-radius:20px;background:#fff;object-fit:contain}.pass-top p{margin:0;color:var(--muted);font-size:12px;font-weight:1000;text-transform:uppercase;letter-spacing:.1em}.pass-top h1{margin:2px 0 0;font-size:30px;letter-spacing:-.06em}.qr-frame{width:min(260px,72vw);height:min(260px,72vw);margin:24px auto 14px;padding:14px;border-radius:26px;background:#fff;display:grid;grid-template-columns:repeat(11,1fr);grid-template-rows:repeat(11,1fr);gap:4px;box-shadow:inset 0 0 0 1px rgba(20,35,31,.08)}.qr-frame i{border-radius:4px;background:#eef3ef}.qr-frame i.on{background:#0f5b4c}.member-pass>strong,.member-pass>span,.member-pass>small{display:block;text-align:center}.member-pass>strong{font-size:24px;letter-spacing:.06em}.member-pass>span{margin-top:4px;font-weight:1000}.member-pass>small{margin-top:7px;color:var(--muted);font-weight:800}.profile-card{display:grid;gap:12px}.profile-card div{display:flex;justify-content:space-between;gap:12px;padding:12px;border-radius:16px;background:#fff}.profile-card span{color:var(--muted);font-weight:900}.profile-card strong{text-align:right}.club-nav{position:fixed;left:12px;right:12px;bottom:max(10px,env(safe-area-inset-bottom));height:var(--nav-h);z-index:5;display:grid;grid-template-columns:repeat(4,1fr);gap:6px;padding:8px;border-radius:26px;background:rgba(255,253,248,.88);border:1px solid rgba(255,255,255,.86);box-shadow:0 18px 46px rgba(25,38,32,.14);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)}.club-nav button{border-radius:20px;background:transparent;color:#65736d;font-weight:1000;display:grid;place-items:center;gap:2px}.club-nav button span{font-size:18px}.club-nav button small{font-size:11px}.club-nav button.active{background:linear-gradient(135deg,var(--green),#083b34);color:#fff;box-shadow:0 10px 22px rgba(15,91,76,.22)}
@media (min-width:760px){body{overflow:auto}.club-shell{overflow:auto}.auth-card{width:480px}.app-screen{max-width:520px;margin:auto;height:100dvh}.club-nav{left:50%;right:auto;width:496px;transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.club-bg span{animation:none}}

/* HOP Club flexible rewards v124 */
.next-reward-card{position:relative;overflow:hidden;padding-top:92px}
.next-reward-card .reward-photo.small{position:absolute;right:18px;top:16px;width:78px;height:64px;border-radius:24px}
.reward-photo{position:relative;overflow:hidden;display:grid;place-items:center;min-width:92px;width:92px;height:92px;border-radius:26px;background:linear-gradient(135deg,#e8f3ef,#fff);box-shadow:0 16px 32px rgba(25,38,32,.10);border:1px solid rgba(255,255,255,.9)}
.reward-photo:after{content:"";position:absolute;inset:auto -24px -32px auto;width:70px;height:70px;border-radius:999px;background:rgba(255,255,255,.4)}
.reward-photo img{width:100%;height:100%;object-fit:cover;position:relative;z-index:1}
.reward-photo span{position:relative;z-index:1;font-size:36px;color:var(--green);font-weight:1000}
.reward-photo.green{background:linear-gradient(135deg,#e2f4ed,#ffffff)}
.reward-photo.red{background:linear-gradient(135deg,#fff1ef,#ffffff)}
.reward-photo.gold{background:linear-gradient(135deg,#fff2d8,#ffffff)}
.reward-photo.blue{background:linear-gradient(135deg,#e8f1ff,#ffffff)}
.rewards-summary{padding:18px;margin-bottom:12px}
.reward-ladder{display:grid;gap:12px;padding-bottom:8px}
.reward-stage-card{display:grid;grid-template-columns:auto minmax(0,1fr);gap:14px;align-items:stretch;padding:14px;overflow:hidden}
.reward-stage-card.is-unlocked{border-color:rgba(15,91,76,.34);box-shadow:0 18px 42px rgba(15,91,76,.13)}
.reward-stage-card.red.is-unlocked{border-color:rgba(184,25,34,.24)}
.reward-stage-card.gold.is-unlocked{border-color:rgba(216,154,43,.34)}
.reward-stage-body{min-width:0}.reward-stage-top{display:flex;align-items:center;justify-content:space-between;gap:8px}.reward-stage-top em{font-style:normal;border-radius:999px;padding:7px 9px;background:rgba(15,91,76,.08);color:var(--green);font-size:11px;font-weight:1000;text-transform:uppercase;letter-spacing:.08em;white-space:nowrap}
.reward-stage-card h2{margin:8px 0 5px;font-size:22px;letter-spacing:-.045em;line-height:1.02}.reward-stage-card p{margin:0;color:#5d6b65;font-weight:750;line-height:1.35}.reward-stage-card .progress-track{height:10px;margin:12px 0 8px}.reward-status{display:inline-flex;border-radius:999px;padding:7px 9px;background:#f0eadf;color:#61716b;font-size:12px;font-weight:1000}.reward-status.ready{background:#e4f3ec;color:var(--green)}
@media(max-width:390px){.reward-stage-card{grid-template-columns:1fr}.reward-photo{width:100%;height:130px}.next-reward-card{padding-top:18px}.next-reward-card .reward-photo.small{position:relative;right:auto;top:auto;width:100%;height:110px;margin-bottom:12px}}

.qr-frame img{display:block;width:100%;height:100%;object-fit:contain;border-radius:12px}.club-notice{display:grid;grid-template-columns:36px 1fr auto;gap:10px;align-items:start;padding:12px 0;border-bottom:1px solid #eee4d8}.club-notice:last-child{border-bottom:0}.club-notice>span{display:grid;place-items:center;width:34px;height:34px;border-radius:12px;background:#e5f1eb;color:#0f5b4c;font-weight:900}.club-notice strong,.club-notice small{display:block}.club-notice small{color:#6e7972;margin-top:3px;line-height:1.35}.club-notice time{font-size:12px;color:#8b8f89}


/* HOP Club customer push controls */
.push-setting{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px;border:1px solid rgba(15,91,76,.16);border-radius:16px;background:rgba(239,247,242,.8)}
.push-setting>div{display:grid;gap:4px}.push-setting span{font-size:.78rem;color:#66756f}.push-setting strong{font-size:.9rem;color:#123f35}.push-setting .primary{width:auto;min-width:88px;padding:10px 14px}.push-help{margin:0;text-align:center;font-size:.78rem;line-height:1.4}


/* v131: resilient member QR */
.qr-frame.qr-failed{position:relative;display:grid;place-items:center;padding:24px;background:linear-gradient(145deg,#fffdf8,#eef5f1);border:2px dashed rgba(15,91,76,.28)}
.qr-frame.qr-failed img{display:none}
.qr-frame.qr-failed:before{content:'QR temporarily unavailable';color:#0f5b4c;font-weight:1000;font-size:18px;text-align:center}
.qr-frame.qr-failed:after{content:attr(data-code);display:block;margin-top:10px;padding:10px 14px;border-radius:999px;background:#e5f1eb;color:#0f5b4c;font-weight:1000;letter-spacing:.06em;text-align:center}


/* HOP Club premium digital membership card */
.premium-pass{position:relative;overflow:hidden;margin:4px auto 14px;max-width:410px;padding:22px;border-radius:34px;color:#fff;background:linear-gradient(145deg,#0c4f43 0%,#07382f 64%,#092f29 100%);border:1px solid rgba(255,255,255,.22);box-shadow:0 28px 70px rgba(16,47,40,.28),inset 0 1px 0 rgba(255,255,255,.20)}
.premium-pass[data-tier="bronze"]{background:linear-gradient(145deg,#78543d,#4b3427 68%,#2f241e)}
.premium-pass[data-tier="silver"]{background:linear-gradient(145deg,#57696a,#324646 68%,#223433)}
.premium-pass[data-tier="gold"]{background:linear-gradient(145deg,#8b6a24,#5f4616 68%,#3d2e11)}
.premium-pass[data-tier="vip"]{background:linear-gradient(145deg,#18251f,#071d18 62%,#040f0d)}
.premium-pass-glow{position:absolute;inset:-40%;background:radial-gradient(circle at 82% 18%,rgba(255,255,255,.22),transparent 24%),radial-gradient(circle at 10% 92%,rgba(216,154,43,.34),transparent 28%);pointer-events:none}
.premium-pass:after{content:"";position:absolute;right:-72px;top:-88px;width:240px;height:240px;border-radius:50%;border:1px solid rgba(255,255,255,.10);box-shadow:0 0 0 32px rgba(255,255,255,.035),0 0 0 66px rgba(255,255,255,.025)}
.premium-pass-head,.premium-member-copy,.premium-qr-shell,.premium-code-row,.premium-pass-stats,.scan-hint{position:relative;z-index:2}
.premium-pass-head{display:flex;align-items:center;justify-content:space-between;gap:14px}.premium-brand{display:flex;align-items:center;gap:11px}.premium-brand img{width:54px;height:54px;border-radius:18px;background:#fff;padding:3px;object-fit:contain;box-shadow:0 10px 22px rgba(0,0,0,.18)}.premium-brand p{margin:0;color:rgba(255,255,255,.64);font-size:10px;font-weight:1000;text-transform:uppercase;letter-spacing:.15em}.premium-brand strong{display:block;margin-top:2px;font-size:18px}.tier-badge{padding:9px 13px;border-radius:999px;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.18);font-size:12px;font-weight:1000;letter-spacing:.08em;text-transform:uppercase;backdrop-filter:blur(8px)}
.premium-member-copy{margin:24px 0 18px}.premium-member-copy p{margin:0;color:rgba(255,255,255,.66);font-size:11px;font-weight:1000;text-transform:uppercase;letter-spacing:.16em}.premium-member-copy h1{margin:4px 0 2px;font-size:38px;line-height:.96;letter-spacing:-.065em}.premium-member-copy span{color:rgba(255,255,255,.72);font-size:13px;font-weight:800}
.premium-qr-shell{width:min(292px,78vw);margin:0 auto 18px;padding:12px;border-radius:31px;background:linear-gradient(145deg,rgba(255,255,255,.99),rgba(246,241,231,.98));box-shadow:0 20px 42px rgba(0,0,0,.24),inset 0 0 0 1px rgba(13,50,42,.08)}
.premium-qr-shell .qr-frame{position:relative;width:100%;height:auto;aspect-ratio:1;margin:0;padding:12px;border-radius:22px;background:#fff;display:block;overflow:hidden;box-shadow:none}
.premium-qr-shell .qr-frame img{display:block;width:100%;height:100%;object-fit:contain;image-rendering:auto}
.premium-qr-shell .qr-frame.qr-failed{display:grid;place-items:center}.premium-qr-shell .qr-frame.qr-failed:after{content:attr(data-code);color:#0f5b4c;font-size:16px;font-weight:1000;letter-spacing:.08em;text-align:center;padding:16px}
.qr-logo{position:absolute;left:50%;top:50%;width:52px;height:52px;transform:translate(-50%,-50%);display:grid;place-items:center;border-radius:17px;background:#fff;box-shadow:0 8px 20px rgba(0,0,0,.20)}.qr-logo img{width:43px;height:43px;object-fit:contain}
.premium-code-row{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:12px 0 14px;border-bottom:1px solid rgba(255,255,255,.14)}.premium-code-row span{color:rgba(255,255,255,.58);font-size:10px;font-weight:1000;text-transform:uppercase;letter-spacing:.13em}.premium-code-row strong{font-size:17px;letter-spacing:.06em;text-align:right}
.premium-pass-stats{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:14px}.premium-pass-stats div{padding:13px 14px;border-radius:18px;background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.10)}.premium-pass-stats span{display:block;color:rgba(255,255,255,.58);font-size:10px;font-weight:1000;text-transform:uppercase;letter-spacing:.12em}.premium-pass-stats strong{display:block;margin-top:3px;font-size:23px}.scan-hint{margin:14px 2px 0;color:rgba(255,255,255,.70);font-size:12px;font-weight:750;line-height:1.4;text-align:center}
.wallet-style{max-width:410px;margin-left:auto;margin-right:auto}
@media(max-width:390px){.premium-pass{padding:18px;border-radius:30px}.premium-member-copy h1{font-size:34px}.premium-qr-shell{width:min(270px,76vw)}.premium-brand img{width:48px;height:48px}.premium-code-row{align-items:flex-start;flex-direction:column;gap:5px}.premium-code-row strong{text-align:left}}


/* HOP Club premium home v134 */
.premium-home-hero{min-height:196px;padding:24px 22px;align-items:flex-end;background:linear-gradient(145deg,#0b5d4c 0%,#08473c 58%,#06352f 100%);box-shadow:0 26px 58px rgba(8,61,51,.24),inset 0 1px 0 rgba(255,255,255,.18)}
.premium-home-hero:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 86% 16%,rgba(255,255,255,.18),transparent 27%),linear-gradient(115deg,transparent 52%,rgba(255,255,255,.05) 52% 72%,transparent 72%);pointer-events:none}
.premium-home-hero[data-tier="bronze"]{background:linear-gradient(145deg,#75503b,#4a3428 68%,#2f241f)}
.premium-home-hero[data-tier="silver"]{background:linear-gradient(145deg,#536a68,#304946 68%,#203632)}
.premium-home-hero[data-tier="gold"]{background:linear-gradient(145deg,#9a762b,#684c18 68%,#3f3012)}
.premium-home-hero[data-tier="vip"]{background:linear-gradient(145deg,#123d33,#071d18 62%,#030e0c)}
.hero-copy{position:relative;z-index:2;min-width:0;flex:1}.hero-tier-row{display:flex;align-items:center;justify-content:space-between;gap:10px}.home-tier-badge{padding:7px 10px;border-radius:999px;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.16);font-size:10px;font-weight:1000;text-transform:uppercase;letter-spacing:.12em}.premium-home-hero h1{font-size:42px;max-width:270px;margin:8px 0 14px}.hero-member-row{display:flex;align-items:center;gap:9px;flex-wrap:wrap}.hero-status{display:inline-flex;align-items:center;gap:6px;color:rgba(255,255,255,.72);font-size:11px;font-weight:900}.hero-status i{width:7px;height:7px;border-radius:999px;background:#7de2ad;box-shadow:0 0 0 4px rgba(125,226,173,.12)}
.premium-card-button{width:82px;height:92px;border-radius:28px;display:flex;flex-direction:column;gap:6px;align-items:center;justify-content:center}.premium-card-button small{font-size:10px;color:var(--green);font-weight:1000;text-transform:uppercase;letter-spacing:.08em}
.premium-balance-grid{gap:12px}.premium-balance-grid .stat-card{position:relative;overflow:hidden;padding:20px 18px;min-height:140px;background:linear-gradient(145deg,rgba(255,253,248,.96),rgba(249,244,235,.90));border:1px solid rgba(255,255,255,.92);box-shadow:0 18px 38px rgba(25,38,32,.09)}.premium-balance-grid .stat-card:after{content:"";position:absolute;right:-28px;bottom:-42px;width:104px;height:104px;border-radius:50%;background:rgba(15,91,76,.055)}.premium-balance-grid .stat-card strong{font-size:42px;margin-top:10px}.premium-balance-grid .stat-card small{margin-top:3px;font-size:11px;line-height:1.25}.premium-balance-grid .visits strong{color:#184f45}
.premium-reward-showcase{padding:0!important;overflow:hidden;background:rgba(255,253,248,.94)}.premium-reward-showcase .reward-photo.small{position:relative!important;right:auto!important;top:auto!important;width:100%!important;height:188px!important;margin:0!important;border-radius:0!important;box-shadow:none!important;border:0!important;background:#e8f2ed}.premium-reward-showcase .reward-photo.small img{object-fit:cover}.premium-reward-showcase .reward-photo.small:after{display:none}.reward-showcase-copy{padding:20px}.premium-reward-showcase .section-row h2{font-size:27px;line-height:1.02}.premium-reward-showcase .progress-track{height:10px}.reward-cta{display:flex;align-items:center;justify-content:space-between;padding-left:18px;padding-right:18px}.reward-cta b{display:grid;place-items:center;width:30px;height:30px;border-radius:999px;background:rgba(255,255,255,.16);font-size:16px}
.home-perks-section{margin:18px 0 14px}.home-section-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;margin:0 4px 10px}.home-section-heading h2{margin:3px 0 0;font-size:23px;letter-spacing:-.045em}.home-section-heading button{padding:8px 10px;border-radius:999px;background:rgba(255,253,248,.78);color:var(--green);font-size:11px;font-weight:1000}.home-reward-rail{display:flex;gap:11px;overflow-x:auto;padding:2px 2px 10px;scroll-snap-type:x mandatory;scrollbar-width:none}.home-reward-rail::-webkit-scrollbar{display:none}.mini-perk-card{flex:0 0 250px;scroll-snap-align:start;display:grid;grid-template-columns:76px minmax(0,1fr);gap:12px;align-items:center;padding:12px;border-radius:24px;text-align:left;background:rgba(255,253,248,.91);border:1px solid rgba(255,255,255,.92);box-shadow:0 14px 30px rgba(25,38,32,.08);color:var(--ink)}.mini-perk-card.is-ready{border-color:rgba(216,154,43,.38);box-shadow:0 14px 34px rgba(216,154,43,.13)}.mini-perk-image{display:grid;place-items:center;width:76px;height:76px;border-radius:20px;overflow:hidden;background:linear-gradient(145deg,#e5f2ed,#fff)}.mini-perk-image img{width:100%;height:100%;object-fit:cover}.mini-perk-image b{font-size:26px;color:var(--green)}.mini-perk-copy{min-width:0;display:grid;gap:3px}.mini-perk-copy small{color:var(--green);font-size:10px;font-weight:1000;text-transform:uppercase;letter-spacing:.08em}.mini-perk-copy strong{font-size:15px;line-height:1.08;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.mini-perk-copy em{font-style:normal;color:#728079;font-size:11px;font-weight:900}.mini-perk-card.is-ready .mini-perk-copy em{color:#a56d10}
.premium-updates{padding:18px;margin-bottom:12px}.premium-updates .club-notice{padding:11px 0}.premium-updates .club-notice:nth-of-type(n+3){display:none}
@media(max-width:390px){.premium-home-hero{min-height:180px;padding:20px 18px}.premium-home-hero h1{font-size:36px}.premium-card-button{width:70px;height:82px}.premium-balance-grid .stat-card{min-height:128px;padding:17px 15px}.premium-balance-grid .stat-card strong{font-size:37px}.premium-reward-showcase .reward-photo.small{height:158px!important}.mini-perk-card{flex-basis:228px}}

/* HOP Club bottom navigation premium polish v135 */
:root{--nav-h:82px;--nav-gap:18px;--nav-clearance:calc(var(--nav-h) + var(--nav-gap) + env(safe-area-inset-bottom) + 88px)}
.app-screen{background:transparent}
.view{
  padding-bottom:var(--nav-clearance)!important;
  scroll-padding-bottom:var(--nav-clearance);
  overscroll-behavior-y:contain;
}
.view::after{
  content:"";
  display:block;
  width:100%;
  height:72px;
  pointer-events:none;
}
.club-nav{
  bottom:max(12px,env(safe-area-inset-bottom));
  height:var(--nav-h);
  padding:8px 9px;
  border-radius:29px;
  background:rgba(255,253,248,.80);
  border:1px solid rgba(255,255,255,.94);
  box-shadow:0 24px 58px rgba(18,48,40,.20),0 8px 22px rgba(18,48,40,.10),inset 0 1px 0 rgba(255,255,255,.82);
  backdrop-filter:blur(24px) saturate(1.25);
  -webkit-backdrop-filter:blur(24px) saturate(1.25);
  isolation:isolate;
}
.club-nav::before{
  content:"";
  position:absolute;
  z-index:-1;
  left:-14px;
  right:-14px;
  top:-34px;
  bottom:calc(-18px - env(safe-area-inset-bottom));
  border-radius:40px;
  background:linear-gradient(180deg,rgba(251,247,238,0),rgba(251,247,238,.62) 38%,rgba(251,247,238,.92) 72%,rgba(251,247,238,.98));
  filter:blur(6px);
  pointer-events:none;
}
.club-nav button{
  transition:transform .18s ease,background-color .18s ease,color .18s ease,box-shadow .18s ease;
}
.club-nav button:active{transform:scale(.95)}
.club-nav button.active{
  transform:translateY(-3px);
  box-shadow:0 14px 28px rgba(15,91,76,.28),inset 0 1px 0 rgba(255,255,255,.18);
}
.club-nav button.active span{transform:scale(1.06)}
.club-nav button span{transition:transform .18s ease}
@media(max-width:390px){
  :root{--nav-h:78px;--nav-clearance:calc(var(--nav-h) + 16px + env(safe-area-inset-bottom) + 82px)}
  .club-nav{left:10px;right:10px;border-radius:27px}
  .view::after{height:64px}
}

/* HOP Club adaptive viewport shell v136
   Anchors the tab bar to the real device edge while keeping only the content area scrollable. */
:root{
  --club-nav-content-h:78px;
  --club-nav-total-h:calc(var(--club-nav-content-h) + env(safe-area-inset-bottom));
  --club-nav-content-gap:14px;
}
html,body,.club-shell{height:100%;height:100dvh;min-height:100dvh;max-height:100dvh;overflow:hidden}
.app-screen{
  width:100%;
  height:100%;
  height:100dvh;
  min-height:0;
  max-height:100dvh;
  overflow:hidden;
}
.view{
  flex:1 1 auto;
  min-height:0;
  overflow-y:auto;
  overflow-x:hidden;
  padding-bottom:calc(var(--club-nav-total-h) + var(--club-nav-content-gap))!important;
  scroll-padding-bottom:calc(var(--club-nav-total-h) + var(--club-nav-content-gap));
}
.view::after{display:none!important;height:0!important}
.club-nav{
  left:0;
  right:0;
  bottom:0;
  width:auto;
  height:var(--club-nav-total-h);
  min-height:var(--club-nav-total-h);
  padding:8px 12px calc(8px + env(safe-area-inset-bottom));
  border-left:0;
  border-right:0;
  border-bottom:0;
  border-radius:30px 30px 0 0;
  transform:none;
  box-shadow:0 -16px 42px rgba(18,48,40,.16),0 -4px 14px rgba(18,48,40,.08),inset 0 1px 0 rgba(255,255,255,.9);
}
.club-nav::before{
  left:0;
  right:0;
  top:-28px;
  bottom:0;
  border-radius:34px 34px 0 0;
  background:linear-gradient(180deg,rgba(251,247,238,0),rgba(251,247,238,.74) 52%,rgba(251,247,238,.98));
}
@media (min-width:760px){
  .app-screen{max-width:520px;margin:auto;height:100dvh;max-height:100dvh}
  .club-nav{left:50%;right:auto;width:520px;transform:translateX(-50%);border-left:1px solid rgba(255,255,255,.94);border-right:1px solid rgba(255,255,255,.94)}
}
@media(max-width:390px){
  :root{--club-nav-content-h:76px;--club-nav-content-gap:12px}
  .club-nav{left:0;right:0;border-radius:27px 27px 0 0;padding-left:9px;padding-right:9px}
}

/* HOP Club true-screen dock v137
   Uses a JS-synced visual viewport height so the nav occupies the real bottom
   of Safari/PWA screens without adding document height. */
:root{
  --hop-visual-height:100dvh;
  --club-dock-buttons-h:78px;
  --club-dock-h:calc(var(--club-dock-buttons-h) + env(safe-area-inset-bottom));
  --club-dock-clearance:calc(var(--club-dock-h) + 12px);
}
html,body,.club-shell{
  width:100%;
  height:var(--hop-visual-height)!important;
  min-height:var(--hop-visual-height)!important;
  max-height:var(--hop-visual-height)!important;
  overflow:hidden!important;
}
.app-screen{
  position:relative;
  height:var(--hop-visual-height)!important;
  min-height:0!important;
  max-height:var(--hop-visual-height)!important;
  padding-bottom:0!important;
  overflow:hidden!important;
}
.view{
  min-height:0!important;
  padding-bottom:var(--club-dock-clearance)!important;
  scroll-padding-bottom:var(--club-dock-clearance)!important;
}
.club-nav{
  position:absolute!important;
  z-index:20;
  left:0!important;
  right:0!important;
  bottom:0!important;
  width:100%!important;
  height:var(--club-dock-h)!important;
  min-height:var(--club-dock-h)!important;
  margin:0!important;
  transform:none!important;
  padding:8px 12px calc(7px + env(safe-area-inset-bottom))!important;
  border-radius:30px 30px 0 0!important;
  background:rgba(255,253,248,.90)!important;
  box-shadow:0 -18px 46px rgba(18,48,40,.15),0 -4px 14px rgba(18,48,40,.07),inset 0 1px 0 rgba(255,255,255,.95)!important;
  backdrop-filter:blur(26px) saturate(1.28)!important;
  -webkit-backdrop-filter:blur(26px) saturate(1.28)!important;
}
.club-nav::before{
  left:0!important;
  right:0!important;
  top:-24px!important;
  bottom:0!important;
  border-radius:34px 34px 0 0!important;
  background:linear-gradient(180deg,rgba(251,247,238,0),rgba(251,247,238,.54) 48%,rgba(251,247,238,.96) 78%)!important;
}
@media(min-width:760px){
  .app-screen{max-width:520px!important;margin:0 auto!important}
  .club-nav{left:0!important;right:0!important;width:100%!important;transform:none!important;border-left:1px solid rgba(255,255,255,.94)!important;border-right:1px solid rgba(255,255,255,.94)!important}
}
@media(max-width:390px){
  :root{--club-dock-buttons-h:76px;--club-dock-clearance:calc(var(--club-dock-h) + 10px)}
  .club-nav{padding-left:9px!important;padding-right:9px!important;border-radius:27px 27px 0 0!important}
}

/* HOP Club native app shell v138
   Same architecture as the Employee PWA: one device-height shell,
   one scrolling content row, and the navigation as the final row. */
:root{
  --club-native-nav-h:calc(78px + env(safe-area-inset-bottom));
}
html,
body{
  width:100%;
  height:100%;
  min-height:100%;
  max-height:100%;
  margin:0;
  overflow:hidden!important;
  overscroll-behavior:none;
}
.club-shell{
  width:100%;
  height:100%;
  min-height:0!important;
  max-height:100%;
  overflow:hidden!important;
}
.app-screen{
  box-sizing:border-box;
  width:100%;
  height:100%;
  min-height:0!important;
  max-height:100%;
  display:grid!important;
  grid-template-rows:50px minmax(0,1fr) auto;
  grid-template-columns:minmax(0,1fr);
  padding:max(10px,env(safe-area-inset-top)) 14px 0!important;
  overflow:hidden!important;
}
.club-topbar{
  grid-row:1;
  grid-column:1;
  height:50px;
  min-height:50px;
  margin:0!important;
  align-self:start;
}
.view{
  grid-row:2;
  grid-column:1;
  width:100%;
  height:100%;
  min-height:0!important;
  max-height:100%;
  overflow-x:hidden!important;
  overflow-y:auto!important;
  padding:8px 0 20px!important;
  scroll-padding-bottom:20px!important;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior-y:contain;
}
.view.active{display:block!important}
.club-nav{
  position:relative!important;
  grid-row:3;
  grid-column:1;
  align-self:end;
  left:auto!important;
  right:auto!important;
  bottom:auto!important;
  width:calc(100% + 28px)!important;
  height:var(--club-native-nav-h)!important;
  min-height:var(--club-native-nav-h)!important;
  margin:0 -14px!important;
  transform:none!important;
  flex-shrink:0;
  padding:8px 12px calc(7px + env(safe-area-inset-bottom))!important;
  border-radius:30px 30px 0 0!important;
  border-bottom:0!important;
  background:rgba(255,253,248,.93)!important;
  box-shadow:0 -18px 46px rgba(18,48,40,.15),0 -4px 14px rgba(18,48,40,.07),inset 0 1px 0 rgba(255,255,255,.96)!important;
  backdrop-filter:blur(26px) saturate(1.28)!important;
  -webkit-backdrop-filter:blur(26px) saturate(1.28)!important;
}
.club-nav::before{
  content:"";
  position:absolute;
  z-index:-1;
  pointer-events:none;
  left:0!important;
  right:0!important;
  top:-22px!important;
  bottom:0!important;
  border-radius:34px 34px 0 0!important;
  background:linear-gradient(180deg,rgba(251,247,238,0),rgba(251,247,238,.56) 48%,rgba(251,247,238,.97) 78%)!important;
}
@supports(height:100dvh){
  html,body,.club-shell,.app-screen{height:100dvh;max-height:100dvh}
}
@media(display-mode:standalone){
  .app-screen{height:100dvh;max-height:100dvh}
}
@media(min-width:760px){
  .app-screen{max-width:520px!important;margin:0 auto!important}
  .club-nav{left:auto!important;right:auto!important;width:calc(100% + 28px)!important;transform:none!important}
}
@media(max-width:390px){
  :root{--club-native-nav-h:calc(76px + env(safe-area-inset-bottom))}
  .club-nav{padding-left:9px!important;padding-right:9px!important;border-radius:27px 27px 0 0!important}
}

/* HOP Club Premium Journey Home v146 */
.home-greeting{padding:4px 10px 14px;display:grid;gap:2px;color:#123f35}.home-greeting p{margin:0;font-size:.88rem;font-weight:900;letter-spacing:.08em;text-transform:uppercase}.home-greeting h2{margin:0;font-size:clamp(1.5rem,6vw,2.15rem);line-height:1.05}.home-greeting small{font-size:.98rem;font-weight:700;color:#68766f}.premium-home-hero{margin-top:0}.stat-card small{min-height:2.2em;display:flex;align-items:flex-end}.journey-card{margin:18px 0;padding:18px;border-radius:30px;background:linear-gradient(145deg,#0b5143,#07372f);color:#fff;box-shadow:0 18px 34px rgba(11,61,51,.2);overflow:hidden;position:relative}.journey-card:after{content:"";position:absolute;width:230px;height:230px;border-radius:50%;right:-120px;top:-130px;background:rgba(255,255,255,.08)}.journey-heading{display:flex;align-items:center;justify-content:space-between;position:relative;z-index:1}.journey-heading .eyebrow{color:#d7eee7;margin:0}.journey-heading h2{margin:2px 0 0;font-size:1.35rem}.journey-heading button{border:0;background:transparent;color:#fff;font-weight:900;text-decoration:underline;font-size:.9rem}.journey-body{display:grid;grid-template-columns:84px minmax(0,1fr) 112px;gap:14px;align-items:center;margin-top:15px;position:relative;z-index:1}.journey-ring{--journey-progress:0deg;width:78px;height:78px;border-radius:50%;display:grid;place-items:center;background:conic-gradient(#d8b852 var(--journey-progress),rgba(255,255,255,.16) 0);position:relative}.journey-ring:before{content:"";position:absolute;inset:8px;border-radius:50%;background:#0b4a3d}.journey-ring span{position:relative;z-index:1;font-weight:900;font-size:.84rem;text-align:center}.journey-copy strong{display:block;font-size:1.08rem}.journey-copy p{margin:8px 0 0;color:#e3eee9;font-weight:700;line-height:1.35}.journey-track{height:8px;background:rgba(255,255,255,.17);border-radius:999px;overflow:hidden;margin-top:10px}.journey-track span{display:block;height:100%;width:0;background:linear-gradient(90deg,#55b58e,#d8b852);border-radius:inherit;transition:width .55s ease}.journey-reward{background:#fff;color:#123f35;border-radius:18px;padding:8px;display:grid;gap:3px;text-align:left;box-shadow:0 8px 18px rgba(0,0,0,.16)}.journey-reward img{width:100%;aspect-ratio:1.45/1;object-fit:cover;border-radius:12px}.journey-reward small{text-transform:uppercase;letter-spacing:.08em;font-size:.64rem;font-weight:900;color:#6c776f}.journey-reward strong{font-size:.82rem;line-height:1.12}.journey-reward.no-image:before{content:"★";height:62px;display:grid;place-items:center;border-radius:12px;background:#edf5f0;font-size:1.8rem;color:#bf9825}.help-link-card{width:100%;border:0;border-radius:24px;background:#fffdf8;padding:17px 18px;display:flex;align-items:center;justify-content:space-between;text-align:left;color:#123f35;box-shadow:0 10px 24px rgba(58,69,62,.1);margin:18px 0}.help-link-card span{display:grid;gap:3px}.help-link-card strong{font-size:1.04rem}.help-link-card small{font-size:.88rem;color:#68766f;font-weight:700}.help-link-card b{font-size:1.5rem}.club-notice>span{font-size:0}.club-notice>span:before{font-size:1.05rem}.club-notice:has(strong:first-child)>span:before{content:"+"}.club-notice span:before{content:"+"}.club-notice span:has(+ div strong):before{content:"+"}.home-reward-rail{scroll-padding-inline:12px}.mini-perk-card{min-width:78%;scroll-snap-align:start}.mini-perk-image{width:104px;height:104px}.mini-perk-copy strong{font-size:1rem}.premium-updates .club-notice{padding-block:14px}.premium-updates .club-notice>span{width:46px;height:46px;border-radius:15px;background:#e7f3ee;display:grid;place-items:center}.premium-updates .club-notice>span:before{content:"+";font-size:1.35rem;color:#0e6653;font-weight:900}.premium-updates .club-notice:has(strong:nth-child(1)){}@media(max-width:560px){.journey-body{grid-template-columns:72px minmax(0,1fr)}.journey-reward{grid-column:1/-1;grid-template-columns:78px 1fr;align-items:center}.journey-reward img,.journey-reward.no-image:before{grid-row:1/3;width:78px;height:62px}.journey-reward small,.journey-reward strong{grid-column:2}.home-greeting{padding-left:6px}.mini-perk-card{min-width:86%}}
@media(prefers-reduced-motion:reduce){.journey-track span{transition:none}}

/* v147 critical auth visibility fix
   Later app-shell rules use display:grid!important on .app-screen.
   Keep hidden screens truly hidden so the login screen is never covered. */
.auth-screen[hidden],
.app-screen[hidden],
section[hidden] {
  display: none !important;
}

/* HOP Club unified premium screen polish v148 */
:root{
  --club-radius-xl:30px;
  --club-radius-lg:24px;
  --club-radius-md:18px;
  --club-space:18px;
  --club-card-shadow:0 14px 34px rgba(24,45,38,.09);
  --club-soft-border:1px solid rgba(255,255,255,.88);
}

/* Keep every tab as one self-contained screen and animate only the active view. */
.app-screen{position:relative}
.view{
  position:relative;
  opacity:0;
  pointer-events:none;
  transform:translate3d(0,8px,0);
  transition:opacity .20s ease,transform .22s cubic-bezier(.22,.75,.25,1);
  will-change:transform,opacity;
}
.view.active{opacity:1;pointer-events:auto;transform:translate3d(0,0,0)}
.view-enter-forward{opacity:0!important;transform:translate3d(22px,0,0)!important}
.view-enter-backward{opacity:0!important;transform:translate3d(-22px,0,0)!important}
.view-leave-forward,.view-leave-backward{position:absolute!important;inset:50px 0 var(--club-native-nav-h) 0;z-index:0;opacity:0!important;pointer-events:none!important}
.view-leave-forward{transform:translate3d(-16px,0,0)!important}
.view-leave-backward{transform:translate3d(16px,0,0)!important}

/* Shared section rhythm */
.view > .page-hero,
.view > .card,
.view > .reward-ladder,
.view > .history-list,
.view > .premium-pass{
  margin-left:2px;
  margin-right:2px;
}
.page-hero{
  padding:20px 20px 18px;
  border-radius:var(--club-radius-xl);
  background:linear-gradient(145deg,#0d5b4b,#083a32);
  color:#fff;
  box-shadow:0 18px 40px rgba(9,67,56,.18);
  margin-bottom:14px;
  overflow:hidden;
  position:relative;
}
.page-hero:after{content:"";position:absolute;width:180px;height:180px;border-radius:50%;right:-80px;top:-105px;background:rgba(255,255,255,.09)}
.page-hero .eyebrow{color:#d9eee7;margin:0 0 5px}
.page-hero h1{margin:0;font-size:clamp(2rem,8vw,2.7rem);line-height:.98;letter-spacing:-.06em}
.page-hero span{display:block;margin-top:9px;color:rgba(255,255,255,.76);font-weight:750;line-height:1.35}

.card,.reward-stage-card,.history-row,.profile-card{
  border-radius:var(--club-radius-lg)!important;
  border:var(--club-soft-border);
  box-shadow:var(--club-card-shadow);
}

/* Rewards screen */
.rewards-summary{padding:18px 20px!important;margin-bottom:14px!important;background:rgba(255,253,248,.92)!important}
.rewards-summary h2{margin:0 0 6px;font-size:1.18rem}
.rewards-summary .big-balance{margin:0;display:flex;align-items:baseline;gap:7px}
.rewards-summary .big-balance strong{font-size:2.25rem;line-height:1;color:var(--green)}
.rewards-summary .muted{margin:8px 0 0;line-height:1.4}
.reward-ladder{display:grid;gap:14px;padding-bottom:10px}
.reward-stage-card{display:grid!important;grid-template-columns:112px minmax(0,1fr);gap:14px;padding:12px!important;background:rgba(255,253,248,.94)!important;overflow:hidden}
.reward-stage-card .reward-stage-image,.reward-stage-card>img{width:112px!important;height:112px!important;border-radius:20px!important;object-fit:cover!important}
.reward-stage-body{min-width:0;padding:3px 3px 3px 0}
.reward-stage-top{display:flex;align-items:center;justify-content:space-between;gap:8px}
.reward-stage-top .tag,.reward-stage-top em{font-size:.69rem!important;white-space:nowrap}
.reward-stage-body h2{font-size:1.17rem;line-height:1.08;margin:9px 0 5px}
.reward-stage-body p{margin:0;color:#68766f;line-height:1.35;font-weight:700;font-size:.88rem;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.reward-stage-body .progress-track{height:8px;margin:12px 0 8px}
.reward-status{display:inline-flex!important;width:auto!important;min-height:34px;padding:8px 11px!important;border-radius:999px!important;font-size:.77rem!important}

/* History screen */
.history-list{display:grid;gap:10px;padding-bottom:10px}
.history-row{display:grid!important;grid-template-columns:48px minmax(0,1fr) auto;align-items:center;gap:12px;padding:14px!important;background:rgba(255,253,248,.95)!important}
.history-row>span{width:48px!important;height:48px!important;border-radius:16px!important;display:grid!important;place-items:center!important;font-size:0!important;background:#e5f2ec!important;color:var(--green)!important}
.history-row>span:before{font-size:1.28rem;font-weight:1000}
.history-row.purchase>span:before{content:"+"}
.history-row.reward>span{background:#fff1d5!important;color:#b97700!important}
.history-row.reward>span:before{content:"★"}
.history-row div{min-width:0;display:grid;gap:3px}
.history-row strong{font-size:1rem;line-height:1.15}
.history-row small{font-size:.83rem;line-height:1.3;color:#6e7b75}
.history-row time{font-size:.75rem;color:#78847e;font-weight:850;white-space:nowrap;align-self:start;padding-top:3px}

/* Card screen */
.premium-pass{margin-top:2px!important}
.profile-card{margin-top:14px!important;padding:18px!important;background:rgba(255,253,248,.94)!important}
.profile-card>div{padding:13px 2px!important}
.push-setting{gap:12px}

/* Unified bottom navigation */
.club-nav button{min-width:0;gap:4px!important}
.club-nav .nav-icon{width:25px!important;height:25px!important;display:grid!important;place-items:center!important;font-size:0!important}
.club-nav .nav-icon svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.club-nav button small{font-size:.74rem!important;letter-spacing:-.01em}
.club-nav button.active .nav-icon{transform:translateY(-1px) scale(1.05)}

/* Stagger content very lightly after a tab opens. */
.view.active > *{animation:clubCardIn .28s cubic-bezier(.22,.75,.25,1) both}
.view.active > *:nth-child(2){animation-delay:.025s}
.view.active > *:nth-child(3){animation-delay:.05s}
.view.active > *:nth-child(4){animation-delay:.075s}
@keyframes clubCardIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

@media(max-width:410px){
  .page-hero{padding:18px;border-radius:27px}
  .reward-stage-card{grid-template-columns:96px minmax(0,1fr);gap:12px}
  .reward-stage-card .reward-stage-image,.reward-stage-card>img{width:96px!important;height:96px!important;border-radius:18px!important}
  .reward-stage-body h2{font-size:1.06rem}
  .history-row{grid-template-columns:44px minmax(0,1fr) auto;padding:12px!important}
  .history-row>span{width:44px!important;height:44px!important;border-radius:15px!important}
}
@media(prefers-reduced-motion:reduce){
  .view,.view.active>*{transition:none!important;animation:none!important}
}

/* v149 structural rebuild: true app shell + rebuilt bottom navigation */
:root{
  --hop-nav-height: 92px;
}

html,
body{
  width:100%;
  height:100%;
  min-height:100%;
  margin:0;
  overflow:hidden !important;
  overscroll-behavior:none;
}

.club-shell{
  width:100%;
  height:100dvh !important;
  min-height:100dvh !important;
  max-height:100dvh !important;
  overflow:hidden !important;
}

.app-screen{
  box-sizing:border-box;
  width:100%;
  height:100dvh !important;
  min-height:100dvh !important;
  max-height:100dvh !important;
  padding:max(10px,env(safe-area-inset-top)) 14px 0 !important;
  display:flex !important;
  flex-direction:column !important;
  overflow:hidden !important;
}

.app-screen[hidden]{display:none !important}

.club-topbar{
  flex:0 0 50px !important;
  height:50px !important;
  margin-bottom:8px !important;
}

.view{
  display:none !important;
  position:relative !important;
  inset:auto !important;
  flex:1 1 auto !important;
  min-height:0 !important;
  width:100%;
  overflow-x:hidden !important;
  overflow-y:auto !important;
  padding:4px 0 18px !important;
  opacity:1 !important;
  transform:none !important;
  pointer-events:auto !important;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior-y:contain;
  scrollbar-width:none;
}
.view::-webkit-scrollbar{display:none}
.view.active{display:block !important}
.view-leave-forward,
.view-leave-backward,
.view-enter-forward,
.view-enter-backward{
  position:relative !important;
  inset:auto !important;
  opacity:1 !important;
  transform:none !important;
}

.club-nav{
  position:relative !important;
  left:auto !important;
  right:auto !important;
  bottom:auto !important;
  transform:none !important;
  flex:0 0 auto !important;
  width:calc(100% + 28px) !important;
  height:auto !important;
  min-height:var(--hop-nav-height) !important;
  margin:0 -14px !important;
  padding:8px 14px calc(8px + env(safe-area-inset-bottom)) !important;
  box-sizing:border-box !important;
  border-radius:28px 28px 0 0 !important;
  border-left:0 !important;
  border-right:0 !important;
  border-bottom:0 !important;
  background:rgba(255,253,248,.96) !important;
  box-shadow:0 -16px 38px rgba(25,38,32,.13) !important;
  backdrop-filter:blur(22px) saturate(1.15) !important;
  -webkit-backdrop-filter:blur(22px) saturate(1.15) !important;
  z-index:20 !important;
}

.club-nav button{
  min-height:68px !important;
  padding:8px 4px !important;
  border-radius:22px !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:center !important;
  gap:5px !important;
}
.club-nav button.active{
  transform:none !important;
  box-shadow:0 10px 24px rgba(15,91,76,.22) !important;
}
.club-nav .nav-icon{
  width:27px !important;
  height:27px !important;
}
.club-nav .nav-icon svg{
  width:26px !important;
  height:26px !important;
}
.club-nav button small{
  font-size:.78rem !important;
  line-height:1 !important;
}

/* Rebuild the horizontal home reward cards so image and copy never overlap. */
.home-reward-rail{
  display:flex !important;
  gap:12px !important;
  overflow-x:auto !important;
  overflow-y:hidden !important;
  padding:3px 3px 12px !important;
  scroll-snap-type:x mandatory;
  scroll-padding-inline:3px !important;
}
.mini-perk-card{
  flex:0 0 min(88%, 360px) !important;
  min-width:0 !important;
  box-sizing:border-box !important;
  display:grid !important;
  grid-template-columns:108px minmax(0,1fr) !important;
  align-items:center !important;
  gap:14px !important;
  padding:12px !important;
  overflow:hidden !important;
}
.mini-perk-image{
  grid-column:1 !important;
  width:108px !important;
  height:108px !important;
  min-width:108px !important;
  border-radius:22px !important;
}
.mini-perk-copy{
  grid-column:2 !important;
  min-width:0 !important;
  width:100% !important;
  overflow:hidden !important;
}
.mini-perk-copy small,
.mini-perk-copy strong,
.mini-perk-copy em{
  position:static !important;
  display:block !important;
  max-width:100% !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
}
.mini-perk-copy strong{
  font-size:1.02rem !important;
  line-height:1.12 !important;
  -webkit-line-clamp:2 !important;
}

@media(max-width:390px){
  :root{--hop-nav-height:88px}
  .club-nav{padding-left:10px !important;padding-right:10px !important}
  .club-nav button{min-height:64px !important;border-radius:20px !important}
  .mini-perk-card{flex-basis:92% !important;grid-template-columns:94px minmax(0,1fr) !important;gap:12px !important}
  .mini-perk-image{width:94px !important;height:94px !important;min-width:94px !important;border-radius:19px !important}
}

@media(min-width:760px){
  body{overflow:hidden !important}
  .club-shell{overflow:hidden !important}
  .app-screen{max-width:520px !important;margin:0 auto !important}
  .club-nav{width:calc(100% + 28px) !important;left:auto !important;right:auto !important;transform:none !important}
}

@media(prefers-reduced-motion:reduce){
  .view,.view.active>*{transition:none !important;animation:none !important}
}

/* v150: hard viewport dock rebuild for installed iOS/Android PWAs.
   The whole signed-in app is pinned to the visual viewport. The middle row
   scrolls; the navigation is the final grid row and owns the safe area. */
.app-screen:not([hidden]){
  position:fixed !important;
  inset:0 !important;
  z-index:10 !important;
  width:auto !important;
  height:auto !important;
  min-height:0 !important;
  max-height:none !important;
  margin:0 !important;
  padding:max(10px,env(safe-area-inset-top)) 14px 0 !important;
  display:grid !important;
  grid-template-rows:50px minmax(0,1fr) auto !important;
  grid-template-columns:minmax(0,1fr) !important;
  overflow:hidden !important;
}

.app-screen:not([hidden]) > .club-bg{
  position:absolute !important;
  inset:0 !important;
}

.app-screen:not([hidden]) > .club-topbar{
  grid-row:1 !important;
  min-width:0 !important;
  height:50px !important;
  min-height:50px !important;
  margin:0 0 8px !important;
  align-self:start !important;
}

.app-screen:not([hidden]) > .view{
  grid-row:2 !important;
  min-width:0 !important;
  min-height:0 !important;
  height:auto !important;
  max-height:none !important;
  overflow-y:auto !important;
  overflow-x:hidden !important;
  padding:6px 0 22px !important;
  scroll-padding-bottom:22px !important;
}

.app-screen:not([hidden]) > .club-nav{
  grid-row:3 !important;
  align-self:end !important;
  position:relative !important;
  inset:auto !important;
  left:auto !important;
  right:auto !important;
  bottom:auto !important;
  transform:none !important;
  width:calc(100% + 28px) !important;
  min-width:0 !important;
  height:auto !important;
  min-height:0 !important;
  margin:0 -14px !important;
  padding:8px 14px max(8px,env(safe-area-inset-bottom)) !important;
  border-radius:28px 28px 0 0 !important;
  box-sizing:border-box !important;
}

@supports (height:100svh){
  .app-screen:not([hidden]){inset:0 !important;height:auto !important;min-height:0 !important;max-height:none !important}
}

@media(min-width:760px){
  .app-screen:not([hidden]){
    left:50% !important;
    right:auto !important;
    width:min(520px,100%) !important;
    transform:translateX(-50%) !important;
  }
  .app-screen:not([hidden]) > .club-nav{width:calc(100% + 28px) !important}
}

/* v151 — Premium living HOP Club visual layer
   Visual-only patch: no API, QR, points, reward, auth, or database logic changed. */
:root{
  --club-glass:rgba(255,253,246,.72);
  --club-glass-strong:rgba(255,253,246,.88);
  --club-glass-line:rgba(255,255,255,.72);
  --club-deep:#063b32;
  --club-mid:#0d6d59;
  --club-gold:#e4b356;
  --club-warm:#ef8a55;
  --club-shadow:0 22px 60px rgba(7,55,46,.16);
  --club-shadow-soft:0 12px 32px rgba(18,43,36,.10);
}

.club-shell{
  background:#eee4d1 !important;
}
.club-bg{
  background:
    radial-gradient(circle at 12% 8%,rgba(255,246,208,.95),transparent 31%),
    linear-gradient(145deg,#f5dfad 0%,#ed9e63 36%,#c7503b 64%,#0c654f 112%) !important;
  isolation:isolate;
}
.club-bg::before{
  content:"";
  position:absolute;
  inset:-24%;
  z-index:-1;
  background:
    radial-gradient(circle at 19% 35%,rgba(255,208,122,.92) 0 10%,transparent 30%),
    radial-gradient(circle at 72% 16%,rgba(255,246,221,.82) 0 9%,transparent 29%),
    radial-gradient(circle at 80% 75%,rgba(11,101,80,.82) 0 12%,transparent 34%),
    radial-gradient(circle at 35% 88%,rgba(175,45,43,.52) 0 8%,transparent 31%);
  filter:blur(42px) saturate(1.12);
  transform:translate3d(0,0,0) scale(1.08);
  animation:hopClubMesh 19s ease-in-out infinite alternate;
}
.club-bg::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:.105;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.92' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.52'/%3E%3C/svg%3E");
  mix-blend-mode:soft-light;
}
.club-bg span{
  filter:blur(68px) !important;
  opacity:.36 !important;
  will-change:transform;
}
.club-bg span:nth-child(1){background:#ffcd78 !important;animation-duration:17s !important}
.club-bg span:nth-child(2){background:#65ad98 !important;animation-duration:21s !important}
.club-bg span:nth-child(3){background:#b93836 !important;animation-duration:24s !important}
@keyframes hopClubMesh{
  0%{transform:translate3d(-2%,-1%,0) scale(1.08) rotate(-3deg)}
  52%{transform:translate3d(3%,2%,0) scale(1.15) rotate(2deg)}
  100%{transform:translate3d(-1%,4%,0) scale(1.12) rotate(-1deg)}
}

/* Glass surfaces */
.auth-card,
.card,
.stat-card,
.journey-card,
.mini-perk-card,
.help-link-card,
.history-row,
.profile-card,
.club-nav,
.top-pill{
  background:linear-gradient(135deg,rgba(255,255,255,.78),rgba(255,248,234,.52)) !important;
  border:1px solid var(--club-glass-line) !important;
  box-shadow:var(--club-shadow-soft),inset 0 1px 0 rgba(255,255,255,.78) !important;
  -webkit-backdrop-filter:blur(24px) saturate(1.22) !important;
  backdrop-filter:blur(24px) saturate(1.22) !important;
}
.auth-card{box-shadow:var(--club-shadow),inset 0 1px 0 rgba(255,255,255,.8) !important}

.premium-topbar{
  padding:5px 7px 5px 6px;
  border-radius:21px;
  background:linear-gradient(135deg,rgba(255,255,255,.70),rgba(255,248,235,.40));
  border:1px solid rgba(255,255,255,.66);
  box-shadow:0 12px 34px rgba(19,48,40,.11),inset 0 1px 0 rgba(255,255,255,.78);
  -webkit-backdrop-filter:blur(22px) saturate(1.18);
  backdrop-filter:blur(22px) saturate(1.18);
}
.mini-brand img{box-shadow:0 10px 24px rgba(8,67,55,.20) !important}
.top-pill{padding:9px 14px !important}

.home-greeting{padding:12px 4px 15px !important}
.home-greeting p{color:rgba(7,48,40,.67) !important}
.home-greeting h2{font-family:Georgia,"Times New Roman",serif;font-size:clamp(34px,10vw,48px) !important;font-weight:500 !important;letter-spacing:-.055em !important;line-height:.96 !important}
.home-greeting small{color:rgba(20,47,39,.68) !important}

.premium-home-hero,
.page-hero{
  background:
    radial-gradient(circle at 86% 12%,rgba(231,184,89,.33),transparent 31%),
    linear-gradient(140deg,#0c6a56 0%,#063f36 68%,#052e28 100%) !important;
  border:1px solid rgba(255,255,255,.20) !important;
  box-shadow:0 24px 54px rgba(5,52,43,.27),inset 0 1px 0 rgba(255,255,255,.16) !important;
}
.premium-home-hero::before,
.page-hero::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(115deg,rgba(255,255,255,.11),transparent 36%);
}
.premium-home-hero{border-radius:30px !important;padding:22px !important}
.home-tier-badge,
.hero-status,
.member-code{border:1px solid rgba(255,255,255,.15) !important;box-shadow:inset 0 1px 0 rgba(255,255,255,.10)}
.premium-card-button{transition:transform .22s ease,box-shadow .22s ease !important}
.premium-card-button:active{transform:scale(.95) !important}

.stat-card{border-radius:26px !important;padding:18px 17px !important;position:relative;overflow:hidden}
.stat-card::after{content:"";position:absolute;width:92px;height:92px;border-radius:50%;right:-36px;top:-42px;background:radial-gradient(circle,rgba(228,179,86,.18),transparent 68%)}
.stat-card strong{font-size:42px !important;line-height:1 !important}
.stat-card.points strong{background:linear-gradient(135deg,var(--green),#0b8067);-webkit-background-clip:text;background-clip:text;color:transparent !important}
.stat-card.visits strong{color:#9b5d19 !important}

.premium-reward-showcase{border-radius:30px !important;overflow:hidden;padding:14px !important;gap:15px !important}
.reward-photo.small{border-radius:23px !important;box-shadow:0 14px 28px rgba(18,43,36,.13)}
.progress-track,.journey-track{background:rgba(31,49,43,.10) !important;box-shadow:inset 0 1px 3px rgba(22,42,36,.12)}
.progress-track span,.journey-track span{background:linear-gradient(90deg,#0e755f,#e6b355,#ef8656) !important;box-shadow:0 0 18px rgba(228,179,86,.35)}
.reward-cta{background:linear-gradient(135deg,#0e705b,#063b32) !important;box-shadow:0 15px 30px rgba(7,64,53,.22) !important}

.journey-card{border-radius:30px !important}
.journey-ring{filter:drop-shadow(0 10px 18px rgba(10,96,77,.15))}
.journey-reward{background:linear-gradient(145deg,rgba(255,247,224,.88),rgba(255,255,255,.62)) !important;border:1px solid rgba(255,255,255,.72) !important}

.home-section-heading button,
.journey-heading button{background:rgba(255,255,255,.48) !important;border:1px solid rgba(255,255,255,.64) !important;box-shadow:0 8px 18px rgba(18,43,36,.07)}
.mini-perk-card{transition:transform .22s ease,box-shadow .22s ease !important}
.mini-perk-card:active{transform:scale(.985)}
.mini-perk-card.is-ready{box-shadow:0 18px 42px rgba(210,145,31,.18),inset 0 1px 0 rgba(255,255,255,.8) !important}
.mini-perk-image{box-shadow:0 12px 25px rgba(16,44,36,.12)}

.club-notifications,.help-link-card{border-radius:28px !important}
.help-link-card{transition:transform .2s ease !important}
.help-link-card:active{transform:scale(.985)}

/* Reward, history and member card views */
.page-hero{position:relative;overflow:hidden;border-radius:30px !important}
.rewards-summary{border-radius:28px !important}
.reward-stage-card{background:linear-gradient(135deg,rgba(255,255,255,.80),rgba(255,248,235,.55)) !important;border:1px solid rgba(255,255,255,.72) !important;box-shadow:var(--club-shadow-soft),inset 0 1px 0 rgba(255,255,255,.78) !important;-webkit-backdrop-filter:blur(22px) saturate(1.18);backdrop-filter:blur(22px) saturate(1.18)}
.reward-stage-card.is-ready{box-shadow:0 20px 48px rgba(210,145,31,.18),inset 0 1px 0 rgba(255,255,255,.82) !important}
.history-row{border-radius:24px !important}

.premium-pass{
  background:
    radial-gradient(circle at 88% 8%,rgba(232,188,93,.30),transparent 28%),
    linear-gradient(145deg,#0b6b57 0%,#063c33 62%,#062d27 100%) !important;
  border:1px solid rgba(255,255,255,.20) !important;
  box-shadow:0 28px 68px rgba(4,47,39,.31),inset 0 1px 0 rgba(255,255,255,.15) !important;
}
.premium-pass::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(115deg,rgba(255,255,255,.12),transparent 34%)}
.premium-qr-shell{box-shadow:0 20px 42px rgba(0,0,0,.21) !important}
.profile-card{border-radius:28px !important}

.primary,.secondary,.danger-light,.top-pill,.club-nav button{
  transition:transform .18s ease,box-shadow .18s ease,background .18s ease,opacity .18s ease !important;
}
.primary:active,.secondary:active,.danger-light:active,.top-pill:active{transform:scale(.975)}

/* Bottom navigation becomes a floating glass dock. */
.app-screen:not([hidden]) > .club-nav{
  margin:0 -7px max(7px,env(safe-area-inset-bottom)) !important;
  width:calc(100% + 14px) !important;
  padding:7px !important;
  border-radius:27px !important;
  background:linear-gradient(135deg,rgba(255,255,255,.82),rgba(255,248,235,.62)) !important;
  box-shadow:0 -4px 30px rgba(14,42,35,.10),0 18px 48px rgba(14,42,35,.15),inset 0 1px 0 rgba(255,255,255,.85) !important;
}
.club-nav button{min-height:62px !important;border-radius:20px !important;color:#61716a !important}
.club-nav button.active{background:linear-gradient(145deg,#0d705b,#073e34) !important;color:#fff !important;box-shadow:0 12px 26px rgba(8,73,59,.27) !important}
.club-nav button.active .nav-icon{filter:drop-shadow(0 3px 5px rgba(0,0,0,.16))}

@media(min-width:760px){
  .app-screen:not([hidden]){padding-left:16px !important;padding-right:16px !important}
  .app-screen:not([hidden]) > .club-nav{width:calc(100% + 14px) !important;margin-left:-7px !important;margin-right:-7px !important}
}
@media(max-width:390px){
  .premium-home-hero{padding:19px !important}
  .stat-card strong{font-size:38px !important}
  .app-screen:not([hidden]) > .club-nav{padding:6px !important}
  .club-nav button{min-height:59px !important}
}
@media(prefers-reduced-motion:reduce){
  .club-bg::before,.club-bg span{animation:none !important}
}

/* v157: preserve the requested 2px login-page bottom spacing only. */
.auth-screen{
  padding-bottom:2px !important;
}

/* v158 — native app interaction layer */
html,body{
  overscroll-behavior:none;
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
  -webkit-tap-highlight-color:transparent;
  touch-action:manipulation;
}
body.native-app-shell,
body.native-app-shell *{
  -webkit-user-select:none;
  user-select:none;
  -webkit-touch-callout:none;
}
body.native-app-shell input,
body.native-app-shell textarea,
body.native-app-shell [contenteditable="true"]{
  -webkit-user-select:text;
  user-select:text;
  -webkit-touch-callout:default;
}
body.native-app-shell img,
body.native-app-shell svg{
  -webkit-user-drag:none;
  user-drag:none;
  pointer-events:none;
}
body.native-app-shell button,
body.native-app-shell a,
body.native-app-shell input,
body.native-app-shell label,
body.native-app-shell [role="button"]{
  touch-action:manipulation;
}
body.native-app-shell button,
body.native-app-shell a{
  cursor:default;
}
body.native-app-shell button:focus,
body.native-app-shell a:focus{outline:none}
body.native-app-shell button:focus-visible,
body.native-app-shell a:focus-visible{outline:2px solid rgba(14,112,91,.55);outline-offset:2px}

/* React owns only this decorative native-motion layer; app data remains untouched. */
#reactNativeLayer{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
.react-native-orb{position:absolute;border-radius:999px;filter:blur(54px);opacity:.18;will-change:transform}
.react-native-orb.one{width:46vw;height:46vw;min-width:240px;min-height:240px;right:-18vw;top:8vh;background:#f4c169;animation:reactOrbOne 16s ease-in-out infinite alternate}
.react-native-orb.two{width:52vw;height:52vw;min-width:280px;min-height:280px;left:-22vw;bottom:4vh;background:#0b7b63;animation:reactOrbTwo 20s ease-in-out infinite alternate}
.react-native-sheen{position:absolute;inset:0;background:linear-gradient(115deg,transparent 20%,rgba(255,255,255,.08) 42%,transparent 65%);transform:translateX(-120%);animation:reactSheen 11s ease-in-out infinite}
@keyframes reactOrbOne{to{transform:translate3d(-11vw,13vh,0) scale(1.14)}}
@keyframes reactOrbTwo{to{transform:translate3d(15vw,-10vh,0) scale(.9)}}
@keyframes reactSheen{0%,72%{transform:translateX(-120%)}100%{transform:translateX(120%)}}

/* Native-feeling press feedback and screen transitions. */
.native-press{transition:transform .12s cubic-bezier(.2,.8,.2,1),filter .12s ease!important}
.native-press.is-pressed{transform:scale(.965)!important;filter:brightness(.97)}
.view.native-enter{animation:nativeViewEnter .28s cubic-bezier(.2,.8,.2,1) both}
@keyframes nativeViewEnter{from{opacity:.01;transform:translate3d(12px,0,0) scale(.992)}to{opacity:1;transform:none}}

/* Prevent rubber-band looking gaps inside the installed PWA. */
.club-shell,.auth-screen,.app-screen{overscroll-behavior-y:none}
.app-screen:not([hidden]){min-height:100dvh}

@media(prefers-reduced-motion:reduce){
  .react-native-orb,.react-native-sheen,.view.native-enter{animation:none!important}
}

/* v160 — authoritative adaptive dock.
   One definition only: compact hides labels, never destinations. */
.app-screen:not([hidden]) > .club-nav{
  position:fixed!important; left:14px!important; right:14px!important; bottom:2px!important;
  width:auto!important; height:82px!important; min-height:82px!important; transform:none!important;
  display:grid!important; grid-template-columns:repeat(4,minmax(0,1fr))!important; gap:6px!important;
  padding:8px!important; border-radius:28px!important; overflow:hidden!important;
  background:rgba(255,253,248,.92)!important; border:1px solid rgba(255,255,255,.92)!important;
  box-shadow:0 18px 46px rgba(25,38,32,.16)!important;
  -webkit-backdrop-filter:blur(22px) saturate(1.18)!important; backdrop-filter:blur(22px) saturate(1.18)!important;
  transition:height .24s ease,border-radius .24s ease,background .24s ease,box-shadow .24s ease!important;
}
.club-nav button{display:grid!important;place-items:center!important;gap:3px!important;min-width:0!important;min-height:64px!important;border-radius:20px!important;opacity:1!important;pointer-events:auto!important;transform:none!important;transition:background .2s ease,color .2s ease,transform .16s ease!important}
.club-nav button:active{transform:scale(.94)!important}
.club-nav button small{display:block!important;max-height:18px!important;opacity:1!important;overflow:hidden!important;transition:opacity .18s ease,max-height .18s ease!important}
.app-screen:not([hidden]) > .club-nav.is-compact{height:58px!important;min-height:58px!important;border-radius:24px!important;background:rgba(255,253,248,.86)!important;box-shadow:0 12px 32px rgba(25,38,32,.13)!important}
.club-nav.is-compact button{min-height:42px!important;border-radius:16px!important;display:grid!important;opacity:1!important;pointer-events:auto!important;width:auto!important}
.club-nav.is-compact button small{max-height:0!important;opacity:0!important}
.club-nav.is-compact .nav-icon{transform:none!important}
.club-nav.is-compact button.active{background:linear-gradient(135deg,var(--green),#083b34)!important;color:#fff!important}
@media(min-width:760px){.app-screen:not([hidden]) > .club-nav{left:50%!important;right:auto!important;width:496px!important;transform:translateX(-50%)!important}}
@media(prefers-reduced-motion:reduce){.app-screen:not([hidden]) > .club-nav,.club-nav button,.club-nav button small{transition:none!important}}

/* v162 — conservative visual polish. No business logic changes. */
:root{
  --v162-ink:#102d26;
  --v162-muted:#61736c;
  --v162-glass:rgba(255,252,246,.78);
  --v162-line:rgba(255,255,255,.82);
  --v162-shadow:0 18px 44px rgba(18,48,40,.13);
}

/* Slightly calmer background so the customer content remains dominant. */
.club-bg{filter:saturate(.88) brightness(1.025)}
.club-bg::before{opacity:.78}
.club-bg span{opacity:.54}

/* Header: tighter, clearer, and more app-like. */
.club-topbar.premium-topbar{
  min-height:64px!important;
  margin:0 0 18px!important;
  padding:7px 8px 7px 10px!important;
  border-radius:24px!important;
  background:linear-gradient(135deg,rgba(255,255,255,.80),rgba(255,249,239,.62))!important;
  border:1px solid var(--v162-line)!important;
  box-shadow:0 12px 34px rgba(21,49,41,.10),inset 0 1px 0 rgba(255,255,255,.88)!important;
  -webkit-backdrop-filter:blur(20px) saturate(1.12)!important;
  backdrop-filter:blur(20px) saturate(1.12)!important;
}
.mini-brand{gap:9px!important}
.mini-brand img{width:44px!important;height:44px!important;box-shadow:0 6px 16px rgba(20,50,41,.11)}
.mini-brand span{font-size:18px!important;letter-spacing:-.02em!important;color:var(--v162-ink)!important}
.top-pill{min-height:48px!important;padding:0 18px!important;border-radius:18px!important;font-size:15px!important;box-shadow:0 7px 18px rgba(18,48,40,.08)!important}

/* Greeting and hierarchy. */
.home-greeting{margin:0 9px 18px!important}
.home-greeting p{font-size:13px!important;letter-spacing:.13em!important;margin-bottom:3px!important}
.home-greeting h2{font-size:36px!important;line-height:1!important;letter-spacing:-.045em!important;margin:0 0 6px!important}
.home-greeting small{font-size:15px!important;line-height:1.35!important;color:var(--v162-muted)!important}

/* Member pass: crisper hierarchy and softer ornamentation. */
.premium-home-hero{
  min-height:230px!important;
  padding:24px!important;
  border-radius:30px!important;
  box-shadow:0 22px 50px rgba(4,52,43,.23),inset 0 1px 0 rgba(255,255,255,.15)!important;
}
.premium-home-hero::before{opacity:.68!important}
.hero-copy h1{font-size:45px!important;line-height:.98!important;letter-spacing:-.05em!important}
.hero-tier-row{align-items:center!important}
.home-tier-badge{padding:8px 14px!important;min-width:64px!important;text-align:center!important}
.member-code{padding:9px 14px!important;border-radius:999px!important}
.hero-status{margin-top:10px!important}
.premium-card-button{width:104px!important;height:118px!important;border-radius:27px!important;box-shadow:0 18px 34px rgba(0,0,0,.18)!important}

/* Stat cards: equal visual weight and cleaner number alignment. */
.premium-balance-grid{gap:12px!important;margin-top:14px!important}
.stat-card{
  min-height:164px!important;
  padding:20px 18px!important;
  border-radius:27px!important;
  background:linear-gradient(145deg,rgba(255,255,255,.82),rgba(255,249,239,.60))!important;
  border:1px solid var(--v162-line)!important;
  box-shadow:var(--v162-shadow),inset 0 1px 0 rgba(255,255,255,.88)!important;
}
.stat-card span{font-size:12px!important;letter-spacing:.12em!important}
.stat-card strong{font-size:47px!important;line-height:1!important;margin:16px 0 10px!important;letter-spacing:-.045em!important}
.stat-card small{font-size:13px!important;line-height:1.25!important;color:var(--v162-muted)!important}

/* Reward showcase: image and information read as a single native card. */
.premium-reward-showcase{
  margin-top:14px!important;
  padding:10px!important;
  border-radius:30px!important;
  background:linear-gradient(145deg,rgba(255,255,255,.80),rgba(255,248,235,.60))!important;
  border:1px solid var(--v162-line)!important;
  box-shadow:var(--v162-shadow),inset 0 1px 0 rgba(255,255,255,.86)!important;
}
.reward-photo.small{min-height:238px!important;border-radius:23px!important;overflow:hidden!important}
.reward-photo.small img{width:100%!important;height:100%!important;object-fit:cover!important;transform:scale(1.01)}
.reward-showcase-copy{padding:10px 10px 8px!important}
.reward-showcase-copy h2{font-size:30px!important;line-height:1.05!important;letter-spacing:-.035em!important}
.reward-badge{white-space:nowrap!important}

/* Keep enough scrolling room for the fixed dock without creating a visible blank panel. */
.app-screen:not([hidden]){padding-bottom:96px!important}

/* Native adaptive dock: cleaner dimensions and always one-tap accessible. */
.app-screen:not([hidden]) > .club-nav{
  left:12px!important;
  right:12px!important;
  bottom:2px!important;
  height:76px!important;
  min-height:76px!important;
  padding:7px!important;
  gap:5px!important;
  border-radius:27px!important;
  background:linear-gradient(135deg,rgba(255,255,255,.91),rgba(255,249,238,.82))!important;
  border:1px solid rgba(255,255,255,.94)!important;
  box-shadow:0 15px 42px rgba(16,42,35,.17),inset 0 1px 0 rgba(255,255,255,.94)!important;
  -webkit-backdrop-filter:blur(24px) saturate(1.14)!important;
  backdrop-filter:blur(24px) saturate(1.14)!important;
}
.club-nav button{
  min-height:60px!important;
  border-radius:19px!important;
  gap:2px!important;
  color:#687871!important;
}
.club-nav button small{font-size:12px!important;line-height:1!important;font-weight:800!important}
.club-nav .nav-icon{transition:transform .2s cubic-bezier(.2,.8,.2,1)!important}
.club-nav button.active{
  background:linear-gradient(145deg,#0d745e,#073e34)!important;
  box-shadow:0 10px 24px rgba(7,71,58,.25),inset 0 1px 0 rgba(255,255,255,.12)!important;
}
.club-nav button.active .nav-icon{transform:translateY(-1px) scale(1.03)!important}
.app-screen:not([hidden]) > .club-nav.is-compact{
  height:56px!important;
  min-height:56px!important;
  border-radius:22px!important;
  padding:6px!important;
}
.club-nav.is-compact button{min-height:44px!important;border-radius:15px!important}

/* Subtle page entry only; no observer or recursive class mutation. */
.view.native-enter{animation-duration:.22s!important}

@media(max-width:390px){
  .premium-home-hero{min-height:218px!important;padding:20px!important}
  .hero-copy h1{font-size:41px!important}
  .premium-card-button{width:96px!important;height:110px!important}
  .stat-card{min-height:154px!important;padding:18px 15px!important}
  .stat-card strong{font-size:42px!important}
  .reward-photo.small{min-height:218px!important}
}

@media(prefers-reduced-motion:reduce){
  .reward-photo.small img,.club-nav .nav-icon{transform:none!important}
}


/* v163 — Wallet hierarchy redesign.
   Purpose: one dominant membership pass, fewer floating cards, restrained corners,
   stronger typography, and a calmer native-app composition. No business logic changes. */
:root{
  --v163-bg:#f3efe6;
  --v163-surface:#fffdf8;
  --v163-ink:#102b24;
  --v163-muted:#68766f;
  --v163-line:rgba(21,47,39,.10);
  --v163-radius:18px;
  --v163-radius-small:13px;
  --v163-shadow:0 10px 26px rgba(17,42,34,.10);
}

/* The screen becomes one canvas rather than a stack of floating bubbles. */
.club-shell,
.app-screen{
  background:var(--v163-bg)!important;
}
.club-bg{
  background:
    radial-gradient(circle at 12% -4%,rgba(15,91,76,.12),transparent 34%),
    radial-gradient(circle at 105% 26%,rgba(211,155,56,.09),transparent 31%),
    linear-gradient(180deg,#f7f3eb 0%,#f0ebe1 100%)!important;
  filter:none!important;
}
.club-bg span{opacity:.20!important;filter:blur(52px)!important}
.club-bg span:nth-child(2){opacity:.10!important}

/* Header no longer looks like a separate floating card. */
.club-topbar.premium-topbar{
  min-height:54px!important;
  margin:0 2px 12px!important;
  padding:3px 2px!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
  -webkit-backdrop-filter:none!important;
  backdrop-filter:none!important;
}
.mini-brand img{width:38px!important;height:38px!important;border-radius:11px!important;box-shadow:0 5px 12px rgba(18,44,36,.10)!important}
.mini-brand span{font-size:17px!important;font-weight:850!important}
.top-pill{
  min-height:40px!important;
  padding:0 14px!important;
  border-radius:12px!important;
  background:rgba(255,253,248,.76)!important;
  border:1px solid var(--v163-line)!important;
  box-shadow:none!important;
}

/* Large edge-to-edge greeting; the pass carries the real visual weight. */
.home-greeting{margin:0 4px 15px!important;padding:0!important;gap:1px!important}
.home-greeting p{font-size:11px!important;letter-spacing:.14em!important;color:#5f7169!important}
.home-greeting h2{
  margin:1px 0 4px!important;
  font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif!important;
  font-size:35px!important;
  font-weight:800!important;
  line-height:1!important;
  letter-spacing:-.055em!important;
  color:var(--v163-ink)!important;
}
.home-greeting small{font-size:14px!important;color:var(--v163-muted)!important}

/* One Wallet-style pass now owns identity, points, visits and member-card access. */
.wallet-home-pass{
  display:block!important;
  min-height:0!important;
  margin:0 0 18px!important;
  padding:20px!important;
  border-radius:18px!important;
  border:1px solid rgba(255,255,255,.13)!important;
  background:
    linear-gradient(118deg,rgba(255,255,255,.055) 0 22%,transparent 22% 58%,rgba(255,255,255,.045) 58% 76%,transparent 76%),
    linear-gradient(145deg,#0d5b4b 0%,#073d34 58%,#052c27 100%)!important;
  box-shadow:0 16px 34px rgba(4,43,36,.22),inset 0 1px 0 rgba(255,255,255,.13)!important;
  color:#fff!important;
  overflow:hidden!important;
}
.wallet-home-pass::before{
  content:""!important;
  position:absolute!important;
  inset:auto -42px -74px auto!important;
  width:220px!important;
  height:220px!important;
  border-radius:50%!important;
  background:radial-gradient(circle,rgba(216,174,80,.18),transparent 67%)!important;
  opacity:1!important;
  pointer-events:none!important;
}
.wallet-home-pass::after{
  content:""!important;
  position:absolute!important;
  inset:0!important;
  border-radius:inherit!important;
  background:linear-gradient(105deg,transparent 0 45%,rgba(255,255,255,.045) 45% 46%,transparent 46% 100%)!important;
  pointer-events:none!important;
}
.wallet-pass-head,
.wallet-member-row,
.wallet-balance-row{position:relative;z-index:2}
.wallet-pass-head{display:flex;align-items:center;justify-content:space-between;gap:12px}
.wallet-brand{display:flex;align-items:center;gap:10px;min-width:0}
.wallet-brand img{width:34px;height:34px;border-radius:10px;background:#fff;object-fit:contain;box-shadow:0 5px 12px rgba(0,0,0,.15)}
.wallet-brand p{margin:0!important;color:rgba(255,255,255,.62)!important;opacity:1!important;font-size:9px!important;letter-spacing:.13em!important}
.wallet-brand strong{display:block;margin-top:1px;font-size:15px;letter-spacing:-.02em}
.home-tier-badge{
  padding:7px 10px!important;
  min-width:0!important;
  border-radius:10px!important;
  background:rgba(255,255,255,.10)!important;
  border:1px solid rgba(255,255,255,.13)!important;
  font-size:9px!important;
}
.wallet-member-row{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-top:25px}
.wallet-label{display:block;margin-bottom:3px;color:rgba(255,255,255,.56);font-size:10px;font-weight:900;text-transform:uppercase;letter-spacing:.13em}
.wallet-home-pass .hero-copy h1{
  max-width:245px!important;
  margin:0 0 11px!important;
  font-size:30px!important;
  line-height:1!important;
  font-weight:750!important;
  letter-spacing:-.045em!important;
}
.wallet-home-pass .member-code{
  padding:6px 9px!important;
  border-radius:8px!important;
  background:rgba(255,255,255,.09)!important;
  border:1px solid rgba(255,255,255,.11)!important;
  font-size:10px!important;
  letter-spacing:.04em!important;
}
.wallet-home-pass .hero-status{margin:0!important;font-size:10px!important}
.wallet-home-pass .hero-status i{width:6px!important;height:6px!important;box-shadow:0 0 0 3px rgba(125,226,173,.11)!important}
.wallet-home-pass .premium-card-button{
  flex:0 0 70px!important;
  width:70px!important;
  height:70px!important;
  border-radius:15px!important;
  background:rgba(255,255,255,.94)!important;
  box-shadow:0 10px 22px rgba(0,0,0,.18)!important;
}
.wallet-home-pass .premium-card-button span{width:38px!important;height:28px!important;border-radius:8px!important}
.wallet-home-pass .premium-card-button small{font-size:9px!important}
.wallet-balance-row{
  display:grid;
  grid-template-columns:minmax(0,1.5fr) minmax(108px,.7fr);
  gap:0;
  margin-top:22px;
  padding-top:18px;
  border-top:1px solid rgba(255,255,255,.13);
}
.wallet-primary-stat,
.wallet-secondary-stat{min-width:0}
.wallet-secondary-stat{padding-left:19px;border-left:1px solid rgba(255,255,255,.13)}
.wallet-primary-stat span,
.wallet-secondary-stat span{display:block;color:rgba(255,255,255,.58);font-size:9px;font-weight:900;text-transform:uppercase;letter-spacing:.12em}
.wallet-primary-stat strong,
.wallet-secondary-stat strong{display:block;color:#fff!important;line-height:.9;letter-spacing:-.065em}
.wallet-primary-stat strong{margin:9px 0 7px;font-size:64px;font-weight:770}
.wallet-secondary-stat strong{margin:13px 0 10px;font-size:37px;font-weight:730}
.wallet-primary-stat small,
.wallet-secondary-stat small{display:block;color:rgba(255,255,255,.57);font-size:10px;font-weight:700;line-height:1.25}

/* The duplicated journey block is removed from Home; the next-perk feature already owns that job. */
#homeView .journey-card{display:none!important}

/* Second focal point: editorial reward feature, not another oversized bubble. */
#homeView .premium-reward-showcase{
  display:grid!important;
  grid-template-columns:minmax(0,42%) minmax(0,58%)!important;
  align-items:stretch!important;
  margin:0 0 22px!important;
  padding:0!important;
  border-radius:16px!important;
  background:var(--v163-surface)!important;
  border:1px solid var(--v163-line)!important;
  box-shadow:var(--v163-shadow)!important;
  overflow:hidden!important;
}
#homeView .premium-reward-showcase .reward-photo.small{
  width:100%!important;
  height:auto!important;
  min-height:246px!important;
  border-radius:0!important;
  background:#e8eee9!important;
}
#homeView .reward-showcase-copy{display:flex!important;flex-direction:column!important;padding:18px 16px!important}
#homeView .reward-showcase-copy .section-row{display:block!important}
#homeView .reward-showcase-copy h2{margin-top:4px!important;font-size:25px!important;line-height:1.02!important}
#homeView .reward-badge{display:inline-flex!important;width:max-content!important;margin-top:10px!important;padding:6px 8px!important;border-radius:8px!important}
#homeView .progress-track{height:7px!important;margin:16px 0 10px!important}
#homeView .reward-showcase-copy>p{margin:0 0 16px!important;font-size:13px!important;line-height:1.4!important}
#homeView .reward-cta{margin-top:auto!important;min-height:44px!important;padding:9px 12px!important;border-radius:12px!important;box-shadow:none!important}
#homeView .reward-cta b{width:25px!important;height:25px!important}

/* Supporting content is flatter, tighter, and less toy-like. */
.home-perks-section{margin:4px 0 20px!important}
.home-section-heading{margin:0 2px 10px!important}
.home-section-heading h2{font-size:22px!important}
.home-section-heading button,
.journey-heading button{border-radius:9px!important;box-shadow:none!important}
.home-reward-rail{gap:9px!important;padding-bottom:7px!important}
.mini-perk-card{
  flex-basis:78%!important;
  min-width:78%!important;
  padding:10px!important;
  border-radius:14px!important;
  border:1px solid var(--v163-line)!important;
  background:rgba(255,253,248,.84)!important;
  box-shadow:0 7px 18px rgba(18,43,36,.075)!important;
}
.mini-perk-image{width:82px!important;height:82px!important;border-radius:11px!important}
.club-notifications.premium-updates{
  margin-bottom:12px!important;
  padding:17px!important;
  border-radius:16px!important;
  border:1px solid var(--v163-line)!important;
  background:rgba(255,253,248,.77)!important;
  box-shadow:none!important;
}
.help-link-card{
  margin:0 0 8px!important;
  padding:16px 4px!important;
  border-radius:0!important;
  border-top:1px solid var(--v163-line)!important;
  background:transparent!important;
  box-shadow:none!important;
}

/* Sharper shared component language across the rest of the app. */
.page-hero,
.rewards-summary,
.reward-stage-card,
.history-row,
.premium-pass,
.profile-card{
  border-radius:18px!important;
}
.primary,.secondary,.danger-light{border-radius:12px!important}
.reward-badge,.tag{border-radius:8px!important}

/* Flatter adaptive dock: still compact, still one-tap, no oversized capsule. */
.app-screen:not([hidden]) > .club-nav{
  left:10px!important;
  right:10px!important;
  bottom:2px!important;
  height:70px!important;
  min-height:70px!important;
  padding:6px!important;
  gap:4px!important;
  border-radius:18px!important;
  border:1px solid rgba(17,42,34,.10)!important;
  background:rgba(255,253,248,.94)!important;
  box-shadow:0 9px 24px rgba(15,39,32,.16)!important;
}
.club-nav button{min-height:56px!important;border-radius:13px!important}
.club-nav button.active{box-shadow:none!important;background:#0b5748!important}
.app-screen:not([hidden]) > .club-nav.is-compact{
  height:52px!important;
  min-height:52px!important;
  border-radius:16px!important;
  padding:5px!important;
}
.club-nav.is-compact button{min-height:42px!important;border-radius:11px!important}

@media(max-width:390px){
  .home-greeting h2{font-size:32px!important}
  .wallet-home-pass{padding:17px!important}
  .wallet-member-row{margin-top:21px!important}
  .wallet-home-pass .hero-copy h1{font-size:27px!important;max-width:210px!important}
  .wallet-home-pass .premium-card-button{width:62px!important;height:62px!important;flex-basis:62px!important}
  .wallet-primary-stat strong{font-size:57px!important}
  .wallet-secondary-stat strong{font-size:33px!important}
  #homeView .premium-reward-showcase{grid-template-columns:1fr!important}
  #homeView .premium-reward-showcase .reward-photo.small{min-height:185px!important;max-height:205px!important}
  #homeView .reward-showcase-copy{padding:16px!important}
  .mini-perk-card{flex-basis:86%!important;min-width:86%!important}
}

@media(prefers-reduced-motion:reduce){
  .wallet-home-pass::before,.wallet-home-pass::after{animation:none!important}
}

/* v165 — physical-bottom dock + wallet text fit.
   No safe-area reservation: the navigation owns the final screen pixels. */
.app-screen:not([hidden]){
  padding-bottom:0!important;
  grid-template-rows:50px minmax(0,1fr) 70px!important;
}
.app-screen:not([hidden]) > .view{
  padding-bottom:18px!important;
  scroll-padding-bottom:18px!important;
}
.app-screen:not([hidden]) > .club-nav,
.app-screen:not([hidden]) > .club-nav.is-compact{
  position:relative!important;
  grid-row:3!important;
  align-self:stretch!important;
  left:auto!important;
  right:auto!important;
  bottom:auto!important;
  inset:auto!important;
  width:calc(100% + 28px)!important;
  height:70px!important;
  min-height:70px!important;
  margin:0 -14px!important;
  padding:6px 10px 2px!important;
  gap:4px!important;
  border-radius:18px 18px 0 0!important;
  border-bottom:0!important;
  transform:none!important;
  box-sizing:border-box!important;
}
.club-nav button,
.club-nav.is-compact button{
  min-height:58px!important;
  height:58px!important;
  border-radius:12px!important;
}
.club-nav button small,
.club-nav.is-compact button small{
  display:block!important;
  max-height:16px!important;
  opacity:1!important;
  font-size:11px!important;
  line-height:1!important;
}

/* Keep large balances inside their own columns on every phone width. */
.wallet-balance-row{
  grid-template-columns:minmax(0,1.62fr) minmax(96px,.68fr)!important;
  column-gap:14px!important;
}
.wallet-primary-stat,
.wallet-secondary-stat{
  overflow:hidden!important;
}
.wallet-primary-stat strong{
  font-size:clamp(46px,14.2vw,62px)!important;
  line-height:.92!important;
  letter-spacing:-.055em!important;
  white-space:nowrap!important;
  max-width:100%!important;
}
.wallet-secondary-stat{
  padding-left:16px!important;
}
.wallet-secondary-stat strong{
  font-size:clamp(32px,9.2vw,42px)!important;
  line-height:.95!important;
  letter-spacing:-.04em!important;
  white-space:nowrap!important;
}
.wallet-primary-stat span,
.wallet-secondary-stat span{
  font-size:10px!important;
  line-height:1.2!important;
  letter-spacing:.1em!important;
}
.wallet-primary-stat small,
.wallet-secondary-stat small{
  font-size:11px!important;
  line-height:1.3!important;
  overflow-wrap:anywhere!important;
}

/* Cleaner copy wrapping in the reward feature and profile rows. */
#homeView .reward-showcase-copy h2{
  font-size:clamp(25px,7vw,31px)!important;
  overflow-wrap:break-word!important;
  hyphens:none!important;
}
.profile-card div{
  align-items:center!important;
}
.profile-card strong{
  min-width:0!important;
  overflow-wrap:anywhere!important;
}

@media(max-width:390px){
  .app-screen:not([hidden]){grid-template-rows:50px minmax(0,1fr) 68px!important}
  .app-screen:not([hidden]) > .club-nav,
  .app-screen:not([hidden]) > .club-nav.is-compact{height:68px!important;min-height:68px!important;padding-bottom:2px!important}
  .club-nav button,.club-nav.is-compact button{height:56px!important;min-height:56px!important}
  .wallet-balance-row{grid-template-columns:minmax(0,1.7fr) minmax(88px,.62fr)!important;column-gap:10px!important}
  .wallet-secondary-stat{padding-left:12px!important}
  .wallet-primary-stat strong{font-size:clamp(44px,14vw,55px)!important}
  .wallet-secondary-stat strong{font-size:clamp(30px,9vw,36px)!important}
}