* {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            color: #11264f; /* 全局文字颜色统一为#11264fcodeEditor */
        }

        /* 自定义过渡效果（对应HTML中的transition-custom）myProjectModal lgcbb-modaltimer*/
        .transition-custom {
            transition: all 0.2s ease-in-out;
        }

        /* 整体布局：垂直排列 header -> main -> footer */
        body {
            display: flex;
            flex-direction: column;
            height: 100vh; /* 占满整个视口高度 chat-bubble*/
            overflow: hidden; /* 隐藏整体滚动条 */
            position: relative; /* 为遮罩层提供定位上下文 */
            background-color: white; /* 整体底色为白色 */
        }

        /* 拖动遮罩层：拦截iframe事件，拖动时显示 */
        .resize-mask {
            position: absolute;
            top: 0;
            left: 0;
            width: 100vw;
            height: 100vh;
            z-index: 9999; /* 置于最顶层 */
            display: none; /* 默认隐藏 */
            cursor: inherit; /* 继承拖动时的鼠标样式 */
            background-color: transparent; /* 透明不遮挡视觉 */
        }

        /* 头部样式：兼容Tailwind，保留核心布局属性 */
        header {
            height: 60px;
            background-color: white; /* 头部底色改为白色 */
            display: flex;
            align-items: center;
            justify-content: space-between; /* 左右分布，中间自适应 */
            padding: 0 16px; /* 左右内边距，优化布局 */
            font-size: 20px;
            font-weight: bold;
            flex-shrink: 0; /* 不被压缩 */
            border-bottom: 0.5px solid #f0f0f0; /* 边框改细：0.5px */
        }

        /* 主体区域：横向排列 左面板 -> 左右滑动条 -> 右面板 */
        main {
            display: flex;
            flex: 1; /* 占满剩余高度 */
            overflow: hidden;
            background-color: white; /* 主体底色改为白色 */
        }

        /* 左侧面板：初始宽度40%，改为上下布局（上部会话区 + 下部表单区） */
        .left-panel {
            width: 40%; /* 核心：初始宽度40% */
            background-color: white; /* 左侧面板底色改为白色 */
            padding: 20px;
            overflow: hidden; /* 整体隐藏溢出，内部区域单独滚动 */
            min-width: 300px; /* 最小宽度，防止拖到消失 */
            max-width: 85vw; /* 核心：最大宽度限制为视口40%，确保初始布局不被突破 */
            transition: width 0.05s ease; /* 轻微过渡，滑动更顺滑 */
            border-right: 0.5px solid #f0f0f0; /* 边框改细：0.5px */
            display: flex;
            flex-direction: column;
            justify-content: space-between; /* 上部会话区，下部表单区 */
            gap: 20px; /* 会话区与表单区间距 */
        }

        /* -------- 新增：AI会话问答区域（左侧面板上部） -------- */
        .ai-conversation-area {
            flex: 1; /* 占满上部剩余高度 */
            overflow: auto; /* 对话内容超出时滚动 */
            display: flex;
            flex-direction: column;
            gap: 16px; /* 对话气泡间距 */
        }

        /* 对话气泡公共样式 - 宽度100% */
        .chat-bubble {
            max-width: 100%; /* 修改：气泡宽度100% */
            width: 100%; /* 确保占满容器宽度 */
            padding: 10px 14px;
            border-radius: 8px;
            font-size: 13px;
            line-height: 1.5;
        }
		
		.chat-bubble2 {
		    max-width: 100%; /* 修改：气泡宽度100% */
		    width: 100%; /* 确保占满容器宽度 */
		    padding: 10px 14px;
		    border-radius: 8px;
		    font-size: 8px;
		    line-height: 1.5;
		}

        /* 用户对话气泡（靠左，浅蓝背景）- 修改：取消靠右对齐 */
        .user-bubble {
            align-self: flex-start; /* 修改：从flex-end改为flex-start，靠左对齐 */
            background-color: #11264f;
            color: white;
        }

        /* AI对话气泡（靠左，浅灰背景） */
        .ai-bubble {
            align-self: flex-start; /* 靠左对齐 */
            background-color: #f8f9fa;
            color: #11264f;
            border: 1px solid #e9ecef;
        }

        /* 对话角色标签（气泡上方小标签） */
        .chat-role {
            font-size: 11px;
            color: #666;
            margin-bottom: 4px;
        }

        .user-role {
            text-align: left; /* 修改：从right改为left，用户标签靠左 */
            color: #0a1a3f !important; /* 新增：“我”字改为深蓝色 */
            font-weight: 500;
        }

        .ai-role {
            text-align: left; /* AI角色标签靠左 */
        }

        /* -------- 原有：AI表单区域（左侧面板下部，移除标题） -------- */
        .ai-chat-container {
            width: 100%;
            display: flex;
            flex-direction: column;
            gap: 16px;
            flex-shrink: 0; /* 表单区不被压缩 */
            padding-top: 16px;
            border-top: 0.5px solid #f0f0f0; /* 与会话区分隔 */
        }

        .ai-form {
            display: flex;
            flex-direction: column;
            gap: 16px; /* 表单元素间距，保证美观 */
        }

        /* 系统名称分组：独占一行 */
       .system-name-group {
         display: flex;
         align-items: center;
         width: 100%;
         gap: 16px; /* 各组之间的间距 */
         box-sizing: border-box;
         padding: 0;
         margin: 0;
       }
       
       .form-group {
         display: flex;
         align-items: center;
         gap: 8px; /* 组内label与输入框的间距（相互靠近） */
       }
       
       /* 项目名称输入框组占据剩余最大空间 */
       .form-group:first-child {
         flex: 1;
       }
       
       .form-input {
         width: 100%; /* 输入框尽可能占满父容器空间 */
         min-width: 0; /* 解决flex子元素无法收缩的问题 */
         padding: 6px 12px;
         box-sizing: border-box;
       }
       
       .form-select {
         width: auto; /* 自适应内容宽度 */
         padding: 6px 30px 6px 12px; /* 右侧留足够空间给下拉箭头 */
         box-sizing: border-box;
         white-space: nowrap; /* 防止选项文字换行 */
       }
	   
	   .form-select1 {
	     width: 60px; /* 自适应内容宽度 */
		 height: 36px;
	     padding: 2px 4px 2px 4px; /* 右侧留足够空间给下拉箭头 */
		 box-sizing: border-box;
		 border-radius: 6px;
		 border: 1px solid gainsboro;
		 background-color: white;
	   }

       /* 基础样式重置（可选） */
       .form-label {
         margin: 0;
         white-space: nowrap; /* 标签文字不换行 */
       }

        /* 是否首页分组：标签与单选框同行展示 */
        .home-radio-group {
            flex-shrink: 0;
			display: flex;
			flex-direction: row;
			align-items: center;
			gap: 16px; /* 与其他组保持一致间距 */
        }

        /* 单选框组：两个单选框横向排列 */
        .radio-group-wrapper {
            display: flex;
            flex-direction: row; /* 横向排列单选框 */
            gap: 16px; /* 单选框之间的间距 */
        }

        .form-label {
            font-size: 14px;
            font-weight: 500;
            color: #11264f;
            white-space: nowrap; /* 标签不换行 */
        }

        .form-input {
            padding: 8px 12px;
            border: 1px solid #e9ecef;
            border-radius: 8px;
            font-size: 13px;
            outline: none;
            transition: border-color 0.2s ease;
        }

        .form-input:focus {
            border-color: #11264f;
        }

        /* 单选框美化 */
        .radio-item {
            display: flex;
            align-items: center;
            gap: 6px;
            font-size: 13px;
            cursor: pointer;
        }

        .radio-item input[type="radio"] {
            width: 14px;
            height: 14px;
            accent-color: #11264f;
            cursor: pointer;
        }

        /* 内容要求多行文本域 */
        .content-desc-group {
            display: flex;
            flex-direction: column;
            gap: 4px;
            width: 100%;
        }

        .form-textarea {
            padding: 12px;
            border: 1px solid #e9ecef;
            border-radius: 8px;
            font-size: 13px;
            line-height: 1.5;
            min-height: 120px;
            resize: vertical;
            max-height: 200px;
            outline: none;
            transition: border-color 0.2s ease;
        }

        .form-textarea:focus {
            border-color: #11264f;
        }

        /* 提交按钮：确保文字和图标均为白色 */
        .submit-btn {
            padding: 10px 0;
            background-color: #11264f;
            color: white !important; /* 强制按钮文字（含“提交需求生成代码”）为白色 */
            border: none;
            border-radius: 8px;
            font-size: 14px;
            font-weight: 500;
            cursor: pointer;
            transition: background-color 0.2s ease;
            width: 100%;
			height: 32px;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
        }
