:root{
 --primary-color:rgb(4, 4, 4);
 --secondary-color:rgb(75, 85, 99);
 --background-color:#ffffff;
 --text-color:rgb(4, 4, 4);
 --border-color:rgb(229, 231, 235);
 --card-background:#ffffff;
 --hover-color:rgb(249, 250, 251);
 --gradient-from:#fbbf24;
 --gradient-to:#d946ef;
 --tw-text-opacity:1;
 --card-shadow:0 4px 6px rgba(0, 0, 0, 0.1);
 --ranking-box-bg:#ffffff;
 --time-selector-bg:#f5f5f5;
 --chart-bg:#ffffff;
}


/* Dark theme */

[data-theme="dark"]{
 --primary-color:#ffffff;
 --secondary-color:rgb(238, 211, 227);
 --background-color:rgb(17, 24, 39);
 --text-color:rgb(255, 255, 255);
 --border-color:rgb(55, 65, 81);
 --card-background:rgb(31, 41, 55);
 --hover-color:rgb(55, 65, 81);
 --gradient-from:#ffd700;
 --gradient-to:#ff69b4;
 --card-shadow:0 4px 6px rgba(0, 0, 0, 0.3);
 --ranking-box-bg:rgb(31, 41, 55);
 --time-selector-bg:rgb(55, 65, 81);
 --chart-bg:rgb(31, 41, 55);
}

*{
 margin:0;
 padding:0;
 box-sizing:border-box;
}

body{
 font-family:'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
 margin:0;
 padding:0;
 background-color:var(--background-color);
 color:var(--text-color);
 transition:all 0.3s ease;
 font-display:swap;/* 优化字体加载 */
 /* 防止字体加载导致的布局偏移 */
 line-height:1.6;
 -webkit-text-size-adjust:100%;
 text-rendering:optimizeLegibility;
}

.container{
 max-width:1200px;
 margin:0 auto;
 padding:20px;
 background-color:var(--background-color);
 border-radius:8px;
}

h1,
h2,
h3,
h4,
h5,
h6{
 color:var(--text-color);
}


/* 按钮组样式 */

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

button{
 padding:8px 16px;
 border:1px solid var(--border-color);
 border-radius:4px;
 background-color:var(--card-background);
 color:var(--text-color);
 cursor:pointer;
 transition:all 0.3s ease;
}

button:hover{
 /* background-color:var(--hover-color);*/
 background-color:#e36bb1;
}

button.active{
 background-color:var(--text-color);
 color:var(--background-color);
 border-color:var(--text-color);
}


/* 图表容器样式 */
.chart-container{
 margin-bottom:30px;
 padding:20px;
 border-radius:12px;
 background-color:var(--chart-bg);
 border:1px solid var(--border-color);
 box-shadow:var(--card-shadow);
 min-height:400px;/* 预留最小高度避免CLS */
 height:400px;/* 固定高度防止CLS */
 display:flex;
 align-items:center;
 justify-content:center;
 /* 防止内容溢出导致布局偏移 */
 contain:layout;
 position:relative;
}

/* 图表加载状态 */
.chart-container::before{
 content:'';
 position:absolute;
 top:50%;
 left:50%;
 width:40px;
 height:40px;
 margin:-20px 0 0 -20px;
 border:3px solid #f3f3f3;
 border-top:3px solid var(--text-color);
 border-radius:50%;
 animation:chart-spin 1s linear infinite;
 opacity:0;
 transition:opacity 0.3s ease;
}

.chart-container.loading::before{
 opacity:1;
}

@keyframes chart-spin{
 0%{transform:rotate(0deg);}
 100%{transform:rotate(360deg);}
}

.chart-container canvas{
 max-height:350px;/* 限制图表最大高度 */
 width:100% !important;
 height:auto !important;
}


/* 表格样式 */

.table-container{
 overflow-x:auto;
}

table{
 width:100%;
 border-collapse:collapse;
 margin-top:20px;
}

th,
td{
 padding:12px;
 text-align:left;
 border-bottom:1px solid var(--border-color);
 color:var(--text-color);
}

th{
 background-color:var(--hover-color);
 font-weight:bold;
}

tr:hover{
 background-color:var(--hover-color);
}


/* Header and Navigation */

.header{
 background-color:var(--background-color);
 box-shadow:0 2px 4px rgba(0, 0, 0, 0.1);
 transition:all 0.3s ease;
}

.sticky{
 position:sticky;
}

.top-0{
 top:0;
}

.z-30{
 z-index:30;
}


/* 导航栏样式 */

.navbar{
 padding:1rem 0;
 transition:all 0.3s ease;
}

.navbar .container{
 display:flex;
 justify-content:space-between;
 align-items:center;
 max-width:1200px;
 margin:0 auto;
 padding:0 1rem;
 position:relative;
}

.navbar-brand,
.logo a{
 font-size:1.5rem;
 font-weight:bold;
 color:var(--text-color);
 text-decoration:none;
 flex-shrink:0;
}

/* 汉堡菜单按钮样式 */
.navbar-toggler{
 display:none;/* 默认隐藏，由媒体查询控制 */
 background:none;
 border:none;
 padding:0.25rem 0.5rem;
 cursor:pointer;
 position:relative;
 /* 合并动画样式 */
 transition:all 0.3s ease;
 border:2px solid transparent;
 border-radius:6px;
 padding:8px;
}

/* 修复按钮焦点和激活状态的样式 */
.navbar-toggler:focus,
.navbar-toggler:active,
.navbar-toggler:hover{
 outline:none;
 box-shadow:none;
 background:none;
 border:none;
}

/* 修复Bootstrap默认的toggler样式 */
.navbar-toggler:focus .navbar-toggler-icon,
.navbar-toggler:active .navbar-toggler-icon,
.navbar-toggler:hover .navbar-toggler-icon{
 background-color:var(--text-color);
}

.navbar-toggler-icon{
 display:block;
 width:1.5rem;
 height:1.125rem;
 position:relative;
 background-color:var(--text-color);/* 确保中间横线有颜色 */
}

.navbar-toggler-icon,
.navbar-toggler-icon::before,
.navbar-toggler-icon::after{
 background-color:var(--text-color);
 height:2px;
 border-radius:1px;
 transition:all 0.3s ease;
}

.navbar-toggler-icon::before,
.navbar-toggler-icon::after{
 content:'';
 position:absolute;
 width:100%;
 left:0;
}

.navbar-toggler-icon::before{
 top:-0.5rem;
}

.navbar-toggler-icon::after{
 bottom:-0.5rem;
}

/* 折叠内容样式 */
.navbar-collapse{
 display:flex;
 flex-grow:1;
 align-items:center;
 justify-content:space-between;/* 左右分布：nav-items居中，nav-right靠右 */
}

.nav-items{
 display:flex;
 gap:2rem;
 margin:0;
 position:absolute;
 left:50%;
 transform:translateX(-50%);/* 让导航项真正居中 */
 white-space:nowrap;
}

.nav-link{
 color:var(--text-color);
 text-decoration:none;
 font-weight:500;
 transition:color 0.3s ease;
 padding:0.5rem 0;
}

.nav-link:hover{
 color:var(--primary-color);
}

.nav-right{
 display:flex;
 align-items:center;
 gap:1rem;
 flex-shrink:0;
 margin-left:auto;/* 确保右侧按钮靠右 */
}

.theme-switcher{
 background:none;
 border:none;
 color:var(--text-color);
 cursor:pointer;
 padding:0.5rem;
 font-size:1.1rem;
 transition:color 0.3s ease;
}

