/*
================================================

 Adobe 创意软件下载中心
 Dark Tech UI 优化版

================================================
*/


/* =================================
   全局
================================= */


*{

    box-sizing:border-box;

}


body{

    background:#111827;

}





/* =================================
   页面
================================= */


.adobe-page{


    position:relative;


    width:100%;


    padding:40px 20px 100px;


    color:#f8fafc;


    overflow:hidden;



    background:


    linear-gradient(

    rgba(255,255,255,.025) 1px,

    transparent 1px

    ),


    linear-gradient(

    90deg,

    rgba(255,255,255,.025) 1px,

    transparent 1px

    );


    background-size:

    40px 40px;


}





.adobe-hero,
.adobe-grid{


    max-width:1280px;


    margin-left:auto;


    margin-right:auto;


}





/* =================================
   背景装饰
================================= */


.adobe-page::before{


    content:"";


    position:absolute;


    width:500px;


    height:500px;


    top:-180px;


    left:-180px;



    background:


    radial-gradient(

        circle,

        rgba(255,75,75,.35),

        transparent 65%

    );



    filter:blur(40px);


    pointer-events:none;


}





.adobe-page::after{


    content:"";


    position:absolute;


    width:500px;


    height:500px;


    right:-200px;


    bottom:-200px;



    background:


    radial-gradient(

        circle,

        rgba(255,138,0,.28),

        transparent 65%

    );



    filter:blur(50px);


    pointer-events:none;


}








/* =================================
   Hero
================================= */


.adobe-hero{


    position:relative;


    z-index:2;


    min-height:300px;


    padding:70px 55px;


    margin-bottom:45px;



    overflow:hidden;



    background:


    linear-gradient(

        135deg,

        rgba(255,255,255,.06),

        rgba(255,255,255,.015)

    );



    border:


    1px solid rgba(255,255,255,.08);



    border-radius:30px;



    backdrop-filter:


    blur(18px);


}





.hero-tag{


    display:inline-flex;


    align-items:center;


    gap:8px;



    padding:7px 14px;



    background:


    rgba(255,75,75,.12);



    border:


    1px solid rgba(255,75,75,.35);



    color:#ff8a8a;



    font-size:13px;



    border-radius:8px;


}




.hero-tag::before{


    content:"";


    width:7px;


    height:7px;


    background:#ff4b4b;


    border-radius:50%;


}





.adobe-hero h1{


    margin:25px 0 18px;


    font-size:52px;


    line-height:1.15;


    font-weight:900;


    letter-spacing:-1px;




    background:


    linear-gradient(

        90deg,

        #ff4b4b,

        #ff8a00,

        #ffcc33,

        #ff4b4b

    );



    background-size:300%;



    -webkit-background-clip:text;


    -webkit-text-fill-color:transparent;



    animation:


    adobeGradient 8s linear infinite;


}




@keyframes adobeGradient{


0%{


background-position:0%;


}


100%{


background-position:300%;


}


}





.adobe-hero p{


    margin:0;


    color:#94a3b8;


    font-size:17px;


}



/* =================================
   Hero 右侧装饰
================================= */


.adobe-hero::after{


    content:"";


    position:absolute;


    right:80px;


    top:50%;


    width:180px;


    height:180px;


    transform:translateY(-50%);



    border-radius:50%;



    background:


    radial-gradient(

        circle,

        rgba(255,75,75,.35),

        transparent 65%

    );



    filter:blur(20px);



}




.adobe-hero-decoration{


    position:absolute;


    right:120px;


    top:70px;


    width:140px;


    height:140px;



    border:


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



    transform:rotate(45deg);



    opacity:.5;


}



.adobe-hero-decoration::before{


    content:"";


    position:absolute;


    inset:20px;



    border:


    1px solid rgba(255,138,0,.35);


}



.adobe-hero-decoration::after{


    content:"";


    position:absolute;


    width:12px;


    height:12px;



    right:-6px;


    top:50%;



    background:#ff4b4b;


    border-radius:50%;


}




