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

.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 div {
    color: #2c3e50;
    font-weight: 400;
}

.article-content p,
.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 button {
    box-shadow: none;
}

.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 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-popover-header span {
    font-size: 10px;
    margin-left: 3px;
}

.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;
}

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

.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;
    box-shadow: 0px 5px 12px 2px #00000017;
    border-radius: 50%;
    transition: all .3s ease;
}

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

.el-dialog__header {
    padding: 15px 20px;
}

.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__headerbtn {
    top: -16px;
    right: -16px;
}

.mi-PostzS-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-PostzS-dialog .el-dialog__headerbtn .el-dialog__close:hover {
    box-shadow: 0 0 4px 0 rgba(0, 0, 0, .05);
    transform: translate(-6px, 2px);
}


.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;
}

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

.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;
}

.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;
}

/* 对话框美化 */
.interaction-dialog {
    border-radius: 12px !important;
    overflow: hidden;
}

.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; */
}

.interaction-dialog .el-dialog__body {
    padding: 25px;
}

.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__headerbtn {
    top: -16px;
    right: -16px;
}

.mi-report-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-report-dialog .el-dialog__headerbtn .el-dialog__close:hover {
    box-shadow: 0 0 4px 0 rgba(0, 0, 0, .05);
    transform: translate(-6px, 2px);
}

.mi-report-dialog .el-dialog__body {
    padding: 15px 20px;
    padding-bottom: 10px;
}

.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 {
    padding: 12px 0 20px;
    border-top: 1px solid #f0f0f0;
    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__header {
    padding: 15px 20px 10px;
    border: none;
}

.mi-PostzS-dialog .el-dialog__body {
    padding: 20px 20px 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: 15px;
    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;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    margin-right: 10px;
}

/* 提示文字样式 */
.mi-PostzS-desc {
    font-size: 14px;
    margin-bottom: 20px;
    line-height: 1.5;
    background-color: #f1eccd;
    color: #d5aa5f;
    padding: 10px;
}

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

.mi-PostzS-amount-item {
    width: 80px;
    height: 40px;
    line-height: 40px;
    border: 1px solid #e4e7ed;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 14px;
    color: #606266;
    width: calc(34.41% - 10px);
    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;
    color: #606266;
    margin-bottom: 10px;
    font-weight: 500;
}

.mi-PostzS-payment-methods {
    display: flex;
    justify-content: center;
    gap: 20px;
}

.mi-PostzS-payment-method {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 8px 15px;
    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;
}




/*
 *-------------------------------------------------------------------------------
 * 下载模块
 *-------------------------------------------------------------------------------
*/
/* 下载框主样式 */
.mi-article-down {
    margin: 20px 0;
}

.mi-Postdown-dialog {
    width: 650px;
}

.mi-article-down-card {
    display: flex;
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: 10px;
    border: 1px solid #f0f5ff;
}

/* 左侧权限区域 */
.mi-article-down-left {
    width: 25%;
    background: #f9fbff;
    padding: 16px;
    border-right: 1px solid #f0f5ff;
}

.mi-permission-header {

    display: flex;
    align-items: center;
    gap: 5px;
    margin-bottom: 8px;

}

.mi-permission-header i {
    font-size: 20px;
}

.mi-permission-icon {
    width: 20px;
    height: 20px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%234096ff'%3E%3Cpath d='M12 1L3 5v6c0 5.55 3.84 10.74 9 12 5.16-1.26 9-6.45 9-12V5l-9-4zm0 10.9A2.9 2.9 0 0 1 9.1 9 2.9 2.9 0 0 1 12 6.1 2.9 2.9 0 0 1 14.9 9a2.9 2.9 0 0 1-2.9 2.9zm-5.03 6.58c.84 1.18 1.87 2.26 3.06 3.14 1.19-.88 2.22-1.96 3.06-3.14C13.44 16.04 14 14.09 14 12H8c0 2.09.56 4.04 1.97 5.48z'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
}

.mi-permission-title {
    font-size: 14px;
    font-weight: 700;
    margin: 0;
}

.mi-permission-list {
    margin-bottom: 16px;
}

.mi-permission-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 0;
    font-size: 13px;
    border-bottom: 1px dashed #e5e6eb;
}

.mi-permission-item:last-child {
    border-bottom: none;
}

.mi-permission-badge {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    margin-right: 8px;
}

.mi-permission-badge.vip {
    background-color: #722ed1;
}

.mi-permission-badge.points {
    background-color: #4096ff;
}

.mi-permission-badge.guest {
    background-color: #f5222d;
}