.theme-switcher:hover{
 color:var(--primary-color);
}

.login-btn{
 background-color:var(--primary-color);
 color:var(--background-color);
 border:none;
 padding:0.5rem 1.5rem;
 border-radius:4px;
 cursor:pointer;
 font-weight:500;
 transition:background-color 0.3s ease;
}

.login-btn:hover{
 opacity:0.9;
}


/* 暗色主题下汉堡按钮的样式 */
[data-theme="dark"] .navbar-toggler-icon,
[data-theme="dark"] .navbar-toggler-icon::before,
[data-theme="dark"] .navbar-toggler-icon::after{
 background-color:var(--text-color);
}

[data-theme="dark"] .navbar-toggler:focus .navbar-toggler-icon,
[data-theme="dark"] .navbar-toggler:active .navbar-toggler-icon,
[data-theme="dark"] .navbar-toggler:hover .navbar-toggler-icon{
 background-color:var(--text-color);
}

/* 英雄区域样式 */

.hero{
 padding:10px 20px 60px;
 text-align:center;
 background:var(--background-color);
}

.hero h4{
 color:var(--text-color);
 margin-bottom:24px;
}

.hero p{
 font-size:20px;
 color:var(--secondary-color);
 max-width:800px;
 margin:0 auto 40px;
}


/* 渐变文本效果 */

.bg-gradient-to-br{
 background:linear-gradient(135deg, var(--gradient-from), var(--gradient-to));
 -webkit-background-clip:text;
 background-clip:text;
 color:transparent;
}


/* 标题样式 */

.font-bold{
 font-weight:700;
}

.text-4xl{
 font-size:2.25rem;
 line-height:2.5rem;
}

.lg\:text-6xl{
 font-size:3.75rem;
 line-height:1;
}

.mb-5{
 margin-bottom:1.25rem;
}

.lg\:leading-normal{
 line-height:1.5;
}

.leading-normal{
 line-height:1.5;
}

@media (min-width:1024px){
 .lg\:text-6xl{
 font-size:3.75rem;
 line-height:1;
}
 .lg\:leading-normal{
 line-height:1.5;
}
}


/* 特性区域样式 */

.features{
 padding:80px 0;
 background-color:var(--background-color);
}

.features-content{
 display:flex;
 gap:40px;
 align-items:flex-start;
 justify-content:space-around;
}

.features-text{
 flex:1;
 max-width:600px;
 padding:50px 0px;
}

.features h2{
 color:var(--text-color);
 font-size:3rem;
 line-height:1;
 margin-bottom:16px;
 font-weight:800;
}

.features p{
 color:var(--text-color);
 font-size:1.125rem;
 line-height:1.75rem;
 margin-bottom:24px;
 opacity:0.9;
}

.features-list{
 display:flex;
 flex-direction:column;
 gap:12px;
}

/* 按钮容器样式 - PC端默认（恢复原来样式） */
.flex.align-items-center{
 display:flex;
 align-items:center;
 justify-content:flex-start;/* PC端恢复左对齐 */
 gap:30px;/* 恢复原来的间距 */
 margin-top:20px;
}

.join-us-btn{
 flex-shrink:0;
 white-space:nowrap;
}

.feature-item{
 display:flex;
 align-items:flex-start;
 gap:8px;
}

.feature-item .checkmark{
 color:var(--text-color);
 font-size:14px;
 line-height:1.6;
 flex-shrink:0;
 font-weight:600;
}

.feature-text{
 color:var(--text-color);
 font-size:14px;
 line-height:1.6;
 opacity:0.9;
}

.features-images{
 display:flex;
 justify-content:center;
 align-items:center;
 max-width:500px;
 margin-left:40px;
}

.feature-image{
 width:100%;
 height:auto;
 aspect-ratio:5 / 4;/* 500x400 比例 */
 object-fit:contain;
 border-radius:8px;
 box-shadow:var(--card-shadow);
}


/* 用户评价区域样式 */

.testimonials{
 padding:80px 0;
 background-color:var(--background-color);
}

.testimonials h2{
 text-align:center;
 font-size:2.5rem;
 font-weight:700;
 margin-bottom:1rem;
 color:var(--text-color);
}

.testimonials .subtitle{
 text-align:center;
 font-size:1.5rem;
 color:var(--text-color);
 margin-bottom:0.5rem;
}

.testimonials .description{
 text-align:center;
 font-size:1rem;
 color:var(--secondary-color);
 margin-bottom:3rem;
}

.testimonials-grid{
 display:grid;
 grid-template-columns:repeat(3, 1fr);
 gap:2rem;
 margin-top:40px;
}

.testimonial-card{
 background:var(--card-background);
 border:1px solid var(--border-color);
 padding:2rem;
 border-radius:8px;
 box-shadow:var(--card-shadow);
 transition:transform 0.3s ease;
 will-change:transform;/* 优化动画性能 */
}

.testimonial-card:hover{
 transform:translateY(-5px);
}

.testimonial-card .icon{
 font-size:2rem;
 color:var(--text-color);
 margin-bottom:1.5rem;
 opacity:0.8;
}

.testimonial-card h3{
 font-size:1.25rem;
 font-weight:600;
 margin-bottom:1rem;
 color:var(--text-color);
}

.testimonial-card p{
 color:var(--secondary-color);
 line-height:1.6;
 margin-bottom:1.5rem;
}

.contact-link{
 display:inline-block;
 color:var(--text-color);
 text-decoration:none;
 font-weight:500;
 transition:opacity 0.2s;
}

.contact-link:hover{
 opacity:0.7;
}


/* 数据统计区域样式 */

.data-stats{
 padding:60px 0;
 background-color:var(--background-color);
}

.section-title{
 text-align:center;
 margin-bottom:40px;
 font-size:2.5rem;
 color:var(--text-color);
}

.stats-layout{
 display:flex;
 gap:30px;
 align-items:flex-start;
}

.stats-sidebar{
 width:200px;
 flex-shrink:0;
}

.stats-main{
 flex-grow:1;
}

.metric-selector{
 margin:10px 10px;
 text-align:center;
}

.metric-btn{
 padding:12px 20px;
 border:1px solid var(--border-color);
 background:var(--card-background);
 color:var(--text-color);
 border-radius:8px;
 cursor:pointer;
 transition:all 0.3s ease;
 text-align:center;
 font-size:16px;
 width:106px;
 display:inline-block;
 margin:0 5px;
}

.metric-btn.active{
 background:var(--text-color);
 color:var(--background-color);
 border-color:var(--text-color);
}


/* 模型选择器样式 */

.model-selector{
 display:grid;
 grid-template-columns:repeat(auto-fill, minmax(180px, 1fr));
 gap:10px;
 padding:10px;
 margin-bottom:20px;
 position:relative;
}

.model-btn{
 padding:8px 16px;
 border:1px solid var(--border-color);
 border-radius:4px;
 background-color:var(--card-background);
 color:var(--text-color);
 cursor:pointer;
 transition:all 0.3s ease;
 font-size:14px;
 white-space:nowrap;
 overflow:hidden;
 text-overflow:ellipsis;
}

.model-btn:hover{
 background-color:var(--hover-color);
}

.model-btn.active{
 background-color:var(--text-color);
 color:var(--background-color);
 border-color:var(--text-color);
}


/* 排行榜样式 */

.ranking-box{
 background-color:var(--ranking-box-bg);
 border-radius:0.5rem;
 box-shadow:var(--card-shadow);
 border:1px solid var(--border-color);
 min-height:600px;/* 预留最小高度避免CLS */
}

.ranking-content{
 min-height:480px;/* 为排行榜内容预留空间 */
}

