@charset "utf-8";
/* CSS Document - 现代科技简约版（基于原版安全改色） */
:root {
    /* ★ 仅替换颜色变量，其余全部保持原样 */
    --kf-red-primary: #00D4FF;
    --kf-red-dark: #0099CC;
    --kf-red-light: #7B61FF;
    --kf-red-glow: rgba(0, 212, 255, 0.35);
    --kf-gradient-red: linear-gradient(135deg, #00D4FF 0%, #0099CC 50%, #7B61FF 100%);
    --kf-gradient-btn: linear-gradient(135deg, #00D4FF 0%, #0099CC 100%);
    --kf-vip-gradient: linear-gradient(135deg, rgba(0,212,255,0.75) 0%, rgba(0,153,204,0.7) 40%, rgba(123,97,255,0.75) 100%);
    --kf-dark-bg: rgba(12, 14, 20, 0.88);
    --kf-dark-border: rgba(255, 255, 255, 0.08);
    --kf-dark-card: rgba(255, 255, 255, 0.04);
    --kf-dark-card-hover: rgba(255, 255, 255, 0.08);
    --kf-font: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
    --kf-transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ★ 排版隔离 - 完全保留原样 */
#contactModal h2, #contactModal p, #contactModal span:not(.secret-text), 
#contactModal button, #contactModal .item-label, #contactModal .item-value,
#vipPopup p, #vipPopup span, #vipPopup button,
#floatBtn span, #cornerBtn span, #toast {
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    font-family: var(--kf-font) !important;
    line-height: 1.4 !important;
    text-transform: none !important;
    letter-spacing: normal !important;
}

/* ========== 右侧浮动按钮 ========== */
#floatBtn {
    position: fixed !important; right: 0 !important; top: 50% !important;
    transform: translateY(-50%) !important; z-index: 9500 !important;
    display: flex !important; flex-direction: column !important; align-items: center !important; gap: 4px !important;
    padding: 14px 12px !important; background: var(--kf-gradient-red) !important;
    border-radius: 16px 0 0 16px !important; box-shadow: -4px 0 20px var(--kf-red-glow) !important;
    transition: transform 0.25s ease, opacity 0.25s ease, padding 0.35s ease, box-shadow 0.35s ease !important;
    animation: kf-pulseBtn 2.5s ease-in-out infinite !important; pointer-events: auto !important;
	touch-action: manipulation !important;
    isolation: isolate !important;
	cursor: pointer !important;
}
#floatBtn.hidden { transform: translateY(-50%) translateX(110%) !important; opacity: 0 !important; pointer-events: none !important; animation: none !important; }
#floatBtn:hover { padding-right: 20px !important; box-shadow: -6px 0 30px var(--kf-red-glow) !important; }
#floatBtn .btn-icon { width: 36px !important; height: 36px !important; display: flex !important; align-items: center !important; justify-content: center !important; }
#floatBtn .btn-icon i { font-size: 28px !important; color: #fff !important; filter: drop-shadow(0 2px 4px rgba(0,0,0,0.2)) !important; }
#floatBtn .btn-text { writing-mode: vertical-rl !important; text-orientation: upright !important; color: #fff !important; font-size: 16px !important;}
#floatBtn .ripple-dot { position: absolute !important; width: 6px !important; height: 6px !important; background: #fff !important; border-radius: 50% !important; opacity: 0 !important; animation: kf-rippleFloat 3s ease-in-out infinite !important; }
#floatBtn .ripple-dot:nth-child(1){top:10%!important;left:-8px!important;animation-delay:0s!important}
#floatBtn .ripple-dot:nth-child(2){top:50%!important;left:-12px!important;animation-delay:1s!important}
#floatBtn .ripple-dot:nth-child(3){top:85%!important;left:-6px!important;animation-delay:2s!important}
@keyframes kf-pulseBtn { 0%,100%{transform:translateY(-50%) scale(1)} 50%{transform:translateY(-50%) scale(1.04)} }
@keyframes kf-rippleFloat { 0%{opacity:0;transform:translate(0,0) scale(0)} 20%{opacity:0.8} 100%{opacity:0;transform:translate(-25px,-15px) scale(2.5)} }

/* ========== VIP弹窗 ========== */
#vipPopup {
    position: fixed !important; top: 50% !important; left: 50% !important;
    transform: translate(-50%, -50%) scale(0.85) !important; z-index: 10000 !important;
    width: min(360px, 88vw) !important; border-radius: 20px !important;
    opacity: 0 !important; visibility: hidden !important; pointer-events: none !important;
    transition: all 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
    background: rgba(0, 153, 204, 0.92) !important;
    border: 1px solid rgba(255,255,255,0.15) !important;
    box-shadow: 0 20px 50px rgba(0,212,255,0.2), 0 0 0 1px rgba(255,255,255,0.06) inset !important;
    overflow: hidden !important;
}
@supports (backdrop-filter: blur(16px)) or (-webkit-backdrop-filter: blur(16px)) {
    #vipPopup { background: var(--kf-vip-gradient) !important; backdrop-filter: blur(16px) saturate(180%) !important; -webkit-backdrop-filter: blur(16px) saturate(180%) !important; }
}
#vipPopup.active { opacity: 1 !important; visibility: visible !important; pointer-events: auto !important; transform: translate(-50%, -50%) scale(1) !important; }
#vipPopup::before { content:''!important; position:absolute!important; top:0!important; left:-100%!important; width:60%!important; height:100%!important; background:linear-gradient(90deg,transparent,rgba(255,255,255,0.2),transparent)!important; transform:skewX(-20deg)!important; animation:kf-shimmer 3.5s ease-in-out infinite!important; pointer-events:none!important; z-index:1!important; }
#vipPopup::after { content:''!important; position:absolute!important; top:-50%!important; right:-30%!important; width:200px!important; height:200px!important; border-radius:50%!important; background:radial-gradient(circle,rgba(123,97,255,0.15) 0%,transparent 70%)!important; animation:kf-floatGlow 6s ease-in-out infinite alternate!important; pointer-events:none!important; z-index:1!important; }
@keyframes kf-shimmer { 0%,100%{left:-100%} 50%{left:150%} }
@keyframes kf-floatGlow { 0%{transform:translate(0,0) scale(1);opacity:0.5} 100%{transform:translate(-30px,30px) scale(1.3);opacity:0.8} }

