/* ============================================
   助贷推广系统 - 高级炫酷 UI v5.0
   设计理念: 玻璃拟态 + 渐变 + 丝滑动效
   ============================================ */

/* ============ 基础重置 ============ */
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html{-webkit-text-size-adjust:100%;-webkit-font-smoothing:antialiased}
body{
    font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","Segoe UI",Roboto,sans-serif;
    padding-bottom:80px;
    background:linear-gradient(180deg,#0F172A 0%,#1E1B4B 50%,#312E81 100%);
    min-height:100vh;
    color:#F8FAFC;
    overflow-x:hidden
}
img{max-width:100%;vertical-align:middle}
a{text-decoration:none;color:inherit}
button{font-family:inherit;border:none;background:none;cursor:pointer;outline:none}
input,select,textarea{font-family:inherit}
i[class*="fa-"]{display:inline-flex;align-items:center;justify-content:center}

/* ============ 滚动条隐藏 ============ */
.scrollbar-none::-webkit-scrollbar{display:none}
.scrollbar-none{-ms-overflow-style:none;scrollbar-width:none}

/* ============ 高级动画 ============ */
@keyframes marqueeScroll { 0% { transform: translateX(100%); } 100% { transform: translateX(-100%); } }
@keyframes float { 0%,100%{transform:translateY(0) rotate(0deg)} 50%{transform:translateY(-20px) rotate(2deg)} }
@keyframes pulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.7;transform:scale(1.05)} }
@keyframes fadeIn { from{opacity:0;transform:translateY(20px)} to{opacity:1;transform:translateY(0)} }
@keyframes slideUp { from{opacity:0;transform:translateY(40px)} to{opacity:1;transform:translateY(0)} }
@keyframes shimmer { 0%{background-position:-200% 0} 100%{background-position:200% 0} }
@keyframes pulse-glow { 0%,100%{box-shadow:0 0 30px rgba(139,92,246,0.4)} 50%{box-shadow:0 0 60px rgba(139,92,246,0.8)} }
@keyframes gradient-shift { 0%{background-position:0% 50%} 50%{background-position:100% 50%} 100%{background-position:0% 50%} }
@keyframes blob { 0%,100%{border-radius:60% 40% 30% 70%/60% 30% 70% 40%} 25%{border-radius:30% 60% 70% 40%/50% 60% 30% 60%} 50%{border-radius:50% 60% 30% 60%/30% 60% 70% 40%} 75%{border-radius:60% 40% 60% 30%/70% 30% 50% 60%} }
@keyframes float-slow { 0%,100%{transform:translateY(0) translateX(0)} 33%{transform:translateY(-15px) translateX(10px)} 66%{transform:translateY(10px) translateX(-5px)} }
@keyframes shine { 0%{left:-100%} 100%{left:200%} }
@keyframes breathe { 0%,100%{opacity:0.6;transform:scale(1)} 50%{opacity:1;transform:scale(1.1)} }

.marquee-inner{ display:inline-block; white-space:nowrap; animation:marqueeScroll 25s linear infinite; padding-left:100%; }
.float-anim{animation:float 6s ease-in-out infinite}
.breathe-anim{animation:breathe 3s ease-in-out infinite}
.float-slow{animation:float-slow 8s ease-in-out infinite}
.skeleton{
    background:linear-gradient(90deg,rgba(255,255,255,0.05) 25%,rgba(255,255,255,0.1) 50%,rgba(255,255,255,0.05) 75%);
    background-size:200% 100%;
    animation:shimmer 2s infinite;
    border-radius:16px
}

/* ============ 高级毛玻璃效果 ============ */
.glass{ background:rgba(255,255,255,0.08); backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px); border:1px solid rgba(255,255,255,0.1) }
.glass-light{ background:rgba(255,255,255,0.12); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); border:1px solid rgba(255,255,255,0.15) }
.glass-dark{ background:rgba(15,23,42,0.8); backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px); border:1px solid rgba(255,255,255,0.05) }
.glass-modal{ background:rgba(15,23,42,0.95); backdrop-filter:blur(24px); -webkit-backdrop-filter:blur(24px); border:1px solid rgba(255,255,255,0.1) }

