:root {
  --tblr-primary: #1c8735; /* 鲜绿色 */
  --tblr-primary-rgb: 40, 167, 69;
  --tblr-primary-text: #fff;
  --tblr-primary-bg: #e2fae8;
  --tblr-primary-border: #d1f4da;

  --tblr-secondary: #0b3e26; /* 稍深的绿色 */
  --tblr-secondary-rgb: 25, 135, 84;
  --tblr-secondary-text: #fff;
  --tblr-secondary-bg: #d0f0d8;
  --tblr-secondary-border: #bfe5c9;

  --tblr-success: #28a745; /* 鲜绿色 */
  --tblr-success-rgb: 40, 167, 69;

  --tblr-info: #17a2b8;
  --tblr-warning: #ffc107;
  --tblr-danger: #dc3545;

  /* 其他颜色变量也可以根据需要进行调整 */
  
}

.text-secondary {
    --tblr-text-opacity: 1;
    color: 
    color-mix(in srgb, #08a55b calc(var(--tblr-text-opacity) * 100%), transparent) !important;
}

.icon-lg{
    --tblr-icon-size: 3rem;
    stroke-width:1;
    stroke:rgb(30, 174, 14);
}

/* target the nav-link class */
.navbar {
  background-color: var(--tblr-primary);
}

/* target the nav-link class */
.navbar .nav-link {
  color: #e0e8dd !important; /* Overrides default Tabler text color */
}

/* Dark mode styles */
html[data-bs-theme='dark'] .navbar {
    background-color: var(--tblr-secondary) !important;
}

html[data-bs-theme='dark']  .markdown>table thead th, .table thead th {
    color: #08a55b;

}

html[data-bs-theme='dark']  .navbar .nav-link {
    color: #fff !important;
}

/* light mode styles */
html[data-bs-theme='light'] .navbar {
    background-color: var(--tblr-primary) !important;
  }

html[data-bs-theme='light'] .navbar .nav-link {
  color: #e0e8dd !important; /* Overrides default Tabler text color */
}

.subheader {
    color: #08a55b;
}

/* 首页第一屏动画文字 */
.animated-text {
    overflow: hidden;
    white-space: nowrap;
    animation: typing 5s steps(40, end) infinite;
}

@keyframes typing {
    from {
        width: 0;
    }
    to {
        width: 100%;
    }
}

/* 首页第三屏特性图标样式 */
.feature-icon {
    width: 3rem;  /* 尺寸与 .icon-lg 保持一致 */
    height: 3rem; /* 尺寸与 .icon-lg 保持一致 */
    transition: transform 0.3s ease-in-out; /* 为动画添加平滑过渡效果 */
}

/* 鼠标悬停在卡片上时，图标的动画效果 */
.card:hover .feature-icon {
    transform: scale(1.15) rotate(-8deg); /* 放大并轻微旋转 */
}

/* 恢复第二屏的悬停动画 */
.card:hover .icon-tabler-music,
.card:hover .icon-tabler-shopping-bag-check,
.card:hover .icon-tabler-vocabulary {
    animation: tada 1.5s ease infinite;
}

.card:hover .icon-tabler-cloud-network,
.card:hover .icon-tabler-shield-check,
.card:hover .icon-tabler-world-check {
    animation: pulse 2s ease infinite;
}

/* 自定义更明显的 pulse 动画效果 */
@keyframes pulse {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.2);
    }
    100% {
        transform: scale(1);
    }
}

/* 返回顶部按钮样式 */
#back-to-top {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 1050; /* 确保在其他元素之上 */
    border-radius: 50%;
}

/* 首页第一屏 Banner SVG 样式 */
.banner-svg {
    width: 100%;
    height: auto;
    /* 定义 SVG 内部使用的颜色变量 (白天模式) */
    --svg-c-grid: rgba(255, 255, 255, 0.1);
    --svg-c-icon: rgba(255, 255, 255, 0.4);
    --svg-c-accent: #ffeb3b;
    --svg-c-accent-light: #fffde7;
    --svg-c-icon-top: #80deea; /* Cyan */
    --svg-c-icon-bottom: #ffffff;
}

/* 暗色模式下的 SVG 颜色覆盖 */
html[data-bs-theme='dark'] .banner-svg {
    --svg-c-grid: rgba(255, 255, 255, 0.05);
    --svg-c-icon: rgba(255, 255, 255, 0.3);
    /* 强调色在暗色模式下可以保持不变，或者使用一个更柔和的颜色 */
    /* --svg-c-accent: #fbc02d; */
    --svg-c-accent-light: #fff59d;
    --svg-c-icon-top: #4dd0e1; /* Darker Cyan */
    --svg-c-icon-bottom: rgba(255, 255, 255, 0.7);
}

