/* 全局选择器，应用于所有元素 */
* {
    margin: 0; /* 清除所有元素的外边距 */
    padding: 0; /* 清除所有元素的内边距 */
    box-sizing: border-box; /* 设置盒模型为border-box，使宽高包含边框和内边距[2](@ref) */
    /* font-family: "Segoe UI", "Microsoft YaHei", sans-serif; 设置字体栈，优先使用Segoe UI，回退到微软雅黑和无衬线字体 */
}

/* 设置网页主体样式 */
body {
    background-color: #f0f4f8; /* 浅蓝色背景 */
    color: #2d3748; /* 深灰色文字 */
    line-height: 1; /* 行高为字体大小的1倍 */
    padding: 0px; /* 主体四周添加4px内边距 */
}

/* 主内容容器 */
.syntax-container {
    max-width: 1300px; /* 最大宽度限制 */
    margin: 0px auto; /* 上下10px外边距，水平居中 */
    background: white; /* 白色背景 */
    /* border-radius: 10px; 10px圆角 */
    /* box-shadow: 0 3px 10px rgba(0, 0, 0, 0.08); 添加轻微阴影 */
    overflow: hidden; /* 隐藏溢出内容 */
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* 添加过渡动画效果 */
}


/* 头部区域样式 */
.syntax-header {
    background:  #409EFF; /* 蓝色渐变背景 */
    color: white; /* 白色文字 */
    padding: 0px 0px; /* 无内边距 */
    display: flex; /* 启用Flex布局 */
    align-items: center; /* 垂直居中 */
    justify-content: space-between; /* 两端对齐 */
    position: relative; /* 相对定位 */
}

/* 头部底部的装饰线 */
.syntax-header::after {
    content: ''; /* 伪元素内容 */
    position: absolute; /* 绝对定位 */
    bottom: 0; /* 定位到底部 */
    left: 0; /* 定位到左侧 */
    width: 100%; /* 宽度100% */
    height: 0px; /* 高度3px */
    background: linear-gradient(90deg, #43a047, #1e88e5, #e53935); /* 三色渐变 */
    opacity: 0.7; /* 70%透明度 */
}

/* 头部左侧区域 */
.header-left {
    display: flex; /* 启用Flex布局 */
    align-items: center; /* 垂直居中 */
    gap: 0px; /* 元素间无间隙 */
}

/* 应用图标样式 */
.app-icon {
    width: 12px; /* 宽度12px */
    height: 30px; /* 高度12px */
    background-color: #409EFF; /* 半透明白色背景 */
    /* border-radius: 6px; 圆形 */
    display: flex; /* 启用Flex布局 */
    align-items: center; /* 垂直居中 */
    justify-content: center; /* 水平居中 */
    font-size: 20px; /* 字体大小10px */
    color: white; /* 白色文字 */
    /* backdrop-filter: blur(2px); 背景模糊效果 */
    /* box-shadow: 0 3px 5px rgba(0, 0, 0, 0.08); 轻微阴影 */
}

/* 应用标题样式 */
.app-title h1 {
    font-size: 20px; /* 字体大小10px */
    font-weight: 600; /* 中等加粗 */
    letter-spacing: 0.4px; /* 字符间距0.4px */
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.15); /* 文字阴影 */
}



/* 主体内容区域 */
.syntax-body {
    padding: 20px; /* 内边距10px */
}

/* 信息组容器 */
.info-group {
    margin-bottom: 5px; /* 底部外边距20px */
    background: #f9fafc; /* 浅灰色背景 */
    border-radius: 8px; /* 8px圆角 */
    padding: 5px; /* 内边距16px */
    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.02); /* 轻微阴影 */
}

/* 信息组标题区域 */
.info-group-title {
    display: flex; /* 启用Flex布局 */
    align-items: center; /* 垂直居中 */
    margin-bottom: 8px; /* 底部外边距14px */
    padding-bottom: 8px; /* 底部内边距10px */
    border-bottom: 1px solid #e2e8f0; /* 底部1px浅灰色边框 */
}

/* 信息组标题文字样式 */
.info-group-title h2 {
    font-size: 16px; /* 字体大小16px */
    color: #000000; /* 蓝色文字 */
    font-weight: 600; /* 中等加粗 */
    padding-left: 10px; /* 左侧内边距10px */
}

/* 输入组样式 */
.input-group {
    margin-bottom: 4px; /* 底部外边距16px */
}

/* 输入标签样式 */
.input-group label {
    display: block; /* 块级元素 */
    margin-bottom: 4px; /* 底部外边距8px */
    color: #4a5568; /* 深灰色文字 */
    font-size: 14px; /* 字体大小14px */
    font-weight: 500; /* 中等加粗 */
}

/* 输入字段通用样式 */
.input-field {
    width: 100%; /* 宽度100% */
    padding: 2px 2px; /* 内边距 */
    border: 1px solid #cbd5e0; /* 1px浅灰色边框 */
    border-radius: 7px; /* 7px圆角 */
    font-size: 14px; /* 字体大小14px */
    transition: all 0.3s; /* 所有属性0.3秒过渡 */
    background: white; /* 白色背景 */
    color: #2d3748; /* 深灰色文字 */
}