.submit-btn span{
	color: white;
	font-weight: bold;
}
        .submit-btn i {
            color: white !important; /* 按钮图标强制白色，不受全局样式影响 */
        }

        .submit-btn:hover {
            background-color: #0a1a3f;
        }

        .submit-btn:disabled {
            background-color: #11264f;
            color: white;!important; /* 禁用时文字灰色 */
            cursor: not-allowed;
        }

        .submit-btn:disabled i {
            color: white;!important; /* 禁用时图标灰色 */
        }

        /* -------- 左侧面板样式结束 -------- */

        /* 左右滑动条（分隔左右面板）- 改细 */
        .resize-vertical {
            width: 3px; /* 从6px改为3px，更纤细 */
            background-color: #f0f0f0; /* 滑动条底色调整，适配白色主题 */
            cursor: col-resize; /* 鼠标样式：左右拖动 */
            flex-shrink: 0;
            transition: background-color 0.2s ease;
        }
        .resize-vertical:hover, .resize-vertical.active {
            background-color: #555555; /* 深灰色，无天蓝色 */
        }

        /* 右侧面板：纵向排列 上面板 -> 上下滑动条 -> 下面板（flex:1占剩余60%宽度） */
        .right-panel {
            flex: 1; /* 核心：左侧40%，右侧自动占剩余60%，实现比例布局 */
            display: flex;
            flex-direction: column;
            overflow: hidden;
            background-color: white; /* 右侧面板底色改为白色 */
        }

        /* 右侧上面板（iframe容器）：初始高度50% */
        .right-top-panel {
            height: 50%; /* 核心：初始高度50%，与下面板平分 */
            background-color: white; /* 上面板底色改为白色 */
            overflow: hidden;
            min-height: 150px; /* 最小高度 */
            transition: height 0.05s ease; /* 轻微过渡，滑动更顺滑 */
            border-bottom: 0.5px solid #f0f0f0; /* 边框改细：0.5px */
        }
        .right-top-panel iframe {
            width: 100%;
            height: 100%;
            border: none; /* 去除iframe默认边框 */
        }

        /* 上下滑动条（分隔右侧上下面板）- 改细 */
        .resize-horizontal {
            height: 3px; /* 从6px改为3px，更纤细 */
            background-color: #f0f0f0; /* 滑动条底色调整，适配白色主题 */
            cursor: row-resize; /* 鼠标样式：上下拖动 */
            flex-shrink: 0;
            transition: background-color 0.2s ease;
        }
        .resize-horizontal:hover, .resize-horizontal.active {
            background-color: #555555; /* 深灰色，无天蓝色 */
        }

        /* 右侧下面板 - 代码编辑区域：隐藏整体滚动条 */
        .right-bottom-panel {
            flex: 1; /* 核心：上面板50%，下面板自动占剩余50%，实现平分 */
            background-color: #f8f9fa; /* 代码区域使用浅灰色背景 */
            padding: 20px;
            overflow: hidden; /* 隐藏面板整体滚动条 */
            min-height: 150px; /* 最小高度 */
        }

        /* 代码编辑区域样式 */
        .code-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 10px;
            padding-bottom: 10px;
            border-bottom: 1px solid #e9ecef;
        }
        .code-title {
            font-weight: bold;
            color: #11264f;
        }
        .apply-button {
            padding: 4px 8px;
            background-color: #e9ecef;
            border: none;
            border-radius: 8px;
            cursor: pointer;
            font-size: 12px;
            display: flex;
            align-items: center;
            gap: 4px;
            transition: background-color 0.2s;
        }
        .apply-button:hover {
            background-color: #dee2e6;
        }
        .apply-button.success {
            background-color: #d3f9d8;
            color: #2b8a3e;
        }
        /* 代码编辑框样式：自带滚动条 */
       /* 代码编辑框样式：自带滚动条 */
       #codeEditor {
           width: 100%;
           height: calc(100% - 40px); /* 填满面板剩余空间 */
           max-height: calc(100% - 40px); /* 限制最大高度 */
           padding: 12px;
           border: 1px solid #e9ecef;
           border-radius: 8px;
           font-size: 13px;
           line-height: 1.5;
           background-color: white;
           resize: none;
           font-family: monospace; /* 等宽字体，适配代码编辑 */
           outline: none;
           overflow: auto; /* 代码超出时显示编辑框自身滚动条（现在会同时支持水平/垂直） */
           /* 新增核心属性 1：禁止内容自动换行，保留原始换行和空格（适配代码编辑场景） */
           white-space: pre;
           /* 新增核心属性 2：强制内容不换行（兜底，确保 white-space 生效后无意外换行） */
           word-wrap: normal;
           /* 可选：明确指定水平滚动条按需显示，与 overflow: auto 效果一致，更清晰 */
           overflow-x: auto;
       }
       
       /* ===== 滚动条美化（细滚动条）===== */
       /* 1. Webkit 内核浏览器（Chrome、Safari、Edge 新版） */
       #codeEditor::-webkit-scrollbar {
           width: 6px;    /* 垂直滚动条宽度（设置为细条） */
           height: 6px;   /* 水平滚动条高度（设置为细条） */
       }
       /* 滚动条轨道样式 */
       #codeEditor::-webkit-scrollbar-track {
           background: #f5f5f5;
           border-radius: 3px;
       }
       /* 滚动条滑块样式 */
       #codeEditor::-webkit-scrollbar-thumb {
           background: #dcdcdc;
           border-radius: 3px;
       }
       /* 滑块 hover 效果 */
       #codeEditor::-webkit-scrollbar-thumb:hover {
           background: #cccccc;
       }
       
       /* 2. Firefox 浏览器（可选） */
       #codeEditor {
           scrollbar-width: thin;  /* 细滚动条模式 */
           scrollbar-color: #dcdcdc #f5f5f5; /* 滑块颜色 轨道颜色 */
       }

        /* 底部样式 */
        footer {
            padding: 10px;
            background-color: white; /* 底部底色改为白色 */
			text-align: center;
            flex-shrink: 0; /* 不被压缩 */
            border-top: 0.5px solid #f0f0f0; /* 边框改细：0.5px */
            font-size: 14px;
        }

        /* 下拉菜单字体缩小样式 */
        .dropdown-text-sm {
            font-size: 11px; /* 比原text-sm小2号 */
        }
        .dropdown-text-xs {
            font-size: 9px; /* 比原text-xs小2号 */
        }
		
		/* 新增表单行样式，用于同行显示多个表单组 */
		.form-row {
			height: 40px;
		    display: flex;
		    justify-content: space-between;
		    align-items: center;
		    gap: 16px;
		}
		
		/* 系统框架下拉菜单组样式 */
		.framework-select-group {
		    flex-shrink: 0;
		    display: flex;
		    flex-direction: row;
		    align-items: center;
		    gap: 16px;
		}
		
		/* 下拉选择框样式 */
		.form-select {
		    padding: 8px 12px;
		    border: 1px solid #e9ecef;
		    border-radius: 8px;
		    font-size: 13px;
		    outline: none;
		    transition: border-color 0.2s ease;
		    background-color: white;
		    cursor: pointer;
		}
		
		.form-select:focus {
		    border-color: #11264f;
		}
		
		/* 禁用状态样式 */
		.form-select:disabled {
		    background-color: #f8f9fa;
		    cursor: not-allowed;
		    color: #666;
		}
		
		/* 页面描述开关组样式 */
		.page-desc-switch-group {
		    flex-shrink: 0;
		    display: flex;
		    flex-direction: row;
		    align-items: center;
		    gap: 12px; /* 与其他组保持一致间距 */
		}
		
		/* 开关样式基础 */
		.switch {
		    position: relative;
		    display: inline-block;
		    width: 36px;
		    height: 18px;
		}
		
		/* 隐藏原生checkbox */
		.switch input {
		    opacity: 0;
		    width: 0;
		    height: 0;
		}
		
		/* 开关滑块 */
		.slider {
		    position: absolute;
		    cursor: pointer;
		    top: 0;
		    left: 0;
		    right: 0;
		    bottom: 0;
		    background-color: #e9ecef;
		    transition: .2s;
		    border-radius: 24px;
		}
		
		/* 滑块圆点 */
		.slider:before {
		    position: absolute;
		    content: "";
		    height: 14px;
		    width: 14px;
		    left: 2px;
		    bottom: 2px;
		    background-color: white;
		    transition: .2s;
		    border-radius: 50%;
		}
		
		/* 选中状态 */
		input:checked + .slider {
		    background-color: #11264f;
		}
		
		input:checked + .slider:before {
		    transform: translateX(18px);
		}
		
		/* 禁用状态 */
		input:disabled + .slider {
		    opacity: 0.7;
		    cursor: not-allowed;
		}
		
		/* 加号按钮样式（与下拉框保持一致边框） */
		.add-framework-btn {
		    width: 28px;
		    height: 28px;
		    /* 核心：与form-select保持一致的边框样式 */
		    border: 1px solid #e9ecef; /* 同下拉框边框 */
		    border-radius: 8px; /* 同下拉框圆角 */
		    background-color: white;
		    color: #11264f;
		    cursor: pointer;
		    display: flex;
		    align-items: center;
		    justify-content: center;
		    transition: all 0.2s ease;
		    /* 确保与下拉框视觉对齐（可选微调） */
		    vertical-align: middle;
		}
		
		/* 悬停状态保持边框协调 */
		.add-framework-btn:hover {
		    background-color: #f5f7fa;
		    border-color: #d0d7e3; /* 悬停时略深，保持质感 */
		}
		
		/* 禁用状态与下拉框完全同步 */
		.add-framework-btn:disabled {
		    color: #666;
		    cursor: not-allowed;
		    background-color: #f8f9fa;
		    border: 1px solid #e9ecef; /* 与禁用下拉框边框一致 */
		}
		
		/* 减号按钮样式（与加号按钮保持一致） */
		.remove-framework-btn {
		    width: 28px;
		    height: 28px;
		    border: 1px solid #e9ecef; /* 与下拉框和加号按钮统一边框 */
		    border-radius: 8px;
		    background-color: white;
		    color: #11264f;
		    cursor: pointer;
		    display: flex;
		    align-items: center;
		    justify-content: center;
		    transition: all 0.2s ease;
		    margin-left: 4px; /* 与加号按钮保持小间距 */
		}
		
		/* 减号按钮悬停效果 */
		.remove-framework-btn:hover {
		    background-color: #f5f7fa;
		    border-color: #d0d7e3;
		}
		
		/* 减号按钮禁用状态 */
		.remove-framework-btn:disabled {
		    color: #666;
		    cursor: not-allowed;
		    background-color: #f8f9fa;
		    border: 1px solid #e9ecef;
		}
		
		/* 减号按钮样式（与加号按钮保持一致） */
		.remove-framework-btn1 {
		    width: 100px;
		    height: 32px;
		    border-radius: 8px;
		    background-color: red;
		    color: white;
		    cursor: pointer;
		    display: flex;
		    align-items: center;
		    justify-content: center;
		    transition: all 0.2s ease;
		    margin-left: 4px; /* 与加号按钮保持小间距 */
		}
		
		.remove-framework-btn1 p{
			color: white;
			font-weight: bold;
			font-size: 14px;
		}
		.remove-framework-btn1 i{
			color: white;
			font-weight: bold;
			margin-right: 5px;
		}
		
		/* 减号按钮悬停效果 */
		.remove-framework-btn1:hover {
		    background-color: orangered;
		    border-color: #d0d7e3;
		}
		
		/* 减号按钮禁用状态 */
		.remove-framework-btn1:disabled {
			color: white;
			font-weight: bold;
			font-size: 14px;
		    cursor: not-allowed;
		    background-color: red;
		}
		
		.status-time-container {
		    display: flex;
		    justify-content: space-between;
		    padding: 8px 12px;
		    border-radius: 8px;
		    font-size: 12px;
		    color: #666;
		    background-color: #f8f9fa;
		    border: 1px solid #e9ecef;
		}
		
		.status-info {
		    display: flex;
		    align-items: center;
		    gap: 6px;
		}
		
		.status-pending {
		    color: #ff9800;
		}
		
		.status-success {
		    color: #4caf50;
		}
		
		.status-error {
		    color: #f44336;
		}
		
		.time-info {
		    color: #666;
		}
		
		/* ai-conversation-area 滚动条样式 */
		.ai-conversation-area::-webkit-scrollbar {
		  width: 4px; /* 滚动条宽度（变细） */
		}
		
		/* 滚动条轨道 */
		.ai-conversation-area::-webkit-scrollbar-track {
		  background: #f8f9fa; /* 与AI气泡背景色协调 */
		  border-radius: 2px;
		}
		
		/* 滚动条滑块 */
		.ai-conversation-area::-webkit-scrollbar-thumb {
		  background: #e9ecef; /* 与边框色协调 */
		  border-radius: 2px;
		}
		
		/* 滑块hover状态 */
		.ai-conversation-area::-webkit-scrollbar-thumb:hover {
		  background: #d0d7e3; /* 略深于默认滑块色 */
		}
		
		/* Firefox 兼容样式 */
		.ai-conversation-area {
		  scrollbar-width: thin; /* 细滚动条 */
		  scrollbar-color: #e9ecef #f8f9fa; /* 滑块色 轨道色 */
		}
		
		.progress-container {
		  width: 100%; 
		  margin-left: auto; 
		  margin-bottom: 3px;
		}
		
		.bg-primary {
		  background-color: #11264f; /* 或其他蓝色值 */
		}
		
		/* 外层容器使用flex布局实现左右分布 */
