/* 光影 · membership and coin top-up page (vip.html). */
:root{color-scheme:dark;--bg:#0e070a;--surface:#1a0e13;--card:#170c14;--text:#f7f0ea;--muted:#a8959c;--faint:#6f5c63;--line:#ffffff14;--gold:#f3c77a;--gold-soft:#f3dccf;
 --gy:linear-gradient(100deg,#7b2ff7 0%,#e6298e 58%,#ff7a2f 100%);--gy-text:linear-gradient(100deg,#c39bff,#ff6fb1 60%,#ffab6b);
 --serif:'Noto Serif SC','Songti SC',serif;--sans:'Noto Sans SC','PingFang SC',system-ui,sans-serif;--gutter:16px}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--text);font:400 14px/1.6 var(--sans);-webkit-tap-highlight-color:transparent}
button{font:inherit;color:inherit}
a{color:inherit}
main{max-width:760px;margin:0 auto;padding-bottom:170px}

.vip-top{position:sticky;top:0;z-index:5;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:10px var(--gutter);padding-top:max(10px,env(safe-area-inset-top));background:#0e070ae6;backdrop-filter:blur(14px)}
.vip-back{width:36px;height:36px;display:grid;place-items:center;border-radius:50%}
.vip-back svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.vip-tabs{display:flex;gap:28px}
.vip-tabs button{background:none;border:0;padding:6px 0 10px;font-size:19px;font-weight:700;color:var(--muted);cursor:pointer;position:relative}
.vip-tabs button[aria-selected="true"]{color:var(--text)}
.vip-tabs button[aria-selected="true"]::after{content:"";position:absolute;left:50%;bottom:0;width:22px;height:4px;border-radius:4px;transform:translateX(-50%);background:var(--gy)}
.vip-history-btn{justify-self:end;background:none;border:0;color:var(--muted);font-size:13px;cursor:pointer}

.vip-hero{position:relative;overflow:hidden;padding:26px var(--gutter) 22px;min-height:132px}
.vip-hero-bg{position:absolute;inset:0;background:url(/assets/romance-posters.webp) right center/cover no-repeat;opacity:.38;mask-image:linear-gradient(90deg,transparent 15%,#000 70%);-webkit-mask-image:linear-gradient(90deg,transparent 15%,#000 70%)}
.vip-hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 40%,var(--bg))}
.vip-hero>*{position:relative;z-index:1}
.vip-hero h1{margin:0;font:900 30px/1.25 var(--serif);letter-spacing:.04em;background:var(--gy-text);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.vip-hero p{margin:6px 0 0;color:#d9c9cf}
.vip-status{display:inline-flex;gap:6px;align-items:center;margin-top:12px!important;padding:4px 12px;border-radius:999px;font-size:12px;background:#ffffff12;border:1px solid #ffffff1f}
.vip-status.on{border-color:#f3c77a66;color:var(--gold)}

/* Plan carousel: cards snap to the centre; the selected one lifts and glows. */
.plan-track{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;padding:18px calc(50% - 92px) 22px;scrollbar-width:none}
.plan-track::-webkit-scrollbar{display:none}
.plan{flex:0 0 184px;scroll-snap-align:center;position:relative;border-radius:16px;padding:14px 12px 12px;text-align:center;cursor:pointer;border:1.5px solid #ffffff1a;background:var(--card);transition:transform .25s,border-color .25s,box-shadow .25s;transform:scale(.9);opacity:.78}
.plan[aria-checked="true"]{transform:scale(1);opacity:1;border-color:transparent;background:linear-gradient(var(--card),var(--card)) padding-box,var(--gy) border-box;box-shadow:0 10px 40px -10px #e6298e88}
.plan-tag{position:absolute;top:0;right:0;padding:3px 10px;font-size:11px;border-radius:0 14px 0 10px;background:linear-gradient(90deg,#3a2a12,#6b5122);color:#ffe2a6}
.plan[aria-checked="true"] .plan-tag{background:var(--gy);color:#fff}
.plan h3{margin:10px 0 0;font:900 22px/1.2 var(--serif);background:linear-gradient(180deg,#fff3d6,#e9b95e);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.plan-note{margin:2px 0 0;font-size:11px;color:#d7c2a0;letter-spacing:.06em}
.plan-art{width:118px;height:118px;margin:4px auto 0;display:block}
.plan-price{margin:0;font-weight:700;color:var(--gold-soft)}
.plan-price b{font-size:30px;font-family:var(--serif);color:#fff}
.plan-gift{margin:8px 0 0;padding:4px 0;border-radius:999px;font-size:12px;background:#ffffff10;border:1px solid #f3c77a55;color:var(--gold)}
.plan-gift.empty{visibility:hidden}
.plan-dots{display:flex;justify-content:center;gap:6px;margin-top:-8px}
.plan-dots i{width:6px;height:6px;border-radius:50%;background:#ffffff33;transition:width .2s}
.plan-dots i.on{width:16px;border-radius:4px;background:var(--gy)}

.perks{margin:22px var(--gutter) 0;padding:18px 16px 8px;border-radius:16px;border:1px solid #f3c77a33;background:linear-gradient(160deg,#20121a,#130a10)}
.perks-head{display:flex;justify-content:space-between;align-items:baseline}
.perks-head h2{margin:0;font:700 19px var(--serif)}
.perks-head span{color:var(--muted);font-size:13px}
.perk-grid{list-style:none;margin:16px 0 0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:16px 6px}
.perk-grid li{display:grid;justify-items:center;gap:8px;text-align:center;font-size:12px;color:#e7d8dd;line-height:1.35}
.perk-grid .ico{width:50px;height:50px;border-radius:50%;display:grid;place-items:center;background:radial-gradient(circle at 30% 25%,#3a2433,#1c0f17);border:1px solid #f3c77a55}
.perk-grid svg{width:24px;height:24px;fill:none;stroke:var(--gold);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}

.coin-balance{margin:4px var(--gutter) 0;padding:16px;border-radius:14px;display:flex;justify-content:space-between;align-items:center;background:linear-gradient(120deg,#2a1622,#1a0e13);border:1px solid #f3c77a33}
.coin-balance strong{font:900 26px var(--serif);color:var(--gold)}
.coin-grid{margin:14px var(--gutter) 0;display:grid;grid-template-columns:1fr 1fr;gap:12px}
.coin{position:relative;padding:18px 12px 14px;border-radius:14px;text-align:center;cursor:pointer;background:var(--card);border:1.5px solid #ffffff1a}
.coin[aria-checked="true"]{border-color:transparent;background:linear-gradient(var(--card),var(--card)) padding-box,var(--gy) border-box}
.coin strong{display:block;font:900 22px var(--serif);color:var(--gold)}
.coin small{display:block;margin-top:2px;color:#ff8fc2;min-height:1.6em}
.coin span{display:block;margin-top:6px;font-weight:700}
.coin .plan-tag{font-size:10px}
.coin-note{margin:12px var(--gutter) 0;color:var(--faint);font-size:12px}

.pay-methods{margin:22px var(--gutter) 0}
.pay-methods h2{margin:0 0 10px;font-size:14px;font-weight:500;color:var(--muted)}
.method-row{display:flex;gap:10px;flex-wrap:wrap}
.method{flex:1 1 0;min-width:120px;display:flex;align-items:center;gap:8px;padding:11px 14px;border-radius:12px;background:var(--card);border:1.5px solid #ffffff1a;cursor:pointer}
.method[aria-checked="true"]{border-color:#e6298e}
.method i{width:22px;height:22px;border-radius:6px;display:grid;place-items:center;font-style:normal;font-size:13px;font-weight:700;color:#fff}
.method .m-alipay{background:#1677ff}.method .m-wxpay{background:#07c160}.method .m-other{background:#7b2ff7}
.method::after{content:"";margin-left:auto;width:16px;height:16px;border-radius:50%;border:1.5px solid #ffffff40}
.method[aria-checked="true"]::after{border:5px solid #e6298e}

.vip-bar{position:fixed;left:0;right:0;bottom:0;z-index:6;padding:12px var(--gutter);padding-bottom:max(10px,env(safe-area-inset-bottom));background:linear-gradient(180deg,#0e070a00,#0e070a 26%)}
.vip-bar>*{max-width:728px;margin-left:auto;margin-right:auto}
.vip-cta{display:flex;justify-content:center;align-items:center;width:100%;height:52px;border:0;border-radius:14px;background:var(--gy);color:#fff;font-size:18px;font-weight:700;letter-spacing:.06em;cursor:pointer;text-decoration:none;box-shadow:0 10px 30px -12px #e6298ecc}
.vip-cta:disabled{opacity:.6;cursor:wait}
.vip-cta.small{height:44px;font-size:15px}
.vip-help{margin:8px auto 0;text-align:center;font-size:12px;color:var(--muted)}
.vip-help a{color:#ff8fc2;text-decoration:none}
.vip-message{margin:0 auto 8px;text-align:center;font-size:13px;color:#ffb3cf;min-height:0}
.vip-message:empty{display:none}

.vip-sheet{width:min(560px,100%);max-height:80vh;margin:auto auto 0;padding:18px var(--gutter) 24px;border:0;border-radius:18px 18px 0 0;background:#1a0e13;color:var(--text)}
.vip-sheet::backdrop{background:#000a}
.sheet-head{display:flex;justify-content:space-between;align-items:center}
.sheet-head h2{margin:0;font:700 18px var(--serif)}
.sheet-close{background:none;border:0;font-size:18px;color:var(--muted);cursor:pointer}
.history-list{list-style:none;margin:14px 0 0;padding:0}
.history-list li{display:grid;grid-template-columns:1fr auto;gap:2px 10px;padding:12px 0;border-bottom:1px solid var(--line)}
.history-list small{color:var(--faint)}
.history-list em{font-style:normal;font-size:12px;justify-self:end}
.history-list .paid{color:#7fe0a6}.history-list .pending{color:var(--gold)}.history-list .expired{color:var(--faint)}
.history-empty{color:var(--muted);text-align:center;padding:28px 0}
.vip-sheet.result{text-align:center;margin:auto;border-radius:18px}
.result-mark{width:64px;height:64px;margin:6px auto 10px;border-radius:50%;display:grid;place-items:center;font-size:30px;background:var(--gy)}
.result-mark.wait{background:#ffffff14;animation:pulse 1.4s infinite}
@keyframes pulse{50%{opacity:.5}}
.vip-sheet.result h2{margin:0;font:700 20px var(--serif)}
.vip-sheet.result p{color:var(--muted);margin:8px 0 18px}
.result-actions{display:grid;gap:8px}
.text-link{background:none;border:0;color:var(--muted);cursor:pointer;padding:8px}

html[data-lang="en"] .vip-hero h1{font-size:26px}
@media(min-width:760px){.plan-track{justify-content:center;padding:22px 16px}.plan{transform:scale(.94)}.vip-hero h1{font-size:36px}.vip-hero{padding-top:40px}.coin-grid{grid-template-columns:repeat(4,1fr)}}
@media(max-width:360px){.perk-grid{grid-template-columns:repeat(3,1fr)}.vip-tabs{gap:18px}}
@media(prefers-reduced-motion:reduce){.plan{transition:none}.result-mark.wait{animation:none}}