#vipPopup .vip-inner { display:flex!important; align-items:center!important; gap:18px!important; padding:26px 24px!important; position:relative!important; z-index:2!important; }
#vipPopup .vip-avatar-wrap { position:relative!important; flex-shrink:0!important; width:64px!important; height:64px!important; }
#vipPopup .vip-avatar { width:64px!important; height:64px!important; border-radius:50%!important; object-fit:cover!important; display:block!important; border:3px solid rgba(255,255,255,0.8)!important; box-shadow:0 4px 15px rgba(0,0,0,0.2)!important; position:relative!important; z-index:2!important; }
#vipPopup .vip-avatar-ring { position:absolute!important; inset:-4px!important; border-radius:50%!important; background:rgba(255,255,255,0.3)!important; z-index:1!important; animation:kf-avatarRingPulse 2.5s ease-in-out infinite!important; }
@keyframes kf-avatarRingPulse { 0%,100%{transform:scale(1);opacity:0.4} 50%{transform:scale(1.15);opacity:0.1} }
#vipPopup .vip-online-dot { position:absolute!important; bottom:2px!important; right:2px!important; width:12px!important; height:12px!important; background:#00E676!important; border:2.5px solid #fff!important; border-radius:50%!important; z-index:3!important; box-shadow:0 0 8px rgba(0,230,118,0.6)!important; }
#vipPopup .vip-content { flex:1!important; min-width:0!important; }
#vipPopup .vip-greeting { font-size:18px!important; font-weight:700!important; color:#fff!important; margin-bottom:4px!important; line-height:1.3!important; text-shadow:0 1px 3px rgba(0,0,0,0.15)!important; }
#vipPopup .vip-desc { font-size:14px!important; color:rgba(255,255,255,0.85)!important; margin-bottom:16px!important; line-height:1.3!important; }
#vipPopup .vip-actions { display:flex!important; gap:10px!important; }
#vipPopup .vip-btn { padding:9px 18px!important; font-size:13px!important; border-radius:50px!important; border:none!important; font-weight:600!important; transition:var(--kf-transition)!important; white-space:nowrap!important; cursor:pointer!important; }
#vipPopup .vip-btn-later { background:rgba(255,255,255,0.15)!important; color:#fff!important; border:1px solid rgba(255,255,255,0.3)!important; }
#vipPopup .vip-btn-later:hover { background:rgba(255,255,255,0.25)!important; }
#vipPopup .vip-btn-now { background:#fff!important; color:var(--kf-red-dark)!important; box-shadow:0 4px 15px rgba(0,0,0,0.15)!important; }
#vipPopup .vip-btn-now:hover { transform:translateY(-2px)!important; box-shadow:0 6px 20px rgba(0,0,0,0.2)!important; }
#vipPopup .vip-close { position:absolute!important; top:12px!important; right:12px!important; width:26px!important; height:26px!important; background:rgba(255,255,255,0.2)!important; color:#fff!important; font-size:13px!important; z-index:10!important; border:1px solid rgba(255,255,255,0.3)!important; border-radius:50%!important; display:flex!important; align-items:center!important; justify-content:center!important; transition:var(--kf-transition)!important; cursor:pointer!important; }
#vipPopup .vip-close:hover { background:rgba(255,255,255,0.4)!important; transform:rotate(90deg)!important; }

