/* 比邻宿舍反转样式---容器样式：固定尺寸，开启 3D 透视 */
.img-flip-container {
  width: 130px !important;
  height: 130px !important;
  position: relative;
  perspective: 1000px;
  margin: 0;
  padding: 0;
}

.img-flip-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transition: transform 0.6s ease;
  transform-style: preserve-3d;
  /* 给翻转容器加阴影（整体阴影，翻转时同步变化） */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4);
  border-radius: 9px !important; /* 配合阴影，轻微加大圆角更协调 */
}

/* 鼠标悬浮时阴影加深，增强交互感 */
.img-flip-container:hover .img-flip-inner {
  transform: rotateY(180deg);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.6);
}

.img-front, .img-back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  border: none;
  border-radius: 9px !important; /* 和容器圆角一致 */
  object-fit: cover;
}

.img-front { z-index: 2; }
.img-back { transform: rotateY(180deg); }
/* 比邻宿舍反转样式---end */
/* 印画小工具文心一言-暂时没有使用这一段，代码融合在主题自定义段了-- */
.knoword-container {
    /* 固定高度（可根据你的需求调整） */
    height: 210px;
    /* 固定宽度（可选，根据布局需求设置） */
    width: 100%;
    padding: 13px 11px;
    margin: 5px 0;
    border-radius: 12px;
    background: rgba(239, 239, 239, 0.5);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4);
    font-family: MyCustomFont,"PingFang SC", "Microsoft YaHei", sans-serif;
    font-size: 15px;
    color: #2d3436;
    line-height: 1.7;
    border: 2px solid rgba(245, 245, 245, 0.7);
    cursor: pointer;
    transition: all 0.3s ease;
    /* 核心：处理文本溢出 */
    overflow: hidden; /* 超出高度隐藏（可选：换成 auto 显示滚动条） */
    display: flex;
    align-items: flex-start‌; /* 垂直居中 */
    justify-content: ‌center; /* 水平居中 */
    text-align: left; /* 文本居中 */
}
.knoword-container:hover {
    background: rgba(252, 252, 252, 0.7);
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.7);
}
.knoword-loading {
    color: #888;
    font-style: italic;
}
/* 印画小工具文心一言---end */
/* 比邻底部文心一言---废弃没在使用 */
.knoword-bl {
    /* 核心：取消固定高度，改为自适应高度 */
    height: auto; /* 由内容决定高度，避免文本溢出 */
    min-height: 30px; /* 最小高度保持单行时的紧凑感 */
    line-height: 1.6; /* 多行文本时更易读（替换原单行 line-height） */
    width: 100%;
    max-width: 100%; /* 强制占满主容器宽度，不超出 */
    padding: 8px 15px; /* 上下内边距增加，换行后更美观 */
    margin: 5px 0;
    border-radius: 6px;
    background: rgba(245, 245, 245, 0.8);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
    font-size: 14px;
    color: #333;
    text-align: center;
    cursor: pointer;
    transition: background 0.2s ease;
    overflow: hidden; /* 防止异常溢出 */
    /* 移除强制单行的属性，允许自动换行 */
    white-space: normal; /* 取消 nowrap，允许换行 */
    word-wrap: break-word; /* 长单词/长文本强制换行，避免溢出 */
    word-break: break-all; /* 中文/英文都能换行，适配各种文本 */
}
.knoword-bl:hover {
    background: rgba(235, 235, 235, 0.9);
}
.knoword-blloading {
    color: #666;
    font-style: italic;
}

/* 手机端微调（确保小屏幕适配） */
@media (max-width: 768px) {
    .knoword-bl {
        font-size: 13px; /* 手机端字体稍小，节省空间 */
        padding: 6px 12px; /* 内边距缩减，更紧凑 */
        margin: 3px 0;
    }
}
/* 比邻底部文心一言---end */

