/* 首页功能图标样式 - 极简高端风格 */
/* 图标背景色由 home-random-colors.js 动态随机控制 */

/* ========== 小红功能区域 - 图标 SVG ========== */

#xiaohongFeatures .fa-target-arrow::before,
#xiaohongFeatures .fas.fa-target-arrow::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ff4757'%3E%3Cpath d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8zm0-14c-3.31 0-6 2.69-6 6s2.69 6 6 6 6-2.69 6-6-2.69-6-6-6zm0 10c-2.21 0-4-1.79-4-4s1.79-4 4-4 4 1.79 4 4-1.79 4-4 4zm0-6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z'/%3E%3C/svg%3E");
}

#xiaohongFeatures .fa-gift-box::before,
#xiaohongFeatures .fas.fa-gift-box::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ee5a6f'%3E%3Cpath d='M20 6h-2.18c.11-.31.18-.65.18-1 0-1.66-1.34-3-3-3-1.05 0-1.96.54-2.5 1.35l-.5.67-.5-.68C10.96 2.54 10.05 2 9 2 7.34 2 6 3.34 6 5c0 .35.07.69.18 1H4c-1.11 0-1.99.89-1.99 2L2 19c0 1.11.89 2 2 2h16c1.11 0 2-.89 2-2V8c0-1.11-.89-2-2-2zm-5-2c.55 0 1 .45 1 1s-.45 1-1 1-1-.45-1-1 .45-1 1-1zM9 4c.55 0 1 .45 1 1s-.45 1-1 1-1-.45-1-1 .45-1 1-1zm11 15H4v-2h16v2zm0-5H4V8h5.08L7 10.83 8.62 12 11 8.76l1-1.36 1 1.36L15.38 12 17 10.83 14.92 8H20v6z'/%3E%3C/svg%3E");
}

#xiaohongFeatures .fa-sparkles::before,
#xiaohongFeatures .fas.fa-sparkles::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ff6348'%3E%3Cpath d='M7 1l2.5 5L15 8.5 9.5 11 7 16l-2.5-5L-1 8.5 4.5 6 7 1zm12 6l1.5 3 3 1.5-3 1.5-1.5 3-1.5-3-3-1.5 3-1.5L19 7zm-7 7l2 4 4 2-4 2-2 4-2-4-4-2 4-2 2-4z'/%3E%3C/svg%3E");
}

#xiaohongFeatures .fa-wand-magic::before,
#xiaohongFeatures .fas.fa-wand-magic::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ff4757'%3E%3Cpath d='M7.5 5.6L5 7l1.4-2.5L5 2l2.5 1.4L10 2 8.6 4.5 10 7 7.5 5.6zM19.5 15.4L22 14l-1.4-2.5L22 9l-2.5 1.4L17 9l1.4 2.5L17 14l2.5-1.4zM22 2l-1.4 2.5L22 7l-2.5-1.4L17 7l1.4-2.5L17 2l2.5 1.4L22 2zM14.37 7.29l-7.5 7.5c-.39.39-.39 1.02 0 1.41l2.93 2.93c.39.39 1.02.39 1.41 0l7.5-7.5c.39-.39.39-1.02 0-1.41l-2.93-2.93c-.38-.39-1.02-.39-1.41 0z'/%3E%3C/svg%3E");
}

#xiaohongFeatures .fa-video-play::before,
#xiaohongFeatures .fas.fa-video-play::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ee5a6f'%3E%3Cpath d='M17 10.5V7c0-.55-.45-1-1-1H4c-.55 0-1 .45-1 1v10c0 .55.45 1 1 1h12c.55 0 1-.45 1-1v-3.5l4 4v-11l-4 4zM10 15l-3.89-2.25v-1.5L10 9v6z'/%3E%3C/svg%3E");
}