@media (min-width: 769px) {
    #vipPopup { width: 460px !important; border-radius: 24px !important; }
    #vipPopup .vip-inner { gap: 28px !important; padding: 38px 36px !important; }
    #vipPopup .vip-avatar-wrap { width: 88px !important; height: 88px !important; }
    #vipPopup .vip-avatar { width: 88px !important; height: 88px !important; border-width: 4px !important; }
    #vipPopup .vip-online-dot { width: 14px !important; height: 14px !important; border-width: 3px !important; }
    #vipPopup .vip-greeting { font-size: 22px !important; margin-bottom: 6px !important; }
    #vipPopup .vip-desc { font-size: 16px !important; margin-bottom: 20px !important; }
    #vipPopup .vip-btn { padding: 12px 30px !important; font-size: 15px !important; }
    #vipPopup .vip-close { width: 30px !important; height: 30px !important; font-size: 14px !important; top: 14px !important; right: 14px !important; }
}

/* ========== 联系方式弹窗 ========== */
#contactModal {
    position: fixed !important; top: 50% !important; left: 50% !important;
    transform: translate(-50%, -50%) scale(0.85) translateY(20px) !important; z-index: 10001 !important;
    width: min(320px, 88vw) !important; max-height: 85vh !important; border-radius: 20px !important;
    opacity: 0 !important; visibility: hidden !important;
    transition: all 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
    overflow: hidden !important; display: flex !important; flex-direction: column !important;
    pointer-events: none !important; background: rgba(12, 14, 20, 0.95) !important;
    border: 1px solid var(--kf-dark-border) !important;
    box-shadow: 0 25px 50px rgba(0,0,0,0.3), 0 0 0 1px rgba(255,255,255,0.04) inset !important;
}
@supports (backdrop-filter: blur(20px)) or (-webkit-backdrop-filter: blur(20px)) {
    #contactModal { background: var(--kf-dark-bg) !important; backdrop-filter: blur(20px) saturate(180%) !important; -webkit-backdrop-filter: blur(20px) saturate(180%) !important; }
}
#contactModal.active { opacity: 1 !important; visibility: visible !important; transform: translate(-50%, -50%) scale(1) translateY(0) !important; pointer-events: auto !important; }

#contactModal .modal-aurora { position: absolute !important; inset: 0 !important; overflow: hidden !important; pointer-events: none !important; z-index: 0 !important; }
#contactModal .aurora-blob { position: absolute !important; border-radius: 50% !important; filter: blur(40px) !important; opacity: 0.4 !important; mix-blend-mode: screen !important; }
#contactModal .aurora-blob.blob-1 { width: 120px !important; height: 120px !important; background: #00D4FF !important; top: -20px !important; left: -20px !important; animation: kf-floatBlob1 8s ease-in-out infinite alternate !important; }
#contactModal .aurora-blob.blob-2 { width: 140px !important; height: 140px !important; background: #7B61FF !important; bottom: -30px !important; right: -30px !important; animation: kf-floatBlob2 10s ease-in-out infinite alternate !important; }
#contactModal .aurora-blob.blob-3 { width: 100px !important; height: 100px !important; background: #00E676 !important; top: 40% !important; left: 50% !important; transform: translateX(-50%) !important; animation: kf-floatBlob3 12s ease-in-out infinite alternate !important; }
@keyframes kf-floatBlob1 { 0%{transform:translate(0,0) scale(1)} 100%{transform:translate(30px,20px) scale(1.2)} }
@keyframes kf-floatBlob2 { 0%{transform:translate(0,0) scale(1)} 100%{transform:translate(-40px,-30px) scale(1.3)} }
@keyframes kf-floatBlob3 { 0%{transform:translate(-50%,0) scale(1);opacity:0.3} 100%{transform:translate(-20%,20px) scale(1.4);opacity:0.5} }

#contactModal .modal-header {
    display: block !important; padding: 14px 20px 12px !important; text-align: center !important;
    position: relative !important; flex-shrink: 0 !important; z-index: 2 !important;
    background: var(--kf-gradient-red) !important; border-bottom: none !important; overflow: hidden !important;
}
#contactModal .modal-header::before {
    content: '' !important; position: absolute !important; top: 0 !important; left: -100% !important;
    width: 60% !important; height: 100% !important;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.25), transparent) !important;
    transform: skewX(-20deg) !important; animation: kf-headerShimmer 3s ease-in-out infinite !important;
    pointer-events: none !important; z-index: 1 !important;
}
@keyframes kf-headerShimmer { 0%,100%{left:-100%} 50%{left:150%} }