/* 印画侧边栏二维码信封样式，容器：控制整体尺寸，作为所有图片的定位基准 */
        .imaae-wrapper {
            position: relative;
            width: 100%; /* 与A/B/C图的宽度一致（关键！） */
            height: 100%; /* 与A/B图的高度一致（C图是三角形，高度可略小） */
            /*margin: 50px auto; /* 居中显示，可删除 */
            border-radius: 10px; /* 保持圆角风格统一 */
            box-shadow: 0 6px 20px rgba(0, 0, 0, 0.8); /* 沿用之前的阴影 */
            transition: all 0.3s ease; /* 统一过渡效果 */
            overflow: hidden; /* 隐藏滑动时超出容器的B/C图 */
            cursor: pointer; /* 鼠标悬浮显示手型，提示可交互 */
        }
        /* 底层A图：底图（有内容，最终要露出的图） */
        .img-aa {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            object-fit: cover; /* 确保填满容器，不变形 */
            z-index: 1; /* 层级最低，被B、C覆盖 */
        }
        /* 中层B图：信封主体（PNG透明，默认覆盖A图，hover时下移） */
        .img-bb {
            position: absolute;
            top: 0; /* 默认置顶，覆盖A图 */
            left: 0;
            width: 100%;
            height: 100%;
            object-fit: contain; /* 透明PNG适配，不拉伸 */
            z-index: 20; /* 层级高于A图，低于C图 */
            transition: top 0.6s ease-in-out; /* 下移动画，0.6s更优雅 */
        }
        /* 上层C图：三角形封皮（PNG透明，默认覆盖B图顶部，hover时上移） */
        .img-cc {
            position: absolute;
            top: 0; /* 默认置顶，覆盖B图顶部封口 */
            left: 0;
            width: 100%;
            height: 100%; /* 三角形封皮高度自适应（避免变形） */
            object-fit: contain;
            z-index: 30; /* 层级最高，最上层显示 */
            transition: top 0.6s ease-in-out; /* 上移动画，与B图同步速度 */
        }
        /* 鼠标hover容器时：B图下移、C图上移，露出A图 */
        .imaae-wrapper:hover {
            box-shadow: 6px 20px 30px rgba(12, 85, 13, 0.9); /* 沿用你之前的hover阴影 */
            transform: translateY(-3px); /* 沿用你之前的上浮效果 */
}
        .imaae-wrapper:hover .img-bb {
            top: 100%; /* 下移距离=容器高度，完全移出容器 */
        }
        .imaae-wrapper:hover .img-cc {
            top: -100%; /* 上移距离=自身高度，完全移出容器 */
        }
        /* 响应式适配：手机端自动缩放 */
        @media (max-width: 768px) {
            .imaae-wrapper {
                width: 90%; /* 手机端占屏幕90%宽度 */
                height: auto; /* 高度自适应，保持宽高比 */
            }
            .img-cc {
                max-height: 25%; /* 手机端调整C图比例 */
            }
        }
/* 印画侧边栏二维码信封样式，---end */

/* 道不知侧边连信封 */
.envelope-wrapper {
    /* 继承你之前 .link-img 的有效样式（确保容器被撑起） */
    display: inline-block; /* 正常文档流，被内部图片撑起 */
    position: relative;
    width: 100%; /* 自适应侧边栏宽度 */
    border-radius: 12px; /* 保持圆角风格统一 */
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.8); /* 沿用之前的阴影 */
    transition: all 0.3s ease; /* 统一过渡效果 */
    cursor: pointer;
    overflow: hidden;
}

/* 占位图：用正常文档流撑起父容器（关键！参考你 .link-img img 的逻辑） */
.envelope-placeholder {
    display: block; /* 去除底部间隙，和你之前的设置一致 */
    width: 100%;
    height: auto; /* 自适应宽度，保持图片比例 */
    border-radius: inherit; /* 继承圆角 */
}

/* 动画层图片：绝对定位覆盖在占位图上 */
.img-a, .img-b, .img-c {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: contain; /* 保持透明图比例，不拉伸 */
}

/* 层级和动画逻辑 */
.img-a { 
    z-index: 1; 
    object-fit: cover; /* 二维码图填满容器（和你之前的图片逻辑一致） */
}
.img-b { 
    z-index: 20; 
    transition: top 0.6s ease-in-out; 
}
.img-c { 
    z-index: 30; 
    transition: top 0.6s ease-in-out; 
    object-position: top center; /* 三角形顶部居中 */
}

/* Hover效果：同时保留你之前的上浮+阴影，加上信封开合 */
.envelope-wrapper:hover {
    box-shadow: 6px 20px 30px rgba(12, 85, 13, 0.9); /* 沿用你之前的hover阴影 */
    transform: translateY(-3px); /* 沿用你之前的上浮效果 */
}
.envelope-wrapper:hover .img-b {
    top: 100%; /* 信封主体下移 */
}
.envelope-wrapper:hover .img-c {
    top: -100%; /* 三角形封皮上移 */
}

/* 响应式：保持和你之前样式的一致性 */
@media (max-width: 768px) {
    .envelope-wrapper {
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.7); /* 小屏幕弱化阴影 */
    }
    .envelope-wrapper:hover {
        transform: translateY(-2px); /* 小屏幕减小上浮距离 */
    }
}
/* /* 道不知侧边连信封 ，---end */
/* WP音乐插件播放器圆角处理 */
.ai-wrap {
    padding: 20px;
    background-color: #202020;
    color: #fff;
    max-width: 100%;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    margin-bottom: 20px;
    border-radius: 15px !important; /* 控制圆角弧度 */
    overflow: hidden !important; /* 避免播放器内部内容溢出圆角 */
}
.ai-wrap .ai-tracklist {
    margin: 0;
    padding: 0;
    list-style: none;
    overflow: hidden !important; /* 播放器内部圆角部分 */
}
/* WP音乐插件播放器圆角处理移动端 */
@media(max-width:767px) {
.ai-wrap {
    border-radius: 15px !important; /* 控制圆角弧度 */
    overflow: hidden !important; /* 避免播放器内部内容溢出圆角 */
}
.ai-wrap .ai-tracklist {
    margin: 0;
    padding: 0;
    list-style: none;
    overflow: hidden !important; /* 播放器内部圆角部分 */
}
}
@media(max-width:480px) {
.ai-wrap {
    border-radius: 15px !important; /* 控制圆角弧度 */
    overflow: hidden !important; /* 避免播放器内部内容溢出圆角 */
}
.ai-wrap .ai-tracklist {
    margin: 0;
    padding: 0;
    list-style: none;
    overflow: hidden !important; /* 播放器内部圆角部分 */
}
}
/* WP音乐插件播放器圆角处理-end- */

