.mi-article {
    display: flex;
    position: relative;
    margin-bottom: 10px;
}

.mi-header {
    margin-bottom: 0px;
}

.mi-header h1 {
    font-size: 25px;
    margin: 0;
}

.mi-header-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.post-style-1 .el-message-box.pdf-preview-modal,.post-style-2 .el-message-box.pdf-preview-modal,.post-style-3 .el-message-box.pdf-preview-modal{
    width: 1200px;
    
}
.mi-export-pdf span {
    display: flex;
    align-items: center;
    gap: 5px;
}

.mi-export-pdf svg {
    width: 1em;
    height: 1em;
    font-size: 20px;
}
/* 环形进度条弹窗样式 */
.pdf-progress-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
}

.pdf-progress-container {
    background: #fff;
    padding: 40px 30px;
    border-radius: 12px;
    min-width: 280px;
    text-align: center;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}

.pdf-progress-title {
    font-size: 16px;
    font-weight: 600;
    color: #333;
    margin-bottom: 25px;
}

/* 环形进度条 SVG */
.pdf-circular-progress {
    width: 120px;
    height: 120px;
    margin: 0 auto 20px;
}

.pdf-circular-bg {
    fill: none;
    stroke: #f5f5f5;
    stroke-width: 8;
}

.pdf-circular-fill {
    fill: none;
    stroke: #4CAF50;
    stroke-width: 8;
    stroke-linecap: round;
    stroke-dasharray: 282.74;
    /* 精确周长：2π*45 ≈ 282.74 */
    stroke-dashoffset: 282.74;
    transition: stroke-dashoffset 0.3s ease;
}

.pdf-progress-percent {
    font-size: 24px;
    font-weight: 700;
    color: #333;
    margin-bottom: 10px;
}

.pdf-progress-text {
    font-size: 14px;
    color: #666;
}
.article-content strong {
    font-size: 15px;
    line-height: 25px;
}

.mi-postStyle-User {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #ffffff;
    padding: 10px 20px;
    margin: 10px 0;
}

.mi-postStyle-User h1 {
    margin: 0;
}

.mi-postStyle-UserInfo {
    display: flex;
    align-items: center;
}
.mi-postStyle-UserInfo .mi-ranking-vip-badge{
    bottom: 9px;
    right: 7px;
}
.mi-postStyle-Userdesc a:first-child{
    margin-right: 5px;
}
.mi-postStyle-UserInfo button {
    box-shadow: none;
    padding: 8px 0px;
    position: relative;
}

.mi-postStyle-Usergzsx button i {
    margin-right: 5px;
}

.mi-PostUserdesc {
    color: #657085;
    font-size: 12px;
    margin-top: 5px;
    font-weight: 500;
}

.mi-follow-stats {
    margin: 10px 0;
    color: #666;
    font-size: 14px;
}

.mi-follow-stats span {
    margin-right: 15px;
}

.mi-follow-stats strong {
    color: #333;
    font-weight: 600;
}

.mi-postStyle-Usergzsx {
    margin-top: 15px;
}

/* 处理按钮加载状态的样式 */
.el-button--loading .el-icon-loading {
    margin-right: 5px;
}

.article-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 12px;
    padding-bottom: 5px;
    color: #999;
}

.article-info-data span {
    color: #999;
}

.article-info-data span:first-child {
    margin-right: 10px;
}

/* 弹窗样式 */
.mi-postStyleUser-popover {
    padding: 0;
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
    overflow: hidden;
}

.mi-postStyleUser-popover-content {
    padding: 0;
}

.mi-postStyleUser-bg-image {
    width: 100%;
    height: 80px;
    overflow: hidden;
    z-index: 1;
    position: relative;
}

.mi-postStyleUser-bg-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.mi-postStyleUser-popover:hover .mi-postStyleUser-bg-img {
    transform: scale(1.05);
}

.mi-postStyleUser-popover-header {
    text-align: center;
    padding: 0 15px 0px;
    margin-top: -31px;
    z-index: 2;
    position: relative;
}

.mi-postStyleUser-popover-header a{
    position: relative;
}
.mi-postStyleUser-popover-header p {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    font-size: 12px;
    margin: 0;
    line-height: 18px;
}

.mi-postStyleUser-avatar-large {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    border: 4px solid #fff;
    object-fit: cover;
}

.mi-postStyleUser-name {
    font-size: 14px;
    font-weight: 700;
    margin: 0 0 8px;
}
.mi-postStyleUser-name span:first-child{
    margin-right: 2px;
    font-size: 15px;
}
.mi-postStyleUser-popover-header span {
    font-size: 10px;
}

.mi-postStyleUser-popover-header span b:first-child {
    margin-right: 3px;
}

.mi-postStyleUser-bio {
    color: #666;
    font-size: 14px;
    margin: 0 0 5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mi-postStyleUser-stats {
    display: flex;
    justify-content: space-around;
    padding: 12px 0;
    margin-bottom: 16px;
}

.mi-postStyleUser-stat-item {
    text-align: center;
}

.mi-postStyleUser-stat-value {
    display: block;
    font-size: 12px;
    font-weight: bold;
    color: #333;
}

.mi-postStyleUser-stat-label {
    font-size: 12px;
    color: #666;
}

.mi-postStyleUser-actions {
    display: flex;
    padding: 0 16px 16px;
    gap: 8px;
}

.mi-postStyleUser-actions button {
    padding: 5px 0;
}

.mi-postStyleUser-actions button.mi-postStyleUser-message-btn {
    color: #eb526e;
    background: none !important;
    border-color: #eb526e;
    ;
}

.mi-postStyleUser-action-button {
    flex: 1;
}

.mi-postStyleUser-action-button i {
    margin-right: 5px;
}

/* 调整原有样式以适应新组件 */
.mi-PostzS-avatar-img {
    transition: all 0.2s ease;
}
.article-tag {
    margin-right: 30px;
}

.article-tag a {
    padding: 5px 19px;
    font-weight: 500;
    font-size: 12px;
}

.article-meta {
    display: flex;
    font-size: 12px;
}

.article-meta li {
    margin: 0 6px;
}

.article-meta i {
    font-size: 20px;
}

.article-meta span {
    padding-left: 2px;
}

.mi-article-ym {
    color: #878787;
    font-size: 14px;
    margin-bottom: 10px;
}

.mi-article-ym span {
    padding: 0 5px;
}

.widget-item-small {
    margin-bottom: 10px;
}

.widget-item-smallmeta p {
    margin: 2px;
    font-size: 12px;
    font-weight: 700;
    color: #fffafa;
}

.widget-smallmeta-view span {
    padding: 2px 5px;
    font-size: 12px;
    text-shadow: 0 0 0;
    border-radius: 3px;
}

.widget-item-small {
    box-shadow: 0 0 10px #00000059;
}

/*
 *-------------------------------------------------------------------------------
 * 用户前端页面 - 关注与私信
 *-------------------------------------------------------------------------------
 */

/* ======================================
   1. 基础容器与按钮样式
   ====================================== */
.mi-authorSocial {
    margin: 20px 0 0;
    display: flex;
    gap: 20px;
}

.mi-authorSocial-button {
    padding: 7px 18px;
}

.mi-authorSocial-button i {
    font-size: 16px;
}

/* 私信按钮特殊样式 */
.mi-authorSocial-message-btn.el-button--primary,
.mi-authorSocial-message-btn.el-button--primary:focus {
    color: #ffffff;
    background: #67c23a;
}


/* ======================================
   2. 私信对话框整体布局
   ====================================== */
.mi-authorSocial-dialog .el-dialog__headerbtn {
    top: -16px;
    right: -16px;
}

.mi-authorSocial-dialog .el-dialog__headerbtn .el-dialog__close {
    color: #909399;
    padding: 10px;
    background-color: #fff;
    box-shadow: 0px 5px 12px 2px #00000017;
    border-radius: 50%;
    transition: all .3s ease;
}

.mi-authorSocial-dialog .el-dialog__headerbtn .el-dialog__close:hover {
    box-shadow: 0 0 4px 0 rgba(0, 0, 0, .05);
    transform: translate(-6px, 2px);
}

.mi-authorSocial-dialog .el-dialog {
    width: 800px;
}

.mi-authorSocial-dialog .el-dialog__body {
    margin: 0 20px;
    padding: 0;
}

.mi-authorSocial-dialog__content {
    display: flex;
    height: 645px;
    overflow: hidden;
}

/* ======================================
   3. 左侧用户列表区域
   ====================================== */
.mi-authorSocial-userList {
    width: 240px;
    border-right: 1px solid #e5e7eb;
    display: flex;
    flex-direction: column;
}

/* 搜索框（顶部固定） */
.mi-authorSocial-userList__search {
    padding: 12px;
    border-bottom: 1px solid #e5e7eb;
    position: sticky;
    top: 0;
    background-color: #f9fafb;
    z-index: 10;
    margin: 0 10px 0 0;
}

/* 头像列表容器 */
.mi-authorSocial-userList__items {
    flex: 1;
    overflow-y: auto;
    margin: 10px 10px 20px 0;
}

/* 单个用户项（以头像为核心） */
.mi-authorSocial-userItem {
    display: flex;
    align-items: center;
    cursor: pointer;
    padding: 10px;
    transition: all 0.2s;
    position: relative;
    /* 用于未读标记定位 */
}

/* 激活状态（当前选中用户） */
.mi-authorSocial-userItem--active {
    background-color: #dcdfe661;
    border-radius: 5px;
}

/* 用户头像 */
.mi-authorSocial-userItem__avatar {
    width: 45px;
    height: 45px;
    border-radius: 5px;
    object-fit: cover;
    border: 2px solid transparent;
    background-color: #f0f2f5;
    /* 加载失败时灰色背景 */
    margin-right: 12px;
}

/* 激活状态头像样式 */
.mi-authorSocial-userItem--active .mi-authorSocial-userItem__avatar {
    border-color: #ffff;
    box-shadow: 0 6px 8px 0 hsl(0deg 0% 5% / 28%);
}

/* 用户信息（精简展示） */
.mi-authorSocial-userItem__info {
    flex: 1;
    min-width: 0;
    text-align: left;
    overflow: hidden;
    display: flex;
    justify-content: space-between;
    ;
}

/* 隐藏最后一条消息（聚焦头像） */
.mi-authorSocial-userItem__lastMsg {
    display: none;
}

/* 未读消息标记（头像右上角） */
.mi-authorSocial-userItem__unread {
    position: absolute;
    top: 32px;
    right: 13px;
    background-color: #f56c6c;
    color: white;
    font-size: 11px;
    min-width: 18px;
    height: 18px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
    box-shadow: 0 1px 3px rgba(245, 108, 108, 0.3);
    line-height: 1px;
}

/* 搜索过滤：隐藏被过滤用户 */
.mi-authorSocial-userItem.filtered {
    display: none;
}

/* ======================================
   4. 右侧聊天区域
   ====================================== */
.mi-authorSocial-chatArea {
    flex: 1;
    display: flex;
    flex-direction: column;
    background-color: #ffffff;
    margin: 0 10px 20px 10px;
}

/* 聊天头部 */
.mi-authorSocial-chatHeader {
    padding: 0 0 10px;
    border-bottom: 1px solid #e5e7eb;
    display: flex;
    align-items: center;
}

.mi-authorSocial-chatHeader__name {
    font-weight: 600;
    color: #1e293b;
    font-size: 15px;
}

/* 聊天消息容器（带背景纹理） */
.mi-authorSocial-chatMessages {
    flex: 1;
    overflow-y: auto;
    padding: 0 10px;
}

/* 无消息提示 */
.mi-authorSocial-noMessages {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #94a3b8;
    font-size: 14px;
}

/* 消息分组时间（居中显示） */
.mi-authorSocial-messageGroup__time {
    text-align: center;
    margin: 15px 0;
}

.mi-authorSocial-messageGroup__time span {
    font-size: 12px;
    padding: 3px 10px;
}


/* ======================================
   5. 消息样式（通用+左右侧差异化）
   ====================================== */
/* 消息容器（通用） */
.mi-authorSocial-message {
    display: flex;
    align-items: center;
    /* 头像与消息顶部对齐 */
    margin-bottom: 15px;
    max-width: 80%;
}

/* 左侧消息（他人发送） */
.mi-authorSocial-message--left {
    align-self: flex-start;
}

/* 右侧消息（自己发送） */
.mi-authorSocial-message--right {
    margin-left: auto;
    flex-direction: row-reverse;
}

/* 消息头像（通用） */
.mi-authorSocial-message__avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    object-fit: cover;
    margin-right: 6px;
    margin-top: 3px;
    /* 微调对齐 */
    flex-shrink: 0;
    /* 避免被压缩 */
    display: block !important;
    /* 强制显示右侧头像 */
}

