/* =========================
   DNT Website Style
   Clean Version
   Part 1
   Cleaned
========================= */


/* =========================
   基础
========================= */

*{
    box-sizing:border-box;
}


body{

    margin:0;

    background:#080808;

    color:white;

    font-family:
    "Microsoft YaHei",
    Arial,
    sans-serif;

    transition:.3s;

}


a{

    color:white;

    text-decoration:none;

}


a:hover{

    color:#ff99cc;

}



/* =========================
   白天模式
========================= */


body.light{

    background:#f5f5f5;

    color:#222;

}



body.light .project-page,
body.light .products-page{

    background:#ffffff;

    color:#222;

}



/* =========================
   主题按钮
========================= */


#theme-btn{

    position:fixed;

    right:25px;

    top:20px;

    width:45px;

    height:45px;

    border-radius:50%;


    display:flex;

    justify-content:center;

    align-items:center;


    background:#111;

    color:white;


    border:1px solid rgba(255,255,255,.3);


    cursor:pointer;

    font-size:20px;

    z-index:99999;

}



body.light #theme-btn{

    background:white;

    color:#222;

    border-color:#ccc;

}



/* =========================
   首页布局
========================= */


.container{

    display:flex;

    gap:40px;

    padding:40px;

}



.left{

    width:35%;

}



.right{

    width:65%;

}



.carousel img{

    width:100%;

    border-radius:20px;

    transition:.3s;

}




/* =========================
   页面通用容器
========================= */


.project-page,
.products-page{


    max-width:1000px;


    margin:60px auto;


    padding:40px;


    background:

    rgba(10,10,15,.9);


    border-radius:20px;


}




/* =========================
   导航按钮
========================= */


.nav-bar{


    display:flex;


    gap:15px;


    flex-wrap:wrap;


    margin-bottom:25px;


}



.back-btn{


    display:inline-block;


    padding:10px 18px;


    border-radius:20px;


    background:#111;


    color:white;


    border:1px solid rgba(255,255,255,.15);


    transition:.3s;


}



.back-btn:hover{


    transform:translateY(-3px);


    border-color:#8b6cff;


}



body.light .back-btn{


    background:white;

    color:#222;

    border-color:#ddd;


}





/* =========================
   文章分类
========================= */


.article-grid{


    display:grid;


    grid-template-columns:

    repeat(3,1fr);


    gap:20px;


}



.article-card{


    display:block;


    padding:18px;


    min-height:70px;


    background:#111;


    color:white;


    border-radius:15px;


    border:1px solid rgba(255,255,255,.15);


    transition:.3s;


}



.article-card:hover{


    transform:translateY(-4px);


    border-color:#8b6cff;


}



.article-card h3{


    margin:0;


    font-size:18px;


}



body.light .article-card{


    background:#fafafa;


    color:#222;


    border-color:#ddd;


}





/* =========================
   文章正文
========================= */


.article-content{


    font-size:18px;


    line-height:2;


}



.article-content p{


    margin:20px 0;


}




/* =========================
   项目卡片
========================= */


.projects a,
.project-card{


    display:block;


    padding:15px;


    margin:12px 0;


    background:#111;


    color:white;


    border-radius:15px;


    border:1px solid rgba(255,255,255,.12);


    transition:.3s;


}



.projects a:hover,
.project-card:hover{


    transform:translateY(-4px);


    border-color:#8b6cff;


}



body.light .projects a,
body.light .project-card{


    background:white;


    color:#222;


    border-color:#ddd;


}




/* =========================
   图片展示
========================= */


.project-images{


    display:flex;


    flex-wrap:wrap;


    gap:20px;


    justify-content:center;


}



.project-image{


    width:220px;


    border-radius:15px;


}



.project-video{


    width:320px;


    max-height:500px;


    border-radius:15px;


}
/* =========================
   周边展示
========================= */


.product-grid{


    display:grid;


    grid-template-columns:

    repeat(2,1fr);


    gap:20px;


}



