.container {
            max-width: 100%;
            margin: 0 auto;
            background: white;
            border-radius: 10px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
           
            
        }
        
        h1 {
            color: #333;
            text-align: center;
            margin-bottom: 30px;
        }
        
        #contentDisplay {
            min-height: 200px;
            display: flex;
            align-items: center;
            justify-content: center;
           
        }
        
        .loading {
            color: #666;
            font-size: 18px;
        }
        
        .error {
            color: #f44336;
            text-align: center;
        }
        
        .user-info {
            background: #f8f9fa;
            border-radius: 5px;
            padding: 15px;
            margin-top: 20px;
        }
        
        .user-info h3 {
            margin-top: 0;
            color: #555;
        }
        
        .info-row {
             display: inline-block;
            vertical-align: middle;
            margin-bottom: 5px;
        }
        
        .info-label {
            width: 120px;
            color: #666;
        }
        
        .info-value {
          
            color: #333;
            display: inline-block;
            vertical-align: middle;
        }
        
        .status-badge {
            display: inline-block;
            padding: 3px 10px;
            border-radius: 20px;
            font-size: 12px;
          margin-right:10px;
        }
        
        .status-vip {
            background: #4caf50;
            color: white;
        }
        
        .status-normal {
            background: #ff9800;
            color: white;
        }
        
        .status-guest {
            background: #f44336;
            color: white;
        }
        
        
        
         /* 文章内容遮罩代码区域开始——————底部组件容器：嵌套遮罩+提示框，统一定位（关键！） */
  .pay-footer-wrap {
    position: relative;
    bottom: 0;
    left: 0;
    right: 0;
   /*  border: 1px dashed #999; 虚线：标识底部组件整体范围（调试用） */
  }
  .pay-footer-wrap-ppt {
    position: relative;
    bottom: 0;
    left: 0;
    right: 0;
    border-top: 1px dashed #000;
    
  }
  /* 底部渐变遮罩：蓝色边框，自动贴合提示框顶部
  .pay-content-mask {
    position: relative; 
    height: 150px; 
    background: linear-gradient(to top, rgba(255,255,255,1), rgba(255,255,255,0.8), transparent);
    pointer-events: none;
    z-index: 10;
    border: 2px solid #0000ff; 
  } 
  */
        .footer-wrap {
            position: relative; /* 仍需提供定位上下文（核心，不可省略） */
            width: 750; /* 固定宽度（可自定义），高度随子元素文字自适应 */
          
            margin: 0 auto; /* 水平居中 */
            /* 移除固定height，不限制高度，完全跟随文字内容变化 */
            padding: 20px; /* 可选：给文字增加内边距，优化视觉 */
        }

        /* 文字区域：高度不固定，随内容自动撑开 */
        .pay-content-text {
            width: 100%;
            /* 移除固定height，不设置高度，由内容多少决定高度 */
            line-height: 1.8;
            color: #333; /* 文字颜色 */
            /* 无需滚动条，内容直接撑开父容器，高度自适应 */
        }

        /* 遮罩层：依然精准覆盖文字区域底部（自适应场景核心样式） */
        .pay-content-mask {
            position: absolute; /* 保持absolute，脱离文档流实现覆盖（关键1） */
            bottom: 0; /* 遮罩底部与父容器底部对齐（关键2），文字高度自适应后，父容器底部即文字区域底部 */
            left: 0; /* 遮罩左侧与父容器左侧对齐 */
            right: 0; /* 遮罩右侧与父容器右侧对齐，自适应宽度 */
            height: 150px; /* 遮罩高度，控制覆盖文字的范围（可自定义） */
            /* 渐变方向：to top → 从底部向上（白色不透明 → 白色半透明 → 透明） */
            background: linear-gradient(to top, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0.9), transparent);
            pointer-events: none; /* 不阻断下方文字的选中等交互 */
            z-index: 10; /* 确保堆叠层级高于文字区域，实现覆盖（关键3） */
        }

  /* 付费提示框：绿色边框，高度自适应内容，与遮罩无缝衔接 */
  .pay-tips-box {
    padding: 20px;
   /* background-color: #f8fcff;
   border: 2px solid #00ff00;  绿色：标识提示框范围 */
    border-radius: 0 0 4px 4px; /* 匹配容器圆角 */
    text-align: center;
    box-shadow: 0 2px 8px rgba(143, 200, 224, 0.1);
    background: #fafafa;
    border-top: 1px solid #f0f0f0;
   

    /* 高度由内容自动撑开，可随意加/减内容，布局不变 */
  }

  /* 提示框内部样式（不影响布局，可灵活调整） */
  .pay-tips-box h4 {
    margin: 0 0 8px 0;
    font-size: 16px;
    color: #333;
    font-weight: 600;
  }
  .pay-tips-box p {
    margin: 0 0 15px 0;
    text-align: center;
    color: #999;
    font-size: 12px;
  }

  /* 支付按钮样式 */
 /* 同时给 .pay-now-btn 和 .pay-login-btn 定义样式 */
