/*输入框样式*/


/*输入框样式*/

    
     textarea { 
                width: 100%; 
                min-height: 100px; 
                resize: none; /* 禁止手动调整大小 */
                border-radius:10px; 
                border:0px solid var(--border); 
                background:var(--bg); 
                color:var(--text); 
                padding:12px 14px; 
                outline:none;
                box-sizing: border-box; /* 确保padding不会导致超出容器 */
                line-height: 1.5; /* 优化行高 */
                font-size: 15px;
                
            }
 
   .row {
        display: flex;
        gap: 20px;
        align-items: center;
        /* 浅蓝色外框线：核心样式 */
         background: #ffffff; 
        border-radius: 30px; 
        /* 可选优化：避免边框挤压布局/增加内边距让内容不贴边 */
        box-sizing: border-box; /* 边框计入宽高，防止布局偏移 */
        padding: 15px;
        margin: 0px 0 40px;
        position: relative; /* 确保内容在背景层上方 */
        z-index: 1; /* 显示在背景层上方 */
    }

    
      .grid { 
        display:grid; 
        grid-template-columns:1fr;
        position: relative; /* 确保内容在背景层上方 */
        z-index: 1; /* 显示在背景层上方 */
      }
   .card {  
  /* 明确指定背景色，优先级更高，避免透显 */
  background-color: #ffffff; 
  border-radius: 30px; 
  padding: 10px; 
  margin: 40px auto 0; 
  width: 100%; 
  box-sizing: border-box;  
  position: relative; 
  z-index: 2;
  overflow: visible; /* 允许阴影向四周弥散，不裁剪 */
}

/* 背景隔离层：确保背景色完全覆盖，防止阴影透显 */
.card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #f9fafc; /* 与卡片背景色一致 */
  border-radius: inherit; /* 继承卡片圆角 */
  z-index: 0; /* 在阴影上方，但在内容下方 */
  pointer-events: none; /* 避免遮挡交互 */
}

/* 确保 .card 的所有直接子元素都显示在背景层上方 */
.card > * {
  position: relative;
  z-index: 1;
}

/* 伪元素实现：四周弥散彩影（中间紫/左右蓝） */
.card::after {
  content: "";
  position: absolute;
  /* 全屏覆盖：向四周延伸，形成包裹式阴影 */
  top: -15px;   /* 向上延伸15px */
  left: -15px;  /* 向左延伸15px */
  right: -15px; /* 向右延伸15px */
  bottom: -15px;/* 向下延伸15px */
  /* 中间紫、左右蓝的线性渐变（降低透明度，避免透显到卡片） */
  background: linear-gradient(90deg, 
    rgba(59, 130, 246, 0.15),  /* 左侧浅蓝（更低透明度） */
    rgba(168, 85, 247, 0.25),  /* 中间紫色（更低透明度） */
    rgba(59, 130, 246, 0.15)   /* 右侧浅蓝（更低透明度） */
  );
  filter: blur(20px); /* 模糊度：数值越大弥散感越强 */
  z-index: -1; /* 阴影在卡片下方，不干扰背景色 */
  border-radius: inherit; /* 继承卡片圆角 */
  pointer-events: none; /* 避免伪元素遮挡交互 */
}
    
    
    
    

    /* selectorModule 样式 */
    #selectorModule {
       
        background: #ffffff ; /* 白色背景 */
        border-radius: 0 0 30px 30px ; /* 只保留底部圆角 */
        padding: 15px ;
        margin-left: -10px ; /* 负margin抵消.card的左边padding */
        margin-right: -10px ; /* 负margin抵消.card的右边padding */
        margin-top: 0 ;
        margin-bottom: -10px ; /* 负margin突破底部padding */
        width: calc(100% + 20px) ; /* 宽度延伸到.card边缘 */
        box-sizing: border-box ;
        position: relative;
    }
  
  
