/*临时区边框*/
/*.section-custom, .container {*/
    /*border: 1px solid red; !* 临时边框以定位分隔线 *!*/
/*}*/

/* 全局样式：设置字体和背景 */
html {
    /*height: 100%; !* 确保 html 覆盖整个视口 *!*/

    height: auto;  /* 或 min-height: 100%; 但避免 100% */
    animation: bgshift 100s infinite alternate ease-in-out;  /* 移到 html */
}

body {
    min-height: 100vh;  /* 最小视口高，确保不短于屏幕 */
    height: auto;       /* 关键：允许 body 随内容无限扩展，支持全页面 sticky */
    font-family: KaiTi, STKaiti, serif; /* 楷体字体 */
    color: #ffffff; /* 白色文字 */
    margin: 0;  /* 确保无默认 margin */
    background: inherit;  /* 继承 html 背景 */

    /*position: relative;  !* 必须，否则 ::before 和 ::after 绝对定位无参照 *!*/
}

/*!* 网格叠加 *!*/
/*body::before {*/
    /*content: "";*/
    /*position: absolute;*/
    /*inset: 0;*/

    /*!* 两条方向的线条 *!*/
    /*background-image:*/
            /*linear-gradient(rgba(255, 200, 255, 0.2) 1px, transparent 0.2px), !* 横线 *!*/
            /*linear-gradient(90deg, rgba(0, 200, 255, 0.2) 1px, transparent 0.2px); !* 竖线 *!*/

    /*background-size: 160px 160px; !* 网格密度，可以调小看更密集 *!*/
    /*pointer-events: none;*/
    /*z-index: 1; !* 网格在背景上方，但低于扫描线 *!*/
/*}*/

/* 扫描线 */
/*body::after {*/
    /*content: "";*/
    /*position: absolute;*/
    /*inset: 0;*/

    /*!* 扫描线渐变：上透明 → 中亮 → 下透明 *!*/
    /*background: linear-gradient(*/
            /*to bottom,*/
            /*rgba(0, 255, 200, 0.0) 0%,*/
            /*rgba(0, 255, 200, 0.1) 40%,  !* 调高透明度让线明显 *!*/
            /*rgba(0, 255, 200, 0.1) 60%,  !* 调宽线条范围 *!*/
            /*rgba(0, 255, 200, 0.0) 100%*/
    /*);*/

    /*animation: scan 1s linear infinite;*/
    /*z-index: 10; !* 扫描线覆盖网格 *!*/
/*}*/

/*!* 扫描线移动动画 *!*/
/*@keyframes scan {*/
    /*0%   { transform: translateY(-100%); }*/
    /*100% { transform: translateY(100%); }*/
/*}*/

