/* 橙果短剧 · 会员与金币前台
 * 独立命名空间，避免影响现有剧集页；深紫底、紫色边光，金色只表示会员价值。
 */
.mq-page {
  --mq-panel: #15101d;
  --mq-panel-2: #1b1325;
  --mq-line: rgba(183,110,232,.25);
  --mq-line-hot: rgba(204,137,246,.62);
  --mq-violet: #b76ee8;
  --mq-violet-hi: #deb4f5;
  --mq-gold: #edcb82;
  --mq-gold-hi: #ffe8ad;
  --mq-muted: #a89daf;
  width: min(100%, 980px);
  margin: 0 auto;
  padding-bottom: 92px;
}
.mq-topbar { display:grid; grid-template-columns:96px 1fr 96px; align-items:center; min-height:52px; margin-bottom:18px; }
.mq-topbar h1 { margin:0; text-align:center; font-size:22px; line-height:1.2; }
.mq-back,.mq-toplink { color:var(--tx3); font-size:14px; }
.mq-back { display:inline-flex; align-items:center; gap:7px; justify-self:start; }
.mq-back svg { width:18px; height:18px; }
.mq-toplink { justify-self:end; }
.mq-back:hover,.mq-toplink:hover { color:var(--mq-violet-hi); }

.mq-hero {
  position:relative; isolation:isolate; overflow:hidden;
  min-height:230px; padding:30px 34px; border:1px solid var(--mq-line-hot); border-radius:22px;
  background:linear-gradient(138deg,#251431 0%,#17101f 58%,#100c16 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04),0 0 32px rgba(139,52,196,.14);
}
.mq-hero::before { content:""; position:absolute; z-index:-1; width:400px; height:400px; right:-130px; top:-270px; border-radius:50%; background:radial-gradient(circle,rgba(198,111,242,.3),rgba(118,45,165,.1) 42%,transparent 70%); }
.mq-hero::after { content:""; position:absolute; z-index:-1; left:0; right:0; bottom:0; height:1px; background:linear-gradient(90deg,transparent,#a455ce 30%,#e2a7ff 52%,#8e45b8 72%,transparent); box-shadow:0 0 14px rgba(189,91,239,.55); }
.mq-brandmark { width:70px; height:70px; color:var(--mq-violet-hi); filter:drop-shadow(0 0 12px rgba(181,89,231,.38)); }
.mq-brandmark svg { width:100%; height:100%; }
.mq-eyebrow { margin-top:20px; color:var(--mq-violet-hi); font-size:12px; font-weight:700; letter-spacing:2px; }
.mq-hero h2 { margin:3px 0 5px; font-size:32px; line-height:1.25; }
.mq-hero-copy { color:var(--tx2); font-size:14px; }
.mq-vip-state { display:inline-flex; align-items:center; gap:7px; margin-top:15px; padding:7px 11px; border:1px solid rgba(237,203,130,.25); border-radius:99px; color:var(--mq-gold); background:rgba(237,203,130,.07); font-size:12px; }
.mq-vip-state svg { width:14px; height:14px; }
.mq-hero-wallet { display:grid; grid-template-columns:1fr auto; align-items:end; min-height:190px; }
.mq-balance { margin-top:5px; font-size:52px; font-weight:850; line-height:1; font-variant-numeric:tabular-nums; }
.mq-balance small { color:var(--mq-muted); font-size:14px; font-weight:500; }
.mq-wallet-link { display:inline-flex; align-items:center; justify-content:center; min-height:38px; padding:0 14px; border:1px solid var(--mq-line); border-radius:99px; background:rgba(183,110,232,.08); color:var(--mq-violet-hi); font-size:12px; }

.mq-section { margin-top:30px; }
.mq-section-head { display:flex; align-items:baseline; gap:10px; margin-bottom:15px; }
.mq-section-head h2 { margin:0; font-size:21px; }
.mq-section-head span { color:var(--mq-muted); font-size:12px; }
.mq-plans { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
.mq-plan,.mq-pack {
  position:relative; min-width:0; padding:21px 12px 16px; border:1px solid var(--mq-line); border-radius:15px;
  background:linear-gradient(180deg,rgba(29,20,39,.95),rgba(18,13,25,.96)); color:var(--tx); text-align:center;
  cursor:pointer; transition:border-color .18s,box-shadow .18s,transform .18s;
}
.mq-plan:hover,.mq-pack:hover { transform:translateY(-2px); border-color:rgba(183,110,232,.48); }
.mq-plan.is-selected,.mq-pack.is-selected { border-color:var(--mq-line-hot); background:linear-gradient(180deg,rgba(68,34,88,.54),var(--mq-panel)); box-shadow:inset 0 0 24px rgba(185,94,232,.06),0 0 18px rgba(143,50,199,.17); }
.mq-badge { position:absolute; left:10px; top:-10px; padding:3px 9px; border-radius:99px; color:#2a1a0c; background:linear-gradient(145deg,var(--mq-gold-hi),#d2a94f); font-size:10px; font-weight:850; }
.mq-plan-name { display:block; font-size:16px; }
.mq-price { margin:14px 0 3px; color:var(--mq-gold-hi); font-size:14px; }
.mq-price strong { font-size:34px; line-height:1; font-variant-numeric:tabular-nums; }
.mq-old { min-height:20px; color:#777080; font-size:12px; text-decoration:line-through; }
.mq-plan-gift { margin:14px -12px -16px; padding:7px 6px; border-top:1px solid rgba(237,203,130,.15); color:var(--mq-gold); font-size:11px; }
.mq-note { margin-top:14px; padding:13px 15px; border:1px solid var(--mq-line); border-radius:12px; background:rgba(23,16,31,.7); color:var(--tx2); font-size:13px; }
.mq-note strong { color:var(--mq-gold); }
.mq-empty { padding:28px 20px; border:1px dashed var(--mq-line); border-radius:14px; color:var(--mq-muted); text-align:center; }

.mq-benefits { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; }
.mq-benefit { padding:14px 4px; text-align:center; }
.mq-benefit-icon { display:grid; place-items:center; width:54px; height:54px; margin:0 auto 9px; border:1px solid rgba(183,110,232,.38); border-radius:17px; background:linear-gradient(145deg,#2b193a,#1a1123); color:var(--mq-violet-hi); box-shadow:0 0 16px rgba(151,58,205,.12); }
.mq-benefit-icon svg { width:26px; height:26px; }
.mq-benefit b { display:block; font-size:14px; }
.mq-benefit small { display:block; color:var(--mq-muted); font-size:11px; }

.mq-packs { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; }
.mq-coin { display:grid; place-items:center; width:44px; height:44px; margin:0 auto 8px; border:1px solid #cd8cf1; border-radius:50%; background:linear-gradient(145deg,#c980ef,#67358a); color:#fff; box-shadow:0 0 15px rgba(174,76,229,.28); font-weight:900; }
.mq-pack b { display:block; }
.mq-pack-bonus { display:block; min-height:20px; color:var(--mq-gold); font-size:11px; }
.mq-pack-price { color:var(--tx2); font-size:14px; }

.mq-tabs { display:flex; margin-top:28px; border-bottom:1px solid var(--mq-line); }
.mq-tab { flex:1; padding:12px; color:var(--mq-muted); }
.mq-tab.is-active { color:var(--mq-violet-hi); border-bottom:2px solid var(--mq-violet); }
.mq-tab-panel[hidden] { display:none; }
.mq-ledger { margin:0; padding:0; list-style:none; }
.mq-ledger li { display:grid; grid-template-columns:1fr auto; gap:6px 16px; padding:15px 3px; border-bottom:1px solid rgba(183,110,232,.13); }
.mq-ledger b { font-size:14px; }
.mq-ledger time,.mq-ledger small { display:block; color:var(--mq-muted); font-size:11px; }
.mq-ledger-amount { align-self:center; font-size:17px; font-weight:750; text-align:right; font-variant-numeric:tabular-nums; }
.mq-ledger-amount.is-plus { color:#79c69a; }

.mq-pay-state { display:flex; align-items:flex-start; gap:10px; margin-top:22px; padding:13px 15px; border:1px solid rgba(237,203,130,.22); border-radius:12px; background:rgba(237,203,130,.055); color:#cbbd9e; font-size:12px; }
.mq-pay-state svg { flex:0 0 18px; width:18px; height:18px; color:var(--mq-gold); }
.mq-sticky { position:fixed; z-index:45; left:50%; bottom:0; display:flex; flex-direction:column; gap:10px; width:min(100%,980px); transform:translateX(-50%); padding:16px 20px calc(16px + env(safe-area-inset-bottom)); background:linear-gradient(180deg,transparent,#0c0a10 30%); }
.mq-cta { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; width:100%; min-height:56px; padding:8px 16px; border:1px solid #6d4086; border-radius:16px; background:linear-gradient(150deg,#4d2868,#311a43); color:#c5b7cd; font-size:16px; font-weight:800; cursor:not-allowed; transition:transform .12s ease, box-shadow .12s ease, filter .12s ease; }
.mq-cta small { font-size:10px; font-weight:500; opacity:.75; }
/* 可点击（未 disabled）的支付/充值按钮：更亮的实心质感 + 指针光标 + 轻微悬浮反馈 */
.mq-cta:not(:disabled) { cursor:pointer; border-color:#a86fd0; background:linear-gradient(150deg,#7a3fb0,#5a2c86); color:#fdf7ff; box-shadow:0 8px 20px -10px rgba(150,90,220,.7); }
.mq-cta:not(:disabled):hover { transform:translateY(-1px); filter:brightness(1.06); box-shadow:0 12px 26px -10px rgba(150,90,220,.85); }
.mq-cta:not(:disabled):active { transform:translateY(0); filter:brightness(.97); }
.mq-cta:not(:disabled) small { opacity:.85; }

/* 我的：资产概览 */
.mq-assets { --mq-line:rgba(183,110,232,.25); --mq-violet-hi:#deb4f5; --mq-gold-hi:#ffe8ad; --mq-muted:#a89daf; display:grid; grid-template-columns:1.3fr 1fr; gap:12px; margin:18px 0 34px; }
.mq-asset-card { position:relative; overflow:hidden; min-height:128px; padding:20px; border:1px solid var(--mq-line); border-radius:15px; background:linear-gradient(140deg,#201329,#130e1a); }
.mq-asset-card::after { content:""; position:absolute; width:150px; height:150px; right:-70px; top:-80px; border-radius:50%; background:radial-gradient(circle,rgba(183,110,232,.19),transparent 68%); }
.mq-asset-label { color:var(--mq-muted); font-size:12px; }
.mq-asset-value { display:block; margin:6px 0 13px; font-size:23px; font-weight:780; }
.mq-asset-value.is-gold { color:var(--mq-gold-hi); }
.mq-asset-link { position:relative; z-index:1; color:var(--mq-violet-hi); font-size:12px; }

/* 详情页选集收费状态 */
.ep-link.has-access { position:relative; padding-right:19px; }
.ep-access-badge { position:absolute; right:4px; top:3px; display:grid; place-items:center; min-width:15px; height:15px; padding:0 3px; border-radius:99px; background:#2b1838; color:#d7a8f0; font-size:8px; font-style:normal; line-height:1; }
.ep-link.is-owned .ep-access-badge,.ep-link.is-vip .ep-access-badge { background:rgba(237,203,130,.13); color:var(--mq-gold); }

@media (max-width:700px) {
  .mq-page { padding-bottom:88px; }
  .mq-topbar { grid-template-columns:74px 1fr 74px; margin-bottom:10px; }
  .mq-topbar h1 { font-size:19px; }
  .mq-hero { min-height:210px; padding:24px 22px; border-radius:18px; }
  .mq-brandmark { width:60px; height:60px; }
  .mq-hero h2 { font-size:28px; }
  .mq-plans { gap:8px; }
  .mq-plan { padding:18px 6px 14px; }
  .mq-plan-gift { margin-left:-6px; margin-right:-6px; margin-bottom:-14px; }
  .mq-price strong { font-size:30px; }
  .mq-benefits { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .mq-packs { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .mq-assets { grid-template-columns:1fr; }
  .mq-hero-wallet { grid-template-columns:1fr; gap:18px; }
  .mq-wallet-link { justify-self:start; }
  .mq-sticky { padding-left:16px; padding-right:16px; }
}
@media (max-width:380px) {
  .mq-topbar { grid-template-columns:64px 1fr 64px; }
  .mq-toplink { font-size:12px; }
  .mq-plan-name { font-size:14px; }
  .mq-price strong { font-size:27px; }
}
@media (prefers-reduced-motion:reduce) { .mq-plan,.mq-pack { transition:none; } }