div#contactModal > div.modal-header > h2 {
    display: block !important; width: 100% !important; text-align: center !important;
    margin: 0 !important; padding: 0 !important; font-size: 15px !important; line-height: 1.4 !important;
    color: #fff !important; font-weight: 700 !important; position: relative !important; z-index: 2 !important;
}
div#contactModal > div.modal-header > h2 > i {
    display: inline-block !important; font-size: 16px !important; margin-right: 6px !important;
    vertical-align: middle !important; color: #fff !important;
    text-shadow: 0 1px 3px rgba(0,0,0,0.2) !important; animation: kf-iconPulse 2.5s ease-in-out infinite !important;
}
@keyframes kf-iconPulse { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.1); opacity: 0.85; } }

div#contactModal > div.modal-header > p {
    display: block !important; width: 100% !important; text-align: center !important;
    margin: 2px 0 0 0 !important; padding: 0 !important; font-size: 11px !important; line-height: 1.3 !important;
    color: rgba(255,255,255,0.85) !important; position: relative !important; z-index: 2 !important; clear: both !important;
}
#contactModal .modal-close {
    position: absolute !important; top: 10px !important; right: 10px !important;
    width: 22px !important; height: 22px !important;
    background: rgba(255,255,255,0.2) !important; border: 1px solid rgba(255,255,255,0.3) !important;
    border-radius: 50% !important; color: #fff !important; font-size: 11px !important;
    display: flex !important; align-items: center !important; justify-content: center !important;
    transition: var(--kf-transition) !important; z-index: 3 !important; cursor: pointer !important;
}
#contactModal .modal-close:hover { background: rgba(255,255,255,0.4) !important; transform: rotate(90deg) !important; }

#contactModal .modal-body { padding: 10px 12px 14px !important; overflow-y: auto !important; position: relative !important; z-index: 2 !important; }

#contactModal .contact-item {
    display: flex !important; align-items: center !important; gap: 12px !important;
    padding: 12px 14px !important; margin-bottom: 10px !important;
    background: var(--kf-dark-card) !important; border-radius: 12px !important;
    border: 1px solid rgba(255,255,255,0.05) !important; transition: var(--kf-transition) !important;
    min-height: auto !important; height: auto !important;
}
#contactModal .contact-item:hover { background: var(--kf-dark-card-hover) !important; border-color: rgba(0,212,255,0.25) !important; transform: translateY(-2px) !important; box-shadow: 0 6px 16px rgba(0,0,0,0.2) !important; }
#contactModal .contact-item .item-icon { width: 36px !important; height: 36px !important; min-width: 36px !important; border-radius: 8px !important; display: flex !important; align-items: center !important; justify-content: center !important; flex-shrink: 0 !important; box-shadow: 0 3px 8px rgba(0,0,0,0.2) !important; }
#contactModal .contact-item .item-icon i { font-size: 18px !important; color: #fff !important; line-height: 1 !important; }
#contactModal .contact-item .item-icon.phone-icon { background: linear-gradient(135deg,#00D4FF,#0099CC) !important; }
#contactModal .contact-item .item-icon.wechat-icon { background: linear-gradient(135deg,#00E676,#00C853) !important; }
#contactModal .contact-item .item-icon.qq-icon { background: linear-gradient(135deg,#5DADE2,#2E86C1) !important; }
#contactModal .contact-item .item-info { flex: 1 !important; min-width: 0 !important; }
#contactModal .contact-item .item-label { font-size: 10px !important; color: rgba(255,255,255,0.4) !important; margin-bottom: 2px !important; line-height: 1.2 !important; text-transform: uppercase !important; letter-spacing: 0.5px !important; }
#contactModal .contact-item .item-value { font-size: 14px !important; font-weight: 600 !important; color: #fff !important; word-break: break-all !important; letter-spacing: 0.5px !important; line-height: 1.4 !important; }
#contactModal .contact-item .copy-btn { flex-shrink: 0 !important; padding: 6px 14px !important; background: rgba(255,255,255,0.06) !important; color: rgba(255,255,255,0.7) !important; border: 1px solid rgba(255,255,255,0.1) !important; border-radius: 50px !important; font-size: 11px !important; font-weight: 600 !important; transition: var(--kf-transition) !important; white-space: nowrap !important; cursor: pointer !important; }
#contactModal .contact-item .copy-btn:hover { background: var(--kf-gradient-btn) !important; color: #fff !important; border-color: transparent !important; box-shadow: 0 3px 10px rgba(0,212,255,0.3) !important; }
#contactModal .contact-item .copy-btn.copied { background: linear-gradient(135deg,#00E676,#00C853) !important; border-color: transparent !important; color: #fff !important; }

#contactModal .tips-section { margin-top: 4px !important; padding: 12px 14px !important; background: rgba(255,255,255,0.03) !important; border-radius: 12px !important; border: 1px dashed rgba(255,255,255,0.08) !important; }
#contactModal .tips-section .tips-title { font-size: 12px !important; font-weight: 600 !important; color: var(--kf-red-primary) !important; margin-bottom: 4px !important; display: flex !important; align-items: center !important; gap: 4px !important; }
#contactModal .tips-section .tips-content { font-size: 11px !important; color: rgba(255,255,255,0.45) !important; line-height: 1.6 !important; }

