:root {
    --dark-bg: #0a0a0a;
    --navy-blue: #0f3470;
    --line-blue: #2254a8;
    --text-white: #ffffff;
    --text-gray: #cccccc;
    --gold-line: #b88935;
}



* {
    box-sizing: border-box;
}

body {
    margin: 0;
    background: #0a0a0a;
    color: white;
    font-family: "Microsoft YaHei", "Noto Sans SC", sans-serif;
}

.wrap-container {
    max-width:1760px;
    margin:auto;
    overflow:visible;
}



a {
    color: inherit;
    text-decoration: none;
}

.site-header {
    height:48px;
    padding:0 32px;
    display:flex;
    align-items:center;
    background:#062c62;

    position:fixed;
    top:0;
    left:0;
    width:100%;
    z-index:999;
}

.site-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 18px;
}

.brand-badge {
    width: 40px;
    height: 40px;
    background: url("../assets/images/logo.png") center/contain no-repeat;
}

.main-nav {
    margin-left: auto;
    display: flex;
    gap: 36px;
    font-size: 16px;
}

.detail-wrap {
    position:relative;
    padding:60px 32px 80px;
    min-height:calc(100vh - 48px);
    overflow:visible;
    background:#0a0a0a;
}

.bg-material{
    position:absolute;
    top:0;
    left:0;
    right:0;
    height:100%;
}

.bg-pattern-bg {
    background-image: url("../assets/images/bg/gold_pattern_bg.png");
    background-size: 100% auto;
    background-position: center -30px;
    background-repeat: no-repeat;
}

.detail-inner {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 1760px;
    margin: auto;
}

.detail-top-bar {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 40px;
}

.detail-title h2 {
    font-size: 35px;
    margin: 5px;
    font-weight: 500;
}

.detail-title h2 span {
    display: block;
    font-size: 22px;
    font-weight: 500;
    color: #ffffff;
    margin-top: 2px;
}

.tab-nav {
    display: flex;
    gap: 32px;
}

.tab-nav span {
    padding: 8px 18px;
    font-size: 18px;
    color: #ccc;
    cursor: pointer;
    border-radius: 30px;
    transition: 0.3s;
}

.tab-nav span.active {
    background: #0f3470;
    color: white;
}

.detail-layout{
    display:grid;
    grid-template-columns:575px 1fr;
    gap:60px;
    align-items:flex-start;
}

.left-panel{
    display:flex;
    flex-direction:column;
    gap:24px;

    transform: scale(0.98);

}

.pattern-preview-box{
    width:575px;
    height:342px;
    border-radius:16px;
    overflow:hidden;
    background:#0a0a0a;
}
.pattern-preview-box img{
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height:auto;
    display:block;
    margin: 0 auto;
    transform: rotate(90deg) scale(1.68);
}

.pattern-label-info h3 {
    font-size: 16px;
    font-weight: 600;
    margin: 0 0 -5px;
}

.pattern-label-info{
    width:100%;
}

.pattern-label-info p{
    width:100%;
    max-width:560px;

    font-size:15px;
    line-height:1.8;
}

.tag-type {
    display: inline-block;
    background: #174b91;
    padding: 5px 18px;
    border-radius: 24px;
    margin-top: -15px;
}

.audio-player {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 90px;
    gap: 8px;
}

.left-info-box {
    display: flex;
    align-items: center;
    gap: 15px;
}

.pattern-label-info {
    flex: 1;
}



.play-btn{
    width:60px;
    height:60px;
    border-radius:50%;
    font-weight: 700px;
    border:2px solid #fff;
    background:transparent;

    display:flex;
    justify-content:center;
    align-items:center;
    color:white;
    padding:0;
}

.play-btn span{
    width:0;
    height:0;

    border-top:12px solid transparent;
    border-bottom:12px solid transparent;
    border-left:18px solid #fff;

    margin-left:6px;
}



.wave-canvas {
    width: 120px;
    height: 50px;
}



.tab-content-item {
    display: none;
}

.tab-content-item.show {
    display: flex;
    flex-direction: column;
    gap: 30px;

}



.thumb-row {
    display: flex;
    gap: 30px;
}

.thumb-row img {
    width: 80px;
    height: 80px;
    border-radius: 50%;
}


.right-panel{

    width:100%;

    position:relative;

    overflow:visible;
   
}




.line-blue{
    width:100%;
    height:3px;
    background:#2254a8;
    margin:10px 0;
    flex-shrink:0;
    position:relative;
    z-index:1;
}

.line-blue.line-second{
    margin-top: 10px !important;
}

.tab-content-item[data-content="all"] > .line-blue:first-of-type {
    margin-bottom: 10px !important;
    margin-top: -15px !important;
}

.tab-content-item[data-content="all"] {
    padding-top: 25px !important;
}



.info-wrap{


    width:100%;


    display:flex;


    flex-direction:column;


    gap:30px;


    padding:12px 0;


}




.info-item{


    width:100%;


    height:120px;


    display:flex;


    align-items:center;


    gap:35px;


    padding:20px 35px;


    border-radius:28px;


    position:relative;


    box-sizing:border-box;


    transition:
    transform .35s ease,
    background .35s ease,
    box-shadow .35s ease;


    background:transparent;


    z-index:2;


}






.info-item img{


    width:100%;


    height:100%;


    object-fit:contain;


    flex-shrink:0;


}






.info-item div{


    flex:1;


}



.info-item h4{


    margin:0 0 5px;


    font-size:20px;


    color:#ffffff;


    font-weight:600;


}



.info-item p{


    margin:0;


    font-size:15px;


    line-height:1.25;


    color:#ffffff;


}





.info-item.active-highlight{


    background:

    rgba(34,84,168,.95);



    transform:scale(1.06);



    box-shadow:


    0 15px 35px rgba(34,84,168,.35);



}




.info-item.active-highlight::before{


    content:"";


    position:absolute;


    inset:10px;


}





.info-item + .info-item{


    margin-top:0;


}






.info-wrap{


    isolation:isolate;


}




.tab-content-item{

    
    width:100%;


}



.tab-content-item.show{


    display:block;

}


.info-item:not(:last-child)::after {

    content:"";

    position:absolute;

    bottom:-20px;

    left:0;

    width:100%;

    height:3px;

    background:#2254a8;

    z-index:1;

}


.info-item img {
    width: 80px;
    height: 80px;
    border-radius: 50%;
}



.info-all-mode {
    border-top: 3px solid #2254a8;
    border-bottom: 3px solid #2254a8;
}

.info-all-mode .info-item {
    border: none;
}

.text-content p {
    font-size: 17px;
    line-height: 1.5;
}

.color-row {
    display: flex;
    gap: 44px;
    flex-wrap: nowrap;
    margin-top: 25px;
}

.color-block {
    width: 90px;
    height: 50px;
    margin-bottom: 6px;
}

.color-item {
    text-align: center;
}