.code-control-bar {
  display: flex;
  align-items: center; /* 垂直居中对齐 */
  justify-content: space-between; /* 左右两端分布 */
  padding: 12px 16px;
  background-color: #f5f7fa;
  border-radius: 6px 6px 0 0;
  border-bottom: 1px solid #e5e9f2;
}

/* 标题样式优化 */
.code-title {
  font-size: 16px;
  font-weight: 500;
  color: #333;
  margin: 0; /* 清除默认margin */
}

/* 按钮组容器 */
.code-buttons {
  display: flex;
  gap: 8px; /* 按钮之间的间距 */
}

/* 按钮样式优化 */
.apply-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 12px;
  background-color: #fff;
  border: 1px solid #dcdfe6;
  border-radius: 8px;
  color: #606266;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.2s ease;
}

/* 按钮图标与文字间距 */
.apply-button i {
  margin-right: 6px;
}

/* 悬停效果 */
.apply-button:hover {
  background-color: #f0f2f5;
  color: #409eff;
  border-color: #c6e2ff;
}

/* 激活状态效果 */
.apply-button:active {
  background-color: #e9e9eb;
}

.timer-display {
	color: #11264f;
	font-weight: 600;
}

.timer-display1 {
	color: #11264f;
	font-weight: 600;
}