/* 右侧头像间距调整 */
.mi-authorSocial-message--right .mi-authorSocial-message__avatar {
    margin-right: 0;
    margin-left: 6px;
}

/* 消息内容容器 */
.mi-authorSocial-message__content {
    max-width: calc(100% - 46px);
}

/* 消息气泡（基础样式） */
.mi-authorSocial-message__text {
    position: relative;
    /* 为箭头伪元素定位 */
    padding: 7px 10px;
    line-height: 1.5;
    word-wrap: break-word;
    border-radius: 14px;
    color: #333;
    background-color: #c0c4cc2e;
}

.mi-authorSocial-message__text img.emoji {
    height: 2em !important;
    width: 2em !important;
}

/* 左侧消息气泡（带箭头） */
.mi-authorSocial-message--left .mi-authorSocial-message__text {
    margin-left: 2px;
    border-radius: 5px;
}

.mi-authorSocial-message--left .mi-authorSocial-message__text::before {
    content: '';
    position: absolute;
    left: -5px;
    top: 50%;
    width: 0;
    height: 0;
    border: 5px solid transparent;
    border-right-color: #c0c4cc2e;
    border-left: 0;
    z-index: 0;
}

/* 右侧消息气泡（带箭头） */
.mi-authorSocial-message--right .mi-authorSocial-message__text {
    margin-right: 2px;
    border-radius: 4px;
    /* 右上角略平，衔接箭头 */
}

.mi-authorSocial-message--right .mi-authorSocial-message__text::before {
    content: '';
    position: absolute;
    right: -4px;
    top: 50%;
    width: 0;
    height: 0;
    border: 5px solid transparent;
    border-left-color: #c0c4cc2e;
    border-right: 0;
    z-index: 1;
}


/* ======================================
   6. 输入区域样式
   ====================================== */
.mi-authorSocial-inputArea {
    background-color: #ffffff;
    margin-top: 10px;
    border-top: 1px solid #eee;
}


/* 输入工具（表情、图片） */
.mi-authorSocial-inputTools {
    display: flex;
    margin-bottom: 10px;
    gap: 15px;
}

.mi-authorSocial-inputAreaBottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 10px;
}

.mi-authorSocial-inputAreaBottom-left {
    display: flex;
    align-items: center;

}

.mi-authorSocial-inputTool {
    color: #64748b;
    font-size: 18px;
    cursor: pointer;
    transition: color 0.2s;
}

.mi-authorSocial-inputTool:hover {
    color: #409eff;
}

/* 表情选择器 */
.mi-authorSocial-emojiPicker {
    margin-bottom: 10px;
    padding: 10px;
    border-radius: 8px;
    background-color: #f8fafc;
    border: 1px solid #e2e8f0;
}

.mi-authorSocial-emojiPicker__items {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.mi-authorSocial-emoji {
    font-size: 18px;
    cursor: pointer;
    padding: 5px;
    border-radius: 4px;
    transition: background-color 0.2s;
}

/* 消息输入框 */
.mi-authorSocial-textarea {
    width: 100%;
    min-height: 80px;
    max-height: 120px;
    padding: 10px 14px;
    border: none;
    border-radius: 8px;
    resize: vertical;
    outline: none;
    font-size: 14px;
    transition: border-color 0.2s;
}

.mi-authorSocial-textarea:focus {
    border-color: #409eff;
}

/* 发送按钮区域 */
.mi-authorSocial-sendArea {
    display: flex;
    justify-content: flex-end;
}

.mi-authorSocial-sendBtn {
    padding: 8px 20px !important;
    border-radius: 5px !important;
}


/* ======================================
   7. 滚动条美化
   ====================================== */
.mi-authorSocial-userList__items::-webkit-scrollbar,
.mi-authorSocial-chatMessages::-webkit-scrollbar {
    width: 6px;
}

.mi-authorSocial-userList__items::-webkit-scrollbar-thumb,
.mi-authorSocial-chatMessages::-webkit-scrollbar-thumb {
    background-color: #cbd5e1;
    border-radius: 3px;
}

.mi-authorSocial-userList__items::-webkit-scrollbar-track,
.mi-authorSocial-chatMessages::-webkit-scrollbar-track {
    background-color: #f1f5f9;
}

/* 显示最后一条消息容器（移除原隐藏样式） */
.mi-authorSocial-userItem__lastMsg {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

/* 最后消息内容样式 */
.mi-authorSocial-userItem__info .last-content {
    font-size: 12px;
    color: #64748b;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-top: 5px;
}

/* 最后消息时间样式 */
.mi-authorSocial-userItem__info .last-time {
    font-size: 11px;
    color: #94a3b8;
    text-align: right;
}

/* 调整用户名区域样式 */
.mi-authorSocial-userItem__name {
    font-weight: 500;
    color: #1e293b;
    font-size: 14px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 4px;
    display: flex;
    flex-direction: column;
}

/* 私信图片放大相关样式 */

.mi-authorSocial-message__text img:hover {
    opacity: 0.9;
    transform: scale(1.02);
    /* 轻微放大效果，增强交互感 */
    border-radius: 5px;
}

/* 私信图片点击样式 */
.mi-authorSocial-message__text img {
    max-width: 200px !important;
    max-height: 200px !important;
    cursor: pointer !important;
    /* 强制显示手型光标 */
    transition: transform 0.2s ease;
    border-radius: 5px;
    display: block;
    /* 避免点击区域重叠 */
}

/* 确保预览组件在最上层 */
.el-image-viewer__wrapper {
    z-index: 9999 !important;
    margin: 0 auto;
}

/* 确保聊天容器滚动样式正确 */
.mi-authorSocial-chatMessages {
    overflow-y: auto !important;
    /* 强制显示垂直滚动条 */
    height: 400px;
    /* 固定高度（根据实际需求调整），确保滚动可用 */
    padding: 10px;
    box-sizing: border-box;
    /* 确保padding不影响高度计算 */
}

/* 避免消息内容被截断或隐藏 */
.mi-authorSocial-messageGroup {
    overflow: visible !important;
}

.mi-authorSocial-message__text {
    overflow: visible !important;
    border-radius: 5px;
}

.mi-authorSocial-message__text:hover img {
    border-radius: 5px;
    overflow: hidden;
}

/* 针对消息中的图片设置基础样式和 hover 效果 */
.mi-authorSocial-message__text .el-image {
    /* 初始状态可以设置默认圆角（可选，根据需求） */
    border-radius: 0;
    /* 添加过渡效果，让圆角变化更平滑 */
    transition: border-radius 0.3s ease;
}

/* hover 时显示圆角（数值可根据需求调整，比如 8px/10px） */
.mi-authorSocial-message__text .el-image:hover {
    border-radius: 5px;
}

/* 若图片本身有边框，可同步设置 img 标签的圆角（避免图片边缘超出容器） */
.mi-authorSocial-message__text .el-image img {
    transition: border-radius 0.3s ease;
}

.mi-authorSocial-message__text .el-image:hover img {
    border-radius: 5px;
}



/* 消息内容容器：根据发送者/接收者预留不同方向的空间 */
.mi-authorSocial-message--right .mi-authorSocial-message__text {
    /* 自己的消息（发送者）：左侧预留标识空间 */
    position: relative;
}

.mi-authorSocial-message--left .mi-authorSocial-message__text {
    /* 对方的消息（接收者）：右侧预留标识空间 */
    position: relative;
}

/* 基础状态样式 */
.mi-message-status {
    position: absolute;
    top: 82%;
    transform: translateY(-50%);
    /* 垂直居中 */
    font-size: 12px;
    padding: 2px 5px;
    border-radius: 3px;
}

/* 发送者（自己）的标识：左侧 */
.mi-authorSocial-message--left .mi-sender-status {
    right: -34px;
    /* 靠左对齐 */
    color: #8c8c8c;
    /* 发送者已读用灰色（更自然） */
}

/* 接收者（对方）的标识：右侧 */
.mi-authorSocial-message--right .mi-receiver-status {
    left: -34px;
    /* 靠右对齐 */
}

.mi-receiver-status.unread {
    color: #ff4d4f;
    /* 未读红色 */

}

.mi-receiver-status.read {
    color: #606266;
}

/* 表情下拉菜单容器 */
.emoji-dropdown-menu {
    width: 300px;
    /* 固定宽度 */
    padding: 10px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
    border-radius: 4px;
}

/* 修复表情按钮与图片按钮的布局 */
.mi-authorSocial-inputAreaBottom-left {
    display: flex;
    align-items: center;
    gap: 8px;
    /* 按钮间距 */
}

.mi-authorSocial-inputTool {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border-radius: 4px;
    transition: background 0.2s;
}

.mi-authorSocial-inputTool:hover {
    background-color: #f0f2f5;
}

/*
 *-------------------------------------------------------------------------------
 *评论模块
 *-------------------------------------------------------------------------------
*/
.mi-comment {
    position: relative;
}

.mi-comment-now {
    padding-top: 0;
}

.mi-comment-title {
    display: flex;
    margin-left: 5px;
    align-items: center;
}

.mi-comment-title h1 {
    margin-left: 5px;
}

.mi-comment-title span {
    margin-left: 5px;
    font-size: 12px;
}

.mi-comments-xz {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 5px 10px;
    font-size: 12px;
}

.mi-comment-dropdown {
    background-color: #f9f9f9;
}

.mi-comment-dropdown:first-child {
    margin-right: 10px;
}

.mi-comment-model {
    display: flex;
}

.mi-plmodel-right {
    flex: 1;
    margin-left: 0;
}

/* .mi-comment-title:before {
    height: 20px;
    position: absolute;
    content: '';
    width: 4px;
    top: 26%;
    left: -5px;
    bottom: 10%;
    border-radius: 5px;
} */

.mi-plmodel-title p {
    margin: 2px;
    text-align: center;
    color: #999;
}

.mi-plmodel-UserImg {
    width: 60px;
    height: 60px;
    border-radius: 50%;
}

.mi-plmodel-UserImg img {
    width: 100%;
    width: 100%;
    border-radius: 50%;
}

.mi-plmodel-right .el-textarea__inner {
    height: 95px;
    background-color: #e1e5e954;
    border: none;
}

.mi-plmodel-right-bottom {
    display: flex;
    justify-content: space-between;
    position: relative;
    margin: 10px 0;
}

.mi-plmodel-plugins span {
    font-size: 12px;
    line-height: 28px;
    cursor: pointer;
    margin-right: 8px;
    background: #e1e5e954;
    font-size: 12px;
    padding: 0px 9px;
    border-radius: 4px;
    transition: all 0.2s;
}

.mi-plmodel-plugins span:hover {
    cursor: pointer;
}

/* 表情面板 - 加大版 */
.mi-emoji-panel {
    position: absolute;
    bottom: 60px;
    left: 0;
    width: 320px;
    max-height: 300px;
    overflow-y: auto;
    background: #fff;
    border: 1px solid #e1e1e1;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    z-index: 1000;
    padding: 12px;
}

/* 表情容器 - 加大间距 */
.mi-emoji-container {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    /* 6列布局 */
    gap: 8px;
    transition: all 0.9s ease;
}

/* 单个表情 - 放大尺寸 */
.mi-emoji-container span {
    font-size: 28px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    transition: all 0.2s ease;
    border-radius: 6px;
}

/* 插入表情按钮样式 */
.mi-plmodel-plugins {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
}

.mi-plmodel-plugins i {
    margin-right: 3px;
}

.mi-plmodel-plugins span::selection,
.mi-plmodel-tj button::selection {
    background-color: transparent;
    /* 完全透明 */
}


/* 滚动条美化 */
.mi-emoji-panel::-webkit-scrollbar {
    width: 6px;
}

.mi-emoji-panel::-webkit-scrollbar-thumb {
    background: #d9d9d9;
    border-radius: 3px;
}

.mi-emoji-panel::-webkit-scrollbar-thumb:hover {
    background: #bfbfbf;
}

/* 表情面板外层 */
.emoji-panel-wrapper {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 999;
}

/* 面板头部和关闭按钮 */
.emoji-panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 10px 10px;
    border-bottom: 1px solid #eee;
    margin-bottom: 10px;
}

.emoji-close-btn {
    border: none;
    background: none;
    font-size: 20px;
    cursor: pointer;
    color: #999;
    padding: 0 10px;
}

.emoji-close-btn:hover {
    color: #333;
}

/* 调整表情面板位置 */
.mi-emoji-panel {
    position: absolute;
    bottom: 80px;
    left: 20px;
    /* 其他原有样式保持不变 */
}

/* 基础样式 */
.mi-comment-model {
    display: flex;
    margin: 10px 0;
    padding: 15px;
    background: #fff;
    border-radius: 4px;
}

.emoji-popover {
    left: -22px;
    position: absolute;
    bottom: 270px;
}

.mi-plmodel-left {
    margin-right: 0;
    text-align: center;
}

.mi-plmodel-UserImg img {
    width: 40px;
    height: 40px;
    border-radius: 5px;
    object-fit: cover;
}

.mi-plmodel-title p {
    margin: 5px 0 0;
    font-size: 12px;
    color: #666;
}

.mi-plmodel-right-top textarea {
    width: 100%;
    min-height: 100px;
    padding: 10px;
    border: 1px solid #dcdfe6;
    border-radius: 4px;
    resize: vertical;
    font-size: 14px;
    line-height: 1.5;
    transition: border-color 0.2s;
}

.mi-plmodel-right-top textarea:focus {
    border-color: #409eff;
    outline: none;
}

.mi-plmodel-plugins {
    display: flex;
    align-items: center;
}

.mi-plmodel-plugins>span {
    display: flex;
    align-items: center;
    margin-right: 15px;
    font-size: 13px;
    color: #606266;
    cursor: pointer;
    transition: color 0.2s;
}

.mi-plmodel-plugins i {
    margin-right: 5px;
    font-size: 16px;
}

.mi-plmodel-tj {
    text-align: right;
}

/* 表情面板样式 */
.mi-emoji-panel {
    position: absolute;
    right: 20px;
    bottom: 60px;
    width: 300px;
    background: #fff;
    border-radius: 4px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    padding: 10px;
    z-index: 2001;
}

.emoji-panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 5px 10px;
    border-bottom: 1px solid #ebeef5;
    margin-bottom: 10px;
}