/* ========== 左下角按钮与面板 ========== */
#cornerBtn {
    position: fixed !important; bottom: 24px !important; left: 24px !important; z-index: 9500 !important;
    width: 54px !important; height: 54px !important; background: var(--kf-gradient-red) !important;
    border-radius: 50% !important; border: none !important;
    display: flex !important; align-items: center !important; justify-content: center !important;
    box-shadow: 0 4px 20px var(--kf-red-glow) !important; transition: var(--kf-transition) !important;
    opacity: 1 !important; visibility: visible !important; transform: scale(1) !important; cursor: pointer !important;
}
#cornerBtn:hover { transform: scale(1.1) !important; box-shadow: 0 6px 25px var(--kf-red-glow) !important; }
#cornerBtn i { font-size: 24px !important; color: #fff !important; transition: var(--kf-transition) !important; }
#cornerBtn.expanded i { transform: rotate(45deg) !important; }
#cornerBtn .badge-dot { position: absolute !important; top: 4px !important; right: 4px !important; width: 12px !important; height: 12px !important; background: #FFD700 !important; border-radius: 50% !important; border: 2px solid #fff !important; animation: kf-dotPulse 1.8s ease-in-out infinite !important; }
@keyframes kf-dotPulse { 0%,100%{transform:scale(1)} 50%{transform:scale(1.3)} }

#cornerPanel {
    position: fixed !important; bottom: 90px !important; left: 24px !important; z-index: 9501 !important;
    width: min(300px, calc(100vw - 48px)) !important; pointer-events: none !important;
    background: rgba(12, 14, 20, 0.95) !important;
    border: 1px solid var(--kf-dark-border) !important; border-radius: 18px !important;
    box-shadow: 0 20px 40px rgba(0,0,0,0.25) !important;
    opacity: 0 !important; visibility: hidden !important; transform: translateY(15px) scale(0.9) !important;
    transition: all 0.35s cubic-bezier(0.34,1.56,0.64,1) !important; overflow: hidden !important;
    display: flex !important; flex-direction: column !important;
}
@supports (backdrop-filter: blur(20px)) or (-webkit-backdrop-filter: blur(20px)) {
    #cornerPanel { background: var(--kf-dark-bg) !important; backdrop-filter: blur(20px) saturate(180%) !important; -webkit-backdrop-filter: blur(20px) saturate(180%) !important; }
}
#cornerPanel.active { opacity: 1 !important; visibility: visible !important; transform: translateY(0) scale(1) !important; pointer-events: auto !important; }
#cornerPanel .cp-header { background: var(--kf-gradient-red) !important; padding: 12px 16px !important; display: flex !important; align-items: center !important; justify-content: space-between !important; flex-shrink: 0 !important; }
#cornerPanel .cp-header h3 { color: #fff !important; font-size: 14px !important; font-weight: 600 !important; }
#cornerPanel .cp-close { width: 22px !important; height: 22px !important; background: rgba(255,255,255,0.2) !important; border: none !important; border-radius: 50% !important; color: #fff !important; font-size: 12px !important; display: flex !important; align-items: center !important; justify-content: center !important; transition: var(--kf-transition) !important; cursor: pointer !important; }
#cornerPanel .cp-close:hover { background: rgba(255,255,255,0.35) !important; }
#cornerPanel .cp-body { padding: 12px !important; position: relative !important; z-index: 2 !important; }
#cornerPanel .contact-item { margin-bottom: 8px !important; padding: 10px 12px !important; }
#cornerPanel .contact-item .item-icon { width: 32px !important; height: 32px !important; min-width: 32px !important; border-radius: 8px !important; }
#cornerPanel .contact-item .item-icon i { font-size: 16px !important; }
#cornerPanel .contact-item .item-value { font-size: 13px !important; }
#cornerPanel .contact-item .item-label { font-size: 9px !important; }
#cornerPanel .contact-item .copy-btn { padding: 5px 12px !important; font-size: 10px !important; }
#cornerPanel .tips-section { margin-top: 4px !important; padding: 10px 12px !important; }
#cornerPanel .tips-section .tips-content { font-size: 10px !important; }

#toast {
    position: fixed !important; top: 50% !important; left: 50% !important; transform: translate(-50%,-50%) scale(0.8) !important;
    z-index: 10002 !important; background: rgba(0,0,0,0.85) !important; color: #fff !important;
    padding: 12px 24px !important; border-radius: 50px !important; font-size: 14px !important; font-weight: 500 !important;
    border: 1px solid rgba(255,255,255,0.08) !important; opacity: 0 !important; visibility: hidden !important;
    transition: all 0.3s ease !important; pointer-events: none !important; white-space: nowrap !important;
}
#toast.show { opacity: 1 !important; visibility: visible !important; transform: translate(-50%,-50%) scale(1) !important; }