:root {
            --lgcbb-primary-color: #11264f;
            --lgcbb-bg-color: #f8f9fa;
            --lgcbb-card-bg: #ffffff;
            --lgcbb-border-color: #dee2e6;
            --lgcbb-shadow-color: rgba(0, 0, 0, 0.1);
        }

        .lgcbb-* {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }

        .lgcbb-body {
            background-color: var(--lgcbb-bg-color);
            color: var(--lgcbb-primary-color);
            line-height: 1.6;
            padding: 20px;
        }

        .lgcbb-container {
            max-width: 1200px;
            margin: 0 auto;
        }

        .lgcbb-h1 {
            text-align: center;
            margin-bottom: 30px;
            font-size: 2.2rem;
            font-weight: 600;
        }

        .lgcbb-input-section {
            background-color: var(--lgcbb-card-bg);
            padding: 25px;
            border-radius: 10px;
            box-shadow: 0 4px 6px var(--lgcbb-shadow-color);
            margin-bottom: 30px;
        }

        .lgcbb-textarea {
            width: 100%;
            min-height: 200px;
            padding: 15px;
            border: 1px solid var(--lgcbb-border-color);
            border-radius: 5px;
            font-size: 14px;
            resize: vertical;
            margin-bottom: 15px;
            color: var(--lgcbb-primary-color);
        }

        .lgcbb-button-group {
            display: flex;
            gap: 10px;
            margin-bottom: 20px;
        }

        .lgcbb-button {
            background-color: var(--lgcbb-primary-color);
            color: white;
            border: none;
            padding: 10px 20px;
            border-radius: 5px;
            cursor: pointer;
            font-size: 12px;
            transition: background-color 0.3s;
        }

        .lgcbb-button:hover {
            background-color: #1a3a7a;
        }

        .lgcbb-button-danger {
            background-color: #dc3545;
        }

        .lgcbb-button-danger:hover {
            background-color: #bb2d3b;
        }

        .lgcbb-result-section {
            background-color: var(--lgcbb-card-bg);
            padding: 25px;
            border-radius: 10px;
            box-shadow: 0 4px 6px var(--lgcbb-shadow-color);
            margin-bottom: 30px;
        }

        .lgcbb-architecture {
            display: flex;
            flex-direction: column;
            gap: 20px;
            margin-top: 20px;
        }

        .lgcbb-node {
            background-color: var(--lgcbb-card-bg);
            border: 1px solid var(--lgcbb-border-color);
            border-radius: 8px;
            padding: 20px;
            box-shadow: 0 2px 4px var(--lgcbb-shadow-color);
            position: relative;
        }

        .lgcbb-node h3 {
            margin-bottom: 10px;
            font-size: 1.2rem;
            color: var(--lgcbb-primary-color);
        }

        .lgcbb-node p {
            margin-bottom: 8px;
            font-size: 0.95rem;
            color: #333;
        }

        .lgcbb-node .lgcbb-buttons {
            display: flex;
            gap: 10px;
            margin-top: 15px;
        }

        .lgcbb-node .lgcbb-buttons .lgcbb-button {
            padding: 4px 8px;
            font-size: 10px;
        }
		
		.lgcbb-buttons i{
			color: white;
		}
		
		.lgcbb-buttons span{
			color: white;
			font-weight: bold;
		}

        .lgcbb-children {
            margin-left: 40px;
            margin-top: 15px;
            position: relative;
        }

        .lgcbb-children::before {
            content: '';
            position: absolute;
            left: -20px;
            top: 0;
            bottom: 0;
            width: 1px;
            background-color: var(--lgcbb-primary-color);
            opacity: 0.3;
        }

        .lgcbb-node::before {
            content: '';
            position: absolute;
            left: -20px;
            top: 25px;
            width: 20px;
            height: 1px;
            background-color: var(--lgcbb-primary-color);
            opacity: 0.3;
        }

        .lgcbb-node:first-child::before {
            display: none;
        }

        .lgcbb-submitted-data {
            background-color: var(--lgcbb-card-bg);
            border: 1px solid var(--lgcbb-border-color);
            border-radius: 8px;
            padding: 20px;
            margin-top: 20px;
            max-height: 300px;
            overflow-y: auto;
        }

        .lgcbb-submitted-data h3 {
            margin-bottom: 15px;
            font-size: 1.1rem;
            color: var(--lgcbb-primary-color);
        }

        .lgcbb-data-item {
            margin-bottom: 10px;
            padding-bottom: 10px;
            border-bottom: 1px solid var(--lgcbb-border-color);
        }

        .lgcbb-data-item:last-child {
            border-bottom: none;
        }

        .lgcbb-data-item strong {
            color: var(--lgcbb-primary-color);
        }

        .lgcbb-modal {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.5);
            z-index: 1000;
            align-items: center;
            justify-content: center;
        }

        .lgcbb-modal-content {
            background-color: var(--lgcbb-card-bg);
            padding: 30px;
            border-radius: 10px;
            width: 500px;
            max-width: 90%;
			height: 80%;
            box-shadow: 0 5px 15px var(--lgcbb-shadow-color);
			overflow-y: auto;
        }

        .lgcbb-modal h3 {
            margin-bottom: 20px;
            font-size: 1.3rem;
            color: var(--lgcbb-primary-color);
        }

        .lgcbb-form-group {
            margin-bottom: 15px;
        }

        .lgcbb-form-group label {
            display: block;
            margin-bottom: 5px;
            font-weight: 500;
            color: var(--lgcbb-primary-color);
        }

        .lgcbb-form-group input,
        .lgcbb-form-group textarea,
        .lgcbb-form-group select {
            width: 100%;
            padding: 10px;
            border: 1px solid var(--lgcbb-border-color);
            border-radius: 5px;
            font-size: 14px;
            color: #333;
        }

        .lgcbb-form-group textarea {
            min-height: 100px;
            resize: vertical;
        }

        .lgcbb-modal-buttons {
            display: flex;
            gap: 10px;
            margin-top: 20px;
        }

		/* 折叠容器过渡效果 */
		#collapsibleForm {
		    overflow: hidden;
		    transition: all 0.3s ease-in-out;
		    height: 0; /* 初始折叠时高度为0（配合display:none，过渡更顺滑） */
		}
		#collapsibleForm.show {
		    display: block !important;
		    height: auto; /* 展开时高度自适应 */
		    padding: 0; /* 保持原有内边距，不额外增加 */
		}
		/* 折叠按钮图标旋转效果 */
		#collapseIcon.rotate {
		    transform: rotate(180deg);
		    transition: transform 0.3s ease;
		}
		/* ========== 手机端适配：768px以下屏幕 ========== */
		@media (max-width: 768px) {
		    /* 1. 取消body的overflow:hidden，允许手机端纵向滚动 */
		    body {
		        overflow: auto;
		        height: auto; /* 取消视口高度限制，适配内容高度 */
		    }
		
		    /* 2. 主体区域从横向排列改为纵向排列，右侧面板自动到左侧下方 */
		    main {
		        flex-direction: column;
		        overflow: visible; /* 取消隐藏溢出，适配纵向布局 */
		    }
		
		    /* 3. 左侧面板适配手机全屏宽度，取消最小/最大宽度限制 */
		    .left-panel {
		        width: 100% !important; /* 强制占满宽度（覆盖拖动后的宽度） */
		        min-width: unset; /* 取消最小宽度限制 */
		        max-width: unset; /* 取消最大宽度限制 */
		        border-right: none; /* 取消右侧边框（纵向布局无需分隔） */
		        border-bottom: 0.5px solid #f0f0f0; /* 底部加边框，分隔左右面板 */
		        padding: 16px; /* 微调内边距，适配手机 */
		        gap: 16px; /* 微调间距 */
		        margin-bottom: 10px; /* 与右侧面板留间距 */
		    }

			.ai-conversation-area{
				min-height: 500px;
			}
		
		    /* 4. 隐藏左右滑动条（纵向布局无需横向拖动） */
		    .resize-vertical {
		        display: none;
		    }
		
		    /* 5. 右侧面板适配手机全屏宽度，取消flex:1的横向占比逻辑 */
		    .right-panel {
		        width: 100%;
		        flex: none; /* 取消横向flex占比 */
		        min-height: 500px; /* 保证右侧面板基础高度，适配手机 */
		    }
		
		    /* 6. 右侧上下面板保持原有功能，仅微调内边距适配手机 */
		    .right-top-panel {
		        min-height: 600px; /* 手机端固定基础高度，仍可上下拖动调整 */
		        border-bottom: 0.5px solid #f0f0f0;
		    }
			
			.right-top-panel iframe {
				height: 600px;
				border: none; /* 去除iframe默认边框 */
			}
		
		    .right-bottom-panel {
		        padding: 16px; /* 微调内边距，适配手机 */
		    }
			
			#codeEditor{
				min-height: 600px;
			}
		
		    /* 7. 头部适配手机，缩小字体 */
		    header {
		        font-size: 18px;
		        padding: 0 12px;
		        height: 50px; /* 微调高度，适配手机 */
		    }
			
		    /* 8. 表单行适配手机：取消固定高度，允许换行，适配多元素布局 */
			.form-row {
				/* 取消固定height，改为自适应 */
				height: auto;
				display: flex;
				flex-direction: row;
				/* 允许子元素换行（核心：避免宽度不足时挤掉元素） */
				flex-wrap: wrap;
				align-items: center; /* 改为center，避免拉伸导致高度异常 */
				gap: 12px;
				width: 100%;
				/* border: 1px solid #eee; */
				box-sizing: border-box;
				/* 补充内边距，避免内容贴边 */
				padding: 8px;
			}
		
			/* 9. 系统名称分组/框架选择组适配手机：纵向排列 */
			.system-name-group {
				flex-direction: column;
				align-items: stretch;
				gap: 8px;
			}
		
			/* 统一 framework-select-group 和 framework-select-group1 样式 */
			.framework-select-group,
			.framework-select-group1 {
				/* flex-direction: row !important; */
				align-items: center !important;
				justify-content: flex-start !important;
				/* gap: 8px !important; */
				/* 每个选择组占比自适应（可根据需要调整，比如flex:1平分宽度） */
				/* flex: 1; */
				/* max-width: 180px; /* 最小宽度，避免挤太窄 */ */
			}
		
			/* 补充：强制两个分组内的标签样式统一 */
			.framework-select-group .form-label,
			.framework-select-group1 .form-label {
				white-space: nowrap !important;
				flex-shrink: 0 !important;
				/* max-width: 40px !important; */
			}
		
			/* 补充：统一两个分组内的输入框/选择框样式 */
			.framework-select-group .form-select,
			.framework-select-group .form-select1,
			.framework-select-group1 .form-select1 {
				/* max-width: unset; /* 取消200px限制，适配flex布局 */ */
				flex: 1; /* 占满分组内剩余宽度 */
				/* 颜色选择器特殊适配：调整高度和垂直对齐 */
				height: 36px; /* 和其他选择框高度统一 */
				padding: 0; /* 取消颜色选择器的内边距，避免错位 */
			}
		
			/* 10. 减号按钮1适配手机宽度 */
			.remove-framework-btn1 {
				width: 100%;
				margin-left: 0;
				margin-top: 8px;
			}
			
			/* 隐藏PC端按钮 */
			.code-buttons .desktop-only {
				display: none;
			}
		
			/* 移动端下拉触发按钮样式 */
			.mobile-dropdown-trigger {
				display: flex;
				width: 100%; /* 占满宽度，适配手机 */
				justify-content: center;
				align-items: center;
			}
		
			/* 移动端下拉菜单容器样式 */
			.mobile-dropdown-menu {
				position: absolute;
				top: 100%;
				right: 0;
				background: white;
				border: 1px solid #e9ecef;
				border-radius: 8px;
				box-shadow: 0 2px 8px rgba(0,0,0,0.1);
				z-index: 999;
				display: none; /* 默认隐藏 */
				flex-direction: column;
				width: 100%; /* 下拉菜单占满父容器宽度 */
				margin-top: 4px;
			}
		
			/* 下拉菜单项样式 */
			.mobile-dropdown-menu .dropdown-item {
				width: 100%;
				border-bottom: 1px solid #f0f0f0;
				padding: 8px 12px;
				justify-content: flex-start; /* 文字左对齐 */
			}
		
			/* 最后一个菜单项取消下边框 */
			.mobile-dropdown-menu .dropdown-item:last-child {
				border-bottom: none;
			}
		
			/* 下拉菜单展开状态 */
			.mobile-dropdown-menu.show {
				display: flex;
			}
		
			/* 给code-control-bar添加相对定位，让下拉菜单基于它定位 */
			.code-control-bar {
				position: relative;
			}

		}
		/* PC端隐藏移动端下拉触发按钮 */
		@media (min-width: 769px) {
		    .mobile-dropdown-trigger,
		    .mobile-dropdown-menu {
		        display: none !important;
		    }
		}
		
		.progress-complete-tip {
		    display: flex;
		    align-items: center;
		    gap: 4px;
		}
		.progress-error-tip {
		    display: flex;
		    align-items: center;
		    gap: 4px;
		}
		/* 适配无FontAwesome的情况 */
		.progress-complete-tip i, .progress-error-tip i {
		    margin-right: 4px;
		}
		