.emoji-close-btn {
    background: none;
    border: none;
    font-size: 18px;
    cursor: pointer;
    color: #909399;
}

.mi-emoji-container {
    display: flex;
    flex-wrap: wrap;
    max-height: 200px;
    overflow-y: auto;
}

.mi-emoji-container span {
    display: inline-block;
    text-align: center;
    font-size: 20px;
    cursor: pointer;
    margin: 2px;
    border-radius: 4px;
}


/* 对话框样式增强 */
.el-dialog {
    border-radius: 8px;
}

.mi-credit-dialog .el-dialog__headerbtn {
    top: -16px;
    right: -16px;
}

.mi-credit-dialog .el-dialog__headerbtn .el-dialog__close {
    color: #909399;
    padding: 10px;
    background-color: #fff;
    border-radius: 50%;
    transition: all .3s ease;
}
.el-dialog__title {
    font-size: 16px;
    font-weight: 500;
    color: #222;
}

.el-dialog__body {
    padding: 0px;
}

.el-dialog__footer {
    border: none;
    padding: 15px 20px;
}

.mi-PostzS-dialog .el-dialog__body{
    margin: -10px 15px 0;
}
.el-dialog__wrapper .mi-postSc-dialog .el-dialog__body {
    padding: 0px 20px;
}

.mi-postSc-dialog .el-dialog__footer {
    border: none;
    padding: 0px 20px;
}

/* 上传组件样式 */
.upload-demo {
    text-align: center;
}

.el-upload-dragger {
    width: 100%;
    padding: 20px;
}

.el-upload__tip {
    margin-top: 10px;
    color: #909399;
    font-size: 12px;
}

/* 标签页样式 */
.el-tabs__nav-wrap::after {
    height: 1px;
    background-color: #e6e6e6;
}

/* 高级对话框基础样式 */
.premium-dialog {
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
    border: none;
    background: #fff;
    position: relative;
}

.premium-dialog .el-dialog__header {
    padding: 0;
    border: none;
}

.premium-dialog .el-dialog__headerbtn {
    top: 16px;
    right: 16px;
    z-index: 10;
}

.premium-dialog .el-dialog__title {
    display: none;
}

.dialog-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 120px;
    background: linear-gradient(135deg, #6e8efb 0%, #4a6cf7 100%);
    z-index: 1;
}

.dialog-content {
    position: relative;
    z-index: 2;
    padding: 0px 0px 15px;
}

.dialog-content .el-upload-list {
    margin-bottom: 10px;
}

/* 对话框装饰元素 */
.dialog-header-decor {
    display: flex;
    align-items: center;
    justify-content: center;
}

.dialog-header-decor i {
    font-size: 24px;
    color: #4a6cf7;
    margin-top: 20px;
    background: white;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 15px rgba(74, 108, 247, 0.3);
}

.decor-line {
    flex: 1;
    /* height: 1px; */
    /* background: linear-gradient(90deg, rgba(74, 108, 247, 0) 0%, rgba(74, 108, 247, 0.4) 50%, rgba(74, 108, 247, 0) 100%); */
}

/* 高级表单元素 */
.premium-form .el-form-item__label {
    color: #666;
    font-weight: 500;
}

.premium-select .el-input__inner {
    height: 42px;
    border-radius: 6px;
    border: 1px solid #e1e4f0;
    transition: all 0.3s;
}

.premium-textarea .el-textarea__inner {
    border-radius: 6px;
    padding: 12px 15px;
    transition: all 0.3s;
}


.premium-input .el-input__inner {
    height: 42px;
    border-radius: 6px;
    transition: all 0.3s;
    background-color: #f9faff;
}

/* 高级标签页 */
.premium-tabs .el-tabs__nav-wrap::after {
    height: 1px;
    background-color: #e1e4f0;
}

.premium-tabs .el-tabs__item {
    padding: 0 20px;
    height: 42px;
    line-height: 42px;
    /* color: #fffafa; */
    font-weight: 500;
}


/* 高级上传区域 */
.premium-upload .el-upload-dragger {
    width: 100%;
    padding: 30px;
    border-radius: 8px;
    border: 1px dashed #e1e4f0;
    background-color: #f9faff;
    transition: all 0.3s;
    height: auto;
}

.premium-upload .el-upload-dragger:hover {
    background-color: #f2f5ff;
}

.upload-area {
    text-align: center;
}

.premium-upload .el-icon-upload {
    font-size: 40px;
    margin-bottom: 15px;
}

.upload-text {
    font-size: 15px;
    color: #555;
    line-height: 1.5;
    margin-bottom: 8px;
}

.upload-text em {
    font-style: normal;
}

.upload-hint {
    font-size: 12px;
    color: #999;
}

/* 高级按钮 */
.premium-btn {
    padding: 9px 14px;
    border-radius: 6px;
    font-weight: 500;
    transition: all 0.3s;
    border: 1px solid #e1e4f0;
    background: white;
    color: #666;
}

.premium-btn i {
    margin-right: 6px;
}

.premium-btn.primary {
    background: linear-gradient(135deg, #6e8efb 0%, #4a6cf7 100%);
    color: white;
    border: none;
    box-shadow: 0 4px 12px rgba(74, 108, 247, 0.3);
}

.premium-btn.primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(74, 108, 247, 0.4);
}

/* 对话框底部 */
.dialog-footer {
    padding: 15px 6px 25px;
    text-align: right;
}

