/* 装饰商店改版 + 会员面板（2026-11-02）。在 rewards.css / pro-checkout.css / leaderboard-effects-white.css 之后加载，
   只覆盖 #shopPage 和 #membershipPage。商店：左边一列分类，右边枪型切换 + 卡片网格；PRO 不再出现在商店里。 */

/* ---------- 装饰商店 ---------- */
#shopPage.rewards-window{width:min(1180px,calc(100vw - 40px));background:#f5f7f9}
#shopPage .rewards-heading{padding:20px 28px 18px}
#shopPage .rewards-heading h2{margin:4px 0 0;font-size:26px}
#shopPage .rewards-heading p{display:none}
#shopPage .rewards-balance{height:42px;border-radius:11px}
#shopPage .rewards-user-state{padding:20px 28px 28px}
#shopPage .rewards-shop-section{display:grid;grid-template-columns:176px minmax(0,1fr);grid-template-rows:auto 1fr;column-gap:24px;padding:0;border:0;border-radius:0;background:transparent;box-shadow:none}
#shopPage .rewards-shop-section>.rewards-section-header{display:contents}
#shopPage .rewards-shop-section>.rewards-section-header>div:first-child{display:none}

/* 左侧分类 */
#shopPage .rewards-shop-tabs{grid-column:1;grid-row:1/3;align-self:start;position:sticky;top:96px;display:flex;flex-direction:column;flex-wrap:nowrap;justify-content:flex-start;gap:2px;padding:6px;border:1px solid #e3e9ec;border-radius:14px;background:#fff}
#shopPage .rewards-shop-tabs button{position:relative;height:40px;padding:0 14px;border-radius:9px;color:#5f6d77;font-size:13px;font-weight:600;text-align:left;transition:background .15s ease,color .15s ease}
#shopPage .rewards-shop-tabs button:hover{background:#f3f7f8;color:#26404e}
#shopPage .rewards-shop-tabs button.active{background:#e9f7f9;color:#0b8698;box-shadow:none;font-weight:700}
#shopPage .rewards-shop-tabs button.active:before{content:"";position:absolute;left:0;top:10px;bottom:10px;width:3px;border-radius:0 3px 3px 0;background:#13b8cf}

/* 右侧：枪型切换 + 网格 */
#shopPage .rewards-family-tabs{grid-column:2;grid-row:1;justify-self:start;margin:0 0 14px;padding:3px;border-color:#e3e9ec;border-radius:10px;background:#fff}
#shopPage .rewards-family-tabs button{height:32px;min-width:96px;padding:0 16px;border-radius:8px;font-size:13px;font-weight:600}
#shopPage .rewards-family-tabs button.active{background:#e9f7f9;color:#0b8698;box-shadow:none}
#shopPage .rewards-catalog{grid-column:2;grid-row:2;align-self:start;grid-template-columns:repeat(auto-fill,minmax(196px,1fr));gap:14px}
#shopPage .scene-shop-grid{grid-template-columns:repeat(auto-fill,minmax(230px,1fr))!important;gap:14px!important}

/* 卡片 */
#shopPage .reward-item{position:relative;border:1px solid #e3e9ec;border-radius:14px;background:#fff;transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}
#shopPage .reward-item:hover{transform:translateY(-2px);border-color:#cfe3e8;box-shadow:0 10px 24px -14px rgba(20,48,60,.35)}
#shopPage .reward-item-preview{height:146px}
#shopPage .reward-item-body{min-height:0;padding:12px 14px 14px;gap:0}
#shopPage .reward-item-body .weapon-quality{position:absolute;top:10px;left:10px;z-index:3;margin:0}
#shopPage .reward-item-body strong{color:#1d2a33;font-size:13.5px;font-weight:600}
#shopPage .reward-item-footer{padding-top:12px}
#shopPage .reward-item-price{font-size:12.5px}
#shopPage .reward-item-button{height:32px;padding:0 14px;border-radius:8px;font-size:12px}
#shopPage .reward-item-button[data-reward-action="purchase"]{border-color:#13b8cf;background:#13b8cf;color:#fff}
#shopPage .reward-item-button[data-reward-action="purchase"]:hover{border-color:#0fa3b8;background:#0fa3b8}
#shopPage .reward-item-button.equipped{border-color:#bce8d2;background:#effbf4;color:#168653}