/* 从 index.tpl 移出的 SVG 内部样式 */
.svg-bg-grid { stroke: var(--svg-c-grid); stroke-width: 2; }
.svg-icon-main { fill: none; stroke: var(--svg-c-icon); stroke-width: 1.8; }
.svg-icon-accent { fill: var(--svg-c-accent); stroke: var(--svg-c-accent); }
.svg-connect-line { fill: none; stroke: var(--svg-c-icon); stroke-opacity: 0.3; stroke-width: 6; }
.svg-connect-dot { fill: var(--svg-c-accent); filter: url(#glow); }

/* 中心地球的旋转和轨迹动画 */
@keyframes globe-path-motion {
    from { offset-distance: 0%; }
    to { offset-distance: 100%; }
}

.svg-globe-dot {
    offset-path: path("M 0 -200 A 200 200 0 1 1 -0.1 -200 Z");
    animation: globe-path-motion 10s linear infinite;
}

/* 连接点的轨迹和脉冲动画 */
@keyframes connect-dot-motion {
    from { offset-distance: 0%; }
    to { offset-distance: 100%; }
}

@keyframes connect-dot-pulse {
    0%, 100% { r: 8; opacity: 1; }
    50% { r: 12; opacity: 0.7; }
}

.svg-connect-dot {
    animation-duration: 4s, 2s;
    animation-iteration-count: infinite, infinite;
    animation-timing-function: linear, ease-in-out;
    animation-name: connect-dot-motion, connect-dot-pulse;
}

.svg-connect-dot-1 {
    offset-path: path("M 450 450 C 550 300, 750 300, 850 450");
    animation-delay: 0s;
}

.svg-connect-dot-2 {
    offset-path: path("M 850 450 C 950 600, 1150 600, 1250 450");
    animation-delay: 1s;
}

.svg-connect-dot-3 {
    offset-path: path("M 450 450 C 350 600, 150 600, 50 450");
    animation-delay: 2s;
}

/* 首页区域背景自适应 */
.section-primary {
    background-color: var(--tblr-primary);
}

.section-secondary {
    background-color: #f8f9fa; /* 类似 bg-light */
}

.section-tertiary {
    background-color: #ffffff; /* 类似 bg-white */
}

/* 暗色模式下的背景覆盖 */
html[data-bs-theme='dark'] .section-primary {
    background-color: var(--tblr-secondary); /* 使用您定义的深绿色 */
}
html[data-bs-theme='dark'] .section-secondary {
    background-color: var(--tblr-bg-surface-tertiary); /* Tabler 内置的深灰色 */
}
html[data-bs-theme='dark'] .section-tertiary {
    background-color: var(--tblr-bg-surface); /* Tabler 内置的背景色 */
}
.btnicon{
    font-size: 1.25rem;
    --tblr-btn-padding-x:0;
}

.navbar-toggler-icon {
    background-color: #056331; /* 与当前颜色区分开，使用更深的绿色 */
}

html[data-bs-theme='dark'] .navbar-toggler-icon {
    background-color: #107840; /* 与当前颜色区分开，使用更深的绿色 */
}

.home-subtitle, .card-subtitle {
    font-size: 14px;
    color: #22ba52;
}

.home-title {
    font-size: 36px;
}

/* 
 * 修复 Tabler 框架的滚动条补偿 BUG
 * 原始规则错误地将 margin-left 全局应用到了 :root，导致页面左侧出现空白。
 * 此处将其重置，并只在 body.modal-open 时应用，恢复其预期行为。
*/
@media (min-width: 992px) {
    :root {
        margin-left: 0;
    }
}

/* 页脚样式优化 */
.footer {
    background-color: var(--tblr-bg-surface-secondary); /* 浅灰色背景 */
    border-top: 1px solid var(--tblr-border-color); /* 顶部添加分割线 */
    padding-top: 2.5rem; /* 增加上内边距 */
    padding-bottom: 2.5rem; /* 增加下内边距 */
}

/* 暗色模式下页脚背景色调整 */
html[data-bs-theme='dark'] .footer {
        background-color: var(--tblr-bg-surface); /* 使用更深的背景色 */
}