/* 模态框遮罩层：全屏覆盖 + 半透明背景 + 弹性居中 */
.lgcbb-modal1 {
    position: fixed; /* 固定定位，相对于视口 */
    top: 0;
    left: 0;
    width: 100vw; /* 全屏宽度 */
    height: 100vh; /* 全屏高度 */
    background-color: rgba(0, 0, 0, 0.5); /* 半透明黑色遮罩 */
    display: flex !important; /* 启用flex布局（覆盖行内display:block） */
    justify-content: center; /* 水平居中 */
    align-items: center; /* 垂直居中 */
    z-index: 9999; /* 确保在最上层 */
    overflow: auto; /* 防止内容溢出时滚动条问题 */
}

/* 模态框内容容器：白色背景 + 圆角 + 内边距 + 阴影 */
.lgcbb-modal-content1 {
    background-color: #fff;
    border-radius: 8px;
    padding: 20px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    width: 400px !important; /* 固定宽度（保留你的行内样式） */
    box-sizing: border-box; /* 内边距不影响宽度 */
}

/* 表单组样式优化（可选，提升美观度） */
.lgcbb-form-group {
    margin-bottom: 15px;
}
.lgcbb-form-group label {
    display: block;
    margin-bottom: 5px;
    font-weight: 500;
}
.lgcbb-form-group input,
.lgcbb-form-group select,
.lgcbb-form-group textarea {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
    box-sizing: border-box;
}
.lgcbb-button1 {
	width: 100%;
    padding: 8px 16px;
    background-color: #11264f;
    color: #fff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}
.lgcbb-button1:hover {
    background-color: #0056b3;
}
.lgcbb-modal-buttons1 {
    display: flex;
    justify-content: center;
    margin-top: 20px;
}


 /* 我的工程弹窗容器（默认隐藏） */
        #myProjectModal {
            position: fixed;
            top: 0;
            left: 0;
            width: 100vw;
            height: 100vh;
            background-color: rgba(0, 0, 0, 0.5); /* 半透明遮罩 */
            z-index: 9999;
            display: none; /* 默认隐藏 */
            align-items: center;
            justify-content: center;
            padding: 20px;
        }

        /* 弹窗内容区（白色卡片，适配原页面样式） */
        #projectModalContent {
            width: 100%;
            max-width: 800px;
            background-color: white;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
            overflow: hidden;
            border: 0.5px solid #f0f0f0;
        }
		
		#myProjectModal1 {
		    position: fixed;
		    top: 0;
		    left: 0;
		    width: 100vw;
		    height: 100vh;
		    background-color: rgba(0, 0, 0, 0.5); /* 半透明遮罩 */
		    z-index: 9999;
		    display: none; /* 默认隐藏 */
		    align-items: center;
		    justify-content: center;
		    padding: 20px;
		}
		
		/* 弹窗内容区（白色卡片，适配原页面样式） */
		#projectModalContent1 {
		    width: 100%;
		    max-width: 800px;
		    background-color: white;
		    border-radius: 8px;
		    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
		    overflow: hidden;
		    border: 0.5px solid #f0f0f0;
		}

        /* 弹窗头部（标题+关闭按钮） */
        .project-modal-header {
            padding: 16px 20px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            border-bottom: 0.5px solid #f0f0f0;
            font-size: 18px;
            font-weight: bold;
        }

        /* 关闭按钮（×） */
        .close-modal-btn {
            width: 32px;
            height: 32px;
            border-radius: 50%;
            background-color: #f8f9fa;
            border: none;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 16px;
            transition: background-color 0.2s ease;
        }
        .close-modal-btn:hover {
            background-color: #e9ecef;
        }

        /* 检索区域 */
        .project-search-area {
            padding: 20px;
            border-bottom: 0.5px solid #f0f0f0;
            display: flex;
            gap: 12px;
            flex-wrap: wrap;
        }

        /* 检索输入框（与原页面表单输入框样式统一） */
        #projectSearchInput {
            flex: 1;
            min-width: 200px;
            padding: 8px 12px;
            border: 1px solid #e9ecef;
            border-radius: 8px;
            font-size: 13px;
            outline: none;
            transition: border-color 0.2s ease;
        }
        #projectSearchInput:focus {
            border-color: #11264f;
        }
		
		#projectSearchInput1 {
		    flex: 1;
		    min-width: 200px;
		    padding: 8px 12px;
		    border: 1px solid #e9ecef;
		    border-radius: 8px;
		    font-size: 13px;
		    outline: none;
		    transition: border-color 0.2s ease;
		}
		#projectSearchInput1:focus {
		    border-color: #11264f;
		}

        /* 检索按钮（与原页面按钮风格统一） */
        #projectSearchBtn {
            padding: 8px 16px;
            background-color: #11264f;
            color: white !important;
            border: none;
            border-radius: 8px;
            font-size: 13px;
            font-weight: 500;
            cursor: pointer;
            transition: background-color 0.2s ease;
            display: flex;
            align-items: center;
            gap: 6px;
        }
        #projectSearchBtn i, #projectSearchBtn span {
            color: white !important;
        }
        #projectSearchBtn:hover {
            background-color: #0a1a3f;
        }
		
		/* 检索按钮（与原页面按钮风格统一） */
		#projectSearchBtn1 {
		    padding: 8px 16px;
		    background-color: #11264f;
		    color: white !important;
		    border: none;
		    border-radius: 8px;
		    font-size: 13px;
		    font-weight: 500;
		    cursor: pointer;
		    transition: background-color 0.2s ease;
		    display: flex;
		    align-items: center;
		    gap: 6px;
		}
		#projectSearchBtn1 i, #projectSearchBtn1 span {
		    color: white !important;
		}
		#projectSearchBtn1:hover {
		    background-color: #0a1a3f;
		}

        /* 工程列表容器lgcbb-modal1 */
        .project-list-container {
            max-height: 500px;
            overflow-y: auto;
            padding: 0 20px;
        }

        /* 工程列表无数据提示 */
        .project-empty-tip {
            padding: 40px 20px;
            text-align: center;
            color: #666;
            font-size: 14px;
        }

        /* 工程列表行样式 */
        .project-item {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 16px 0;
            border-bottom: 0.5px solid #f0f0f0;
            font-size: 13px;
        }

        /* 工程信息（序号+名称+修改时间） */
        .project-info {
            display: flex;
            align-items: center;
            gap: 16px;
            flex: 1;
        }

        /* 序号样式 */
        .project-index {
            width: 24px;
            height: 24px;
            background-color: #f8f9fa;
            border-radius: 4px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: 500;
        }

        /* 工程名称+时间容器 */
        .project-name-time {
            display: flex;
            flex-direction: column;
            gap: 4px;
        }

        /* 工程名称 */
        .project-name {
            font-weight: 500;
        }

        /* 修改时间 */
        .project-modify-time {
            font-size: 11px;
            color: #666;
        }

        /* 操作按钮组 */
        .project-action-btns {
            display: flex;
            gap: 8px;
        }

        /* 操作按钮（编辑/地址/删除，与原页面按钮风格统一） */
        .project-action-btn {
            padding: 4px 8px;
            border: 1px solid #e9ecef;
            border-radius: 8px;
            font-size: 12px;
            cursor: pointer;
            transition: all 0.2s ease;
            display: flex;
            align-items: center;
            gap: 4px;
        }
        /* 编辑按钮 */
        .edit-btn {
            background-color: #f8f9fa;
            color: #11264f;
        }
        .edit-btn:hover {
            background-color: #e9ecef;
        }
        /* 地址按钮 */
        .address-btn {
            background-color: #f8f9fa;
            color: #11264f;
        }
        .address-btn:hover {
            background-color: #e9ecef;
        }
        /* 删除按钮 */
        .delete-btn {
            background-color: #f8f9fa;
            color: #f44336;
            border-color: #fadbd8;
        }
        .delete-btn:hover {
            background-color: #fadbd8;
        }

        /* 滚动条样式（与原页面统一） */
        .project-list-container::-webkit-scrollbar {
            width: 4px;
        }
        .project-list-container::-webkit-scrollbar-track {
            background: #f8f9fa;
            border-radius: 2px;
        }
        .project-list-container::-webkit-scrollbar-thumb {
            background: #e9ecef;
            border-radius: 2px;
        }
        .project-list-container::-webkit-scrollbar-thumb:hover {
            background: #d0d7e3;
        }
        .project-list-container {
            scrollbar-width: thin;
            scrollbar-color: #e9ecef #f8f9fa;
        }

        /* 移动端适配（768px以下） */
        @media (max-width: 768px) {
            .project-item {
                flex-direction: column;
                align-items: flex-start;
                gap: 12px;
            }
            .project-info {
                width: 100%;
            }
            .project-action-btns {
                width: 100%;
                justify-content: flex-start;
            }
            .project-modal-header {
                font-size: 16px;
                padding: 12px 16px;
            }
            .project-search-area {
                padding: 16px;
            }
        }

