/* 全局样式统一 */
* {margin:0;padding:0;box-sizing:border-box;font-family:Arial,sans-serif}
body{background:#f5f7fa;color:#333;line-height:1.6}
.container{max-width:1200px;margin:0 auto;padding:0 20px}
/* 导航栏样式 */
header{background:linear-gradient(135deg,#4e54c8,#8f94fb);color:#fff;padding:25px 0;box-shadow:0 2px 10px rgba(0,0,0,0.1)}
.header-content{display:flex;justify-content:space-between;align-items:center}
.logo{font-size:26px;font-weight:bold;color:#fff;text-decoration:none}
.nav-list{display:flex;list-style:none;gap:30px}
.nav-list a{color:#fff;text-decoration:none;font-weight:500;font-size:16px}
.nav-list a:hover{text-decoration:underline}
/* 主体内容样式 */
.main{padding:40px 0;min-height:600px}
.section-title{font-size:22px;font-weight:600;margin-bottom:20px;color:#2d3748;border-left:4px solid #4e54c8;padding-left:12px}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:20px;margin-bottom:40px}
.card{background:#fff;border-radius:10px;padding:20px;box-shadow:0 2px 15px rgba(0,0,0,0.05);transition:all 0.3s}
.card:hover{transform:translateY(-5px);box-shadow:0 8px 25px rgba(0,0,0,0.1)}
.card h3{font-size:18px;margin-bottom:8px;color:#2d3748}
.card h3 a{color:#2d3748;text-decoration:none}
.card h3 a:hover{color:#4e54c8}
.card p{font-size:14px;color:#718096;margin-bottom:10px}
.card .tag{display:inline-block;background:#e8f4fd;color:#3182ce;padding:4px 8px;border-radius:4px;font-size:12px}
.card .cover-img{width:100%;height:180px;object-fit:cover;border-radius:5px;margin-bottom:10px}
/* 项目和评论样式 */
.project-box, .comment-box{background:#fff;border-radius:10px;padding:20px;box-shadow:0 2px 15px rgba(0,0,0,0.05);margin-bottom:40px}
.project-item, .comment-item{padding:12px 0;border-bottom:1px solid #e2e8f0}
.project-item:last-child, .comment-item:last-child{border-bottom:none}
.project-item h4{font-size:16px;color:#2d3748}
.project-item p{font-size:14px;color:#718096}
/* 表单样式 */
.form-box{width:80%;max-width:900px;margin:20px auto;background:#fff;padding:30px;border-radius:10px;box-shadow:0 2px 15px rgba(0,0,0,0.05)}
.form-item{margin:15px 0}
label{display:block;margin-bottom:5px;font-weight:500}
input, select, textarea{width:100%;padding:10px;border:1px solid #ddd;border-radius:5px;outline:none;transition:border 0.3s}
input:focus, select:focus, textarea:focus{border-color:#4e54c8}
button{padding:10px 20px;background:#4e54c8;color:#fff;border:none;border-radius:5px;cursor:pointer;transition:background 0.3s}
button:hover{background:#3a3f9c}
/* 分页样式 */
.page{text-align:center;margin:30px 0}
.page a{display:inline-block;padding:8px 15px;border:1px solid #ddd;border-radius:5px;margin:0 5px;text-decoration:none;color:#333}
.page a.active{background:#4e54c8;color:#fff;border-color:#4e54c8}
/* 底部样式 */
footer{background:#2d3748;color:#fff;padding:30px 0;margin-top:40px;text-align:center}
.copyright{color:#a0aec0;font-size:14px}
/* 评论样式 */
.comment-item{display:flex;gap:15px;padding:15px 0}
.comment-avatar{width:40px;height:40px;border-radius:50%;background:#eee;display:flex;align-items:center;justify-content:center;font-weight:bold}
.comment-content{flex:1}
.comment-user{font-weight:bold;margin-bottom:5px}
.comment-time{font-size:12px;color:#999;margin-bottom:5px}
/* 用户中心样式 */
.user-info{background:#fff;padding:20px;border-radius:10px;box-shadow:0 2px 15px rgba(0,0,0,0.05);margin-bottom:30px}
/* 后台样式 */
.admin-main{display:flex}
.admin-menu{width:200px;background:#f5f7fa;height:calc(100vh - 50px);padding-top:20px}
.admin-menu a{display:block;padding:10px 20px;color:#333;text-decoration:none;margin:5px 0}
.admin-menu a:hover{background:#e8f4fd}
.admin-content{flex:1;padding:20px}
.admin-welcome{font-size:18px;margin-bottom:20px}
/* 图片预览样式 */
#coverPreview{max-width:200px;margin:10px 0;display:none}
/* 登录注册样式 */
.login-box, .register-box{width:350px;margin:50px auto;background:#fff;padding:30px;border-radius:10px;box-shadow:0 0 10px #eee}
.error{color:red;margin:10px 0;text-align:center}

/* AI 项目横排自动换行样式 */
#project {
    margin: 25px 0;
}
.project-container {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    width: 100%;
}
.project-card {
    flex: 1 1 220px;
    max-width: 280px;
    background: #fff;
    border-radius: 10px;
    padding: 15px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}
.project-card h4 {
    font-size: 16px;
    color: #2d3748;
    margin: 0 0 8px 0;
}
.project-card p {
    font-size: 14px;
    color: #666;
    line-height: 1.5;
    margin: 0 0 12px 0;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.project-card a {
    color: #4e54c8;
    font-size: 14px;
    text-decoration: none;
}
.project-card img {
    width: 100%;
    height: 160px;
    object-fit: cover;
    border-radius: 6px;
    margin-top: 10px;
}