.pay-now-btn, .pay-login-btn, .pay-reg-btn {
    display: inline-block;
    padding: 10px 25px;
    margin: 0 8px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-size: 14px;
    font-weight: bold;
    transition: all 0.3s ease;
    text-decoration: none;
    color: #fff;
    vertical-align: middle
}
 .pay-now-btn{ background-color: #1890ff;height:40px; }
 .pay-login-btn { background-color: #ffc107;
                  height:20px;
                  line-height:20px;
 }
 .pay-reg-btn { background-color: #f56c6c;
             
              line-height:20px;
 }
  .pay-login-btn:hover, .pay-reg-btn:hover, .pay-now-btn:hover {
    /* background-color: #7bb8d0; */
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(143, 200, 224, 0.3);
  }
  /* 文章内容遮罩代码区域结束—————— */
  
   /* 文章内容正文访问权限区域样式开始—————— */
          /* 完整访问权限通知样式 - 蔚蓝色基调 */
        .full-access-notice {
            width: 100%;
            margin-bottom:20px;
        }
        
        /* 部分访问权限通知样式 - 琥珀色基调 */
        .partial-access-notice {
            width: 100%;
             margin-bottom:20px;
        }
        
        .alert {
            padding: 2px 28px; /* 高度再减少10px：从12px改为2px */
            border-radius: 16px;
            display: flex;
            align-items: center;
            animation: fadeIn 0.6s ease-out;
          /*   box-shadow: 0 10px 25px rgba(30, 144, 255, 0.15);*/
            position: relative;
            overflow: hidden;
            border: none;
            margin-bottom:10px;
            cursor: default; /* 设置为默认光标，表明不可点击 */
        }
        
        /* 移除点击时的任何变换效果 */
        .alert:active {
            transform: none !important;
        }
        
        /* alert-success 样式 - 蔚蓝色基调 */
        .alert-success {
            background: linear-gradient(135deg, #e6f7ff 0%, #f0faff 50%, #e6f7ff 100%);
            border: 1px solid rgba(30, 144, 255, 0.2);
            color: #1a5f7a;
           /*    box-shadow: 0 10px 25px rgba(30, 144, 255, 0.15); */
        }
        
        .alert-success:before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 4px; /* 高度减半：从8px改为4px */
            height: 100%;
            background: linear-gradient(to bottom, #1e90ff, #00bfff);
            border-radius: 16px 0 0 16px;
        }
        
        .alert-success strong {
            color: #1a5f7a;
            font-weight: 700;
        }
        
        /* alert-warning 样式 - 琥珀色基调 */
        .alert-warning {
            background: linear-gradient(135deg, #fff8e6 0%, #fff5e0 50%, #fff8e6 100%);
            border: 1px solid rgba(255, 193, 7, 0.2);
            color: #8a6d3b;
            padding:20px;
            border-radius: 16px;
            width:100%;
            /*   box-shadow: 0 10px 25px rgba(255, 193, 7, 0.15);  */
        }
        
        .alert-warning:before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 4px; /* 高度减半：从8px改为4px */
            height: 100%;
            background: linear-gradient(to bottom, #ffc107, #ff9800);
            border-radius: 16px 0 0 16px;
        }
        
        .alert-warning strong {
            color: #8a6d3b;
            font-weight: 700;
        }
        
        .alert-icon {
            font-size: 1.5rem; /* 调整为更清晰的大小，从1.1rem改为1.5rem */
            margin-right: 20px; /* 适当调整间距 */
            flex-shrink: 0;
            position: relative;
            z-index: 1;
            background: rgba(255, 255, 255, 0.9);
            width: 40px; /* 调整为更合适的大小，从35px改为40px */
            height: 40px; /* 调整为更合适的大小，从35px改为40px */
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 50%;
        }
        
        .alert-success .alert-icon {
            color: #1e90ff;
            box-shadow: 0 5px 15px rgba(30, 144, 255, 0.2);
        }
        
        .alert-warning .alert-icon {
            color: #ff9800;
            box-shadow: 0 5px 15px rgba(255, 152, 0, 0.2);
        }
        
        .alert-content {
            flex-grow: 1;
            position: relative;
            z-index: 1;
        }
        
        /* 采用alert-warning样式排版，调整文字大小使其更清晰 */
        .alert-title {
            font-size: 1.0rem; /* 调整为更清晰的大小，从0.75rem改为1.2rem */
            font-weight: 600;
            margin-bottom: 4px; /* 高度减半：从8px改为4px */
            display: flex;
            align-items: center;
            line-height: 1.3; /* 调整行高，使文字更清晰 */
        }
        
        .alert-subtitle {
            font-size: 0.9rem; /* 调整为更清晰的大小，从0.525rem改为0.9rem */
            line-height: 1.4; /* 调整行高，使文字更清晰 */
            text-align: left;
             vertical-align: middle;
        }
        
        .alert-success .alert-subtitle {
            color: #2c6a8c;
        }
        
        .alert-warning .alert-subtitle {
            color: #a1882b;
        }
                .pulse-success {
            animation: pulseBlue 3s infinite;
        }
        
        .pulse-warning {
            animation: pulseAmber 3s infinite;
        }
        .bg-success{
             background: linear-gradient(135deg, #e6f7ff 0%, #f0faff 50%, #e6f7ff 100%);
                border: 1px solid rgba(30, 144, 255, 0.2);
        }
/* 文章内容正文访问权限区域样式结束—————— */