/* AUTO-EXTRACTED from 77juzi main.css: jz-profile 个人中心页面样式（自包含，无字体依赖） */

.profile-hero{position:relative;width:100%;min-height:320px;display:flex;align-items:center;justify-content:center;overflow:hidden;background:linear-gradient(135deg,#0f0c29 0%,#1a1a3e 35%,#24243e 70%,#1a1a2e 100%)}
.profile-hero-bg{position:absolute;inset:0;background:radial-gradient(ellipse at 30% 20%,rgba(102,126,234,.15) 0%,transparent 50%),radial-gradient(ellipse at 70% 80%,rgba(168,85,247,.12) 0%,transparent 50%);z-index:1}
.profile-hero-particles{position:absolute;inset:0;z-index:2;pointer-events:none}
@keyframes profileParticleFloat{0%{transform:translateY(0) scale(1);opacity:0}10%{opacity:1}90%{opacity:.5}100%{transform:translateY(-360px) scale(.5);opacity:0}}
.profile-hero-content{position:relative;z-index:5;text-align:center;padding:50px 20px}
@media screen and (max-width:640px){
.profile-hero{min-height:280px}
.profile-hero-content{padding:36px 16px}
}
.jz-profile-page{min-height:60vh;background:transparent}
.jz-profile-hero{position:relative;width:100%;min-height:340px;display:flex;align-items:center;justify-content:center;overflow:hidden;background:linear-gradient(135deg,#0f0c29 0%,#1a1a3e 30%,#24243e 60%,#1a1a2e 100%);background-size:200% 200%;animation:jzProfileGradientShift 12s ease infinite}
@keyframes jzProfileGradientShift{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}
.jz-profile-hero-overlay{position:absolute;inset:0;background:radial-gradient(ellipse at 25% 15%,rgba(102,126,234,.18) 0%,transparent 55%),radial-gradient(ellipse at 75% 85%,rgba(168,85,247,.14) 0%,transparent 55%),radial-gradient(ellipse at 50% 50%,rgba(118,75,162,.08) 0%,transparent 70%);z-index:1}
.jz-profile-hero-particles{position:absolute;inset:0;z-index:2;pointer-events:none}
.jz-profile-particle{position:absolute;bottom:-10px;border-radius:50%;background:rgba(255,255,255,.4);animation:jzProfileParticleFloat linear infinite}
@keyframes jzProfileParticleFloat{0%{transform:translateY(0) scale(1);opacity:0}10%{opacity:1}90%{opacity:.5}100%{transform:translateY(-380px) scale(.5);opacity:0}}
.jz-profile-hero-inner{position:relative;z-index:5;text-align:center;padding:54px 20px}
.jz-profile-avatar-box{position:relative;display:inline-block;width:120px;height:120px;margin-bottom:20px}
.jz-profile-avatar-ring{position:absolute;inset:-8px;border-radius:50%;border:2px solid transparent;background:conic-gradient(from 0deg,rgba(102,126,234,.6),rgba(168,85,247,.5),rgba(102,126,234,.6));-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask-composite:exclude;animation:jzProfileRingRotate 6s linear infinite}
@keyframes jzProfileRingRotate{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}
.jz-profile-avatar-glow{position:absolute;inset:-12px;border-radius:50%;background:radial-gradient(circle,rgba(102,126,234,.3) 0%,transparent 70%);animation:jzProfileAvatarPulse 3s ease-in-out infinite}
@keyframes jzProfileAvatarPulse{0%,100%{opacity:.5;transform:scale(1)}50%{opacity:1;transform:scale(1.08)}}
.jz-profile-avatar{width:100%;height:100%;border-radius:50%;object-fit:cover;border:4px solid rgba(255,255,255,.2);box-shadow:0 8px 32px rgba(0,0,0,.4);position:relative;z-index:2}
.jz-profile-name{font-size:28px;font-weight:700;margin:0 0 12px;letter-spacing:.5px;background:linear-gradient(135deg,#fff 0%,#e0e0ff 50%,#d0d0f0 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;text-shadow:0 2px 20px rgba(102,126,234,.3)}
.jz-profile-tagline{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:8px;margin-bottom:12px}
.jz-profile-tagline .jz-vip-id{font-size:16px;padding:5px 14px;border-radius:8px;display:inline-block}
.jz-profile-rarity{display:inline-block;padding:3px 12px;font-size:12px;color:#fff;border-radius:20px;font-weight:500}
.jz-profile-rarity-empty{display:inline-block;padding:5px 16px;font-size:13px;color:rgba(255,255,255,.7);background:rgba(255,255,255,.1);border-radius:20px;backdrop-filter:blur(4px)}
.jz-profile-role{display:inline-flex;align-items:center;gap:4px;padding:4px 14px;font-size:12px;color:rgba(255,255,255,.85);background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);border-radius:20px;backdrop-filter:blur(4px)}
.jz-profile-bio{font-size:14px;color:rgba(255,255,255,.7);max-width:540px;margin:12px auto 0;line-height:1.7}
.jz-profile-stats{display:flex;gap:0;max-width:960px;margin:-44px auto 0;padding:0 16px;position:relative;z-index:10}
.jz-profile-stat{flex:1;display:flex;align-items:center;gap:14px;padding:20px 22px;background:#fff;box-shadow:0 4px 24px rgba(0,0,0,.07);transition:transform .35s cubic-bezier(.4,0,.2,1),box-shadow .35s;border-right:1px solid #f0f0f0}
.jz-profile-stat:first-child{border-radius:18px 0 0 18px}
.jz-profile-stat:last-child{border-radius:0 18px 18px 0;border-right:none}
.jz-profile-stat:hover{transform:translateY(-6px);box-shadow:0 12px 36px rgba(0,0,0,.12);z-index:2}
.jz-profile-stat-icon{width:48px;height:48px;line-height:48px;border-radius:14px;text-align:center;font-size:22px;flex-shrink:0;color:#fff}
.jz-stat-blue{background:linear-gradient(135deg,#4facfe,#00f2fe)}
.jz-stat-pink{background:linear-gradient(135deg,#fa709a,#fee140)}
.jz-stat-purple{background:linear-gradient(135deg,#a18cd1,#fbc2eb)}
.jz-stat-green{background:linear-gradient(135deg,#43e97b,#38f9d7)}
.jz-profile-stat-info{display:flex;flex-direction:column;justify-content:center}
.jz-profile-stat-num{font-size:24px;font-weight:700;color:#1a1a2e;line-height:1.2}
.jz-profile-stat-label{font-size:12px;color:#999;margin-top:3px}
.jz-profile-body{max-width:960px;margin:0 auto;padding:28px 16px 48px}
.jz-profile-card{background:#fff;border-radius:18px;box-shadow:0 2px 16px rgba(0,0,0,.05);overflow:hidden;margin-bottom:20px;transition:transform .3s cubic-bezier(.4,0,.2,1),box-shadow .3s}
.jz-profile-card:hover{transform:translateY(-3px);box-shadow:0 8px 32px rgba(0,0,0,.1)}
.jz-profile-card-head{display:flex;align-items:center;justify-content:space-between;padding:16px 22px;border-bottom:1px solid #f0f0f0;background:linear-gradient(to right,#fafbff,#fff)}
.jz-profile-card-head h3{font-size:15px;font-weight:600;color:#1a1a2e;margin:0;display:flex;align-items:center;gap:8px}
.jz-profile-card-head h3 .icon{color:#667eea}
.jz-profile-section-link{font-size:13px;color:#667eea;text-decoration:none;transition:opacity .2s;display:inline-flex;align-items:center;gap:2px}
.jz-profile-section-link:hover{opacity:.7}
.jz-profile-badge{font-size:12px;color:#999;background:#f5f5f5;padding:3px 12px;border-radius:12px}
.jz-profile-card-body{padding:22px}
.jz-profile-quick-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.jz-profile-quick-item{display:flex;flex-direction:column;align-items:center;gap:8px;padding:18px 8px;background:linear-gradient(135deg,#f8f9ff,#f0f4ff);border-radius:14px;text-decoration:none;color:#555;transition:all .3s cubic-bezier(.4,0,.2,1);border:1px solid transparent}
.jz-profile-quick-item:hover{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;transform:translateY(-4px) scale(1.03);box-shadow:0 8px 24px rgba(102,126,234,.3);border-color:rgba(102,126,234,.2)}
.jz-profile-quick-item .icon{font-size:24px;color:#667eea;transition:color .3s}
.jz-profile-quick-item:hover .icon{color:#fff}
.jz-profile-quick-item span{font-size:12px;font-weight:500}
.jz-profile-security-list{display:flex;flex-direction:column;gap:10px;margin-bottom:18px}
.jz-profile-security-item{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;background:#f8f9fb;border-radius:12px;transition:background .2s}
.jz-profile-security-item:hover{background:#f0f4ff}
.jz-profile-security-label{font-size:13px;color:#666;display:inline-flex;align-items:center;gap:8px}
.jz-profile-security-label .icon{font-size:14px;color:#999}
.jz-profile-security-status{font-size:12px;font-weight:600;padding:3px 12px;border-radius:20px}
.jz-status-ok{color:#43e97b;background:rgba(67,233,123,.1)}
.jz-status-warn{color:#f59e0b;background:rgba(245,158,11,.1)}
.jz-status-info{color:#667eea;background:rgba(102,126,234,.1)}
.jz-profile-btn{display:inline-flex;align-items:center;gap:6px;padding:10px 28px;font-size:14px;font-weight:500;border:none;border-radius:30px;cursor:pointer;transition:all .3s;text-decoration:none;font-family:inherit}
.jz-profile-btn-primary{color:#fff;background:linear-gradient(135deg,#667eea,#764ba2);box-shadow:0 4px 14px rgba(102,126,234,.35)}
.jz-profile-btn-primary:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(102,126,234,.45)}
.jz-profile-btn-primary:disabled{opacity:.6;cursor:not-allowed;transform:none}
.jz-profile-btn-outline{color:#667eea;background:transparent;border:2px solid #667eea}
.jz-profile-btn-outline:hover{background:#667eea;color:#fff;transform:translateY(-2px)}
.jz-profile-form .jz-profile-form-group{margin-bottom:16px}
.jz-profile-form .jz-profile-form-group label{display:block;font-size:13px;color:#666;margin-bottom:6px;font-weight:500}
.jz-profile-form .jz-profile-form-group input,.jz-profile-form .jz-profile-form-group textarea{width:100%;padding:10px 14px;font-size:14px;border:1px solid #e8e8e8;border-radius:10px;background:#fafafa;transition:all .25s;font-family:inherit;box-sizing:border-box}
.jz-profile-form .jz-profile-form-group input:focus,.jz-profile-form .jz-profile-form-group textarea:focus{border-color:#667eea;box-shadow:0 0 0 3px rgba(102,126,234,.12);background:#fff;outline:none}
.jz-profile-form .jz-profile-form-group textarea{resize:vertical;min-height:72px}
.jz-profile-form-actions{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.jz-profile-form-msg{font-size:13px}
.jz-profile-form-msg.success{color:#43e97b}
.jz-profile-form-msg.error{color:#ef4444}
.jz-profile-card-vip{background:#fff;position:relative;overflow:hidden}
.jz-profile-card-vip::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent,rgba(168,85,247,.4),transparent)}
.jz-profile-card-vip .jz-profile-card-head{border-bottom:1px solid #f0f0f0;background:linear-gradient(to right,#fafbff,transparent)}
.jz-profile-card-vip .jz-profile-card-head h3{color:#1a1a2e}
.jz-profile-card-vip .jz-profile-card-head h3 .icon{color:#a855f7}
.jz-profile-card-vip .jz-profile-section-link{color:#a855f7}
.jz-profile-card-vip .jz-profile-card-body{padding:22px}
.jz-profile-vip-list{display:flex;flex-direction:column;gap:10px;margin-bottom:18px}
.jz-profile-vip-row{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;background:#f8f9fb;border-radius:12px;border:1px solid #f0f0f0;transition:all .25s}
.jz-profile-vip-row:hover{background:#f5f7ff;border-color:rgba(168,85,247,.15)}
.jz-profile-vip-label{font-size:13px;color:#666;display:inline-flex;align-items:center;gap:8px}
.jz-profile-vip-label .icon{font-size:14px}
.jz-profile-vip-value{font-size:14px;font-weight:600;color:#1a1a2e}
.jz-profile-card-vip .jz-profile-vip-value .jz-vip-id{color:#a855f7}
.jz-profile-vip-actions{display:flex;flex-wrap:wrap;gap:8px}
.jz-profile-vip-btn{display:inline-flex;align-items:center;gap:5px;padding:8px 16px;font-size:13px;color:#555;background:#f8f9fb;border:1px solid #e8e8e8;border-radius:10px;text-decoration:none;transition:all .25s}
.jz-profile-vip-btn:hover{color:#a855f7;background:#f5f7ff;border-color:rgba(168,85,247,.3);transform:translateY(-2px)}
.jz-profile-log-list{display:flex;flex-direction:column;gap:8px}
.jz-profile-log-item{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;background:#f8f9fb;border-radius:12px;text-decoration:none;transition:all .25s;border:1px solid transparent}
.jz-profile-log-item:hover{background:#f0f4ff;border-color:rgba(102,126,234,.15);transform:translateX(4px)}
.jz-profile-log-info{flex:1;min-width:0}
.jz-profile-log-title{display:block;font-size:14px;color:#1a1a2e;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-bottom:6px}
.jz-profile-log-meta{display:flex;gap:14px;font-size:12px;color:#999}
.jz-profile-log-meta span{display:inline-flex;align-items:center;gap:3px}
.jz-profile-log-arrow{font-size:16px;color:#ccc;flex-shrink:0;margin-left:12px;transition:color .2s}
.jz-profile-log-item:hover .jz-profile-log-arrow{color:#667eea}
.jz-profile-record-list{display:flex;flex-direction:column;gap:8px}
.jz-profile-record-item{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;background:#f8f9fb;border-radius:12px;transition:background .2s}
.jz-profile-record-item:hover{background:#f0f4ff}
.jz-profile-record-main{display:flex;align-items:center;gap:10px}
.jz-profile-record-num{font-size:15px;font-weight:600;color:#1a1a2e}
.jz-profile-record-meta{display:flex;gap:12px;font-size:12px;color:#999}
.jz-profile-record-price{color:#f5576c;font-weight:500}
.jz-profile-empty{text-align:center}
.jz-profile-empty .jz-profile-card-body{padding:48px 20px}
.jz-profile-empty-icon{font-size:56px;color:#ddd;margin-bottom:14px}
.jz-profile-empty p{color:#999;font-size:14px;margin:0}
.jz-profile-v3 .jz-profile-stats{max-width:1400px;padding:0 20px}
.jz-profile-v3 .jz-profile-body{max-width:1400px;display:grid;grid-template-columns:360px 1fr;gap:24px;padding:28px 20px 56px;margin:0 auto}
.jz-profile-v3 .jz-profile-sidebar{grid-column:1;min-width:0}
.jz-profile-v3 .jz-profile-content{grid-column:2;min-width:0}
.jz-profile-v3 .jz-profile-form-row{display:flex;gap:16px}
.jz-profile-v3 .jz-profile-form-row .jz-profile-form-group{flex:1;min-width:0}
@media(max-width:1024px){
.jz-profile-v3 .jz-profile-body{grid-template-columns:1fr;gap:20px}
}
@media(max-width:768px){
.jz-profile-v3 .jz-profile-body{padding:20px 16px 40px}
.jz-profile-v3 .jz-profile-stats{flex-wrap:wrap;border-radius:18px;max-width:100%}
.jz-profile-v3 .jz-profile-stat{flex:1 1 50%;border-right:none;border-bottom:1px solid #f0f0f0;min-width:calc(50% - 1px)}
.jz-profile-v3 .jz-profile-stat:first-child{border-radius:18px 0 0 0}
.jz-profile-v3 .jz-profile-stat:nth-child(2){border-radius:0 18px 0 0}
.jz-profile-v3 .jz-profile-stat:nth-child(3){border-radius:0 0 0 18px;border-bottom:none}
.jz-profile-v3 .jz-profile-stat:last-child{border-radius:0 0 18px 0;border-bottom:none}
.jz-profile-v3 .jz-profile-form-row{flex-direction:column;gap:0}
.jz-profile-v3 .jz-profile-quick-grid{grid-template-columns:repeat(2,1fr)}
.jz-profile-v3 .jz-profile-hero-inner{padding:40px 16px}
.jz-profile-v3 .jz-profile-name{font-size:22px}
.jz-profile-v3 .jz-profile-avatar-box{width:90px;height:90px}
}
.jz-profile-fade-up{opacity:0;transform:translateY(30px);transition:opacity .6s cubic-bezier(.4,0,.2,1),transform .6s cubic-bezier(.4,0,.2,1);transition-delay:var(--jz-delay,0s)}
.jz-profile-fade-up.jz-in{opacity:1;transform:translateY(0)}
@media screen and (max-width:960px){
.jz-profile-quick-grid{grid-template-columns:repeat(2,1fr)}
.jz-profile-stats{flex-wrap:wrap;gap:12px;padding:0 12px;margin-top:-32px}
.jz-profile-stat{flex:1 1 calc(50% - 6px);border-radius:18px!important;border-right:none!important;border-bottom:1px solid #f0f0f0}
.jz-profile-stat:nth-last-child(-n+2){border-bottom:none}
}
@media screen and (max-width:640px){
.jz-profile-hero{min-height:300px}
.jz-profile-hero-inner{padding:40px 16px}
.jz-profile-avatar-box{width:90px;height:90px}
.jz-profile-name{font-size:22px}
.jz-profile-bio{font-size:13px}
.jz-profile-tagline{gap:6px}
.jz-profile-stats{flex-direction:column;gap:10px;padding:0 12px;margin-top:-26px}
.jz-profile-stat{flex:1 1 100%;border-radius:18px!important;border-right:none!important;border-bottom:1px solid #f0f0f0}
.jz-profile-stat:last-child{border-bottom:none}
.jz-profile-body{padding:16px 12px 32px}
.jz-profile-card-body{padding:16px}
.jz-profile-card-head{padding:14px 16px}
.jz-profile-quick-grid{grid-template-columns:repeat(3,1fr);gap:8px}
.jz-profile-quick-item{padding:14px 4px}
.jz-profile-quick-item .icon{font-size:20px}
.jz-profile-quick-item span{font-size:11px}
.jz-profile-form .jz-profile-form-group input,.jz-profile-form .jz-profile-form-group textarea{font-size:13px}
.jz-profile-vip-row{flex-direction:column;align-items:flex-start;gap:4px}
.jz-profile-log-item{flex-direction:column;align-items:flex-start;gap:6px}
.jz-profile-log-arrow{display:none}
.jz-profile-log-meta{flex-wrap:wrap;gap:10px}
}
@media screen and (max-width:400px){
.jz-profile-avatar-box{width:74px;height:74px}
.jz-profile-name{font-size:19px}
.jz-profile-stat-num{font-size:18px}
.jz-profile-stat-icon{width:40px;height:40px;line-height:40px;font-size:18px}
.jz-profile-quick-grid{grid-template-columns:repeat(2,1fr)}
.jz-profile-vip-actions{gap:6px}
.jz-profile-vip-btn{padding:6px 12px;font-size:12px}
.jz-profile-btn{padding:9px 22px;font-size:13px}
}

/* ===== emoji icon fallback（Juzi 模板无 FontAwesome/Awesome 字体，用 emoji 替代）===== */
.icon { display:inline-block; font-style:normal; font-size:1em; line-height:1; width:1em; text-align:center; -webkit-font-smoothing:antialiased; }
.icon-angle-left:before{content:"❮"}
.icon-angle-right:before{content:"❯"}
.icon-arrow-left:before{content:"⬅️"}
.icon-arrow-right:before{content:"➡️"}
.icon-bookmark:before{content:"🔖"}
.icon-calendar:before{content:"📅"}
.icon-calendar-check:before{content:"📅"}
.icon-calendar-check-o:before{content:"📅"}
.icon-card-membership:before{content:"💳"}
.icon-check:before{content:"✔️"}
.icon-check-circle:before{content:"✅"}
.icon-chevron-left:before{content:"◀"}
.icon-chevron-right:before{content:"▶"}
.icon-clock-o:before{content:"🕐"}
.icon-cog:before{content:"⚙️"}
.icon-comments:before{content:"💬"}
.icon-diamond:before{content:"💎"}
.icon-edit:before{content:"✏️"}
.icon-envelope:before{content:"✉️"}
.icon-exchange:before{content:"🔄"}
.icon-eye:before{content:"👁️"}
.icon-file-text:before{content:"📄"}
.icon-fire:before{content:"🔥"}
.icon-gift:before{content:"🎁"}
.icon-globe:before{content:"🌐"}
.icon-history:before{content:"🕘"}
.icon-id-card:before{content:"🪪"}
.icon-inbox:before{content:"📥"}
.icon-info-circle:before{content:"ℹ️"}
.icon-list:before{content:"📋"}
.icon-lock:before{content:"🔒"}
.icon-money:before{content:"💰"}
.icon-rocket:before{content:"🚀"}
.icon-shield:before{content:"🛡️"}
.icon-shopping-cart:before{content:"🛒"}
.icon-spinner:before{content:"⏳"}
.icon-star:before{content:"⭐"}
.icon-trophy:before{content:"🏆"}
.icon-user:before{content:"👤"}
.icon-spin{animation:jzIconSpin 1.2s infinite linear;display:inline-block}
@keyframes jzIconSpin{from{transform:rotate(0)}to{transform:rotate(360deg)}}/* ============================================================
   juzi-pages.css 追加部分 · 手写样式（深色渐变主题）
   覆盖：通用容器 / 页面头 / 导航标签 / 按钮 / 五级稀有度徽章 /
        靓号商城 / 我的靓号 / 靓号列表 / 规则说明 / 每日签到 / 我的收藏
   ============================================================ */

/* ---------- 通用容器（商城/我的/列表/规则/收藏共用） ---------- */
.jz-vip-container {
    max-width: 1080px;
    margin: 0 auto;
    padding: 0 16px 20px;
    color: #1f2430;
}
.jz-vip-container.body-wrap { padding-top: 26px; }

/* ---------- 页面标题区 ---------- */
.jz-vip-page-header {
    text-align: center;
    padding: 34px 20px 28px;
    border-radius: 20px;
    background:
        radial-gradient(ellipse at 18% 20%, rgba(102,126,234,.22) 0%, transparent 55%),
        radial-gradient(ellipse at 85% 30%, rgba(168,85,247,.16) 0%, transparent 55%),
        linear-gradient(135deg, #0f0c29 0%, #1a1a3e 50%, #24243e 100%);
    background-size: 200% 200%;
    animation: jzPageHeaderFlow 10s ease infinite;
    position: relative;
    overflow: hidden;
    margin-bottom: 18px;
}
@keyframes jzPageHeaderFlow {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}
.jz-vip-page-header::after {
    content: '';
    position: absolute;
    bottom: -60%;
    left: 50%;
    transform: translateX(-50%);
    width: 320px;
    height: 130px;
    background: radial-gradient(ellipse at center, rgba(102,126,234,.35) 0%, transparent 70%);
    filter: blur(4px);
    pointer-events: none;
}
.jz-vip-page-header h1 {
    margin: 0 0 8px;
    font-size: 26px;
    font-weight: 700;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    position: relative;
    z-index: 1;
}
.jz-vip-page-header h1 .zmdi { font-size: 24px; }
.jz-vip-page-header p {
    margin: 0;
    font-size: 13px;
    color: rgba(255,255,255,.65);
    position: relative;
    z-index: 1;
}

/* ---------- 顶部导航标签 ---------- */
.vip-nav-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 10px 4px 14px;
}
.vip-nav-tabs a {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 8px 18px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 600;
    color: #5b6472;
    background: #fff;
    border: 1px solid rgba(99,102,241,.16);
    box-shadow: 0 2px 10px rgba(30,40,90,.04);
    text-decoration: none;
    transition: all .28s ease;
}
.vip-nav-tabs a:hover {
    color: #6366f1;
    border-color: rgba(99,102,241,.5);
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(99,102,241,.18);
}
.vip-nav-tabs a.active {
    color: #fff;
    background: linear-gradient(135deg, #667eea, #764ba2);
    border-color: transparent;
    box-shadow: 0 6px 18px rgba(102,126,234,.4);
}

/* ---------- 通用按钮 / 购买按钮 ---------- */
.vip-buy-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 9px 22px;
    border: none;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 600;
    color: #fff;
    cursor: pointer;
    text-decoration: none;
    background: linear-gradient(135deg, #667eea, #764ba2);
    box-shadow: 0 5px 16px rgba(102,126,234,.38);
    transition: all .28s ease;
    line-height: 1.4;
}
.vip-buy-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 9px 22px rgba(102,126,234,.5);
    color: #fff;
    text-decoration: none;
}
.vip-buy-btn:disabled {
    cursor: not-allowed;
    opacity: .55;
    filter: grayscale(.5);
    transform: none !important;
    box-shadow: none !important;
}

/* ---------- 五级稀有度徽章（页面通用） ---------- */
.rarity-badge-common,
.rarity-badge-rare,
.rarity-badge-epic,
.rarity-badge-legendary,
.rarity-badge-supreme {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    color: #fff;
    letter-spacing: .4px;
    position: relative;
}
.rarity-badge-common { background: linear-gradient(135deg, #94a3b8, #64748b); }
.rarity-badge-rare { background: linear-gradient(135deg, #60a5fa, #2563eb); box-shadow: 0 2px 8px rgba(59,130,246,.4); }
.rarity-badge-epic { background: linear-gradient(135deg, #a78bfa, #7c3aed); box-shadow: 0 2px 8px rgba(139,92,246,.45); }
.rarity-badge-legendary {
    background: linear-gradient(135deg, #fbbf24, #f59e0b, #d97706);
    box-shadow: 0 2px 10px rgba(245,158,11,.5);
    animation: jzRarityGlow 2s ease-in-out infinite alternate;
}
.rarity-badge-supreme {
    background: linear-gradient(135deg, #f87171, #ef4444, #dc2626);
    box-shadow: 0 2px 10px rgba(239,68,68,.55);
    animation: jzRarityGlow 1.6s ease-in-out infinite alternate;
}
@keyframes jzRarityGlow {
    0% { box-shadow: 0 2px 10px rgba(245,158,11,.4); }
    100% { box-shadow: 0 2px 18px rgba(245,158,11,.75); }
}

/* ---------- 空状态 ---------- */
.vip-empty, .jz-shop-empty {
    text-align: center;
    padding: 60px 20px;
    background: #fff;
    border-radius: 18px;
    border: 1px dashed rgba(100,116,139,.28);
    box-shadow: 0 2px 14px rgba(30,40,90,.05);
}
.vip-empty .empty-icon,
.jz-shop-empty .empty-icon {
    font-size: 44px;
    color: #a5b4fc;
    margin-bottom: 12px;
}
.vip-empty p, .jz-shop-empty p {
    font-size: 14px;
    color: #94a3b8;
    margin: 0 0 16px;
}
.empty-refresh {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 7px 18px;
    border-radius: 999px;
    font-size: 13px;
    color: #6366f1;
    background: #eef2ff;
    text-decoration: none;
    transition: all .25s;
}
.empty-refresh:hover { background: #e0e7ff; color: #4f46e5; transform: translateY(-1px); }

/* ---------- 警示条 ---------- */
.vip-alert {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 12px 16px;
    border-radius: 12px;
    font-size: 13px;
    line-height: 1.6;
    margin-bottom: 14px;
}
.vip-alert-info {
    color: #1e40af;
    background: linear-gradient(135deg, #eff6ff, #e0e7ff);
    border: 1px solid rgba(59,130,246,.25);
}

/* ---------- 分页 ---------- */
.vip-pagination, .jz-shop-pagination, .comment-page {
    text-align: center;
    padding: 14px 0;
}
.vip-pagination a, .vip-pagination span,
.jz-shop-pagination a, .jz-shop-pagination span,
.comment-page a, .comment-page span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    height: 32px;
    padding: 0 8px;
    margin: 0 3px;
    border-radius: 9px;
    font-size: 13px;
    color: #5b6472;
    background: #fff;
    border: 1px solid rgba(100,116,139,.18);
    text-decoration: none;
    transition: all .22s;
}
.vip-pagination a:hover, .comment-page a:hover {
    border-color: rgba(99,102,241,.5);
    color: #6366f1;
}
.vip-pagination .page-item.active a, .comment-page .page-item.active a,
.vip-pagination .current, .comment-page .current,
.vip-pagination a.current, .comment-page a.current {
    color: #fff;
    background: linear-gradient(135deg, #667eea, #764ba2);
    border-color: transparent;
}

/* ---------- 靓号商城 hero ---------- */
.jz-shop-hero {
    position: relative;
    margin-bottom: 16px;
    border-radius: 20px;
    overflow: hidden;
    background:
        radial-gradient(ellipse at 15% 15%, rgba(102,126,234,.3) 0%, transparent 55%),
        radial-gradient(ellipse at 50% 120%, rgba(168,85,247,.22) 0%, transparent 55%),
        linear-gradient(135deg, #0f0c29 0%, #1a1a3e 48%, #24243e 100%);
    background-size: 200% 200%;
    animation: jzShopHeroFlow 12s ease infinite;
    padding: 40px 24px 26px;
}
@keyframes jzShopHeroFlow {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}
.hero-bg-decoration { position: absolute; inset: 0; pointer-events: none; }
.hero-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(2px);
    opacity: .5;
    animation: jzOrbFloat 9s ease-in-out infinite alternate;
}
.hero-orb-1 { width: 130px; height: 130px; top: -40px; right: 8%; background: radial-gradient(circle at 35% 35%, rgba(165,180,252,.55), transparent 70%); }
.hero-orb-2 { width: 90px; height: 90px; bottom: -28px; left: 12%; background: radial-gradient(circle at 35% 35%, rgba(232,121,249,.4), transparent 70%); animation-delay: -4s; }
@keyframes jzOrbFloat {
    0% { transform: translateY(0) scale(1); }
    100% { transform: translateY(-16px) scale(1.06); }
}
.orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(3px);
    opacity: .45;
    animation: jzOrbFloat 8s ease-in-out infinite alternate;
}
.orb-1 { width: 150px; height: 150px; top: -55px; left: 6%; background: radial-gradient(circle at 35% 35%, rgba(99,102,241,.6), transparent 70%); }
.orb-2 { width: 110px; height: 110px; bottom: -40px; right: 10%; background: radial-gradient(circle at 35% 35%, rgba(217,70,239,.5), transparent 70%); animation-delay: -3s; }
.orb-3 { width: 60px; height: 60px; top: 30%; right: 26%; background: radial-gradient(circle at 35% 35%, rgba(56,189,248,.5), transparent 70%); animation-delay: -6s; }
.hero-content {
    position: relative;
    z-index: 1;
    text-align: center;
    color: #fff;
}
.hero-icon-wrap {
    width: 64px;
    height: 64px;
    margin: 0 auto 12px;
    border-radius: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 30px;
    color: #fff;
    background: linear-gradient(135deg, rgba(102,126,234,.7), rgba(118,75,162,.7));
    border: 1px solid rgba(255,255,255,.25);
    box-shadow: 0 8px 24px rgba(102,126,234,.45);
    animation: jzHeroIconPulse 3s ease-in-out infinite;
}
@keyframes jzHeroIconPulse {
    0%, 100% { transform: scale(1); box-shadow: 0 8px 24px rgba(102,126,234,.45); }
    50% { transform: scale(1.06); box-shadow: 0 10px 30px rgba(102,126,234,.65); }
}
.hero-title { font-size: 26px; font-weight: 700; margin: 0 0 6px; }
.hero-desc { font-size: 13px; color: rgba(255,255,255,.65); margin: 0 0 20px; }
.hero-stats-row {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 22px;
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 16px;
    padding: 12px 20px;
    max-width: 520px;
    margin: 0 auto;
    backdrop-filter: blur(6px);
}
.hero-stat { text-align: center; }
.hero-stat-num { font-size: 20px; font-weight: 700; color: #fff; }
.hero-stat-label { font-size: 12px; color: rgba(255,255,255,.6); margin-top: 2px; }
.hero-stat-divider { width: 1px; height: 28px; background: rgba(255,255,255,.18); }

/* ---------- 靓号商城 精选区 ---------- */
.jz-shop-featured-section {
    position: relative;
    border-radius: 20px;
    overflow: hidden;
    margin-bottom: 16px;
    padding: 26px 22px 28px;
    background:
        radial-gradient(ellipse at 20% 0%, rgba(168,85,247,.25) 0%, transparent 55%),
        radial-gradient(ellipse at 90% 100%, rgba(99,102,241,.25) 0%, transparent 55%),
        linear-gradient(135deg, #12122e 0%, #1c1c40 55%, #171735 100%);
}
.featured-bg-decoration { position: absolute; inset: 0; pointer-events: none; }
.featured-header { position: relative; z-index: 1; text-align: center; margin-bottom: 20px; }
.featured-title-row { display: flex; align-items: center; justify-content: center; gap: 12px; }
.featured-crown { font-size: 22px; color: #fbbf24; text-shadow: 0 0 10px rgba(251,191,36,.6); }
.featured-title { font-size: 22px; font-weight: 700; color: #fff; margin: 0; }
.featured-subtitle { font-size: 12px; color: rgba(255,255,255,.6); margin: 6px 0 0; }
.featured-cards-row {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}
.featured-card {
    position: relative;
    border-radius: 16px;
    padding: 20px 18px;
    cursor: pointer;
    text-align: center;
    overflow: hidden;
    transition: transform .3s ease, box-shadow .3s ease;
    border: 1px solid rgba(255,255,255,.16);
    background: rgba(255,255,255,.07);
    backdrop-filter: blur(4px);
}
.featured-card:hover { transform: translateY(-5px) scale(1.02); box-shadow: 0 14px 34px rgba(0,0,0,.4); }
.featured-card-glow {
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 50% 0%, rgba(255,255,255,.16), transparent 60%);
    pointer-events: none;
}
.featured-card-legendary { border-color: rgba(245,158,11,.55); }
.featured-card-supreme { border-color: rgba(239,68,68,.55); }
.featured-card-body { position: relative; z-index: 1; }
.featured-number {
    font-size: 30px;
    font-weight: 800;
    letter-spacing: 2px;
    color: #fff;
    margin: 10px 0 8px;
    font-family: "Consolas", "Menlo", monospace;
}
.featured-card-legendary .featured-number { color: #fbbf24; text-shadow: 0 0 16px rgba(245,158,11,.6); }
.featured-card-supreme .featured-number { color: #f87171; text-shadow: 0 0 16px rgba(239,68,68,.6); }
.featured-price { font-size: 14px; font-weight: 600; color: #c7d2fe; margin-bottom: 12px; }
.featured-action {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 16px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    color: #fff;
    background: linear-gradient(135deg, #667eea, #764ba2);
    box-shadow: 0 4px 12px rgba(102,126,234,.4);
    transition: all .25s;
}
.featured-card:hover .featured-action { box-shadow: 0 6px 18px rgba(102,126,234,.6); }

/* ---------- 商城余额卡片 ---------- */
.jz-shop-balance-card {
    position: relative;
    border-radius: 18px;
    overflow: hidden;
    margin-bottom: 16px;
    background: linear-gradient(135deg, #eef2ff, #f5f3ff);
    border: 1px solid rgba(99,102,241,.22);
    box-shadow: 0 6px 22px rgba(99,102,241,.12);
}
.balance-card-bg {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 88% 20%, rgba(168,85,247,.18) 0%, transparent 55%),
        radial-gradient(circle at 12% 90%, rgba(99,102,241,.16) 0%, transparent 55%);
    pointer-events: none;
}
.balance-card-content {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    padding: 18px 22px;
}
.balance-left { display: flex; align-items: center; gap: 14px; }
.balance-avatar {
    width: 50px;
    height: 50px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    color: #fff;
    background: linear-gradient(135deg, #667eea, #764ba2);
    box-shadow: 0 6px 16px rgba(102,126,234,.4);
}
.balance-text { display: flex; flex-direction: column; gap: 2px; }
.balance-label { font-size: 12px; color: #64748b; }
.balance-value { font-size: 24px; font-weight: 800; color: #312e81; }
.balance-unit { font-size: 13px; font-weight: 600; color: #64748b; }
.balance-right { text-align: right; }
.current-vip-label { font-size: 12px; color: #64748b; margin-bottom: 4px; }
.current-vip-display { display: flex; align-items: center; gap: 6px; justify-content: flex-end; }
.no-vip { color: #94a3b8; font-size: 14px; }

/* ---------- 商城筛选条 ---------- */
.jz-shop-filter-bar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 16px;
    padding: 12px 16px;
    background: #fff;
    border-radius: 14px;
    border: 1px solid rgba(100,116,139,.14);
    box-shadow: 0 2px 12px rgba(30,40,90,.04);
}
.filter-label {
    font-size: 13px;
    font-weight: 600;
    color: #475569;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    white-space: nowrap;
}
.filter-pills { display: flex; flex-wrap: wrap; gap: 8px; }
.filter-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 6px 14px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    color: #5b6472;
    background: #f1f5f9;
    border: 1px solid transparent;
    text-decoration: none;
    transition: all .25s;
}
.filter-pill:hover { color: #6366f1; background: #eef2ff; }
.filter-pill.active {
    color: #fff;
    background: linear-gradient(135deg, #667eea, #764ba2);
    box-shadow: 0 4px 12px rgba(102,126,234,.4);
}
.filter-btn {
    display: inline-flex;
    align-items: center;
    padding: 6px 14px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    color: #5b6472;
    background: #f1f5f9;
    border: 1px solid transparent;
    text-decoration: none;
    transition: all .25s;
}
.filter-btn:hover { color: #6366f1; background: #eef2ff; }
.filter-btn.active {
    color: #fff;
    background: linear-gradient(135deg, #667eea, #764ba2);
    box-shadow: 0 4px 12px rgba(102,126,234,.4);
}

/* ---------- 商城靓号卡片网格 ---------- */
.vip-shop-grid, .jz-shop-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-bottom: 8px;
}
@media (max-width: 960px) { .vip-shop-grid, .jz-shop-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 720px) { .vip-shop-grid, .jz-shop-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 420px) { .vip-shop-grid, .jz-shop-grid { grid-template-columns: 1fr; } }

.vip-card, .jz-shop-card {
    position: relative;
    border-radius: 16px;
    padding: 20px 16px 16px;
    background: #fff;
    border: 1px solid rgba(100,116,139,.14);
    box-shadow: 0 4px 16px rgba(30,40,90,.06);
    transition: transform .28s ease, box-shadow .28s ease;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.vip-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 30px rgba(99,102,241,.18);
    border-color: rgba(99,102,241,.4);
}
.card-shine {
    position: absolute;
    top: 0;
    left: -130%;
    width: 60%;
    height: 100%;
    background: linear-gradient(105deg, transparent, rgba(255,255,255,.5), transparent);
    transform: skewX(-18deg);
    transition: left .6s ease;
    pointer-events: none;
}
.vip-card:hover .card-shine { left: 160%; }
.card-status-badge {
    position: absolute;
    top: 10px;
    right: 10px;
    padding: 3px 9px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 700;
    color: #fff;
    z-index: 2;
}
.card-status-sold { background: linear-gradient(135deg, #64748b, #475569); }
.card-status-locked { background: linear-gradient(135deg, #f59e0b, #d97706); }
.card-rarity-row { margin-bottom: 6px; }
.card-number-wrap { margin: 8px 0 10px; text-align: center; }
.card-number-deco { font-size: 18px; margin-bottom: 4px; }
.vip-number {
    font-size: 22px;
    font-weight: 800;
    letter-spacing: 1.5px;
    font-family: "Consolas", "Menlo", monospace;
}
.rarity-common { color: #64748b; }
.rarity-rare { color: #2563eb; }
.rarity-epic { color: #7c3aed; }
.rarity-legendary { color: #d97706; text-shadow: 0 0 10px rgba(245,158,11,.35); }
.rarity-supreme { color: #dc2626; text-shadow: 0 0 10px rgba(239,68,68,.35); }
.card-price-row {
    display: flex;
    align-items: baseline;
    gap: 5px;
    margin-bottom: 14px;
}
.price-currency { font-size: 12px; color: #94a3b8; }
.price-amount { font-size: 20px; font-weight: 800; color: #6366f1; }
.vip-card-sold { filter: grayscale(.55); opacity: .75; }
.vip-card-sold .vip-buy-btn { opacity: .6; }

/* ---------- 商城购买弹窗 ---------- */
.jz-buy-modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: none;
    align-items: center;
    justify-content: center;
    background: rgba(10,12,28,.6);
    backdrop-filter: blur(6px);
    padding: 20px;
}
.jz-buy-modal-overlay.active { display: flex; }
.jz-buy-modal {
    position: relative;
    width: 100%;
    max-width: 380px;
    border-radius: 20px;
    padding: 34px 28px 26px;
    text-align: center;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 24px 70px rgba(15,15,40,.35);
    animation: jzModalPop .3s ease;
}
@keyframes jzModalPop {
    0% { transform: scale(.85); opacity: 0; }
    100% { transform: scale(1); opacity: 1; }
}
.modal-glow {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse at 50% 0%, rgba(102,126,234,.28) 0%, transparent 60%),
        radial-gradient(ellipse at 50% 100%, rgba(168,85,247,.22) 0%, transparent 60%);
    pointer-events: none;
}
.modal-close {
    position: absolute;
    top: 12px;
    right: 14px;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #94a3b8;
    cursor: pointer;
    background: #f1f5f9;
    transition: all .2s;
    z-index: 2;
}
.modal-close:hover { background: #fee2e2; color: #ef4444; }
.modal-icon-wrap {
    width: 60px;
    height: 60px;
    margin: 0 auto 12px;
    border-radius: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    color: #fff;
    background: linear-gradient(135deg, #667eea, #764ba2);
    box-shadow: 0 8px 22px rgba(102,126,234,.45);
}
.modal-title { font-size: 20px; font-weight: 700; color: #1f2430; margin: 0 0 12px; position: relative; z-index: 1; }
.modal-number-display {
    font-size: 34px;
    font-weight: 800;
    letter-spacing: 3px;
    color: #312e81;
    margin-bottom: 14px;
    position: relative;
    z-index: 1;
    font-family: "Consolas", "Menlo", monospace;
}
.modal-price-info {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 16px;
    border-radius: 12px;
    background: #eef2ff;
    font-size: 14px;
    color: #4f46e5;
    margin-bottom: 20px;
    position: relative;
    z-index: 1;
}
.modal-price-value { font-weight: 600; }
.modal-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    position: relative;
    z-index: 1;
}
.modal-btn {
    padding: 11px 12px;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    border: none;
    transition: all .25s;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
}
.modal-btn-cancel { color: #64748b; background: #f1f5f9; }
.modal-btn-cancel:hover { background: #e2e8f0; }
.modal-btn-confirm { color: #fff; background: linear-gradient(135deg, #667eea, #764ba2); box-shadow: 0 6px 16px rgba(102,126,234,.4); }
.modal-btn-confirm:hover { box-shadow: 0 9px 24px rgba(102,126,234,.55); transform: translateY(-1px); }

/* ---------- Toast ---------- */
.jz-shop-toast {
    position: fixed;
    left: 50%;
    top: 70px;
    transform: translate(-50%, -18px);
    z-index: 10001;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 22px;
    border-radius: 12px;
    color: #fff;
    font-size: 14px;
    box-shadow: 0 12px 34px rgba(15,15,40,.3);
    opacity: 0;
    transition: all .3s ease;
    pointer-events: none;
}
.jz-shop-toast.show { opacity: 1; transform: translate(-50%, 0); }
.jz-toast-success { background: linear-gradient(135deg, #10b981, #059669); }
.jz-toast-error { background: linear-gradient(135deg, #f43f5e, #e11d48); }
.jz-toast-info { background: linear-gradient(135deg, #6366f1, #4f46e5); }/* ============================================================
   第二部分：我的靓号 / 靓号规则 / 靓号列表 / 每日签到 / 我的收藏
   ============================================================ */

/* ---------- 我的靓号：余额卡 / 当前靓号 ---------- */
.jz-vip-balance-card {
    position: relative;
    border-radius: 18px;
    overflow: hidden;
    margin-bottom: 16px;
    padding: 24px 26px;
    background:
        radial-gradient(ellipse at 15% 0%, rgba(102,126,234,.3) 0%, transparent 55%),
        radial-gradient(ellipse at 95% 100%, rgba(168,85,247,.26) 0%, transparent 55%),
        linear-gradient(135deg, #0f0c29 0%, #1a1a3e 50%, #24243e 100%);
    background-size: 200% 200%;
    animation: jzVipCardFlow 11s ease infinite;
}
@keyframes jzVipCardFlow {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}
.balance-icon {
    width: 52px;
    height: 52px;
    border-radius: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 25px;
    color: #fff;
    background: linear-gradient(135deg, #667eea, #764ba2);
    box-shadow: 0 8px 20px rgba(102,126,234,.45);
    flex-shrink: 0;
}
.balance-info { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.balance-info .balance-total-label { font-size: 12px; color: rgba(255,255,255,.6); }
.balance-info .points-total {
    font-size: 26px;
    font-weight: 800;
    color: #fff;
    line-height: 1.1;
}
.balance-info .points-total .points-unit { font-size: 13px; color: #c7d2fe; margin-left: 3px; }
.balance-card-top { display: flex; align-items: center; gap: 16px; margin-bottom: 20px; }
.balance-card-footer { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; padding-top: 16px; border-top: 1px solid rgba(255,255,255,.12); }
.balance-card-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.balance-extra-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 9px 20px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 600;
    color: #fff;
    text-decoration: none;
    background: rgba(255,255,255,.12);
    border: 1px solid rgba(255,255,255,.22);
    transition: all .25s;
    cursor: pointer;
}
.balance-extra-btn:hover { background: rgba(255,255,255,.22); color: #fff; text-decoration: none; transform: translateY(-1px); }

.vip-current-card {
    position: relative;
    border-radius: 18px;
    overflow: hidden;
    margin-bottom: 16px;
    padding: 22px 24px;
    background: linear-gradient(135deg, #eef2ff, #faf5ff);
    border: 1px solid rgba(99,102,241,.22);
    box-shadow: 0 6px 22px rgba(99,102,241,.1);
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 14px;
}
.vip-current-left { display: flex; align-items: center; gap: 14px; }
.vip-current-icon {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    color: #fff;
    background: linear-gradient(135deg, #667eea, #764ba2);
    box-shadow: 0 6px 16px rgba(102,126,234,.4);
    flex-shrink: 0;
}
.vip-current-label { font-size: 12px; color: #64748b; margin-bottom: 3px; }
.vip-current-value { display: flex; align-items: center; gap: 8px; }
.vip-current-number {
    font-size: 22px;
    font-weight: 800;
    color: #312e81;
    font-family: "Consolas", "Menlo", monospace;
    letter-spacing: 1px;
}
.vip-current-none { font-size: 14px; color: #94a3b8; }

/* ---------- 我的靓号：记录表 ---------- */
.vip-record-table-wrap {
    background: #fff;
    border-radius: 18px;
    border: 1px solid rgba(100,116,139,.14);
    box-shadow: 0 4px 16px rgba(30,40,90,.05);
    overflow: hidden;
}
.vip-record-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}
.vip-record-table thead th {
    padding: 14px 16px;
    text-align: left;
    font-weight: 600;
    color: #475569;
    background: linear-gradient(135deg, #f1f5f9, #eef2ff);
    border-bottom: 1px solid rgba(100,116,139,.14);
    white-space: nowrap;
}
.vip-record-table tbody td {
    padding: 13px 16px;
    border-bottom: 1px solid rgba(100,116,139,.1);
    color: #475569;
    vertical-align: middle;
}
.vip-record-table tbody tr:last-child td { border-bottom: none; }
.vip-record-table tbody tr:hover td { background: #f8fafc; }
.vip-record-table .vip-record-price { font-weight: 700; color: #6366f1; }
.vip-record-table .vip-record-time { color: #94a3b8; font-size: 12px; }

/* ---------- 靓号规则页 ---------- */
.vip-rules-content { background: #fff; border-radius: 18px; border: 1px solid rgba(100,116,139,.14); box-shadow: 0 4px 16px rgba(30,40,90,.05); padding: 28px; font-size: 13.5px; line-height: 1.9; color: #475569; }
.vip-rules-content h3 { font-size: 17px; color: #1f2430; margin: 0 0 12px; display: flex; align-items: center; gap: 8px; }
.vip-rules-content h3::before { content: ''; width: 4px; height: 18px; border-radius: 3px; background: linear-gradient(180deg, #667eea, #764ba2); }
.vip-rules-content section { margin-bottom: 26px; }
.vip-rules-content section:last-child { margin-bottom: 0; }
.vip-rules-content ul { padding-left: 20px; margin: 8px 0; }
.vip-rules-content li { margin-bottom: 6px; }
.vip-rules-content .highlight { color: #6366f1; font-weight: 600; }
.vip-rules-content .warn { color: #ef4444; font-weight: 600; }
.vip-rarity-showcase {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 12px;
    margin-top: 14px;
}
@media (max-width: 720px) { .vip-rarity-showcase { grid-template-columns: repeat(2, 1fr); } }
.vip-rarity-item {
    border-radius: 14px;
    padding: 18px 12px;
    text-align: center;
    color: #fff;
    transition: transform .25s ease, box-shadow .25s ease;
}
.vip-rarity-item:hover { transform: translateY(-4px); }
.vip-rarity-item:nth-child(1) { background: linear-gradient(135deg, #94a3b8, #64748b); }
.vip-rarity-item:nth-child(2) { background: linear-gradient(135deg, #60a5fa, #2563eb); box-shadow: 0 6px 18px rgba(59,130,246,.35); }
.vip-rarity-item:nth-child(3) { background: linear-gradient(135deg, #a78bfa, #7c3aed); box-shadow: 0 6px 18px rgba(139,92,246,.4); }
.vip-rarity-item:nth-child(4) { background: linear-gradient(135deg, #fbbf24, #d97706); box-shadow: 0 6px 18px rgba(245,158,11,.4); }
.vip-rarity-item:nth-child(5) { background: linear-gradient(135deg, #f87171, #dc2626); box-shadow: 0 6px 18px rgba(239,68,68,.4); }
.rarity-name { font-size: 15px; font-weight: 700; margin-bottom: 6px; }
.rarity-desc { font-size: 11.5px; opacity: .9; line-height: 1.6; }

/* ---------- 靓号列表页：卡片（复用商城卡片） ---------- */
.vip-list-content .filter-label { margin-right: 4px; }
.jz-shop-grid { margin-top: 2px; }

/* ---------- 每日签到页 ---------- */
.jz-checkin-page {
    position: relative;
    border-radius: 20px;
    overflow: hidden;
    background: #fff;
    border: 1px solid rgba(100,116,139,.14);
    box-shadow: 0 6px 24px rgba(30,40,90,.07);
    padding: 24px;
}
@media (max-width: 720px) { .jz-checkin-page { padding: 14px; } }

.jz-checkin-hero {
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    padding: 26px 22px;
    margin-bottom: 18px;
    background:
        radial-gradient(ellipse at 20% 0%, rgba(102,126,234,.35) 0%, transparent 55%),
        radial-gradient(ellipse at 90% 100%, rgba(168,85,247,.3) 0%, transparent 55%),
        linear-gradient(135deg, #0f0c29 0%, #1a1a3e 55%, #24243e 100%);
    background-size: 200% 200%;
    animation: jzVipCardFlow 11s ease infinite;
    display: flex;
    align-items: center;
    gap: 18px;
    flex-wrap: wrap;
}
.checkin-avatar-wrap {
    width: 68px;
    height: 68px;
    border-radius: 50%;
    padding: 3px;
    background: conic-gradient(from 0deg, #667eea, #a855f7, #6366f1, #667eea);
    animation: jzCheckinSpin 6s linear infinite;
    flex-shrink: 0;
}
@keyframes jzCheckinSpin { to { transform: rotate(360deg); } }
.checkin-avatar {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    display: block;
    border: 3px solid #12122e;
}
.checkin-hero-info { flex: 1; min-width: 180px; }
.checkin-hero-name { font-size: 20px; font-weight: 700; color: #fff; margin-bottom: 2px; }
.checkin-hero-name .checkin-hello { font-size: 13px; color: rgba(255,255,255,.65); font-weight: 400; margin-right: 6px; }
.checkin-hero-sub { font-size: 12.5px; color: rgba(255,255,255,.6); }
.checkin-hero-sub .checkin-streak-num { color: #fbbf24; font-weight: 700; }
.jz-checkin-done { display: inline-flex; align-items: center; gap: 4px; padding: 9px 22px; border-radius: 999px; font-size: 13px; font-weight: 600; color: #16a34a; background: rgba(255,255,255,.14); border: 1px solid rgba(74,222,128,.5); cursor: default; }
.jz-checkin-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 10px 26px;
    border: none;
    border-radius: 999px;
    font-size: 14px;
    font-weight: 700;
    color: #fff;
    cursor: pointer;
    background: linear-gradient(135deg, #667eea, #764ba2);
    background-size: 180% 180%;
    box-shadow: 0 8px 22px rgba(102,126,234,.45);
    transition: all .28s ease;
}
.jz-checkin-btn:hover { background-position: 100% 50%; transform: translateY(-2px); box-shadow: 0 12px 28px rgba(102,126,234,.6); }
.jz-checkin-btn:disabled { cursor: not-allowed; opacity: .6; transform: none !important; box-shadow: none !important; }

.jz-checkin-balance {
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 14px 18px;
    border-radius: 14px;
    margin-bottom: 16px;
    background: linear-gradient(135deg, #eef2ff, #f5f3ff);
    border: 1px solid rgba(99,102,241,.2);
}
.jz-checkin-balance-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 21px;
    color: #fff;
    background: linear-gradient(135deg, #667eea, #764ba2);
    box-shadow: 0 5px 14px rgba(102,126,234,.4);
    flex-shrink: 0;
}
.jz-checkin-balance-label { font-size: 12px; color: #64748b; }
.jz-checkin-balance-value { font-size: 21px; font-weight: 800; color: #312e81; }
.jz-checkin-balance-value .balance-unit { font-size: 12px; color: #64748b; font-weight: 600; margin-left: 2px; }

.jz-checkin-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-bottom: 18px;
}
@media (max-width: 600px) { .jz-checkin-stats { grid-template-columns: 1fr; } }
.jz-checkin-stat-card {
    position: relative;
    border-radius: 14px;
    padding: 16px 14px;
    text-align: center;
    overflow: hidden;
    background: linear-gradient(135deg, #f8fafc, #f1f5f9);
    border: 1px solid rgba(100,116,139,.12);
}
.jz-checkin-stat-icon { font-size: 20px; margin-bottom: 6px; }
.jz-checkin-stat-value { font-size: 21px; font-weight: 800; color: #312e81; }
.jz-checkin-stat-label { font-size: 12px; color: #64748b; margin-top: 3px; }

.jz-checkin-calendar-section { background: #f8fafc; border: 1px solid rgba(100,116,139,.12); border-radius: 16px; padding: 18px; margin-bottom: 18px; }
.jz-checkin-calendar-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; flex-wrap: wrap; gap: 8px; }
.jz-checkin-calendar-title { font-size: 15px; font-weight: 700; color: #1f2430; display: flex; align-items: center; gap: 7px; }
.calendar-nav-btn {
    width: 30px;
    height: 30px;
    border: none;
    border-radius: 9px;
    font-size: 14px;
    color: #64748b;
    background: #fff;
    border: 1px solid rgba(100,116,139,.16);
    cursor: pointer;
    transition: all .2s;
    line-height: 1;
}
.calendar-nav-btn:hover { color: #6366f1; border-color: rgba(99,102,241,.5); }
.calendar-month-label { font-size: 14px; font-weight: 600; color: #475569; min-width: 90px; text-align: center; }
.jz-checkin-weekdays {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 6px;
    margin-bottom: 6px;
}
.jz-checkin-weekdays span { text-align: center; font-size: 11.5px; color: #94a3b8; font-weight: 600; padding: 4px 0; }
.jz-checkin-days {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 6px;
}
.jz-checkin-day {
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 11px;
    font-size: 13px;
    color: #475569;
    background: #fff;
    border: 1px solid rgba(100,116,139,.1);
    transition: all .2s;
    position: relative;
}
.jz-checkin-day.today { border-color: #6366f1; color: #6366f1; font-weight: 700; box-shadow: 0 0 0 3px rgba(99,102,241,.12); }
.jz-checkin-day.checked {
    color: #fff;
    font-weight: 700;
    background: linear-gradient(135deg, #667eea, #764ba2);
    border-color: transparent;
    box-shadow: 0 4px 10px rgba(102,126,234,.35);
}
.jz-checkin-day.checked::after {
    content: '✓';
    position: absolute;
    top: -5px;
    right: -5px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #22c55e;
    color: #fff;
    font-size: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 6px rgba(34,197,94,.4);
}
.jz-checkin-day.disabled { color: #cbd5e1; background: #f8fafc; cursor: not-allowed; }

.jz-checkin-rules-section { padding: 2px 4px; }
.jz-checkin-rules-title { font-size: 15px; font-weight: 700; color: #1f2430; margin-bottom: 12px; display: flex; align-items: center; gap: 7px; }
.jz-checkin-rules-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
@media (max-width: 720px) { .jz-checkin-rules-grid { grid-template-columns: 1fr; } }
.jz-checkin-rule-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    border-radius: 14px;
    background: linear-gradient(135deg, #f8fafc, #f1f5f9);
    border: 1px solid rgba(100,116,139,.12);
    transition: transform .25s ease, box-shadow .25s ease;
}
.jz-checkin-rule-card:hover { transform: translateY(-3px); box-shadow: 0 8px 20px rgba(99,102,241,.12); }
.jz-checkin-rule-card .rule-card-icon {
    width: 40px;
    height: 40px;
    border-radius: 11px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 19px;
    color: #fff;
    background: linear-gradient(135deg, #667eea, #764ba2);
    flex-shrink: 0;
}
.jz-checkin-rule-card .rule-card-text { display: flex; flex-direction: column; gap: 1px; }
.rule-card-day { font-size: 13px; font-weight: 700; color: #1f2430; }
.rule-card-reward { font-size: 13px; color: #6366f1; font-weight: 600; }
.rule-card-current { color: #94a3b8; font-size: 11px; }
.rule-card-done { color: #16a34a; font-size: 11px; font-weight: 600; }

.jz-checkin-note {
    display: flex;
    align-items: flex-start;
    gap: 7px;
    margin-top: 12px;
    font-size: 12px;
    color: #94a3b8;
    line-height: 1.7;
    padding: 10px 14px;
    background: #f8fafc;
    border-radius: 10px;
}

/* ---------- 我的收藏页 ---------- */
.jz-fav-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.jz-fav-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 13px 16px;
    border-radius: 14px;
    background: #fff;
    border: 1px solid rgba(100,116,139,.13);
    box-shadow: 0 3px 12px rgba(30,40,90,.05);
    transition: all .25s ease;
    text-decoration: none;
    color: inherit;
}
.jz-fav-item:hover { transform: translateX(4px); border-color: rgba(99,102,241,.4); box-shadow: 0 6px 18px rgba(99,102,241,.14); text-decoration: none; }
.jz-fav-cover {
    width: 84px;
    height: 56px;
    border-radius: 10px;
    object-fit: cover;
    background: linear-gradient(135deg, #eef2ff, #f5f3ff);
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    color: #a5b4fc;
}
.jz-fav-info { flex: 1; min-width: 0; }
.jz-fav-title { font-size: 14.5px; font-weight: 600; color: #1f2430; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-bottom: 4px; }
.jz-fav-item:hover .jz-fav-title { color: #6366f1; }
.jz-fav-time { font-size: 12px; color: #94a3b8; }
.jz-fav-arrow { font-size: 17px; color: #cbd5e1; flex-shrink: 0; transition: all .25s; }
.jz-fav-item:hover .jz-fav-arrow { color: #6366f1; transform: translateX(3px); }
.jz-empty-state { text-align: center; padding: 56px 20px; }
.jz-empty-state .empty-emoji { font-size: 42px; margin-bottom: 12px; }
.jz-empty-state .empty-emoji .zmdi { font-size: 42px; color: #a5b4fc; }
.jz-empty-state p { font-size: 14px; color: #94a3b8; margin: 0 0 18px; }
.jz-empty-state .vip-buy-btn { display: inline-flex; }

/* ---------- jz-profile 记录日期 补丁 ---------- */
.jz-profile-record-date { font-size: 12px; color: #94a3b8; margin-top: 4px; }

/* ---------- zmdi 图标 emoji 兜底（补充映射） ---------- */
.zmdi-bookmark-outline:before { content: '\1F516'; }

/* ---------- 夜间适配 ---------- */
.data-night .jz-vip-container { color: #d7dce6; }
.data-night .vip-nav-tabs a { color: #b8c0d0; background: #232946; border-color: rgba(159,166,255,.2); }
.data-night .vip-nav-tabs a:hover { color: #a5b4fc; border-color: rgba(165,180,252,.5); }
.data-night .vip-card, .data-night .jz-shop-card { background: #232946; border-color: rgba(159,166,255,.15); box-shadow: 0 4px 16px rgba(0,0,0,.3); }
.data-night .vip-card:hover { border-color: rgba(165,180,252,.5); }
.data-night .card-number-deco, .data-night .vip-number { color: #fff; }
.data-night .card-number-deco { color: #fff; }
.data-night .vip-card-sold .vip-number { color: #64748b; }
.data-night .price-currency { color: #94a3b8; }
.data-night .price-amount { color: #a5b4fc; }
.data-night .vip-record-table-wrap { background: #232946; border-color: rgba(159,166,255,.15); }
.data-night .vip-record-table thead th { background: linear-gradient(135deg, #1d2440, #232a4e); color: #c3cbe0; border-bottom-color: rgba(159,166,255,.15); }
.data-night .vip-record-table tbody td { color: #b8c0d0; border-bottom-color: rgba(159,166,255,.1); }
.data-night .vip-record-table tbody tr:hover td { background: #2a3154; }
.data-night .vip-record-table .vip-record-time { color: #7c86a8; }
.data-night .vip-rules-content, .data-night .jz-checkin-page, .data-night .jz-fav-item { background: #232946; border-color: rgba(159,166,255,.15); box-shadow: 0 4px 16px rgba(0,0,0,.3); }
.data-night .vip-rules-content h3,
.data-night .jz-checkin-calendar-title,
.data-night .jz-checkin-rules-title,
.data-night .jz-fav-title { color: #e6e9f2; }
.data-night .vip-rules-content { color: #b8c0d0; }
.data-night .vip-rarity-item { color: #fff; }
.data-night .jz-shop-balance-card { background: linear-gradient(135deg, #232a4e, #2a2a52); border-color: rgba(165,180,252,.25); }
.data-night .balance-label, .data-night .current-vip-label { color: #9aa3c0; }
.data-night .balance-value, .data-night .jz-checkin-balance-value { color: #e6e9f2; }
.data-night .balance-unit { color: #9aa3c0; }
.data-night .vip-current-card { background: linear-gradient(135deg, #232a4e, #2a2a52); border-color: rgba(165,180,252,.25); }
.data-night .vip-current-label { color: #9aa3c0; }
.data-night .vip-current-number { color: #fff; }
.data-night .jz-shop-toast { color: #fff; }
.data-night .jz-checkin-balance { background: linear-gradient(135deg, #232a4e, #2a2a52); border-color: rgba(165,180,252,.22); }
.data-night .jz-checkin-balance-label { color: #9aa3c0; }
.data-night .jz-checkin-stat-card { background: linear-gradient(135deg, #1d2440, #232a4e); border-color: rgba(159,166,255,.15); }
.data-night .jz-checkin-stat-value { color: #e6e9f2; }
.data-night .jz-checkin-stat-label, .data-night .jz-checkin-note { color: #9aa3c0; }
.data-night .jz-checkin-calendar-section { background: #1d2440; border-color: rgba(159,166,255,.15); }
.data-night .calendar-nav-btn { color: #b8c0d0; background: #232946; border-color: rgba(159,166,255,.2); }
.data-night .calendar-month-label, .data-night .jz-checkin-day { color: #b8c0d0; background: #232946; border-color: rgba(159,166,255,.15); }
.data-night .jz-checkin-day.disabled { color: #4c5675; background: #1d2440; }
.data-night .jz-checkin-rule-card { background: linear-gradient(135deg, #1d2440, #232a4e); border-color: rgba(159,166,255,.15); }
.data-night .rule-card-day { color: #e6e9f2; }
.data-night .jz-checkin-hero-name { color: #fff; }
.data-night .jz-fav-cover { background: linear-gradient(135deg, #1d2440, #232a4e); }
.data-night .jz-fav-arrow { color: #4c5675; }
.data-night .filter-label { color: #b8c0d0; }
.data-night .jz-shop-filter-bar { background: #232946; border-color: rgba(159,166,255,.15); }
.data-night .filter-pill, .data-night .filter-btn { color: #b8c0d0; background: #2a3154; }
.data-night .filter-pill:hover, .data-night .filter-btn:hover { color: #a5b4fc; background: #31396a; }
.data-night .vip-empty, .data-night .jz-shop-empty { background: #232946; border-color: rgba(159,166,255,.2); }
.data-night .vip-empty p, .data-night .jz-shop-empty p { color: #9aa3c0; }
.data-night .jz-buy-modal { background: #232946; box-shadow: 0 24px 70px rgba(0,0,0,.55); }
.data-night .modal-title { color: #e6e9f2; }
.data-night .modal-number-display { color: #fff; }
.data-night .modal-price-info { background: #2a3154; color: #a5b4fc; }
.data-night .modal-btn-cancel { color: #b8c0d0; background: #2a3154; }
.data-night .modal-btn-cancel:hover { background: #31396a; }
.data-night .modal-close { color: #9aa3c0; background: #2a3154; }
.data-night .modal-close:hover { background: #4c1d24; color: #fda4af; }
.data-night .jz-profile-record-date { color: #7c86a8; }
.data-night .vip-alert-info { color: #a5b4fc; background: linear-gradient(135deg, #1d2440, #232a4e); border-color: rgba(165,180,252,.25); }/* ============================================================
   第三部分：按页面实际类名补齐（jzcheckin/jzfavorite/jzvip_list/jzvip_shop/jzvip_my/jzvip_rules）
   ============================================================ */

/* ---------- fade-scale / in（77juzi 入场动画占位） ---------- */
.fade-scale { opacity: 0; transform: scale(.94); transition: opacity .45s ease, transform .45s ease; }
.fade-scale.in { opacity: 1; transform: scale(1); }

/* ---------- jz-shop-tabs / jz-shop-buy-btn 兼容 ---------- */
.jz-shop-tabs { margin-bottom: 14px; }
.jz-shop-buy-btn { width: auto; }
.card-price-row { justify-content: center; }

/* ---------- 每日签到页（按 jzcheckin.php 实际类名） ---------- */
.jz-checkin-page { padding: 22px; }
@media (max-width: 720px) { .jz-checkin-page { padding: 12px; } }

.jz-checkin-hero {
    position: relative;
    border-radius: 18px;
    overflow: hidden;
    padding: 30px 24px;
    margin-bottom: 16px;
    color: #fff;
    background:
        radial-gradient(ellipse at 18% 0%, rgba(102,126,234,.4) 0%, transparent 55%),
        radial-gradient(ellipse at 92% 100%, rgba(168,85,247,.35) 0%, transparent 55%),
        linear-gradient(135deg, #0f0c29 0%, #1a1a3e 55%, #24243e 100%);
    background-size: 200% 200%;
    animation: jzVipCardFlow 11s ease infinite;
}
.jz-checkin-hero-bg {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 15% 85%, rgba(99,102,241,.25) 0%, transparent 55%),
        radial-gradient(circle at 85% 15%, rgba(217,70,239,.2) 0%, transparent 55%);
    pointer-events: none;
}
.jz-checkin-hero-content { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap; }
.jz-checkin-user-info { display: flex; align-items: center; gap: 14px; }
.jz-checkin-avatar {
    width: 66px;
    height: 66px;
    border-radius: 50%;
    padding: 3px;
    background: conic-gradient(from 0deg, #667eea, #a855f7, #6366f1, #667eea);
    animation: jzCheckinSpin 6s linear infinite;
    flex-shrink: 0;
}
@keyframes jzCheckinSpin { to { transform: rotate(360deg); } }
.jz-checkin-avatar img { border: 3px solid #12122e; }
.jz-checkin-user-text { display: flex; flex-direction: column; gap: 4px; }
.jz-checkin-username { font-size: 19px; font-weight: 700; color: #fff; }
.jz-checkin-vip { margin-top: 0; }
.jz-checkin-balance {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 20px;
    border-radius: 14px;
    background: rgba(255,255,255,.1);
    border: 1px solid rgba(255,255,255,.16);
    backdrop-filter: blur(4px);
}
.jz-checkin-balance .balance-label { font-size: 12.5px; color: rgba(255,255,255,.68); }
.jz-checkin-balance .balance-value { font-size: 22px; font-weight: 800; color: #fff; }

.jz-checkin-action-area {
    display: flex;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
    padding: 18px 22px;
    margin-bottom: 16px;
    border-radius: 16px;
    background: linear-gradient(135deg, #f8fafc, #f1f5f9);
    border: 1px solid rgba(100,116,139,.12);
}
.jz-checkin-done {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    padding: 10px 20px;
    border-radius: 999px;
    background: linear-gradient(135deg, #d1fae5, #a7f3d0);
    border: 1px solid rgba(16,185,129,.3);
    color: #047857;
    font-size: 13.5px;
    font-weight: 600;
}
.checkin-done-icon { font-size: 18px; color: #10b981; }
.checkin-done-text { font-weight: 700; }
.checkin-done-reward { font-size: 12px; color: #059669; background: rgba(255,255,255,.6); padding: 2px 10px; border-radius: 999px; }
.jz-checkin-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 30px;
    border: none;
    border-radius: 999px;
    font-size: 14px;
    font-weight: 700;
    color: #fff;
    cursor: pointer;
    background: linear-gradient(135deg, #667eea, #764ba2);
    background-size: 180% 180%;
    box-shadow: 0 8px 22px rgba(102,126,234,.45);
    transition: all .28s ease;
}
.jz-checkin-btn:hover { background-position: 100% 50%; transform: translateY(-2px); box-shadow: 0 12px 28px rgba(102,126,234,.6); }
.jz-checkin-btn:disabled { cursor: not-allowed; opacity: .6; transform: none !important; box-shadow: none !important; }
.jz-checkin-btn.checking { opacity: .75; }
.checkin-btn-text { line-height: 1; }
.checkin-reward-hint {
    font-size: 11.5px;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: 999px;
    background: rgba(255,255,255,.22);
}
.jz-checkin-streak { display: flex; flex-direction: column; align-items: center; gap: 3px; }
.streak-flame {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 6px 14px;
    border-radius: 999px;
    background: linear-gradient(135deg, #fff7ed, #ffedd5);
    border: 1px solid rgba(249,115,22,.25);
    color: #ea580c;
    font-size: 13px;
    font-weight: 700;
}
.streak-flame.streak-fire {
    background: linear-gradient(135deg, #f97316, #ef4444);
    color: #fff;
    border-color: transparent;
    box-shadow: 0 4px 14px rgba(239,68,68,.4);
    animation: jzStreakPulse 1.6s ease-in-out infinite alternate;
}
@keyframes jzStreakPulse {
    0% { box-shadow: 0 4px 14px rgba(239,68,68,.35); transform: scale(1); }
    100% { box-shadow: 0 4px 24px rgba(239,68,68,.7); transform: scale(1.05); }
}
.streak-num { font-size: 15px; }
.streak-label { font-size: 12px; color: #7c86a8; }

.jz-checkin-stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin-bottom: 16px;
}
@media (max-width: 900px) { .jz-checkin-stats-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 420px) { .jz-checkin-stats-grid { grid-template-columns: 1fr; } }
.jz-checkin-stat-card {
    position: relative;
    border-radius: 14px;
    padding: 16px 10px;
    text-align: center;
    background: linear-gradient(135deg, #f8fafc, #f1f5f9);
    border: 1px solid rgba(100,116,139,.12);
    overflow: hidden;
    transition: transform .25s ease, box-shadow .25s ease;
}
.jz-checkin-stat-card:hover { transform: translateY(-3px); box-shadow: 0 8px 20px rgba(99,102,241,.14); }
.stat-card-icon { font-size: 21px; margin-bottom: 6px; }
.stat-card-value { font-size: 21px; font-weight: 800; color: #312e81; }
.stat-card-label { font-size: 12px; color: #64748b; margin-top: 3px; }

/* 签到日历（页面用 cal-* 前缀类） */
.jz-checkin-calendar { }
.cal-nav-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: none;
    border-radius: 9px;
    font-size: 14px;
    color: #64748b;
    background: #fff;
    border: 1px solid rgba(100,116,139,.16);
    cursor: pointer;
    transition: all .2s;
    text-decoration: none;
    line-height: 1;
}
.cal-nav-btn:hover { color: #6366f1; border-color: rgba(99,102,241,.5); text-decoration: none; }
.cal-nav-disabled { opacity: .4; cursor: not-allowed; }
.cal-month-title { font-size: 14px; font-weight: 600; color: #475569; }
.cal-weekdays {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 6px;
    margin-bottom: 6px;
}
.cal-weekdays span { text-align: center; font-size: 11.5px; color: #94a3b8; font-weight: 600; padding: 4px 0; }
.cal-days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.cal-day {
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 11px;
    font-size: 13px;
    color: #475569;
    background: #fff;
    border: 1px solid rgba(100,116,139,.1);
    transition: all .2s;
    position: relative;
}
@media (max-width: 640px) {
    .cal-day { height: 32px; font-size: 12px; }
}
.cal-day-empty { background: transparent; border-color: transparent; }
.cal-day-today { border-color: #6366f1; color: #6366f1; font-weight: 700; box-shadow: 0 0 0 3px rgba(99,102,241,.12); }
.cal-day-checked {
    color: #fff;
    font-weight: 700;
    background: linear-gradient(135deg, #667eea, #764ba2);
    border-color: transparent;
    box-shadow: 0 4px 10px rgba(102,126,234,.35);
}
.cal-day-check-icon {
    position: absolute;
    top: -5px;
    right: -5px;
    width: 15px;
    height: 15px;
    font-size: 9px;
    font-style: normal;
    border-radius: 50%;
    background: #22c55e;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 6px rgba(34,197,94,.4);
}

/* 签到规则 */
.rules-section-title {
    font-size: 15px;
    font-weight: 700;
    color: #1f2430;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 7px;
}
.rule-card {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    border-radius: 14px;
    background: linear-gradient(135deg, #f8fafc, #f1f5f9);
    border: 1px solid rgba(100,116,139,.12);
    transition: transform .25s ease, box-shadow .25s ease;
}
.rule-card:hover { transform: translateY(-3px); box-shadow: 0 8px 20px rgba(99,102,241,.12); }
.rule-card-current { border-color: rgba(99,102,241,.5); box-shadow: 0 0 0 2px rgba(99,102,241,.14); }
.rule-card-done { background: linear-gradient(135deg, #d1fae5, #bbf7d0); border-color: rgba(16,185,129,.3); }
.rule-card-day { flex: 1; font-size: 13px; font-weight: 700; color: #1f2430; }
.rule-card-reward { font-size: 15px; color: #6366f1; font-weight: 700; }
.rule-card-unit { font-size: 11px; color: #94a3b8; }
.rule-card-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    height: 22px;
    padding: 0 8px;
    border-radius: 999px;
    font-size: 10.5px;
    font-weight: 700;
    background: #22c55e;
    color: #fff;
}
.rule-card-badge-next { background: linear-gradient(135deg, #fbbf24, #f59e0b); }
.rules-section-note {
    display: flex;
    align-items: flex-start;
    gap: 7px;
    margin-top: 14px;
    font-size: 12px;
    color: #94a3b8;
    line-height: 1.7;
    padding: 10px 14px;
    background: #f8fafc;
    border-radius: 10px;
}

/* 签到结果弹窗（页面用 jz-checkin-modal 结构） */
.jz-checkin-modal {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
}
.jz-checkin-modal.show { display: flex; }
.jz-checkin-modal-overlay {
    position: absolute;
    inset: 0;
    background: rgba(10,12,28,.6);
    backdrop-filter: blur(6px);
}
.jz-checkin-modal-content {
    position: relative;
    width: 100%;
    max-width: 360px;
    border-radius: 22px;
    padding: 36px 28px 28px;
    text-align: center;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 24px 70px rgba(15,15,40,.4);
    animation: jzModalPop .35s ease;
    z-index: 1;
}
.modal-confetti {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 18% 22%, rgba(251,191,36,.35) 0, transparent 22%),
        radial-gradient(circle at 78% 18%, rgba(232,121,249,.3) 0, transparent 20%),
        radial-gradient(circle at 85% 70%, rgba(56,189,248,.28) 0, transparent 24%),
        radial-gradient(circle at 12% 74%, rgba(52,211,153,.28) 0, transparent 20%);
    pointer-events: none;
    animation: jzConfettiTwinkle 2.4s ease-in-out infinite alternate;
}
@keyframes jzConfettiTwinkle {
    0% { opacity: .55; }
    100% { opacity: 1; }
}
.modal-icon {
    position: relative;
    width: 62px;
    height: 62px;
    margin: 0 auto 14px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 30px;
    color: #fff;
    background: linear-gradient(135deg, #10b981, #059669);
    box-shadow: 0 10px 26px rgba(16,185,129,.45);
    animation: jzModalCheckBounce .6s ease;
}
@keyframes jzModalCheckBounce {
    0% { transform: scale(0); }
    60% { transform: scale(1.15); }
    100% { transform: scale(1); }
}
.modal-reward { position: relative; font-size: 20px; font-weight: 800; color: #312e81; margin: 6px 0 4px; }
.modal-streak { position: relative; font-size: 13px; color: #94a3b8; margin-bottom: 20px; }
.modal-close-btn {
    position: relative;
    width: 100%;
    padding: 11px 0;
    border: none;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 600;
    color: #fff;
    cursor: pointer;
    background: linear-gradient(135deg, #667eea, #764ba2);
    box-shadow: 0 6px 16px rgba(102,126,234,.4);
    transition: all .25s;
}
.modal-close-btn:hover { box-shadow: 0 9px 24px rgba(102,126,234,.55); transform: translateY(-1px); }

/* ---------- 靓号列表页 vip-filter-bar ---------- */
.vip-filter-bar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 12px;
    padding: 12px 16px;
    background: #fff;
    border-radius: 14px;
    border: 1px solid rgba(100,116,139,.14);
    box-shadow: 0 2px 12px rgba(30,40,90,.04);
}

/* ---------- 规则页 vip-rules-list ---------- */
.vip-rules-list { padding-left: 20px; margin: 10px 0 0; }
.vip-rules-content h2 {
    font-size: 17px;
    color: #1f2430;
    margin: 0 0 12px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.vip-rules-content h2::before { content: ''; width: 4px; height: 18px; border-radius: 3px; background: linear-gradient(180deg, #667eea, #764ba2); }
.vip-rules-content ol li { margin-bottom: 7px; }

/* ---------- 收藏页 jz-fav-cover-empty ---------- */
.jz-fav-cover-empty { font-size: 20px; color: #a5b4fc; }

/* ---------- modal-price-label ---------- */
.modal-price-label { font-size: 13px; color: #64748b; }

/* ---------- 我的靓号 balance-info 布局（jzvip_my 页面实际结构） ---------- */
.jz-vip-balance-card .balance-info {
    display: flex;
    align-items: center;
    gap: 16px;
    flex: 1;
}
.jz-vip-balance-card .balance-icon {
    width: 52px;
    height: 52px;
    border-radius: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 25px;
    color: #fff;
    background: linear-gradient(135deg, #667eea, #764ba2);
    box-shadow: 0 8px 20px rgba(102,126,234,.45);
    flex-shrink: 0;
}
.jz-vip-balance-card .balance-label { font-size: 12.5px; color: rgba(255,255,255,.66); margin-bottom: 3px; }
.jz-vip-balance-card .balance-value { font-size: 22px; font-weight: 800; color: #fff; }

/* ---------- 夜间适配（第 3 部分补充） ---------- */
.data-night .jz-checkin-page { background: #232946; border-color: rgba(159,166,255,.15); box-shadow: 0 6px 24px rgba(0,0,0,.4); }
.data-night .jz-checkin-action-area { background: linear-gradient(135deg, #1d2440, #232a4e); border-color: rgba(159,166,255,.15); }
.data-night .jz-checkin-stat-card { background: linear-gradient(135deg, #1d2440, #232a4e); border-color: rgba(159,166,255,.15); }
.data-night .stat-card-value { color: #e6e9f2; }
.data-night .stat-card-label { color: #9aa3c0; }
.data-night .jz-checkin-calendar-section { background: #1d2440; border-color: rgba(159,166,255,.15); }
.data-night .cal-nav-btn { color: #b8c0d0; background: #232946; border-color: rgba(159,166,255,.2); }
.data-night .cal-month-title { color: #b8c0d0; }
.data-night .cal-weekdays span { color: #7c86a8; }
.data-night .cal-day { color: #b8c0d0; background: #232946; border-color: rgba(159,166,255,.15); }
.data-night .cal-day-empty { background: transparent; border-color: transparent; }
.data-night .cal-day-disabled, .data-night .cal-day-empty { color: #4c5675; }
.data-night .rules-section-title { color: #e6e9f2; }
.data-night .rule-card { background: linear-gradient(135deg, #1d2440, #232a4e); border-color: rgba(159,166,255,.15); }
.data-night .rule-card-day { color: #e6e9f2; }
.data-night .rule-card-done { background: linear-gradient(135deg, #064e3b, #065f46); border-color: rgba(16,185,129,.35); }
.data-night .rules-section-note { background: #1d2440; color: #7c86a8; }
.data-night .jz-checkin-modal-content { background: #232946; box-shadow: 0 24px 70px rgba(0,0,0,.55); }
.data-night .modal-reward { color: #fff; }
.data-night .modal-streak { color: #9aa3c0; }
.data-night .vip-filter-bar { background: #232946; border-color: rgba(159,166,255,.15); }
.data-night .vip-rules-content h2 { color: #e6e9f2; }
.data-night .vip-rules-list strong { color: #e6e9f2; }
.data-night .jz-vip-balance-card .balance-value { color: #fff; }
.data-night .jz-vip-balance-card .balance-label { color: rgba(255,255,255,.66); }
/* ---------- icon-spin 旋转动画 ---------- */
.icon-spin { animation: jzIconSpin 1.2s linear infinite; display: inline-block; }
@keyframes jzIconSpin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }

/* ---------- Juzi 模板辅助类兜底 ---------- */
.panel-box { display: block; }