/* 输入字段聚焦状态 */
.input-field:focus {
    border-color: #1e88e5; /* 边框变为蓝色 */
    outline: none; /* 移除默认轮廓线 */
    box-shadow: 0 0 0 2px rgba(66, 153, 225, 0.12); /* 添加蓝色发光效果 */
}

/* 文本域特殊样式 */
.input-field.textarea {
    min-height: 30px; /* 最小高度85px */
    resize: vertical; /* 允许垂直调整大小 */
    font-family: 'Consolas', monospace; /* 等宽字体 */
    padding: 6px; /* 内边距14px */
    line-height: 1.5; /* 行高1.6倍 */
    font-size: 13.5px; /* 字体大小13.5px */
}

/* 结果显示区域 */
.result-display {
    background: linear-gradient(to right, #f7fafc, #edf2f7); /* 左右渐变背景 */
    border: 1px solid #e2e8f0; /* 1px浅灰色边框 */
    border-radius: 8px; /* 8px圆角 */
    padding: 18px; /* 内边距18px */
    margin: 9px 0; /* 上下外边距18px */
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.03); /* 内阴影 */
}

/* 结果项样式 */
.result-item {
    margin-bottom: 14px; /* 底部外边距14px */
    padding-bottom: 14px; /* 底部内边距14px */
    border-bottom: 1px dashed #e2e8f0; /* 底部1px虚线边框 */
}

/* 最后一个结果项特殊处理 */
.result-item:last-child {
    margin-bottom: 0; /* 无底部外边距 */
    padding-bottom: 0; /* 无底部内边距 */
    border-bottom: none; /* 无底部边框 */
}

/* 结果标签样式 */
.result-label {
    color: #718096; /* 中灰色文字 */
    font-size: 14px; /* 字体大小14px */
    margin-bottom: 6px; /* 底部外边距6px */
    font-weight: 500; /* 中等加粗 */
}

/* 结果值样式 */
.result-value {
    font-size: 16px; /* 字体大小16px */
    font-weight: 600; /* 中等加粗 */
    color: #2d3748; /* 深灰色文字 */
}

/* 结果值中的高亮部分 */
.result-value .highlight {
    color: #1e88e5; /* 蓝色文字 */
    font-weight: 700; /* 加粗 */
    font-size: 16px; /* 字体大小16px */
    letter-spacing: 0.4px; /* 字符间距0.4px */
}



/* 操作按钮容器 */
.action-buttons {
    display: flex; /* 启用Flex布局 */
    justify-content: center; /* 水平居中 */
    align-items: center; /*垂直居中*/
    margin-top: 10px; /* 顶部外边距20px */
    gap: 15px; /* 按钮间距15px */
    height: auto; /* 自适应高度 */
    padding: 10px 0; /* 添加垂直内边距 */
}

/* 操作按钮通用样式 */
.action-btn {
    padding: 6px 15px; /* 内边距 */
    border: none; /* 无边框 */
    border-radius: 4px; /* 7px圆角 */
    font-size: 12px; /* 字体大小15px */
    font-weight: 600; /* 中等加粗 */
    cursor: pointer; /* 鼠标指针为手型 */
    /* transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); 自定义缓动过渡 */
    display: flex; /* 启用Flex布局 */
    align-items: center; /* 垂直居中 */
    justify-content: center; /* 水平居中 */
    min-width: 120px; /* 最小宽度120px */
    letter-spacing: 4px; /* 字符间距4px */
    box-shadow: 0 3px 5px rgba(0, 0, 0, 0.06); /* 轻微阴影 */
}

/* 操作按钮图标 */
.action-btn i {
    margin-right: 8px; /* 右侧外边距8px */
    font-size: 16px; /* 字体大小16px */
}