.product-card{


    display:block;


    padding:15px;


    background:#111;


    color:white;


    border-radius:18px;


    border:1px solid rgba(255,255,255,.15);


    transition:.3s;


}



.product-card:hover{


    transform:translateY(-4px);


    border-color:#8b6cff;


}




.product-card img{


    width:100%;


    height:160px;


    object-fit:cover;


    border-radius:15px;


}



.product-card h3{


    margin:10px 0;


}



.product-card p{


    opacity:.7;


    font-size:14px;


}



body.light .product-card{


    background:white;


    color:#222;


    border-color:#ddd;


}




/* =========================
   周边详情
========================= */


.product-show{


    display:flex;


    justify-content:center;


    align-items:center;


    gap:30px;


    margin:40px 0;


}



.product-show img{


    width:500px;


    max-height:700px;


    object-fit:contain;


    border-radius:20px;


}



.product-info{


    padding:25px;


    background:#111;


    color:white;


    border-radius:20px;


}



body.light .product-info{


    background:white;


    color:#222;


}



.tags span{


    display:inline-block;


    padding:8px 15px;


    margin:5px;


    border-radius:20px;


    background:#222;


}



body.light .tags span{


    background:#eee;


    color:#222;


}





.buy-btn,
.detail-btn,
.download-btn{


    display:inline-block;


    padding:12px 30px;


    margin-top:20px;


    border-radius:25px;


    background:#111;


    color:white;


    border:1px solid #8b6cff;


    transition:.3s;


}



.buy-btn:hover,
.detail-btn:hover,
.download-btn:hover{


    transform:scale(1.05);


}



body.light .buy-btn,
body.light .detail-btn,
body.light .download-btn{


    background:white;


    color:#222;


}






/* =========================
   音乐播放器
========================= */


.music-box{


    position:fixed;


    left:20px;


    top:20px;


    width:200px;


    padding:12px;


    background:rgba(8,8,12,.95);


    border-radius:18px;


    border:1px solid rgba(255,255,255,.12);


    box-shadow:

    0 8px 30px rgba(0,0,0,.7);


    backdrop-filter:blur(10px);


    z-index:9999;


}



.music-title{


    font-size:12px;


}



.music-icon{


    font-size:16px;


}



#musicName{


    display:block;


    margin-top:5px;


    font-size:12px;


    overflow:hidden;


    white-space:nowrap;


    text-overflow:ellipsis;


}



.music-line{


    height:1px;


    margin:10px 0;


    background:rgba(255,255,255,.15);


}



.music-controls{


    display:flex;


    justify-content:center;


    align-items:center;


    gap:8px;


    flex-wrap:wrap;


}



.music-btn{


    border:none;


    border-radius:50%;


    background:#111;


    color:white;


    cursor:pointer;


    transition:.2s;


}



.music-btn:hover{


    transform:scale(1.1);


}



.music-btn.small{


    width:30px;


    height:30px;


}



.music-btn.play{


    width:42px;


    height:42px;


    font-size:20px;


}



.music-box select{


    width:95px;


    height:30px;


    border-radius:15px;


    background:#111;


    color:white;


    border:1px solid rgba(255,255,255,.2);


}



body.light .music-box{


    background:white;


    color:#222;


    border-color:#ddd;


}



body.light .music-btn{


    background:#eee;


    color:#222;


}



body.light .music-box select{


    background:white;


    color:#222;


}






/* =========================
   评论框
========================= */


.comment-box{


    position:fixed;


    right:25px;


    bottom:25px;


    width:260px;


    padding:15px;


    background:rgba(10,10,15,.9);


    border-radius:18px;


    border:1px solid rgba(255,255,255,.15);


    z-index:9999;


}



.comment-box textarea{


    width:100%;


    height:70px;


    resize:none;


    border-radius:12px;


    padding:10px;


    background:#111;


    color:white;


}



.comment-box button{


    width:100%;


    margin-top:8px;


    height:32px;


    border-radius:16px;


    background:#111;


    color:white;


    border:1px solid rgba(255,255,255,.2);


}



body.light .comment-box{


    background:white;


    color:#222;


    border-color:#ddd;


}