/* ============ 渐变背景 ============ */
.bg-hero-gradient{
    background:linear-gradient(135deg,#667EEA 0%,#764BA2 50%,#F093FB 100%);
    background-size:200% 200%;
    animation:gradient-shift 8s ease infinite;
    position:relative;
    overflow:hidden
}
.bg-hero-gradient::before{
    content:'';
    position:absolute;
    top:-50%;
    right:-50%;
    width:100%;
    height:100%;
    background:radial-gradient(circle,rgba(255,255,255,0.15) 0%,transparent 60%);
    animation:float 10s ease-in-out infinite
}
.bg-vip-gradient{
    background:linear-gradient(135deg,#F59E0B 0%,#EF4444 50%,#EC4899 100%);
    background-size:200% 200%;
    animation:gradient-shift 6s ease infinite;
    position:relative;
    overflow:hidden
}
.bg-premium-gradient{
    background:linear-gradient(135deg,#1E3A8A 0%,#312E81 50%,#7C3AED 100%);
    background-size:200% 200%;
    animation:gradient-shift 10s ease infinite
}
.bg-gold-gradient{
    background:linear-gradient(135deg,#FCD34D 0%,#F59E0B 50%,#D97706 100%);
    background-size:200% 200%;
    animation:gradient-shift 4s ease infinite
}

/* ============ 高级卡片 ============ */
.card-premium{
    background:rgba(255,255,255,0.05);
    backdrop-filter:blur(20px);
    -webkit-backdrop-filter:blur(20px);
    border:1px solid rgba(255,255,255,0.1);
    border-radius:20px;
    transition:all .4s cubic-bezier(0.4,0,0.2,1);
    position:relative;
    overflow:hidden
}
.card-premium::before{
    content:'';
    position:absolute;
    top:0;
    left:-100%;
    width:100%;
    height:100%;
    background:linear-gradient(90deg,transparent,rgba(255,255,255,0.1),transparent);
    transition:left .6s
}
.card-premium:hover::before{left:100%}
.card-premium:hover{
    transform:translateY(-4px);
    border-color:rgba(139,92,246,0.5);
    box-shadow:0 20px 40px rgba(139,92,246,0.2),0 0 60px rgba(139,92,246,0.1)
}
.card-premium:active{transform:scale(.98)}

/* ============ 产品卡片 ============ */
.prod-card{
    background:rgba(255,255,255,0.06);
    backdrop-filter:blur(16px);
    -webkit-backdrop-filter:blur(16px);
    border:1px solid rgba(255,255,255,0.08);
    border-radius:20px;
    padding:1rem;
    cursor:pointer;
    transition:all .3s cubic-bezier(0.4,0,0.2,1);
    position:relative;
    overflow:hidden
}
.prod-card::after{
    content:'';
    position:absolute;
    top:0;
    left:0;
    right:0;
    height:1px;
    background:linear-gradient(90deg,transparent,rgba(255,255,255,0.3),transparent);
    opacity:0;
    transition:opacity .3s
}
.prod-card:hover::after{opacity:1}
.prod-card:hover{
    transform:translateY(-2px);
    border-color:rgba(139,92,246,0.4);
    box-shadow:0 12px 32px rgba(139,92,246,0.15)
}
.prod-card:active{transform:scale(.97)}
.prod-card.filtered{display:none}

.prod-icon{
    width:3rem;
    height:3rem;
    border-radius:16px;
    background:linear-gradient(135deg,#667EEA,#764BA2);
    display:flex;
    align-items:center;
    justify-content:center;
    color:#fff;
    font-weight:900;
    font-size:1.125rem;
    overflow:hidden;
    flex-shrink:0;
    box-shadow:0 8px 20px rgba(102,126,234,0.4);
    position:relative
}
.prod-icon::before{
    content:'';
    position:absolute;
    top:-50%;
    left:-50%;
    width:200%;
    height:200%;
    background:linear-gradient(45deg,transparent 40%,rgba(255,255,255,0.2) 50%,transparent 60%);
    animation:shine 3s infinite
}

/* ============ 佣金标签 ============ */
.commission-tag{ padding:.625rem; border-radius:12px; text-align:center; flex:1; position:relative; overflow:hidden }
.commission-tag.vip{
    background:linear-gradient(135deg,rgba(252,211,77,0.2),rgba(245,158,11,0.2));
    border:1px solid rgba(252,211,77,0.3);
    backdrop-filter:blur(8px)
}
.commission-tag.vip::before{
    content:'';
    position:absolute;
    top:0;
    left:0;
    right:0;
    height:2px;
    background:linear-gradient(90deg,transparent,#FCD34D,transparent)
}
.commission-tag.normal{
    background:rgba(255,255,255,0.05);
    border:1px solid rgba(255,255,255,0.1)
}
.commission-price{ font-size:1rem; font-weight:900; line-height:1.2 }
.commission-price.vip{color:#FCD34D;text-shadow:0 0 20px rgba(252,211,77,0.5)}
.commission-price.normal{color:#94A3B8}
.commission-label{ font-size:.625rem; font-weight:700; text-transform:uppercase; letter-spacing:.05em }
.commission-label.vip{color:#FCD34D}
.commission-label.normal{color:#64748B}

/* ============ 高级按钮 ============ */
.btn-premium{
    background:linear-gradient(135deg,#667EEA,#764BA2);
    background-size:200% 200%;
    animation:gradient-shift 4s ease infinite;
    color:#fff;
    padding:1rem 2rem;
    border-radius:16px;
    font-weight:700;
    font-size:1rem;
    box-shadow:0 8px 32px rgba(102,126,234,0.4);
    transition:all .3s cubic-bezier(0.4,0,0.2,1);
    position:relative;
    overflow:hidden;
    border:none;
    cursor:pointer
}
.btn-premium::before{
    content:'';
    position:absolute;
    top:0;
    left:-100%;
    width:100%;
    height:100%;
    background:linear-gradient(90deg,transparent,rgba(255,255,255,0.2),transparent);
    transition:left .5s
}
.btn-premium:hover::before{left:100%}
.btn-premium:hover{
    transform:translateY(-2px);
    box-shadow:0 12px 40px rgba(102,126,234,0.5)
}
.btn-premium:active{transform:scale(.97)}

.btn-gold{
    background:linear-gradient(135deg,#FCD34D,#F59E0B);
    background-size:200% 200%;
    animation:gradient-shift 3s ease infinite;
    color:#1E293B;
    padding:1rem 2rem;
    border-radius:16px;
    font-weight:800;
    font-size:1rem;
    box-shadow:0 8px 32px rgba(245,158,11,0.4);
    transition:all .3s ease;
    position:relative;
    overflow:hidden
}
.btn-gold::before{
    content:'';
    position:absolute;
    top:0;
    left:-100%;
    width:100%;
    height:100%;
    background:linear-gradient(90deg,transparent,rgba(255,255,255,0.3),transparent);
    transition:left .5s
}
.btn-gold:hover::before{left:100%}
.btn-gold:hover{transform:translateY(-2px);box-shadow:0 12px 40px rgba(245,158,11,0.5)}
.btn-gold:active{transform:scale(.97)}

.btn-ghost{
    background:rgba(255,255,255,0.1);
    backdrop-filter:blur(8px);
    border:1px solid rgba(255,255,255,0.2);
    color:#fff;
    padding:1rem 2rem;
    border-radius:16px;
    font-weight:600;
    transition:all .3s ease
}
.btn-ghost:hover{background:rgba(255,255,255,0.2);border-color:rgba(255,255,255,0.3)}
.btn-ghost:active{transform:scale(.97)}

/* ============ 分类/VIP 按钮 ============ */
.cat-btn{
    display:inline-flex;
    align-items:center;
    gap:.375rem;
    padding:.75rem 1.5rem;
    border-radius:9999px;
    font-size:.875rem;
    font-weight:600;
    white-space:nowrap;
    transition:all .3s cubic-bezier(0.4,0,0.2,1);
    flex-shrink:0;
    border:1px solid rgba(255,255,255,0.1);
    background:rgba(255,255,255,0.05)
}
.cat-btn.active{
    background:linear-gradient(135deg,#667EEA,#764BA2);
    color:#fff;
    box-shadow:0 8px 24px rgba(102,126,234,0.4);
    border-color:transparent
}
.cat-btn.inactive{
    background:rgba(255,255,255,0.05);
    color:#94A3B8;
    border-color:rgba(255,255,255,0.1)
}
.cat-btn:active{transform:scale(.95)}

.vip-cat-btn{
    display:inline-flex;
    align-items:center;
    gap:.375rem;
    padding:.75rem 1.5rem;
    border-radius:9999px;
    font-size:.875rem;
    font-weight:600;
    white-space:nowrap;
    transition:all .3s ease;
    flex-shrink:0;
    border:1px solid rgba(255,255,255,0.1);
    background:rgba(255,255,255,0.05)
}
.vip-cat-btn.active{
    background:linear-gradient(135deg,#F59E0B,#EF4444);
    color:#fff;
    box-shadow:0 8px 24px rgba(245,158,11,0.4);
    border-color:transparent
}
.vip-cat-btn.inactive{
    background:rgba(255,255,255,0.05);
    color:#94A3B8;
    border-color:rgba(255,255,255,0.1)
}

/* ============ 功能入口卡片 ============ */
.menu-card{
    background:rgba(255,255,255,0.06);
    backdrop-filter:blur(16px);
    border:1px solid rgba(255,255,255,0.08);
    border-radius:20px;
    padding:1.25rem;
    display:flex;
    align-items:center;
    gap:1rem;
    cursor:pointer;
    transition:all .3s cubic-bezier(0.4,0,0.2,1)
}
.menu-card:hover{
    background:rgba(255,255,255,0.1);
    border-color:rgba(139,92,246,0.3);
    transform:translateX(4px)
}
.menu-card:active{transform:scale(.98)}
.menu-card.glass-card{ background:rgba(255,255,255,0.08); backdrop-filter:blur(16px); border:1px solid rgba(255,255,255,0.1) }
.menu-card.vip-card{
    background:linear-gradient(135deg,#F59E0B,#EF4444);
    border:0;
    box-shadow:0 8px 32px rgba(245,158,11,0.3)
}
.menu-card.vip-card .menu-title{color:#fff}
.menu-card.vip-card .menu-desc{color:rgba(255,255,255,0.8)}
.menu-text{flex:1;min-width:0}
.menu-title{font-size:.9375rem;font-weight:700;color:#F8FAFC}
.menu-desc{font-size:.8125rem;color:#94A3B8;margin-top:.25rem}
.menu-icon{
    width:3rem;
    height:3rem;
    border-radius:16px;
    display:flex;
    align-items:center;
    justify-content:center;
    flex-shrink:0;
    font-size:1.25rem;
    position:relative;
    overflow:hidden
}
.menu-icon.primary{background:linear-gradient(135deg,rgba(102,126,234,0.3),rgba(118,75,162,0.3));color:#818CF8}
.menu-icon.accent{background:linear-gradient(135deg,rgba(252,211,77,0.3),rgba(245,158,11,0.3));color:#FCD34D}
.menu-icon.success{background:linear-gradient(135deg,rgba(52,211,153,0.3),rgba(16,185,129,0.3));color:#6EE7B7}
.menu-icon.warning{background:linear-gradient(135deg,rgba(252,165,165,0.3),rgba(239,68,68,0.3));color:#FCA5A5}
.menu-icon.danger{background:linear-gradient(135deg,rgba(254,202,202,0.3),rgba(220,38,38,0.3));color:#FCA5A5}
.menu-icon.purple{background:linear-gradient(135deg,rgba(167,139,250,0.3),rgba(124,58,237,0.3));color:#C4B5FD}
.menu-icon.white{background:rgba(255,255,255,0.15);color:#fff}

/* ============ 底部导航 ============ */
.footer-nav{
    position:fixed;
    bottom:0;
    left:0;
    right:0;
    height:80px;
    background:rgba(15,23,42,0.9);
    backdrop-filter:blur(24px);
    -webkit-backdrop-filter:blur(24px);
    border-top:1px solid rgba(255,255,255,0.08);
    display:flex;
    justify-content:space-around;
    align-items:flex-start;
    z-index:1000;
    padding:8px 0 24px;
    box-shadow:0 -8px 32px rgba(0,0,0,0.3)
}
.nav-item{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    color:#64748B;
    font-size:.6875rem;
    font-weight:600;
    cursor:pointer;
    padding:8px 20px;
    gap:4px;
    transition:all .3s cubic-bezier(0.4,0,0.2,1);
    border-radius:16px
}
.nav-item i{font-size:1.5rem;transition:all .3s ease}
.nav-item.active{color:#818CF8}
.nav-item.active i{transform:scale(1.15);filter:drop-shadow(0 0 8px rgba(129,140,248,0.5))}
.nav-item:hover{background:rgba(255,255,255,0.05)}
.nav-item:active i{transform:scale(.9)}

/* ============ Tab 内容切换 ============ */
.content-section{ display:none; opacity:0; transition:opacity .4s ease,transform .4s ease; transform:translateY(20px) }
.content-section.active{ display:block; opacity:1; transform:translateY(0) }

/* ============ 浮动按钮 ============ */
.float-btn{
    position:fixed;
    bottom:100px;
    right:16px;
    width:56px;
    height:56px;
    background:linear-gradient(135deg,#667EEA,#764BA2);
    border-radius:50%;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    color:#fff;
    box-shadow:0 8px 32px rgba(102,126,234,0.5);
    z-index:100;
    transition:all .3s ease;
    animation:pulse-glow 2s ease-in-out infinite
}
.float-btn:active{transform:scale(.9)}
.float-btn i{font-size:1.25rem}

.float-action-btn{
    position:fixed;
    bottom:90px;
    right:16px;
    z-index:1000;
    width:56px;
    height:56px;
    border-radius:50%;
    background:linear-gradient(135deg,#667EEA,#764BA2);
    background-size:200% 200%;
    animation:gradient-shift 4s ease infinite,pulse-glow 3s ease-in-out infinite;
    color:#fff;
    border:none;
    cursor:pointer;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:2px;
    box-shadow:0 8px 32px rgba(102,126,234,0.5);
    transition:all .3s ease;
    font-size:.625rem;
    font-weight:700;
    line-height:1
}
.float-action-btn:hover{transform:scale(1.1)}
.float-action-btn:active{transform:scale(0.92)}
.float-action-btn i{font-size:1.25rem;margin-bottom:1px}

/* ============ 搜索框 ============ */
.search-wrap{
    position:relative;
    display:flex;
    align-items:center
}
.search-icon{
    position:absolute;
    left:1rem;
    color:rgba(129,140,248,0.8);
    font-size:.875rem;
    pointer-events:none;
    z-index:1;
    filter:drop-shadow(0 0 6px rgba(102,126,234,0.4))
}
.search-input,
input#productSearch{
    width:100% !important;
    background:linear-gradient(135deg, rgba(102,126,234,0.15) 0%, rgba(118,75,162,0.15) 100%) !important;
    backdrop-filter:blur(20px) !important;
    -webkit-backdrop-filter:blur(20px) !important;
    border:1px solid rgba(102,126,234,0.25) !important;
    border-radius:16px !important;
    padding:.875rem 2.5rem .875rem 2.75rem !important;
    font-size:.9375rem !important;
    color:#FFFFFF !important;
    outline:none !important;
    transition:all .3s cubic-bezier(0.4,0,0.2,1) !important;
    box-shadow:0 4px 24px rgba(102,126,234,0.15), inset 0 1px 0 rgba(255,255,255,0.1) !important;
    -webkit-appearance:none !important;
    appearance:none !important;
}
.search-input::placeholder,
input#productSearch::placeholder{color:rgba(129,140,248,0.5) !important}
.search-input:focus,
input#productSearch:focus{
    border-color:rgba(102,126,234,0.5) !important;
    background:linear-gradient(135deg, rgba(102,126,234,0.25) 0%, rgba(118,75,162,0.25) 100%) !important;
    box-shadow:0 8px 32px rgba(102,126,234,0.3), inset 0 1px 0 rgba(255,255,255,0.15), 0 0 0 4px rgba(102,126,234,0.15) !important
}
.search-clear{
    position:absolute;
    right:.75rem;
    width:1.5rem;
    height:1.5rem;
    border-radius:50%;
    background:rgba(102,126,234,0.2);
    color:rgba(129,140,248,0.9);
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:.625rem;
    border:1px solid rgba(102,126,234,0.3);
    cursor:pointer;
    transition:all .2s ease
}
.search-clear:hover{background:rgba(102,126,234,0.4);color:#FFFFFF;transform:scale(1.1)}
.search-clear:active{transform:scale(.9)}

/* ============ 通知栏 ============ */
.notice-bar{
    background:rgba(102,126,234,0.15);
    backdrop-filter:blur(16px);
    padding:1rem 1.25rem;
    display:flex;
    align-items:center;
    gap:1rem;
    border-radius:16px;
    margin:1rem;
    border:1px solid rgba(102,126,234,0.2);
    box-shadow:0 4px 24px rgba(102,126,234,0.1)
}
.notice-icon{
    color:#818CF8;
    font-size:1.125rem;
    flex-shrink:0;
    animation:pulse 2s infinite
}

/* ============ 模态框 ============ */
.modal-overlay{
    position:fixed;
    top:0;
    right:0;
    bottom:0;
    left:0;
    background:rgba(0,0,0,0.8);
    backdrop-filter:blur(8px);
    display:flex;
    align-items:center;
    justify-content:center;
    padding:1.5rem;
    z-index:2000;
    animation:fadeIn .3s ease
}
.modal-content{
    background:rgba(15,23,42,0.95);
    backdrop-filter:blur(24px);
    border-radius:24px;
    padding:2rem;
    width:100%;
    max-width:22rem;
    box-shadow:0 24px 80px rgba(0,0,0,0.5);
    border:1px solid rgba(255,255,255,0.1);
    animation:slideUp .4s cubic-bezier(0.4,0,0.2,1);
    position:relative
}
.modal-close{
    position:absolute;
    top:1rem;
    right:1rem;
    width:2rem;
    height:2rem;
    display:flex;
    align-items:center;
    justify-content:center;
    color:#64748B;
    font-size:1.25rem;
    border-radius:50%;
    background:rgba(255,255,255,0.05);
    transition:all .2s;
    border:1px solid rgba(255,255,255,0.1)
}
.modal-close:hover{background:rgba(255,255,255,0.1);color:#94A3B8}

/* ============ 表单 ============ */
.form-input{
    width:100%;
    background:rgba(255,255,255,0.05);
    backdrop-filter:blur(8px);
    padding:1rem 1.25rem;
    border-radius:16px;
    border:1px solid rgba(255,255,255,0.1);
    font-size:1rem;
    outline:none;
    transition:all .3s ease;
    color:#F8FAFC
}
.form-input:focus{
    border-color:#667EEA;
    background:rgba(102,126,234,0.1);
    box-shadow:0 0 0 4px rgba(102,126,234,0.2)
}
.form-input::placeholder{color:#64748B}

/* ============ 复制按钮 ============ */
.copy-btn{
    background:linear-gradient(135deg,#667EEA,#764BA2);
    color:#fff;
    padding:.75rem 1.5rem;
    border-radius:9999px;
    font-size:.875rem;
    font-weight:700;
    box-shadow:0 8px 24px rgba(102,126,234,0.4);
    transition:all .3s ease;
    border:none;
    cursor:pointer
}
.copy-btn:hover{transform:translateY(-2px);box-shadow:0 12px 32px rgba(102,126,234,0.5)}
.copy-btn:active{transform:scale(.95)}

.withdraw-btn{
    background:linear-gradient(135deg,#667EEA,#764BA2);
    background-size:200% 200%;
    animation:gradient-shift 4s ease infinite;
    color:#fff;
    padding:.875rem 2rem;
    border-radius:9999px;
    font-weight:700;
    box-shadow:0 8px 32px rgba(102,126,234,0.4);
    transition:all .3s ease;
    border:none;
    cursor:pointer
}
.withdraw-btn:hover{transform:translateY(-2px);box-shadow:0 12px 40px rgba(102,126,234,0.5)}
.withdraw-btn:active{transform:scale(.95)}

/* ============ VIP 区域 ============ */
.vip-header{
    background:linear-gradient(135deg,#1E3A8A 0%,#312E81 50%,#4C1D95 100%);
    background-size:200% 200%;
    animation:gradient-shift 10s ease infinite;
    padding:3rem 1.5rem 5rem;
    position:relative;
    overflow:hidden
}
.vip-header::before{
    content:'';
    position:absolute;
    top:-50%;
    right:-30%;
    width:80%;
    height:200%;
    background:radial-gradient(ellipse,rgba(139,92,246,0.2) 0%,transparent 60%);
    animation:float 10s ease-in-out infinite
}
.vip-header::after{
    content:'';
    position:absolute;
    bottom:0;
    left:0;
    right:0;
    height:3rem;
    background:linear-gradient(180deg,transparent,#0F172A);
    border-radius:3rem 3rem 0 0
}

.vip-banner{
    background:linear-gradient(135deg,#F59E0B,#EF4444,#EC4899);
    background-size:200% 200%;
    animation:gradient-shift 6s ease infinite;
    border-radius:24px;
    padding:2rem;
    color:#fff;
    box-shadow:0 12px 48px rgba(245,158,11,0.4);
    position:relative;
    overflow:hidden
}
.vip-banner::before{
    content:'';
    position:absolute;
    top:-50%;
    right:-50%;
    width:100%;
    height:100%;
    background:radial-gradient(circle,rgba(255,255,255,0.2) 0%,transparent 60%);
    animation:float 8s ease-in-out infinite
}

/* ============ 用户区域 ============ */
.user-header{
    background:linear-gradient(135deg,#1E3A8A 0%,#312E81 50%,#4C1D95 100%);
    background-size:200% 200%;
    animation:gradient-shift 10s ease infinite;
    padding:3rem 1.5rem 5rem;
    position:relative;
    overflow:hidden;
    color:#fff
}
.user-header::before{
    content:'';
    position:absolute;
    top:-50%;
    left:-50%;
    width:100%;
    height:200%;
    background:radial-gradient(ellipse,rgba(139,92,246,0.15) 0%,transparent 60%);
    animation:float-slow 12s ease-in-out infinite
}
.user-header::after{
    content:'';
    position:absolute;
    bottom:0;
    left:0;
    right:0;
    height:3rem;
    background:linear-gradient(180deg,transparent,#0F172A);
    border-radius:3rem 3rem 0 0
}
.user-avatar{
    width:5rem;
    height:5rem;
    background:linear-gradient(135deg,#667EEA,#764BA2);
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    color:#fff;
    font-weight:900;
    font-size:1.75rem;
    flex-shrink:0;
    border:3px solid rgba(255,255,255,0.3);
    box-shadow:0 8px 32px rgba(102,126,234,0.4),0 0 60px rgba(102,126,234,0.2);
    position:relative
}
.user-avatar.is-vip{
    border:3px solid rgba(251,191,36,0.6);
    box-shadow:0 8px 32px rgba(245,158,11,0.4),0 0 40px rgba(245,158,11,0.3),0 0 60px rgba(239,68,68,0.2)
}
.user-avatar.is-vip::before{
    content:'';
    position:absolute;
    inset:-6px;
    border-radius:50%;
    background:linear-gradient(135deg,#FCD34D,#F59E0B,#EF4444);
    z-index:-2;
    animation:rotate-gradient 3s linear infinite;
    opacity:.6
}
.user-avatar.is-vip::after{
    content:'';
    position:absolute;
    inset:0;
    border-radius:50%;
    background:linear-gradient(135deg,#667EEA,#764BA2);
    z-index:-1
}
@keyframes rotate-gradient{
    0%{filter:hue-rotate(0deg)}
    100%{filter:hue-rotate(360deg)}
}
.user-balance{
    font-size:2.75rem;
    font-weight:900;
    background:linear-gradient(135deg,#FCD34D,#F59E0B,#EF4444);
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
    text-shadow:none;
    filter:drop-shadow(0 2px 12px rgba(252,211,77,0.4));
    letter-spacing:-0.02em
}
.vip-badge{
    position:relative;
    background:linear-gradient(135deg,#FCD34D,#F59E0B,#EF4444);
    color:#1E293B;
    font-size:.6875rem;
    padding:.5rem 1.25rem;
    border-radius:9999px;
    font-weight:800;
    box-shadow:0 4px 20px rgba(245,158,11,0.5),0 0 30px rgba(239,68,68,0.2);
    display:inline-flex;
    align-items:center;
    gap:.375rem;
    text-transform:uppercase;
    letter-spacing:.05em
}
.vip-badge::before{
    content:'';
    position:absolute;
    inset:-2px;
    border-radius:9999px;
    background:linear-gradient(135deg,#FCD34D,#F59E0B,#EF4444);
    z-index:-1;
    opacity:.5;
    filter:blur(8px);
    animation:pulse-glow-vip 2s ease-in-out infinite
}
.vip-badge i{
    font-size:.75rem
}
@keyframes pulse-glow-vip{
    0%,100%{opacity:.4;transform:scale(1)}
    50%{opacity:.7;transform:scale(1.05)}
}

/* ============ 余额卡片 ============ */
.balance-card{
    background:rgba(255,255,255,0.08);
    backdrop-filter:blur(20px);
    margin:0 1rem;
    margin-top:-2rem;
    border-radius:24px;
    padding:1.5rem 2rem;
    box-shadow:0 12px 48px rgba(0,0,0,0.3);
    position:relative;
    display:flex;
    justify-content:space-between;
    align-items:center;
    z-index:10;
    border:1px solid rgba(255,255,255,0.1)
}
.balance-card::before{
    content:'';
    position:absolute;
    top:0;
    left:0;
    right:0;
    height:1px;
    background:linear-gradient(90deg,transparent,rgba(139,92,246,0.5),transparent)
}

/* ============ 空状态 ============ */
.empty-state{
    background:rgba(255,255,255,0.05);
    backdrop-filter:blur(16px);
    border-radius:24px;
    padding:3rem 2rem;
    text-align:center;
    border:1px solid rgba(255,255,255,0.08)
}
.empty-icon{font-size:4rem;opacity:.3;color:#818CF8}

/* ============ 分页器 ============ */
.pager-btn{
    width:2.5rem;
    height:2.5rem;
    border-radius:50%;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    font-size:.8125rem;
    font-weight:600;
    transition:all .2s;
    background:rgba(255,255,255,0.08);
    border:1px solid rgba(255,255,255,0.1);
    color:#94A3B8
}
.pager-btn.active{
    background:linear-gradient(135deg,#667EEA,#764BA2);
    color:#fff;
    border-color:transparent;
    box-shadow:0 4px 16px rgba(102,126,234,0.4)
}
.pager-btn:hover{background:rgba(255,255,255,0.12)}
.pager-btn:disabled{opacity:.4;cursor:not-allowed}
.pager-info{text-align:center;font-size:.6875rem;color:#64748B;margin-top:.75rem}

/* ============ VIP 内容 ============ */
.vip-content-item{
    background:rgba(255,255,255,0.06);
    backdrop-filter:blur(16px);
    border-radius:24px;
    padding:1.5rem;
    border:1px solid rgba(255,255,255,0.08);
    transition:all .3s ease
}
.vip-content-item:hover{
    border-color:rgba(139,92,246,0.3);
    transform:translateY(-2px)
}
.vip-rich-content h3{font-size:1rem;font-weight:800;color:#F8FAFC;margin:1rem 0 .5rem}
.vip-rich-content h3:first-child{margin-top:0}
.vip-rich-content p{font-size:.875rem;color:#94A3B8;line-height:1.7;margin:.5rem 0}
.vip-rich-content ul{padding-left:1.25rem;margin:.5rem 0}
.vip-rich-content li{font-size:.875rem;color:#94A3B8;margin:.25rem 0}
.vip-rich-content img{max-width:100%;border-radius:16px;margin:.75rem 0}
.vip-rich-content strong{color:#F8FAFC}

/* ============ 徽章 ============ */
.badge{
    display:inline-flex;
    align-items:center;
    padding:.375rem .875rem;
    border-radius:9999px;
    font-size:.6875rem;
    font-weight:700;
    gap:.375rem
}
.badge-primary{background:rgba(102,126,234,0.2);color:#818CF8;border:1px solid rgba(102,126,234,0.3)}
.badge-accent{background:rgba(252,211,77,0.2);color:#FCD34D;border:1px solid rgba(252,211,77,0.3)}
.badge-success{background:rgba(52,211,153,0.2);color:#6EE7B7;border:1px solid rgba(52,211,153,0.3)}
.badge-gold{background:linear-gradient(135deg,#FCD34D,#F59E0B);color:#1E293B}

/* ============ 批量面板 ============ */
.batch-panel{
    position:fixed;
    bottom:110px;
    right:16px;
    background:rgba(15,23,42,0.95);
    backdrop-filter:blur(24px);
    border-radius:24px;
    box-shadow:0 16px 64px rgba(0,0,0,0.5);
    padding:1.5rem;
    width:22rem;
    z-index:101;
    border:1px solid rgba(255,255,255,0.1);
    max-height:28rem;
    overflow:hidden;
    display:flex;
    flex-direction:column
}
.batch-panel-slide{animation:slideUp .3s ease}
.batch-panel-header{ display:flex; align-items:center; justify-content:space-between; margin-bottom:1rem }
.batch-panel-title{ font-size:.9375rem; font-weight:700; color:#F8FAFC }
.batch-panel-title i{margin-right:.5rem;color:#818CF8}
.batch-panel-close{ color:#64748B; background:none; border:none; cursor:pointer; font-size:1.25rem; padding:0; transition:color .2s }
.batch-panel-close:hover{color:#94A3B8}
.batch-product-list{ flex:1; overflow-y:auto; margin-bottom:1rem; max-height:18rem }
.batch-product-item{ display:flex; align-items:center; gap:.75rem; padding:.75rem; border-radius:12px; cursor:pointer; transition:all .2s ease; background:rgba(255,255,255,0.03);margin-bottom:.5rem }
.batch-product-item:hover{background:rgba(102,126,234,0.15);border-color:rgba(102,126,234,0.3)}
.batch-checkbox{ width:1.25rem; height:1.25rem; border-radius:8px; border:2px solid rgba(255,255,255,0.2); display:flex; align-items:center; justify-content:center; transition:all .2s ease; flex-shrink:0 }
.batch-checkbox.checked{background:linear-gradient(135deg,#667EEA,#764BA2);border-color:transparent}
.batch-checkbox.checked i{color:#fff;font-size:.625rem}
.batch-product-info{flex:1;min-width:0}
.batch-product-name{ font-size:.8125rem; font-weight:600; color:#F8FAFC; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.batch-product-price{font-size:.6875rem;color:#6EE7B7;margin-top:.25rem}
.batch-result{ margin-top:1rem; padding:1rem; background:rgba(102,126,234,0.1); border-radius:16px; border:1px solid rgba(102,126,234,0.2) }
.batch-result-label{ font-size:.6875rem; font-weight:700; color:#818CF8; text-transform:uppercase; margin-bottom:.5rem }
.batch-result-link{ font-size:.6875rem; color:#F8FAFC; word-break:break-all; margin-bottom:.75rem }

/* ============ 背景装饰 ============ */
.bg-blob-1{
    position:fixed;
    top:-200px;
    right:-200px;
    width:400px;
    height:400px;
    background:linear-gradient(135deg,rgba(102,126,234,0.3),rgba(118,75,162,0.2));
    border-radius:60% 40% 30% 70%/60% 30% 70% 40%;
    filter:blur(80px);
    z-index:-1;
    animation:blob 20s ease-in-out infinite
}
.bg-blob-2{
    position:fixed;
    bottom:-200px;
    left:-200px;
    width:500px;
    height:500px;
    background:linear-gradient(135deg,rgba(236,72,153,0.2),rgba(139,92,246,0.2));
    border-radius:30% 60% 70% 40%/50% 60% 30% 60%;
    filter:blur(100px);
    z-index:-1;
    animation:blob 25s ease-in-out infinite reverse
}

/* ============ 媒体查询 ============ */
@media (min-width:768px) {
    body{max-width:28rem;margin:0 auto;box-shadow:0 0 80px rgba(0,0,0,0.5)}
    .footer-nav{max-width:28rem;left:50%;transform:translateX(-50%)}
}

/* ============ 安全区域适配 ============ */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
    .footer-nav{padding-bottom:calc(24px + env(safe-area-inset-bottom))}
}