/* 临时滚动条lgcbb-modal */
/* 对话气泡公共样式 - 宽度100%*/
.chat-bubble1 {
    max-width: 100%; /* 气泡宽度100% */
    width: 100%; /* 确保占满容器宽度 */
    padding: 10px 14px;
    border-radius: 8px;
    font-size: 13px;
    line-height: 1.5;
    /* 新增核心样式：固定高度+滚动控制 */
    box-sizing: border-box; /* 保证padding包含在高度内，计算更精准 */
    height: calc(13px * 1.5 * 4); /* 计算4行文字高度：字号*行高*行数 */
    overflow-y: auto; /* 内容超过高度时显示竖向滚动条，否则不显示 */
    overflow-x: hidden; /* 隐藏横向滚动条，避免文字溢出导致的横向滚动 */
    white-space: normal; /* 确保文字正常换行，不挤压 */
}

/* AI对话气泡（靠左，浅灰背景） */
.ai-bubble1 {
    align-self: flex-start; /* 靠左对齐 */
    background-color: #f8f9fa;
    color: #11264f;
    border: 1px solid #e9ecef;
}


/* 协议同意区域整体样式 */
.protocol-agree-area {
    margin-top: 12px;
}

/* 协议复选框+文字容器 */
.protocol-label {
    display: flex;
    align-items: center;
    font-size: 12px;
    cursor: pointer;
    color: #666;
}

