/* 保持之前的 CSS 不变，新增以下图片相关样式 */
    #comment-section { max-width: 800px; margin: 40px auto; font-family: -apple-system, sans-serif; padding: 0 20px; }
    .c-form { background: #f9f9f9; padding: 20px; border-radius: 8px; margin-bottom: 30px; position: relative; }
    .c-form.replying { border: 2px solid #1db954; }
    
    .c-tools { display: flex; align-items: center; justify-content: space-between; margin-top: 10px; }
    
    /* 上传按钮样式 */
    .btn-upload { cursor: pointer; display: inline-flex; align-items: center; color: #666; font-size: 14px; }
    .btn-upload:hover { color: #1db954; }
    .btn-upload svg { width: 20px; height: 20px; margin-right: 5px; }
    
    /* 图片预览区域 */
    #img-preview-box { display: none; margin-top: 10px; position: relative; width: fit-content; }
    #img-preview { max-height: 100px; border-radius: 4px; border: 1px solid #ddd; }
    .btn-remove-img { position: absolute; top: -8px; right: -8px; background: red; color: white; border-radius: 50%; width: 20px; height: 20px; text-align: center; line-height: 18px; cursor: pointer; font-size: 12px; border: 2px solid white; }
     .c-img-display:hover { opacity: 0.9; }
     
     /* --- 新增：图片预览灯箱 (Lightbox) 样式 --- */
    #lightbox-modal {
        display: none; /* 默认隐藏 */
        position: fixed;
        z-index: 9999;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.85); /* 黑色半透明背景 */
        align-items: center;
        justify-content: center;
    }
    
    #lightbox-img {
        max-width: 90%;
        max-height: 90%;
        border-radius: 4px;
        box-shadow: 0 0 20px rgba(0,0,0,0.5);
    }

    /* 右上角关闭按钮 */
    .lightbox-close {
        position: absolute;
        top: 20px;
        right: 30px;
        color: #f1f1f1;
        font-size: 40px;
        font-weight: bold;
        transition: 0.3s;
        cursor: pointer;
        line-height: 1;
    }
    .lightbox-close:hover { color: #bbb; text-decoration: none; }
    
    /* 评论列表里的图片 */
    .c-img-display { max-width: 200px; max-height: 200px; border-radius: 6px; margin-top: 8px;  display: inline-block;  cursor: zoom-in; transition: opacity 0.2s; }
    
    /* 其他基础样式 */
    .c-row { display: flex; gap: 10px; margin-bottom: 10px; }
    .c-input { flex: 1; padding: 10px; border: 1px solid #ddd; border-radius: 4px; }
    .c-textarea { width: 100%; padding: 10px; border: 1px solid #ddd; border-radius: 4px; height: 80px; resize: vertical; box-sizing: border-box; }
    .c-btn { background: #1db954; color: white; border: none; padding: 8px 25px; border-radius: 20px; cursor: pointer; font-weight: bold; }
    .c-btn:hover { background: #1ed760; }
    .c-trap { display: none; }
    #reply-status { display: none; background: #e6f7ff; color: #1890ff; padding: 8px 12px; border-radius: 4px; margin-bottom: 10px; font-size: 14px; align-items: center; justify-content: space-between; }
    
    /* 评论显示 */
    .c-item {  padding: 20px 0; margin-top:20px; border-bottom: 1px solid #f0f0f0; }
    .c-main { display: flex; gap: 15px; }
    .c-avatar img { width: 40px; height: 40px; border-radius: 50%; background: #eee; }
    .c-content { flex: 1; } 
    .c-header { display: flex; justify-content: space-between; margin-bottom: 5px; }
    .c-nick { font-weight: bold; font-size: 15px; color: #333; }
    .c-date { font-size: 12px; color: #999; margin-left: 10px; }
    .c-text { 
        color: #444; 
        line-height: 1.35;
        font-size: 14px;
        
        /* ▼▼▼ 加上这一行关键代码 ▼▼▼ */
        white-space: pre-wrap; 
        /* ▲▲▲ 它的作用是：保留空格和换行符，并且长文字自动换行 ▲▲▲ */
        
        word-wrap: break-word; /* 防止长单词（如长URL）撑破布局 */
    }
    /* --- 子评论容器 (缩进 + 竖线) --- */
 .c-children { 
        margin-left: 48px;  /* 每一级的缩进距离 */
        margin-top: 10px;
        border-left: 2px solid #e1e4e8; /* 左侧竖线 */
        padding-left: 10px; /* 线条与内容的间隙 */
    }
    
    /* 移动端适配：屏幕太窄时减少缩进，防止压扁内容 */
    @media (max-width: 600px) {
        .c-children { margin-left: 20px; }
    }

    /* 稍微缩小回复的头像 */
    .c-children .c-avatar img { width: 32px; height: 32px; }
    

    
    /* 稍微缩小一下子评论的昵称字号 (可选) */
    .c-children .c-nick {
        font-size: 14px;
    }
    .btn-reply { font-size: 12px; color: #1db954; cursor: pointer; border: none; background: none; text-decoration: underline; }
    
    /* --- 自定义弹窗样式 (居中显示) --- */
    #custom-alert-overlay {
        display: none; /* 默认隐藏 */
        position: fixed;
        z-index: 10000; /*以此保证在最上层*/
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.5); /* 半透明黑色背景 */
        align-items: center;
        justify-content: center;
        backdrop-filter: blur(2px); /* 背景模糊效果，看起来更高级 */
    }

    .custom-alert-box {
        background: white;
        padding: 30px;
        border-radius: 12px;
        box-shadow: 0 4px 20px rgba(0,0,0,0.2);
        text-align: center;
        min-width: 300px;
        max-width: 80%;
        animation: popIn 0.3s ease;
    }

    .custom-alert-msg {
        font-size: 16px;
        color: #333;
        margin-bottom: 20px;
        line-height: 1.5;
    }

    .custom-alert-btn {
        background: #1db954;
        color: white;
        border: none;
        padding: 10px 30px;
        border-radius: 20px;
        font-size: 14px;
        font-weight: bold;
        cursor: pointer;
        transition: background 0.2s;
    }
    .custom-alert-btn:hover { background: #1ed760; }
    
    /* --- 管理员专属背景样式 --- */
    /* 当 c-main 拥有 .admin-bg 类时触发 */
    .c-main.admin-bg {
        background-color: #f2f4f7; /* 深一点的灰背景，或者用 #f6ffed (淡绿) */
        padding: 15px;             /* 加内边距，不然文字贴边不好看 */
        border-radius: 12px;       /* 圆角 */
        margin-bottom: 10px;       /* 与下方间距 */
       
    }
    
    /* 微调管理员头像位置，因为加了padding，头像需要对齐 */
    .c-main.admin-bg .c-avatar {
        margin-top: 2px;
    }

    /* 简单的弹出动画 */
    @keyframes popIn {
        from { opacity: 0; transform: scale(0.9); }
        to { opacity: 1; transform: scale(1); }
    }