.mi-permission-text {
    flex: 1;
    color: #4e5969;
}

.mi-permission-value {
    font-weight: 500;
    font-size: 12px;
    color: #657085;
}


/* 右侧下载信息区域 */
.mi-article-down-right {
    flex: 1;
    padding: 16px 20px;
    position: relative;
    z-index: 1;
}

.mi-article-down-right::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    filter: blur(3px);
}

.mi-download-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.mi-download-title {
    font-size: 14px;
    font-weight: 700;
    margin: 0;
}

.mi-download-count {
    display: flex;
    align-items: center;
    gap: 5px;
    background: #f2f3f5;
    color: #4e5969;
    font-size: 12px;
    padding: 3px 10px;
    border-radius: 12px;
}

.mi-download-icon {
    width: 13px;
    height: 13px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2386909c'%3E%3Cpath d='M19 9h-4V3H9v6H5l7 7 7-7zM5 18v2h14v-2H5z'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
}

.mi-download-desc {
    font-size: 14px;
    margin: 0 0 14px 0;
    line-height: 1.5;
}

.mi-download-meta {
    display: flex;
    gap: 18px;
    margin-bottom: 14px;
}

.mi-download-meta>div {
    font-size: 14px;
}

.mi-meta-item {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 13px;
    color: #4e5969;
}

.mi-meta-icon {
    width: 14px;
    height: 14px;
    background-size: contain;
    background-repeat: no-repeat;
}

.mi-meta-icon.size {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2386909c'%3E%3Cpath d='M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-1 16H6c-.55 0-1-.45-1-1V6c0-.55.45-1 1-1h12c.55 0 1 .45 1 1v12c0 .55-.45 1-1 1zm-4.44-6.19l-2.35 3.02-1.56-1.88c-.2-.25-.58-.24-.78.01l-1.74 2.23c-.2.25-.2.61 0 .86.2.25.58.26.78.01l1.35-1.73 1.58 1.9c.2.25.58.24.78-.01l2.55-3.27c.2-.25.2-.61 0-.86-.19-.25-.57-.26-.78-.01z'/%3E%3C/svg%3E");
}

.mi-meta-icon.archive {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2386909c'%3E%3Cpath d='M20.54 5.23l-1.34-1.34c-.39-.39-1.02-.39-1.41 0l-1.31 1.31C15.19 4.26 14.1 4 13 4H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V7.41c0-.59-.23-1.17-.63-1.57l-1.33-1.33zM19 18H5V8h14v10zM7 10h5v5H7z'/%3E%3C/svg%3E");
}

.mi-meta-icon.date {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2386909c'%3E%3Cpath d='M19 3h-1V1h-2v2H8V1H6v2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H5V8h14v11zM7 10h5v5H7z'/%3E%3C/svg%3E");
}

.mi-password-info {
    display: flex;
    gap: 18px;
    margin-bottom: 10px;
    padding-bottom: 0px;
}

.mi-password-item {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 13px;
}

.mi-password-icon {
    width: 14px;
    height: 14px;
    background-size: contain;
    background-repeat: no-repeat;
}

.mi-password-icon.lock {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23f5222d'%3E%3Cpath d='M18 8h-1V6c0-2.76-2.24-5-5-5S7 3.24 7 6v2H6c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V10c0-1.1-.9-2-2-2zM9 6c0-1.66 1.34-3 3-3s3 1.34 3 3v2H9V6zm9 14H6V10h12v10zm-6-3c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2z'/%3E%3C/svg%3E");
}

.mi-password-icon.unlock {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2352c41a'%3E%3Cpath d='M18 8h-1V6c0-2.76-2.24-5-5-5S7 3.24 7 6v2H6c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V10c0-1.1-.9-2-2-2zM9 6c0-1.66 1.34-3 3-3s3 1.34 3 3v2H9V6zm9 14H6V10h12v10zm-6-3c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0-10c-2.48 0-4.5 2.02-4.5 4.5S9.52 18 12 18s4.5-2.02 4.5-4.5S14.48 9 12 9z'/%3E%3C/svg%3E");
}

.mi-password-item.locked {
    color: #657085;
}

.mi-password-item.unlocked {
    color: #657085;
}

.mi-download-options {
    margin-top: 10px;
}

.mi-options-title {
    font-size: 14px;
    font-weight: 500;
    color: #4e5969;
    margin: 0 0 10px 0;
}

.mi-options-buttons {
    display: flex;
    gap: 10px;
    justify-content: space-between;
    align-items: center;
}