.time-selector{
 background-color:var(--time-selector-bg);
 display:inline-block;
}

.time-btn{
 padding:8px 16px;
 margin:0 4px;
 border:none;
 border-radius:20px;
 background:transparent;
 color:var(--text-color);
 cursor:pointer;
 transition:all 0.3s ease;
}

.time-btn:hover{
 background-color:var(--hover-color);
}

.time-btn.active{
 background-color:var(--text-color);
 color:var(--background-color);
}

.ranking-item{
 display:flex;
 align-items:center;
 padding:16px;
 transition:transform 0.2s ease, background-color 0.2s ease;
 border-bottom:1px solid var(--border-color);
 will-change:transform;/* 优化动画性能 */
}

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

.ranking-item:hover{
 background-color:var(--hover-color);
 transform:translateX(4px);
}

.ranking-number{
 font-size:15px;
 font-weight:500;
 color:var(--secondary-color);
 width:32px;
 text-align:center;
}

.ranking-model{
 flex:1;
 font-size:15px;
 font-weight:500;
 color:var(--text-color);
 margin-left:12px;
 font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

.ranking-tokens{
 font-size:15px;
 color:var(--secondary-color);
 font-weight:500;
 text-align:right;
 font-variant-numeric:tabular-nums;
}


/* Top 3 特殊样式 */

.ranking-item:nth-child(-n+3) .ranking-number{
 font-weight:600;
 color:var(--text-color);
}

.ranking-item:nth-child(1) .ranking-model{
 color:var(--text-color);
 font-weight:700;
}


/* 页脚样式 */

/* PC端页脚布局（屏幕宽度1024px） */
@media (min-width:1024px){
 footer{
 background-color:var(--card-background);
 padding:60px 0 20px;
 border-top:1px solid var(--border-color);
 margin-top:40px;
 width:100%;
 min-width:1200px;/* 固定最小宽度 */
}
 
 .footer-content{
 display:grid;
 grid-template-columns:1fr 1fr 1fr 1fr;/* 固定4列布局 */
 gap:40px;
 margin-bottom:40px;
 max-width:1200px;/* 固定最大宽度 */
 margin-left:auto;
 margin-right:auto;
 padding:0 20px;
}
 
 .footer-logo h3{
 text-align:left;
}
 
 .footer-contact{
 display:flex;
 flex-direction:column;
 gap:10px;
 align-items:flex-start;
}
}

/* 移动端页脚布局（屏幕宽度<1024px） */
@media (max-width:1023px){
 footer{
 background-color:var(--card-background);
 padding:40px 0 20px;
 border-top:1px solid var(--border-color);
 margin-top:20px;
}
 
 .footer-content{
 display:flex;
 flex-direction:column;
 gap:30px;
 margin-bottom:30px;
 padding:0 20px;
 text-align:center;
}
 
 .footer-contact{
 display:flex;
 flex-direction:column;
 gap:10px;
 align-items:center;
}
}

/* 页脚公共样式 */
footer{
 font-size:14px;/* 页脚整体字体大小始终为14px */
}

.footer-logo h3{
 font-size:18px;/* 页脚Logo标题始终为18px */
 color:var(--text-color);
 font-weight:600;
 margin-bottom:10px;
}

.footer-tagline{
 color:var(--secondary-color);
 font-size:14px;/* 页脚标语始终为14px */
}

.footer-links ul{
 list-style:none;
 padding:0;
}

.footer-links li{
 margin-bottom:10px;
}

.footer-links a{
 color:var(--text-color);
 text-decoration:none;
 transition:opacity 0.2s ease;
}

.footer-links a:hover{
 opacity:0.8;
}

.contact-title{
 font-weight:600;
 color:var(--text-color);
 margin-bottom:5px;
 font-size:14px;/* 联系标题始终为14px */
}

.contact-email{
 color:var(--secondary-color);
 display:flex;
 align-items:center;
 gap:8px;
 margin-bottom:0;
}

.contact-email i{
 color:var(--text-color);
 font-size:16px;
}

.footer-bottom{
 text-align:center;
 padding-top:20px;
 border-top:1px solid var(--border-color);
 color:var(--secondary-color);
}


/* 打字机效果样式 */

.typewrite{
 display:inline-block;
 position:relative;
}

.typewrite>.wrap{
 border-right:0.08em solid;
 animation:blink-caret 0.75s step-end infinite;
}

@keyframes blink-caret{
 from,
 to{
 border-color:transparent
}
 50%{
 border-color:var(--text-color);
}
}

[data-theme="dark"] .typewrite>.wrap{
 animation:blink-caret-dark 0.75s step-end infinite;
}

@keyframes blink-caret-dark{
 from,
 to{
 border-color:transparent
}
 50%{
 border-color:rgba(255, 255, 255, 0.7);
}
}


/* 汉堡菜单增强样式 */

/* 汉堡按钮hover效果 */

.navbar-toggler:hover{
 background-color:var(--hover-color);
 transform:scale(1.05);
}

.navbar-toggler.active{
 background-color:var(--hover-color);
 border-color:var(--border-color);
}

/* 汉堡图标动画 - 变成X */
.navbar-toggler.active .navbar-toggler-icon{
 background-color:transparent;
}

.navbar-toggler.active .navbar-toggler-icon::before{
 transform:rotate(45deg) translate(0, 0);
 top:0;
}

.navbar-toggler.active .navbar-toggler-icon::after{
 transform:rotate(-45deg) translate(0, 0);
 bottom:0;
}

/* 菜单打开时的导航栏样式 */
.navbar.menu-opening{
 box-shadow:0 4px 12px rgba(0, 0, 0, 0.15);
}

/* 菜单背景遮罩样式在JavaScript中动态添加 */

/* 菜单展开状态优化 */
.navbar-collapse.show{
 animation:slideDown 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes slideDown{
 from{
 opacity:0;
 transform:translateY(-10px);
}
 to{
 opacity:1;
 transform:translateY(0);
}
}

/* 菜单项悬浮效果 */
.navbar-collapse .nav-link{
 position:relative;
 overflow:hidden;
 border-radius:6px;
 margin:2px 0;
 transition:all 0.2s ease;
}

.navbar-collapse .nav-link:hover{
 background-color:var(--hover-color);
}


/* 防止菜单打开时背景滚动 */
body.navbar-open{
 overflow:hidden;
}

/* 菜单项进入动画 - 移除延迟，同步显示 */
.navbar-collapse.show .nav-link{
 animation:slideInLeft 0.25s ease forwards;
 opacity:0;
}

@keyframes slideInLeft{
 from{
 opacity:0;
 transform:translateX(-15px);
}
 to{
 opacity:1;
 transform:translateX(0);
}
}

/* 右侧按钮区域动画 - 同步显示 */
.navbar-collapse.show .nav-right{
 animation:fadeInUp 0.25s ease forwards;
 opacity:0;
}

@keyframes fadeInUp{
 from{
 opacity:0;
 transform:translateY(10px);
}
 to{
 opacity:1;
 transform:translateY(0);
}
}

/* 主题切换按钮在菜单中的样式 */
.navbar-collapse .theme-switcher{
 background-color:var(--card-background);
 border:1px solid var(--border-color);
 border-radius:6px;
 padding:8px 12px;
 margin-right:8px;
 transition:all 0.2s ease;
}

.navbar-collapse .theme-switcher:hover{
 background-color:var(--hover-color);
 transform:scale(1.05);
}

/* 登录按钮在菜单中的样式增强 */
.navbar-collapse .login-btn{
 box-shadow:0 2px 8px rgba(0, 0, 0, 0.1);
 transition:all 0.2s ease;
}

.navbar-collapse .login-btn:hover{
 box-shadow:0 4px 12px rgba(0, 0, 0, 0.15);
 transform:translateY(-1px);
}

/* 暗色模式下的菜单样式 */
[data-theme="dark"] .navbar-toggler:hover{
 background-color:var(--hover-color);
}

[data-theme="dark"] .navbar-collapse .nav-link:hover{
 background-color:var(--hover-color);
}

[data-theme="dark"] .navbar-collapse .theme-switcher{
 background-color:var(--card-background);
 border-color:var(--border-color);
}

/* 响应式优化 */
@media (max-width:576px){
 .navbar-collapse{
 margin-left:-1rem;
 margin-right:-1rem;
 padding-left:1rem;
 padding-right:1rem;
}
 
 .navbar-collapse .nav-link{
 padding:12px 16px;
 font-size:16px;
}
 
 .navbar-collapse .nav-right{
 gap:0.5rem;
 padding-top:1rem;
}
 
 .navbar-collapse .theme-switcher,
 .navbar-collapse .login-btn{
 width:100%;
 text-align:center;
 margin-bottom:8px;
}
}

/* 性能优化 */
.navbar-toggler,
.navbar-collapse,
.nav-link{
 will-change:transform;
}

/* 无障碍支持 */
.navbar-toggler:focus{
 outline:2px solid var(--text-color);
 outline-offset:2px;
}

.navbar-collapse .nav-link:focus{
 outline:2px solid var(--text-color);
 outline-offset:2px;
 background-color:var(--hover-color);
}


/* 响应式管理器 - 实时布局切换样式 */

/* 布局过渡状态 */
.layout-transitioning{
 pointer-events:none;/* 过渡期间禁用交互 */
}

.layout-transitioning *{
 transition:all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* 导航栏模式样式 */
.navbar.nav-mobile,
.navbar.nav-tablet{
 /* 移动端/平板导航样式 */
}

.navbar.nav-desktop{
 /* 桌面端导航样式 */
}

.navbar.nav-mobile .navbar-collapse,
.navbar.nav-tablet .navbar-collapse{
 flex-direction:column;
 width:100%;
 position:absolute;
 top:100%;
 left:0;
 background-color:var(--background-color);
 border:1px solid var(--border-color);
 border-radius:0.375rem;
 box-shadow:var(--card-shadow);
 padding:1rem;
 margin-top:0.5rem;
 z-index:1000;
 transform:translateY(-10px);
 opacity:0;
 transition:all 0.3s ease;
}

.navbar.nav-mobile .navbar-collapse.show,
.navbar.nav-tablet .navbar-collapse.show{
 transform:translateY(0);
 opacity:1;
}

.navbar.nav-desktop .navbar-collapse{
 flex-direction:row;
 position:static;
 background-color:transparent;
 border:none;
 box-shadow:none;
 padding:0;
 margin:0;
 transform:none;
 opacity:1;
}

.navbar.nav-mobile .nav-items,
.navbar.nav-tablet .nav-items{
 position:relative;
 left:auto;
 transform:none;
 flex-direction:column;
 gap:0.5rem;
 width:100%;
 margin-bottom:1rem;
}

.navbar.nav-desktop .nav-items{
 flex-direction:row;
 gap:2rem;
 margin:0;
 position:absolute;
 left:50%;
 transform:translateX(-50%);
 white-space:nowrap;
}

.navbar.nav-mobile .nav-right,
.navbar.nav-tablet .nav-right{
 justify-content:center;
 padding-top:0.5rem;
 border-top:1px solid var(--border-color);
 width:100%;
}

.navbar.nav-desktop .nav-right{
 justify-content:flex-end;
 padding-top:0;
 border-top:none;
 width:auto;
 margin-left:auto;
}

/* 网格布局模式样式 */
.testimonials-grid.grid-mobile{
 grid-template-columns:1fr;
 gap:1.5rem;
}

.testimonials-grid.grid-tablet{
 grid-template-columns:repeat(2, 1fr);
 gap:2rem;
}

.testimonials-grid.grid-desktop{
 grid-template-columns:repeat(3, 1fr);
 gap:2rem;
}

.features-grid.grid-mobile .row{
 --bs-gutter-x:1rem;
}

.features-grid.grid-tablet .row{
 --bs-gutter-x:1.5rem;
}

.features-grid.grid-desktop .row{
 --bs-gutter-x:2rem;
}

.model-selector.grid-mobile{
 grid-template-columns:repeat(auto-fill, minmax(140px, 1fr));
 gap:8px;
 padding:10px 5px;
}

.model-selector.grid-tablet{
 grid-template-columns:repeat(auto-fill, minmax(160px, 1fr));
 gap:10px;
 padding:10px;
}

.model-selector.grid-desktop{
 grid-template-columns:repeat(auto-fill, minmax(180px, 1fr));
 gap:10px;
 padding:10px;
}

/* 内容区域模式样式 */
.features-content.content-mobile{
 flex-direction:column;
 gap:30px;
 padding:0 15px;
 text-align:center;
}

.features-content.content-tablet{
 flex-direction:column;
 gap:35px;
 padding:0 20px;
 text-align:center;
}

.features-content.content-desktop{
 flex-direction:row;
 gap:40px;
 padding:0;
 text-align:left;
}

.features-content.content-mobile .features-images,
.features-content.content-tablet .features-images{
 width:100%;
 max-width:100%;
 margin-left:0;
 padding:0 15px;
}

.features-content.content-desktop .features-images{
 max-width:500px;
 margin-left:40px;
 padding:0;
}

.stats-layout.stats-mobile{
 flex-direction:column;
 gap:20px;
 align-items:center;
}

.stats-layout.stats-tablet{
 flex-direction:column;
 gap:25px;
 align-items:center;
}

.stats-layout.stats-desktop{
 flex-direction:row;
 gap:30px;
 align-items:flex-start;
}

.stats-layout.stats-mobile .stats-sidebar{
 width:100%;
 order:2;
}

.stats-layout.stats-tablet .stats-sidebar{
 width:100%;
 order:2;
}

.stats-layout.stats-desktop .stats-sidebar{
 width:200px;
 order:1;
}

.stats-layout.stats-mobile .stats-main{
 order:1;
}

.stats-layout.stats-tablet .stats-main{
 order:1;
}

.stats-layout.stats-desktop .stats-main{
 order:2;
}

/* 性能优化 - 使用transform替代布局属性 */
.navbar-collapse{
 will-change:transform, opacity;
}

.nav-items{
 will-change:transform;
}

.testimonials-grid,
.features-grid,
.model-selector{
 will-change:auto;/* 避免不必要的composite layer */
}


/* 响应式设计 */

/* 桌面端导航样式（默认） */
@media (min-width:993px){
 .navbar-toggler{
 display:none !important;
}
 
 .navbar-collapse{
 display:flex !important;
 flex-direction:row;
 position:static;
 background-color:transparent;
 border:none;
 box-shadow:none;
 padding:0;
 margin:0;
 transform:none;
 opacity:1;
 width:auto;
 /* 确保flex布局正确 */
 flex-grow:1;
 align-items:center;
 justify-content:space-between;
}
 
 .nav-items{
 position:absolute !important;
 left:50% !important;
 transform:translateX(-50%) !important;
 flex-direction:row !important;
 gap:2rem !important;
 margin:0 !important;
 margin-bottom:0 !important;
 width:auto !important;
 display:flex !important;
 white-space:nowrap;
}
 
 .nav-link{
 padding:0.5rem 0 !important;
 border-bottom:none !important;
 text-align:left !important;
}
 
 .nav-right{
 justify-content:flex-end !important;
 padding-top:0 !important;
 border-top:none !important;
 width:auto !important;
 margin-left:auto !important;
 display:flex !important;
 align-items:center;
 gap:1rem;
 flex-shrink:0;
}
}

@media (max-width:1024px){
 .testimonials-grid{
 grid-template-columns:repeat(2, 1fr);
}
}

/* 平板横屏和小型桌面 (768px - 992px) */
@media (max-width:992px) and (min-width:769px){
 /* 显示汉堡菜单按钮 */
 .navbar-toggler{
 display:block !important;
 order:3;
}

 /* 重置导航布局 */
 .navbar-collapse{
 flex-direction:column;
 width:100%;
 position:absolute;
 top:100%;
 left:0;
 transform:none;
 background-color:var(--background-color);
 border:1px solid var(--border-color);
 border-radius:0.375rem;
 box-shadow:var(--card-shadow);
 padding:1rem;
 margin-top:0.5rem;
 z-index:1000;
}

 .navbar-collapse.show{
 display:flex !important;
}

 .navbar-collapse:not(.show){
 display:none !important;
}

 .nav-items{
 position:relative;
 left:auto;
 transform:none;
 flex-direction:column;
 gap:0.5rem;
 width:100%;
 margin-bottom:1rem;
}

 .nav-link{
 padding:0.75rem 0;
 border-bottom:1px solid var(--border-color);
 text-align:center;
}

 .nav-link:last-child{
 border-bottom:none;
}

 .nav-right{
 justify-content:center;
 padding-top:0.5rem;
 border-top:1px solid var(--border-color);
 width:100%;
 position:relative;
 right:auto;
}

 .navbar .container{
 position:relative;
}

 .logo{
 order:1;
 flex-grow:1;
}
}

@media (max-width:768px){
 /* 移动端显示汉堡菜单按钮 */
 .navbar-toggler{
 display:block !important;
 order:3;
}

 /* 移动端重置导航布局 */
 .navbar-collapse{
 flex-direction:column;
 width:100%;
 position:absolute;
 top:100%;
 /* left:0;*/
 transform:none;
 background-color:var(--background-color);
 border:1px solid var(--border-color);
 border-radius:0.375rem;
 box-shadow:var(--card-shadow);
 padding:1rem;
 margin-top:0.5rem;
 z-index:1000;
}

 .navbar-collapse.show{
 display:flex !important;
}

 .navbar-collapse:not(.show){
 display:none !important;
}

 .nav-items{
 position:relative;/* 移动端取消绝对定位 */
 left:auto;
 transform:none;
 flex-direction:column;
 gap:0.5rem;
 width:100%;
 margin-bottom:1rem;
}

 .nav-link{
 padding:0.75rem 0;
 border-bottom:1px solid var(--border-color);
 text-align:center;
}

 .nav-link:last-child{
 border-bottom:none;
}

 .nav-right{
 justify-content:center;
 padding-top:0.5rem;
 border-top:1px solid var(--border-color);
 width:100%;
 position:relative;
 right:auto;
}

 .navbar .container{
 position:relative;
}

 .logo{
 order:1;
 flex-grow:1;
}
 /* 英雄区域移动端优化 */
 .hero{
 padding:40px 15px 30px;/* 减少上下内边距，左右间距更紧凑 */
}
 
 .hero h4{
 font-size:1.75rem;/* 调整标题大小更适合移动端 */
 line-height:1.3;
 margin-bottom:16px;
 padding:0 10px;/* 左右增加一点内边距 */
}
 
 .hero p{
 font-size:16px;/* 调整描述文字大小 */
 line-height:1.5;
 margin:0 auto 30px;
 padding:0 10px;
}
 
 /* 打字机效果在移动端的优化 */
 .typewrite{
 font-size:1.5rem;
}
 /* 平台特性区域移动端优化 */
 .features{
 padding:40px 0;/* 减少上下内边距 */
}
 
 .features-content{
 flex-direction:column;
 gap:30px;/* 调整间距 */
 padding:0 15px;/* 左右增加内边距 */
}
 
 .features-text{
 padding:0;/* 取消原有的50px上下内边距 */
 text-align:center;/* 移动端居中显示 */
}
 
 .features h2{
 font-size:2rem;/* 调整标题大小 */
 margin-bottom:12px;
}
 
 .features p{
 font-size:1rem;/* 调整描述文字大小 */
 margin-bottom:20px;
}
 
 .features-list{
 text-align:left;/* 特性列表左对齐 */
 max-width:100%;
}
 
 .feature-item{
 margin-bottom:12px;/* 增加特性项之间的间距 */
}
 
 .features-images{
 width:100%;
 max-width:100%;
 margin-left:0;
 padding:0 15px;/* 图片容器左右内边距 */
}
 
 /* 按钮在移动端的布局优化 - 一行显示 */
 .flex.align-items-center{
 flex-direction:row;/* 改为行布局，一行显示 */
 justify-content:center;/* 移动端居中对齐 */
 gap:10px;/* 减小间距以适应移动端 */
 flex-wrap:wrap;/* 如果空间不够允许换行 */
}
 
 .join-us-btn{
 margin-left:0 !important;/* 取消左边距 */
 flex:0 0 auto;/* 不伸缩，保持原始大小 */
 font-size:12px;/* 移动端字体稍小 */
 padding:6px 12px;/* 调整内边距使按钮更紧凑 */
 text-align:center;
}
 /* 企业级能力区域移动端优化 */
 .testimonials{
 padding:40px 0;/* 减少上下内边距 */
}
 
 .testimonials .container{
 padding:0 15px;/* 左右增加内边距 */
}
 
 .testimonials-grid{
 grid-template-columns:1fr;
 gap:1.5rem;/* 调整卡片间距 */
 margin-top:30px;
}
 
 .testimonial-card{
 padding:1.5rem;/* 调整卡片内边距 */
 margin-bottom:0;/* 取消下边距，使用grid gap控制 */
}
 
 .testimonial-card .icon{
 font-size:1.5rem;/* 调整图标大小 */
 margin-bottom:1rem;
}
 
 .testimonial-card h3{
 font-size:1.125rem;/* 调整标题大小 */
 margin-bottom:0.75rem;
 line-height:1.4;
}
 
 .testimonial-card p{
 font-size:0.9rem;/* 调整描述文字大小 */
 line-height:1.5;
 margin-bottom:1rem;
}
 
 .testimonials h2{
 font-size:1.75rem;/* 调整主标题大小 */
 margin-bottom:0.75rem;
 padding:0 15px;
}
 
 .testimonials .subtitle{
 font-size:1.125rem;/* 调整副标题大小 */
 margin-bottom:0.5rem;
 padding:0 15px;
}
 
 .testimonials .description{
 font-size:0.9rem;/* 调整描述大小 */
 margin-bottom:2rem;
 padding:0 15px;
}
 /* 数据统计和排行榜区域移动端优化 */
 .data-stats{
 padding:40px 0;/* 减少上下内边距 */
}
 
 .data-stats .container{
 padding:0 15px;/* 左右增加内边距 */
}
 
 .section-title{
 font-size:1.75rem;/* 调整标题大小 */
 margin-bottom:20px;
 padding:0 15px;
}
 
 /* 联系客户经理按钮优化 */
 .contact-manager-btn{
 margin-bottom:25px;
 width:100%;
 max-width:250px;
}
 
 .stats-layout{
 flex-direction:column;
 gap:20px;/* 调整间距 */
 align-items:center;/* 移动端居中对齐 */
}
 
 .stats-sidebar{
 width:100%;
 order:2;/* 让侧边栏在下方 */
}
 
 .stats-main{
 order:1;/* 让主要内容在上方 */
}
 
 .metric-selector{
 flex-direction:row;
 justify-content:center;
 margin:10px;
 gap:10px;
}
 
 .metric-btn{
 width:auto;
 flex:1;
 max-width:120px;
 font-size:14px;
 padding:10px 15px;
}
 
 .model-selector{
 justify-content:center;
 grid-template-columns:repeat(auto-fill, minmax(140px, 1fr));
 gap:8px;
 padding:10px 5px;
}
 
 .model-btn{
 font-size:12px;
 padding:6px 12px;
}
 
 .chart-container{
 height:300px;
 padding:10px;
 margin-bottom:20px;
}
 
 /* 排行榜区域优化 */
 .ranking-box{
 margin:0 15px;
}
 
 .time-selector{
 padding:8px;
}
 
 .time-btn{
 padding:6px 12px;
 font-size:14px;
}
 
 .ranking-item{
 padding:12px;
}
 
 .ranking-number{
 font-size:14px;
 width:28px;
}
 
 .ranking-model{
 font-size:14px;
 margin-left:8px;
}
 
 .ranking-tokens{
 font-size:14px;
}
 
 /* 通用容器优化 */
 .container{
 padding:15px;
}
 
 /* 通用区域间距优化 */
 section{
 margin-bottom:20px;
}
 
 /* 通用标题优化 */
 h1, h2, h3, h4, h5, h6{
 line-height:1.3;
 margin-bottom:0.75rem;
}
 
 /* 通用按钮优化 */
 .hero-cta-btn,
 .join-us-btn,
 .contact-manager-btn{
 margin:10px auto;
 display:block;
}
 .footer-content{
 grid-template-columns:1fr;
 text-align:center;
 gap:30px;
}
 .footer-contact{
 align-items:center;
}
}


/* 强制重排辅助类 */
.force-reflow{
 transform:translateZ(0);
 will-change:transform;
}

.force-reflow *{
 transform:translateZ(0);
 will-change:auto;
}

/* 工具类 */

.mx-auto{
 margin-left:auto;
 margin-right:auto;
}

.px-4{
 padding-left:1rem;
 padding-right:1rem;
}

.py-8{
 padding-top:2rem;
 padding-bottom:2rem;
}

.flex{
 display:flex;
}

.justify-center{
 justify-content:center;
}

.mb-8{
 margin-bottom:2rem;
}

.rounded-lg{
 border-radius:0.5rem;
}

.shadow-lg{
 box-shadow:var(--card-shadow);
}

.p-6{
 padding:1.5rem;
}

.rounded-full{
 border-radius:9999px;
}

.p-1\.5{
 padding:0.375rem;
}


/* 主题切换动画 */

body{
 transition:background-color 0.3s ease, color 0.3s ease;
}

.theme-icon{
 transition:transform 0.3s ease;
}

.theme-switcher:hover .theme-icon{
 transform:rotate(360deg);
}


/* 修复Chart.js在暗色模式下的文字颜色 */

[data-theme="dark"] canvas{
 filter:invert(1) hue-rotate(180deg);
}

.text-centent{
 text-align:center;
}


/* Hero Banner 单图样式 */
.hero-banner{
 width:100%;
 max-width:1050px;
 margin:0 auto 1rem;
}

.hero-banner img{
 width:100%;
 height:auto;
 display:block;
}

/* Hero 内容区域样式 */
.hero-content{
 text-align:center;
 padding:15px 0 40px;
}

.hero-title{
 font-size:2.5rem;
 font-weight:700;
 color:#1f2937;
 margin-bottom:16px;
 display:flex;
 align-items:center;
 justify-content:center;
 flex-wrap:wrap;
 gap:12px;
}

.hero-badge{
 background:linear-gradient(135deg, #f97316, #ea580c);
 color:white;
 font-size:0.875rem;
 padding:4px 12px;
 border-radius:20px;
 font-weight:500;
}

.hero-subtitle{
 font-size:2rem;
 font-weight:700;
 color:#1f2937;
 margin-bottom:20px;
}

.highlight-text{
 color:#1f2937;
 font-weight:600;
}

.hero-slogan{
 font-size:1.1rem;
 color:#6b7280;
 margin:16px 0 24px;
}

[data-theme="dark"] .hero-slogan{
 color:#9ca3af;
}

.hero-description{
 font-size:1rem;
 color:#1f2937;
 max-width:700px;
 margin:0 auto 30px;
 line-height:1.8;
}

.hero-description .highlight-text{
 font-weight:600;
}

/* 模型标签 */
.hero-model-tags{
 display:flex;
 justify-content:center;
 flex-wrap:wrap;
 gap:12px;
 margin-bottom:16px;
}

.model-tag{
 padding:8px 20px;
 border:none;
 border-radius:25px;
 font-size:0.95rem;
 color:#374151;
 background:#f3f4f6;
 transition:all 0.3s ease;
 cursor:default;
}

.model-tag:hover{
 color:#5a4fcf;
 background:#ede9fe;
}

/* 按钮组 */
.hero-buttons{
 display:flex;
 justify-content:center;
 gap:16px;
 flex-wrap:wrap;
}

.hero-doc-btn{
 display:inline-block;
 background:linear-gradient(135deg, #8b5cf6, #7c3aed);
 color:white;
 padding:14px 32px;
 border-radius:8px;
 font-size:18px;
 font-weight:600;
 text-decoration:none;
 cursor:pointer;
 transition:transform 0.3s ease, box-shadow 0.3s ease;
 box-shadow:0 4px 15px rgba(139, 92, 246, 0.4);
 border:none;
}

.hero-doc-btn:hover{
 transform:translateY(-2px) scale(1.02);
 box-shadow:0 6px 25px rgba(139, 92, 246, 0.5);
 color:white;
}

.hero-doc-btn i{
 margin-right:8px;
}

/* 按钮下方提示文字 */
.hero-cta-tip{
 display:inline-flex;
 align-items:center;
 gap:6px;
 font-size:0.9rem;
 color:#f97316;
 margin-top:10px;
 padding:8px 20px;
 background:linear-gradient(135deg, rgba(249, 115, 22, 0.1), rgba(234, 88, 12, 0.1));
 border:1px dashed #f97316;
 border-radius:20px;
 animation:tip-pulse 2s ease-in-out infinite;
}

.hero-cta-tip::before{
 content:"🎁";
}

@keyframes tip-pulse{
 0%, 100%{
 transform:scale(1);
 box-shadow:0 0 0 0 rgba(249, 115, 22, 0.3);
}
 50%{
 transform:scale(1.02);
 box-shadow:0 0 15px 0 rgba(249, 115, 22, 0.2);
}
}

[data-theme="dark"] .hero-cta-tip{
 background:linear-gradient(135deg, rgba(249, 115, 22, 0.15), rgba(234, 88, 12, 0.15));
 color:#fb923c;
 border-color:#fb923c;
}

/* 暗色模式适配 */
[data-theme="dark"] .hero-title{
 color:#f3f4f6;
}

[data-theme="dark"] .hero-subtitle{
 color:#f3f4f6;
}

[data-theme="dark"] .hero-description{
 color:#e5e7eb;
}

[data-theme="dark"] .highlight-text{
 color:#f3f4f6;
}

[data-theme="dark"] .model-tag{
 background:#374151;
 color:#e5e7eb;
}

[data-theme="dark"] .model-tag:hover{
 background:#4b5563;
 color:#a5b4fc;
}

/* 响应式 */
@media (max-width:768px){
 .hero-title{
 font-size:1.75rem;
}
 .hero-subtitle{
 font-size:1.5rem;
}
 .hero-description{
 font-size:0.9rem;
 padding:0 15px;
}
 .model-tag{
 padding:6px 14px;
 font-size:0.85rem;
}
 .hero-cta-btn,
 .hero-doc-btn{
 padding:12px 24px;
 font-size:16px;
}
}

/* 按钮样式优化 - 保持原有布局 */

.hero-cta-btn{
 display:inline-block;
 background:linear-gradient(135deg, var(--gradient-from), var(--gradient-to));
 color:white;
 padding:14px 32px;
 border-radius:8px;
 font-size:18px;
 font-weight:600;
 text-decoration:none;
 cursor:pointer;
 transition:transform 0.3s ease, box-shadow 0.3s ease;
 box-shadow:0 4px 15px rgba(251, 191, 36, 0.4);
 margin:20px 0;
 border:none;
 will-change:transform;
 position:relative;
 animation:pulse-glow 2s ease-in-out infinite;
}

/* 脉冲发光动画 */
@keyframes pulse-glow{
 0%, 100%{
 box-shadow:0 4px 15px rgba(251, 191, 36, 0.4),
 0 0 20px rgba(251, 191, 36, 0.2);
}
 50%{
 box-shadow:0 4px 20px rgba(251, 191, 36, 0.6),
 0 0 40px rgba(251, 191, 36, 0.4),
 0 0 60px rgba(251, 191, 36, 0.2);
}
}

/* 火箭图标浮动动画 */
@keyframes rocket-float{
 0%, 100%{
 transform:translateY(0);
}
 50%{
 transform:translateY(-3px);
}
}

.hero-cta-btn i{
 margin-right:8px;
 font-size:16px;
 display:inline-block;
 animation:rocket-float 1.5s ease-in-out infinite;
}

.hero-cta-btn:hover{
 transform:translateY(-2px) scale(1.02);
 box-shadow:0 6px 25px rgba(251, 191, 36, 0.5),
 0 0 50px rgba(251, 191, 36, 0.3);
 color:white;
 animation:none;/* 悬停时停止脉冲，突出悬停效果 */
}

.hero-cta-btn:active{
 transform:translateY(0) scale(0.98);
}

.join-us-btn{
 display:inline-block;
 background:linear-gradient(135deg, #667eea 0%, #764ba2 100%);
 color:white;
 padding:8px 20px;
 border-radius:6px;
 font-size:14px;
 font-weight:500;
 text-decoration:none;
 cursor:pointer;
 transition:transform 0.3s ease, box-shadow 0.3s ease;
 box-shadow:0 2px 6px rgba(102, 126, 234, 0.3);
 margin-top:15px;
 border:none;
 will-change:transform;/* 优化动画性能 */
}

.join-us-btn i{
 margin-right:5px;
 font-size:12px;
}

.join-us-btn:hover{
 transform:translateY(-1px);
 box-shadow:0 3px 10px rgba(102, 126, 234, 0.4);
 color:white;
}

.join-us-btn:active{
 transform:translateY(0);
}

.contact-manager-btn{
 display:inline-block;
 background:linear-gradient(135deg, #11998e 0%, #38ef7d 100%);
 color:white;
 padding:8px 16px;
 border-radius:6px;
 font-size:13px;
 font-weight:500;
 text-decoration:none;
 cursor:pointer;
 transition:all 0.3s ease;
 box-shadow:0 2px 6px rgba(17, 153, 142, 0.3);
 margin-bottom:15px;
 border:none;
}

.contact-manager-btn i{
 margin-right:4px;
 font-size:11px;
}

.contact-manager-btn:hover{
 transform:translateY(-1px);
 box-shadow:0 3px 10px rgba(17, 153, 142, 0.4);
 color:white;
}

.contact-manager-btn:active{
 transform:translateY(0);
}


/* 暗色主题下的按钮样式调整 */

[data-theme="dark"] .hero-cta-btn{
 box-shadow:0 2px 8px rgba(255, 215, 0, 0.3);
}

[data-theme="dark"] .hero-cta-btn:hover{
 box-shadow:0 4px 12px rgba(255, 215, 0, 0.4);
}

[data-theme="dark"] .join-us-btn{
 box-shadow:0 2px 6px rgba(102, 126, 234, 0.4);
}

[data-theme="dark"] .join-us-btn:hover{
 box-shadow:0 3px 10px rgba(102, 126, 234, 0.5);
}

[data-theme="dark"] .contact-manager-btn{
 box-shadow:0 2px 6px rgba(17, 153, 142, 0.4);
}

[data-theme="dark"] .contact-manager-btn:hover{
 box-shadow:0 3px 10px rgba(17, 153, 142, 0.5);
}


/* 响应式设计 */

@media (max-width:768px){
 .hero-cta-btn{
 padding:8px 20px;
 font-size:14px;
}
 .join-us-btn{
 padding:6px 16px;
 font-size:13px;
}
 .contact-manager-btn{
 padding:6px 14px;
 font-size:12px;
}
}


/* 社交媒体图标样式 */

.social-media-icons{
 display:flex;
 gap:12px;
 margin-top:15px;
 flex-wrap:wrap;
}

.social-icon{
 display:flex;
 align-items:center;
 justify-content:center;
 width:40px;
 height:40px;
 border-radius:8px;
 color:white;
 text-decoration:none;
 transition:all 0.3s ease;
 font-size:16px;
 box-shadow:0 2px 8px rgba(0, 0, 0, 0.1);
}

.social-icon:hover{
 transform:translateY(-2px);
 box-shadow:0 4px 12px rgba(0, 0, 0, 0.2);
 color:white;
}

.social-icon i{
 font-size:18px;
}


/* 暗色主题下的社交媒体图标 */

[data-theme="dark"] .social-icon{
 box-shadow:0 2px 8px rgba(0, 0, 0, 0.3);
}

[data-theme="dark"] .social-icon:hover{
 box-shadow:0 4px 12px rgba(0, 0, 0, 0.4);
}


/* 响应式设计 - 社交媒体图标 */

@media (max-width:768px){
 .social-media-icons{
 gap:10px;
 margin-top:12px;
}
 .social-icon{
 width:36px;
 height:36px;
 font-size:14px;
}
 .social-icon i{
 font-size:16px;
}
}


/* 博客尾部 */

.blog-footer{
 max-width:1200px;
 margin:2em auto 2em;
 padding-top:2em;
 border-top:1px solid var(--border-color, #e5e7eb);
 display:flex;
 justify-content:space-between;
}


/* 上一篇文章 */

.prev{
 display:flex;
 text-decoration:none;
 color:#57697d;
 img{
 margin:0 1em;
 max-width:120px;
 max-height:80px;
 object-fit:cover;
 border-radius:8px;
}
 .prev_title{
 width:400px;
 white-space:nowrap;
 overflow:hidden;
 text-overflow:ellipsis;
 color:black;
 font-size:15px;
 font-weight:bold;
}
}


/* 下一篇文章 */

.next{
 display:flex;
 text-decoration:none;
 color:#57697d;
 img{
 margin:0 1em;
 max-width:120px;
 max-height:80px;
 object-fit:cover;
 border-radius:8px;
}
 .next_text{
 text-align:right;
}
 .next_title{
 width:400px;
 text-align:right;
 white-space:nowrap;
 overflow:hidden;
 text-overflow:ellipsis;
 color:black;
 font-size:15px;
 font-weight:bold;
}
}


/* 微信图标悬浮效果 */

.social-icon.wechat-icon{
 position:relative;
}

.wechat-qrcode{
 position:absolute;
 bottom:100%;
 left:50%;
 transform:translateX(-50%);
 background-color:white;
 border-radius:8px;
 box-shadow:0 4px 12px rgba(0, 0, 0, 0.15);
 padding:10px;
 text-align:center;
 width:150px;
 opacity:0;
 visibility:hidden;
 transition:opacity 0.3s ease, visibility 0.3s ease;
 z-index:100;
 margin-bottom:10px;
 will-change:opacity;/* 优化动画性能 */
}

.wechat-qrcode:after{
 content:'';
 position:absolute;
 top:100%;
 left:50%;
 transform:translateX(-50%);
 border-width:8px;
 border-style:solid;
 border-color:white transparent transparent transparent;
}

.wechat-qrcode img{
 width:100%;
 border-radius:4px;
 aspect-ratio:1 / 1;/* 保持二维码正方形 */
}

.product-image{
 width:100%;
 height:auto;
 aspect-ratio:3 / 2;/* 300x200 比例 */
 object-fit:cover;
 border-radius:8px;
 transition:transform 0.3s ease;
}

.wechat-qrcode p{
 margin:8px 0 0;
 font-size:12px;
 color:#333;
}


/* 轮播图样式 */
.hero-carousel{
 width:100%;
 max-width:1050px;
 margin:0 auto 1rem;
 position:relative;
 /* 预留固定高度防止CLS */
 min-height:350px;
}

.carousel-container{
 position:relative;
 width:100%;
 height:350px;
 border-radius:12px;
 overflow:hidden;
 box-shadow:0 8px 32px rgba(0, 0, 0, 0.12);
 background-color:var(--card-background);
 /* 添加骨架屏效果 */
 /* background-image:linear-gradient(90deg, #f0f0f0 25%, transparent 25%), 
 linear-gradient(#f0f0f0 50%, transparent 50%);*/
 background-size:20px 20px;
 /* 防止布局偏移 */
 contain:layout;
}

.carousel-slides{
 position:relative;
 height:100%;
 display:flex;
 transition:transform 0.5s ease-in-out;
 /* 宽度将通过JavaScript动态设置 */
}

.carousel-slide{
 position:relative;
 height:100%;
 flex-shrink:0;
 cursor:pointer;
 /* 宽度将基于总slides数量计算 */
}

.carousel-slide img{
 width:100%;
 height:100%;
 object-fit:contain;/* 改为contain确保完整显示 */
 object-position:center;
 display:block;
 /* 防止图片加载闪烁 */
 opacity:0;
 transition:opacity 0.3s ease;
}

.carousel-slide img.loaded{
 opacity:1;
}

/* 左右切换按钮 */
.carousel-btn{
 position:absolute;
 top:50%;
 transform:translateY(-50%);
 background:rgba(0, 0, 0, 0.5);
 color:white;
 border:none;
 border-radius:50%;
 width:50px;
 height:50px;
 display:flex;
 align-items:center;
 justify-content:center;
 cursor:pointer;
 font-size:18px;
 opacity:0;
 visibility:hidden;
 transition:all 0.3s ease;
 z-index:2;
}

.carousel-prev{
 left:20px;
}

.carousel-next{
 right:20px;
}

.carousel-btn:hover{
 background:rgba(0, 0, 0, 0.7);
 transform:translateY(-50%) scale(1.1);
}

/* 底部指示器 */
.carousel-indicators{
 position:absolute;
 bottom:20px;
 /* left:50%;*/
 /* transform:translateX(-50%);*/
 display:flex;
 gap:8px;
 opacity:1;/* 始终显示 */
 visibility:visible;/* 始终可见 */
 transition:all 0.3s ease;
 z-index:2;
 justify-content:center;/* 内容居中 */
}

.carousel-indicator{
 width:12px;
 height:12px;
 border-radius:50%;
 background:rgba(255, 255, 255, 0.5);
 cursor:pointer;
 transition:all 0.3s ease;
}

.carousel-indicator.active{
 background:white;
 transform:scale(1.2);
}

.carousel-indicator:hover{
 background:rgba(255, 255, 255, 0.8);
}

/* 鼠标悬浮时显示控制按钮，指示器始终显示 */
.carousel-container:hover .carousel-btn{
 opacity:1;
 visibility:visible;
}

/* 响应式设计 */
@media (max-width:1200px){
 .hero-carousel{
 max-width:100%;
 margin:0 0 1.5rem;
 min-height:300px;/* 平板端减小预留高度 */
}
 
 .carousel-container{
 height:300px;/* 减小高度 */
 border-radius:8px;
}
}

@media (max-width:768px){
 .hero-carousel{
 min-height:200px;/* 移动端进一步减小 */
}
 
 .carousel-container{
 height:200px;/* 移动端大幅减小高度 */
 border-radius:6px;
}
 
 .carousel-slides{
 position:relative;
 width:100%;
 height:100%;
}
 
 .carousel-slide{
 position:relative;
 width:auto;
 height:100%;
}
 
 .carousel-btn{
 width:40px;
 height:40px;
 font-size:16px;
}
 
 .carousel-prev{
 left:15px;
}
 
 .carousel-next{
 right:15px;
}
 
 .carousel-indicators{
 bottom:15px;
}
 
 .carousel-indicator{
 width:10px;
 height:10px;
}
}

/* 700px以下开始使用contain确保图片完整显示 */
@media (max-width:700px){
 .carousel-slide img{
 object-fit:contain !important;/* 确保图片完整显示 */
 object-position:center;
 background-color:var(--card-background);
}
}

@media (max-width:480px){
 .hero-carousel{
 min-height:180px;/* 小屏设备最小高度 */
}
 
 .carousel-container{
 height:180px;/* 小屏设备高度 */
}
 
 .carousel-btn{
 width:35px;
 height:35px;
 font-size:14px;
}
 
 .carousel-prev{
 left:10px;
}
 
 .carousel-next{
 right:10px;
}
 
 .carousel-indicators{
 bottom:10px;
 gap:6px;
}
 
 .carousel-indicator{
 width:8px;
 height:8px;
}
}

/* 针对更小的屏幕（iPhone SE等）特别优化 */
@media (max-width:375px){
 .hero-carousel{
 min-height:160px;
}
 
 .carousel-container{
 height:160px;
 margin:0 -10px;/* 负边距让轮播图稍微突出容器边界 */
}
 
 .carousel-slide img{
 object-fit:contain !important;
 width:100%;
 height:100%;
}
}

/* Footer预留空间防止CLS */
#footer-placeholder{
 background-color:var(--card-background);
 position:relative;
}

/* PC端页脚占位符设置 */
@media (min-width:1024px){
 #footer-placeholder{
 min-height:350px;
}
}

/* 移动端页脚占位符设置 */
@media (max-width:1023px){
 #footer-placeholder{
 min-height:500px;/* 移动端预留更多高度 */
}
}

/* Footer加载状态 */
#footer-placeholder:empty::before{
 content:'';
 position:absolute;
 top:50%;
 left:50%;
 width:30px;
 height:30px;
 margin:-15px 0 0 -15px;
 border:2px solid #f3f3f3;
 border-top:2px solid var(--text-color);
 border-radius:50%;
 animation:footer-spin 1s linear infinite;
}

@keyframes footer-spin{
 0%{transform:rotate(0deg);}
 100%{transform:rotate(360deg);}
}