body.light .comment-box textarea{


    background:white;


    color:#222;


}



body.light .comment-box button{


    background:white;


    color:#222;


    border-color:#ddd;


}






/* =========================
   搜索框
========================= */


.search-box{


    position:fixed;


    right:85px;


    top:20px;


    z-index:99999;


}



.search-box input{


    width:220px;


    height:42px;


    padding:0 18px;


    border-radius:22px;


    background:rgba(10,10,15,.85);


    color:white;


    border:1px solid rgba(255,255,255,.2);


    outline:none;


}



.search-box input::placeholder{


    color:#aaa;


}



body.light .search-box input{


    background:white;


    color:#222;


    border-color:#ddd;


}






/* =========================
   手机适配（唯一）
========================= */


@media(max-width:700px){


    .container{


        padding:15px;


        flex-direction:column;


    }



    .left,
    .right{


        width:100%;


    }



    /* 手机排列顺序 */


    .right{


        display:flex;


        flex-direction:column;


    }



    .right h1{

        order:1;

    }



    .carousel{

        order:2;

    }



    .articles{

        order:3;

    }



    .products{

        order:4;

    }



    .projects{

        order:5;

    }




    .project-page,
    .products-page{


        margin:20px auto;


        padding:20px;


    }



    .article-grid{


        grid-template-columns:1fr;


    }



    .product-grid{


        grid-template-columns:1fr;


    }



    .nav-bar{


        flex-direction:column;


    }



    .back-btn{


        width:100%;


        text-align:center;


    }



    .product-show{


        flex-direction:column;


    }



    .product-show img{


        width:100%;


    }



    .music-box{


        width:130px;


        padding:6px;


        left:8px;


        top:8px;


    }



    .music-btn.small{


        width:22px;


        height:22px;


    }



    .music-btn.play{


        width:30px;


        height:30px;


        font-size:14px;


    }



    .music-box select{


        width:65px;


        height:22px;


    }



    .comment-box{


        width:140px;


        right:8px;


        bottom:8px;


        padding:8px;


    }



    .comment-box textarea{


        height:40px;


    }



    .search-box{


        right:70px;


        top:15px;


    }



    .search-box input{


        width:130px;


    }



    #theme-btn{


        right:15px;


        top:15px;


    }


}


/* =========================
   返回首页按钮
========================= */


.back-btn{


    display:block;


    width:160px;


    margin:40px auto;


    text-align:center;


}



/* 标题居中 */


.product-page h1,
.products-page h1,
.products-page > h1,
.project-page > h1{


    text-align:center !important;


}
@media(max-width:700px){

.container{

    display:flex;
    flex-direction:column;

}


/* 把左右盒子内容拆出来 */

.left,
.right{

    display:contents;

}


/* 重新排序 */


.right h1{

    order:1;

}


.carousel{

    order:2;

}


.articles{

    order:3;

}


.products{

    order:4;

}


.projects{

    order:5;

}


}
/* ==========================
   右上角搜索
========================== */


.search-box {

    position: fixed;

    top: 20px;

    right: 80px;

    z-index: 9999;

}



#site-search {


    width: 160px;


    padding: 8px 12px;


    font-size: 14px;


    color: #333;


    background: rgba(255,255,255,0.9);


    border: 1px solid rgba(120,120,120,0.3);


    border-radius: 15px;


    outline: none;


}



#site-search::placeholder {

    color:#777;

}



#site-search:focus {

    background:white;

}






/* ==========================
   搜索下拉结果
========================== */


#searchResult {


    display:none;


    position:absolute;


    top:45px;


    right:0;


    width:260px;


    max-height:350px;


    overflow-y:auto;


    background:rgba(255,255,255,0.95);


    border-radius:12px;


    padding:10px;


    box-shadow:0 8px 25px rgba(0,0,0,0.2);


}





.search-item {


    padding:10px;


    margin:5px 0;


    background:rgba(240,240,240,0.9);


    border-radius:8px;


}