/* 特定对话框定制 */
.code-dialog .dialog-bg {
    background: linear-gradient(135deg, #6e8efb 0%, #4a6cf7 100%);
}

.image-dialog .dialog-bg {
    background: linear-gradient(135deg, #a18cd1 0%, #fbc2eb 100%);
}

.image-dialog .dialog-header-decor i {
    color: #a18cd1;
    box-shadow: 0 4px 15px rgba(161, 140, 209, 0.3);
}

.reply-dialog .dialog-bg {
    background: linear-gradient(135deg, #48c6ef 0%, #6f86d6 100%);
}

.reply-dialog .dialog-header-decor i {
    color: #48c6ef;
    box-shadow: 0 4px 15px rgba(72, 198, 239, 0.3);
}

/* 评论代码块样式 */
.mi-code-block {
    background: #f5f5f5;
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 15px;
    overflow-x: auto;
    margin: 15px 0;
}

.mi-code-block code {
    font-family: Consolas, Monaco, 'Andale Mono', monospace;
    font-size: 14px;
    line-height: 1.5;
    color: #333;
    display: block;
}

/* 评论图片样式 */
.mi-comment-image {
    max-width: 100%;
    height: auto;
    border-radius: 4px;
    margin: 10px 0;
}

/* 评论区域样式 */
.mi-comment-item {
    margin-bottom: 20px;
    padding: 15px;
    /* background: #fff; */
    border-radius: 8px;
    display: flex;
}

.mi-comment-avatar {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    margin-right: 10px;
}

.mi-comment-avatar img {
    width: 50px;
    height: 50px;
    border-radius: 50%;
}

.mi-comment-now ol {
    padding: 0;
}

.mi-comment-content {
    line-height: 1.6;
    word-wrap: break-word;
}

.mi-comment-content-pl p {
    line-height: 0;
}

.mi-comment-body {
    flex: 1;
    overflow: hidden;
}

span.mi-comment-author,
span.mi-comment-date {
    font-size: 12px;
}

.mi-comment-reply {
    text-align: right;
}

.mi-comment-reply a {
    font-size: 12px;
}

/* 响应式调整 */
@media (max-width: 768px) {
    .premium-dialog {
        width: 90% !important;
        margin-top: 5vh !important;
    }

    .dialog-content {
        padding: 15px;
    }

    .dialog-header-decor i {
        width: 40px;
        height: 40px;
        font-size: 20px;
    }

    .premium-btn {
        height: 36px;
        padding: 0 15px;
    }
}

/* 代码块样式 */
.mi-code-block {
    background: #f5f5f5;
    border-radius: 4px;
    padding: 15px;
    margin: 10px 0;
    overflow-x: auto;
}

.mi-code-block pre {
    margin: 0;
    font-family: 'Courier New', Courier, monospace;
}

/* 图片样式 */
.mi-comment-image {
    margin: 10px 0;
    text-align: center;
    padding: 10px;
    text-align: left;
}

.mi-comment-image img {
    max-width: auto;
    height: 100%;
    border-radius: 4px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* 表情符号样式 */
.mi-emoji {
    font-size: 1.2em;
    vertical-align: middle;
    margin: 0 2px;
}

/* 添加以下CSS样式 */
.mi-comment-item {
    position: relative;
    padding: 15px 0;
}

.mi-comment-item .mi-comment-item {
    padding-left: 0;
}

.mi-reply-box {
    margin-top: 15px;
    padding: 15px;
    background: #f9f9f9;
    border-radius: 4px;
}

.mi-reply-box .mi-plmodel-right {
    margin-left: 0;
}

/* 表情面板定位修正 */
.emoji-panel-wrapper {
    position: relative;
    display: inline-block;
}

.mi-emoji-panel {
    position: absolute;
    bottom: 100%;
    left: 0;
    z-index: 1000;
    margin-bottom: 10px;
}

/* 表情弹窗样式 */
.emoji-popover .mi-emoji-container {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: 5px;
    max-height: 200px;
    overflow-y: auto;
}

.emoji-popover .mi-emoji-container span {
    font-size: 18px;
    cursor: pointer;
    padding: 3px;
    text-align: center;
}

.emoji-popover .mi-emoji-container span:hover {
    background-color: #f0f0f0;
    border-radius: 3px;
}

/* 回复容器样式 */
.mi-reply-container {
    background-color: #f9f9f9;
    border-radius: 4px;
    clear: both;
}

.mi-comment-child {
    margin-left: 30px;
    padding-left: 15px;
    border-left: 2px solid #eee;
}

/* 基础评论项样式 */
.mi-comment-item {
    position: relative;
    padding: 0;
    margin-left: 0;
    transition: margin-left 0.3s ease;
}

.mi-comment-item .comment-reply-link {
    opacity: 0;
}

.mi-comment-item:hover .comment-reply-link {
    opacity: 1;
}

/* 层级缩进 */
.mi-comment-depth-0 {
    border-bottom: 1px solid #f1f1f1;
}

.mi-comment-item.mi-comment-depth-2 {
    margin-left: 0;
    padding: 0;
}

.mi-comment-item.mi-comment-depth-3 {
    margin-left: 80px;
    padding: 0;
}

.mi-comment-item.mi-comment-depth-4 {
    margin-left: 120px;
    padding: 0;
}

.mi-comment-item.mi-comment-depth-5 {
    margin-left: 160px;
    padding: 0;
}

/* 添加一些基础样式 */
.mi-comments-filter {
    margin-bottom: 20px;
    padding: 10px 0;
    border-bottom: 1px solid #eee;
    text-align: right;
    display: flex;
    justify-content: space-between;
}

.mi-comments-filter button {
    padding: 8px 14px;
    border-radius: 3px;
    cursor: pointer;
    color: #6f7479;
    box-shadow: none;
}

.mi-comments-filter button:last-child {
    margin-right: 0;
}

.mi-comments-filter button.active {
    background: #ffff;
    color: #000000;
    border-color: #ffff;
}

.mi-comment-item {
    display: flex;
    margin-bottom: 20px;
    /* background: #fff; */
    border-radius: 4px;
    /* box-shadow: 0 1px 3px rgba(0,0,0,0.1); */
    transition: all 0.3s;
}

.mi-comment-child {
    margin-top: 15px;
    margin-left: 50px;
    background: #f9f9f9;
}

.mi-comment-avatar {
    margin-right: 2px;
}

.mi-comment-avatar img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
}

.mi-comment-meta {
    margin-bottom: 10px;
    font-size: 14px;
}

.mi-comment-author {
    font-weight: 700;
}

.mi-comment-badge {
    display: inline-block;
    padding: 1px 5px;
    background: #0073aa;
    color: white;
    font-size: 12px;
    border-radius: 3px;
    margin-left: 5px;
}

.mi-comment-content {
    line-height: 1.6;
    word-break: break-word;
}

.mi-comment-actions {
    margin-top: 10px;
}

.mi-comment-actions i {
    margin-right: 3px;
}

.mi-comment-reply {
    color: #999;
    text-decoration: none;
    font-size: 12px;
}

.mi-comments-pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 20px 0;
}

.mi-pagination-prev,
.mi-pagination-next {
    padding: 5px 15px;
    margin: 0 10px;
    background: #f5f5f5;
    border: 1px solid #ddd;
    border-radius: 3px;
    cursor: pointer;
}

.mi-pagination-prev:disabled,
.mi-pagination-next:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.mi-pagination-info {
    margin: 0 15px;
    font-size: 14px;
    color: #666;
}

.mi-comments-loading,
.mi-comments-empty {
    text-align: center;
    padding: 20px;
    color: #666;
}

.comment-fade-enter-active,
.comment-fade-leave-active {
    transition: opacity 0.5s;
}

.comment-fade-enter,
.comment-fade-leave-to {
    opacity: 0;
}

/* 确保评论项可见 */
.mi-comment-item {
    margin-bottom: 20px;
    padding: 15px;
    background: #fff;
    border-radius: 4px;
}

.mi-comment-child {
    margin-left: 40px;
    margin-top: 15px;
    border-left: 2px solid #eee;
    padding-left: 15px;
}

.mi-comment-avatar img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
}

.mi-comment-meta {
    margin-bottom: 10px;
    font-size: 14px;
    color: #666;
}

.mi-comment-date {
    color: #999;
}

.mi-comment-badge {
    margin-left: 8px;
    padding: 2px 5px;
    background: #409EFF;
    color: white;
    border-radius: 3px;
    font-size: 12px;
}

.mi-comment-content {
    line-height: 1.6;
    margin-bottom: 10px;
}

.mi-comment-actions {
    font-size: 12px;
    text-align: right;
    justify-content: space-between;
    display: flex;
}

/* 评论层级样式 */
.mi-comment-item {
    margin-bottom: 15px;
    transition: all 0.3s ease;
}


/* 确保分页组件始终可见 */
.mi-comments-pagination {
    margin-top: 20px;
    padding: 15px 0;
    text-align: center;
    background: #f9f9f9;
    border-radius: 4px;
}

.mi-comment-item {
    margin-bottom: 15px;
    transition: all 0.3s ease;
}

/* 继续添加更多层级样式，最多到 mi-comment-depth-5 */

.mi-comment-badge {
    background: #409EFF;
    color: white;
    font-size: 12px;
    padding: 2px 5px;
    border-radius: 3px;
    margin-left: 5px;
}

.mi-author-comment {
    /* background-color: #f8f8f8; */
    border-radius: 4px;
    padding: 15px;
    overflow: auto;
}

.mi-reply-container {
    margin-top: 15px;
    animation: fadeIn 0.3s;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* 回复弹窗样式 */
.mi-reply-dialog .el-dialog__body {
    padding: 20px;
}

.mi-reply-dialog-content {
    position: relative;
}

.mi-reply-info {
    margin-bottom: 15px;
    font-size: 14px;
    color: #666;
}

.mi-reply-username {
    color: #409EFF;
    font-weight: bold;
}

.mi-reply-textarea {
    margin-bottom: 15px;
}

.mi-reply-toolbar {
    display: flex;
    gap: 15px;
    color: #606266;
}

.mi-reply-toolbar span {
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    font-size: 14px;
}

.mi-reply-toolbar span:hover {
    color: #409EFF;
}

.mi-reply-toolbar i {
    margin-right: 5px;
}

.mi-reply-to {
    font-weight: 700;
    font-size: 12px;
    margin-left: 5px;
}

/* 添加/修改以下样式 */

.mi-reply-toolbar {
    display: flex;
    gap: 15px;
    margin-top: 10px;
    flex-wrap: wrap;
}

.mi-reply-toolbar span {
    display: flex;
    align-items: center;
    font-size: 13px;
    color: #7f8c8d;
    cursor: pointer;
    transition: color 0.2s;
    padding: 5px 10px;
    border-radius: 4px;
    background: #f5f5f5;
}

.mi-reply-toolbar i {
    margin-right: 5px;
    font-size: 16px;
}

.mi-reply-textarea .el-textarea__inner {
    min-height: 150px !important;
    border-radius: 6px;
    transition: border-color 0.3s;
}

.mi-reply-dialog .el-dialog__body {
    padding: 20px;
}

.mi-reply-dialog .el-dialog__footer {
    padding: 10px 20px 20px;
    text-align: right;
}

/* 登录提示样式 */
.mi-comment-login-required {
    background-color: #ffffffde;
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 20px;
    text-align: center;
    position: absolute;
    width: 100%;
    overflow: hidden;
    height: 189px;
    z-index: 6;
}

.mi-comment-login-message {
    font-size: 14px;
    color: #6c757d;
    margin-bottom: 15px;
}

.mi-comment-login-btn {
    background-color: #4a6cf7;
    color: white;
    border: none;
    border-radius: 6px;
    padding: 10px 20px;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.mi-comment-login-btn i {
    margin-right: 8px;
    font-size: 16px;
}

.mi-comment-login-btn:hover {
    /* background-color: #3a5ce4; */
    /* transform: translateY(-2px); */
    /* box-shadow: 0 4px 12px rgba(74, 108, 247, 0.3); */
}

.mi-comment-login-btn:active {
    transform: translateY(0);
}

.mi-comments-No {
    background-color: #ffff;
    border-radius: 5px;
}

/* 评论字数计数器 */
.mi-comment-counter {
    position: absolute;
    right: 10px;
    bottom: 10px;
    display: flex;
    align-items: center;
    font-size: 12px;
    color: #909399;
}

.mi-reply-counter {
    position: absolute;
    right: 10px;
    bottom: 60px;
    display: flex;
    align-items: center;
    font-size: 12px;
    color: #909399;
}

.mi-comment-counter span,
.mi-reply-counter span {
    margin-left: 5px;
}

.mi-comment-warning,
.mi-reply-warning {
    color: #f56c6c;
}

.mi-plmodel-right-top .el-form {
    position: relative;
}

.mi-reply-dialog-content {
    position: relative;
}

.mi-reply-textarea {
    margin-bottom: 20px;
}

/* 表情下拉菜单基础样式 */
.emoji-dropdown {
    margin-right: 10px;
}

.emoji-dropdown .el-dropdown-link {
    cursor: pointer;
    color: #606266;
    display: inline-flex;
    align-items: center;
    padding: 5px 10px;
    border-radius: 4px;
    transition: background-color 0.2s;
}

.emoji-dropdown .el-dropdown-link:hover {
    background-color: #f5f7fa;
}

/* 下拉菜单容器样式 */
.emoji-dropdown-menu {
    width: 320px !important;
    /* 固定宽度 */
    padding: 10px;
    overflow: hidden;
}

/* 表情容器优化 */
.mi-emoji-container {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    max-height: 220px;
    overflow-y: auto;
    padding-right: 5px;
}


/* 滚动条美化 */
.mi-emoji-container::-webkit-scrollbar {
    width: 6px;
}

.mi-emoji-container::-webkit-scrollbar-thumb {
    background-color: #ddd;
    border-radius: 3px;
}

.mi-emoji-container::-webkit-scrollbar-track {
    background-color: #f5f5f5;
}

/*
 *-------------------------------------------------------------------------------
 *文章核心功能 == 点赞  收藏 分享 评论
 *-------------------------------------------------------------------------------
*/

.interaction-buttons {
    display: flex;
    justify-content: center;
    gap: 30px;
}

.interaction-button {
    display: flex;
    /* flex-direction: column; */
    justify-content: center;
    align-items: center;
    cursor: pointer;
    transition: all 0.3s;
    width: 25%;
}

.interaction-button:hover {
    /* color: #409EFF;
    transform: translateY(-3px); */
}

.interaction-button i {
    font-size: 24px;
    margin-bottom: 5px;
}

.interaction-button .count {
    font-size: 14px;
    color: #666;
}
.wp-theme-MiYuPro .dialog-content {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 20px;
}

.action-section {
    display: flex;
    justify-content: center;
    padding: 10px 0;
}

.users-section h4 {
    margin-bottom: 15px;
    color: #666;
    font-weight: normal;
    text-align: center;
}

.user-list {
    max-height: 300px;
    overflow-y: auto;
    display: flex;
    flex-wrap: wrap;
    gap: 0px;
    justify-content: center;
}

.user-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 80px;
}

.user-item a {
    text-align: center;
}

.user-item .username {
    margin-top: 5px;
    font-size: 12px;
    text-align: center;
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.empty {
    text-align: center;
    color: #999;
    padding: 20px 0;
}

.platform i {
    font-size: 30px;
    margin-bottom: 5px;
}

.platform span {
    font-size: 12px;
}

.wechat-share-dialog {
    text-align: center;
}

.wechat-share-dialog .el-message-box__content {
    padding: 20px;
}

.wechat-share-dialog {
    text-align: center;
}

.wechat-share-dialog .el-dialog__body {
    padding: 20px;
}

.wechat-share-content {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.wechat-share-content h3 {
    margin-bottom: 15px;
    color: #333;
    font-size: 18px;
}

.qrcode-loading {
    color: #999;
}

.steps {
    text-align: left;
    margin: 15px 0;
    color: #666;
    font-size: 14px;
}

.steps p {
    margin: 5px 0;
}

.copy-link {
    width: 100%;
    margin-top: 15px;
}

.copy-link .el-input__inner {
    font-size: 12px;
}

/* 文章互动按钮美化 */
.post-interactions {
    padding: 15px 0;
    /* border-top: 1px solid rgba(0, 0, 0, 0.05); */
    /* border-bottom: 1px solid rgba(0, 0, 0, 0.05); */
    /* background: linear-gradient(135deg, #f0f0f0 0%, #f0f0f0 100%); */
    box-shadow: 0 4px 12px #00000014;
    background-color: #ffff;
    margin-top: 10px;
}

#post-interactions {
    position: absolute;
    top: 130px;
    left: -90px;
    text-align: center;
    z-index: 1;
}

.mi-interaction-buttons {
    position: fixed !important;
}

.interaction-buttons {
    display: flex;
    justify-content: space-evenly;
    gap: 15px;
    padding: 0 20px;
}

.interaction-button {
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    padding: 12px 15px;
    border-radius: 10px;
    min-width: 80px;
    /* background: #ffff; */
    /* box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05); */
    position: relative;
    overflow: hidden;
}

.mi-interaction-buttons .el-button {
    background: none;
    box-shadow: none;
    padding: 0;
}

.interaction-button i {
    font-size: 24px;
    margin-bottom: 8px;
    color: #555;
    transition: all 0.3s;
    width: 44px;
    height: 44px;
    background-color: #ffff;
    text-align: center;
    align-items: center;
    display: flex;
    justify-content: center;
    border-radius: 100%;
    /* box-shadow: 4px 4px 12px 2px #00000017; */
    border: 1px solid #edf1fd;
}

.interaction-button i svg {
    width: 1em;
    height: 1em;
    font-size: 30px;
}

.interaction-button span {
    font-size: 12px;
    font-weight: 500;
    color: #444;
}

.interaction-button .count {
    position: absolute;
    top: 8px;
    right: 8px;
    font-size: 11px;
    background: #4361ee;
    color: white;
    border-radius: 10px;
    padding: 2px 6px;
    min-width: 18px;
    text-align: center;
    line-height: 1;
}

.el-popover.mi-post-qrcode-popover{
    min-width: 105px;
}
/* 二维码Popover容器样式 */
.mi-qrcode-popover {
    padding: 10px;
    border: 1px solid #ebeef5;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    text-align: center;
}

/* 二维码图片（固定宽高100px） */
.mi-qrcode-img {
    width: 80px;
    height: 80px;
    object-fit: contain;
    display: block;
    margin: 0 auto;
}

/* 二维码下方提示文字 */
.mi-qrcode-tip {
    font-size: 10px;
    color: #606266;
    margin: 8px 0 0 0;
    line-height: 1.4;
    text-align: center;
}

/* 原有分享Popover样式优化（可选，保持兼容性） */
.mi-share-popover {
    padding: 15px;
}

/* 分享平台样式保持不变，仅确保Popover不挤压 */
.share-platforms .platform {
    display: inline-block;
    margin: 0 10px;
    cursor: pointer;
}
























/* 对话框美化 */
.interaction-dialog .el-dialog__header {
    /* background: linear-gradient(135deg, #4361ee 0%, #3a0ca3 100%); */
    padding: 15px 20px;
}

.interaction-dialog .el-dialog__title {
    /* color: white !important; */
    /* font-weight: 600; */
}
.action-section .el-button {
    padding: 10px 25px;
    border-radius: 8px;
    font-weight: 500;
    transition: all 0.3s;
}

.action-section .el-button--primary {
    /* background: linear-gradient(135deg, #4361ee 0%, #3a0ca3 100%); */
    border: none;
}

.action-section .el-button--primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(67, 97, 238, 0.3);
}

.users-section h4 {
    margin: 20px 0 15px;
    color: #555;
    font-weight: 500;
    text-align: center;
    font-size: 15px;
    position: relative;
}

.user-list {
    max-height: 300px;
    overflow-y: auto;
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    justify-content: center;
    padding: 5px;
}

.user-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: auto;
    transition: all 0.3s;
}

.user-item a {
    text-align: center;
    text-decoration: none;
}

.user-item .el-avatar {
    border: 2px solid #e9ecef;
    transition: all 0.3s;
}

.user-item .username {
    margin-top: 8px;
    font-size: 12px;
    color: #555;
    font-weight: 500;
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.empty {
    text-align: center;
    color: #999;
    padding: 25px 0;
    font-size: 14px;
}

/* 分享平台美化 */
.platform span {
    font-size: 13px;
    color: #555;
    font-weight: 500;
}

/* 微信分享对话框美化 */
.wechat-share-dialog {
    border-radius: 12px !important;
}

.wechat-share-dialog .el-dialog__header {
    background: linear-gradient(135deg, #4cc9f0 0%, #4361ee 100%);
    padding: 15px 20px;
}

.wechat-share-dialog .el-dialog__title {
    color: white !important;
    font-weight: 600;
}

.wechat-share-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 15px;
}

.wechat-share-content h3 {
    margin-bottom: 15px;
    color: #333;
    font-size: 18px;
    font-weight: 600;
}

.qrcode-loading {
    color: #999;
    font-size: 14px;
}

.steps {
    text-align: left;
    margin: 15px 0;
    color: #555;
    font-size: 14px;
    width: 100%;
    padding: 0 10px;
}

.steps p {
    margin: 8px 0;
    position: relative;
    padding-left: 20px;
}

.steps p:before {
    content: "•";
    position: absolute;
    left: 0;
    color: #4361ee;
    font-weight: bold;
}

.copy-link {
    width: 100%;
    margin-top: 20px;
}

.copy-link .el-input__inner {
    font-size: 13px;
    border-radius: 6px 0 0 6px;
    border-left: 1px solid #DCDFE6;
    border-top: 1px solid #DCDFE6;
    border-bottom: 1px solid #DCDFE6;
}

.copy-link .el-button {
    /* background: linear-gradient(135deg, #4361ee 0%, #3a0ca3 100%); */
    color: white;
    border: none;
    border-radius: 0 6px 6px 0;
}

.share-popover {
    padding: 10px;
}

.share-platforms {
    display: flex;
    flex-direction: column;
}

.share-platforms .platform {
    margin: 5px;
    cursor: pointer;
    padding: 5px;
    border-radius: 4px;
    transition: background-color 0.3s;
    text-align: left;
    justify-content: left;
    display: flex;
    align-items: center;
}

.MiYuPro .el-popover {
    min-width: 100px;
}

.share-platforms .icon {
    width: 20px;
    height: 20px;
    margin-bottom: 0px;
    margin-right: 5px;
}

/* 标签容器基础样式 */
.mi-post-tag {
    margin: 10px 0;
    border-radius: 12px;
}

/* 标签标题区域 */
.mi-postTag-header {
    display: flex;
    align-items: center;
    margin-bottom: 15px;
    padding-bottom: 10px;
    border-bottom: 1px dashed #dee2e6;
    position: relative;
}

.mi-postTag-icon {
    font-size: 24px;
    margin-right: 10px;
}

.mi-postTag-title:before {
    background: #fb7ea1;
    box-shadow: 1px 2px 3px 0px #fb7ea1;
    height: 20px;
    position: absolute;
    content: '';
    width: 4px;
    top: 9%;
    left: -1px;
    bottom: 10%;
    border-radius: 5px;
}

/* 标签云区域 */
.mi-postTag-cloud {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: right;
}

.mi-postTag-cloud a i {
    padding-right: 5px;
}

.mi-postTag-item:hover {
    background-color: #fff;
}

/* 标签基础样式 */
.mi-postTag-item {
    display: inline-block;
    padding: 8px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 500;
    text-decoration: none;
    transition: all 0.3s ease;
    line-height: 10px;
}

.mi-post-PrevNext {
    display: flex;
    gap: 10px;
    width: 100%;
}

.miPost-PrevNext-item {
    flex: 1;
    position: relative;
    padding: 15px 20px;
    color: #fff;
    text-decoration: none;
    overflow: hidden;
    background-color: #fff;
}

.miPost-PrevNext-item:hover {
    background-color: #fff;
}

.miPost-PrevNext-label {
    font-size: 14px;
    text-transform: uppercase;
    margin-bottom: 10px;
    position: relative;
    z-index: 1;
    color: #898b8f;
}

.miPost-Next {
    text-align: right;
}

.miPost-PrevNext-title {
    font-size: 14px;
    margin: 0;
    position: relative;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    overflow: hidden;
    color: #2c3e50;
    font-weight: 400;
}

.miPost-PrevNext-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    z-index: 1;
    transition: transform 0.3s ease;
}

/* 添加半透明覆盖层增强文字可读性 */
/* .miPost-PrevNext-item::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, rgba(0,0,0,0.2) 0%, rgba(0,0,0,0.7) 100%);
    z-index: 1;
} */
/* 举报弹窗整体样式 */
.mi-report-dialog .el-dialog__body {
    padding: 15px 20px;
    padding-bottom: 10px;
}
.mi-report-dialog .el-dialog__footer{
    padding: 0 15px 20px;
}
.mi-report-dialog .el-dialog__header {
    padding: 15px 20px;
    border-bottom: 1px solid #f0f0f0;
}

.mi-report-dialog .el-dialog__title {
    font-size: 16px;
    font-weight: 600;
}

/* 表单区域样式 */
.mi-report-section {
    margin-bottom: 12px;
    /* 减少间距，更紧凑 */
}

.mi-report-label {
    display: block;
    margin-bottom: 5px;
    font-size: 14px;
    color: #333;
}

.mi-report-required {
    color: #ff4d4f;
}

.mi-report-select {
    width: 100%;
}

.mi-report-select .el-input__inner {
    background-color: #e1e5e954;
}

.mi-report-textarea {
    width: 100%;
    font-size: 13px;
}

/* 上传区域样式 */
.upload-hint {
    font-size: 12px;
    color: #666;
    margin-bottom: 6px;
    line-height: 1;
}

.upload-wrapper {
    text-align: center;
}

.mi-report-upload {
    width: 100%;
}

.mi-report-upload .el-upload--picture-card {
    width: 100%;
    height: 80px;
    line-height: 48px;
    padding: 20px;
    margin-top: 10px;
}

.mi-report-upload .el-upload-list__item {
    width: 80px;
    height: 80px;
    margin-right: 8px;
    margin-bottom: 8px;
    margin-top: 15px;
}

/* 提示文字样式 */
.mi-report-tips {
    margin-top: 8px;
    padding: 8px 10px;
    background-color: #f5eada;
    border-radius: 4px;
    font-size: 12px;
    display: flex;
    align-items: center;
}

.mi-report-tips i {
    margin-right: 5px;
    color: #409eff;
}

/* 底部按钮样式 */
.mi-report-footer {
    text-align: right;
}

.mi-report-footer .el-button {
    padding: 9px 15px;
    font-size: 14px;
    margin-top: 15px;
}

.mi-report-footer .el-button--primary {
    margin-left: 8px;
}

/*
 *-------------------------------------------------------------------------------
 * 打赏
 *-------------------------------------------------------------------------------
*/
/* 打赏按钮样式 */
.mi-PostzS {
    background-color: #fff;
    margin: 0 auto;
    text-align: center;
    padding-bottom: 30px;
}

.mi-PostzS-button {
    color: #ffffff !important;
    background-color: #f56c6c;
    border-color: #f56c6c;
    border: none;
    padding: 12px 20px;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 14px;
    box-shadow: none;
}

.mi-PostzS-likeTitle p {
    font-size: 12px;
    text-align: center;
    margin: 10px 0 0 0;
}

/* 弹窗样式 */
.mi-PostzS-dialog .el-dialog__footer {
    padding: 10px 20px 20px;
    border-top: 1px solid #f5f5f5;
    text-align: center;
}

/* 弹窗内容样式 */
.mi-PostzS-content {
    text-align: center;
}

.mi-PostzS-dialog {
    width: 350px;
    margin: 0 auto;
}

/* 头像样式 */
.mi-PostzS-avatar {
    margin-bottom: 10px;
    display: flex;
    align-items: center;
}

.mi-PostzS-avatar span {
    margin: 0 5px;
}

.mi-PostzS-User {
    text-align: left;
}

.mi-PostzS-User p {
    line-height: 14px;
    font-size: 14px;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    overflow: hidden;
    margin: 5px 0;
}

.mi-PostzS-avatar-img {
    width: 50px;
    height: 50px;
    object-fit: cover;
    border: 3px solid #f5f5f5;
    margin-right: 10px;
}

/* 提示文字样式 */
.mi-PostzS-desc {
    font-size: 12px;
    margin-bottom: 15px;
    line-height: 1.5;
    padding: 10px;
    color: #8a734c;
    background: #f5e8c7;
    font-weight: 400;
}

/* 金额选择样式 */
.mi-PostzS-amounts {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin-bottom: 10px;
}

.mi-PostzS-amount-item {
    width: 100px;
    height: 40px;
    line-height: 40px;
    border: 1px solid #e4e7ed;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 14px;
    color: #606266;
    margin-right: 10px;
    margin-bottom: 10px;
}

.mi-PostzS-amount-item:nth-child(3n) {
    margin-right: 0
}

.mi-PostzS-amount-item-active {
    font-weight: 500;
}

.mi-PostzS-amount-custom {
    height: 40px;
    line-height: 40px;
    border: 1px dashed #e4e7ed;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 14px;
    color: #606266;
}

.mi-PostzS-custom-input .el-input__inner,
.mi-PostzS-custom-input .el-input__inner:focus {
    width: 96px;
    text-align: center;
    border: 1px solid #e4e7ed;
}

.mi-PostzS-Yuer {
    margin-bottom: 10px;
    font-size: 12px;
    margin-top: 15px;
}

.mi-PostzS-Yuer span {
    margin-right: 5px;
}

/* 支付方式样式 */
.mi-PostzS-payment {
    margin-bottom: 15px;
}

.mi-PostzS-payment-title {
    text-align: left;
    font-size: 14px;
    margin-bottom: 10px;
}

.mi-PostzS-payment-methods {
    display: flex;
    justify-content: space-between;
    gap: 5px;
}

.mi-PostzS-payment-method {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 8px 25px;
    border: 1px solid #e4e7ed;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 12px;
}
.mi-PostzS-payment-icon {
    font-size: 20px;
    color: #409EFF;
}

.mi-PostDs-payment-methods .mi-PostzS-payment-icon {
    padding-right: 10px;
}

.mi-PostzS-payment-icon.mi-weixindenglu1 {
    color: #41ba75;
}

.mi-PostzS-payment-icon.mi-Pagex {
    color: #409EFF;
}

.mi-PostzS-payment-icon.mi-qiandai {
    color: #e6a23c;
}

/* 确认按钮样式 */
.mi-PostzS-footer {
    display: flex;
    justify-content: center;
}

.mi-PostzS-confirm-btn {
    width: 100%;
    padding: 10px 0;
    font-size: 16px;
    background-color: #409EFF;
    border-color: #409EFF;
    transition: all 0.3s ease;
}


.mi-PostzS-confirm-btn:disabled {
    background-color: #a0cfff;
    border-color: #a0cfff;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

.mi-payment-dialog {
    width: 350px !important;
}



/* 支付二维码弹窗整体样式 */
.mi-ds-payment-dialog .el-dialog__body {
    padding: 0;
    text-align: center;
}

/* 二维码容器 */
.el-dialog.mi-ds-payment-dialog {
    width: 300px;
}

.mi-ds-qrcode-container {
    width: 150px;
    height: 150px;
    margin: 0 auto 0px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* 二维码图片 */
.mi-ds-qrcode-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border: 2px solid #67c23a;
}

/* 加载状态 */
.mi-ds-loading {
    color: #666;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.mi-ds-loading .el-loading-spinner {
    font-size: 24px;
    color: #409eff;
}

/* 扫码提示文字 */
.mi-ds-scan-tip {
    font-size: 12px;
    color: #333;
    margin: 10px 0 0 0;
    line-height: 1.5;
}

/* 倒计时样式 */
.mi-ds-countdown {
    font-size: 14px;
    color: #666;
    margin-bottom: 10px;
}
.mi-ds-countdown span{
    font-size: 12px;
}
.mi-ds-countdown-num {
    color: #f56c6c;
    font-weight: 600;
    font-size: 16px;
    margin: 0 5px;
}

/* 弹窗底部按钮区 */
.mi-ds-dialog-footer {
    text-align: center;
    padding: 0;
}

.mi-ds-dialog-footer .el-button {
    margin: 0 5px;
}






























/* 底部按钮样式 */
.mi-PostDs-footer {
    padding: 15px 24px;
    background-color: #f7f8fa;
    border-top: 1px solid #eee;
    text-align: right;
}

.mi-PostDs-close-btn {
    padding: 7px 20px;
    border-radius: 6px;
    font-size: 14px;
    transition: all 0.2s ease;
}

/* 动画效果 */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(8px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.mi-PostDs-left-panel,
.mi-PostDs-right-panel,
.mi-PostDs-error {
    animation: fadeIn 0.3s ease forwards;
}

.mi-PostzS-forbidden-message {
    color: #F56C6C;
    font-size: 12px;
    margin-top: 5px;
    padding-left: 5px;
    display: flex;
    align-items: center;
}

.mi-PostzS-forbidden-message i {
    margin-right: 4px;
    font-size: 14px;
}

/* 打赏用户列表样式 */
.mi-PostDsUserList {
    margin: 5px 0;
    padding: 10px;
    border-radius: 4px;
    background-color: #f9f9f9;
}


.mi-PostDsUserList-container {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: center;
}

.mi-PostDsUserList-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    overflow: hidden;
    border: 2px solid #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    transition: transform 0.2s ease;
}

.mi-PostDsUserList-avatar:hover {
    transform: scale(1.05);
    cursor: pointer;
}

.mi-PostDsUserList-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* 优化弹窗样式 */
.mi-PostDsUserList-popover {
    padding: 2px 5px !important;
    border-radius: 6px !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
    border: none !important;
    min-width: auto !important;
}

.mi-PostDsUserList-popover-content {
    padding: 10px 12px;
    color: #333;
    font-size: 14px;
}

.mi-PostDsUserList-name {
    font-weight: 600;
    margin-bottom: 4px;
    color: #222;
}

.mi-PostDsUserList-amount {
    margin-bottom: 4px;
    color: #e63946;
}

.mi-PostDsUserList-time {
    font-size: 12px;
    color: #666;
}

/* 解决弹窗箭头样式 */
.mi-PostDsUserList-popover .popper__arrow {
    width: 0;
    height: 0;
}

.mi-PostDsUserList-popover .popper__arrow::after {
    border-width: 6px !important;
}
.el-image-viewer__wrapper img {
    width: auto;
    max-height: 90%!important;
    cursor: pointer;
  }


/*
 *-------------------------------------------------------------------------------
 * 下载-图文-视频 支付弹窗
 *-------------------------------------------------------------------------------
*/
.mi-newpaybody {
    font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", Arial, sans-serif;
    background-color: #f5f7fa;
    padding: 40px;
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

.mi-newpaydemo-container {
    max-width: 800px;
    width: 100%;
    text-align: center;
}

.mi-newpaydemo-title {
    color: #5a5e66;
    margin-bottom: 30px;
    font-size: 24px;
    font-weight: 400;
}

.mi-newpayopen-btn {
    padding: 12px 30px;
    font-size: 16px;
    border-radius: 4px;
    background-color: #409eff;
    border: none;
    color: white;
    cursor: pointer;
    transition: all 0.3s;
}

.mi-newpayopen-btn:hover {
    background-color: #66b1ff;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(64, 158, 255, 0.3);
}

/* 自定义弹窗样式 */
.mi-newpaypayment-dialog .el-dialog {
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.1);
    width: 340px !important; /* 弹窗宽度调整为340px */
}

.mi-newpaypayment-dialog .el-dialog__header {
    padding: 20px 20px 10px;
    border-bottom: 1px solid #f0f0f0;
}

.mi-newpaypayment-dialog .el-dialog__title {
    font-size: 18px;
    color: #303133;
    font-weight: 500;
}

.mi-newpaypayment-dialog .el-dialog__body {
    padding: 15px 10px 20px; /* 调整内边距 */
}

/* 资源信息卡片样式 - 重新设计，增强视觉吸引力 */
.mi-newpayresource-card {
    display: flex;
    padding: 6px 9px;
    background: linear-gradient(135deg, #2ecc71 0%, #1abc9c 100%);
    border-radius: 12px;
    margin-bottom: 15px;
    border: none;
    align-items: center;
    position: relative;
    overflow: hidden;
    box-shadow: 0 8px 20px rgba(46, 204, 113, 0.3);
}

.mi-newpayresource-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0) 100%);
    pointer-events: none;
}

.mi-newpayresource-image {
    width: 60px;
    height: 60px;
    border-radius: 10px;
    overflow: hidden;
    margin-right: 18px;
    flex-shrink: 0;
    border: 3px solid rgba(255, 255, 255, 0.9);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    transform: rotate(5deg);
    transition: all 0.4s ease;
}

.mi-newpayresource-card:hover .mi-newpayresource-image {
    transform: rotate(0deg) scale(1.05);
    border-color: white;
}

.mi-newpayresource-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.mi-newpayresource-info {
    flex: 1;
    text-align: left;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0; /* 用于确保文本截断生效 */
}

.mi-newpayresource-title {
    font-size: 16px;
    color: white;
    font-weight: 600;
    line-height: 1.4;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 8px;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.mi-newpayresource-details {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.mi-newpayresource-left-section {
    display: flex;
    align-items: center;
    gap: 10px;
}

.mi-newpayresource-attribute {
    display: inline-block;
    padding: 4px 10px;
    background-color: rgba(255, 255, 255, 0.9);
    color: #2ecc71;
    font-size: 12px;
    font-weight: 600;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.mi-newpayresource-price {
    font-size: 24px;
    color: #ffeb3b;
    font-weight: 700;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    position: relative;
}

.mi-newpayresource-price::after {
    content: '限时特价';
    position: absolute;
    bottom: 0px;
    right: -52px;
    font-size: 10px;
    color: #ffeb3b;
    background-color: rgba(25, 25, 25, 0.8);
    padding: 2px 6px;
    font-weight: 500;
}

/* 奖励信息样式 */
.mi-newpayreward-info {
    background: linear-gradient(135deg, #fdfcfb 0%, #f5e6d3 100%);
    border-radius: 10px;
    padding: 8px 5px;
    margin-bottom: 10px;
    text-align: center;
    border: 2px solid #ffc107;
    position: relative;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(255, 193, 7, 0.2);
}

.mi-newpayreward-info::before {
    content: '✨';
    position: absolute;
    top: 5px;
    left: 10px;
    font-size: 16px;
    animation: mi-newpaysparkle 2s infinite;
}

.mi-newpayreward-info::after {
    content: '✨';
    position: absolute;
    bottom: 5px;
    right: 10px;
    font-size: 16px;
    animation: mi-newpaysparkle 2s infinite 0.5s;
}

@keyframes mi-newpaysparkle {
    0%, 100% { opacity: 0.5; transform: scale(1); }
    50% { opacity: 1; transform: scale(1.2); }
}

.mi-newpayreward-text {
    font-size: 13px;
    color: #d84315;
    font-weight: 600;
}

.mi-newpayreward-emoji {
    font-size: 16px;
    animation: mi-newpaybounce 1.5s infinite;
}

@keyframes mi-newpaybounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-3px); }
}

/* 支付方式TAB样式 - 间距调整 */
.mi-newpaypayment-tabs {
    background-color: #f1f3f5;
    border-radius: 8px;
    padding: 6px;
    margin-bottom: 15px;
    display: flex;
    justify-content: center;
}

.mi-newpaypayment-tab {
    padding: 8px 12px;
    cursor: pointer;
    border-radius: 6px;
    font-size: 13px;
    color: #495057;
    transition: all 0.3s;
    margin: 0 2px;
    flex: 1;
    max-width: 100px;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
}

.mi-newpaypayment-tab:hover {
    background-color: rgba(255, 255, 255, 0.7);
}

.mi-newpaypayment-tab.active {
    background-color: white;
    color: #409eff;
    font-weight: 500;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}

/* 支付图标样式 */
.mi-newpaypayment-icon {
    font-size: 14px;
}

.mi-newpaywechat-icon {
    color: #09bb07;
}

.mi-newpayalipay-icon {
    color: #1296db;
}

.mi-newpaybalance-icon {
    color: #faad14;
}

/* 二维码区域样式 - 已优化 */
.mi-newpayqrcode-area {
    padding: 15px 0 0;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.mi-newpayqrcode-container {
    width: 150px;
    height: 150px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 10px;
    position: relative;
    padding: 5px;
}
.mi-newpayqrcode-img-wrap{
    width: 130px;
    height: 130px;
}
/* 二维码四角边框标记 */
.mi-newpayqrcode-corner {
    position: absolute;
    width: 10px;
    height: 10px;
    border: 3px solid #409eff;
}

.mi-newpayqrcode-corner-tl {
    top: -2px;
    left: -2px;
    border-right: none;
    border-bottom: none;
    border-top-left-radius: 6px;
}

.mi-newpayqrcode-corner-tr {
    top: -3px;
    right: -3px;
    border-left: none;
    border-bottom: none;
    border-top-right-radius: 6px;
}

.mi-newpayqrcode-corner-bl {
    bottom: 0px;
    left: -3px;
    border-right: none;
    border-top: none;
    border-bottom-left-radius: 6px;
}

.mi-newpayqrcode-corner-br {
    bottom: 0px;
    right: -3px;
    border-left: none;
    border-top: none;
    border-bottom-right-radius: 6px;
}

.mi-newpayqrcode-placeholder {
    color: #adb5bd;
    font-size: 13px;
}

/* 二维码刷新区域 - 修改为直接显示 */
.mi-newpayqrcode-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.3);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 1; /* 直接显示，不再是0 */
}
.mi-newpayqrcode-loading p{
    font-size: 12px;
}
.mi-newpayrefresh-icon {
    width: 40px;
    height: 40px;
    background-color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: transform 0.3s;
    font-size: 20px;
    color: #409eff;
}

