/*
 Theme Name:   GeneratePress Child
 Theme URI:    https://generatepress.com
 Description:  GeneratePress 子主题 (用于 mingtuiw.com 二次开发)
 Author:       Your Name
 Template:     generatepress
 Version:      1.0.0
*/

/* 在下面写您的自定义 CSS，例如修改手机端图片间距 */
.attachment-image img {
    box-shadow: 0 4px 10px rgba(0,0,0,0.1); /* 给图片加个阴影 */
}

/* =========================================
   GeneratePress 子主题样式：极简紫韵 (Minimalist Royal)
   配色：皇家紫 (#6C3483) + 纯白 (#FFFFFF)
   风格：无背景导航、顶部品牌线、卡片静止
   ========================================= */

/* 1. 全局设置：干净、通透 */
body {
    background-color: #f7f7f7; /* 背景极浅的灰，突出白色内容 */
    color: #333; 
    font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif;
    -webkit-font-smoothing: antialiased;
}

/* 2. 链接颜色：皇家紫 */
a {
    color: #6C3483; 
    text-decoration: none;
    transition: color 0.2s ease;
}
a:hover {
    color: #4A235A; /* 悬停变深 */
}

/* =========================================
   3. 头部与导航 (Header & Nav) - 极简白底
   ========================================= */
/* 头部容器 */
.site-header {
    background: #fff;
    /* 核心修改：顶部增加品牌识别线 */
    border-top: 4px solid #6C3483; 
    border-bottom: 1px solid #eee; /* 底部淡线分割 */
}

/* 导航栏：去掉了背景色，与头部融为一体 */
.main-navigation {
    background-color: #fff; 
}

/* 导航文字：深灰色，稳重 */
.main-navigation .main-nav ul li a {
    color: #444;
    font-size: 16px;
    font-weight: 500;
    padding-left: 20px;
    padding-right: 20px;
}

/* 导航悬停：背景不变色，只变文字颜色 */
.main-navigation .main-nav ul li:hover > a, 
.main-navigation .main-nav ul li.current-menu-item > a {
    background-color: transparent; /* 透明背景 */
    color: #6C3483; /* 文字变紫 */
}

/* 移动端菜单按钮颜色修正 */
.main-navigation .menu-toggle {
    color: #444; /* 手机上汉堡菜单也是深灰色 */
}

/* =========================================
   首页顶部：最新更新主题 (横向滑动体验)
   ========================================= */

.recent-topics-container {
    background: #fff;
    padding: 15px 20px;
    border-radius: 12px;
    margin-bottom: 25px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.02);
}

.recent-topics-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.rt-title {
    font-size: 15px;
    font-weight: bold;
    color: #333;
}

.rt-more {
    font-size: 13px;
    color: #888;
    text-decoration: none;
    transition: color 0.2s;
}
.rt-more:hover {
    color: #6C3483;
}

/* =========================================
   核心：药丸风格链接 (a标签本身)
   ========================================= */
.recent-topics-container .cat-pill {
    display: inline-flex;
    align-items: center;
    padding: 8px 14px;
    border-radius: 30px;
    text-decoration: none !important;
    font-size: 12px;
    font-weight: 500;
    transition: all 0.3s ease;
    border: 1px solid transparent;
    line-height: 1.2;
}
.recent-topics-container .cat-pill:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}