.no-sources {
    font-size: 12px;
}

.mi-option-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    background: #f2f3f5;
    color: #4e5969;
    border: none;
    border-radius: 3px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.mi-option-btn:nth-child(n) {
    margin-right: 10px;
}

/* .mi-option-btn:hover {
    background: #e5e6eb;
    color: #1d2129;
    transform: translateY(-1px);
} */

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

.mi-option-icon {
    width: 16px;
    height: 16px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.baidu .mi-option-icon {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%232b79d9'%3E%3Cpath d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z'/%3E%3C/svg%3E");
}

.lanzou .mi-option-icon {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2336b37e'%3E%3Cpath d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z'/%3E%3C/svg%3E");
}

.weiyun .mi-option-icon {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%230078d7'%3E%3Cpath d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z'/%3E%3C/svg%3E");
}

.local .mi-option-icon {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%236554c0'%3E%3Cpath d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z'/%3E%3C/svg%3E");
}

/* 支付弹窗样式 */
.mi-PostDown-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
}

.mi-PostDown-modal-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(2px);
}

.mi-PostDown-modal-content {
    position: relative;
    width: 90%;
    max-width: 1000px;
    background-color: #fff;
    border-radius: 10px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
    overflow: hidden;
}

.mi-PostDown-modal-header {
    padding: 16px 20px;
    background-color: #f5f5f5;
    border-bottom: 1px solid #eee;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.mi-PostDown-modal-title {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    color: #333;
}

.mi-PostDown-modal-close {
    background: none;
    border: none;
    font-size: 24px;
    cursor: pointer;
    color: #666;
    transition: color 0.2s;
    padding: 0 10px;
}

.mi-PostDown-modal-close:hover {
    color: #ff4d4f;
}

.mi-PostDown-modal-body {
    padding: 20px;
}

.mi-PostDown-payment-container {
    display: flex;
    gap: 20px;
}

.mi-PostDown-payment-left {
    flex: 1;
}

.mi-PostDown-payment-right {
    flex: 0 0 300px;
}

.mi-PostDown-payment-right .qrcode-image {
    margin-top: 10px;
}

.mi-PostDown-user-info,
.mi-PostDown-product-info,
.mi-PostDown-payment-methods,
.mi-PostDown-order-summary {
    background-color: #f9f9f9;
    border-radius: 8px;
    padding: 15px;
    margin-bottom: 15px;
}

.mi-PostDown-user-info h4,
.mi-PostDown-product-info h4,
.mi-PostDown-payment-methods h4,
.mi-PostDown-order-summary h4 {
    margin-top: 0;
    margin-bottom: 12px;
    font-size: 16px;
    color: #333;
    padding-bottom: 8px;
    border-bottom: 1px solid #eee;
}

.mi-PostDown-user-item,
.mi-PostDown-product-item,
.mi-PostDown-order-item {
    display: flex;
    justify-content: space-between;
    padding: 6px 0;
    border-bottom: 1px dashed #eee;
}

.mi-PostDown-user-item:last-child,
.mi-PostDown-product-item:last-child,
.mi-PostDown-order-item:last-child {
    border-bottom: none;
}

.mi-PostDown-user-item span:first-child,
.mi-PostDown-product-item span:first-child,
.mi-PostDown-order-item span:first-child {
    color: #666;
}

.mi-PostDown-balance,
.mi-PostDown-credit,
.mi-PostDown-price,
.mi-PostDown-total-price {
    font-weight: 600;
    color: #ff4d4f;
}

.mi-PostDown-total-price {
    font-size: 18px;
}

.mi-PostDown-order-total {
    display: flex;
    justify-content: space-between;
    padding: 10px 0 5px;
    margin-top: 10px;
    border-top: 2px solid #eee;
}

.mi-PostDown-methods-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.mi-PostDown-method-item {
    display: flex;
    align-items: center;
    padding: 10px;
    border: 1px solid #eee;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s;
}

.mi-PostDown-method-item:hover {
    border-color: #1890ff;
    background-color: rgba(24, 144, 255, 0.05);
}

.mi-PostDown-method-item input:checked+.mi-PostDown-method-icon+.mi-PostDown-method-name {
    color: #1890ff;
}

.mi-PostDown-method-item input {
    margin-right: 10px;
}