.mi-newpayrefresh-icon:hover {
    transform: rotate(90deg);
}

.mi-newpayrefresh-icon:active {
    transform: rotate(180deg);
}

.mi-newpayqrcode-instruction {
    color: #6c757d;
    font-size: 12px;
    margin-top: 5px;
}

.mi-newpaytime-countdown {
    color: #ff4d4f;
    font-weight: 600;
}

/* 余额支付区域样式 */
.mi-newpaybalance-payment-area {
    width: 100%;
    padding: 10px 0;
    text-align: center;
}

.mi-newpaybalance-info {
    margin-bottom: 10px;
}

.mi-newpaybalance-text {
    font-size: 14px;
    color: #495057;
}

.mi-newpaybalance-amount {
    color: #fa5247;
    font-weight: 600;
}

.mi-newpaybalance-buttons {
    display: flex;
    justify-content: center;
    gap: 10px;
}

.mi-newpayrecharge-btn {
    padding: 8px 18px;
    background: linear-gradient(135deg, #409eff 0%, #66b1ff 100%);
    color: white;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
    transition: all 0.3s;
    box-shadow: 0 4px 8px rgba(64, 158, 255, 0.2);
}

.mi-newpaynewpay-btn {
    padding: 8px 18px;
    background: linear-gradient(135deg, #67c23a 0%, #85ce61 100%);
    color: white;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
    transition: all 0.3s;
    box-shadow: 0 4px 8px rgba(103, 194, 58, 0.2);
}

.mi-newpaynewpay-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 12px rgba(103, 194, 58, 0.3);
}

.mi-newpayinstructions {
    color: #6c757d;
    font-size: 12px;
    text-align: center;
    line-height: 1.5;
    margin-top: 10px;
}
/*
 *-------------------------------------------------------------------------------
 * 下载模块
 *-------------------------------------------------------------------------------
*/
.mi-post-newdown-container {
    box-sizing: border-box;
    display: flex;
    margin-top: 20px;
    border-bottom: 2px dashed  rgb(139 198 129);
    padding-bottom: 22px;
}
.mi-post-newdown-container:last-child{
    border:none;
}
.mi-post-newdown-carousel {
    flex: 0 0 240px;
    width: 240px;
    margin-right: 20px;
    border-radius: 5px;
    overflow: hidden;
    position: relative;
    display: flex;
    flex-direction: column;
    user-select: none;
    cursor: grab; /* 保留拖拽光标，但不影响el-image点击 */
}

.mi-post-newdown-carousel:active {
    cursor: grabbing; /* 修正:active光标为grabbing，更符合交互逻辑 */
}

.mi-post-newdown-hot-badge {
    position: absolute;
    top: 10px;
    right: 10px;
    background-color: #f56c6c;
    color: white;
    font-size: 12px;
    font-weight: bold;
    padding: 4px 10px;
    border-radius: 12px;
    z-index: 20;
}

.mi-post-newdown-carousel .el-carousel {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.mi-post-newdown-carousel .el-carousel__indicator {
    padding: 0 4px;
}

.mi-post-newdown-carousel .el-carousel__indicators {
    position: absolute;
    bottom: 10px;
    left: 0;
    right: 0;
    margin: 0;
    padding: 0;
    z-index: 10;
}

.mi-post-newdown-carousel .el-carousel__button {
    background-color: #333;
    width: 20px;
    height: 8px;
    border-radius: 5px;
    transition: all 0.3s ease;
}

.mi-post-newdown-carousel .el-carousel__indicator.is-active .el-carousel__button {
    background-color: #fff;
    width: 20px;
    height: 8px;
    border-radius: 5px;
}

.mi-post-newdown-carousel .el-carousel__item {
    height: 100%;
}

/* 核心修正：适配el-image组件，移除pointer-events禁用，调整样式到el-image */
.mi-post-newdown-carousel .el-carousel__item .el-image {
    width: 100%;
    height: 100%;
    border-radius: 5px;
    cursor: zoom-in; /* 提示可点击预览 */
}

/* el-image内部图片的样式（替代原img样式） */
.mi-post-newdown-carousel .el-carousel__item .el-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 5px;
    /* 移除pointer-events: none; 恢复点击事件 */
}

/* 预览大图层级保障（避免被遮挡） */
.el-image-viewer__wrapper {
    z-index: 9999 !important;
}

.mi-post-newdown-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 200px;
}