#xiaohongFeatures .fa-magic::before,
#xiaohongFeatures .fas.fa-magic::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ff4757'%3E%3Cpath d='M7.5 5.6L5 7l1.4-2.5L5 2l2.5 1.4L10 2 8.6 4.5 10 7 7.5 5.6zM19.5 15.4L22 14l-1.4 2.5L22 19l-2.5-1.4L17 19l1.4-2.5L17 14l2.5 1.4zM22 2l-2.5 1.4L17 2l1.4 2.5L17 7l2.5-1.4L22 7l-1.4-2.5L22 2zM14.37 7.29c-.39-.39-1.02-.39-1.41 0l-9.37 9.37c-.39.39-.39 1.02 0 1.41l2.34 2.34c.39.39 1.02.39 1.41 0l9.37-9.37c.39-.39.39-1.02 0-1.41l-2.34-2.34z'/%3E%3C/svg%3E");
}

#xiaohongFeatures .fa-rocket::before,
#xiaohongFeatures .fas.fa-rocket::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ff4757'%3E%3Cpath d='M12 2.5c0 0 4.5 2.04 4.5 10.5 0 2.49-1.04 5.57-1.6 7H9.1c-.56-1.43-1.6-4.51-1.6-7C7.5 4.54 12 2.5 12 2.5zm2 8.5c0-1.1-.9-2-2-2s-2 .9-2 2 .9 2 2 2 2-.9 2-2zm-6.31 9.52c-.48-1.23-1.52-4.17-1.67-6.87L4 15v4l3.69 1.52zm10.62 0L22 19v-4l-2.02-1.35c-.15 2.69-1.2 5.64-1.67 6.87z'/%3E%3C/svg%3E");
}

#xiaohongFeatures .fa-star::before,
#xiaohongFeatures .fas.fa-star::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ff4757'%3E%3Cpath d='M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z'/%3E%3C/svg%3E");
}

/* ========== 抖抖功能区域 - 图标 SVG ========== */

#douyinFeatures .fa-chart-line::before,
#douyinFeatures .fas.fa-chart-line::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000000'%3E%3Cpath d='M16 6l2.29 2.29-4.88 4.88-4-4L2 16.59 3.41 18l6-6 4 4 6.3-6.29L22 12V6h-6z'/%3E%3C/svg%3E");
}

#douyinFeatures .fa-fire::before,
#douyinFeatures .fas.fa-fire::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000000'%3E%3Cpath d='M17.6 11.48A3.06 3.06 0 0 0 16 8.82A3.86 3.86 0 0 1 17.6 12c1.66 2.24 1.66 5.24 0 7.48A7 7 0 0 1 8.4 12C6.74 9.76 6.74 6.76 8.4 4.52A7 7 0 0 1 17.6 11.48Z'/%3E%3C/svg%3E");
}

#douyinFeatures .fa-user-chart::before,
#douyinFeatures .fas.fa-user-chart::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000000'%3E%3Cpath d='M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4zm8-10h-4v2h4v4h2V6c0-1.1-.9-2-2-2zm0 8h-2v4h-4v2h4c1.1 0 2-.9 2-2v-4z'/%3E%3C/svg%3E");
}

#douyinFeatures .fa-binoculars::before,
#douyinFeatures .fas.fa-binoculars::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000000'%3E%3Cpath d='M7 8c-2.21 0-4 1.79-4 4s1.79 4 4 4 4-1.79 4-4-1.79-4-4-4zm0 6c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm10-6c-2.21 0-4 1.79-4 4s1.79 4 4 4 4-1.79 4-4-1.79-4-4-4zm0 6c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zM12 6h-1V4h1v2zm0 2h-1v2h1V8z'/%3E%3C/svg%3E");
}

#douyinFeatures .fa-film::before,
#douyinFeatures .fas.fa-film::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000000'%3E%3Cpath d='M18 4l2 4h-3l-2-4h-2l2 4h-3l-2-4H8l2 4H7L5 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V4h-4zm-6.75 11.25L10 18l-1.25-2.75L6 14l2.75-1.25L10 10l1.25 2.75L14 14l-2.75 1.25zm5.69-3.31L16 14l-.94-2.06L13 11l2.06-.94L16 8l.94 2.06L19 11l-2.06.94z'/%3E%3C/svg%3E");
}

/* ========== 图标基础样式 ========== */