/* =================================
 软件网格
================================= */


.adobe-grid{


    position:relative;


    z-index:2;


    display:grid;


    grid-template-columns:


    repeat(4,minmax(0,1fr));



    gap:18px;


}









/* =================================
 软件卡片
================================= */


.adobe-card{


    position:relative;


    padding:20px;



    background:


    rgba(30,41,59,.75);



    border:


    1px solid rgba(255,255,255,.08);



    border-radius:16px;



    backdrop-filter:


    blur(12px);



    transition:.3s;



    overflow:hidden;


}






.adobe-card::before{


    content:"";


    position:absolute;


    top:0;


    left:0;


    width:100%;


    height:2px;



    background:


    linear-gradient(

    90deg,

    #ff4b4b,

    #ff8a00

    );



    opacity:0;



    transition:.3s;


}






.adobe-card:hover{


    transform:


    translateY(-3px);



    box-shadow:


    0 14px 35px

    rgba(0,0,0,.28);


}





.adobe-card:hover::before{


    opacity:1;


}








/* =================================
 软件顶部
================================= */


.card-top{


    display:flex;


    align-items:flex-start;


    gap:14px;


}






.logo-box{


    width:60px;


    height:60px;


    flex-shrink:0;


    padding:5px;



    background:#fff;



    border-radius:14px;



    overflow:hidden;


}




.logo-box img{


    width:100%;


    height:100%;


    object-fit:contain;


}






.app-text{


    min-width:0;


}






.app-text h2{


    margin:0;


    font-size:18px;


    line-height:24px;


    color:#f8fafc;


}






.app-text p{


    margin:5px 0 0;



    color:#94a3b8;



    font-size:12px;



    line-height:18px;



    display:-webkit-box;


    -webkit-box-orient:vertical;


    -webkit-line-clamp:2;



    overflow:hidden;


}
/* =================================
   版本区域
================================= */


.version-area{


    margin-top:20px;


}




.version-title{


    margin-bottom:10px;


    color:#ffffff;


    font-size:12px;





    letter-spacing:.5px;


}




.version-list{


    display:flex;


    gap:8px;


    flex-wrap:wrap;


}





.adobe-version-btn{


    height:36px;


    min-width:72px;


    padding:0 16px;



    border-radius:8px;



    border:


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



    background:


    rgba(255,255,255,.04);



    color:#cbd5e1;



    font-size:13px;



    cursor:pointer;



    transition:.25s;


}





.adobe-version-btn:hover,
.adobe-version-btn.active{


    background:#ff4b4b;



    border-color:#ff4b4b;



    color:#fff;



    transform:translateY(-2px);


}








/* =================================
   弹窗
================================= */


.adobe-modal{


    position:fixed!important;


    inset:0!important;


    width:100vw!important;


    height:100vh!important;


    z-index:99999!important;



    display:none;



    align-items:center!important;


    justify-content:center!important;



    background:


    rgba(0,0,0,.65);



    backdrop-filter:blur(8px);


}




.adobe-modal.show{


    display:flex!important;


}






.adobe-modal-content{


    position:relative;



    width:460px;



    max-width:90vw;



    background:#1e293b;



    border:


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



    border-radius:12px;



    padding:32px;



    box-shadow:


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



    animation:


    adobePopup .25s ease;


}






/*
 删除顶部装饰线
 不再使用 ::before
*/






@keyframes adobePopup{


from{


opacity:0;


transform:scale(.94);


}



to{


opacity:1;


transform:scale(1);


}


}









/* =================================
   弹窗头部
================================= */


.modal-close{


    position:absolute;


    right:16px;


    top:16px;



    width:34px;


    height:34px;



    border:0;



    background:


    rgba(255,255,255,.08);



    color:#fff;



    font-size:20px;



    border-radius:50%;



    cursor:pointer;



    transition:.25s;


}



