/* =========================================
     【精准控制台】
     请根据您的实际效果在这里进行微调
     ========================================= */
  :root {
    /* -------------------------------------
       A. 控制【变色圆圈】(黑底)
       ------------------------------------- */
    --lens-size: 36.5%;        /* 圆圈大小 */
    --lens-x-position: 50%;    /* 圆圈左右位置 */
    --lens-y-position: 50%;    /* 圆圈上下位置 */

    /* -------------------------------------
       B. 控制【PNG遮罩】(白边/高光)
       ------------------------------------- */
    /* PNG 大小：默认 'cover' 即刚好铺满。如果想放大，可以改成百分比，例如 '102%' 或 '105%' */
    --png-size: 109%; 
    
    /* PNG 左右位置：50% 是绝对居中。调小(如 49%)往左移，调大(如 51%)往右移 */
    --png-x-position: 45.5%; 
    
    /* PNG 上下位置：50% 是绝对居中。调小(如 49%)往下移，调大(如 51%)往上移 */
    --png-y-position: 38.5%; 
  }

  /* 1. 基础容器与文本样式 */
  .custom-lens-section {
    width: 100%;
    max-width: 1920px;
    margin: 0 auto;
    padding: 60px 20px;
    background-color: #f5f5f5;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    display: flex;
    flex-direction: column;
    align-items: center;
    box-sizing: border-box;
  }

  .lens-title-area {
    text-align: center;
    margin-bottom: 40px;
  }
  .lens-title-area h2 {
    font-size: 32px;
    font-weight: 800;
    margin: 0 0 10px;
    color: #1a1a1a;
  }
  .lens-title-area p {
    font-size: 15px;
    color: #666;
    margin: 0;
  }

  /* 2. 交互显示核心区 - 锁定 1920:1000 比例 */
  .lens-display-box {
    position: relative;
    width: 100%;
    max-width: 1000px;
    background-image: url('//ueeshop.ly200-cdn.com/u_file/UPBH/UPBH023/2604/06/photo/5bc75c8101.jpg?auto=format&fit=crop&w=1920&q=80');
    background-size: cover;
    background-position: center;
    aspect-ratio: 1920 / 1000; 
    border-radius: 4px;
    overflow: hidden;
    box-shadow: 0 20px 50px rgba(0,0,0,0.15);
  }

  /* 3. 变色层 - 应用控制台变量 */
  .lens-color-layer {
    position: absolute;
    top: var(--lens-y-position);
    left: var(--lens-x-position);
    transform: translate(-50%, -50%); 
    width: var(--lens-size);  
    aspect-ratio: 1 / 1; 
    height: auto;
    border-radius: 50%; 
    background-color: rgba(20, 20, 20, var(--lens-opacity, 0));
    z-index: 5; 
    transition: background-color 0.1s ease;
    pointer-events: none;
  }

  /* 4. 【PNG 遮罩层】 - 接入 PNG 控制台变量 */
  .lens-custom-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* 【在此处替换为您制作好的 PNG 链接】 */
    background-image: url('//ueeshop.ly200-cdn.com/u_file/UPBH/UPBH023/2604/06/photo/be1cb01d5c.png');
    /* 核心修改：接入控制台变量 */
    background-size: var(--png-size);
    background-position: var(--png-x-position) var(--png-y-position);
    background-repeat: no-repeat;
    z-index: 10; 
    pointer-events: none; 
  }

  /* 5. 滑块与状态文字区域 */
  .lens-control-area {
    margin-top: 50px;
    width: 100%;
    max-width: 600px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
  }

  .slider-labels {
    width: 100%;
    display: flex;
    justify-content: space-between;
    font-weight: 600;
    color: #333;
    font-size: 16px;
  }

  .lens-slider {
    -webkit-appearance: none;
    width: 100%;
    height: 4px;
    background: #ccc;
    outline: none;
    border-radius: 2px;
  }

  .lens-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 24px;
    height: 24px;
    background: white;
    border: 3px solid #333;
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1); 
  }

  .lens-slider::-webkit-slider-thumb:hover {
    transform: scale(1.1);
    background: #DACC45; 
    border-color: white;
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
  }

  .status-text {
    font-size: 16px;
    font-weight: 700;
    color: #1a1a1a;
    margin-top: 10px;
  }

  /* 移动端适配：确保文字保持单行 */
  @media (max-width: 768px) {
    .status-text {
      font-size: clamp(10px, 3.2vw, 14px); /* 字体大小根据手机屏幕自适应缩小 */
      white-space: nowrap; /* 强制文本不换行，始终保持单行 */
      width: 100%;
      text-align: center;
    }
  }