/* 自定义播放器CSS样式  */
/* 关键CSS：禁用封面和唱片背景图片的点击事件 */
.record-bg img, .coverImg { pointer-events: none !important; }
.music-player-container {
    display: flex; flex-direction: column; align-items: center; gap: 20px;
    background: url('https://oss.imaae.com/filedb/storage/pictures/music-player.webp') no-repeat center center;
    background-size: cover; border-radius: 15px; box-shadow: 0 8px 16px rgba(0,0,0,0.3);
    padding: 15px; max-width: 850px; margin: 20px auto; position: relative; overflow: hidden;
    animation: glowEffect 4s infinite alternate;
}
@keyframes glowEffect {
    from { box-shadow: 0 8px 16px rgba(0,0,0,0.3); }
    to { box-shadow: 0 12px 24px rgba(0,0,0,0.4); }
}
.music-player-container::before {
    content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background: linear-gradient(to bottom, rgba(0,0,0,0.5), rgba(0,0,0,0.3));
    border-radius: 15px; z-index: 1; pointer-events: none;
}
.music-player {
    display: flex; align-items: flex-start; flex-wrap: wrap; position: relative;
    z-index: 2; width: 100%;
}
.music-player .cover {
    position: relative; width: 140px; height: 140px;
    display: flex; align-items: center; justify-content: center; margin-top: 25px;
}
.music-player .cover .record-bg {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1;
}
.music-player .cover .record-bg img {
    width: 100%; height: 100%; border-radius: 50%; object-fit: cover;
}
@keyframes rotateRecord {
    from { transform: rotate(0deg); } to { transform: rotate(360deg); }
}
.record-rotate { animation: rotateRecord 8s linear infinite !important; }
.music-player .cover .coverImg {
    width: 80px; height: 80px; border-radius: 50%;
    transition: transform 0.3s, box-shadow 0.3s; position: relative; z-index: 2;
    border: 2px solid rgba(255,255,255,0.2);
}
.music-player .cover .coverImg:hover {
    transform: scale(1.05); box-shadow: 0 5px 10px rgba(255,255,255,0.3);
}
.playing {
    transform: scale(1.05) !important; box-shadow: 0 0 20px 3px rgba(0,120,255,0.4) !important;
}
.music-player .contents {
    flex: 1; margin-left: 33px; display: flex; flex-direction: column; gap: 8px;
}
.music-player .info .title { font-size: 18px; margin: 0 0 5px; color: #fff; font-weight: bold; }
.music-player .info .artist { font-size: 14px; color: #f5f5f5; margin: 0; }
.music-player .info .artist a { color: #f5f5f5; text-decoration: none; }
.music-player .info .artist a:hover { text-decoration: underline; }
/* 歌词样式 */
.lyric-container {
    width: 100%; height: 80px; overflow: hidden; position: relative;
    color: #f5f5f5; font-size: 15px; line-height: 26px; text-align: left;
}
.lyric-content { position: absolute; width: 100%; transition: transform 0.3s ease-out; }
.lyric-content p { margin: 0; padding: 0; opacity: 0.7; }
.lyric-content p.active { color: #fff669; opacity: 1; font-weight: 500; }
/* 音频控件 */
.audio-wrapper { width: 100%; display: flex; justify-content: center; margin-top: 5px; }
audio {
    display: block; width: 100%; max-width: 666px; height: 30px;
    background: transparent; border-radius: 8px; opacity: 0.9;
    transition: opacity 0.3s, box-shadow 0.3s;
}
audio:focus, audio:hover { opacity: 1; box-shadow: 0 4px 8px rgba(255,255,255,0.3); }
/* 移动端适配 */
@media (max-width: 600px) {
    .music-player { flex-direction: column; align-items: center; text-align: center; }
    .music-player .cover { width: 120px; height: 120px; }
    .music-player .cover .coverImg { width: 75px; height: 75px; }
    .music-player .contents { margin-left: 0; width: 100%; margin-top: 15px; }
    .lyric-container { text-align: center; }
    .audio-wrapper { width: 100%; margin-top: 15px; }
    audio { width: 100%; max-width: none; }
}
/* 自定义播放器CSS样式 -end- */