/* 背景颜色动态变化（外圈光色，降低亮度） */
@keyframes bgshift {

    0%   {background: radial-gradient(circle at center,#003344 0%,rgba(0,128,255,0.8) 60%,rgba(0,255,200,0.6) 90%,rgba(255,255,150,0.5) 100%)fixed;}
    15%  {background: radial-gradient(circle at 30% 40%,#332200 0%,rgba(255,128,0,0.7) 60%,rgba(255,200,0,0.5) 90%,rgba(255,255,180,0.4) 100%)fixed;}
    30%  {background: radial-gradient(circle at 70% 30%,#002233 0%,rgba(0,200,255,0.7) 60%,rgba(180,0,255,0.5) 90%,rgba(255,100,200,0.5) 100%)fixed;}
    45%  {background: radial-gradient(circle at 50% 70%,#331a00 0%,rgba(255,80,0,0.7) 60%,rgba(255,180,0,0.5) 90%,rgba(255,220,180,0.4) 100%)fixed;}
    /*60%  {background: radial-gradient(circle at 80% 60%,#002b2b 0%,rgba(0,255,180,0.7) 60%,rgba(0,180,255,0.5) 90%,rgba(150,255,220,0.4) 100%)fixed;}*/
    75%  {background: radial-gradient(circle at 20% 80%,#330033 0%,rgba(180,0,255,0.7) 60%,rgba(255,0,180,0.5) 90%,rgba(255,150,255,0.4) 100%)fixed;}
    100% {background: radial-gradient(circle at center,#003344 0%,rgba(0,128,255,0.8) 60%,rgba(0,255,200,0.6) 90%,rgba(255,255,150,0.5) 100%)fixed;}
}


/* 背景动态动画 */
body {
    animation: bgshift 100s infinite alternate ease-in-out;
}

/* 导航栏样式：透明背景，白色文本 */
.navbar-custom {
    /*background: transparent; !* 透明背景，继承 body 渐变 *!*/
    background: radial-gradient(circle at center, #000 0%, rgba(0, 32, 64, 0.8) 40%, rgba(0, 64, 128, 0.5) 70%, rgba(0, 100, 160, 0.6) 100% );
    position: sticky;
    top: 0;
    z-index: 2000; /* 提高 z-index，高于其他元素 */

    margin-top: 0 !important;
    width: 100%;
    height: 80px;
}
.navbar-brand img.logo-img {
    width: 64px; /* Logo 显示为 32x32px */
    height: 64px;
    /*max-width: 32px; !* 防止溢出 *!*/
    /*max-height: 32px;*/
    margin-right: 0px; /* 与标题间距 */
    vertical-align: middle; /* 垂直居中 */
    object-fit: contain; /* 64x64px 缩放至 32x32px 不失真 */
    /*display: block; !* 稳定渲染 *!*/
}
.navbar-brand .navbar-title {
    color: #ffffff !important; /* 标题强制白色 */
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5); /* 阴影增强可读性 */
    font-size: 2.0rem; /* 标题字体大小 24px */
    vertical-align: middle; /* 与 Logo 垂直对齐 */

}
.navbar-nav .nav-link {
    color: #ffffff !important; /* 导航链接强制白色 */
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.7); /* 阴影增强可读性 */
    font-size: 1.5rem; /* 导航链接字体大小 16px，保持协调 */
}
.navbar-nav .nav-link:hover {
    color: #e0e0e0 !important; /* 悬停时略灰，增加交互感 */
}

/* Jumbotron 样式：核心功能介绍区的背景和布局 */
.jumbotron-custom {
    background: transparent; /* Jumbotron 背景透明，继承 body 渐变 */
    padding: 4rem 1rem; /* 上下 4rem（约 64px），左右 1rem，参考 index.html 的 py-16 */
    /*color: #ffffff; !* 文本默认白色 *!*/
}
.jumbotron-text {
    background: transparent;
    /*background: rgba(255, 255, 255, 0.8); !* 半透明白色背景，模仿 index.html 的卡片效果 *!*/
    padding: 0.5rem 1rem; /* 内边距，确保文本区域舒适 */
    border-radius: 5px; /* 圆角，增加美观 */
    display: inline-block; /* 使背景适应文本宽度 */
    color: #000000; /* 文本黑色，增强对比 */
}
.jumbotron-list {
    background: transparent;
    /*background: rgba(255, 255, 255, 0.8); !* 功能列表项半透明白色背景 *!*/
    padding: 0.5rem 1rem; /* 内边距，与 jumbotron-text 一致 */
    border-radius: 5px; /* 圆角 */
    margin-bottom: 0.5rem; /* 列表项间距 */
    color: #000000; /* 列表文本黑色 */
}

/* 核心功能列表样式：控制 Jumbotron 中功能列表的布局和对齐 */
.list-group-item {
    list-style: disc; /* 列表项前显示圆点 */
    padding: 0.5rem 1rem; /* 内边距 */
    border: none; /* 无边框，简洁 */
    font-size: 1.1em; /* 字体稍大，增强可读性 */
    display: flex; /* 弹性布局，确保标题和描述水平排列 */
    align-items: flex-start; /* 垂直顶部对齐 */
    justify-content: flex-start; /* 水平左对齐 */
}
.list-group-flush {
    padding-left: 2rem; /* 列表整体左缩进，适配圆点 */
    font-size: 1.3rem;
    text-align: left; /* 左对齐 */
    margin: 0; /* 无外边距 */
}
.feature-title {
    display: inline-block; /* 标题固定宽度，保持冒号对齐 */
    width: 200px; /* 标题宽度，适应长标题 */
    text-align: left; /* 左对齐 */
    font-weight: bold !important; /* 标题加粗 */
    color: #000000 !important; /* 标题黑色 */
    margin-right: 8px; /* 标题与描述间距 */
}
.feature-desc {
    flex: 1; /* 描述占满剩余空间 */
    text-align: left; /* 左对齐 */
}

.feature-desc-concepts {
    font-size: 1.1em; /* 字体大小1.1em，适中 */
    line-height: 1.6; /* 行高1.6，优化阅读 */
    /*white-space: pre-wrap; !* 保留全角空格和换行 *!*/
    /*text-indent: 2em; !* 首行缩进两格，符合中文排版 *!*/
    text-align: left !important; /* 强制左对齐，覆盖Bootstrap .lead */
}

.site-description {
    text-indent: 2em; /* 首行缩进 2em */
    text-align: left; /* 左对齐 */
}

/* 卡片区样式：模型卡片的背景和交互效果 */
.section-custom {
    background: transparent; /* 卡片区背景透明，继承 body 渐变 */
    /*margin: 0; !* 移除多余边距 *!*/
    padding: 2rem 0; /* 统一上下填充 */
}
.card-custom {
    background: rgba(255, 255, 255, 0.3); /* 卡片半透明白色背景，透明度降低以突出渐变 */
    border-radius: 10px; /* 圆角，参考 index.html 的 rounded-lg */
    box-shadow: 0 10px 15px rgba(0, 0, 0, 1); /* 阴影，增加立体感 */
    transition: all 0.3s ease; /* 动画过渡，平滑交互 */
    min-height: 180px; /* 推荐：设置最小高度，如 200px，适配内容 */
}

.card-custom .card-body {
    min-height: 150px; /* 确保内容区域高度一致 */
    display: flex;
    flex-direction: column;
    justify-content: space-between; /* 标题/描述在上，按钮在下 */
}

.card-custom .btn-custom {
    background-color: #2563eb;
    border-color: #2563eb;
    color: #ffffff;
    align-self: center; /* 水平居中 */
    margin-top: auto; /* 推到 card-body 底部 */
}

.card-custom:hover {
    transform: translateY(-5px); /* 悬停上移 5px，增加动态感 */
    box-shadow: 0 15px 20px rgba(0, 0, 0, 2); /* 悬停时阴影增强 */
}
.btn-custom {
    /*background-color: #2563eb; !* 按钮背景为 blue-600，与渐变协调 *!*/
    background-color: #2563eb; /* 按钮背景为 blue-600，与渐变协调 */
    border-color: #2563eb; /* 边框同背景色 */
    color: #ffffff; /* 按钮文本白色 */
}
.btn-custom:hover {
    background-color: #1d4ed8; /* 悬停时为 blue-700，变暗 */
    border-color: #1d4ed8; /* 边框同悬停色 */
    transform: scale(1.05); /* 悬停时略微放大 */
}

/* 轮播样式：界面展示区的图片和说明文字 */
.carousel-caption-custom {
    background: rgba(255, 255, 255, 0.8); /* 轮播说明半透明白色背景 */
    color: #000000; /* 说明文本黑色 */
    border-radius: 5px; /* 圆角 */
    padding: 10px; /* 内边距 */
}
.carousel-item img {
    height: 400px; /* 图片固定高度 */
    object-fit: cover; /* 图片填充，保持比例 */
    border-radius: 8px; /* 圆角 */
}

/* 脚部样式：页脚的背景和文本 */
.footer-custom {
    background: transparent; /* 脚部背景透明，继承 body 渐变 */
    color: #ffffff; /* 文本白色 */
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5); /* 文本阴影，增强可读性 */
    height: 60px;
    white-space: nowrap !important;
}



/*广告位样式*/
.ad-section {
    background: rgba(255, 255, 255, 0.3); /* 透明背景，与卡片区一致 */
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 20px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* 轻微阴影，科技感 */
}
.ad-container {
    max-width: 828px; /* 标准横幅广告尺寸，如 728x90px */
    margin: 0 auto; /* 居中 */
}
.ad-title {
    font-family: KaiTi, STKaiti, serif; /* 楷体 */
    font-size: 1.5rem; /* 24px，醒目 */
    color: #ffffff; /* 白色文本 */
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.7); /* 增强可读性 */
    margin-bottom: 10px;
}
#ad-placeholder-main, #ad-placeholder-secondary, #ad-placeholder-third {
    min-height: 100px; /* 适配常见广告尺寸 */
    display: flex;
    justify-content: center;
    align-items: center;
    background: rgba(255, 255, 255, 0.1); /* 轻微底色，突出广告 */
    border-radius: 4px;
}
#ad-placeholder-main:hover, #ad-placeholder-secondary:hover, #ad-placeholder-third:hover {
    transform: scale(1.1); /* 悬停放大，吸引点击 */
    transition: transform 0.3s ease;
}
/* 悬浮广告位：正方形，右下角，带动画 */
.ad-floating {
    position: fixed; /* 固定定位，随滚动可见 */
    bottom: 20px; /* 初始距底部 20px */
    right: 20px; /* 初始距右侧 20px */
    width: 200px; /* 正方形，250x250px */
    height: 200px; /* 包含标题空间 */
    background: rgba(255, 255, 255, 0.3); /* 透明背景 */
    border-radius: 8px; /* 圆角 */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* 科技感阴影 */
    z-index: 1000; /* 置于顶层 */
    padding: 10px;
    transition: all 1s ease; /* 移动动画：1s 平滑过渡（位置、透明度） */
    opacity: 0.9; /* 初始透明度 */
}

/* 鼠标悬停时放大效果 */
.ad-floating:hover {
    transform: scale(1.1); /* 轻微放大，吸引点击 */
}

/* 关闭按钮，右上角 */
.ad-close-btn {
    position: absolute;
    top: 5px;
    right: 5px;
    background: none;
    border: none;
    font-size: 0.5rem; /* 20px */
    /*color: #000000;*/
    color: rgba(255,255,150,0.5) ;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
    cursor: pointer;
    transition: color 0.3s ease; /* 悬停颜色过渡 */
}

/* 关闭按钮悬停效果 */
.ad-close-btn:hover {
    color: #e0e0e0; /* 略灰，视觉反馈 */
}

/* 广告内容容器，居中 */
.ad-floating-content {
    text-align: center; /* 内容居中 */
}

/* 广告标题，楷体 */
.ad-title {
    font-family: KaiTi, STKaiti, serif; /* 楷体 */
    font-size: 1.25rem; /* 20px */
    color: #ffffff; /* 白色 */
    /*color: #000000; !* 白色 *!*/
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.7); /* 可读性 */
    margin-bottom: 10px;
}

.ad-floating-title {
    font-family: KaiTi, STKaiti, serif; /* 楷体 */
    font-size: 1rem; /* 20px */
    /*color: #ffffff; !* 白色 *!*/
    color: #f00000;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 1); /* 可读性 */
    /*margin-bottom: 10px;*/
}

/* 广告内容区域，250x250px */
#ad-placeholder-floating {
    width: 200px; /* 正方形广告 */
    height: 200px; /* 固定高度 */
    display: flex;
    justify-content: center; /* 水平居中 */
    align-items: center; /* 垂直居中 */
    background: rgba(255, 255, 255, 0.1); /* 轻微底色 */
    border-radius: 4px;
}

/* 模型代码示例样式 这个应该错了 不是代码 后面修改 todo*/
.code-example {
    background-color: #f8f9fa;
    padding: 1em;
    border-radius: 5px;
    font-family: 'Courier New', Courier, monospace;
    overflow-x: auto;
}

/* 表格样式 */
.table-responsive table {
    font-size: 0.9em;
    margin-bottom: 0;
}

.table-responsive th,
.table-responsive td {
    vertical-align: middle;
}

/* 错误提示样式 */
.error-message {
    color: #dc3545;
    font-style: italic;
    margin-bottom: 1em;
}


/* 模态框样式 */
/* 模态框（modal）相关样式，控制图片放大查看的弹出框 */
.modal {
    z-index: 3000; /* 设置模态框的层级高于导航栏（z-index: 2000），确保模态框显示在导航栏上方 */
}

/* 模态框背景（backdrop），用于遮罩页面其他内容 */
.modal-backdrop {
    z-index: 2950; /* 层级低于模态框（z-index: 3000），但高于导航栏（z-index: 2000），确保背景遮罩覆盖导航栏但不遮挡模态框 */
}

/* 大型模态框的尺寸限制 */
.modal-lg {
    max-width: 90vw; /* 模态框最大宽度为视口宽度的 90%，确保在宽屏设备上不过于占满空间 */
    max-height: 90vh; /* 模态框最大高度为视口高度的 90%，防止内容超出屏幕 */
}

/* 模态框内容区域 */
.modal-content {
    background: transparent; /* 设置透明背景，与页面深色主题一致，显示底层的渐变背景 */
    border: none; /* 移除默认边框，保持简洁的视觉效果 */
}

/* 图片容器，用于容纳放大的图片 */
.image-container {
    position: relative; /* 相对定位，确保内部的图片可以基于此容器进行定位（拖拽时使用） */
    overflow: hidden; /* 始终隐藏滚动条，防止放大后的图片触发容器滚动条，依赖拖拽查看隐藏区域 */
    width: 100%; /* 容器宽度占满模态框，最大化显示区域 */
    height: 90vh; /* 容器高度设置为视口高度的 100%，使模态框内容区域充满屏幕 */
    /* height: 70%; */ /* 注释掉的备选高度，限制为父容器的 70%，可根据需要启用以缩小显示区域 */
    display: flex; /* 使用 Flexbox 布局 */
    justify-content: center; /* 水平居中图片 */
    align-items: center; /* 垂直居中图片，确保图片默认显示在容器中央 */
}

/* 模态框内的图片样式 */
.modal-body img {
    width: 100%; /* 默认图片宽度为容器宽度的 70%，避免图片过大，保持初始显示适中 */
    height: auto; /* 高度自适应，保持图片纵横比，防止变形 */
    /*max-width: 90vw; !* 最大宽度限制为视口宽度的 90%，防止图片超出模态框 *!*/
    /*max-height: 80vh; !* 最大高度限制为视口高度的 80%，确保图片不超出容器高度 *!*/
    border-radius: 8px; /* 图片边角圆润，增加视觉美感 */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5); /* 添加阴影，提升图片在深色背景上的可读性和立体感 */
    position: relative; /* 相对定位，支持拖拽时通过 left/top 属性移动 */
    cursor: grab; /* 默认显示“抓取”光标，提示用户可拖拽图片（放大后） */
    transition: transform 0.2s ease; /* 缩放动画平滑过渡，持续 0.2 秒，使用 ease 缓动函数 */
}

/* 关闭按钮样式 */
.close {
    color: #ffffff; /* 白色文字，适合深色主题背景 */
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.8); /* 添加文字阴影，增强在深色背景上的可读性 */
    font-size: 2rem; /* 字体大小为 2rem，增大关闭按钮，便于点击 */
    opacity: 1; /* 完全不透明，确保按钮清晰可见 */
    z-index: 3050; /* 层级高于模态框（z-index: 3000），确保关闭按钮可点击且不被图片覆盖 */
}

/* 关闭按钮悬停效果 */
.close:hover {
    color: #cccccc; /* 悬停时颜色变浅（浅灰色），提供视觉反馈 */
}

/* 轮播图图片样式 */
.carousel-img {
    cursor: pointer; /* 鼠标悬停显示“指针”光标，提示用户图片可点击以触发模态框 */
}

/* 响应式：小屏幕（<768px） */
@media (max-width: 768px) {
    .ad-floating {
        width: 200px; /* 缩小至 200x200px */
        height: 230px;
    }
    #ad-placeholder-floating {
        width: 200px;
        height: 200px;
    }
    .ad-title {
        font-size: 1rem; /* 16px */
    }
    .ad-container {
        max-width: 100%; /* 小屏幕自适应 */
        padding: 0 10px;
    }
    .ad-title {
        font-size: 1.25rem; /* 小屏幕 20px */
    }
    #ad-placeholder-main, #ad-placeholder-secondary, #ad-placeholder-third {
        min-height: 60px; /* 小屏幕广告高度 */
    }

    .ad-floating {
        width: 200px;
        height: 230px;
        transition: all 0.3s ease; /* 平滑过渡 */
    }
}





/* 响应式：超小屏幕（<576px） */
@media (max-width: 576px) {
    .ad-floating {
        display: none; /* 隐藏广告，避免遮挡 */
    }
}




/* 响应式调整：适配小屏幕设备 */
@media (max-width: 768px) {
    .navbar-brand img {
        width: 24px; /* 小屏幕 Logo 缩小 */
        height: 24px;
        margin-right: 6px;
    }
    .list-group-item {
        font-size: 1em; /* 小屏幕字体稍小 */
    }
    .list-group-flush {
        padding-left: 1.5rem; /* 小屏幕列表缩进减小 */
    }
    .feature-title {
        width: 150px; /* 小屏幕标题宽度减小 */
    }
    .carousel-item img {
        height: 250px; /* 小屏幕图片高度减小 */
    }
    /*.card-custom {*/
        /*margin-bottom: 20px; !* 小屏幕卡片间距 *!*/
    /*}*/

    .card-custom {
        min-height: 180px; /* 小屏幕卡片高度 */
    }
    .card-custom .card-body {
        min-height: 130px; /* 小屏幕内容高度 */
    }
    .card-custom .btn-custom {
        padding: 0.25rem 0.5rem; /* 小屏幕按钮稍小 */
        font-size: 0.875rem; /* 字体 14px */
    }
}