.mi-PostDown-method-icon {
    display: inline-block;
    width: 24px;
    height: 24px;
    margin-right: 10px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.mi-PostDown-method-icon.wechat {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2307C160'%3E%3Cpath d='M9.5 6.5c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm9 0c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zM7.5 11c-1.1 0-2 .9-2 2s.9 2 2 2h1.7l-.8 2h-1.8c-1.1 0-2 .9-2 2s.9 2 2 2h11c1.1 0 2-.9 2-2s-.9-2-2-2h-6.9c.6-1.1 1.3-2.3 1.9-3.5.7-1.3 1-2.8 1-4.3 0-3.9-3.1-7-7-7S4 5.1 4 9c0 1.5.3 3 .9 4.3.6 1.2 1.3 2.4 1.9 3.5H7.5c-1.1 0-2-.9-2-2s.9-2 2-2zm4.5 4c-.8 0-1.5-.7-1.5-1.5s.7-1.5 1.5-1.5 1.5.7 1.5 1.5-.7 1.5-1.5 1.5zm3 0c-.8 0-1.5-.7-1.5-1.5s.7-1.5 1.5-1.5 1.5.7 1.5 1.5-.7 1.5-1.5 1.5z'/%3E%3C/svg%3E");
}

.mi-PostDown-method-icon.alipay {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%231677FF'%3E%3Cpath d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-1.94 16.03c-2.9-1.03-5.03-4.06-5.03-7.31 0-.63.08-1.26.21-1.88.54.1 1.07.16 1.61.16.54 0 1.07-.06 1.61-.16.13.62.21 1.25.21 1.88 0 2.17-.96 4.15-2.6 5.52-.39.32-.85.54-1.34.63l-.4.07zm8.58-1.76c-1.51-.63-3.43-1.76-4.64-3.39-.39-.45-.78-.89-1.17-1.35.12-.25.24-.51.35-.77.9.18 1.81.27 2.73.27 1.76 0 3.46-.45 4.96-1.25.12.44.23.89.33 1.35-.15.06-.3.12-.45.18-1.62.71-3.49 1.07-5.41 1.07-.31 0-.61-.01-.92-.03.15.32.29.63.43.95 1.24.2 2.48.31 3.74.31 3.59 0 6.5-2.91 6.5-6.5s-2.91-6.5-6.5-6.5c-1.26 0-2.5.31-3.74.31-.14-.32-.28-.63-.43-.95.31-.02.61-.03.92-.03 3.59 0 6.5 2.91 6.5 6.5s-2.91 6.5-6.5 6.5c-1.35 0-2.64-.14-3.88-.41.45.87.85 1.75 1.19 2.65 1.38.99 3.01 1.56 4.72 1.56.36 0 .72-.02 1.07-.05l.65.11c.49-.09.95-.31 1.34-.63z'/%3E%3C/svg%3E");
}

.mi-PostDown-method-icon.balance {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23FAAD14'%3E%3Cpath d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-1 17.93c-3.95-.49-7-3.85-7-7.93 0-.62.08-1.21.21-1.79L9 15v1c0 1.1.9 2 2 2v1.93zm6.9-2.54c-.26-.81-1-1.39-1.9-1.39h-1v-3c0-.55-.45-1-1-1H8v-2h2c.55 0 1-.45 1-1V7h2c1.1 0 2-.9 2-2v-.41c2.93 1.19 5 4.06 5 7.41 0 2.08-.8 3.97-2.1 5.39z'/%3E%3C/svg%3E");
}

.mi-PostDown-payment-actions {
    margin-top: 20px;
    text-align: center;
}

.mi-PostDown-pay-button {
    background-color: #1890ff;
    color: #fff;
    border: none;
    border-radius: 6px;
    padding: 12px 30px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.2s;
}

.mi-PostDown-pay-button:hover {
    background-color: #096dd9;
}

.mi-PostDown-qrcode-container {
    text-align: center;
    padding: 20px 0;
}

.mi-PostDown-qrcode-info {
    margin-bottom: 20px;
}

.mi-PostDown-qrcode-amount {
    font-size: 18px;
    font-weight: 600;
    color: #ff4d4f;
    margin-top: 10px;
}

.mi-PostDown-qrcode-image {
    display: inline-block;
    padding: 10px;
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    margin-bottom: 20px;
}

.mi-PostDown-qrcode-image img {
    width: 200px;
    height: 200px;
}

.mi-PostDown-payment-status {
    margin-bottom: 20px;
    color: #faad14;
    font-size: 16px;
}

.mi-PostDown-qrcode-actions {
    display: flex;
    justify-content: center;
    gap: 15px;
}

.mi-PostDown-cancel-button,
.mi-PostDown-check-button,
.mi-PostDown-close-button {
    padding: 8px 20px;
    border-radius: 6px;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s;
}

.mi-PostDown-cancel-button {
    background-color: #fff;
    color: #666;
    border: 1px solid #ddd;
}

.mi-PostDown-cancel-button:hover {
    background-color: #f5f5f5;
}

.mi-PostDown-check-button {
    background-color: #52c41a;
    color: #fff;
    border: none;
}

.mi-PostDown-check-button:hover {
    background-color: #4cae4c;
}

.mi-PostDown-close-button {
    background-color: #1890ff;
    color: #fff;
    border: none;
    padding: 10px 30px;
    font-size: 16px;
    margin-top: 20px;
}

.mi-PostDown-close-button:hover {
    background-color: #096dd9;
}

.mi-PostDown-payment-success {
    text-align: center;
    margin-bottom: 20px;
}

.mi-PostDown-success-icon {
    display: inline-block;
    width: 60px;
    height: 60px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2352c41a'%3E%3Cpath d='M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    margin-bottom: 10px;
}

.mi-PostDown-download-links {
    margin-top: 20px;
}

/* 用户余额显示 */
.mi-user-balance {
    margin-top: 15px;
    padding-top: 15px;
    border-top: 1px dashed #e5e6eb;
}

.balance-item {
    display: flex;
    justify-content: space-between;
    padding: 5px 0;
    font-size: 13px;
}

/* 支付弹窗增强样式 */
.mi-PostDown-modal {
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

.mi-PostDown-modal.active {
    opacity: 1;
    visibility: visible;
}

.mi-PostDown-payment-methods {
    background-color: #fff;
    border: 1px solid #eee;
}

.mi-PostDown-method-item {
    position: relative;
    overflow: hidden;
}

.mi-PostDown-method-item input[type="radio"] {
    position: absolute;
    opacity: 0;
}

.mi-PostDown-method-item input[type="radio"]:checked {
    background-color: rgba(24, 144, 255, 0.05);
    border-color: #1890ff;
}

.mi-PostDown-method-item input[type="radio"]:checked::after {
    content: '';
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    width: 16px;
    height: 16px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%231890ff'%3E%3Cpath d='M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
}

.mi-PostDown-order-summary {
    background-color: #fff;
    border: 1px solid #eee;
}

.mi-PostDown-payment-success {
    padding: 20px 0;
}

.mi-PostDown-success-icon {
    animation: scaleIn 0.5s ease;
}

@keyframes scaleIn {
    from {
        transform: scale(0);
    }

    to {
        transform: scale(1);
    }
}

/* 下载按钮状态样式 */
.mi-option-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    background-color: #f2f3f5;
    color: #86909c;
}

.mi-option-btn:disabled:hover {
    background-color: #f2f3f5;
    color: #86909c;
    transform: none;
}

/* 支付按钮加载状态 */
.mi-PostDown-pay-button.loading {
    position: relative;
    pointer-events: none;
}

.mi-PostDown-pay-button.loading::after {
    content: '';
    position: absolute;
    width: 16px;
    height: 16px;
    top: 50%;
    right: 15px;
    transform: translateY(-50%);
    border: 2px solid rgba(255, 255, 255, 0.6);
    border-radius: 50%;
    border-top-color: #fff;
    animation: spin 1s ease-in-out infinite;
}

@keyframes spin {
    to {
        transform: translateY(-50%) rotate(360deg);
    }
}

/* 新增：已购买按钮样式 */
.mi-pay-button.purchased {
    background-color: #67c23a;
    color: #ffff;
    font-size: 12px;
    border-radius: 5px;
    padding: 7px 12px;
}

.mi-pay-button.nopurchased {
    background-color: #f56c6c;
    color: #ffff;
    font-size: 12px;
    border-radius: 5px;
    padding: 7px 12px;
}

.mi-pay-button.credit i {
    font-size: 12px;

}

/* 支付区域样式优化 */
.payment-action-area {
    padding-top: 0;
    font-size: 12px;
}

.balance-payment-info,
.credit-payment-info {
    background-color: #f9f9f9;
    padding: 15px;
    border-radius: 6px;
    margin-bottom: 15px;
}

.balance-payment-info p,
.credit-payment-info p {
    margin: 8px 0;
    font-size: 14px;
}

.qrcode-image {
    text-align: center;
    margin-bottom: 15px;
}

.qrcode-image img {
    max-width: 180px;
    max-height: 180px;
    padding: 5px;
    border: 1px solid #eee;
    border-radius: 4px;
}

.payment-status {
    color: #faad14;
    text-align: center;
    margin-bottom: 15px;
    font-size: 14px;
}

.payment-actions {
    display: flex;
    justify-content: center;
    gap: 10px;
}

/* 已购买弹窗样式 */
.purchased-info {
    margin-top: 10px;
}

.purchased-desc {
    color: #666;
    margin: 10px 0 15px;
    line-height: 1.6;
}

/* 竖排支付方式 */
.vertical-radio-group {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.vertical-radio {
    display: flex;
    align-items: center;
    padding: 8px 10px;
    border-radius: 4px;
    transition: background 0.3s;
}

.vertical-radio:hover {
    background: #f5f5f5;
}

.vertical-radio .el-radio__label {
    margin-left: 8px;
}

.qrcode-info {
    margin-bottom: 15px;
    text-align: center;
}

.qrcode-info p {
    font-size: 12px;
}

.qrcode-amount {
    color: #f44336;
    font-weight: 500;
}

.qrcode-image {
    text-align: center;
    margin-bottom: 15px;
}

.qrcode-image img {
    max-width: 180px;
    max-height: 180px;
}

.payment-loading,
.payment-status {
    text-align: center;
    padding: 15px 0;
    color: #666;
}

.balance-payment-info,
.credit-payment-info {
    padding: 15px;
    background: #f9f9f9;
    border-radius: 4px;
    margin-bottom: 15px;
}

.payment-actions {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 15px;
}

.payment-success {
    text-align: center;
    padding: 20px 0;
}

.success-icon {
    font-size: 48px;
    color: #4caf50;
    margin-bottom: 15px;
}

/* 已选中的云盘按钮样式 */
.mi-option-btn.highlight {
    background-color: #e3f2fd;
    border-color: #2196f3;
}

.mi-permission-item.mi-permission-postLvVip {
    display: block;
}

.mi-permission-postLvVip-title {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
}

.mi-permission-postLvVip .mi-permission-value {
    margin-left: 10px;
    font-size: 12px;
}

.download-tabs .el-tabs__nav-wrap::after {
    height: 0;
}

.mi-permission-value i {
    margin-left: 3px;
    margin-right: 3px;
}

.mi-article-down .el-tabs__active-bar {
    display: none;
}

.mi-article-down .el-tabs__item {
    font-weight: 700;
    font-size: 12px;
    padding: 0 10px;
    background-color: #f0f0f0;
    margin-right: 5px;
    line-height: 35px;
    border-radius: 5px;
}

.mi-article-down .el-tabs__item:first-child {
    padding-left: 0 !important;
}

.mi-permission-value b {
    font-weight: 500;
    color: #657085;
}

.mi-permission-list .mi-download-disabled-hint {
    font-size: 12px;
    margin-top: 10px;
    text-align: center;
    color: #e14040;
    font-weight: 500;
}

.mi-pay-button.credit:disabled {
    background-color: #ff4d4f;
    cursor: not-allowed;
}

/* 支付方式选择样式 */
.payment-methods-container {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.payment-method-item {
    display: flex;
    align-items: center;
    padding: 12px 16px;
    border: 1px solid #dcdfe6;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.payment-method-item:hover {
    border-color: #409eff;
    background-color: #f5f7fa;
}

.payment-method-item.selected {
    border-color: #409eff;
    background-color: #ecf5ff;
}

.payment-method-icon {
    margin-right: 12px;
    font-size: 24px;
    color: #606266;
}

.payment-method-item.selected .payment-method-icon {
    color: #409eff;
}

.payment-method-info {
    flex: 1;
}

.mi-payment-method-name {
    font-weight: 500;
    color: #303133;
}

.mi-payment-method-name i {
    margin-right: 10px;
}

.payment-method-desc {
    font-size: 12px;
    color: #909399;
    margin-top: 2px;
}

.payment-method-radio {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 1px solid #dcdfe6;
    display: flex;
    align-items: center;
    justify-content: center;
}

.payment-method-item.selected .payment-method-radio {
    border-color: #409eff;
    background-color: #409eff;
    color: white;
}

/* 订单信息样式 */
.mi-PostDown-order-info {
    background: #f8f9fa;
    padding: 14px;
    border-radius: 4px;
    text-align: center;
    border-bottom: 1px solid #e6f7ff;
}

.mi-order-info-item {
    display: flex;
    justify-content: space-between;
    margin-bottom: 8px;
    font-size: 14px;
}

.mi-order-info-item.total {
    border-top: 1px solid #e9ecef;
    padding-top: 8px;
    margin-top: 8px;
    font-weight: 500;
}

.order-info-label {
    font-size: 12px;
    color: #6c757d;
}

.order-info-value {
    color: #495057;
    font-size: 12px;
}

.order-info-value.price {
    color: #e74c3c;
    font-weight: 600;
}

/* 支付二维码区域样式 */
.payment-qrcode-area {
    text-align: center;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.qrcode-container {
    padding: 15px;
    border-radius: 8px;
    justify-self: center;
    align-items: center;
}

.qrcode-container img {
    width: 147px;
    height: 149px;
}

.qrcode-tip {
    font-size: 14px;
    color: #606266;
    margin: 0px;
}

.qrcode-amount {
    font-size: 16px;
    font-weight: 600;
    color: #e74c3c;
}

.payment-countdown {
    margin-top: 15px;
    padding: 10px;
    border-radius: 4px;
}

.countdown-tip {
    font-size: 13px;
    color: #f56c6c;
    margin: 0;
    text-align: center;
}

.payment-loading {
    padding: 40px 0;
    text-align: center;
    color: #909399;
}

.payment-loading .el-icon-loading {
    font-size: 24px;
    margin-bottom: 10px;
    display: block;
}

/* 支付宝跳转提示样式 */
.mi-PostDs-redirect-card {
    text-align: center;
    padding: 20px;
    border: 1px solid #e8e8e8;
    border-radius: 4px;
    background-color: #f9f9f9;
}

.mi-PostDs-redirect-icon {
    font-size: 48px;
    color: #1677ff;
    margin-bottom: 16px;
}

.mi-PostDs-redirect-title {
    font-size: 18px;
    font-weight: 500;
    margin-bottom: 8px;
}

.mi-PostDs-redirect-text {
    color: #666;
    margin-bottom: 20px;
    line-height: 1.5;
}

.mi-PostDs-redirect-actions {
    margin-top: 16px;
}

/* 倒计时样式 */
.countdown-tip {
    color: #f56c6c;
    margin-top: 10px;
    font-size: 14px;
}

.mi-postAdv {
    margin-bottom: 10px;
}

.mi-postAdv-bottom {
    margin-top: 15px;
}

/* 骨架屏样式 */
.skeleton-loading {
    padding: 15px;
    border-radius: 8px;
    background: #fff;
    border: 1px solid #f0f5ff;
}

.skeleton-tabs {
    display: flex;
    margin-bottom: 20px;
    gap: 10px;
    overflow-x: auto;
    padding-bottom: 5px;
}

.skeleton-tab-item {
    height: 40px;
    min-width: 100px;
    background: #f2f3f5;
    border-radius: 4px;
    animation: skeleton-loading 1.5s infinite;
}

.skeleton-content {
    display: flex;
    gap: 20px;
}

.skeleton-left {
    width: 25%;
    height: 200px;
    background: #f9fbff;
    border-radius: 6px;
    animation: skeleton-loading 1.5s infinite;
}

.skeleton-right {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.skeleton-title {
    height: 24px;
    width: 60%;
    background: #f2f3f5;
    border-radius: 4px;
    animation: skeleton-loading 1.5s infinite;
}

.skeleton-desc {
    height: 40px;
    width: 100%;
    background: #f2f3f5;
    border-radius: 4px;
    animation: skeleton-loading 1.5s infinite;
}

.skeleton-meta {
    height: 20px;
    width: 80%;
    background: #f2f3f5;
    border-radius: 4px;
    animation: skeleton-loading 1.5s infinite;
}

.skeleton-buttons {
    height: 36px;
    width: 70%;
    background: #f2f3f5;
    border-radius: 4px;
    animation: skeleton-loading 1.5s infinite;
}

/* 骨架屏动画 */
@keyframes skeleton-loading {

    0%,
    100% {
        opacity: 0.9;
    }

    50% {
        opacity: 0.5;
    }
}

























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

.mi-postRelated-title:before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    height: 18px;
    width: 4px;
    background: linear-gradient(to bottom, #409EFF, #67C23A);
    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;
}

.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;
}

/* 支付弹窗样式 */
.el-dialog.mi-postSc-dialog {
    width: 600px;
}

.mi-postSc-container {
    display: flex;
    gap: 20px;
}

.mi-postSc-left {
    border-right: 1px solid #eee;
    padding-right: 20px;
}

.mi-postSc-author-avatar {
    width: 56px;
    height: 56px;
    border-radius: 5px;
    overflow: hidden;
    margin-right: 14px;
    border: 2px solid #fff;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}

.el-dialog__body .mi-postSc-author-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border: 3px solid #f5f5f5;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    margin-right: 10px;
}

.mi-postSc-author-details {
    flex: 1;
}

.mi-postSc-author-name {
    font-size: 16px;
    font-weight: 600;
    color: #333;
    margin-bottom: 3px;
}

.mi-postSc-author-role {
    font-size: 12px;
    color: #888;
    margin: 0;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    overflow: hidden;
}

.mi-postSc-right {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.mi-postSc-article-info {
    margin-bottom: 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid #eee;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.mi-postSc-title {
    margin-top: 0;
    margin-bottom: 15px;
    font-size: 18px;
    color: #333;
}

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

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

.mi-postSc-meta b {}

.mi-postSc-payment-methods h4 {
    font-size: 13px;
    color: #666;
    margin-bottom: 10px;
    font-weight: 500;
}

.mi-postSc-method-options {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 20px;
}

.mi-postSc-method-option {
    display: flex;
    align-items: center;
    padding: 12px 15px;
    border: 1px solid #ddd;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.3s;
}

.mi-postSc-method-option span {
    flex: 1;
    font-size: 14px;
    color: #333;
}

.mi-postSc-method-option i {
    font-size: 20px;
    margin-right: 10px;
}

.mi-postSc-qrcode-container {
    margin-bottom: 10px;
}

.mi-postSc-qrcode-img {
    width: 160px;
    height: 160px;
    object-fit: contain;
    border: 1px solid #eee;
    padding: 10px;
}

.mi-postSc-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 50px 0;
}

.mi-postSc-loading p {
    margin-top: 15px;
    color: #666;
}

.mi-postSc-payment-desc {
    text-align: center;
    color: #666;
    line-height: 1.6;
}

.mi-postSc-payment-desc p {
    font-size: 12px;
    color: #666;
    margin-bottom: 5px;
    line-height: 1.4;
    margin: 5px 0 0;
}

.mi-postSc-balance-info {
    margin-bottom: 30px;
    text-align: center;
}

.mi-postSc-balance-warning {
    color: #F56C6C;
    margin-top: 10px;
}

.mi-postSc-confirm-btn {
    width: 100%;
}

.mi-postSc-footer {
    text-align: right;
    padding: 15px 20px;
}

.mi-postSc-qrcode-container p {
    font-size: 15px;
}

.mi-postSc-qrcode-container {
    text-align: center;
}

.mi-postSc-qrcode-container i {
    font-size: 20px;
}

.mi-postSc-qrcode-container b {
    font-size: 28px;
    font-weight: 700;
    color: #ff4d4f;
    margin-left: 10px;
}

.mi-postSc-footer .el-button {
    padding: 9px 25px;
}

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

.mi-postSc-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-postSc-dialog .el-dialog__headerbtn .el-dialog__close:hover {
    box-shadow: 0 0 4px 0 rgba(0, 0, 0, .05);
    transform: translate(-6px, 2px);
}

.mi-postSc-Userinfo {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.mi-postSc-UserImg {
    width: 81px;
    height: 81px;
    border: 2px solid #fff;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}

.mi-postSc-UserName {
    text-align: center;
    margin: 10px;
    font-size: 15px;
    font-weight: 700;
}

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

/*
 *-------------------------------------------------------------------------------
 * post-style-6 视频文章 start - 现代深色风格 (所有类名以mi-开头)
 *-------------------------------------------------------------------------------
*/
.mi-Post-Style6bg {
    width: 100%;
    margin-bottom: 20px;
    padding: 60px 0;
    background-color: #1a1a2e;
    /* 深色背景 */
    color: #ffffff;
    height: 605px;
}

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

.mi-video6 {
    border-radius: 12px;
    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: #16213e;
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
    display: flex;
    flex-direction: column;
    height: 505px !important;
}

.mi-video-listtop {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 18px;
    font-weight: 600;
    color: #e94560;
    /* 强调色 */
    margin-bottom: 18px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.mi-total-count {
    font-size: 12px;
    color: #fff;
    font-weight: 400;
}

.mi-video-list-container {
    flex: 1;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: #e94560 #2a2a42;
    margin-bottom: 18px;
    padding-right: 8px;
}

.mi-video-list-container::-webkit-scrollbar {
    width: 6px;
}

.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;
    background: #2a2a42;
    border: 1px solid transparent;
}

.mi-video-info:hover {
    background-color: #323257;
    transform: translateX(4px);
}

.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 视频文章 end
 *-------------------------------------------------------------------------------
*/