.btn {
  /*width: 120px;*/
  height: 44px;
  border-radius: 15px;
  /* 核心：修复渐变背景 + 统一边框 */
  background: linear-gradient(90deg, #980ffa, #155cfb); /* 紫→蓝渐变（HEX格式） */
  border: 1px solid #dcdfe6; /* 统一浅灰边框（或与渐变匹配的纯色） */
  background-clip: padding-box; /* 背景仅填充内边距区域，避免被边框截断 */
  box-sizing: border-box; /* 边框计入宽度，防止位移 */
  /* 文字样式 */
  color: #fff;
  font-size: 14px;
  cursor: pointer;
  border: none; /* 若不需要边框，直接去掉边框，彻底避免条带问题 */
  display: flex;
  align-items: center;
  justify-content: center;
  
    padding-left: 10px;
  padding-right: 10px;
}
            .btn:hover { 
               transform:translateY(-1px);
                 background: linear-gradient(90deg,  #155cfb,#980ffa); /* 紫→蓝渐变（HEX格式） */
                
            }

    .grid { display:grid; grid-template-columns:1fr; }
  
  /* 让 selectorModule 突破 .card 的 padding */
  
  
   /* 闪烁光标样式 */
            .textarea-wrapper {
                position: relative;
            }
            
      .single-inputcc { 
                width: 100%;
                height: 90px;
                min-height: 120px;
                max-height: 120px;
                border-radius:10px; 
                border:0px solid var(--border); 
                background:var(--bg); 
                color:var(--text); 
                padding:8px 12px; 
                outline:none;
                box-sizing: border-box;
                font-size: 20px;
                resize: none;
                font-family: inherit;
                line-height: 1.5;
            }
            
     .cursor-blink {
                position: absolute;
                left: 12px;
                top: 8px;
                color: var(--text);
                font-size: 20px;
                line-height: 1.5;
                pointer-events: none;
                animation: blink 1s infinite;
            }
            
            .cursor-blink.hidden {
                display: none;
            }
            
            
             /* 生成大纲按钮布局 */
    .desktop-go-btn {
        display: flex;
        align-items: flex-end; /* 按钮置底对齐 */
        align-self: stretch; /* 拉伸到与textarea相同高度 */
        position: relative; /* 确保按钮在背景层上方 */
        z-index: 1; /* 显示在背景层上方 */
    }
    
    
    
.bai { 
  display: flex; 
  align-items: center;
  background-color: #ffffff;
  border: 0px solid #e0e0e0;
  padding: 6px 20px; 
  border-radius: 30px; 
  font-size: 11px;
  /* 新增：靠右对齐核心 */
  margin-left: auto;
  /* 可选：补充宽度，确保对齐效果 */
  width: fit-content; /* 宽度自适应内容 */
}
    
    /*下拉框*/
    
     /* 第一行选项行样式 调整 */
    .options-row:first-child { 
        display: flex; 
        flex-wrap: wrap; 
        gap: 15px; 
      
        align-items: center; 
    }
    .option-group { 
        display: flex; 
        align-items: center;
        /*gap: 6px; */
        /*min-width: 100px; */
        background-color: #ffffff; /* 白色底色 */
        border: 1px solid #e0e0e0; /* 灰色边框（可调整色值如#cccccc加深） */
        padding: 6px 15px; 
        border-radius: 30px; 
        font-size: 11px; /* 已按注释改为12px */
        transition: background-color 0.2s; /* 保留过渡动画 */
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);

          
    }
    /* 鼠标经过时背景色变为E9E9E9 */
    .option-group:hover {
       border: 1px solid #7B68EE; /* 浅紫色（推荐），可替换为其他紫色值 */
    }
    .option-group label { 
        display: inline-block; 
        margin-bottom: 0; 
        color: var(--text); 
        width: auto; 
        white-space: nowrap; 
        background-color: transparent; /* 改为透明，继承父容器背景色 */
        font-size: inherit; /* 继承容器字体大小 */
    }
    .option-group select,
    .option-group input { 
        flex: 1; 
        padding: 6px 10px; 
        border-radius: 6px; 
        border: none; /* 去除选择框灰色边框 */
        box-sizing: border-box; 
        font-size: inherit; /* 继承容器字体大小 */
        background-color: transparent; /* 改为透明，继承父容器背景色 */
        outline: none;
        box-shadow: none;
    }
    /* 选择框聚焦样式优化 */
    .option-group select:focus,
    .option-group input:focus {
        border-color: var(--accent); 
    }

    /* 确保带有 hidden 类的选项行被强制隐藏，覆盖 nth-child 的显示规则 */
    .options-row.hidden { display: none !important; }




    /* 下拉选择框箭头样式 */
    .option-group select {
        appearance: none; 
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%236c757d' d='M6 8.5L1.5 4 2.4 3l3.6 3.6 3.6-3.6.9 1L6 8.5z'/%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: right 8px center;
        padding-right: 24px;
    }
    /* 自定义下拉：实现展开列表圆角（跨浏览器） */
    .option-group select { position: relative; z-index: 10001; }
    .option-group:has(.custom-select.open) { z-index: 10001 !important; }
    /* 输出区域样式 */
    
      .output2 {
                font-size: 15px;
                white-space:pre-wrap; 
                line-height:1.65; 
                padding:16px; 
                background:var(--bg); 
                border:0px solid var(--border); 
                border-radius:30px; 
                min-height:240px; 
                outline: none;
                position: relative; /* 确保内容在背景层上方 */
                z-index: 1; /* 显示在背景层上方 */
            }
    
    .output {
                font-size: 15px;
                white-space:pre-wrap; 
                line-height:1.65; 
                padding:16px; 
                background:var(--bg); 
                border:0px solid var(--border); 
                border-radius:30px; 
                min-height:120px; 
                outline: none;
                position: relative; /* 确保内容在背景层上方 */
                z-index: 1; /* 显示在背景层上方 */
            }
            .output:empty:before {
                content: attr(data-placeholder);
                color: #999;
                pointer-events: none;
            }
            .output .line-h1 {
                font-size: 18px;
                margin: 0.5em 0;
            }
            .output .line-h2 {
                font-size: 15px;
                margin: 0.5em 0;
            }
            .output .line-p {
                font-size: 12px;
                margin: 0.5em 0;
            }
            .output div {
                white-space: pre-wrap;
            }
    
    
    
     .custom-select { position: relative; width: 100%; z-index: 10001; }
    .custom-select.open { z-index: 10001 !important; }
    .custom-select.hidden-native select { display: none; }
    .custom-select-trigger { 
        display: flex; align-items: center; justify-content: space-between; 
        padding: 3px 10px; border: none; border-radius: 0; 
        background: transparent; color: var(--text); cursor: pointer; font-size: inherit;
         gap: 6px; 
    }
    .custom-select-trigger .arrow { margin-left: 8px; color: #6c757d; }
    .custom-select.open .custom-select-trigger { border-bottom-left-radius: 10px; border-bottom-right-radius: 10px; }
    .custom-select-options { 
        position: absolute; left: 0; top: calc(100% + 4px);
        background: #fff; border: 1px solid #ddd; border-radius: 10px; 
        box-shadow: 0 6px 18px rgba(0,0,0,0.08); max-height: 240px; overflow: auto; z-index: 10002 !important; 
        display: none;
        box-sizing: border-box;
        min-width: 100%;
    }
    .custom-select-options { scrollbar-width: none; }
    .custom-select-options::-webkit-scrollbar { width: 0; height: 0; }
    .custom-select.open .custom-select-options { display: block; }
    .custom-select-option { 
        padding: 8px 10px; 
        cursor: pointer; 
        text-align: left; 
    }
    .custom-select-option:hover { background: #f5f5f5; }
    .custom-select-option.selected { background: #e9f2ff; color: #0d6efd; }

    /* 场景下拉区域特殊样式：加宽并网格布局 */
    .scene-select .custom-select-options,
    .option-group:has(#scene) .custom-select-options {
        min-width: 300px !important;
        width: 300px !important;
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 4px !important;
        padding: 8px !important;
        max-height: 400px !important;
    }
    /* 确保场景下拉框默认隐藏，只有在open状态下才显示为grid */
    .scene-select:not(.open) .custom-select-options,
    .option-group:has(#scene) .custom-select:not(.open) .custom-select-options {
        display: none !important;
    }
    .scene-select.open .custom-select-options,
    .option-group:has(#scene) .custom-select.open .custom-select-options {
        display: grid !important;
    }
    .scene-select .custom-select-option,
    .option-group:has(#scene) .custom-select-option {
        padding: 6px 8px !important;
        text-align: center !important;
        font-size: 12px !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }