@charset "utf-8";
/* ========== 客服组件 - 百度APP兼容最终版 ========== */
/* ★ 设计原则：绝不触碰 i 标签、绝不设置 touch/user-select、仅隔离文本排版 */

:root {
    --kf-red-primary: #E8384F;
    --kf-red-dark: #C62839;
    --kf-red-light: #FF6B7A;
    --kf-red-glow: rgba(232, 56, 79, 0.4);
    --kf-gradient-red: linear-gradient(135deg, #FF6B7A 0%, #E8384F 50%, #C62839 100%);
    --kf-gradient-btn: linear-gradient(135deg, #FF4D63 0%, #E8384F 100%);
    --kf-vip-gradient: linear-gradient(135deg, rgba(255,42,69,0.75) 0%, rgba(232,56,79,0.7) 40%, rgba(198,40,57,0.75) 100%);
    --kf-dark-bg: rgba(18, 18, 24, 0.85);
    --kf-dark-border: rgba(255, 255, 255, 0.12);
    --kf-dark-card: rgba(255, 255, 255, 0.06);
    --kf-dark-card-hover: rgba(255, 255, 255, 0.1);
    --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);
}

/* ★ 仅对纯文本元素做排版隔离，绝不包含 i / svg / canvas / img */
#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;  /* ★ 关键：告诉WebView此元素不触发滚动手势 */
    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: 14px !important; font-weight: 600 !important; letter-spacing: 4px !important; text-shadow: 0 1px 3px rgba(0,0,0,0.2) !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(198, 40, 57, 0.92) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 20px 50px rgba(232,56,79,0.3), 0 0 0 1px rgba(255,255,255,0.08) 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.25),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(255,215,0,0.2) 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:#4DC86B!important; border:2.5px solid #fff!important; border-radius:50%!important; z-index:3!important; box-shadow:0 0 8px rgba(77,200,107,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-primary)!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;             /* 原420px → 460px */
        border-radius: 24px !important;      /* 圆角同步放大 */
    }
    #vipPopup .vip-inner { 
        gap: 28px !important;                /* 原24px → 28px */
        padding: 38px 36px !important;       /* 原32px 28px → 38px 36px */
    }
    #vipPopup .vip-avatar-wrap { 
        width: 88px !important;              /* 原76px → 88px */
        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;          /* 原20px → 22px */
        margin-bottom: 6px !important;
    }
    #vipPopup .vip-desc { 
        font-size: 16px !important;          /* 原15px → 16px */
        margin-bottom: 20px !important; 
    }
    #vipPopup .vip-btn { 
        padding: 12px 30px !important;       /* 原11px 24px → 12px 30px */
        font-size: 15px !important;          /* 原14px → 15px */
    }
    #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(18, 18, 24, 0.95) !important;
    border: 1px solid var(--kf-dark-border) !important;
    box-shadow: 0 25px 50px rgba(0,0,0,0.25), 0 0 0 1px rgba(255,255,255,0.05) 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.5 !important; mix-blend-mode: screen !important; }
#contactModal .aurora-blob.blob-1 { width: 120px !important; height: 120px !important; background: #E8384F !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: #4D79FF !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: #9B51E0 !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.6} }

/* ★ 标题区域：纯block布局，零flex嵌套 */
#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.3), 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%} }

/* ★ 最高特异性选择器，强制block换行 */
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.06) !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(232,56,79,0.3) !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,#FF6B7A,#E8384F) !important; }
#contactModal .contact-item .item-icon.wechat-icon { background: linear-gradient(135deg,#4DC86B,#2DA44E) !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.08) !important; color: rgba(255,255,255,0.8) !important; border: 1px solid rgba(255,255,255,0.15) !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(232,56,79,0.4) !important; }
#contactModal .contact-item .copy-btn.copied { background: linear-gradient(135deg,#4DC86B,#2DA44E) !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.1) !important; }
#contactModal .tips-section .tips-title { font-size: 12px !important; font-weight: 600 !important; color: var(--kf-red-light) !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(18, 18, 24, 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.2) !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.1) !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(25, 25, 35, 0.85) !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.15) !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(35, 35, 48, 0.95) !important; border-color: rgba(255, 215, 0, 0.4) !important; box-shadow: -8px 0 32px rgba(255, 180, 0, 0.15) !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.3) !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.6) !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.08), 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, #1A1A24 0%, #2A2218 100%) !important;
    border-top: 1px solid rgba(255, 215, 0, 0.2) !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.6) !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.9) !important; letter-spacing: 0.3px !important; }
.banner-arrow { font-size: 10px !important; color: rgba(255, 215, 0, 0.7) !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; letter-spacing: 3px !important; }
    
    /* ★ 压缩上下高度：减少内边距 */
    #vipPopup .vip-inner { 
        display: block !important;
        text-align: center !important; 
        padding: 20px 18px 18px !important;   /* ★ 原30px 20px 26px → 大幅缩减上下padding */
        width: 100% !important;
        box-sizing: border-box !important;
    }
    
    /* ★ 压缩头像下方间距 + 适当缩小头像尺寸 */
    #vipPopup .vip-avatar-wrap { 
        display: block !important;
        margin: 0 auto 10px auto !important;  /* ★ 原16px → 10px，减少头像与文字的空白 */
        float: none !important;
        width: 56px !important;               /* ★ 可选：移动端头像从64px缩至56px，进一步省空间 */
        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;   /* ★ 增加明确的极小margin，避免被全局样式撑开 */
        font-size: 17px !important;           /* ★ 微调字号，视觉上更紧凑 */
    }
    #vipPopup .vip-desc {
        display: block !important;
        width: 100% !important;
        text-align: center !important;
        margin: 0 auto 12px auto !important;  /* ★ 原16px → 12px，减少描述与按钮的空白 */
        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;             /* ★ 去掉额外margin，由desc的margin-bottom控制 */
    }
    
    #vipPopup .vip-btn { 
        flex: none !important;
        min-width: 100px !important;
        max-width: 130px !important;
        padding: 8px 16px !important;         /* ★ 按钮上下padding也同步压缩 */
        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;
}