/* 协议复选框样式 */
.protocol-checkbox {
    width: 14px;
    height: 14px;
    margin-right: 6px;
    cursor: pointer;
}

/* 协议链接样式 */
.protocol-link {
    color: #11264f;
    text-decoration: none;
    margin-left: 2px;
}
.protocol-link:hover {
    text-decoration: underline;
}

/* 协议弹窗遮罩层 */
.protocol-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    display: none; /* 默认隐藏 */
    align-items: center;
    justify-content: center;
    z-index: 10000;
}

/* 协议弹窗内容容器 */
.protocol-modal-content {
    background: #fff;
    border-radius: 8px;
    width: 600px;
    max-height: 80vh;
    overflow-y: auto;
    padding: 16px;
    box-sizing: border-box;
}

/* 协议弹窗头部 */
.protocol-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid #eee;
}

/* 协议弹窗标题 */
.protocol-modal-title {
    font-size: 14px;
    font-weight: bold;
    margin: 0;
    color: #333;
}

/* 协议弹窗关闭按钮 */
.protocol-close-btn {
    background: none;
    border: none;
    font-size: 18px;
    color: #999;
    cursor: pointer;
    padding: 0;
    width: 24px;
    height: 24px;
    line-height: 24px;
    text-align: center;
}
.protocol-close-btn:hover {
    color: #333;
}

