/*
Theme Name: TianyuanAI
Description: 天元智创社区科技主题
Version: 1.0
Author: Tianyuan
*/


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


body{

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

    background:#050816;

    color:#dbeafe;

    min-height:100vh;

}


/* 星空动态背景 */

.space-bg{

    position:fixed;

    inset:0;

    z-index:-1;

    background:

    radial-gradient(circle at 20% 30%,
    rgba(0,217,255,.15),
    transparent 35%),

    radial-gradient(circle at 80% 20%,
    rgba(124,77,255,.15),
    transparent 35%),

    #050816;

}



/* 顶部 */

.header{

    width:90%;

    max-width:1200px;

    margin:25px auto;

    padding:18px 30px;

    display:flex;

    justify-content:space-between;

    align-items:center;


    background:

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


    backdrop-filter:blur(15px);


    border:

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


    border-radius:18px;


}


.logo a{

    color:#00d9ff;

    text-decoration:none;

    font-size:26px;

    font-weight:bold;

}



nav a{

    color:#cbd5e1;

    text-decoration:none;

    margin-left:25px;

    transition:.3s;

}



nav a:hover{

    color:#00d9ff;

}



/* 首页英雄区域 */

.hero{


    max-width:1100px;

    margin:80px auto;

    text-align:center;

}



.hero h1{


    font-size:52px;


    background:

    linear-gradient(
    90deg,
    #00d9ff,
    #7c4dff
    );


    -webkit-background-clip:text;

    color:transparent;


}


.hero p{


    margin-top:20px;

    font-size:20px;

    color:#94a3b8;

}



.buttons{

    margin-top:40px;

}



.buttons a{


    display:inline-block;

    padding:14px 35px;

    margin:10px;


    color:white;

    text-decoration:none;


    border-radius:30px;


    background:

    linear-gradient(
    135deg,
    #00d9ff,
    #7c4dff
    );


    transition:.3s;

}



.buttons a:hover{

    transform:
    translateY(-5px);

}



/* 内容区域 */


.posts{


    width:90%;

    max-width:1100px;

    margin:auto;


}


.posts h2{


    margin-bottom:30px;

    color:#00d9ff;

}



/* 文章卡片 */

.card{


    padding:25px;


    margin-bottom:25px;


    background:

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


    backdrop-filter:blur(12px);


    border-radius:20px;


    border:

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


    transition:.35s;


}



.card:hover{


    transform:
    translateY(-8px);


    border-color:#00d9ff;


    box-shadow:

    0 0 25px

    rgba(0,217,255,.25);


}



.card h3 a{


    color:#fff;

    font-size:24px;

    text-decoration:none;

}



.card p{


    margin-top:15px;

    color:#94a3b8;

}



.meta{


    margin-top:20px;

    color:#64748b;

}



/* 分类 */


.categories{


    width:90%;

    max-width:1100px;

    margin:60px auto;


    display:grid;


    grid-template-columns:

    repeat(4,1fr);


    gap:20px;


}



.categories div{


    padding:35px 20px;


    text-align:center;


    border-radius:20px;


    background:

    rgba(255,255,255,.05);


    border:

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


    font-size:18px;


    transition:.3s;


}



.categories div:hover{


    transform:translateY(-10px);


    background:

    rgba(0,217,255,.12);


}



/* 底部 */


footer{


    margin-top:80px;

    padding:40px;


    text-align:center;


    background:

    rgba(0,0,0,.3);


}



.footer-box h3{


    color:#00d9ff;

}



.footer-box p{


    margin-top:10px;

    color:#64748b;

}




/* 手机适配 */


@media(max-width:768px){


.header{


    flex-direction:column;

}



nav{


    margin-top:20px;


}



nav a{


    margin:8px;

    display:inline-block;


}



.hero h1{


    font-size:36px;


}



.categories{


    grid-template-columns:

    repeat(2,1fr);


}


}
.beian{

    margin-top:20px;

    font-size:14px;

    color:#64748b;

}


.beian a{

    color:#94a3b8;

    text-decoration:none;

}


.beian a:hover{

    color:#00d9ff;

}


/* ======================
   天元智创科技背景
====================== */


body{

    overflow-x:hidden;

}


/* 背景层 */

.tech-bg{

    position:fixed;

    top:0;

    left:0;

    width:100%;

    height:100%;

    z-index:-2;

    background:

    radial-gradient(
        circle at 20% 20%,
        rgba(0,217,255,.18),
        transparent 35%
    ),

    radial-gradient(
        circle at 80% 30%,
        rgba(124,77,255,.18),
        transparent 35%
    ),

    linear-gradient(
        135deg,
        #020617,
        #0f172a
    );

}


/* 科技网格 */

.grid{

    position:absolute;

    width:100%;

    height:100%;


    background-image:

    linear-gradient(
        rgba(0,217,255,.08) 1px,
        transparent 1px
    ),

    linear-gradient(
        90deg,
        rgba(0,217,255,.08) 1px,
        transparent 1px
    );


    background-size:

    50px 50px;


    animation:gridMove 20s linear infinite;

}



@keyframes gridMove{


from{

    transform:translateY(0);

}


to{

    transform:translateY(50px);

}


}




/* 光晕 */

.glow{

    position:absolute;

    width:400px;

    height:400px;

    border-radius:50%;


    filter:blur(100px);


    animation:float 8s infinite alternate;


}



.glow1{

    background:#00d9ff;

    top:10%;

    left:10%;

    opacity:.25;

}



.glow2{

    background:#7c4dff;

    bottom:10%;

    right:10%;

    opacity:.25;

}




@keyframes float{


0%{

transform:translate(0,0);

}


100%{

transform:translate(80px,50px);

}


}

body{

background:
linear-gradient(
135deg,
#020617,
#0ea5e9
)!important;

}

.comments{

    margin-top:40px;

}


.comment-item{

    padding:20px;

    margin-top:15px;

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

    border-radius:15px;

}


.comment-author{

    color:#00d9ff;

    font-weight:bold;

}


.comment-content{

    margin-top:10px;

}


.comment-time{

    margin-top:10px;

    color:#64748b;

}


.comments textarea{

    width:100%;

    height:120px;

    margin-top:20px;

    padding:15px;

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

    color:white;

    border-radius:10px;

}


.comments button{

    margin-top:15px;

    padding:12px 30px;

    border:0;

    border-radius:20px;

    background:#00d9ff;

    cursor:pointer;

}

/* ==========================
   天元智创置顶文章标题高亮
========================== */


.card h1,
.card h1 a{

    font-size:36px;

    font-weight:800;


    background:

    linear-gradient(
        90deg,
        #00d9ff,
        #7c4dff,
        #00d9ff
    );


    background-size:200%;


    -webkit-background-clip:text;


    color:transparent;


    animation:

    titleGlow 5s linear infinite;


    text-shadow:

    0 0 25px

    rgba(0,217,255,.35);

}



@keyframes titleGlow{


0%{

background-position:0%;

}


100%{

background-position:200%;

}


}



/* 鼠标经过 */

.card h1:hover{


transform:

translateY(-3px);


filter:

drop-shadow(
0 0 15px
rgba(0,217,255,.8)
);


transition:.3s;


}

/* 官方置顶标识 */

.top-badge{

    display:inline-block;

    padding:8px 22px;

    margin-bottom:25px;


    border-radius:30px;


    font-size:14px;

    font-weight:bold;


    color:#ffffff;


    background:

    linear-gradient(
        90deg,
        #00d9ff,
        #7c4dff
    );


    box-shadow:

    0 0 25px

    rgba(0,217,255,.45);


    animation:

    badgeGlow 3s infinite alternate;

}



@keyframes badgeGlow{


from{

    box-shadow:

    0 0 10px

    rgba(0,217,255,.3);

}


to{

    box-shadow:

    0 0 30px

    rgba(124,77,255,.8);

}


}