.secret-text { display: inline-block !important; font-size: 14px !important; font-weight: 600 !important; color: #fff !important; line-height: 1.5 !important; letter-spacing: 0.5px !important; word-break: break-all !important; vertical-align: middle !important; }
.secret-text.loading { color: rgba(255, 255, 255, 0.4) !important; font-style: italic !important; }

.claim-card-pc {
    position: fixed !important; right: 0 !important; top: 45% !important; z-index: 9400 !important;
    display: flex !important; align-items: center !important; gap: 12px !important;
    padding: 14px 20px 14px 16px !important; background: rgba(18, 20, 28, 0.88) !important;
    backdrop-filter: blur(16px) saturate(180%) !important; -webkit-backdrop-filter: blur(16px) saturate(180%) !important;
    border-radius: 12px 0 0 12px !important; border: 1px solid rgba(255, 215, 0, 0.12) !important; border-right: none !important;
    text-decoration: none !important; transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
    box-shadow: -4px 0 24px rgba(0, 0, 0, 0.2) !important; transform: translateX(0) !important;
}
.claim-card-pc .claim-info { max-width: 0 !important; overflow: hidden !important; opacity: 0 !important; white-space: nowrap !important; transition: all 0.4s ease !important; }
.claim-card-pc:hover { padding-right: 28px !important; background: rgba(25, 28, 38, 0.95) !important; border-color: rgba(255, 215, 0, 0.3) !important; box-shadow: -8px 0 32px rgba(255, 180, 0, 0.12) !important; }
.claim-card-pc:hover .claim-info { max-width: 160px !important; opacity: 1 !important; margin-left: 4px !important; }
.claim-icon-wrap {
    width: 40px !important; height: 40px !important; flex-shrink: 0 !important; display: flex !important; align-items: center !important; justify-content: center !important;
    background: linear-gradient(135deg, #FFB347 0%, #FF8C00 100%) !important; border-radius: 10px !important;
    color: #fff !important; font-size: 18px !important; box-shadow: 0 4px 12px rgba(255, 140, 0, 0.25) !important; animation: kf-iconFloat 3s ease-in-out infinite !important;
}
@keyframes kf-iconFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
.claim-title { display: block !important; font-size: 13px !important; font-weight: 600 !important; color: #FFD700 !important; letter-spacing: 0.5px !important; margin-bottom: 2px !important; }
.claim-action { display: block !important; font-size: 11px !important; color: rgba(255, 255, 255, 0.5) !important; transition: color 0.3s !important; }
.claim-card-pc:hover .claim-action { color: #fff !important; }
.claim-glow { position: absolute !important; inset: 0 !important; border-radius: inherit !important; background: radial-gradient(circle at 20% 50%, rgba(255, 215, 0, 0.06), transparent 70%) !important; pointer-events: none !important; }

.claim-banner-mobile {
    display: none !important; position: fixed !important; bottom: 0 !important; left: 0 !important; right: 0 !important; z-index: 9400 !important;
    height: 52px !important; background: linear-gradient(90deg, #12141C 0%, #1A1820 100%) !important;
    border-top: 1px solid rgba(255, 215, 0, 0.15) !important; text-decoration: none !important;
    align-items: center !important; justify-content: center !important; gap: 8px !important;
    padding: 0 16px !important; padding-bottom: env(safe-area-inset-bottom) !important;
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.3) !important;
}
.banner-pulse-dot { width: 8px !important; height: 8px !important; flex-shrink: 0 !important; background: #FFB347 !important; border-radius: 50% !important; box-shadow: 0 0 8px rgba(255, 179, 71, 0.5) !important; animation: kf-bannerDotPulse 2s ease-in-out infinite !important; }
@keyframes kf-bannerDotPulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.5; transform: scale(0.8); } }
.banner-text { font-size: 13px !important; font-weight: 500 !important; color: rgba(255, 255, 255, 0.85) !important; letter-spacing: 0.3px !important; }
.banner-arrow { font-size: 10px !important; color: rgba(255, 215, 0, 0.6) !important; animation: kf-arrowSlide 1.5s ease-in-out infinite !important; }
@keyframes kf-arrowSlide { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(3px); } }

@media (max-width: 768px) {
    .claim-card-pc { display: none !important; }
    .claim-banner-mobile { display: flex !important; }
    #cornerBtn { bottom: calc(52px + env(safe-area-inset-bottom) + 16px) !important; }
    #cornerPanel { bottom: calc(52px + env(safe-area-inset-bottom) + 74px) !important; }
    body.activated #cornerBtn { bottom: 16px !important; }
    body.activated #cornerPanel { bottom: 74px !important; }
}
@media (max-width: 480px) {
    #floatBtn { padding: 12px 8px !important; }
    #floatBtn .btn-icon { width: 30px !important; height: 30px !important; }
    #floatBtn .btn-icon i { font-size: 24px !important; }
    #floatBtn .btn-text {font-size: 12px !important;}
    #vipPopup .vip-inner { display: block !important; text-align: center !important; padding: 20px 18px 18px !important; width: 100% !important; box-sizing: border-box !important; }
    #vipPopup .vip-avatar-wrap { display: block !important; margin: 0 auto 10px auto !important; float: none !important; width: 56px !important; height: 56px !important; }
    #vipPopup .vip-avatar { width: 56px !important; height: 56px !important; }
    #vipPopup .vip-content { display: block !important; width: 100% !important; text-align: center !important; margin: 0 !important; padding: 0 !important; }
    #vipPopup .vip-greeting { display: block !important; width: 100% !important; text-align: center !important; margin: 0 auto 2px auto !important; font-size: 17px !important; }
    #vipPopup .vip-desc { display: block !important; width: 100% !important; text-align: center !important; margin: 0 auto 12px auto !important; font-size: 13px !important; }
    #vipPopup .vip-actions { display: inline-flex !important; justify-content: center !important; align-items: center !important; gap: 10px !important; margin-top: 0 !important; }
    #vipPopup .vip-btn { flex: none !important; min-width: 100px !important; max-width: 130px !important; padding: 8px 16px !important; font-size: 13px !important; text-align: center !important; }
    #contactModal { width: min(300px, 92vw) !important; }
    #contactModal .modal-body { padding: 12px 14px 16px !important; }
}

body.activated .claim-card-pc, body.activated .claim-banner-mobile {
    opacity: 0 !important; pointer-events: none !important; transform: translateY(20px) !important; transition: all 0.3s ease !important;
}

/* =========================================
   ★ V6 强制覆盖版 - 完全保留原样
   ========================================= */
html body #floatBtn {
    width: 64px !important; height: 64px !important; border-radius: 50% !important;
    flex-direction: column !important; gap: 2px !important; padding: 0 !important;
    top: 50% !important; right: 8px !important; left: auto !important; bottom: auto !important;
    transform: translateY(-50%) !important;
    box-shadow: 0 4px 20px var(--kf-red-glow) !important;
    z-index: 9500 !important; animation: none !important;
}
@media (min-width: 769px) {
    html body #floatBtn { width: 80px !important; height: 80px !important; gap: 5px !important; right: 12px !important; }
    html body #floatBtn .btn-icon { margin-top: 7px !important; }
    html body #floatBtn .btn-icon i { font-size: 32px !important; }
    html body #floatBtn .btn-text { font-size: 15px !important; font-weight: 300 !important; padding-top: 2px !important; writing-mode: horizontal-tb !important; text-orientation: initial !important; }
}
html body #floatBtn.hidden { transform: translateY(-50%) scale(0) !important; opacity: 0 !important; }
html body #floatBtn:hover { padding: 0 !important; transform: translateY(-50%) scale(1.1) !important; }
html body #floatBtn .btn-text { display: block !important; writing-mode: horizontal-tb !important; text-orientation: initial !important; font-size: 14px !important; line-height: 1.2 !important; white-space: nowrap !important; }
html body #floatBtn .btn-icon { width: 100% !important; height: auto !important; display: flex !important; align-items: center !important; justify-content: center !important; margin-top: 12px !important; }
html body #floatBtn .btn-icon i { font-size: 24px !important; }
html body #floatBtn .ripple-dot:nth-child(1){top:-4px!important;left:50%!important;transform:translateX(-50%)!important}
html body #floatBtn .ripple-dot:nth-child(2){top:50%!important;left:-4px!important;transform:translateY(-50%)!important}
html body #floatBtn .ripple-dot:nth-child(3){bottom:-4px!important;left:50%!important;transform:translateX(-50%)!important}

html body #cornerBtn {
    width: min(280px, calc(100vw - 48px)) !important; height: 48px !important;
    border-radius: 14px 14px 0 0 !important; left: 24px !important; bottom: 0 !important; right: auto !important;
    transform: none !important; flex-direction: row !important; gap: 10px !important; padding: 0 20px !important;
    background: var(--kf-gradient-red) !important;
    box-shadow: 0 -4px 20px rgba(0, 212, 255, 0.25) !important;
}
html body #cornerBtn:hover { transform: translateY(-3px) !important; box-shadow: 0 -8px 30px rgba(0, 212, 255, 0.4) !important; }
html body #cornerBtn i { font-size: 20px !important; }
html body #cornerBtn.expanded i { transform: none !important; }
html body #cornerBtn::after {
    content: '在线客服 · 点击立即咨询'; font-family: var(--kf-font) !important;
    font-size: 13px !important; font-weight: 600 !important; color: #fff !important;
    letter-spacing: 0.5px !important; white-space: nowrap !important;
}
html body #cornerBtn .badge-dot { top: -3px !important; right: -3px !important; width: 10px !important; height: 10px !important; }

