/* 项目详情页整体 */

.project-detail{

    width:80%;
    max-width:1100px;
    margin:120px auto;

}



/* 项目标题 */

.project-title{

    text-align:center;
    margin-bottom:60px;

}


.project-title .tag{

    color:#4f8cff;
    letter-spacing:5px;
    font-size:14px;

}


.project-title h1{

    font-size:48px;
    margin:20px 0;

}


.project-title p{

    color:#aaa;
    font-size:18px;

}





/* 项目卡片 */

.project-card{

    background:#151e33;

    border:1px solid rgba(255,255,255,0.08);

    border-radius:20px;

    padding:35px;

    margin-bottom:30px;

    width:100%;

    box-sizing:border-box;

    transition:.3s;

}



.project-card:hover{

    transform:translateY(-5px);

    border-color:#4f8cff;

}





.project-card h2{

    color:#5da0ff;

    font-size:28px;

    margin-bottom:20px;

}



.project-card p,
.project-card li{

    color:#cbd5e1;

    line-height:2;

    font-size:17px;

}



/* SQL代码区域 */


pre{

    background:#0b1220;

    padding:30px;

    border-radius:15px;

    color:#7dd3fc;

    overflow:auto;

    font-size:16px;

    line-height:1.8;

}




/* 列表 */

.project-card ul{

    padding-left:25px;

}

/* 项目卡片布局 */

.project-detail > .project-card{
    width:100%;
}


.project-detail{
    display:block;
}

/* 分析结果指标卡 */

.result-container{

    display:flex;

    gap:20px;

    margin-top:30px;

}


.result-box{

    flex:1;

    background:#0b1220;

    padding:25px;

    border-radius:15px;

    border:1px solid rgba(255,255,255,0.08);

}


.result-box h3{

    color:#4f8cff;

    margin-bottom:15px;

}


.result-box p{

    color:#cbd5e1;

    font-size:15px;

    line-height:1.8;

}

/* 数据可视化 */

.chart-box{

background:#0b1220;

padding:30px;

border-radius:15px;

margin-top:20px;

}


.chart-box h3{

color:#4f8cff;

}


.bar{

margin:40px 0;

color:white;

}


.bar span{

display:block;

background:#4f8cff;

padding:1px;

margin-top:1px;

border-radius:30px;

}

/* 技术标签 */

.tech-tags{

display:flex;

gap:15px;

justify-content:center;

margin-top:25px;

flex-wrap:wrap;

}


.tech-tags span{

background:#16213a;

color:#6ea8ff;

padding:8px 18px;

border-radius:20px;

font-size:14px;

border:1px solid rgba(255,255,255,.1);

}

/* 企业场景图片 */

.image-box{

display:flex;

gap:20px;

margin-top:30px;

}


.image-box img{

width:32%;

height:220px;

object-fit:cover;

border-radius:15px;

border:1px solid rgba(255,255,255,0.1);

}

/* 供应链流程 */

.flow-container{

display:flex;

flex-direction:column;

align-items:center;

gap:12px;

margin-top:30px;

}


.flow-item{

width:220px;

text-align:center;

background:#151e33;

border:1px solid rgba(255,255,255,0.1);

padding:18px;

border-radius:12px;

color:#5da0ff;

font-size:18px;

}


.arrow{

font-size:24px;

color:#7da7ff;

}


.flow-item{

background:#151e33;

border:1px solid rgba(255,255,255,0.1);

padding:20px 25px;

border-radius:12px;

color:#5da0ff;

font-size:18px;

font-weight:bold;

}


.arrow{

color:#7da7ff;

font-size:25px;

}

/* ERP WMS分析模块 */


.system-container{

display:flex;

gap:25px;

margin-top:35px;

}



.system-box{

flex:1;

background:#0b1220;

border:1px solid rgba(255,255,255,0.08);

padding:30px;

border-radius:15px;

}



.system-box h3{

color:#4f8cff;

font-size:22px;

margin-bottom:20px;

}



.system-box ul{

padding-left:20px;

}



.system-box li{

color:#cbd5e1;

line-height:2;

font-size:16px;

}

/* 数字化业务流程 */

.process-container{

display:flex;
justify-content:center;
align-items:center;
gap:20px;
margin-top:40px;

}



.process-item{

width:220px;
padding:25px;
background:#0b1224;
border:1px solid rgba(255,255,255,0.1);
border-radius:15px;
text-align:center;

}



.process-item h3{

color:#5b8cff;
font-size:20px;
margin-bottom:15px;

}



.process-item p{

line-height:2;
color:#d5dcff;

}



.process-arrow{

font-size:35px;
color:#5b8cff;

}

/* 项目成果总结 */

.result-grid{

display:grid;
grid-template-columns:repeat(2,1fr);
gap:25px;
margin-top:35px;

}



.result-card{

background:#0b1224;
border:1px solid rgba(255,255,255,0.1);
padding:30px;
border-radius:15px;

}



.result-card h3{

color:#5b8cff;
font-size:22px;
margin-bottom:15px;

}



.result-card p{

color:#d5dcff;
line-height:1.8;

}

/* 供应链数据可视化 */

