/* 👑 會員中心 */
#member-app { max-width: 1060px; margin: 0 auto; }
.mb-grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
.mb-card { background: var(--cream, #fff4dc); color: var(--brown, #4a2414); border: 4px solid var(--brown, #4a2414); border-radius: 22px; box-shadow: 0 6px 0 var(--brown, #4a2414); padding: 1rem 1.1rem; }
.mb-card h3 { margin: 0; font-family: var(--font-cute, inherit); font-weight: 400; font-size: 1.4rem; display: grid; }
.mb-card h3 small { font-size: .85rem; color: var(--red, #c4232b); font-weight: 700; font-family: inherit; }
.mb-card h4 { margin: .2rem 0 .5rem; font-size: 1.05rem; }
.mb-card h4 small { font-weight: 400; opacity: .7; font-size: .78rem; }
.mb-card h4 + * { margin-top: 0; }
.mb-card ul { list-style: none; padding: 0; margin: 0 0 .8rem; display: grid; gap: .35rem; }
.mb-note { font-size: .85rem; opacity: .85; margin: .4rem 0; }
.mb-join { max-width: 560px; margin: 0 auto; text-align: center; }
.mb-perks { text-align: left; margin: .8rem auto !important; max-width: 420px; }
.mb-head { display: flex; gap: 1rem; align-items: center; grid-column: 1 / -1; }
.mb-head > div:last-child { flex: 1; min-width: 0; }
.mb-badge { width: 76px; height: 76px; flex: none; border-radius: 50%; display: grid; place-items: center; font-size: 2.6rem; border: 4px solid var(--brown, #4a2414); background: #fff; box-shadow: 0 4px 0 var(--brown, #4a2414); }
.mb-badge.t-silver { background: #eef1f6; } .mb-badge.t-gold { background: #fff3c4; } .mb-badge.t-diamond { background: #e3f4ff; }
.mb-points { margin: .3rem 0; font-weight: 700; }
.mb-points b { font-family: var(--font-sign, inherit); color: var(--red, #c4232b); font-size: 1.6rem; display: inline-block; }
.mb-points small { opacity: .7; font-weight: 400; margin-left: .3rem; }
.mb-pop { animation: mbpop .5s; }
@keyframes mbpop { 40% { transform: scale(1.35); } }
.mb-bar { height: 12px; border-radius: 99px; background: #fff; border: 2px solid var(--brown, #4a2414); overflow: hidden; }
.mb-bar i { display: block; height: 100%; background: linear-gradient(90deg, #ff9ec0, #f6b830); }
.mb-tasks li { display: flex; gap: .5rem; align-items: center; background: #fff; border: 2px solid var(--brown, #4a2414); border-radius: 12px; padding: .4rem .6rem; }
.mb-tasks li span:nth-child(2) { flex: 1; }
.mb-tasks li small { opacity: .7; }
.mb-tasks li b { color: var(--red, #c4232b); }
.mb-tasks li.done { background: #eaf7ee; opacity: .8; }
.mb-rewards li, .mb-vouchers li { display: flex; gap: .5rem; align-items: center; justify-content: space-between; background: #fff; border: 2px solid var(--brown, #4a2414); border-radius: 12px; padding: .4rem .6rem; }
.mb-vouchers li div { display: grid; min-width: 0; }
.mb-vouchers code { font-weight: 900; letter-spacing: .05em; color: var(--red, #c4232b); }
.mb-vouchers small { opacity: .75; font-size: .76rem; }
.mb-vouchers li.dead { opacity: .5; }
.mb-card .btn.small { padding: .35em .8em; font-size: .85rem; white-space: nowrap; }
.mb-row { display: flex; gap: .5rem; }
.mb-row select { flex: 1; font-size: 16px; padding: .45rem; border: 3px solid var(--brown, #4a2414); border-radius: 12px; background: #fff; color: inherit; }
.mb-tiers { width: 100%; border-collapse: collapse; font-size: .82rem; background: #fff; border-radius: 12px; overflow: hidden; }
.mb-tiers th, .mb-tiers td { padding: .35rem .4rem; border-bottom: 1px solid rgba(74, 36, 20, .15); text-align: left; }
.mb-tiers tr.on { background: #fff6d6; font-weight: 900; }