html body #cornerPanel { left: 24px !important; bottom: 48px !important; right: auto !important; transform: translateY(15px) scale(0.9) !important; }
html body #cornerPanel.active { transform: translateY(0) scale(1) !important; }

@media (max-width: 768px) {
    html body #cornerBtn, html body.activated #cornerBtn {
        position: fixed !important; width: 50% !important; left: 0 !important; right: auto !important;
        bottom: 0 !important; bottom: constant(safe-area-inset-bottom) !important; bottom: env(safe-area-inset-bottom, 0px) !important;
        inset-block-end: 0 !important; height: 46px !important; border-radius: 10px 10px 0 0 !important;
        padding: 0 16px !important; margin: 0 !important; transform: translateZ(0) !important;
        -webkit-transform: translateZ(0) !important; backface-visibility: hidden !important;
        box-sizing: border-box !important; z-index: 9500 !important;
    }
    html body #cornerPanel, html body.activated #cornerPanel {
        left: 0 !important; right: auto !important; width: 50% !important;
        bottom: 46px !important; bottom: calc(46px + constant(safe-area-inset-bottom)) !important;
        bottom: calc(46px + env(safe-area-inset-bottom, 0px)) !important;
        border-radius: 14px 14px 0 0 !important; margin: 0 !important; transform: translateY(15px) scale(0.9) !important;
    }
    html body #cornerPanel.active, html body.activated #cornerPanel.active { transform: translateY(0) scale(1) !important; }
    html body #floatBtn { width: 60px !important; height: 60px !important; right: 6px !important; gap: 2px !important; }
    html body #floatBtn .btn-icon { margin-top: 6px !important; }
    html body #floatBtn .btn-icon i { font-size: 24px !important; }
    html body #floatBtn .btn-text { font-size: 10px !important; margin-bottom: 2px !important; }
}

