:root{
  --hh-red:#7a1420; --hh-red2:#a51e2d; --hh-gold:#c9a24b;
  --hh-bg:#f4f1ec; --hh-ink:#241a18; --hh-muted:#8a7f7a; --hh-card-ink:#fff;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0}
body{
  font-family:-apple-system,BlinkMacSystemFont,"PingFang HK","Helvetica Neue",
    "Microsoft JhengHei",sans-serif;
  background:var(--hh-bg); color:var(--hh-ink);
  padding-top:env(safe-area-inset-top); padding-bottom:env(safe-area-inset-bottom);
}
.hh-app{max-width:480px;margin:0 auto;padding:0 16px 36px}
.hh-top{text-align:center;padding:16px 0 8px;position:relative}
.hh-langbar{position:absolute;top:12px;right:0;display:flex;gap:4px;z-index:5}
.hh-langbar a{font-size:12px;font-weight:700;color:#8a7f7a;text-decoration:none;padding:3px 9px;
  border-radius:999px;background:#fff;border:1px solid #e6ded3;line-height:1.4}
.hh-langbar a.on{background:var(--hh-red);color:#fff;border-color:var(--hh-red)}
.hh-logo{width:min(230px,64%);height:auto;display:block;margin:2px auto 4px}
.hh-brand{font-size:22px;font-weight:800;letter-spacing:2px;color:var(--hh-red)}
.hh-sub{font-size:12px;letter-spacing:4px;color:var(--hh-muted);text-transform:uppercase}

/* member card */
.hh-card{
  position:relative;border-radius:22px;padding:20px;margin-top:8px;
  background:linear-gradient(135deg,var(--hh-red),var(--hh-red2) 70%);
  color:var(--hh-card-ink);box-shadow:0 14px 34px rgba(122,20,32,.32);
  overflow:hidden;
}
.hh-card:after{content:"";position:absolute;inset:0;
  background:radial-gradient(circle at 85% 12%,rgba(201,162,75,.35),transparent 42%);
  pointer-events:none}
.hh-card-top{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;position:relative}
.hh-card-label{font-size:11px;opacity:.8;letter-spacing:1px}
.hh-card-name{font-size:20px;font-weight:700;margin-top:2px}
.hh-tier-badge{
  background:linear-gradient(135deg,#e9cf86,var(--hh-gold));color:#4a2a08;
  font-weight:800;font-size:13px;padding:6px 12px;border-radius:999px;white-space:nowrap;
  box-shadow:0 2px 8px rgba(0,0,0,.2)}
.hh-tier-badge-muted{background:rgba(255,255,255,.2);color:#fff}
/* tier-specific badge colours */
.hh-tier-badge--gold{background:linear-gradient(135deg,#f3dd97,#c9a24b);color:#4a2a08}
.hh-tier-badge--silver{background:linear-gradient(135deg,#f3f4f6,#c2c7cf);color:#3a3f47}
.hh-tier-badge--diamond{background:linear-gradient(135deg,#eafcff,#9fe3ef);color:#0c4d57}
.hh-tier-badge--base{background:linear-gradient(135deg,#f0e9df,#d8c7ad);color:#5a4527}
/* tier accent ring on the card */
.hh-card.hh-tier-gold,.hh-card.hh-tier-diamond{box-shadow:0 14px 34px rgba(122,20,32,.32),inset 0 0 0 2px rgba(201,162,75,.55)}
.hh-card.hh-tier-silver{box-shadow:0 14px 34px rgba(122,20,32,.32),inset 0 0 0 2px rgba(220,224,230,.55)}
.hh-barcode-wrap{background:#fff;border-radius:16px;padding:16px 12px 14px;margin:16px auto 10px;
  width:100%;display:flex;flex-direction:column;align-items:center;justify-content:center}
.hh-barcode-label{font-size:10px;letter-spacing:2px;color:var(--hh-muted);
  text-transform:uppercase;margin-bottom:8px;align-self:flex-start}
.hh-barcode-img{width:100%;max-width:340px;height:64px;object-fit:contain}
.hh-barcode-no{margin-top:10px;font-family:"SF Mono",Menlo,Consolas,monospace;
  font-size:19px;letter-spacing:3px;font-weight:700;color:var(--hh-ink)}
.hh-qr-missing{color:#b00;text-align:center;font-size:13px}
.hh-card-hint{text-align:center;font-size:11px;opacity:.82;margin-top:6px}

/* panels */
.hh-panel{background:#fff;border-radius:16px;padding:16px;margin-top:14px;
  box-shadow:0 4px 16px rgba(0,0,0,.05)}
.hh-panel-title{font-size:13px;font-weight:700;color:var(--hh-muted);margin-bottom:10px;letter-spacing:1px}
.hh-points-row{display:flex;justify-content:space-between;align-items:baseline}
.hh-points-label{font-size:14px;color:var(--hh-muted);font-weight:600}
.hh-points-value{font-size:40px;font-weight:800;color:var(--hh-red);line-height:1}
.hh-pt{font-size:16px;margin-left:4px;color:var(--hh-muted)}
.hh-next{margin-top:10px;font-size:13px;background:#faf4e6;border:1px solid #efe2c0;
  color:#7a5b16;border-radius:10px;padding:8px 10px}
.hh-expiry{margin-top:8px;font-size:12px;color:var(--hh-muted)}
.hh-spend{margin-top:6px;font-size:12px;color:var(--hh-muted)}
.hh-table{width:100%;border-collapse:collapse;font-size:13px}
.hh-table th{text-align:left;color:var(--hh-muted);font-weight:600;padding:4px 0;border-bottom:1px solid #eee}
.hh-table td{padding:6px 0;border-bottom:1px solid #f3f3f3}

/* stamps */
.hh-stamp{border:1px solid #eee;border-radius:12px;padding:12px;margin-bottom:10px}
.hh-stamp:last-child{margin-bottom:0}
.hh-stamp-expired{opacity:.55}
.hh-stamp-name{font-weight:700;font-size:14px}
.hh-badge-grey{background:#e6e6e6;color:#666;font-size:11px;padding:2px 8px;border-radius:999px;margin-left:6px}
.hh-stamp-gift{font-size:12px;color:var(--hh-muted);margin:4px 0}
.hh-stamp-visual{font-size:18px;letter-spacing:2px}
.hh-stamp-redeem{margin-top:6px;color:#1a7a3c;font-size:12px;font-weight:700}
.hh-empty{color:var(--hh-muted);font-size:13px}

/* 積分可換取產品 */
.hh-redeem{display:flex;justify-content:space-between;align-items:center;gap:10px;
  padding:10px 0;border-bottom:1px solid #f3f3f3}
.hh-redeem:last-of-type{border-bottom:none}
.hh-redeem-name{font-size:14px;font-weight:600;color:var(--hh-ink)}
.hh-redeem-pts{font-size:13px;color:var(--hh-red);font-weight:700;white-space:nowrap;text-align:right}
.hh-redeem-ok .hh-redeem-name{color:#0f6e2e}
.hh-redeem-badge{display:inline-block;margin-left:6px;background:#e4f5e9;color:#0f6e2e;
  font-size:11px;font-weight:700;padding:2px 8px;border-radius:999px}
.hh-redeem-need{display:inline-block;margin-left:6px;color:var(--hh-muted);font-size:11px;font-weight:600}
.hh-redeem-hint{margin-top:10px;font-size:11px;color:var(--hh-muted);text-align:center}

/* actions */
.hh-actions{margin-top:18px;display:flex;flex-direction:column;gap:10px}
.hh-btn{display:block;text-align:center;text-decoration:none;border:none;cursor:pointer;
  font-size:15px;font-weight:700;padding:14px;border-radius:14px;font-family:inherit}
.hh-btn-primary{background:var(--hh-red);color:#fff;box-shadow:0 6px 16px rgba(122,20,32,.28)}
.hh-btn-primary:disabled{opacity:.5}
.hh-btn-ghost{background:#fff;color:var(--hh-red);border:1.5px solid var(--hh-red)}
.hh-install-hint{background:#fff;border:1px dashed var(--hh-gold);border-radius:12px;
  padding:12px;font-size:13px;color:#7a5b16;text-align:center;line-height:1.6}
.hh-push-status{font-size:12px;color:var(--hh-muted);text-align:center;min-height:16px}
.hh-foot{text-align:center;color:var(--hh-muted);font-size:11px;margin-top:24px}

/* push opt-in banner (prominent, just under the card) */
.hh-push-banner{margin-top:14px;display:flex;gap:12px;align-items:flex-start;
  background:linear-gradient(135deg,#fff,#fdf6e8);border:1px solid #efe2c0;
  border-radius:16px;padding:14px 14px 16px;box-shadow:0 6px 18px rgba(201,162,75,.18)}
.hh-push-banner-ic{font-size:26px;line-height:1.2;flex:0 0 auto}
.hh-push-banner-body{flex:1 1 auto;min-width:0}
.hh-push-banner-title{font-size:15px;font-weight:800;color:var(--hh-ink)}
.hh-push-banner-sub{font-size:12.5px;color:var(--hh-muted);margin-top:3px;line-height:1.5}
.hh-push-banner-ios{font-size:12.5px;color:#7a5b16;margin-top:8px;line-height:1.6}
.hh-push-banner-actions{display:flex;align-items:center;gap:10px;margin-top:11px}
.hh-push-banner-enable{background:var(--hh-red);color:#fff;border:none;cursor:pointer;
  font-family:inherit;font-size:14px;font-weight:700;padding:9px 18px;border-radius:11px;
  box-shadow:0 4px 12px rgba(122,20,32,.25)}
.hh-push-banner-enable:disabled{opacity:.5}
.hh-push-banner-later{background:transparent;border:none;cursor:pointer;font-family:inherit;
  font-size:13px;font-weight:600;color:var(--hh-muted);padding:6px 4px}

/* bottom tab bar (蛋撻王-style) */
body.hh-hasnav{padding-bottom:76px}
.hh-tabbar{position:fixed;left:0;right:0;bottom:0;z-index:60;display:flex;background:#fff;
  border-top:1px solid #eee;box-shadow:0 -4px 16px rgba(0,0,0,.06);
  padding:6px 4px calc(6px + env(safe-area-inset-bottom))}
.hh-tab{flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;text-decoration:none;
  color:#9a908a;font-size:11px;font-weight:700;padding:4px 0}
.hh-tab .ic{font-size:21px;line-height:1}
.hh-tab.on{color:var(--hh-red)}
/* generic list rows reused by stores/vouchers */
.hh-row{padding:13px 0;border-bottom:1px solid #f3f3f3}
.hh-row:last-child{border-bottom:none}
.hh-seg{display:flex;gap:8px;margin:2px 0 14px}
.hh-seg a{flex:1;text-align:center;text-decoration:none;font-weight:700;font-size:14px;
  padding:10px;border-radius:12px;color:var(--hh-red);border:1.5px solid var(--hh-red);background:#fff}
.hh-seg a.on{background:var(--hh-red);color:#fff}