/* 协议弹窗内容区 */
.protocol-modal-body {
    font-size: 12px;
    line-height: 1.8;
    color: #666;
}

/* 触发按钮样式 */
#showAlertBtn {
    padding: 10px 20px;
    font-size: 16px;
    cursor: pointer;
    margin: 50px;
    background-color: #409eff;
    color: #fff;
    border: none;
    border-radius: 4px;
    transition: background-color 0.3s;
}

#showAlertBtn:hover {
    background-color: #66b1ff;
}

/* 提示框遮罩层 */
.custom-alert-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5); /* 半透明黑色遮罩 */
    display: none; /* 默认隐藏 */
    justify-content: center;
    align-items: center;
    z-index: 9999; /* 确保在最上层 */
}

/* 提示框主体 */
.custom-alert-box {
    width: 350px;
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
    overflow: hidden;
}

/* 提示框标题 */
.custom-alert-title {
    padding: 15px 20px;
    font-size: 14px;
    font-weight: bold;
    border-bottom: 1px solid #eee;
    color: #333;
}

/* 提示框内容 */
.custom-alert-content {
    padding: 20px;
    font-size: 12px;
    color: #666;
    line-height: 1.5;
}

/* 提示框按钮 */
.custom-alert-btn {
    width: 100%;
    padding: 10px;
    font-size: 12px;
    background-color: #11264f;
    color: #fff;
    border: none;
    border-top: 1px solid #eee;
    cursor: pointer;
    transition: background-color 0.3s;
}

.custom-alert-btn:hover {
    background-color: #11264f;
}

/* 响应式适配 */
@media (max-width: 400px) {
    .custom-alert-box {
        width: 90%;
    }
}

/* 加载提示样式：固定在屏幕中央 */
    .loading-overlay {
      position: fixed;
      top: 0;
      left: 0;
      width: 100vw;
      height: 100vh;
      background-color: rgba(0, 0, 0, 0.1); /* 半透明背景 */
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 20px;
      color: #11264f;
      z-index: 9999; /* 确保在最上层 */
      opacity: 0;
      visibility: hidden;
      transition: all 0.3s ease; /* 过渡动画更丝滑 */
    }
    /* 显示加载提示的类 */
    .loading-overlay.show {
      opacity: 1;
      visibility: visible;
    }
    /* 加载图标样式 */
    .loading-overlay i {
      margin-right: 8px;
      font-size: 24px;
      color: #11264f;
    }