/* --- 颜色等级 1: 1-9篇 (清新型) --- */
.cat-lv-1 { background: #fbf4ff; border-color: #e0d0eb; color: #555; }
.cat-lv-1 .cat-count { background: #fff; color: #888; border: 1px solid #eee; }
.cat-lv-1:hover { background: #f3e5f5; color: #6C3483; border-color: #ce93d8; }

/* --- 颜色等级 2: 10-19篇 (热门型) --- */
.cat-lv-2 { background: #f3e5f5; border-color: #ce93d8; color: #6C3483; }
.cat-lv-2 .cat-count { background: #fff; color: #6C3483; }
.cat-lv-2:hover { background: #e1bee7; }

/* --- 颜色等级 3: 20篇以上 (火爆型 - 品牌紫) --- */
.cat-lv-3 { background: #6C3483; border-color: #6C3483; color: #fff; }
.cat-lv-3 .cat-count { background: rgba(255,255,255,0.25); color: #fff; }
.cat-lv-3:hover { background: #512663; color:#ffffff; border-color: #512663; box-shadow: 0 4px 12px rgba(108, 52, 131, 0.3); }

/* 核心：横向滑动包装器 */
.recent-topics-scroll-wrap {
    display: flex;
    flex-wrap: wrap; /* 电脑端默认折行显示 */
    gap: 10px;
}

/* 手机端独享福利：变成单行横向丝滑滚动，不占用宝贵的垂直屏幕空间 */
@media (max-width: 768px) {
    .recent-topics-scroll-wrap {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch; /* iOS 弹性滚动 */
        padding-bottom: 5px; /* 给滚动条留点空间 */
    }
    
    /* 隐藏手机端的丑陋滚动条 */
    .recent-topics-scroll-wrap::-webkit-scrollbar {
        display: none; 
    }
    
    /* 强制里面的胶囊不换行 */
    .recent-topics-scroll-wrap .cat-pill {
        flex-shrink: 0; 
    }
}

/* =========================================
   4. 文章卡片 (Static Cards) - 静止、无上浮
   ========================================= */
.inside-article {
    background-color: #fff;
    padding: 24px;
    
    /* 静态样式：淡边框 + 极淡的阴影 */
    border: 1px solid #e0e0e0;
    box-shadow: 0 1px 2px rgba(0,0,0,0.03);
    
    /* 保持直角或微圆角 */
    border-radius: 2px;
    
    /* 过渡效果：只过渡边框颜色 */
    transition: border-color 0.3s ease;
}

/* 鼠标悬停：位置绝对不动 (No Float)，只变边框 */
.inside-article:hover {
    transform: none; /* 强制禁止位移 */
    box-shadow: 0 1px 2px rgba(0,0,0,0.03); /* 阴影也不变 */
    border-color: #6C3483; /* 只有边框变成紫色，提示选中 */
}

/* 图片容器 */
.post-image img, .attachment-image img {
    border-radius: 2px;
    margin-bottom: 15px;
    /* 图片本身加一点点透明度过渡，鼠标放上去变亮 */
    opacity: 0.95;
    transition: opacity 0.3s;
}
.inside-article:hover .post-image img {
    opacity: 1;
}

.inside-article .entry-content .post_viponly2{
    color: #eacd6b;
}

/* =========================================
   正文内部：VIP资源 专属标识 (靠右显示)
   ========================================= */
.inside-article .entry-content .post_viponly {
    float: right;                /* 核心：向最右侧浮动 */
    margin: 0 0 15px 20px;       /* 保证标识左侧和下方与正文文字留有呼吸空间 */
    padding: 6px 14px;           /* 内边距，撑开胶囊形状 */
    
    /* 尊贵黑金渐变背景 */
    background: linear-gradient(135deg, #2c3e50 0%, #000000 100%); 
    color: #f1c40f;              /* 耀眼的金色文字 */
    border: 1px solid #d4af37;   /* 暗金边框 */
    
    font-size: 12px;
    font-weight: bold;
    border-radius: 25px;         /* 圆角胶囊形 */
    box-shadow: 0 4px 12px rgba(212, 175, 55, 0.2); /* 金色微发光阴影 */
    
    /* 使用 flex 让内部文字或可能加的图标完美居中 */
    display: inline-flex;
    align-items: center;
    letter-spacing: 0.5px;
    z-index: 10;
    transition: all 0.3s ease;
}

/* 手机端适配：如果屏幕太小，浮动可能会有点挤，可以取消浮动单独占一行靠右 */
@media (max-width: 768px) {
    .inside-article .entry-content .post_viponly {
        float: none;
        display: flex;
        width: max-content;
        margin-left: auto; /* 手机端强制靠右 */
        margin-bottom: 15px;
    }
}

/* =========================================
   5. 标题与排版 (Typography)
   ========================================= */
h1, h2, h3, .entry-title {
    color: #222;
    font-weight: 600;
}

.entry-title {
    font-size: 20px;
    line-height: 1.5;
    margin-bottom: 10px;
}

.entry-title a {
    color: #333;
}
.entry-title a:hover {
    color: #6C3483;
}

/* =========================================
   6. 按钮与交互 (Buttons)
   ========================================= */
button, 
input[type="submit"], 
a.button,
.nav-links .page-numbers.current {
    background-color: #6C3483; /* 紫色背景 */
    color: #fff;
    border-radius: 2px; /* 配合卡片的硬朗风格 */
    padding: 8px 24px;
    font-size: 14px;
    border: 1px solid transparent;
}

button:hover, 
input[type="submit"]:hover, 
a.button:hover {
    background-color: #fff; /* 悬停时变成白底紫字 */
    color: #6C3483;
    border-color: #6C3483; /* 紫色描边 */
}

/* 翻页按钮 */
.nav-previous a, .nav-next a {
    border: 1px solid #ddd;
    color: #666;
    background: #fff;
    border-radius: 2px;
    padding: 8px 20px;
    font-size: 13px;
}

.nav-previous a:hover, .nav-next a:hover {
    border-color: #6C3483;
    color: #6C3483;
    background: #fff;
}

/* =========================================
   7. 移动端优化
   ========================================= */
@media (max-width: 768px) {
    .site-header {
        border-top-width: 3px; /* 手机上顶线稍微细一点 */
    }
    
    .inside-article {
        padding: 15px;
        border-left: none;
        border-right: none;
        border-radius: 0;
        /* 手机端去掉阴影，只保留下划线分割 */
        box-shadow: none;
        border-top: none;
        border-bottom: 1px solid #eee;
    }
}

/* --- 1. 分类区域 (Categories) --- */

/* 针对 GeneratePress 的文章底部区域 */
footer.entry-meta {
    display: flex;
    flex-direction: column;  /* 将排列方向改为垂直（上下排列） */
    align-items: flex-start; /* 整体靠左对齐 */
    gap: 12px;               /* 分类行和标签行之间的间距 */
    margin-top: 20px;        /* 与上方文章内容的间距 */
    padding-top: 15px;       
    border-top: 1px dashed #eee; /* 可选：加一条淡淡的虚线分隔线，更显精致 */
}
footer.entry-meta .cat-links {
    display: none !important;
}
/* 确保分类和标签的容器宽度占满，内部标签过多时自动换行 */
footer.entry-meta .tags-links {
    display: flex;
    flex-wrap: wrap;         /* 标签非常多时，在这一行内自动折行 */
    align-items: center;
    width: 100%;
    font-size: 14px;         /* 字体大小微调 */
    color: #888;
}

/* 针对具体的标签/分类链接进行一点美化（与您网站的品牌紫呼应） */
footer.entry-meta a {
    display: inline-block;
    background: #ffffff;
    color: #676767;
    padding: 3px 10px;
    border-radius: 12px;
    text-decoration: none;
    transition: all 0.3s ease;
    font-size: 16px;
}

/* 悬停时的变色交互 */
footer.entry-meta a:hover {
    background: #6C3483;
    color: #fff;
}

footer.entry-meta .entry-date{
    font-size: 14px;
    color: #9c9c9c;
}
/* 核心高亮标签 (与分类同名的标签) */
footer.entry-meta a.featured-tag {
    background: #6C3483 !important;      /* 使用您的品牌深紫色 */
    color: #ffffff !important;           /* 白色文字 */
    border: 1px solid #6C3483 !important;
    font-weight: bold;                   /* 字体加粗 */
    padding: 4px 14px;                   /* 稍微变大一点点 */
    margin-right: 6px;
}

/* 高亮标签的悬停效果 */
footer.entry-meta a.featured-tag:hover {
    background: #8E44AD !important;      /* 悬停时稍微变亮 */
    border-color: #8E44AD !important;
    transform: translateY(-2px);
}

/* =========================================
   热门文章小工具样式 (Hot Posts Widget)
   ========================================= */
.sidebar-related-widget {
    background: #fff;
    padding: 20px;
    border-radius: 12px;
    margin-bottom: 25px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.03);
    border-top: 4px solid #6C3483;
}
.sidebar-related-widget .widget-title {
    font-size: 16px;
    font-weight: bold;
    color: #333;
    border-bottom: 1px dashed #eee;
    padding-bottom: 10px;
    text-align: center;
}

.hot-posts-widget {
    list-style: none;
    padding: 0;
    margin: 0;
}

.hot-post-item {
    margin-bottom: 15px;
    border-bottom: 1px dashed #eee; /* 分割线 */
    padding-bottom: 10px;
}

.hot-post-item:last-child {
    border-bottom: none;
    margin-bottom: 0;
}

.hot-post-item a {
    display: flex; /* 弹性布局：左图右文 */
    align-items: center;
    text-decoration: none;
    color: #333;
    transition: all 0.2s;
}

.hot-post-item a:hover .hot-post-title {
    color: #6C3483; /* 悬停变紫色 */
}

/* 左侧缩略图 */
.hot-post-thumb {
    flex-shrink: 0;
    width: 80px;  /* 您可以改成 100px 或 120px */
    height: 60px; /* 必须设置固定高度 */
    margin-right: 12px;
    overflow: hidden;
    border-radius: 4px;
    background: #f0f0f0;
}

.hot-post-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* 关键：自动裁剪，不变形 */
    transition: transform 0.3s;
}

.hot-post-item a:hover .hot-post-thumb img {
    transform: scale(1.1); /* 鼠标悬停图片微放大 */
}

/* 右侧标题 */
.hot-post-info {
    flex-grow: 1;
}

.hot-post-title {
    font-size: 14px;
    line-height: 1.4;
    display: block;
    font-weight: 500;
}

/* =========================================
   极简单行友情链接 (Inline Style)
   ========================================= */

/* 1. 容器设置：居中、适度留白 */
.footer-friend-links-inline {
    text-align: center; /* 核心：全部居中 */
    padding: 15px 0;    /* 上下留白 */
    font-size: 13px;    /* 字号不用太大 */
    color: #888;        /* 默认灰色 */
    
    /* 可选：顶部加一条极细的分割线，区分正文 */
    border-top: 1px solid #f0f0f0; 
    margin-top: 20px;
}

/* 2. "友情链接：" 标题样式 */
.footer-friend-links-inline .link-label {
    font-weight: 600;   /* 加粗 */
    color: #444;        /* 颜色深一点，突出标题 */
    margin-right: 5px;  /* 和第一个链接的距离 */
}

/* 3. 链接通用样式 */
.footer-friend-links-inline a {
    color: #666;        /* 链接颜色 */
    text-decoration: none;
    margin: 0 6px;      /* 左右间距 */
    transition: color 0.2s ease;
    position: relative;
}

/* 4. 鼠标悬停：变成皇家紫 */
.footer-friend-links-inline a:hover {
    color: #6C3483; 
}

/* 5. (高级) 自动在链接之间加一个小圆点 */
/* 这里的逻辑是：除了第一个链接，其他链接前面都加个点 */
.footer-friend-links-inline a:not(:first-of-type)::before {
    content: "·";       /* 分隔符 */
    position: absolute;
    left: -10px;        /* 调整点的位置 */
    color: #ccc;        /* 点的颜色要淡 */
    font-weight: bold;
}

/* 只有首页才显示页脚小工具 (如果需要) */
body:not(.home) .footer-friend-links-inline {
    display: none;
}

/* =========================================
   图片附件页专属样式 (Image Attachment)
   ========================================= */
.inline-image-header {
    display: flex;
    align-items: center;     /* 垂直居中对齐 */
    flex-wrap: wrap;         /* 允许在极小屏幕下自动换行防止内容溢出 */
    gap: 15px;               /* 按钮和标题之间的间距 */
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 1px dashed #eee; /* 底部加一条细虚线分隔，更显精致 */
}

/* --- 醒目的返回按钮样式 --- */
.btn-back-gallery {
    display: inline-flex;
    align-items: center;
    padding: 8px 16px;
    background-color: #fbf4ff;  /* 浅紫底色 */
    color: #6C3483;             /* 品牌紫文字 */
    border: 1px solid #e0d0eb;  /* 淡淡的紫色边框 */
    border-radius: 6px;         /* 圆角 */
    font-size: 14px;
    font-weight: bold;
    text-decoration: none !important;
    white-space: nowrap;        /* 防止按钮内文字被挤换行 */
    transition: all 0.3s ease;
}

/* 返回按钮悬停动效：变深色，且有一个向左的小位移，暗示"返回" */
.btn-back-gallery:hover {
    background-color: #6C3483;
    color: #fff;
    border-color: #6C3483;
    transform: translateX(-4px); 
    box-shadow: 0 4px 10px rgba(108, 52, 131, 0.2);
}

.btn-back-gallery .icon-back {
    margin-right: 6px;
    font-style: normal;
    font-size: 16px;
    line-height: 1;
}

/* --- 标题样式调整 --- */
.inline-image-header .entry-title {
    margin: 0;               /* 去除 WordPress 默认的 H1 外边距，保证对齐 */
    font-size: 22px;         /* 字号稍微调适中，适应同行显示 */
    color: #333;
    line-height: 1.4;
    flex: 1;                 /* 让标题占据右侧所有剩余空间 */
    
    /* 以下三行用于标题过长时显示省略号，如果不希望截断可以删除 */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis; 
}

/* 计数器及标签样式 */
.image-counter {
    font-size: 16px;
    color: #999;
    font-weight: normal;
    margin-left: 8px;
}
.user-badge {
    color: #ff6b81; /* 你的作品 专属颜色 */
}

/* --- 手机端适配 --- */
@media (max-width: 768px) {
    .inline-image-header {
        gap: 10px;
    }
    .btn-back-gallery {
        padding: 6px 12px;
        font-size: 13px;
    }
    .inline-image-header .entry-title {
        font-size: 18px;
    }
    .image-counter {
        font-size: 14px;
    }
}


/* 4. 工具栏 (下载按钮) */
.image-toolbar {
    margin-bottom: 25px;
    display: flex;
    justify-content: center;
    gap: 15px; /* 按钮之间的间距 */
}

/* =========================================
   统一扁平化按钮样式 (无特效版)
   ========================================= */

/* 1. 按钮基础设定：移除所有动画和位移 */
.image-toolbar .button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-weight: 600;
    padding: 10px 25px; /* 调整内边距让按钮更饱满 */
    border-radius: 50px; /* 圆角保持 */
    text-decoration: none;
    
    /* 核心：禁止过渡动画和位移 */
    transition: none !important; 
    transform: none !important;
    box-shadow: none !important;
}

/* ==========================================================
   VIP 锁定状态按钮样式
   ========================================================== */
.image-toolbar .button.vip-locked {
    background-color: #f5f5f5 !important; /* 明显的不可用灰色底 */
    color: #b0b0b0 !important; /* 褪色的文字 */
    border: 1px solid #e0e0e0;
    cursor: not-allowed; /* 鼠标变成禁止符号 */
    position: relative;  /* 为伪元素覆盖做绝对定位的基准 */
    overflow: hidden;    /* 必须：防止悬浮覆盖层溢出圆角 */
}

/* 制作“VIP专属”的隐藏覆盖层 */
.image-toolbar .button.vip-locked::after {
    content: "👑 VIP 专属"; /* 您可以自由修改这里的文案或Emoji */
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    
    /* 视觉设计：使用尊贵的黑金配色或者警示色 */
    background-color: #333333; 
    color: #ffd700; /* 金色文字 */
    font-weight: bold;
    
    /* 让文字完美居中 */
    display: flex;
    align-items: center;
    justify-content: center;
    
    /* 初始状态：完全透明隐藏 */
    opacity: 0; 
    
    /* 注：这里的动画作用于伪元素，不受您基础样式 !important 的限制 */
    transition: opacity 0.2s ease-in-out; 
}

/* 鼠标悬浮时：立刻显示覆盖层 */
.image-toolbar .button.vip-locked:hover::after {
    opacity: 1;
}

/* 进一步防范：彻底禁用所有点击事件（防止部分浏览器无视 javascript:void(0)） */
.image-toolbar .button.vip-locked {
    pointer-events: auto; /* 必须保持 auto，否则 hover 不会触发 */
}
.image-toolbar .button.vip-locked:active {
    pointer-events: none; /* 按下时失效 */
}

/* 2. 查看按钮：白底、紫边、紫字 */
.ghost-button {
    background-color: #ffffff !important;
    border: 1px solid #6C3483 !important; /* 品牌紫边框 */
    color: #6C3483 !important;
}

/* 鼠标放上去：完全不变 */
.ghost-button:hover {
    background-color: #ffffff !important;
    color: #6C3483 !important;
    border-color: #6C3483 !important;
    opacity: 1; /* 防止某些主题自带透明度变化 */
}

/* 3. 下载按钮：紫底、紫边、白字 */
.primary-button {
    background-color: #6C3483 !important;
    border: 1px solid #6C3483 !important;
    color: #ffffff !important;
}

/* 鼠标放上去：完全不变 */
.primary-button:hover {
    background-color: #6C3483 !important;
    color: #ffffff !important;
    border-color: #6C3483 !important;
    opacity: 1;
}

/* 5. 图片展示区 */
.attachment-image-wrapper {
    margin-bottom: 30px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.05); /* 给大图加个阴影 */
    display: inline-block; /* 只有图片那么宽 */
    border-radius: 4px;
    overflow: hidden;
}

.main-display-image {
    max-width: 100%;
    height: auto;
    display: block;
    max-height: 85vh; /* 限制最大高度，防止图片太长要滚很久 */
    object-fit: contain;
}

/* 6. 翻页导航 */
.image-navigation {
    border-top: 1px solid #eee;
    padding-top: 20px;
    margin-top: 10px;
    display: flex;
    justify-content: space-between;
    margin-bottom: 0px;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

.nav-btn {
    padding: 10px 25px;
    background: #f9f9f9;
    color: #333;
    border-radius: 4px;
    text-decoration: none;
    transition: all 0.2s;
}
.nav-btn:hover {
    background: #6C3483;
    color: #fff;
}
.nav-btn.disabled {
    opacity: 0.5;
    cursor: not-allowed;
    background: #eee;
}

/* 受限图片的样式 (可选) */
.restricted-image {
    /* 可以在这里给缩略图加一点特殊的样式，比如最大宽度限制 */
    max-width: 800px; 
}

/* 1. 限制图片容器的最大高度 */
.entry-attachment {
    text-align: center; /* 确保图片居中 */
    margin-bottom: 20px;
}

/* 2. 核心：限制图片高度，但保持比例 */
.entry-attachment img {
    display: inline-block; /* 让 margin: auto 生效 */
    
    /* 关键逻辑：
       100vh = 屏幕总高度
       - 200px = 预留给顶部导航栏(60px) + 标题(60px) + 底部按钮区域(80px) 的空间
       您可以根据您网站实际的头部和标题高度调整这个 200px
    */
    max-height: calc(100vh - 200px); 
    
    /* 备用方案：如果浏览器不支持 calc (极少见)，限制为屏幕高度的 80% */
    max-height: 80vh; 

    /* 必须设置 width: auto，否则图片会被压扁变形 */
    width: auto; 
    max-width: 100%; /* 保证不超出容器宽度 */
    
    /* 增加一点圆角和阴影，提升质感 */
    border-radius: 8px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1); 
    
    vertical-align: middle;
}

/* 3. 针对手机端的优化 (手机竖屏时可能不需要限制高度，或者限制得宽容一点) */
@media (max-width: 768px) {
    .entry-attachment img {
        /* 手机端通常允许滚动，或者设为 90vh */
        max-height: 85vh; 
    }
}

/* AI 按钮高级质感样式 */
.ai-magic-btn {
    background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%) !important; /* 科技感紫蓝渐变 */
    color: #fff !important;
    border: none !important;
    box-shadow: 0 4px 15px rgba(37, 117, 252, 0.3) !important;
    transition: all 0.3s ease !important;
    font-weight: bold;
}
.ai-magic-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(37, 117, 252, 0.5) !important;
}
.ai-magic-btn .ai-icon {
    margin-right: 5px;
    font-size: 1.1em;
}

/* =========================================
   社交互动条样式 (在一行显示)
   ========================================= */
.social-engagement-bar {
    display: flex;
    justify-content: center; /* 居中显示 */
    gap: 30px;
    margin: 20px 0;
}
.engage-item {
    display: flex;
    align-items: center;
    gap: 8px; /* 按钮和数字的间距 */
}

/* 按钮通用基础样式 */
.engage-btn {
    display: inline-flex;
    align-items: center;
    padding: 6px 16px;
    border-radius: 20px;
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    transition: all 0.3s ease;
    border: 1px solid transparent;
}
.engage-btn.disabled {
    opacity: 0.6;
    pointer-events: none; /* 静默禁用，不显示倒计时 */
}
.engage-btn .user-count {
    margin-left: 4px;
    font-size: 12px;
    opacity: 0.9;
}
.global-stat {
    font-size: 14px;
    color: #888;
    font-weight: bold;
}

/* --- 收藏按钮配色 (黄色系) --- */
.btn-collect {
    background: #fff;
    color: #f39c12;
    border-color: #f39c12;
}
.btn-collect:hover { background: #fdfae9; }
.btn-collect.done {
    background: #f39c12;
    color: #fff;
}

/* --- 来一发按钮动态配色 (火热系) --- */
/* 0次：默认空心 */
.btn-like.like-lv-0 { background: #fff; color: #ff6b81; border-color: #ff6b81; }
.btn-like.like-lv-0:hover { background: #fff0f2; }

/* 1次：浅粉色实心 */
.btn-like.like-lv-1 { background: #ff9fb3; color: #fff; }

/* 2-4次：珊瑚橙色 */
.btn-like.like-lv-2 { background: #ff6b81; color: #fff; }

/* 5-10次：鲜红色 */
.btn-like.like-lv-3 { background: #ff4757; color: #fff; }

/* 10次以上：深红/渐变 (尊贵感) */
.btn-like.like-lv-4 { 
    background: linear-gradient(135deg, #ff4757 0%, #c0392b 100%); 
    color: #fff; 
    box-shadow: 0 2px 8px rgba(255, 71, 87, 0.4);
}

/* =========================================
   侧边栏自定义标签云样式
   ========================================= */
.custom-tag-cloud {
    display: flex;
    flex-wrap: wrap; /* 自动换行 */
    gap: 10px;       /* 标签之间的间距 */
    padding: 5px 0;
}

/* 基础标签样式 */
.custom-tag {
    display: inline-flex;
    align-items: center;
    padding: 6px 14px;
    background: #fbf4ff;        /* 极浅的紫色底色 */
    color: #6C3483;             /* 品牌紫文字 */
    border: 1px solid #e0d0eb;  /* 浅紫边框 */
    border-radius: 20px;        /* 圆角药丸形状 */
    font-size: 13px;
    font-weight: 500;
    text-decoration: none !important;
    transition: all 0.3s ease;
}

/* 悬停效果：变深紫、稍微上浮 */
.custom-tag:hover {
    background: #6C3483;
    color: #fff;
    border-color: #6C3483;
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(108, 52, 131, 0.2);
}

/* --- 重点高亮标签 (引流专用) --- */
.custom-tag.hot-tag {
    background: #fff0f2;        /* 浅红底色 */
    color: #ff4757;             /* 鲜红文字 */
    border-color: #ffc2c8;
}

.custom-tag.hot-tag:hover {
    background: #ff4757;
    color: #fff;
    border-color: #ff4757;
    box-shadow: 0 4px 10px rgba(255, 71, 87, 0.3);
}

.hot-icon {
    margin-left: 4px;
    font-size: 12px;
}

/* =========================================
   首页专属：高赞图片网格小工具样式
   ========================================= */
.sidebar-hot-img-widget {
    background: #fff;
    padding: 20px;
    border-radius: 12px;
    margin-bottom: 25px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.03);
    border-top: 4px solid #6C3483;
}
.sidebar-hot-img-widget .widget-title {
    font-size: 16px;
    font-weight: bold;
    color: #333;
    border-bottom: 1px dashed #eee;
    padding-bottom: 10px;
    text-align: center;
}

/* 2列纯粹网格布局 */
.hot-img-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* 侧边栏分为左右两列 */
    gap: 12px; /* 图片之间的间距 */
}

.hot-img-item {
    display: block;
    position: relative;
    border-radius: 8px;
    overflow: hidden;
    aspect-ratio: 1 / 1; /* 强制裁剪为完美的正方形 */
    background: #fbf4ff;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}

.hot-img-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}

/* 悬停交互：图片轻微放大 */
.hot-img-item:hover img {
    transform: scale(1.12);
}

/* 悬停交互：叠加一层极其淡的品牌紫透明层，显得高级又诱惑 */
.hot-img-item::after {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(108, 52, 131, 0.15); /* 透明品牌紫 */
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}
.hot-img-item:hover::after {
    opacity: 1;
}

/* =========================================
   文章底部高级导航 (卡片式)
   ========================================= */
.custom-post-nav {
    margin: 40px 0 20px 0;
    padding-top: 30px;
    border-top: 2px dashed #f0f0f0; /* 与正文的优雅分割线 */
}

.custom-post-nav .nav-links {
    display: flex;
    justify-content: space-between;
    gap: 20px;
}

/* 统一卡片基础样式 */
.nav-card {
    display: flex;
    align-items: center;
    flex: 1; /* 平分左右空间 */
    background: #fff; /* 浅紫底色 */
    border: 1px solid #e0d0eb;
    border-radius: 12px;
    padding: 15px;
    text-decoration: none !important;
    transition: all 0.3s ease;
    overflow: hidden;
}

/* 占位空卡片 (如果是第一篇或最后一篇文章) */
.nav-card.empty-card {
    background: transparent;
    border: none;
    pointer-events: none;
}

/* 卡片悬停动画：上浮 + 品牌紫阴影 */
.nav-card:hover {
    background: #fbf4ff;
    border-color: #6C3483;
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(108, 52, 131, 0.15);
}

/* 缩略图 */
.nav-card-img {
    width: 60px;
    height: 60px;
    flex-shrink: 0;
    border-radius: 8px;
    overflow: hidden;
}
.nav-card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}
.nav-card:hover .nav-card-img img {
    transform: scale(1.1);
}

/* 文字信息区域 */
.nav-card-text {
    display: flex;
    flex-direction: column;
    justify-content: center;
    flex-grow: 1;
    overflow: hidden;
}

/* 左侧卡片文字靠左，右侧卡片文字靠右 */
.prev-card .nav-card-text { margin-right: 15px; text-align: right; }
.next-card .nav-card-text { margin-left: 15px; text-align: left; }

.nav-subtitle {
    font-size: 12px;
    color: #888;
    margin-bottom: 5px;
    font-weight: 500;
}

.nav-title {
    font-size: 14px;
    font-weight: bold;
    color: #333;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2; /* 限制标题两行，防撑破 */
    -webkit-box-orient: vertical;
    overflow: hidden;
    transition: color 0.3s;
}

.nav-card:hover .nav-title {
    color: #6C3483;
}

/* 手机端适配：改为上下堆叠 */
@media (max-width: 768px) {
    .custom-post-nav .nav-links {
        flex-direction: column;
        gap: 15px;
    }
    .nav-card {
        width: 100%;
    }
}