/* 文章页广告卡片样式 - 基于提供的HTML代码 */

/* CSS 变量定义 (模拟主题色) */
:root {
    --theme: #409EFF; /* 主题蓝 */
    --background: #fff;
    --main: #333;
    --routine: #666;
}

/* --- 动画定义 --- */
@keyframes pulse-border {
    0% { box-shadow: 0 0 15px rgba(64, 158, 255, 0.3); }
    50% { box-shadow: 0 0 25px rgba(64, 158, 255, 0.8); }
    100% { box-shadow: 0 0 15px rgba(64, 158, 255, 0.3); }
}

@keyframes scroll-text {
    0% { transform: translateX(0); }
    50% { transform: translateX(-5%); }
    100% { transform: translateX(0); }
}

@keyframes bounce {
    0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
    40% { transform: translateY(-5px); }
    60% { transform: translateY(-3px); }
}

@keyframes blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

@keyframes gradient-flow {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* --- 顶部卡片样式 (.joe_cloud) --- */
.joe_cloud {
    display: flex;
    align-items: center;
    background: var(--background);
    padding: 15px;
    border-radius: 8px;
}

/* 1. Logo 容器大小和间距 */
.joe_cloud__logo {
    width: 44px; 
    height: 44px;
    margin-right: 15px;
    flex-shrink: 0;
    /* 保持容器是正方形，防止SVG失真 */
}

/* 🌟 2. 使用提供的 SVG 背景图 🌟 */
.joe_cloud__logo._default {
    background-image: url("data:image/svg+xml;base64,PHN2ZyB0PSIxNzU1NTcxMDgzNzIyIiBjbGFzcz0iaWNvbiIgdmlld0JveD0iMCAwIDEwOTUgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9IjkwNTciIHdpZHRoPSIxMjgiIGhlaWdodD0iMTI4Ij48cGF0aCBkPSJNMTA3Ljc4OTQ3NCAwaDg4MC4yODA3MDFhMTA3Ljc4OTQ3NCAxMDcuNzg5NDc0IDAgMCAxIDEwNy43ODk0NzQgMTA3Ljc4OTQ3NHY4MDguNDIxMDUyYTEwNy43ODk0NzQgMTA3Ljc4OTQ3NCAwIDAgMS0xMDcuNzg5NDc0IDEwNy43ODk0NzRIMTA3Ljc4OTQ3NGExMDcuNzg5NDc0IDEwNy43ODk0NzQgMCAwIDEtMTA3Ljc4OTQ3NC0xMDcuNzg5NDc0VjEwNy43ODk0NzRhMTA3Ljc4OTQ3NCAxMDcuNzg5NDc0IDAgMCAxIDEwNy43ODk0NzQtMTA3Ljc4OTQ3NHogbTAgNzEuODU5NjQ5YTM1LjkyOTgyNSAzNS45Mjk4MjUgMCAxIDEtMzUuOTI5ODI1IDM1LjkyOTgyNSAzNS45Mjk4MjUgMzUuOTI5ODI1IDAgMCAxIDM1LjkyOTgyNS0zNS45Mjk4MjV6IG0xMDcuNzg5NDczIDBhMzUuOTI5ODI1IDM1LjkyOTgyNSAwIDEgMS0zNS45Mjk4MjQgMzUuOTI5ODI1IDM1LjkyOTgyNSAzNS45Mjk4MjUgMCAwIDEgMzUuOTI5ODI0LTM1LjkyOTgyNXogbTEwNy43ODk0NzQgMGEzNS45Mjk4MjUgMzUuOTI5ODI1IDAgMSAxLTM1LjkyOTgyNSAzNS45Mjk4MjUgMzUuOTI5ODI1IDM1LjkyOTgyNSAwIDAgMSAzNS45Mjk4MjUtMzUuOTI5ODI1eiIgZmlsbD0iIzI3OEJGMCIgcC1pZD0iOTA1OCI+PC9wYXRoPjxwYXRoIGQ9Ik03MS44NTk2NDkgMjE1LjU3ODk0N201My44OTQ3MzcgMGw4NDQuMzUwODc3IDBxNTMuODk0NzM3IDAgNTMuODk0NzM3IDUzLjg5NDczN2wwIDYyOC43NzE5M3EwIDUzLjg5NDczNy01My44OTQ3MzcgNTMuODk0NzM3bC04NDQuMzUwODc3IDBxLTUzLjg5NDczNyAwLTUzLjg5NDczNy01My44OTQ3MzdsMC02MjguNzcxOTNxMC01My44OTQ3MzcgNTMuODk0NzM3LTUzLjg5NDczN1oiIGZpbGw9IiNGRkZGRkYiIHAtaWQ9IjkwNTkiPjwvcGF0aD48cGF0aCBkPSJNNzc3Ljk4ODQ5MSA4NDMuNTA2NTI2aC0zMTYuMTgyNDU2YTE1OC4wOTEyMjggMTU4LjA5MTIyOCAwIDAgMS0yMS4wMTg5NDctMzE0LjYxOTUwOCAxODkuNjczNTQ0IDE4OS42NzM1NDQgMCAwIDEgMzU4Ljg4NTA1MiAwIDE1OC4wOTEyMjggMTU4LjA5MTIyOCAwIDAgMS0yMS42ODM2NDkgMzE0LjYxOTUwOHogbS0xNTcuNzg1ODI0LTYyLjk4NDk4MmExODkuOTc4OTQ3IDE4OS45Nzg5NDcgMCAwIDEtMzAuMzQyNzM3LTIuNjU4ODA3Yy0wLjY2NDcwMiAwLjkzNDE3NS0xLjQ3MzEyMyAxLjc5NjQ5MS0yLjE1NTc5IDIuNjU4ODA3SDY1Mi4xMjYzMTZjLTAuNjY0NzAyLTAuODgwMjgxLTEuNDM3MTkzLTEuNjcwNzM3LTIuMDgzOTMtMi41Njg5ODNhMTg5LjUxMTg2IDE4OS41MTE4NiAwIDAgMS0yOS44Mzk3MTkgMi41Njg5ODN6IiBmaWxsPSIjQzJFOEZEIiBwLWlkPSI5MDYwIj48L3BhdGg+PHBhdGggZD0iTTY1Mi4wMTg1MjYgNzQ5LjAyOTA1M2gtMzE2LjE4MjQ1NmExNTguMDkxMjI4IDE1OC4wOTEyMjggMCAwIDEtMjEuNzczNDc0LTMxNC41MTE3MiAxODkuNzk5Mjk4IDE4OS43OTkyOTggMCAwIDEgMzU5LjA2NDcwMi0wLjEwNzc4OSAxNTguMDkxMjI4IDE1OC4wOTEyMjggMCAwIDEtMjEuMTA4NzcyIDMxNC42MTk1MDl6TTY1MS43MTMxMjMgNDk1LjgzMTU3OWE5My43NzY4NDIgOTMuNzc2ODQyIDAgMCAwLTMyLjEwMzI5OCA1Ljk2NDM1MWMwLTEuOTk0MTA1IDAuMjg3NDM5LTMuOTUyMjgxIDAuMjg3NDM4LTUuOTY0MzUxYTEyNi4yOTMzMzMgMTI2LjI5MzMzMyAwIDEgMC0yNTIuNTY4NzAyIDBjMCAyLjAxMjA3IDAuMTk3NjE0IDMuOTcwMjQ2IDAuMzA1NDA0IDUuOTY0MzUxYTkyLjg2NDI2MyA5Mi44NjQyNjMgMCAxIDAtMzIuMTAzMjk4IDE4My42MTkzNjhoMzE2LjQ4Nzg1OWE5NC44MDA4NDIgOTQuODAwODQyIDAgMCAwLTAuMzA1NDAzLTE4OS41ODM3MTl6IiBmaWxsPSIjNjFDOTc3IiBwLWlkPSI5MDYxIj48L3BhdGg+PC9zdmc+") !important;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

/* 描述区域 */
.joe_cloud__describe {
    flex: 1;
    min-width: 0;
    margin-right: 10px;
}

.joe_cloud__describe-title a {
    font-size: 16px;
    text-decoration: none;
    color: var(--theme);
}

.joe_cloud__describe-type {
    color: var(--routine);
    font-size: 12px;
    margin-top: 5px;
}

/* 下载按钮样式 (.joe_cloud__btn) */
.joe_cloud__btn {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 40px;
    height: 40px;
    background: var(--theme);
    color: white;
    border-radius: 50%;
    text-decoration: none;
    font-size: 18px;
    flex-shrink: 0;
    transition: background 0.3s;
}
.joe_cloud__btn:hover {
    background: #5cacff;
}

/* NEW 角标 */
.joe_cloud__tip {
    position: absolute;
    top: -12px;
    right: -12px;
    background: #ff4757;
    color: white;
    font-size: 10px;
    padding: 3px 8px;
    border-radius: 12px;
    animation: blink 1s infinite;
    z-index: 10;
    box-shadow: 0 2px 8px rgba(255, 71, 87, 0.4);
    font-weight: bold;
}

/* 底部提示条样式 (.joe_download_tip) */
.joe_download_tip {
    display: flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap; 
}

/* Font Awesome 图标颜色设置 */
.fa-hand-o-up, .fa-download {
    color: white;
}



/* 暗色主题支持 */
@media (prefers-color-scheme: dark) {
    .joe_cloud {
        background: #1a1a1a;
        border-color: #409EFF;
    }
    
    .joe_cloud__describe-type {
        color: #666;
    }
}