.search-item a {


    color:#333;


    text-decoration:none;


    display:block;


}
@media (max-width:768px){


.search-box{

    top:15px;

    right:60px;

}



#site-search{

    width:120px;

    font-size:14px;

}



#searchResult{


    right:-40px;


    width:220px;


    max-height:300px;


}


}
/* ==========================
   手机端搜索修复
========================== */

.search-box {

    position: fixed;

    top: 15px;

    right: 60px;

    z-index: 99999;

}



#site-search {

    width: 130px;

    height: 34px;

    padding: 6px 12px;

    font-size: 14px;

    border-radius: 18px;

    background: rgba(255,255,255,0.95);

    color: #333;

    border: 1px solid #ccc;

}



#searchResult {

    position: fixed !important;


    top: 60px !important;


    right: 15px !important;


    left: auto !important;


    transform: none !important;


    width: 260px !important;


    max-width: calc(100vw - 30px);


    max-height: 60vh;


    overflow-y: auto;


    background: rgba(255,255,255,0.97);


    border-radius: 12px;


    padding: 10px;


    box-shadow: 0 5px 20px rgba(0,0,0,.25);


    z-index: 999999 !important;

}



.search-item {

    display:block;

    padding:12px;

    margin:6px 0;

    background:rgba(240,240,240,.9);

    border-radius:10px;

}



.search-item a {

    display:block;

    color:#333;

    text-decoration:none;

    font-size:14px;

}





@media(max-width:768px){


    #theme-btn {

        right:15px;

        top:15px;

    }



    .search-box {

        right:55px;

        top:15px;

    }



    #searchResult {

        top:60px !important;

        right:10px !important;

    }


}
/* ==========================
   手机浏览器兼容搜索
========================== */


.search-box {

    position:absolute;

    top:20px;

    right:70px;

    z-index:99999;


}



#site-search {


    width:160px;

    height:35px;


    padding:0 12px;


    border-radius:18px;


    border:1px solid rgba(0,0,0,.2);


    background:rgba(255,255,255,.9);


}





#searchResult {


    display:none;


    position:absolute;


    top:45px;


    right:0;


    width:260px;


    max-width:80vw;


    max-height:300px;


    overflow-y:auto;


    -webkit-overflow-scrolling:touch;


    background:#fff;


    border-radius:12px;


    box-shadow:0 5px 20px rgba(0,0,0,.25);


    z-index:999999;


}





.search-item {


    padding:12px;


    border-bottom:1px solid #eee;


}





.search-item a {


    color:#333;


    text-decoration:none;


    display:block;


}






/* 手机 */

@media(max-width:768px){


.search-box{


    top:15px;


    right:55px;


}



#site-search{


    width:120px;


}



#searchResult{


    width:230px;


    max-height:50vh;


}



}
.project-main-image{

    width:100%;

    max-width:100%;

    height:auto;

    display:block;

    margin:0 auto;

}


/* =========================
   语言切换按钮
========================= */

.lang-btn{

    position:fixed;

    right:auto;

    top:20px;

    height:45px;

    padding:0 16px;

    display:flex;

    align-items:center;

    justify-content:center;

    gap:6px;

    border-radius:22px;

    background:#111;

    color:white;

    border:1px solid rgba(255,255,255,.3);

    cursor:pointer;

    font-size:14px;

    user-select:none;

    z-index:99999;

}

.lang-btn span{

    opacity:.45;

}

.lang-btn span.active{

    opacity:1;

    font-weight:700;

}

.lang-btn .sep{

    opacity:.35;

}

body.light .lang-btn{
    position:fixed;

    background:white;

    color:#222;

    border-color:#ccc;

}

@media (max-width:700px){

    .lang-btn{
    position:fixed;

        right:auto;

        top:20px;

        height:40px;

        padding:0 12px;

        font-size:13px;

    }

}


/* =========================
   文章页语言切换按钮（生成器模板使用 .lang-switch）
========================= */

.lang-switch{

    position:fixed;

    right:auto;

    top:20px;

    height:45px;

    padding:0 16px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:22px;

    background:#111;

    color:white;

    border:1px solid rgba(255,255,255,.3);

    cursor:pointer;

    font-size:14px;

    user-select:none;

    z-index:99999;

}