.chart-container{
    display:flex;
    gap:25px;
    margin-top:30px;
    flex-wrap:wrap;

    transition:all 0.35s ease;
    border:1px solid transparent;
}




.chart-card{

    background:#0c1325;

    border-radius:20px;

    padding:25px;

    flex:1;

    min-width:280px;

}


.chart-card h3{

    color:#5d8cff;

    margin-bottom:25px;

}



.bar-item{

    display:flex;

    align-items:center;

    gap:15px;

    margin-bottom:18px;

}



.bar-item span{

    width:80px;

}



.bar{

    flex:1;

    height:10px;

    background:#202a42;

    border-radius:10px;

}


.bar div{

    height:100%;

    background:#5d8cff;

    border-radius:10px;

}




.trend{

    display:flex;

    justify-content:space-around;

    align-items:flex-end;

    height:150px;

}



.trend div{

    text-align:center;

}



.trend strong{

    display:block;

    margin-top:20px;

    color:#5d8cff;

    font-size:22px;

}





.number-box{

    display:flex;

    justify-content:space-around;

    text-align:center;

}



.number-box h4{

    font-size:28px;

    color:#5d8cff;

    margin:0;

}


.number-box p{

    color:#ddd;

}

.project-section{

    width:1100px;

    margin:40px auto;

    background:#161d33;

    padding:40px;

    border-radius:25px;

    border:1px solid rgba(255,255,255,0.08);

    transition:all 0.35s ease;

}

.info-container{

    display:flex;

    gap:25px;

    margin-top:30px;

}


.info-card{

    flex:1;

    background:#0f1528;

    border-radius:18px;

    padding:25px;

    border:1px solid rgba(255,255,255,0.08);

    transition:0.3s;

}



.info-card:hover{

    transform:translateY(-8px);

    border-color:#5d8cff;

    box-shadow:0 15px 35px rgba(93,140,255,0.25);

}



.info-card h3{

    color:#5d8cff;

    margin-bottom:15px;

}



.info-card p{

    color:#ffffff;

    line-height:1.8;

}

.project-section:hover{

    transform:translateY(-8px);

    border-color:#3b82f6;

    box-shadow:
    0 20px 45px rgba(59,130,246,0.25);

}

.project-section h2{
    color:#5da0ff;
    font-size:28px;
    font-weight:800;
}

/* 项目顶部标题 */

.project-hero{

    text-align:center;
    
    padding:120px 20px 60px;

}


.project-en{

    color:#5d8cff;

    font-size:16px;

    letter-spacing:6px;

    margin-bottom:25px;

}


.project-hero h1{

    color:#ffffff;

    font-size:48px;

    font-weight:800;

    margin:0;

}


.project-subtitle{

    color:#aab4cc;

    font-size:20px;

    margin-top:25px;

}

.tag-container{

    display:flex;

    justify-content:center;

    gap:15px;

    margin-top:30px;

}


.tag-container span{

    padding:8px 20px;

    background:#161d33;

    border:1px solid rgba(255,255,255,.1);

    border-radius:20px;

    color:#5d8cff;

}

.project-image-container{

display:flex;

gap:30px;

margin-top:30px;

}


.project-image-container img{

width:50%;

border-radius:15px;

border:1px solid rgba(255,255,255,0.1);

transition:0.3s;

}


.project-image-container img:hover{

transform:translateY(-8px);

box-shadow:0 20px 40px rgba(59,130,246,0.25);

}

/* =========================
   音乐推荐项目补充样式
========================= */


.project-detail{
    max-width:1000px;
    margin:80px auto;
    padding:0 20px;
}


/* 顶部 */

.project-header{
    text-align:center;
    margin-bottom:50px;
}


.project-type{

    color:#4c8dff;
    letter-spacing:6px;
    font-size:14px;

}



.project-header h1{

    color:white;

    font-size:42px;

    margin:20px 0;

}



.subtitle{

    color:#aab4cc;

    font-size:18px;

}





/* 技术标签 */

.tags{

    display:flex;

    justify-content:center;

    gap:15px;

    flex-wrap:wrap;

    margin-top:25px;

}



.tags span{

    background:#182442;

    color:#7aa8ff;

    padding:8px 18px;

    border-radius:20px;

    font-size:14px;

}





/* 内容模块 */


.detail-card{


    background:#161f35;


    border:1px solid rgba(255,255,255,0.08);


    border-radius:20px;


    padding:35px;


    margin-bottom:25px;


    transition:.3s;


}



.detail-card:hover{


    transform:translateY(-5px);


    border-color:#3f6cff;


}





.detail-card h2{


    color:#5d9cff;


    font-size:26px;


    margin-bottom:20px;


}



.detail-card p{


    color:#c5cee0;


    font-size:16px;


    line-height:2;


}



.detail-card ul{


    color:#c5cee0;


    line-height:2;


    padding-left:25px;


}



.detail-card li{


    margin-bottom:10px;


}

/* 系统演示视频 */

.project-video{

    width:100%;

    height:520px;

    object-fit:cover;

    border-radius:20px;

    margin-top:25px;

    background:#000;

}