#xiaohongFeatures .feature-icon i,
#douyinFeatures .feature-icon i {
    font-size: 28px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    height: 100% !important;
}

#xiaohongFeatures .feature-icon i::before,
#douyinFeatures .feature-icon i::before {
    content: "" !important;
    display: inline-block !important;
    width: 1em !important;
    height: 1em !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    vertical-align: middle !important;
}

/* ========== 功能区域容器 ========== */

#xiaohongFeatures,
#douyinFeatures {
    position: relative;
    padding: 8px 0;
}

/* ========== 功能卡片 ========== */

#xiaohongFeatures .feature-item,
#douyinFeatures .feature-item {
    position: relative;
    background: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.04);
    border-radius: 18px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    overflow: hidden;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
    z-index: 1;
}

#xiaohongFeatures .feature-item:hover,
#douyinFeatures .feature-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
}

#xiaohongFeatures .feature-item:active,
#douyinFeatures .feature-item:active {
    transform: translateY(0) scale(0.98);
    transition: all 0.1s ease;
}

/* ========== 图标容器 ========== */

#xiaohongFeatures .feature-icon,
#douyinFeatures .feature-icon {
    width: 56px;
    height: 56px;
    border-radius: 14px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.25s ease;
}

#xiaohongFeatures .feature-item:hover .feature-icon,
#douyinFeatures .feature-item:hover .feature-icon {
    transform: scale(1.05);
}

/* ========== 文字样式 ========== */

#xiaohongFeatures .feature-text,
#douyinFeatures .feature-text {
    font-size: 0.92rem;
    font-weight: 600;
    letter-spacing: 0.3px;
    color: #111827;
    transition: color 0.2s ease;
    position: relative;
}

/* MAX 徽章样式 */
#xiaohongFeatures .feature-text .max-badge,
#douyinFeatures .feature-text .max-badge {
    -webkit-text-fill-color: #000 !important;
    background: linear-gradient(135deg, #ffd93d 0%, #ff9500 100%) !important;
    -webkit-background-clip: padding-box !important;
    background-clip: padding-box !important;
    color: #000 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 9px !important;
    font-weight: 800 !important;
    padding: 1px 5px !important;
    border-radius: 4px !important;
    margin-left: 3px !important;
    vertical-align: baseline !important;
    letter-spacing: 0.5px !important;
    line-height: 1.2 !important;
    box-shadow: 0 1px 4px rgba(255, 217, 61, 0.4) !important;
    transform: translateY(-1px) !important;
}

/* ========== 光晕 ========== */

#xiaohongFeatures .feature-glow,
#douyinFeatures .feature-glow {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    opacity: 0;
    pointer-events: none;
    z-index: 0;
}

/* ========== 响应式 ========== */

@media (max-width: 480px) {
    #xiaohongFeatures .feature-icon i,
    #douyinFeatures .feature-icon i {
        font-size: 24px !important;
    }

    #xiaohongFeatures .feature-item,
    #douyinFeatures .feature-item {
        border-radius: 14px;
    }

    #xiaohongFeatures .feature-icon,
    #douyinFeatures .feature-icon {
        width: 48px;
        height: 48px;
        border-radius: 12px;
    }

    #xiaohongFeatures .feature-text,
    #douyinFeatures .feature-text {
        font-size: 0.85rem;
    }
}

@media (max-width: 375px) {
    #xiaohongFeatures .feature-icon i,
    #douyinFeatures .feature-icon i {
        font-size: 22px !important;
    }

    #xiaohongFeatures .feature-icon,
    #douyinFeatures .feature-icon {
        width: 44px;
        height: 44px;
        border-radius: 11px;
    }

    #xiaohongFeatures .feature-text,
    #douyinFeatures .feature-text {
        font-size: 0.82rem;
    }
}

/* ========== 触摸反馈 ========== */

@media (hover: none) and (pointer: coarse) {
    #xiaohongFeatures .feature-item:active,
    #douyinFeatures .feature-item:active {
        transform: scale(0.97);
        transition: transform 0.1s ease;
    }
}