/* 全局通用样式 */
    .art-post {
        padding: 30px !important;
        margin-bottom: 25px !important;
        border: none !important;
        box-sizing: border-box;
    }
    /* 头部 */
    .about-hero-wrapper {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        flex-wrap: wrap;
    }
    .hero-left-group {
        display: flex;
        align-items: center;
        gap: 25px;
    }
    .avatar-deep-groove {
        width: 100px;
        height: 100px;
        flex-shrink: 0;
        border-radius: 20px !important;
        display: flex;
        justify-content: center;
        align-items: center;
        box-shadow: inset 6px 6px 12px #d1d9e6, inset -6px -6px 12px #ffffff !important;
        padding: 8px;
    }
    .avatar-img {
        width: 100%;
        height: 100%;
        border-radius: 12px !important;
        object-fit: cover;
    }
    /* 核心修改：让姓名和格言始终垂直排列 */
    .hero-name {
        font-size: 24px;
        color: #313d5a;
        margin: 0;
        display: flex;
        /* 开启 Flex 布局 */
        flex-direction: column;
        /* 强制子元素纵向排列 */
        gap: 5px;
        /* 姓名和格言之间的距离 */
        align-items: flex-start;
        /* 电脑端默认靠左对齐 */
    }
    .hero-name small {
        font-size: 14px;
        color: #a0aec0;
        margin-left: 0;
        /* 去掉原本的左间距 */
        font-weight: normal;
        display: block;
        /* 确保它是块级显示 */
    }
    .hero-status-tags {
        display: flex;
        gap: 10px;
        margin-top: 12px;
        flex-wrap: wrap;
    }
    .status-tag {
        font-size: 12px;
        padding: 4px 12px !important;
        border-radius: 20px !important;
        color: #64748b;
        box-shadow: inset 3px 3px 6px #d1d9e6, inset -3px -3px 6px #ffffff !important;
    }
    /* 个人自述 */
    .profile-grid {
        display: flex;
        gap: 25px;
    }
    .profile-info-list {
        flex: 1;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }
    .info-item {
        font-size: 14px;
        color: #4a5568;
    }
    .info-label {
        font-weight: bold;
        color: #313d5a;
    }
    /*    .profile-bio { flex: 1.2; padding: 15px 20px !important; border-radius: 15px !important; font-size: 14px; line-height: 1.6; color: #64748b; } */
    /* 家乡 */
    .hometown-gallery {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 20px;
        margin-top: 10px;
    }
    .gallery-item-box {
        padding: 10px !important;
        border-radius: 18px !important;
        box-shadow: inset 5px 5px 10px #d1d9e6, inset -5px -5px 10px #ffffff !important;
        display: flex;
        flex-direction: column;
        gap: 10px;
    }
    .gallery-item-box img {
        width: 100%;
        height: 160px;
        border-radius: 12px;
        object-fit: cover;
    }
    .img-caption {
        font-size: 11px;
        color: #64748b;
        text-align: center;
    }
    /* --- 核心技能+介绍 (错位修复核心) --- */
    .skill-flex-container {
        display: flex;
        gap: 30px;
        align-items: flex-start;
        /* 改为起点对齐，防止右侧被拉伸变形 */
    }
    .skill-bars-part {
        flex: 1;
        display: flex;
        flex-direction: column;
        gap: 18px;
        min-width: 0;
        /* 防止子元素溢出 */
    }
    .skill-text-part {
        flex: 1;
        padding: 20px !important;
        border-radius: 20px !important;
        font-size: 14px;
        line-height: 1.8;
        color: #4a5568;
        box-sizing: border-box;
        box-shadow: inset 4px 4px 8px #d1d9e6, inset -4px -4px 8px #ffffff !important;
    }
    .progress-bg {
        height: 10px;
        border-radius: 10px;
        margin-top: 8px;
        padding: 2px;
    }
    .progress-fill {
        height: 100%;
        border-radius: 10px;
        background: linear-gradient(90deg, #007bff, #00d2ff);
    }
    /* 打赏 */
    .reward-container {
        display: flex;
        justify-content: space-around;
        gap: 15px;
        flex-wrap: wrap;
    }
    .qr-code-box {
        width: 140px;
        height: 140px;
        border-radius: 18px !important;
        display: flex;
        justify-content: center;
        align-items: center;
        box-shadow: inset 5px 5px 10px #d1d9e6, inset -5px -5px 10px #ffffff !important;
        padding: 8px;
    }
    .qr-code-box img {
        width: 100%;
        height: 100%;
        border-radius: 10px;
    }
    .reward-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 10px;
    }
    .reward-type {
        font-size: 13px;
        color: #313d5a;
        font-weight: bold;
    }
    /* 按钮 */
    .social-links {
        display: flex;
        gap: 12px;
    }
    .neu-btn {
        width: 42px;
        height: 42px;
        border-radius: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: 4px 4px 8px #d1d9e6, -4px -4px 8px #fff !important;
        transition: all 0.2s;
    }
    .neu-btn:hover {
        transform: scale(0.95);
        box-shadow: inset 2px 2px 5px #d1d9e6, inset -2px -2px 5px #fff !important;
    }
    /* --- 小按钮下划线屏蔽 --- */
    .neu-btn, .neu-btn:hover {
    text-decoration: none !important;
    }
    /* --- 移动端排版优化 --- */
    @media (max-width: 768px) {
        /* 1. 解决按钮太紧的问题：强制拉开上下间距 */
        .about-hero-wrapper {
            flex-direction: column;
            justify-content: center;
            gap: 30px;
            /* 关键：强制拉开头像组和社交按钮组的距离 */
        }
        .hero-right-group {
            margin-top: 10px;
            /* 二重保险：给按钮组顶部增加外边距 */
        }
        .social-links {
            justify-content: center;
        }
        /* 以下是你原有的其他移动端代码，保持不动 */
        .art-post {
            padding: 20px !important;
        }
        .hero-left-group {
            flex-direction: column;
            text-align: center;
            width: 100%;
        }
        .hero-name {
            align-items: center;
        }
        /* 覆盖电脑端的 flex-start，让姓名和格言水平居中 */
        .hero-status-tags {
            display: flex;
            /* 确保开启了 flex */
            flex-direction: column;
            /* 核心：强制子元素（标签）垂直纵向排列 */
            align-items: center;
            /* 核心：让垂直排列后的标签在水平方向居中 */
            justify-content: center;
            gap: 12px;
            /* 核心：设置两个标签之间的上下间距，防止贴在一起 */
            margin-top: 15px;
        }
        /* 补充：确保标签宽度自适应，不要撑满全屏 */
        .status-tag {
            width: fit-content;
            /* 让标签宽度根据文字内容自适应 */
        }
        .profile-grid {
            flex-direction: column;
        }
        .profile-info-list {
            grid-template-columns: 1fr;
        }
        .hometown-gallery {
            grid-template-columns: repeat(2, 1fr);
            gap: 10px;
        }
        .gallery-item-box img {
            height: 120px;
        }
        .skill-flex-container {
            flex-direction: column;
            gap: 25px;
        }
        .skill-bars-part, .skill-text-part {
            width: 100% !important;
            flex: none;
        }
        .reward-container {
            flex-direction: column;
            align-items: center;
        }
    }
    @media (max-width: 480px) {
        .hometown-gallery {
            grid-template-columns: 1fr;
        }
    }
    
/* 音乐播放器新形态适配 */
.music-panel {
    margin-bottom: 25px !important;
}

#aplayer {
    background: #E6E7EE !important; /* 统一背景色 */
    border: none !important;
    border-radius: 18px !important;
    /* 使用你页面中的内凹阴影 */
    box-shadow: inset 5px 5px 10px #d1d9e6, inset -5px -5px 10px #ffffff !important;
    padding: 10px;
    margin: 0 !important;
}

/* 覆盖 APlayer 内部子元素颜色 */
.aplayer-pic { 
    border-radius: 12px !important; /* 封面圆角 */
}

.aplayer-info { 
    background: transparent !important; 
    padding: 14px 7px 0 10px !important;
}

.aplayer-list { 
    text-align: left; 
}

/* 列表选中项的微弱高亮，不破坏整体感 */
.aplayer-list-light { 
    background: rgba(0, 123, 255, 0.05) !important; 
}

/* 进度条与音量条颜色 - 保持与你的蓝色主题一致 */
.aplayer-fill { background: #007bff !important; }
.aplayer-thumb { background: #007bff !important; }