@media(max-width:760px){
  #shopPage .rewards-user-state{padding:14px 14px 20px}
  #shopPage .rewards-shop-section{grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto 1fr}
  #shopPage .rewards-shop-tabs{grid-column:1;grid-row:1;position:static;flex-direction:row;overflow-x:auto;margin-bottom:12px;scrollbar-width:none}
  #shopPage .rewards-shop-tabs button{flex:none;height:34px;font-size:12.5px}
  #shopPage .rewards-shop-tabs button.active:before{display:none}
  #shopPage .rewards-family-tabs{grid-column:1;grid-row:2}
  #shopPage .rewards-catalog{grid-column:1;grid-row:3;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
  #shopPage .reward-item-preview{height:118px}
}

/* ---------- 会员 ---------- */
#membershipPage.rewards-window{width:min(940px,calc(100vw - 40px));background:#f5f7f9}
#membershipPage .rewards-heading{display:flex;align-items:center;justify-content:space-between;padding:20px 28px 18px}
#membershipPage .rewards-heading h2{margin:4px 0 0;font-size:26px}
.membership-body{display:grid;gap:18px;padding:22px 28px 30px}
.membership-hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center;gap:28px;padding:26px 30px;border-radius:18px;background:radial-gradient(120% 140% at 0% 0%,#2a3a63 0%,#151c30 55%,#10151f 100%);color:#eef2ff;box-shadow:0 18px 40px -22px rgba(16,24,48,.6)}
.membership-hero .pro-member-card{height:172px;margin:0}
.membership-plan{display:grid;gap:14px}
.membership-plan-head{display:flex;align-items:center;justify-content:space-between;gap:12px}
.membership-plan-head strong{font-size:18px;letter-spacing:.3px}
.membership-status{padding:5px 10px;border-radius:999px;background:rgba(255,255,255,.1);color:#b9c6e4;font-size:12px;white-space:nowrap}
#membershipPage.is-pro .membership-status{background:rgba(62,230,197,.16);color:#7ff0d6}
.membership-price{display:flex;align-items:baseline;gap:4px;color:#fff;font-size:20px;font-weight:600}
.membership-price b{font-family:var(--font-num,inherit);font-size:44px;line-height:1;font-variant-numeric:tabular-nums}
.membership-price small{margin-left:6px;color:#9fb0d3;font-size:13px;font-weight:500}
.membership-cta{display:flex;align-items:center;justify-content:center;gap:10px;height:46px;border:0;border-radius:12px;background:linear-gradient(100deg,#9fb8ff,#c7a8ff 55%,#8fe3f0);color:#151c30;font:inherit;font-size:15px;font-weight:700;cursor:pointer;transition:transform .18s ease,filter .18s ease}
.membership-cta:hover{transform:translateY(-1px);filter:brightness(1.05)}
.membership-cta svg{width:18px;height:18px}
.membership-cta:focus-visible{outline:2px solid #fff;outline-offset:3px}
.membership-benefits{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;margin:0;padding:0;list-style:none}
.membership-benefits li{display:grid;align-content:start;gap:6px;padding:16px 14px;border:1px solid #e3e9ec;border-radius:14px;background:#fff}
.membership-benefit-icon{display:grid;place-items:center;width:38px;height:38px;margin-bottom:4px;border-radius:11px;background:linear-gradient(135deg,#eef1ff,#e8f8fb);color:#5a6fc4}
.membership-benefit-icon svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.membership-benefits strong{color:#1d2a33;font-size:13.5px;line-height:1.35}
.membership-benefits small{color:#8a959e;font-size:12px;line-height:1.45}
@media(max-width:860px){.membership-benefits{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:640px){
  .membership-body{padding:14px 14px 20px}
  .membership-hero{grid-template-columns:minmax(0,1fr);gap:18px;padding:18px}
  .membership-hero .pro-member-card{height:130px}
  .membership-price b{font-size:36px}
}
@media(prefers-reduced-motion:reduce){#shopPage .reward-item,.membership-cta{transition:none}#shopPage .reward-item:hover,.membership-cta:hover{transform:none}}