:root {
      --color-primary: #3B82F6;
      --color-primary-rgb: 59, 130, 246;
      --color-secondary: #10B981;
      --color-warning: #F59E0B;
      --color-danger: #EF4444;
    }

    .bg-primary { background-color: var(--color-primary); }
    .text-primary { color: var(--color-primary); }
    .border-primary { border-color: var(--color-primary); }
    .from-primary { --tw-gradient-from: var(--color-primary); --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); }
    .to-primary { --tw-gradient-to: var(--color-primary); --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); }
    .from-primary\/20 { --tw-gradient-from: rgba(var(--color-primary-rgb), 0.2); --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); }
    .from-primary\/25 { --tw-gradient-from: rgba(var(--color-primary-rgb), 0.25); --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); }
    .to-primary\/20 { --tw-gradient-to: rgba(var(--color-primary-rgb), 0.2); --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); }
    .bg-primary\/5 { background-color: rgba(var(--color-primary-rgb), 0.05); }
    .bg-primary\/10 { background-color: rgba(var(--color-primary-rgb), 0.1); }
    .bg-primary\/20 { background-color: rgba(var(--color-primary-rgb), 0.2); }
    .border-primary\/30 { border-color: rgba(var(--color-primary-rgb), 0.3); }
    .border-primary\/40 { border-color: rgba(var(--color-primary-rgb), 0.4); }
    .border-primary\/50 { border-color: rgba(var(--color-primary-rgb), 0.5); }
    .ring-primary\/10 { --tw-ring-color: rgba(var(--color-primary-rgb), 0.1); }
    .ring-primary\/50 { --tw-ring-color: rgba(var(--color-primary-rgb), 0.5); }
    .shadow-primary\/5 { --tw-shadow-color: rgba(var(--color-primary-rgb), 0.05); }
    .shadow-primary\/10 { --tw-shadow-color: rgba(var(--color-primary-rgb), 0.1); }
    .shadow-primary\/30 { --tw-shadow-color: rgba(var(--color-primary-rgb), 0.3); }
    .focus\:border-primary:focus { border-color: var(--color-primary); }
    .focus\:ring-primary:focus { --tw-ring-color: var(--color-primary); }
    .focus\:ring-primary\/50:focus { --tw-ring-color: rgba(var(--color-primary-rgb), 0.5); }
    .hover\:bg-primary:hover { background-color: var(--color-primary); }
    .hover\:border-primary:hover { border-color: var(--color-primary); }
    .hover\:border-primary\/30:hover { border-color: rgba(var(--color-primary-rgb), 0.3); }
    .hover\:border-primary\/50:hover { border-color: rgba(var(--color-primary-rgb), 0.5); }
    .hover\:text-primary:hover { color: var(--color-primary); }
    .hover\:to-primary:hover { --tw-gradient-to: var(--color-primary); --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); }
    .hover\:shadow-primary\/5:hover { --tw-shadow-color: rgba(var(--color-primary-rgb), 0.05); }
    .hover\:shadow-primary\/10:hover { --tw-shadow-color: rgba(var(--color-primary-rgb), 0.1); }
    .hover\:shadow-primary\/30:hover { --tw-shadow-color: rgba(var(--color-primary-rgb), 0.3); }
    .group:hover .group-hover\:border-primary { border-color: var(--color-primary); }
    .group:hover .group-hover\:border-primary\/30 { border-color: rgba(var(--color-primary-rgb), 0.3); }
    .group:hover .group-hover\:text-primary { color: var(--color-primary); }

    @layer utilities {
      /* 增强的卡片悬停效果 */
      .card-hover {
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
      }
      .card-hover:hover {
        transform: translateY(-8px) scale(1.02) !important;
        box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(59, 130, 246, 0.3);
      }
      .modal-transition {
        transition-property: all;
        transition-duration: 0.3s;
        transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
      }
      .gradient-bg {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      }
      .glass-effect {
        background: rgba(255, 255, 255, 0.1);
        border: 1px solid rgba(255, 255, 255, 0.2);
        -webkit-backdrop-filter: blur(12px);
        backdrop-filter: blur(12px);
      }
      .floating-animation {
        animation: floating 3s ease-in-out infinite;
      }
      @keyframes floating {
        0%, 100% { transform: translateY(0px); }
        50% { transform: translateY(-10px); }
      }
      .pulse-glow {
        animation: pulse-glow 2s infinite;
      }
      @keyframes pulse-glow {
        0%, 100% { box-shadow: 0 0 20px rgba(59, 130, 246, 0.3); }
        50% { box-shadow: 0 0 30px rgba(59, 130, 246, 0.6); }
      }
      
      /* 热门标签样式 - 精致版 */
      .hot-badge {
        background: linear-gradient(135deg, #ff6b6b 0%, #ee5a6f 50%, #ff4757 100%);
        box-shadow: 
          0 2px 8px rgba(255, 71, 87, 0.4),
          0 0 12px rgba(255, 107, 107, 0.3),
          inset 0 1px 0 rgba(255, 255, 255, 0.3);
        animation: hot-badge-glow 2s ease-in-out infinite;
        font-weight: 600;
        letter-spacing: 0.3px;
        text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
      }
      @keyframes hot-badge-glow {
        0%, 100% {
          box-shadow: 
            0 2px 8px rgba(255, 71, 87, 0.4),
            0 0 12px rgba(255, 107, 107, 0.3),
            inset 0 1px 0 rgba(255, 255, 255, 0.3);
          transform: scale(1);
        }
        50% {
          box-shadow: 
            0 3px 12px rgba(255, 71, 87, 0.6),
            0 0 20px rgba(255, 107, 107, 0.5),
            inset 0 1px 0 rgba(255, 255, 255, 0.4);
          transform: scale(1.05);
        }
      }
      
      /* ========== 高级广告卡片样式 ========== */
      
      /* VIP广告卡片 - 增强显眼样式（所有广告卡片统一使用） */
      .promo-card-vip {
        position: relative;
        transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1) !important;
        background: linear-gradient(145deg, 
          rgba(30, 30, 40, 0.98) 0%, 
          rgba(25, 25, 35, 1) 50%, 
          rgba(30, 30, 40, 0.98) 100%);
        box-shadow: 
          0 8px 16px -4px rgba(0, 0, 0, 0.4),
          0 4px 8px -2px rgba(0, 0, 0, 0.3),
          0 0 0 1px rgba(212, 175, 125, 0.2),
          inset 0 1px 0 0 rgba(255, 255, 255, 0.08);
        border: 1px solid rgba(212, 175, 125, 0.15);
      }
      
      .promo-card-vip:hover {
        transform: translateY(-8px) scale(1.02) !important;
        box-shadow: 
          0 25px 35px -8px rgba(0, 0, 0, 0.5),
          0 15px 15px -8px rgba(0, 0, 0, 0.4),
          0 0 0 2px rgba(212, 175, 125, 0.3),
          inset 0 1px 0 0 rgba(255, 255, 255, 0.1);
        border-color: rgba(212, 175, 125, 0.3);
      }
      
      /* 合作伙伴卡片样式已移除 - 所有卡片使用统一背景，只通过认证徽标区分 */
      
      /* VIP徽章 - 增强显眼效果（所有广告卡片统一使用） */
      .promo-vip-badge {
        animation: subtle-glow 3s ease-in-out infinite;
      }
      
      @keyframes subtle-glow {
        0%, 100% {
          opacity: 1;
          box-shadow: 0 4px 12px rgba(212, 175, 125, 0.5);
        }
        50% {
          opacity: 1;
          box-shadow: 0 6px 16px rgba(212, 175, 125, 0.7);
        }
      }
      
      /* 合作伙伴徽标样式 - 优化版本 */
      .partner-badge {
        display: inline-flex;
        align-items: center;
        gap: 5px;
        padding: 5px 10px;
        border-radius: 8px;
        font-size: 12px;
        font-weight: 600;
        white-space: nowrap;
        line-height: 1.2;
        vertical-align: middle;
        margin-left: 8px;
        flex-shrink: 0;
        transition: all 0.3s ease;
      }
      
      .partner-badge img {
        width: 14px;
        height: 14px;
        object-fit: contain;
        filter: drop-shadow(0 0 1px rgba(0, 0, 0, 0.3));
      }
      
      .partner-badge span {
        font-size: 12px;
        line-height: 1.2;
        text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
      }
      
      .partner-badge-gold {
        background: linear-gradient(90deg, rgba(212, 175, 55, 0.15) 0%, rgba(212, 175, 55, 0.25) 100%);
        border: 1px solid rgba(212, 175, 55, 0.5);
        color: #e8c875;
        box-shadow: 
          0 0 4px rgba(212, 175, 55, 0.2),
          0 2px 4px rgba(0, 0, 0, 0.2),
          inset 0 1px 0 rgba(255, 255, 255, 0.1);
      }
      
      .partner-badge-gold:hover {
        box-shadow: 
          0 0 8px rgba(212, 175, 55, 0.35),
          0 2px 6px rgba(0, 0, 0, 0.25),
          inset 0 1px 0 rgba(255, 255, 255, 0.15);
        transform: translateY(-1px);
      }
      
      .partner-badge-silver {
        background: linear-gradient(90deg, rgba(148, 163, 184, 0.15) 0%, rgba(148, 163, 184, 0.25) 100%);
        border: 1px solid rgba(148, 163, 184, 0.5);
        color: #cbd5e1;
        box-shadow: 
          0 0 4px rgba(148, 163, 184, 0.2),
          0 2px 4px rgba(0, 0, 0, 0.2),
          inset 0 1px 0 rgba(255, 255, 255, 0.1);
      }
      
      .partner-badge-silver:hover {
        box-shadow: 
          0 0 8px rgba(148, 163, 184, 0.35),
          0 2px 6px rgba(0, 0, 0, 0.25),
          inset 0 1px 0 rgba(255, 255, 255, 0.15);
        transform: translateY(-1px);
      }
      
      .partner-badge-bronze {
        background: linear-gradient(90deg, rgba(180, 83, 9, 0.15) 0%, rgba(180, 83, 9, 0.25) 100%);
        border: 1px solid rgba(180, 83, 9, 0.5);
        color: #ea973d;
        box-shadow: 
          0 0 4px rgba(180, 83, 9, 0.2),
          0 2px 4px rgba(0, 0, 0, 0.2),
          inset 0 1px 0 rgba(255, 255, 255, 0.1);
      }
      
      .partner-badge-bronze:hover {
        box-shadow: 
          0 0 8px rgba(180, 83, 9, 0.35),
          0 2px 6px rgba(0, 0, 0, 0.25),
          inset 0 1px 0 rgba(255, 255, 255, 0.15);
        transform: translateY(-1px);
      }
      
      /* 限时标签闪烁动画 */
      .promo-flash-badge {
        animation: flash-animation 1.5s ease-in-out infinite;
      }
      
      @keyframes flash-animation {
        0%, 100% {
          opacity: 1;
          transform: scale(1);
        }
        50% {
          opacity: 0.8;
          transform: scale(1.05);
        }
      }
      
      /* VIP宝石图标精致效果 */
      .gem-icon-subtle {
        animation: gem-subtle-glow 2.5s ease-in-out infinite;
      }
      
      @keyframes gem-subtle-glow {
        0%, 100% {
          opacity: 0.9;
          filter: brightness(1);
        }
        50% {
          opacity: 1;
          filter: brightness(1.1);
        }
      }
      
      /* CTA按钮脉冲效果 */
      .cta-button-enhanced {
        position: relative;
        overflow: hidden;
      }
      
      .cta-button-enhanced::before {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        width: 0;
        height: 0;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.3);
        transform: translate(-50%, -50%);
        transition: width 0.6s, height 0.6s;
      }
      
      .cta-button-enhanced:hover::before {
        width: 300px;
        height: 300px;
      }
      
      /* 按钮精致闪光效果 - VIP专用 */
      .cta-button-vip-shine {
        position: relative;
        overflow: hidden;
      }
      
      .cta-button-vip-shine::after {
        content: '';
        position: absolute;
        top: 0;
        left: -100%;
        width: 30%;
        height: 100%;
        background: linear-gradient(
          90deg,
          transparent,
          rgba(255, 255, 255, 0.15),
          transparent
        );
        animation: button-vip-shine 4s ease-in-out infinite;
      }
      
      @keyframes button-vip-shine {
        0% {
          left: -100%;
        }
        40%, 100% {
          left: 200%;
        }
      }
      
      /* 新增标签 */
      .promo-new-badge {
        animation: new-badge-bounce 1s ease-in-out infinite;
      }
      
      @keyframes new-badge-bounce {
        0%, 100% {
          transform: translateY(0) rotate(0deg);
        }
        50% {
          transform: translateY(-3px) rotate(2deg);
        }
      }
      
      /* 角标装饰 */
      .corner-ribbon {
        position: absolute;
        top: 12px;
        right: -5px;
        padding: 4px 20px;
        font-size: 11px;
        font-weight: bold;
        color: white;
        background: linear-gradient(45deg, #f43f5e, #ec4899);
        box-shadow: 0 4px 8px rgba(244, 63, 94, 0.3);
        transform: rotate(0deg);
        z-index: 10;
        clip-path: polygon(0 0, 100% 0, 95% 50%, 100% 100%, 0 100%);
      }
      
      /* 渐变文字效果 */
      .gradient-text {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
      }
      
      /* VIP高级金色渐变 - 低调奢华版本 */
      .gradient-text-gold {
        background: linear-gradient(135deg, 
          #d4af7d 0%,   /* 香槟金 */
          #c9a66b 25%,  /* 古铜金 */
          #e8d5b7 50%,  /* 淡金 */
          #c9a66b 75%,  /* 古铜金 */
          #d4af7d 100%  /* 香槟金 */
        );
        background-size: 200% auto;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        animation: subtle-gradient-shift 4s ease-in-out infinite;
      }
      
      @keyframes subtle-gradient-shift {
        0%, 100% { background-position: 0% 50%; }
        50% { background-position: 100% 50%; }
      }
      
      /* 粒子光点装饰 */
      .sparkle-decoration {
        position: absolute;
        width: 4px;
        height: 4px;
        background: #FFD700;
        border-radius: 50%;
        animation: sparkle-twinkle 2s infinite;
      }
      
      .sparkle-decoration:nth-child(1) { top: 10%; left: 10%; animation-delay: 0s; }
      .sparkle-decoration:nth-child(2) { top: 20%; right: 15%; animation-delay: 0.5s; }
      .sparkle-decoration:nth-child(3) { bottom: 30%; left: 20%; animation-delay: 1s; }
      .sparkle-decoration:nth-child(4) { bottom: 15%; right: 10%; animation-delay: 1.5s; }
      
      @keyframes sparkle-twinkle {
        0%, 100% {
          opacity: 0;
          transform: scale(0);
        }
        50% {
          opacity: 1;
          transform: scale(1);
        }
      }
      .slide-in-up {
        animation: slideInUp 0.6s ease-out;
      }
      @keyframes slideInUp {
        from { transform: translateY(30px); opacity: 0; }
        to { transform: translateY(0); opacity: 1; }
      }
      .sort-active {
        background-color: var(--color-primary);
        color: #fff;
        box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
      }
      .search-focus {
        border-color: var(--color-primary);
        box-shadow: 0 0 0 2px rgba(var(--color-primary-rgb), 0.5);
      }
      .line-clamp-2 {
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
      }
      .line-clamp-3 {
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
      }
      
      /* 增强的卡片悬停效果 */
      .card-hover {
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
      }
      .card-hover:hover {
        transform: translateY(-8px) scale(1.02);
      }
      
      /* 渐变背景动画 */
      .gradient-bg {
        background: linear-gradient(-45deg, #1e293b, #334155, #475569, #1e40af);
        background-size: 400% 400%;
        animation: gradientShift 15s ease infinite;
      }
      @keyframes gradientShift {
        0% { background-position: 0% 50%; }
        50% { background-position: 100% 50%; }
        100% { background-position: 0% 50%; }
      }
      
      /* 毛玻璃效果 */
      .glass-effect {
        background: rgba(31, 41, 55, 0.8);
        backdrop-filter: blur(20px);
        border: 1px solid rgba(255, 255, 255, 0.1);
      }
      
      /* 自定义滚动条 */
      ::-webkit-scrollbar {
        width: 8px;
      }
      ::-webkit-scrollbar-track {
        background: #1f2937;
      }
      ::-webkit-scrollbar-thumb {
        background: #4b5563;
        border-radius: 4px;
      }
      ::-webkit-scrollbar-thumb:hover {
        background: #6b7280;
      }
      
      /* 页面加载动画 */
      .page-fade-in {
        animation: pageLoad 0.8s ease-out;
      }
      @keyframes pageLoad {
        from { opacity: 0; transform: translateY(20px); }
        to { opacity: 1; transform: translateY(0); }
      }
      
      /* 导航栏滑入动画 */
      .nav-slide-down {
        animation: navSlideDown 0.6s ease-out;
      }
      @keyframes navSlideDown {
        from { transform: translateY(-100%); opacity: 0; }
        to { transform: translateY(0); opacity: 1; }
      }
      
      /* 云控制弹窗样式 - 深色主题 + 动画效果 */
      .popup-overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.85);
        backdrop-filter: blur(4px);
        z-index: 9999;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 20px;
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.4s ease, visibility 0.4s ease;
        overflow-y: auto; /* 允许整个遮罩层滚动 */
      }
      
      .popup-overlay.show {
        opacity: 1;
        visibility: visible;
      }
      
      .popup-container {
        background: linear-gradient(135deg, rgba(31, 41, 55, 0.8) 0%, rgba(17, 24, 39, 0.9) 100%);
        border-radius: 20px;
        border: 2px solid transparent;
        background-clip: padding-box;
        max-width: 680px;
        width: 100%;
        margin: auto; /* 垂直居中 */
        box-shadow: 
          0 25px 70px rgba(0, 0, 0, 0.6),
          0 0 0 1px rgba(59, 130, 246, 0.1),
          0 0 40px rgba(59, 130, 246, 0.15);
        transform: scale(0.85);
        transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
        position: relative;
      }
      
      .popup-overlay.show .popup-container {
        transform: scale(1);
      }
      
      /* 自定义滚动条样式 */
      .custom-scrollbar::-webkit-scrollbar {
        width: 8px;
        height: 8px;
      }
      
      .custom-scrollbar::-webkit-scrollbar-track {
        background: rgba(31, 41, 55, 0.3);
        border-radius: 4px;
      }
      
      .custom-scrollbar::-webkit-scrollbar-thumb {
        background: rgba(107, 114, 128, 0.5);
        border-radius: 4px;
      }
      
      .custom-scrollbar::-webkit-scrollbar-thumb:hover {
        background: rgba(107, 114, 128, 0.8);
      }
      
      /* 淡入动画 */
      .fade-in {
        animation: fadeIn 0.3s ease-in-out;
      }
      
      @keyframes fadeIn {
        from { opacity: 0; transform: translateY(5px); }
        to { opacity: 1; transform: translateY(0); }
      }
      
      /* 通知标签 */
      .popup-notification-tag {
        position: absolute;
        top: 16px;
        right: 16px;
        background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
        color: white;
        padding: 6px 16px;
        border-radius: 12px;
        font-size: 13px;
        font-weight: 600;
        box-shadow: 
          0 4px 14px rgba(239, 68, 68, 0.4),
          0 2px 8px rgba(0, 0, 0, 0.3);
        z-index: 10;
        letter-spacing: 0.5px;
        animation: notificationPulse 2s ease-in-out infinite;
      }
      
      @keyframes notificationPulse {
        0%, 100% {
          box-shadow: 
            0 4px 14px rgba(239, 68, 68, 0.4),
            0 2px 8px rgba(0, 0, 0, 0.3);
        }
        50% {
          box-shadow: 
            0 4px 20px rgba(239, 68, 68, 0.6),
            0 2px 8px rgba(0, 0, 0, 0.3),
            0 0 20px rgba(239, 68, 68, 0.3);
        }
      }
      
      /* 发布者信息区 */
      .popup-author-section {
        padding: 22px 24px 18px;
        background: transparent;
      }
      
      .popup-author-section > div {
        padding-bottom: 18px;
        border-bottom: 1px solid rgba(75, 85, 99, 0.5);
      }
      
      /* 标题区 */
      .popup-title-section {
        padding: 20px 24px 16px;
        background: transparent;
      }
      
      .popup-title {
        font-size: 1.5rem;
        font-weight: 700;
        color: #f9fafb;
        margin: 0;
        padding-bottom: 16px;
        border-bottom: 1px solid rgba(75, 85, 99, 0.5);
        line-height: 1.4;
        letter-spacing: 0.3px;
      }
      
      /* 内容区 */
      .popup-body {
        padding: 24px;
        background: transparent;
      }
      
      .popup-content {
        color: #e5e7eb;
        line-height: 1.8;
        font-size: 1rem;
        word-wrap: break-word;
        white-space: pre-wrap; /* 保留换行符和空格 */
      }
      
      .popup-content p {
        margin: 0 0 12px 0;
        color: #d1d5db;
      }
      
      .popup-content p:last-child {
        margin-bottom: 0;
      }
      
      /* 图片区 */
      .popup-image-section {
        padding: 0 24px 20px;
        background: transparent;
      }
      
      .popup-image-section::before {
        content: '';
        display: block;
        height: 1px;
        background: rgba(75, 85, 99, 0.5);
        margin: 0 0 20px 0;
      }
      
      .popup-image {
        max-width: 42.5%;
        max-height: 149px;
        width: auto;
        height: auto;
        display: block;
        margin: 0 auto;
        border-radius: 10px;
        border: 1.5px solid rgba(59, 130, 246, 0.25);
        box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
        transition: all 0.3s ease;
        object-fit: contain;
      }
      
      .popup-image:hover {
        transform: scale(1.03);
        border-color: rgba(59, 130, 246, 0.5);
        box-shadow: 0 8px 25px rgba(59, 130, 246, 0.25);
      }
      
      /* 底部按钮区 */
      .popup-footer {
        padding: 0 24px 24px;
        background: transparent;
        display: flex;
        justify-content: center;
        gap: 12px;
      }
      
      .popup-footer::before {
        content: '';
        display: block;
        height: 1px;
        background: rgba(75, 85, 99, 0.5);
        margin: 0 0 20px 0;
      }
      
      .popup-button {
        padding: 14px 40px;
        background: linear-gradient(135deg, #3B82F6 0%, #2563EB 100%);
        color: white;
        border: none;
        border-radius: 12px;
        font-size: 1.05rem;
        font-weight: 700;
        cursor: pointer;
        transition: all 0.3s ease;
        box-shadow: 
          0 4px 15px rgba(59, 130, 246, 0.4),
          0 0 20px rgba(59, 130, 246, 0.2);
        position: relative;
        overflow: hidden;
        letter-spacing: 0.5px;
      }
      
      .popup-button::before {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        width: 0;
        height: 0;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.3);
        transform: translate(-50%, -50%);
        transition: width 0.6s, height 0.6s;
      }
      
      .popup-button:hover::before {
        width: 300px;
        height: 300px;
      }
      
      .popup-button:hover {
        background: linear-gradient(135deg, #2563EB 0%, #1D4ED8 100%);
        transform: translateY(-3px) scale(1.05);
        box-shadow: 
          0 8px 25px rgba(59, 130, 246, 0.6),
          0 0 30px rgba(59, 130, 246, 0.4);
      }
      
      .popup-button:active {
        transform: translateY(-1px) scale(1.02);
      }
      
      /* 响应式设计 */
      @media (max-width: 640px) {
        .popup-container {
          max-width: 95%;
          margin: 10px;
          border-radius: 16px;
        }
        
        .popup-author-section {
          padding: 18px 20px 14px;
        }
        
        .popup-author-section > div {
          padding-bottom: 14px;
        }
        
        .popup-title-section {
          padding: 16px 20px 12px;
        }
        
        .popup-title {
          font-size: 1.25rem;
          padding-bottom: 12px;
        }
        
        #popupAuthorAvatar {
          width: 2.5rem;
          height: 2.5rem;
        }
        
        #popupAuthorName {
          font-size: 0.9rem;
        }
        
        #popupPublishDate {
          font-size: 0.75rem;
        }
        
        .popup-body {
          padding: 20px 18px;
        }
        
        .popup-image-section {
          padding: 0 18px 16px;
        }
        
        .popup-image-section::before {
          margin-bottom: 16px;
        }
        
        .popup-image {
          max-width: 55%;
          max-height: 119px;
        }
        
        .popup-footer {
          padding: 0 18px 20px;
        }
        
        .popup-footer::before {
          margin-bottom: 16px;
        }
        
        .popup-button {
          padding: 12px 32px;
          font-size: 1rem;
        }
        
        .popup-content {
          font-size: 0.95rem;
        }
      }
      
      /* 自定义滚动条 - 深色主题 */
      .popup-container::-webkit-scrollbar {
        width: 8px;
      }
      .popup-container::-webkit-scrollbar-track {
        background: #111827;
        border-radius: 0 16px 16px 0;
      }
      .popup-container::-webkit-scrollbar-thumb {
        background: #4b5563;
        border-radius: 4px;
      }
      .popup-container::-webkit-scrollbar-thumb:hover {
        background: #6b7280;
      }
      
      /* 卡片进入动画 */
      .card-fade-in {
        animation: cardFadeIn 0.6s ease-out forwards;
        opacity: 0;
        transform: translateY(30px);
      }
      @keyframes cardFadeIn {
        to { opacity: 1; transform: translateY(0); }
      }
      
      /* 横幅动画 */
      .banner-slide-in {
        animation: bannerSlideIn 0.8s ease-out;
      }
      @keyframes bannerSlideIn {
        from { opacity: 0; transform: scale(0.95) translateY(20px); }
        to { opacity: 1; transform: scale(1) translateY(0); }
      }
      
      /* 按钮增强悬停效果 */
      .btn-hover-enhanced {
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
      }
      .btn-hover-enhanced:hover {
        transform: translateY(-2px);
        box-shadow: 0 10px 25px rgba(59, 130, 246, 0.3);
      }
      
      /* 模态框增强进入动画 */
      .modal-enter {
        animation: modalEnter 0.4s cubic-bezier(0.4, 0, 0.2, 1);
      }
      @keyframes modalEnter {
        from { opacity: 0; transform: scale(0.9) translateY(-20px); }
        to { opacity: 1; transform: scale(1) translateY(0); }
      }
      
      /* 移动端模态框优化 */
      .modal-mobile-optimized {
        padding: 1rem;
        align-items: flex-start;
        padding-top: 2rem;
      }
      
      /* 邮箱智能推荐列表样式 */
      .email-suggestion-item {
        padding: 12px 16px;
        cursor: pointer;
        transition: all 0.2s ease;
        border-bottom: 1px solid rgba(75, 85, 99, 0.3);
        display: flex;
        align-items: center;
        gap: 10px;
      }
      .email-suggestion-item:last-child {
        border-bottom: none;
      }
      .email-suggestion-item:hover,
      .email-suggestion-item.active {
        background: rgba(59, 130, 246, 0.15);
        padding-left: 20px;
      }
      .email-suggestion-item:hover .email-icon,
      .email-suggestion-item.active .email-icon {
        color: #3B82F6;
        transform: scale(1.1);
      }
      .email-icon {
        color: #9CA3AF;
        transition: all 0.2s ease;
        font-size: 16px;
      }
      .email-text {
        color: #E5E7EB;
        font-family: 'Courier New', monospace;
        font-size: 14px;
      }
      .email-prefix {
        color: #10B981;
        font-weight: 600;
      }
      .email-domain {
        color: #9CA3AF;
      }
      
      @media (max-width: 640px) {
        .modal-mobile-optimized {
          padding: 0.75rem;
          padding-top: 1rem;
          align-items: flex-start;
        }
        
        .modal-mobile-optimized .glass-effect {
          margin-top: 0;
          max-height: calc(100vh - 2rem);
          width: calc(100% - 1.5rem);
          margin-left: auto;
          margin-right: auto;
        }
        
        /* 键盘弹出时的适配 */
        .modal-keyboard-adjust {
          padding-top: 0.5rem;
          align-items: flex-start;
        }
        
        .modal-keyboard-adjust .glass-effect {
          max-height: calc(100vh - 1rem);
          overflow-y: auto;
        }
      }
      
      /* 移动端导航菜单 */
      .mobile-nav-menu {
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.3s ease-in-out, opacity 0.3s ease-in-out;
        opacity: 0;
      }
      
      .mobile-nav-menu.show {
        max-height: 500px;
        opacity: 1;
      }
      
      /* 隐藏数字输入框的内置增减按钮 */
      input[type="number"]::-webkit-inner-spin-button,
      input[type="number"]::-webkit-outer-spin-button {
        -webkit-appearance: none;
        margin: 0;
      }
      
      input[type="number"] {
        -moz-appearance: textfield;
      }

      /* 价格标签发光效果 */
      .glow-red {
        animation: glow-red 2s ease-in-out infinite alternate;
        box-shadow: 0 0 10px rgba(239, 68, 68, 0.5), 0 0 20px rgba(239, 68, 68, 0.3), 0 0 30px rgba(239, 68, 68, 0.2);
      }
      
      @keyframes glow-red {
        from {
          box-shadow: 0 0 10px rgba(239, 68, 68, 0.5), 0 0 20px rgba(239, 68, 68, 0.3), 0 0 30px rgba(239, 68, 68, 0.2);
        }
        to {
          box-shadow: 0 0 15px rgba(239, 68, 68, 0.8), 0 0 30px rgba(239, 68, 68, 0.6), 0 0 45px rgba(239, 68, 68, 0.4);
        }
      }
      
      /* 价格标签悬停效果增强 */
      .glow-red:hover {
        animation: glow-red-hover 1s ease-in-out infinite alternate;
      }
      
      @keyframes glow-red-hover {
        from {
          box-shadow: 0 0 15px rgba(239, 68, 68, 0.8), 0 0 30px rgba(239, 68, 68, 0.6), 0 0 45px rgba(239, 68, 68, 0.4);
        }
        to {
          box-shadow: 0 0 25px rgba(239, 68, 68, 1), 0 0 40px rgba(239, 68, 68, 0.8), 0 0 60px rgba(239, 68, 68, 0.6);
        }
      }
      
      /* 移动端搜索框 */
      @media (max-width: 640px) {
        .mobile-search-container {
          width: 100%;
          margin-top: 1rem;
          padding: 0 1rem;
        }
        
        .mobile-search-input {
          width: 100%;
          padding: 0.75rem 1rem;
          padding-left: 2.5rem;
        }
      }
      
      /* 搜索框焦点动画 */
      .search-focus:focus {
        transform: scale(1.02);
        box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
      }
    }
    
    /* ========== React Bits 灵感 - 高级动画效果 ========== */
    
    /* 点击涟漪效果 */
    .ripple {
      position: absolute;
      border-radius: 50%;
      background: radial-gradient(circle, rgba(59, 130, 246, 0.6) 0%, rgba(59, 130, 246, 0) 70%);
      transform: scale(0);
      animation: ripple-animation 0.6s ease-out;
      pointer-events: none;
      z-index: 1000;
    }
    
    @keyframes ripple-animation {
      to {
        transform: scale(4);
        opacity: 0;
      }
    }
    
    /* 光晕悬停效果 - 应用于卡片 */
    .glare-effect {
      position: relative;
      overflow: hidden;
      isolation: isolate;
    }
    
    .glare-effect::before {
      content: '';
      position: absolute;
      top: -50%;
      left: -50%;
      width: 200%;
      height: 200%;
      background: radial-gradient(
        circle at var(--mouse-x, 50%) var(--mouse-y, 50%),
        rgba(59, 130, 246, 0.15) 0%,
        rgba(59, 130, 246, 0.08) 25%,
        transparent 50%
      );
      opacity: 0;
      transition: opacity 0.3s ease;
      pointer-events: none;
      z-index: 1;
    }
    
    .glare-effect:hover::before {
      opacity: 1;
    }
    
    /* 高级3D卡片倾斜效果 */
    .card-3d {
      transform-style: preserve-3d;
      transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
      will-change: transform;
    }
    
    .card-3d:hover {
      transform: perspective(1000px) rotateX(var(--rotate-x, 0deg)) rotateY(var(--rotate-y, 0deg)) scale3d(1.02, 1.02, 1.02);
    }
    
    /* 磁吸效果 */
    .magnet-effect {
      transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
      will-change: transform;
    }
    
    /* 闪光边框动画 */
    .shimmer-border {
      position: relative;
      background: linear-gradient(90deg, 
        transparent 0%,
        rgba(59, 130, 246, 0.3) 50%,
        transparent 100%
      );
      background-size: 200% 100%;
      animation: shimmer 3s infinite;
    }
    
    @keyframes shimmer {
      0% {
        background-position: -200% 0;
      }
      100% {
        background-position: 200% 0;
      }
    }
    
    /* 粒子爆炸效果 */
    .spark-particle {
      position: absolute;
      width: 4px;
      height: 4px;
      border-radius: 50%;
      background: linear-gradient(45deg, #3B82F6, #60A5FA);
      pointer-events: none;
      z-index: 9999;
      animation: spark-burst 0.8s ease-out forwards;
      box-shadow: 0 0 8px rgba(59, 130, 246, 0.8);
    }
    
    @keyframes spark-burst {
      0% {
        transform: translate(0, 0) scale(1);
        opacity: 1;
      }
      100% {
        transform: translate(var(--tx), var(--ty)) scale(0);
        opacity: 0;
      }
    }
    
    /* 增强的渐变流动背景 */
    .gradient-flow {
      background: linear-gradient(
        -45deg,
        #1e293b 0%,
        #334155 25%,
        #1e40af 50%,
        #3730a3 75%,
        #1e293b 100%
      );
      background-size: 400% 400%;
      animation: gradient-flow 15s ease infinite;
    }
    
    @keyframes gradient-flow {
      0%, 100% {
        background-position: 0% 50%;
      }
      50% {
        background-position: 100% 50%;
      }
    }
    
    /* 霓虹光晕文字 */
    .neon-text {
      text-shadow: 
        0 0 5px rgba(59, 130, 246, 0.5),
        0 0 10px rgba(59, 130, 246, 0.4),
        0 0 20px rgba(59, 130, 246, 0.3),
        0 0 40px rgba(59, 130, 246, 0.2);
      animation: neon-pulse 2s ease-in-out infinite;
    }
    
    @keyframes neon-pulse {
      0%, 100% {
        text-shadow: 
          0 0 5px rgba(59, 130, 246, 0.5),
          0 0 10px rgba(59, 130, 246, 0.4),
          0 0 20px rgba(59, 130, 246, 0.3);
      }
      50% {
        text-shadow: 
          0 0 10px rgba(59, 130, 246, 0.8),
          0 0 20px rgba(59, 130, 246, 0.6),
          0 0 30px rgba(59, 130, 246, 0.4),
          0 0 50px rgba(59, 130, 246, 0.2);
      }
    }
    
    /* 平滑滚动揭示动画 */
    .scroll-reveal {
      opacity: 0;
      transform: translateY(30px);
      transition: opacity 0.6s ease, transform 0.6s ease;
    }
    
    .scroll-reveal.revealed {
      opacity: 1;
      transform: translateY(0);
    }
    
    /* 弹性按钮效果 */
    .elastic-button {
      transition: transform 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    }
    
    .elastic-button:active {
      transform: scale(0.95);
    }
    
    /* 光束扫描效果 */
    .beam-scan {
      position: relative;
      overflow: hidden;
    }
    
    .beam-scan::after {
      content: '';
      position: absolute;
      top: 0;
      left: -100%;
      width: 50%;
      height: 100%;
      background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.1),
        transparent
      );
      animation: beam-sweep 3s infinite;
    }
    
    @keyframes beam-sweep {
      0% {
        left: -100%;
      }
      50%, 100% {
        left: 200%;
      }
    }
    
    /* 卡片翻转效果 */
    .flip-card {
      perspective: 1000px;
    }
    
    .flip-card-inner {
      position: relative;
      width: 100%;
      height: 100%;
      transition: transform 0.6s;
      transform-style: preserve-3d;
    }
    
    .flip-card:hover .flip-card-inner {
      transform: rotateY(180deg);
    }
    
    /* 脉动光圈效果 */
    .pulse-ring {
      position: relative;
    }
    
    .pulse-ring::before {
      content: '';
      position: absolute;
      inset: -4px;
      border-radius: inherit;
      background: linear-gradient(45deg, #3B82F6, #60A5FA);
      opacity: 0;
      animation: pulse-ring-animation 2s infinite;
      z-index: -1;
    }
    
    @keyframes pulse-ring-animation {
      0%, 100% {
        opacity: 0;
        transform: scale(0.95);
      }
      50% {
        opacity: 0.5;
        transform: scale(1.05);
      }
    }
    
    /* 增强的卡片悬停效果 - 结合多种效果 */
    .enhanced-card {
      position: relative;
      transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
      transform-style: preserve-3d;
      will-change: transform, box-shadow;
    }
    
    .enhanced-card:hover {
      transform: translateY(-12px) scale(1.03);
      box-shadow: 
        0 20px 40px rgba(0, 0, 0, 0.4),
        0 0 20px rgba(59, 130, 246, 0.3),
        inset 0 0 20px rgba(59, 130, 246, 0.05);
    }
    
    /* 流光边框 */
    .flowing-border {
      position: relative;
      background: linear-gradient(90deg, 
        #3B82F6 0%,
        #60A5FA 25%,
        #3B82F6 50%,
        #1D4ED8 75%,
        #3B82F6 100%
      );
      background-size: 200% 100%;
      animation: flow-border 3s linear infinite;
    }
    
    @keyframes flow-border {
      0% {
        background-position: 0% 0%;
      }
      100% {
        background-position: 200% 0%;
      }
    }
    
    /* ========== 侧边广告模块样式 ========== */
    /* 右下角侧边广告容器 - 固定定位，优雅不影响用户体验 */
    .sidebar-ad-container {
      position: fixed;
      bottom: 20px;
      right: 20px;
      z-index: 999;
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }
    
    /* 小屏幕调整 - 移动端优化 */
    @media (max-width: 768px) {
      .sidebar-ad-container {
        bottom: 70px; /* 避免被底部导航栏遮挡 */
        right: 10px;
      }
    }
    
    /* 侧边广告卡片 */
    .sidebar-ad-card {
      background: linear-gradient(145deg, rgba(30, 30, 40, 0.95) 0%, rgba(25, 25, 35, 0.98) 100%);
      backdrop-filter: blur(10px);
      border-radius: 16px;
      padding: 16px;
      max-width: 280px;
      box-shadow: 
        0 10px 30px -5px rgba(0, 0, 0, 0.5),
        0 0 0 1px rgba(59, 130, 246, 0.1),
        inset 0 1px 0 0 rgba(255, 255, 255, 0.05);
      border: 1px solid rgba(59, 130, 246, 0.15);
      transition: all 0.3s ease;
    }
    
    .sidebar-ad-card:hover {
      transform: translateY(-4px);
      box-shadow: 
        0 15px 40px -5px rgba(0, 0, 0, 0.6),
        0 0 0 1px rgba(59, 130, 246, 0.3),
        inset 0 1px 0 0 rgba(255, 255, 255, 0.08);
    }
    
    /* 广告标签 */
    .sidebar-ad-label {
      display: inline-block;
      background: linear-gradient(135deg, #3B82F6, #2563EB);
      color: white;
      padding: 4px 10px;
      border-radius: 8px 8px 0 0;
      font-size: 11px;
      font-weight: 600;
      letter-spacing: 0.5px;
      margin-bottom: 12px;
      box-shadow: 0 2px 8px rgba(59, 130, 246, 0.3);
    }
    
    /* 广告描述文字 */
    .sidebar-ad-description {
      color: rgba(255, 255, 255, 0.9);
      font-size: 13px;
      line-height: 1.5;
      margin-bottom: 12px;
      font-weight: 500;
    }
    
    /* 广告图片 */
    .sidebar-ad-image {
      width: 100%;
      height: auto;
      border-radius: 12px;
      cursor: pointer;
      transition: all 0.3s ease;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    }
    
    .sidebar-ad-image:hover {
      transform: scale(1.03);
      box-shadow: 0 8px 20px rgba(59, 130, 246, 0.4);
    }
    
    /* 关闭按钮 */
    .sidebar-ad-close {
      position: absolute;
      top: 8px;
      right: 8px;
      width: 28px;
      height: 28px;
      border-radius: 50%;
      background: rgba(0, 0, 0, 0.5);
      backdrop-filter: blur(5px);
      border: 1px solid rgba(255, 255, 255, 0.1);
      color: rgba(255, 255, 255, 0.7);
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all 0.2s ease;
      z-index: 10;
    }
    
    .sidebar-ad-close:hover {
      background: rgba(239, 68, 68, 0.8);
      color: white;
      transform: rotate(90deg);
    }
    
    /* 图片放大模态框 */
    .sidebar-ad-modal {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: rgba(0, 0, 0, 0.9);
      backdrop-filter: blur(10px);
      z-index: 9999;
      display: none;
      align-items: center;
      justify-content: center;
      padding: 20px;
      cursor: pointer;
      animation: fadeIn 0.3s ease;
    }
    
    .sidebar-ad-modal.active {
      display: flex;
    }
    
    .sidebar-ad-modal-image {
      max-width: 90%;
      max-height: 90vh;
      border-radius: 12px;
      box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
      animation: zoomIn 0.3s ease;
    }
    
    .sidebar-ad-modal-close {
      position: absolute;
      top: 20px;
      right: 20px;
      width: 40px;
      height: 40px;
      border-radius: 50%;
      background: rgba(255, 255, 255, 0.2);
      backdrop-filter: blur(10px);
      border: 2px solid rgba(255, 255, 255, 0.3);
      color: white;
      font-size: 24px;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all 0.2s ease;
    }
    
    .sidebar-ad-modal-close:hover {
      background: rgba(239, 68, 68, 0.8);
      transform: rotate(90deg);
    }
    
    /* 动画效果 */
    @keyframes fadeIn {
      from {
        opacity: 0;
      }
      to {
        opacity: 1;
      }
    }
    
    @keyframes zoomIn {
      from {
        opacity: 0;
        transform: scale(0.8);
      }
      to {
        opacity: 1;
        transform: scale(1);
      }
    }
    
    /* 侧边广告渐入动画 */
    .sidebar-ad-slide-in {
      animation: slideInFromRight 0.5s ease-out;
    }
    
    @keyframes slideInFromRight {
      from {
        opacity: 0;
        transform: translateX(100px);
      }
      to {
        opacity: 1;
        transform: translateX(0);
      }
    }