.mi-post-newdown-title-area {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.mi-post-newdown-title {
    font-size: 20px;
    font-weight: bold;
    color: #333;
}

.mi-post-newdown-badge {
background-color: #67c23a;
color: white;
font-size: 10px;
padding: 4px 10px;
border-radius: 20px;
display: flex;
align-items: center;
gap: 5px;
}

.mi-post-newdown-badge i {
    font-size: 14px;
}

.mi-post-newdown-badge span {
    font-weight: bold;
}

.mi-post-newdown-properties {
    display: flex;
    flex-wrap: wrap;
}

.mi-post-newdown-property {
    width: 50%;
    margin-bottom: 8px;
}

.mi-post-newdown-property-label {
    font-weight: bold;
    color: #666;
    font-size: 13px;
}

.mi-post-newdown-property-value {
    color: #333;
    font-size: 13px;
}

.mi-post-newdown-payment {
    margin-bottom: 10px;
    background-color: #f9f9f9;
    padding: 10px;
}

.mi-post-newdown-payment-row {
    display: flex;
    align-items: center;
    margin-bottom: 5px;
}
.mi-post-newdown-grade-limit{
    color: #666;
    font-size: 13px;
}
.mi-post-newdown-payment-type-label {
    color: #666;
    font-size: 13px;
    font-weight: normal;
}

.mi-post-newdown-coins-row {
    display: flex;
    align-items: center;
    margin-bottom: 5px;
}

.mi-post-newdown-coins-label {
    color: #666;
    font-size: 13px;
    margin-right: 8px;
    font-weight: normal;
}

.mi-post-newdown-coins-values {
    display: flex;
    gap: 15px;
}

.mi-post-newdown-coins-value {
    font-weight: normal;
    font-size: 13px;
}

.mi-post-newdown-coins-value.guest {
    color: #67c23a;
}

.mi-post-newdown-coins-value.member {
    color: #409eff;
}

.mi-post-newdown-coins-value.vip {
    color: #e6a23c;
}

.mi-post-newdown-unlock-tip {
    margin-bottom: 10px;
    display: flex;
    align-items: center;
}
.mi-newdown-warning .mi-post-newdown-unlock-tip-icon,.mi-newdown-warning .mi-post-newdown-unlock-tip-text{
    color: #ffa000;
}
.mi-newdown-success .mi-post-newdown-unlock-tip-icon,.mi-newdown-success .mi-post-newdown-unlock-tip-text{
    color: #52c41a;
}
.mi-post-newdown-unlock-tip-icon {
    font-size: 18px;
    margin-right: 8px;
}

.mi-post-newdown-unlock-tip-text {
    font-size: 13px;
    font-weight: 500;
}

.mi-post-newdown-codes {
    margin-bottom: 10px;
    /* background-color: #f9f9f9; */
    /* border-radius: 6px; */
    padding: 10px;
}

.mi-post-newdown-code-container {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

.mi-post-newdown-code-row {
    display: flex;
    align-items: center;
}

.mi-post-newdown-code-label {
    color: #666;
    font-size: 13px;
    font-weight: normal;
    margin-right: 5px;
}

.mi-post-newdown-code-value {
    color: #333;
    font-size: 13px;
    font-weight: normal;
    margin-right: 8px;
    padding: 2px 8px;
    background-color: #f0f0f0;
    border-radius: 4px;
    font-family: 'Courier New', monospace;
}

.mi-post-newdown-copy-btn {
    color: #409eff;
    cursor: pointer;
    font-size: 16px;
    transition: color 0.3s;
}

.mi-post-newdown-copy-btn:hover {
    color: #66b1ff;
}

.mi-post-newdown-buttons {
    display: flex;
    gap: 10px;
    margin-top: auto;
    align-items: center;
    justify-content: flex-start;
}
/* 骨架屏样式 */
.mi-post-newdown-container.mi-newdown-skeleton-container {
    animation: mi-newdown-skeleton-pulse 1.5s ease-in-out infinite;
    position: relative;
    overflow: hidden;
}

@keyframes mi-newdown-skeleton-pulse {
    0% {
        opacity: 0.8;
    }
    50% {
        opacity: 0.5;
    }
    100% {
        opacity: 0.8;
    }
}

/* 轮播图骨架屏 */
.mi-newdown-skeleton-carousel {
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: mi-newdown-skeleton-shimmer 2s infinite linear;
    border-radius: 5px;
    position: relative;
    width: 240px;
    height: 256px;
    margin-right: 10px;
    overflow: hidden;
}

/* 热门标签骨架屏 */
.mi-newdown-skeleton-hot-badge {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 60px;
    height: 20px;
    background: #e0e0e0;
    border-radius: 12px;
    z-index: 2;
}

/* 轮播图指示点骨架屏 */
.mi-newdown-skeleton-carousel-indicators {
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 4px;
    z-index: 2;
}

.mi-newdown-skeleton-carousel-indicator {
    width: 20px;
    height: 8px;
    background: #e0e0e0;
    border-radius: 5px;
}

.mi-newdown-skeleton-carousel-indicator.active {
    background: #d0d0d0;
}

/* 标题区域骨架屏 */
.mi-newdown-skeleton-title-area {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.mi-newdown-skeleton-title {
    width: 60%;
    height: 25px;
    background: #f0f0f0;
    border-radius: 4px;
}

.mi-newdown-skeleton-badge {
    width: 80px;
    height: 25px;
    background: #e0e0e0;
    border-radius: 20px;
}

/* 属性区域骨架屏 */
.mi-newdown-skeleton-properties {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 15px;
}

.mi-newdown-skeleton-property {
    width: 50%;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 5px;
}

.mi-newdown-skeleton-property-label {
    width: 40px;
    height: 16px;
    background: #e8e8e8;
    border-radius: 2px;
}

.mi-newdown-skeleton-property-value {
    width: 60px;
    height: 16px;
    background: #f0f0f0;
    border-radius: 2px;
}

/* 支付信息骨架屏 */
.mi-newdown-skeleton-payment {
    background-color: #f9f9f9;
    padding: 10px;
    border-radius: 4px;
    margin-bottom: 10px;
}

.mi-newdown-skeleton-payment-row {
    display: flex;
    align-items: center;
    margin-bottom: 8px;
}

.mi-newdown-skeleton-payment-type {
    width: 120px;
    height: 18px;
    background: #e8e8e8;
    border-radius: 2px;
}

.mi-newdown-skeleton-coins-row {
    display: flex;
    align-items: center;
    margin-bottom: 8px;
}

.mi-newdown-skeleton-coins-label {
    width: 50px;
    height: 16px;
    background: #e8e8e8;
    border-radius: 2px;
    margin-right: 8px;
}

.mi-newdown-skeleton-coins-values {
    display: flex;
    gap: 15px;
}

.mi-newdown-skeleton-coin-value {
    width: 100px;
    height: 16px;
    background: #e8e8e8;
    border-radius: 2px;
}

.mi-newdown-skeleton-grade-limit {
    width: 150px;
    height: 20px;
    background: #e8e8e8;
    border-radius: 2px;
    margin-bottom: 5px;
}
.mi-newdown-skeleton-buttons .mi-post-newdown-infobutton{
    display: flex;
    gap: 5px;

}
/* 解锁提示骨架屏 */
.mi-newdown-skeleton-unlock-tip {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
    padding: 8px;
    background: #f9f9f9;
    border-radius: 4px;
}

.mi-newdown-skeleton-unlock-tip-icon {
    width: 18px;
    height: 18px;
    background: #e8e8e8;
    border-radius: 50%;
    margin-right: 8px;
}

.mi-newdown-skeleton-unlock-tip-text {
    width: 200px;
    height: 16px;
    background: #e8e8e8;
    border-radius: 2px;
}

/* 提取码/解压码骨架屏 */
.mi-newdown-skeleton-codes {
    background-color: #f9f9f9;
    border-radius: 6px;
    padding: 10px;
    margin-bottom: 10px;
    display: flex;
    gap: 30px;
}

.mi-newdown-skeleton-code-container {
    display: flex;
    gap: 20px;
}

.mi-newdown-skeleton-code-row {
    display: flex;
    align-items: center;
    gap: 5px;
}

.mi-newdown-skeleton-code-label {
    width: 40px;
    height: 16px;
    background: #e8e8e8;
    border-radius: 2px;
}

.mi-newdown-skeleton-code-value {
    width: 80px;
    height: 20px;
    background: #e0e0e0;
    border-radius: 4px;
}

.mi-newdown-skeleton-copy-btn {
    width: 14px;
    height: 20px;
    background: #e8e8e8;
    border-radius: 2px;
}

/* 按钮区域骨架屏 */
.mi-newdown-skeleton-buttons {
    display: flex;
    gap: 10px;
    align-items: center;
}

.mi-newdown-skeleton-select {
    width: 120px;
    height: 27px;
    background: #e8e8e8;
    border-radius: 4px;
}

.mi-newdown-skeleton-button {
    width: 75px;
    height: 27px;
    background: #e8e8e8;
    border-radius: 4px;
}

@keyframes mi-newdown-skeleton-shimmer {
    0% {
        background-position: -200% 0;
    }
    100% {
        background-position: 200% 0;
    }
}

/* 加载状态样式 */
.mi-postdown-loading {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 20px 0;
}






/*
 *-------------------------------------------------------------------------------
 * 相关文章 start
 *-------------------------------------------------------------------------------
*/
.mi-postRelated-title {
    position: relative;
}

.mi-postRelated-title:before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    height: 18px;
    width: 4px;
    border-radius: 2px;
}

.mi-postRelated-title h2 {
    font-size: 16px;
    margin-left: 10px;
}

.mi-postRelated-item {
    display: flex;
    flex-flow: wrap;
    align-items: stretch;
    margin-top: 10px;
}

.mi-postRelated-post {
    width: calc(25% - 9px);
    margin-right: 12px;
    background-color: #fff;
    margin-bottom: 10px;
    transition: all 0.3s ease;
}

.mi-postRelated-post:nth-child(4n) {
    margin-right: 0;
}

.mi-postRelated-post .mi-indexPost-overlay picture img {
    transition: all 0.6s ease;
    transform: scale(1);
}

.mi-postRelated-post:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
}

.mi-postRelated-post:hover .mi-indexPost-overlay img {
    transform: scale(1.05);
    transition: all 0.3s ease;
}

.post-style-one img {
    text-align: center;
}

.article-content p img {
    width: auto;
    max-width: 100%;

}

/* 文章内页图片居中（针对 aligncenter 类） */
.article-content img.aligncenter,
.single-post .wp-block-image.aligncenter img,
.post-content img.aligncenter {
    display: block !important;
    margin: 0 auto !important;
    float: none !important;
    clear: both !important;
    max-width: 100% !important;
}

/* 如果图片被 p 标签包裹，给 p 标签也加居中 */
.article-content p:has(img.aligncenter) {
    text-align: center !important;
}

/*
 *-------------------------------------------------------------------------------
 * 相关文章 end
 *-------------------------------------------------------------------------------
*/

/*
 *-------------------------------------------------------------------------------
 * post-style-2 文章 start 
 *-------------------------------------------------------------------------------
*/
.mi-Post-Style2 {
    top: 0;
    left: 0;
    right: 0;
    overflow: hidden;
    position: absolute;
    height: 590px;
    transform: scale(1);
}

.mi-Post-Style2bg {
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: 50% 50%;
    -webkit-filter: blur(20px);
    filter: blur(10px);
    -webkit-transform: scale(1.1);
}

.post-style-2 .social-top-one .el-main-mi,
.post-style-2 .main-navigation.el-main-mi {
    justify-content: space-between;
}

.post-style-2 .el-main-mi {
    margin: 0 auto;
    justify-content: center;
    display: flex;
}

.mi-Post-Style2 img {
    width: 100%;
    height: 550px;
}

.mi-post-style-2 b {
    color: #ffff;
}

.mi-post-style-2 .post-style-one {
    margin-top: -10px;
}

.mi-PostStyle2-top {
    height: 300px;
}

.mi-PostStyle2-top img {
    width: 100%;
    height: 100%;
}

.post-style-2 .mi-post-Hd span b {
    display: none;

}

/*
 *-------------------------------------------------------------------------------
 * post-style-2 文章 end 
 *-------------------------------------------------------------------------------
*/
/*
 *-------------------------------------------------------------------------------
 * post-style-4 文章 start 
 *-------------------------------------------------------------------------------
*/
.post-style-4 .post-style-one {
    width: 100%;
}

.mi-postStyle-4 {
    position: relative;
    overflow: hidden;
    margin: 15px 0;
}

.mi-postStyle-4 .mi-postStyle-divide {
    width: 100%;
    height: 100%;
    position: absolute;
    overflow: hidden;
}

/* 
.mi-postStyle-4 .mi-postStyle-divide .swiper-slide {
    aspect-ratio: 3 / 4;
}

.mi-postStyle-4 .mi-postStyle-divide img {
    aspect-ratio: 3 / 4;
} */

.mi-postStyle-5 {
    position: relative;
    overflow: hidden;
    margin: 15px 0;
    width: 100%;
}
.mi-postStyle-5 .mi-postStyle-divide {
    width: 100%;
    height: 100%;
    position: absolute;
    overflow: hidden;
}

.mi-postStyle-divide .swiper-button-next,
.mi-postStyle-divide .swiper-button-prev {
    background-color: #aaaeb3a6;
}

.mi-postStyle-divide.swiper-container-horizontal>.swiper-pagination-bullets {
    text-align: left;
    left: 20px;
}

.mi-postStyle-lookup {
    position: absolute;
    top: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    background-color: #3031338c;
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    font-size: 12px;
}

.mi-postStyle-lookup-content {
    text-align: center;
}

.mi-postStyle-lookup-content span {
    color: #fff;
}

.mi-postStyle-lookup-content b {
    padding: 2px 5px;
    border-radius: 5px;
    margin: 0 5px;
    font-weight: 400;
    letter-spacing: 2px;
    text-align: center;
    padding-left: 10px;
}

.mi-postStyle-button {
    margin-top: 20px;
}

.mi-postStyle-money {
    margin: 20px 0 45px 0;
}

.mi-postStyle-money button {
    border-radius: 20px;
    margin-right: 15px;
    font-size: 12px;
    padding: 5px 10px;
}

.mi-postStyle-money button:last-child {
    margin-right: 0;
}

.mi-postStyle-button button {
    border-radius: 20px;
}

.mi-postStyle-button button i:first-child {
    margin-right: 5px;
}

.mi-postStyle-button button i:last-child {
    margin-left: 5px;
}

.mi-postStyle-xt {
    color: #fff;
    margin-bottom: 30px;
}

.mi-postStyle-xt span:first-child {
    margin-right: 50px;
}

.mi-postStyle-divide .MiYu-Post-number {
    text-align: right;
    position: absolute;
    opacity: 1;
    z-index: 6;
    margin-top: 20px;
    padding: 3px 14px;
    border-radius: 15px;
    top: -3px;
    right: 28px;
    font-size: 12px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: white;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    background-color: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.MiYu-Post-number i {
    font-style: normal;
    margin-right: 3px;
}

.MiYu-Post-number i:last-child {
    font-style: normal;
    margin-left: 3px;
}

.mi-postStyle-divide:hover .MiYu-Post-number {
    opacity: 1;
    transition: 0.3s ease-out all;
}

/*
 *-------------------------------------------------------------------------------
 * post-style-4 文章 end 
 *-------------------------------------------------------------------------------
*/

/*
 *-------------------------------------------------------------------------------
 * post-style-6 视频文章 start - 现代深色风格 (所有类名以mi-开头)
 *-------------------------------------------------------------------------------
*/
.mi-Post-Style6bg {
    width: 100%;
    margin-bottom: 20px;
    padding: 78px 0 0 0;
}

.mi-Post-Style6-top {
    display: flex;
    gap: 0px;
    margin: 0 auto;
    justify-content: center;
}

.mi-video6 {
    flex: 7;
    /* min-height: 670px; */
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3);
    background-color: #0f0f1a;
    overflow: hidden;
    transition: transform 0.3s ease;
    padding-top: 0 !important;
    height: 100% !important;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* .mi-video6:hover {
    transform: translateY(-2px);
} */

.mi-video-list {
    flex: 2;
    background: #000000e8;
    padding: 20px;
    display: flex;
    flex-direction: column;
    height: 507px !important;
    border: 1px dashed #333333
}

.mi-video-listtop {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 18px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    font-size: 14px;
    color: #fff;
    font-weight: 400;
}

.mi-video-list-container {
    flex: 1;
    overflow-y: auto;
    /* 默认隐藏Firefox滚动条，hover时恢复thin */
    scrollbar-width: none;
    scrollbar-color: #e94560 #2a2a42;
    margin-bottom: 18px;
    /* 默认隐藏滚动条时取消右侧内边距，hover时恢复，避免布局空隙 */
    padding-right: 0;
}

/* 容器hover时的样式：恢复Firefox滚动条和右侧内边距 */
.mi-video-list-container:hover {
    scrollbar-width: thin;
    padding-right: 8px;
}

/* webkit内核：默认隐藏滚动条（宽度设0，保留滚动功能） */
.mi-video-list-container::-webkit-scrollbar {
    width: 0;
    border-radius: 3px;
}

/* webkit内核：容器hover时恢复滚动条宽度 */
.mi-video-list-container:hover::-webkit-scrollbar {
    width: 2px;
}

/* 原有滚动条轨道样式，保持不变 */
.mi-video-list-container::-webkit-scrollbar-track {
    background: #2a2a42;
    border-radius: 3px;
}

/* 原有滚动条滑块样式，保持不变 */
.mi-video-list-container::-webkit-scrollbar-thumb {
    background-color: #e94560;
    border-radius: 3px;
}

.mi-video-info {
    display: flex;
    align-items: center;
    padding: 12px;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.25s ease;
    margin-bottom: 12px;
    border: 1px solid transparent;
}

.mi-video-info.active {
    border-color: #e94560;
    background-color: rgba(233, 69, 96, 0.1);
    position: relative;
}

.mi-video-thumbnail {
    position: relative;
    width: 120px;
    height: 68px;
    border-radius: 6px;
    overflow: hidden;
    flex-shrink: 0;
    background-color: #0f0f1a;
}

.mi-video-thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.mi-video-info:hover .mi-video-thumbnail img {
    transform: scale(1.08);
}

.mi-video-duration {
    position: absolute;
    bottom: 5px;
    right: 5px;
    background-color: rgba(0, 0, 0, 0.8);
    color: white;
    font-size: 12px;
    padding: 2px 6px;
    border-radius: 4px;
    backdrop-filter: blur(2px);
}

.mi-playing-indicator {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 32px;
    height: 32px;
    background-color: rgba(233, 69, 96, 0.9);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.mi-video-details {
    margin-left: 14px;
    overflow: hidden;
}

.mi-video-details h4 {
    font-size: 15px;
    font-weight: 500;
    color: #ffffff;
    margin: 0 0 6px 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.5;
}

.mi-video-meta {
    font-size: 12px;
    color: #a0a0b8;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.mi-load-more {
    background-color: #2a2a42;
    border: 1px solid rgba(233, 69, 96, 0.3);
    color: #e94560;
    padding: 10px 16px;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.25s ease;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.mi-load-more:hover {
    background-color: #e94560;
    color: white;
    transform: translateY(-2px);
}

/** 权限 **/
.mi-video-permission {
    position: absolute;
    color: #fff;
    align-items: center;
    display: flex;
    z-index: 2;
    font-size: 12px;
}

.mi-video6 img {
    width: 100%;
    /* height: 670px !important; */
    filter: blur(5px);
    -webkit-filter: blur(5px);
    -moz-filter: blur(5px);
    -o-filter: blur(5px);
    -ms-filter: blur(5px);
}

.mi-video6 img::selection {
    background-color: transparent;
    color: inherit;
}

.xgplayer .xgplayer-poster {
    background-size: 100% 99.9% !important;
}

.xgplayer .btn-text span {
    font-size: 12px;
    text-align: center;
    line-height: 26px !important;
    background: #ffffff !important;
}

#mi-player-container {
    position: relative;
    /* 关键：设置相对定位 */
    width: 100%;
    /* 可以是任意宽度 */
    padding-top: 56.25%;
    /* 16:9 比例 */
    overflow: hidden;
    /* 防止内容溢出 */
}

#mi-player-container img {
    position: absolute;
    /* 关键：设置绝对定位 */
    top: 0;
    left: 0;
    width: 100%;
    /* 填充容器宽度 */
    height: 100%;
    /* 填充容器高度 */
    object-fit: cover;
    /* 保持比例并覆盖容器，可选值：contain, fill等 */
}

.post-style-6 #post-interactions {
    top: -454px;
}

.post-style-6 #post-interactions .interaction-button span b {
    display: none;
}
.post-style-6.single-column .el-main.el-main-mi {
    margin-top: 10px;
}

/*
 *-------------------------------------------------------------------------------
 * post-style-6 视频文章 end
 *-------------------------------------------------------------------------------
*/