body.light .lang-switch{
    position:fixed;

    background:white;

    color:#222;

    border-color:#ccc;

}

@media (max-width:700px){

    .lang-switch{
    position:fixed;

        right:auto;

        top:20px;

        height:40px;

        padding:0 12px;

        font-size:13px;

    }

}


/* =========================================
   顶栏统一布局（最后生效，覆盖历史重复规则）
   右上角依次为：搜索框 → 语言按钮 → 主题按钮
   音乐播放器在左上角，互不干扰
========================================= */

#theme-btn,
.lang-btn,
.lang-switch{

    position:fixed !important;
    top:20px !important;
    left:auto !important;
    z-index:100000 !important;

}

#theme-btn{

    right:25px !important;

}

.lang-btn,
.lang-switch{

    right:82px !important;

    height:45px !important;
    min-width:56px !important;

    padding:0 16px !important;

    display:flex !important;
    align-items:center !important;
    justify-content:center !important;

    border-radius:22px !important;

    background:#111;
    color:#fff;

    border:1px solid rgba(255,255,255,.3) !important;

    cursor:pointer;
    font-size:14px;
    font-weight:600;
    line-height:1;
    user-select:none;

}

.search-box{

    position:fixed !important;
    top:20px !important;
    right:196px !important;
    left:auto !important;

    z-index:99999 !important;

}

body.light .lang-btn,
body.light .lang-switch{

    background:#fff;
    color:#222;
    border-color:#ccc !important;

}

@media (max-width:768px){

    #theme-btn,
    .lang-btn,
    .lang-switch{

        top:15px !important;

    }

    #theme-btn{

        right:15px !important;

    }

    .lang-btn,
    .lang-switch{

        right:64px !important;

        height:40px !important;
        min-width:50px !important;
        padding:0 12px !important;
        font-size:13px;

    }

    .search-box{

        top:15px !important;
        right:168px !important;

    }

    #site-search{

        width:96px !important;

    }

}


/* ===== SEARCH BOX SIZE (final) ===== */

/* 搜索框与顶部按钮同高（45px），同一水平线 */
.search-box{

    position:fixed !important;
    top:20px !important;
    right:196px !important;
    left:auto !important;
    z-index:99999 !important;

}

.search-box input,
#site-search{

    width:220px !important;
    height:45px !important;

    padding:0 20px !important;

    border-radius:22px !important;

    font-size:15px !important;

    background:rgba(10,10,15,.85) !important;
    color:#fff !important;

    border:1px solid rgba(255,255,255,.3) !important;

    outline:none !important;

}

body.light .search-box input,
body.light #site-search{

    background:#fff !important;
    color:#222 !important;
    border-color:#ccc !important;

}

@media (max-width:768px){

    .search-box{

        top:15px !important;
        right:176px !important;

    }

    .search-box input,
    #site-search{

        width:120px !important;
        height:40px !important;
        padding:0 14px !important;
        font-size:13px !important;

    }

}

/* =========================
   下载区（Release 直链）
   ========================= */
.download-box{
    margin:26px 0 34px;
    padding:22px 24px;
    border:1px solid #8b6cff;
    border-radius:14px;
    background:rgba(139,108,255,.08);
}
.download-box h2{
    margin:0 0 8px;
    font-size:1.15rem;
    display:flex;
    align-items:center;
    gap:10px;
    flex-wrap:wrap;
}
.dl-badge{
    font-size:.72rem;
    padding:2px 9px;
    border-radius:20px;
    background:#8b6cff;
    color:#fff;
    letter-spacing:.4px;
}
.download-note{
    margin:0 0 14px;
    font-size:.9rem;
    opacity:.85;
    line-height:1.6;
}
.download-actions{
    display:flex;
    gap:12px;
    flex-wrap:wrap;
}
.download-actions .download-btn{
    margin-top:0;
}
body.light .download-box{
    background:rgba(139,108,255,.06);
}