.modal-close:hover{


    background:#ff4b4b;


}






.modal-head h2{


    margin:0;


    font-size:26px;


    color:#fff;


}





.modal-version{


    display:block;


    margin-top:8px;


    color:#ff8a00;


    font-size:14px;


}









/* =================================
   弹窗内容标题
================================= */


.download-area,
.faq-area,
.password-area{


    margin-top:26px;


}




.download-area h3,
.faq-area h3,
.password-area h3{


    display:flex;


    align-items:center;


    gap:10px;



    margin-bottom:18px;



    font-size:18px;






    color:#ffffff;



}




.download-area h3::before,
.faq-area h3::before,
.password-area h3::before{


    content:"";


    width:4px;


    height:20px;


    background:#ff4b4b;


    border-radius:2px;


}









/* =================================
   下载线路
================================= */


.download-item{


    display:flex;


    justify-content:space-between;


    align-items:center;



    padding:12px 14px;



    margin-bottom:12px;



    background:


    rgba(255,255,255,.06);



    border:


    1px solid rgba(255,255,255,.1);



    border-radius:12px;



    transition:.25s;


}




.download-item:hover{


    border-color:


    rgba(255,75,75,.45);


}







.download-info{


    display:flex;


    align-items:center;


    gap:10px;


}




.cloud-tag{

    padding:4px 10px;

    border-radius:6px;

    background:#ff4b4b;

    color:#ffffff;

    font-size:12px;

    line-height:18px;

}





.cloud-name{

    color:#ffffff;

    font-size:14px;


}





.download-btn{


    display:inline-flex;

    align-items:center;

    justify-content:center;


    padding:7px 16px;


    background:#ff4b4b;


    color:#ffffff!important;


    border-radius:8px;


    text-decoration:none;


    font-size:13px;




    transition:.25s;


}



.download-btn:hover{


    background:#ff6b6b;


    color:#ffffff!important;


    transform:translateY(-2px);


}









/* =================================
   安装教程
================================= */


.faq-link{


    display:inline-flex;


    padding:10px 16px;



    background:


    rgba(96,165,250,.12);



    border:


    1px solid rgba(96,165,250,.3);



    border-radius:8px;



    color:#60a5fa;



    text-decoration:none;



    font-size:14px;


}





.faq-link:hover{


    background:


    rgba(96,165,250,.22);


}









/* =================================
   密码
================================= */


.password-text{


    display:flex;


    justify-content:space-between;


    align-items:center;



    background:


    rgba(255,255,255,.06);



    padding:14px;



    border-radius:12px;



    color:#ffcc70;



    font-family:monospace;



    font-size:15px;


}






.copy-password{


    border:0;



    background:#ff4b4b;



    color:#fff;



    padding:7px 14px;



    border-radius:8px;



    cursor:pointer;


}





.copy-password:hover{


    background:#ff6b6b;


}









/* =================================
   Toast
================================= */


.adobe-toast{


    position:fixed;


    right:30px;


    bottom:30px;



    padding:12px 20px;



    background:#1e293b;



    color:#fff;



    border:


    1px solid rgba(255,255,255,.1);



    border-radius:999px;



    opacity:0;



    transform:translateY(20px);



    transition:.3s;



    z-index:999999;


}




.adobe-toast.show{


    opacity:1;


    transform:translateY(0);


}








/* =================================
   响应式
================================= */


@media(max-width:1100px){


.adobe-grid{


grid-template-columns:


repeat(3,1fr);


}


}





@media(max-width:850px){


.adobe-grid{


grid-template-columns:


repeat(2,1fr);


}



.adobe-hero h1{


font-size:40px;


}


}





@media(max-width:600px){


.adobe-grid{


grid-template-columns:


1fr;


}




.adobe-hero{


padding:45px 25px;


}




.adobe-hero h1{


font-size:34px;


}



.adobe-modal-content{


padding:24px;


}



}