/* =========================================
   ★ V7 视觉增强版 - 颜色已同步更新
   ========================================= */
html body #floatBtn { overflow: visible !important; isolation: isolate !important; }
html body #floatBtn::before {
    content: '' !important; position: absolute !important; inset: -6px !important; border-radius: 50% !important;
    background: radial-gradient(circle, var(--kf-red-glow) 0%, transparent 70%) !important;
    z-index: -1 !important; animation: kf-breathGlow 2.8s ease-in-out infinite !important; pointer-events: none !important;
}
html body #floatBtn::after {
    content: '' !important; position: absolute !important; inset: -2px !important; border-radius: 50% !important;
    border: 2px solid rgba(0, 212, 255, 0.5) !important;
    z-index: -1 !important; animation: kf-radarPing 2.5s cubic-bezier(0, 0, 0.2, 1) infinite !important; pointer-events: none !important;
}
html body #floatBtn .btn-icon i { animation: kf-iconBounce 3s ease-in-out infinite !important; filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.4)) !important; }
html body #floatBtn:hover::before { animation: kf-breathGlowFast 0.8s ease-in-out infinite !important; inset: -10px !important; }
html body #floatBtn:hover::after { animation: none !important; opacity: 0 !important; transform: scale(1.8) !important; transition: all 0.4s ease !important; }
html body #floatBtn:hover .btn-icon i { animation: kf-iconShake 0.6s ease-in-out !important; filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.8)) !important; }
@media (max-width: 768px) {
    html body #floatBtn::before { inset: -4px !important; }
    html body #floatBtn::after { border-width: 1.5px !important; }
}

@keyframes kf-breathGlow { 0%, 100% { opacity: 0.4; transform: scale(1); } 50% { opacity: 0.9; transform: scale(1.15); } }
@keyframes kf-breathGlowFast { 0%, 100% { opacity: 0.7; transform: scale(1.05); } 50% { opacity: 1; transform: scale(1.25); } }
@keyframes kf-radarPing { 0% { transform: scale(1); opacity: 0.8; border-color: rgba(0, 212, 255, 0.7); } 100% { transform: scale(2.2); opacity: 0; border-color: rgba(0, 212, 255, 0); } }
@keyframes kf-iconBounce { 0%, 100% { transform: translateY(0) rotate(0deg); } 25% { transform: translateY(-2px) rotate(-3deg); } 75% { transform: translateY(1px) rotate(2deg); } }
@keyframes kf-iconShake { 0% { transform: rotate(0deg); } 20% { transform: rotate(-15deg); } 40% { transform: rotate(12deg); } 60% { transform: rotate(-8deg); } 80% { transform: rotate(5deg); } 100% { transform: rotate(0deg); } }