/* 主要按钮样式 */
.btn-primary {
    background: linear-gradient(to right,#409EFF , #409EFF);
    color: white; /* 白色文字 */
    position: relative; /* 相对定位 */
    overflow: hidden; /* 隐藏溢出内容 */

}


/* 主要按钮悬停效果 */
.btn-primary:hover {
    background: linear-gradient(to right, #2196f3, #1565c0); /* 更亮的蓝色渐变 */
    box-shadow: 0 5px 10px rgba(33, 150, 243, 0.25); /* 增加阴影 */
    /* transform: translateY(-2px); 向上移动2px */
}

/* 主要按钮悬停时伪元素动画 */
.btn-primary:hover::after {
    left: 140%; /* 移动到右侧140%位置 */
}

/* 默认按钮样式 */
.btn-default {
    background: #f7fafc; /* 浅灰色背景 */
    color: #4a5568; /* 深灰色文字 */
    border: 1px solid #cbd5e0; /* 1px浅灰色边框 */
}

/* 默认按钮悬停效果 */
.btn-default:hover {
    background: white; /* 白色背景 */
    border-color: #a0aec0; /* 边框颜色加深 */
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.06); /* 添加阴影 */
    /* transform: translateY(-2px); 向上移动2px */
}

/* 标记控制按钮容器 */
.mark-controls {
    display: grid; /* 启用Grid布局 */
    grid-template-columns: repeat(4, minmax(140px, 1fr)); /* 自适应列 */
    gap: 12px; /* 元素间距12px */
    margin-top: 10px; /* 顶部外边距18px */
}

/* 标记按钮样式 */
.mark-btn {
    display: inline-block;
    padding: 4px 4px;
    font-size: 13px;
    border: 0.1px solid #dcdfe6;
    border-radius: 4px;
    cursor: pointer;
    
    background: #ECF5FF;
    border-color: #9ccaf7;
    color: #409EFE;
    letter-spacing: 3px; /* 添加微小间距 */
    font-weight: 500;  /* 加粗效果 */  
    text-align: center;
}


/* 标记按钮悬停效果 */
.mark-btn:hover {
    background: #409EFE;
    border-color: #409EFF;
    color:#ffffff;
}

/* 标记按钮图标 */
.mark-btn i {
    font-size: 13px; /* 字体大小16px */
}

/* 光标指示器样式 */
.cursor-indicator {
    position: absolute; /* 绝对定位 */
    width: 2px; /* 宽度2px */
    height: 18px; /* 高度18px */
    background-color: #e53935; /* 红色背景 */
    pointer-events: none; /* 不响应鼠标事件 */
    z-index: 100; /* 高z-index确保显示在最上层 */
    border-radius: 1px; /* 轻微圆角 */
    box-shadow: 0 0 2px rgba(229, 57, 53, 0.7); /* 红色发光效果 */
}

/* 标记对话框样式 */
.mark-dialog {
    border-radius: 10px; /* 10px圆角 */
    overflow: hidden; /* 隐藏溢出内容 */
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15); /* 明显阴影 */
    border: none; /* 无边框 */
}
.connector-dialog{
    border-radius: 10px; /* 10px圆角 */
    /* overflow: hidden; 隐藏溢出内容 */
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15); /* 明显阴影 */
    border: none; /* 无边框 */
}

/* 对话框头部样式 */
.mark-dialog-header, .connector-dialog-header {
    background: linear-gradient(135deg, #1e88e5, #1565c0); /* 蓝色渐变背景 */
    border:none !important;
    color: white; /* 白色文字 */
    padding: 5px 8px; /* 内边距 */
    font-size: 18px; /* 字体大小18px */
    font-weight: 600; /* 中等加粗 */
    display: flex; /* 启用Flex布局 */
    align-items: center; /* 垂直居中 */
    gap: 10px; /* 元素间距10px */
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.15); /* 文字阴影 */
}

/* 对话框头部图标 */
.mark-dialog-header i, .connector-dialog-header i {
    font-size: 24px; /* 字体大小24px */
}

/* 对话框主体区域 */
.mark-dialog-body, .connector-dialog-body {
    border:none  !important;
    padding: 0px 0px; /* 内边距20px */
    background: #f8fafc; /* 浅灰色背景 */
}

/* 标记选项容器 */
.mark-options {
    display: grid; /* 启用Grid布局 */
    grid-template-columns: repeat(auto-fit, minmax(18px, 1fr)); /* 自适应列 */
    gap: 4px; /* 元素间距4px */
    margin-top: 4px; /* 顶部外边距4px */
}

/* 标记选项按钮 */
.mark-option {
    padding: 14px 8px; /* 内边距 */
    background: #e3f2fd; /* 浅蓝色背景 */
    border: 1px solid #bbdefb; /* 1px浅蓝色边框 */
    border-radius: 7px; /* 7px圆角 */
    color: #1976d2; /* 蓝色文字 */
    cursor: pointer; /* 鼠标指针为手型 */
    text-align: center; /* 文字居中 */
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); /* 自定义缓动过渡 */
    font-size: 14px; /* 字体大小14px */
    font-weight: 500; /* 中等加粗 */
}

/* 标记选项悬停效果 */
.mark-option:hover {
    background: #bbdefb; /* 加深背景色 */
    border-color: #90caf9; /* 加深边框色 */
    transform: translateY(-3px) scale(1.02); /* 上移并轻微放大 */
    box-shadow: 0 6px 12px rgba(25, 118, 210, 0.15); /* 添加蓝色阴影 */
}


/* 响应式设计：屏幕宽度小于768px时的调整 */
@media (max-width: 768px) { /* 媒体查询，针对小屏幕设备[6](@ref) */
    .syntax-container {
        margin: 8px auto; /* 减小外边距 */
    }
    
    .syntax-body {
        padding: 16px; /* 调整内边距 */
    }
    
    .action-buttons {
        flex-direction: column; /* 垂直排列按钮 */
        gap: 10px; /* 按钮间距10px */
    }
    
    .action-btn {
        width: 100%; /* 按钮宽度100% */
        padding: 12px; /* 调整内边距 */
    }
}