:root {
  --bg: #f4f6f3;
  --surface: #fff;
  --text: #17231d;
  --muted: #6d7871;
  --line: #dce4de;
  --green: #146b48;
  --green-dark: #123c2c;
  --green-light: #e3f2e9;
  --gold: #a66f1b;
  --gold-light: #f8eedc;
  --blue: #2d6f8f;
  --blue-light: #e5f0f5;
  --red: #b13e3e;
  --red-light: #f8e8e6;
  --shadow: 0 12px 36px rgba(28, 48, 37, .08);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; overflow-x: hidden; background: var(--bg); color: var(--text); font-family: Inter, "Segoe UI", "Microsoft YaHei", sans-serif; letter-spacing: 0; }
button, input { font: inherit; }
button { color: inherit; }
button:focus-visible, input:focus-visible { outline: 3px solid rgba(20,107,72,.23); outline-offset: 2px; }
.member-topbar { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; justify-content: space-between; min-height: 66px; padding: 0 max(24px, calc((100vw - 1200px)/2)); border-bottom: 1px solid var(--line); background: rgba(255,255,255,.94); backdrop-filter: blur(14px); }
.member-brand { display: flex; align-items: center; gap: 9px; color: var(--text); text-decoration: none; }
.member-brand > span { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 7px; background: var(--green); color: white; font-weight: 900; }
.member-brand strong { font-size: 15px; }
.desktop-nav { display: flex; align-self: stretch; gap: 4px; }
.desktop-nav button { position: relative; min-width: 92px; padding: 0 12px; border: 0; background: transparent; color: var(--muted); font-size: 13px; cursor: pointer; }
.desktop-nav button::after { content: ""; position: absolute; right: 18px; bottom: 0; left: 18px; height: 2px; background: var(--green); transform: scaleX(0); transition: transform .2s ease; }
.desktop-nav button:hover, .desktop-nav button.active { color: var(--green); }
.desktop-nav button.active::after { transform: scaleX(1); }
.member-actions { display: flex; align-items: center; gap: 11px; }
.demo-badge { padding: 5px 8px; border-radius: 4px; color: var(--gold); background: var(--gold-light); font-size: 10px; font-weight: 800; }
.avatar-button { display: grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 50%; background: var(--green-dark); color: white; font-weight: 800; cursor: pointer; transition: transform .18s ease, box-shadow .18s ease; }
.avatar-button:hover { transform: translateY(-2px); box-shadow: 0 7px 18px rgba(18,60,44,.22); }
main { max-width: 1200px; min-height: calc(100vh - 66px); margin: 0 auto; padding: 26px 24px 54px; }
.member-page { display: none; animation: pageIn .25s ease; }.member-page.active { display: block; }
@keyframes pageIn { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } }

.welcome-band { display: flex; align-items: flex-end; justify-content: space-between; gap: 30px; min-height: 220px; padding: 38px 42px; overflow: hidden; border-radius: 8px; color: white; background: linear-gradient(120deg, #123c2c, #176949 64%, #af7c2b); box-shadow: var(--shadow); }
.welcome-copy > p { margin: 0 0 8px; color: #b9d5c5; font-size: 13px; }.welcome-copy h1 { max-width: 520px; margin: 0; font-size: clamp(30px, 4vw, 46px); line-height: 1.2; }
.mobile-welcome { display:none; }
.member-level { display: flex; align-items: center; gap: 10px; margin-top: 22px; }.member-level span { padding: 5px 8px; border: 1px solid rgba(255,255,255,.35); border-radius: 4px; font-size: 11px; font-weight: 800; }.member-level small { color: #d6e5dc; }
.member-code { min-width: 210px; padding: 18px; border: 1px solid rgba(255,255,255,.24); border-radius: 7px; background: rgba(255,255,255,.1); backdrop-filter: blur(8px); }.member-code span, .member-code strong { display: block; }.member-code span { color: #d3e2d9; font-size: 10px; }.member-code strong { margin: 7px 0 13px; font-size: 20px; }.member-code button { padding: 6px 10px; border: 0; border-radius: 5px; background: white; color: var(--green); font-size: 10px; font-weight: 800; cursor: pointer; }
.quick-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 12px; margin: 14px 0; }
.quick-grid article, .quick-grid > button { display: flex; align-items: center; gap: 13px; min-height: 105px; padding: 16px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); text-align:left; transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; }.quick-grid > button { cursor:pointer; }.quick-grid article:hover, .quick-grid > button:hover { transform: translateY(-3px); border-color: #b7c7bd; box-shadow: var(--shadow); }
.quick-icon { display: grid; place-items: center; flex: 0 0 auto; width: 38px; height: 38px; border-radius: 7px; font-size: 13px; font-weight: 900; }.quick-icon.green { color: var(--green); background: var(--green-light); }.quick-icon.gold { color: var(--gold); background: var(--gold-light); }.quick-icon.blue { color: var(--blue); background: var(--blue-light); }.quick-icon.red { color: var(--red); background: var(--red-light); }
.quick-grid small, .quick-grid strong, .quick-grid em { display: block; }.quick-grid small { color: var(--muted); font-size: 10px; }.quick-grid strong { margin: 5px 0; font-size: 20px; }.quick-grid em { color: var(--muted); font-size: 9px; font-style: normal; }
.home-layout { display: grid; grid-template-columns: 1.15fr .85fr; gap: 14px; }
.member-panel { border: 1px solid var(--line); border-radius: 8px; background: var(--surface); box-shadow: 0 1px 2px rgba(20,40,28,.03); }
.progress-panel, .order-panel, .benefits-preview { padding: 19px; }
.purchase-slots-panel { margin-top: 14px; padding: 19px; }
.purchase-slot-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; margin-top: 17px; }
.purchase-slot { min-width: 0; min-height: 84px; padding: 10px 7px; border: 1px solid var(--line); border-radius: 7px; background: var(--surface); text-align: left; cursor: pointer; transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease; }
.purchase-slot:hover { transform: translateY(-2px); border-color: var(--green); box-shadow: 0 6px 16px rgba(20,50,34,.09); }
.purchase-slot span, .purchase-slot strong, .purchase-slot small { display: block; }
.purchase-slot span { color: var(--muted); font-size: 9px; font-weight: 900; }
.purchase-slot strong { margin: 8px 0 4px; font-size: 12px; }
.purchase-slot small { overflow: hidden; color: var(--muted); font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.purchase-slot.purchased { border-color: #c9a75d; background: var(--gold-light); }
.purchase-slot.purchased span, .purchase-slot.purchased small { color: var(--gold); }
.purchase-slot.locked { border-style: dashed; }
.slot-explanation { margin: 13px 0 0; color: var(--muted); font-size: 9px; line-height: 1.6; }
.section-heading { display: flex; align-items: center; justify-content: space-between; gap: 15px; }.section-heading h2 { margin: 3px 0 0; font-size: 17px; }.section-kicker { color: var(--green); font-size: 9px; font-weight: 900; }.section-heading button { padding: 5px; border: 0; background: transparent; color: var(--green); font-size: 11px; font-weight: 800; cursor: pointer; }
.slot-row { display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; margin-top: 18px; }.slot { min-width: 0; padding: 14px 10px; border: 1px solid var(--line); border-radius: 7px; background: white; text-align: left; cursor: pointer; transition: transform .18s ease, border-color .18s ease, background .18s ease; }.slot:hover { transform: translateY(-2px); border-color: var(--green); }.slot > span, .slot strong, .slot small { display: block; }.slot > span { color: var(--green); font-size: 9px; font-weight: 900; }.slot strong { overflow: hidden; margin: 9px 0 4px; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }.slot small { color: var(--muted); font-size: 9px; }.slot.empty { border-style: dashed; background: var(--green-light); }
.progress-note { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; margin-top: 16px; }.progress-note span { font-size: 11px; font-weight: 800; }.progress-note div { height: 5px; overflow: hidden; border-radius: 99px; background: #e7ece8; }.progress-note i { display: block; height: 100%; border-radius: 99px; background: var(--green); }.progress-note small { color: var(--muted); font-size: 9px; }
.order-item { display: grid; grid-template-columns: 76px 1fr auto; align-items: center; gap: 12px; margin-top: 18px; }.order-item img { width: 76px; height: 70px; border-radius: 6px; object-fit: cover; }.order-item strong, .order-item span, .order-item small { display: block; }.order-item strong { font-size: 11px; }.order-item span, .order-item small { margin-top: 5px; color: var(--muted); font-size: 9px; }.order-item em { align-self: start; padding: 4px 7px; border-radius: 4px; color: var(--green); background: var(--green-light); font-size: 9px; font-style: normal; }
.benefits-preview { margin-top: 14px; }.path-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; margin-top: 17px; }.path-grid article { padding: 16px; border: 1px solid var(--line); border-radius: 7px; transition: transform .2s ease, border-color .2s ease; }.path-grid article:hover { transform: translateY(-3px); border-color: #b6c8bd; }.path-grid article > span { color: var(--green); font-size: 10px; font-weight: 900; }.path-grid h3 { margin: 12px 0 6px; font-size: 14px; }.path-grid p { min-height: 40px; margin: 0 0 12px; color: var(--muted); font-size: 10px; line-height: 1.55; }.path-grid small { color: var(--gold); font-size: 9px; font-weight: 800; }

.member-page-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin: 10px 0 22px; }.member-page-heading > div > span { color: var(--green); font-size: 10px; font-weight: 900; }.member-page-heading h1 { margin: 4px 0 6px; font-size: clamp(28px,4vw,40px); }.member-page-heading p { margin: 0; color: var(--muted); font-size: 12px; }.invite-button, .buy-button, .dialog-primary { min-height: 42px; padding: 0 17px; border: 1px solid var(--green); border-radius: 7px; background: var(--green); color: white; font-weight: 800; cursor: pointer; transition: transform .18s ease, box-shadow .18s ease; }.invite-button:hover, .buy-button:hover, .dialog-primary:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(20,107,72,.2); }
.team-stats { display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; margin-bottom: 14px; }.team-stats article { padding: 17px; border-top: 3px solid var(--green); background: var(--surface); box-shadow: var(--shadow); }.team-stats small, .team-stats strong { display: block; }.team-stats small { color: var(--muted); }.team-stats strong { margin-top: 8px; font-size: 23px; }
.member-tree-panel { padding: 22px; overflow: auto; }.team-tree-toolbar { position:sticky; left:0; z-index:3; display:flex; align-items:center; justify-content:space-between; gap:16px; min-width:720px; padding-bottom:16px; border-bottom:1px solid var(--line); background:var(--surface); }.team-tree-toolbar strong,.team-tree-toolbar small { display:block; }.team-tree-toolbar strong { font-size:13px; }.team-tree-toolbar small { margin-top:4px; color:var(--muted); font-size:9px; }.auto-placement-button { display:inline-flex; align-items:center; gap:7px; min-height:38px; padding:0 13px; border:1px solid var(--green); border-radius:6px; color:white; background:var(--green); font-size:10px; font-weight:800; cursor:pointer; white-space:nowrap; transition:transform .18s ease,box-shadow .18s ease; }.auto-placement-button:hover { transform:translateY(-2px); box-shadow:0 8px 18px rgba(20,107,72,.18); }.auto-placement-button span { font-size:15px; }.placement-result { display:none; position:sticky; left:0; z-index:2; min-width:720px; margin:14px 0 0; padding:12px 14px; border:1px solid #9ec5ad; border-radius:7px; color:var(--text); background:var(--green-light); font-size:10px; }.placement-result.show { display:flex; align-items:center; justify-content:space-between; gap:16px; }.placement-result strong,.placement-result small { display:block; }.placement-result small { margin-top:4px; color:var(--muted); }.placement-result button { flex:0 0 auto; min-height:32px; padding:0 10px; border:1px solid var(--green); border-radius:5px; color:var(--green); background:var(--surface); font-size:9px; font-weight:800; cursor:pointer; }.team-tree { position: relative; min-width: 1060px; min-height: 510px; padding-top:28px; display: flex; flex-direction: column; align-items: center; }.tree-person { position:relative; display: flex; flex-direction: column; align-items: center; min-width: 92px; border: 0; background: transparent; cursor: pointer; }.tree-person > span { display: grid; place-items: center; width: 46px; height: 46px; border: 3px solid white; border-radius: 50%; color: white; background: var(--green); box-shadow: 0 6px 16px rgba(20,50,34,.17); transition: transform .18s ease, box-shadow .18s ease; }.tree-person:hover > span { transform: translateY(-4px) scale(1.04); box-shadow: 0 10px 22px rgba(20,50,34,.24); }.tree-person strong { margin-top: 7px; font-size: 10px; }.tree-person small { margin-top: 3px; color: var(--muted); font-size: 8px; }.tree-person.self > span { background: var(--green-dark); }.tree-person.overflow > span { background: var(--gold); }.tree-person.empty > span { border: 1px dashed var(--green); color: var(--green); background: var(--green-light); }
.tree-line.vertical { width: 1px; height: 52px; background: var(--line); }.tree-level { position: relative; display: grid; grid-template-columns:repeat(3,1fr); width: 840px; padding-top: 28px; }.tree-level::before { content:""; position:absolute; top:0; left:16.67%; right:16.67%; height:1px; background:var(--line); }.tree-level .tree-person::before { content:""; position:absolute; top:-28px; width:1px; height:28px; background:var(--line); }.tree-level.second { grid-template-columns:repeat(9,1fr); width:1020px; margin-top:68px; }.tree-level.second::before { left:5.56%; right:5.56%; }.team-legend { position:sticky; left:0; display:flex; align-items:center; gap:16px; min-width:720px; margin-top:10px; padding-top:14px; border-top:1px solid var(--line); color:var(--muted); background:var(--surface); font-size:10px; }.team-legend span { display:flex; align-items:center; gap:6px; }.team-legend i { width:8px; height:8px; border-radius:50%; }.team-legend i.direct { background:var(--green); }.team-legend i.overflow { background:var(--gold); }.team-legend i.privacy { background:var(--muted); }.team-legend small { margin-left:auto; }

.shop-layout { display:grid; grid-template-columns:minmax(0,1.15fr) minmax(360px,.85fr); overflow:hidden; border:1px solid var(--line); border-radius:8px; background:var(--surface); box-shadow:var(--shadow); }.shop-media { position:relative; min-height:580px; overflow:hidden; background:#1b2d23; }.shop-media img { width:100%; height:100%; object-fit:cover; transition:transform .4s ease; }.shop-media:hover img { transform:scale(1.035); }.shop-media > span { position:absolute; left:18px; bottom:18px; padding:6px 9px; border-radius:4px; background:rgba(18,35,27,.8); color:white; font-size:10px; }.shop-detail { padding:42px; }.member-product-picker { display:block; margin-bottom:15px; }.member-product-picker span { display:block; margin-bottom:6px; color:var(--muted); font-size:10px; }.member-product-picker select { width:100%; padding:10px 11px; border:1px solid var(--line); border-radius:6px; color:var(--text); background:var(--surface); font-size:12px; }.stock { display:inline-flex; padding:5px 8px; border-radius:4px; color:var(--green); background:var(--green-light); font-size:10px; font-weight:900; }.stock.sold-out { color:var(--red); background:var(--red-light); }.shop-detail h2 { margin:15px 0 8px; font-size:24px; }.shop-detail > p { color:var(--muted); font-size:12px; line-height:1.7; }.shop-price { margin:28px 0; }.shop-price strong { font-size:34px; }.shop-price small { color:var(--muted); }.quantity, .shop-total { display:flex; align-items:center; justify-content:space-between; padding:16px 0; border-top:1px solid var(--line); font-size:12px; }.quantity div { display:flex; align-items:center; overflow:hidden; border:1px solid var(--line); border-radius:6px; }.quantity button { width:34px; height:32px; border:0; background:var(--bg); cursor:pointer; }.quantity output { min-width:38px; text-align:center; font-weight:800; }.shop-total strong { font-size:19px; }.agreement { display:flex; align-items:flex-start; gap:8px; margin:18px 0; color:var(--muted); font-size:10px; line-height:1.5; }.agreement input { margin-top:2px; accent-color:var(--green); }.buy-button { width:100%; }
.payment-methods { display:grid; grid-template-columns:1fr; gap:8px; margin:4px 0 0; padding:0; border:0; }
.payment-methods legend { grid-column:1/-1; width:100%; margin-bottom:8px; color:var(--text); font-size:12px; font-weight:800; }
.payment-option { display:grid; grid-template-columns:auto 34px minmax(0,1fr); align-items:center; gap:8px; min-width:0; padding:11px; border:1px solid var(--line); border-radius:7px; background:var(--surface); cursor:pointer; transition:border-color .18s ease,background .18s ease; }
.payment-option:has(input:checked) { border-color:var(--green); background:var(--green-light); }
.payment-option input { width:14px; height:14px; margin:0; accent-color:var(--green); }
.payment-symbol { display:grid; place-items:center; width:32px; height:32px; border-radius:6px; color:white; background:var(--green); font-size:10px; font-weight:900; }
.payment-symbol.points { color:#684a13; background:var(--gold-light); }
.payment-symbol.issued { background:var(--blue); }
.payment-option strong,.payment-option small { display:block; overflow-wrap:anywhere; }
.payment-option strong { font-size:11px; }.payment-option small { margin-top:3px; color:var(--muted); font-size:8px; line-height:1.4; }
.payment-option.insufficient { border-color:#e5b4b4; background:var(--red-light); }
.payment-summary { display:flex; align-items:center; justify-content:space-between; min-height:40px; margin-top:9px; padding:9px 11px; border-radius:6px; background:var(--bg); font-size:10px; }
.payment-summary strong { font-size:13px; }.payment-summary.insufficient { color:var(--red); background:var(--red-light); }
.voucher-wallet-panel,.chain-shop-panel { margin-bottom:14px; padding:19px; }.voucher-wallet-panel .section-heading > strong { color:var(--green); font-size:20px; }.voucher-wallet-panel > p { margin:10px 0 14px; color:var(--muted); font-size:10px; line-height:1.6; }.voucher-wallet-panel > small { display:block; margin-top:9px; color:var(--muted); font-size:9px; }.voucher-redeem-form { display:grid; grid-template-columns:minmax(0,1fr) auto auto; gap:8px; }.voucher-redeem-form input { min-width:0; min-height:42px; padding:0 12px; border:1px solid var(--line); border-radius:6px; color:var(--text); background:var(--surface); }.voucher-redeem-form button { min-height:42px; padding:0 14px; border:1px solid var(--green); border-radius:6px; color:var(--green); background:var(--surface); font-size:10px; font-weight:800; cursor:pointer; }.voucher-redeem-form button[type="submit"] { color:white; background:var(--green); }.chain-shop-panel .section-heading a { color:var(--green); font-size:10px; font-weight:800; text-decoration:none; }.chain-shop-frame-wrap { height:500px; margin-top:15px; overflow:hidden; border:1px solid var(--line); border-radius:7px; background:var(--bg); }.chain-shop-frame-wrap iframe { width:100%; height:100%; border:0; }
.buy-button:disabled { border-color:#aab4ae; background:#aab4ae; cursor:not-allowed; box-shadow:none; transform:none; }
.current-benefit { display:flex; justify-content:space-between; align-items:center; gap:20px; padding:26px; border-radius:8px; color:white; background:var(--green-dark); }.current-benefit small { color:#bcd4c7; }.current-benefit h2 { margin:7px 0; }.current-benefit p { margin:0; color:#d3e3da; font-size:11px; }.current-benefit > span { padding:6px 9px; border:1px solid rgba(255,255,255,.3); border-radius:4px; font-size:10px; }
.benefit-list { display:grid; gap:10px; margin-top:14px; }.benefit-list article { display:grid; grid-template-columns:42px 1fr auto; align-items:center; gap:13px; padding:16px 18px; border:1px solid var(--line); border-radius:7px; background:var(--surface); transition:transform .18s ease, border-color .18s ease; }.benefit-list article:hover { transform:translateX(3px); border-color:#b9c8bf; }.benefit-symbol { display:grid; place-items:center; width:38px; height:38px; border-radius:7px; color:var(--green); background:var(--green-light); font-size:11px; font-weight:900; }.benefit-list h3 { margin:0 0 4px; font-size:13px; }.benefit-list p { margin:0; color:var(--muted); font-size:10px; }.benefit-list article > span { padding:4px 7px; border-radius:4px; font-size:9px; font-weight:900; }.available { color:var(--green); background:var(--green-light); }.pending { color:var(--gold); background:var(--gold-light); }
.tier-progress { width:min(260px,100%); height:4px; margin-top:9px; overflow:hidden; border-radius:99px; background:#e7ece8; }.tier-progress i { display:block; height:100%; border-radius:inherit; background:var(--gold); }.benefit-list article.tier-complete { border-color:#9fc3ad; background:#fbfefc; }.benefit-list article.tier-complete .tier-progress i { background:var(--green); }
.profile-card { display:flex; align-items:center; gap:14px; padding:20px; border-radius:8px; color:white; background:var(--green-dark); }.profile-avatar { display:grid; place-items:center; width:54px; height:54px; border:2px solid rgba(255,255,255,.3); border-radius:50%; font-weight:900; }.profile-card h2,.profile-card p { margin:0; }.profile-card p { margin-top:5px; color:#bcd1c5; font-size:10px; }.profile-card button { margin-left:auto; padding:7px 10px; border:1px solid rgba(255,255,255,.3); border-radius:5px; background:transparent; color:white; cursor:pointer; }.account-list { display:grid; margin-top:14px; border:1px solid var(--line); border-radius:8px; overflow:hidden; background:var(--surface); }.account-list button { display:flex; align-items:center; justify-content:space-between; padding:16px 18px; border:0; border-bottom:1px solid var(--line); background:transparent; text-align:left; cursor:pointer; }.account-list button:last-child { border-bottom:0; }.account-list button:hover { background:var(--green-light); }.account-list b,.account-list small { display:block; }.account-list b { font-size:12px; }.account-list small { margin-top:4px; color:var(--muted); font-size:9px; }.account-list i { color:var(--muted); font-size:22px; font-style:normal; }
.account-summary { display:grid; grid-template-columns:minmax(280px,.8fr) minmax(0,1.2fr); gap:14px; margin-top:14px; }.wallet-card { display:flex; flex-direction:column; min-height:210px; padding:20px; border-radius:8px; color:white; background:linear-gradient(135deg,#176949,#144c37 66%,#8b6c27); box-shadow:var(--shadow); }.wallet-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; }.wallet-heading span { font-size:11px; }.wallet-heading button { padding:5px; border:0; background:transparent; color:#d6e6dc; font-size:9px; cursor:pointer; }.wallet-card > strong { margin:24px 0 7px; font-size:30px; }.wallet-card > small { color:#c7dcd0; font-size:9px; }.wallet-actions { display:grid; grid-template-columns:1fr 1fr; gap:9px; margin-top:auto; }.wallet-actions button { min-height:36px; border:1px solid rgba(255,255,255,.3); border-radius:6px; color:white; background:rgba(255,255,255,.1); font-size:10px; font-weight:800; cursor:pointer; }.wallet-actions button:hover { background:rgba(255,255,255,.2); }.account-data-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }.account-data-grid button { min-width:0; padding:16px; border:1px solid var(--line); border-radius:8px; background:var(--surface); text-align:left; cursor:pointer; transition:transform .18s ease,border-color .18s ease; }.account-data-grid button:hover { transform:translateY(-2px); border-color:#b6c6bc; }.account-data-grid span,.account-data-grid strong,.account-data-grid small { display:block; }.account-data-grid span { color:var(--muted); font-size:10px; }.account-data-grid strong { margin:9px 0 5px; font-size:19px; }.account-data-grid small { color:var(--muted); font-size:9px; }
.wallet-card > strong small { font-size:10px; font-weight:700; }
.payout-panel { margin-top:14px; padding:20px; }.payout-note { margin:10px 0 17px; color:var(--muted); font-size:9px; line-height:1.6; }.save-state { padding:4px 7px; border-radius:4px; color:var(--gold); background:var(--gold-light); font-size:9px; font-weight:900; }.save-state.saved { color:var(--green); background:var(--green-light); }
.payout-form { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }.payout-form label { min-width:0; }.payout-form label > span,.dialog-form label > span { display:block; margin-bottom:6px; color:var(--muted); font-size:9px; font-weight:800; }.payout-form input,.dialog-form input,.dialog-form select { width:100%; min-height:40px; padding:0 11px; border:1px solid var(--line); border-radius:6px; color:var(--text); background:var(--surface); font-size:11px; }.payout-form .full { grid-column:1/-1; }.payout-upload { display:grid; grid-template-columns:1fr auto; align-items:center; min-height:54px; padding:10px 12px; border:1px dashed var(--line); border-radius:7px; cursor:pointer; }.payout-upload > span { margin:0!important; }.payout-upload input { position:absolute; width:1px; height:1px; opacity:0; pointer-events:none; }.payout-upload b { color:var(--green); font-size:9px; }.payout-upload.saved { border-style:solid; border-color:#91b8a2; background:var(--green-light); }.payout-actions { display:flex; justify-content:flex-end; gap:9px; }.primary-action,.secondary-action { min-height:38px; padding:0 15px; border-radius:6px; font-size:10px; font-weight:800; cursor:pointer; }.primary-action { border:1px solid var(--green); color:white; background:var(--green); }.secondary-action { border:1px solid var(--line); color:var(--text); background:var(--surface); }
.mobile-nav { display:none; }
dialog { width:min(390px,calc(100vw - 30px)); padding:26px; border:0; border-radius:8px; color:var(--text); background:var(--surface); box-shadow:0 24px 70px rgba(20,35,27,.28); }dialog::backdrop { background:rgba(12,22,16,.5); backdrop-filter:blur(3px); }.dialog-close { position:absolute; top:12px; right:12px; width:30px; height:30px; border:0; border-radius:5px; background:var(--bg); cursor:pointer; }.dialog-icon { display:grid; place-items:center; width:44px; height:44px; border-radius:7px; color:white; background:var(--green); font-weight:900; }dialog h2 { margin:14px 0 6px; }dialog p { color:var(--muted); font-size:11px; line-height:1.6; }.invite-code { display:flex; justify-content:space-between; padding:13px; margin:18px 0 12px; border-radius:6px; background:var(--bg); font-size:12px; }.dialog-primary { width:100%; }
.action-dialog { width:min(430px,calc(100vw - 30px)); }.dialog-form { display:grid; gap:12px; margin-top:18px; }.withdraw-preview { display:flex; align-items:center; justify-content:space-between; padding:11px; border-radius:6px; background:var(--bg); font-size:10px; }.withdraw-preview strong { font-size:14px; }.points-ledger { display:grid; gap:8px; max-height:360px; margin-top:18px; overflow:auto; }.ledger-item { display:grid; grid-template-columns:1fr auto; gap:5px 12px; padding:11px; border:1px solid var(--line); border-radius:6px; }.ledger-item strong { font-size:11px; }.ledger-item b { color:var(--green); font-size:12px; }.ledger-item b.out { color:var(--red); }.ledger-item small { grid-column:1/-1; color:var(--muted); font-size:8px; }.ledger-empty { padding:24px; color:var(--muted); background:var(--bg); text-align:center; font-size:10px; }
.member-lookup-control { display:grid!important; grid-template-columns:1fr auto; gap:7px; margin:0!important; }.member-lookup-control button { min-width:64px; border:1px solid var(--green); border-radius:6px; color:var(--green); background:var(--surface); font-size:10px; font-weight:800; cursor:pointer; }.member-lookup-control button:hover { color:white; background:var(--green); }.transfer-lookup-result { min-height:58px; padding:11px 12px; border:1px dashed var(--line); border-radius:7px; color:var(--muted); background:var(--bg); font-size:10px; line-height:1.5; }.transfer-lookup-result.found { display:grid; grid-template-columns:1fr auto; align-items:center; gap:10px; border-style:solid; border-color:#91b8a2; color:var(--text); background:var(--green-light); }.transfer-lookup-result.rejected { border-style:solid; border-color:#e1b6b2; color:var(--red); background:var(--red-light); }.transfer-lookup-result strong,.transfer-lookup-result small { display:block; }.transfer-lookup-result small { margin-top:3px; color:var(--muted); font-size:8px; }.relation-badge { padding:4px 7px; border-radius:4px; color:var(--green); background:var(--surface); font-size:9px; font-weight:900; white-space:nowrap; }.dialog-primary:disabled { opacity:.48; cursor:not-allowed; }
.member-toast { position:fixed; right:24px; bottom:24px; z-index:80; padding:11px 14px; border-radius:7px; color:white; background:var(--green-dark); box-shadow:var(--shadow); font-size:11px; opacity:0; pointer-events:none; transform:translateY(10px); transition:opacity .2s ease,transform .2s ease; }.member-toast.show { opacity:1; transform:none; }

@media (max-width:900px) { .quick-grid { grid-template-columns:repeat(2,1fr); }.home-layout { grid-template-columns:1fr; }.shop-layout { grid-template-columns:1fr; }.shop-media { min-height:360px; }.path-grid { grid-template-columns:1fr; }.path-grid p { min-height:0; } }
@media (max-width:700px) {
  body { padding-bottom:70px; }.member-topbar { min-height:58px; padding:0 14px; }.desktop-nav,.demo-badge { display:none; }.member-brand strong { font-size:14px; }.avatar-button { width:34px;height:34px; }
  main { min-height:calc(100vh - 58px); padding:18px 14px 28px; }.welcome-band { display:block; min-height:0; padding:26px 22px; }.welcome-copy h1 { font-size:29px; }.member-level { align-items:flex-start; flex-direction:column; }.member-code { display:flex; align-items:center; gap:12px; min-width:0; margin-top:24px; padding:12px; }.member-code strong { margin:0; font-size:15px; }.member-code button { margin-left:auto; }
  .desktop-welcome,.member-level,.member-code,.home-layout { display:none; }.mobile-welcome { display:block; }
  .member-actions { display:none; }
  .quick-grid { gap:9px; }.quick-grid article, .quick-grid > button { display:block; min-height:132px; padding:14px; }.quick-icon { width:32px;height:32px;margin-bottom:10px; }.quick-grid strong { font-size:15px; }
  .slot-row { gap:7px; }.slot { padding:12px 8px; }.purchase-slot-grid { grid-template-columns:repeat(4,minmax(0,1fr)); }.purchase-slot { min-height:76px; }.order-item { grid-template-columns:64px 1fr; }.order-item img { width:64px;height:60px; }.order-item em { display:none; }
  .member-page-heading { display:block; margin-top:0; }.member-page-heading h1 { font-size:28px; }.member-page-heading .invite-button { width:100%; margin-top:15px; }
  .team-stats { gap:8px; }.team-stats article { padding:13px; }.team-stats strong { font-size:17px; }.member-tree-panel { padding:14px 10px; }.team-tree-toolbar { left:0; min-width:0; width:calc(100vw - 48px); flex-direction:column; align-items:stretch; }.auto-placement-button { width:100%; justify-content:center; }.placement-result { left:0; min-width:0; width:calc(100vw - 48px); }.placement-result.show { align-items:stretch; flex-direction:column; }.placement-result button { width:100%; }.team-legend { min-width:700px; }.team-legend small { display:none; }
  .shop-media { min-height:260px; }.shop-detail { padding:24px 18px; }.shop-detail h2 { font-size:20px; }.shop-price strong { font-size:29px; }.voucher-redeem-form { grid-template-columns:1fr auto; }.voucher-redeem-form input { grid-column:1/-1; }.chain-shop-frame-wrap { height:430px; }
  .benefit-list article { grid-template-columns:38px 1fr; }.benefit-list article > span { grid-column:2; justify-self:start; }.current-benefit { padding:20px; }
  .account-summary { grid-template-columns:1fr; }.wallet-card { min-height:200px; }.account-data-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }.account-data-grid button { padding:14px; }.payout-form { grid-template-columns:1fr; }.payout-form .full { grid-column:auto; }.payout-actions { display:grid; grid-template-columns:1fr 1fr; }.payout-actions button { width:100%; }
  .mobile-nav { position:fixed; right:0; bottom:0; left:0; z-index:40; display:grid; grid-template-columns:repeat(5,1fr); height:64px; padding-bottom:env(safe-area-inset-bottom); border-top:1px solid var(--line); background:rgba(255,255,255,.96); backdrop-filter:blur(14px); }.mobile-nav button { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; border:0; background:transparent; color:var(--muted); cursor:pointer; }.mobile-nav button span { font-size:17px; }.mobile-nav button small { font-size:9px; }.mobile-nav button.active { color:var(--green); }.member-toast { right:14px;bottom:78px;left:14px;text-align:center; }
}
@media (max-width:380px) { .quick-grid { grid-template-columns:1fr 1fr; }.quick-grid article { min-width:0; }.quick-grid em { display:none; }.slot strong { font-size:10px; }.payment-methods { grid-template-columns:1fr; } }
@media (hover:none) { .quick-grid article:hover,.quick-grid>button:hover,.slot:hover,.path-grid article:hover,.tree-person:hover>span,.invite-button:hover,.buy-button:hover,.account-data-grid button:hover { transform:none; } }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior:auto!important;transition:none!important;animation:none!important; } }