* {box-sizing:border-box;margin:0;padding:0;font-family:system-ui}
html,body{width:100%;overflow-x:hidden;}

.container{max-width:1600px;margin:0 auto;padding:10px;}
.header{display:flex;justify-content:space-between;align-items:center;
  margin-bottom: 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid #eee;
  
  flex-wrap:wrap;gap:10px;}
.btn{padding:8px 16px;background:#007bff;color:#fff;border:none;border-radius:6px;cursor:pointer;}

/* 搜索 + 分类导航 */
.toolbar{display:flex;flex-direction:column;gap:12px;margin-bottom:10px;}


/* 分类导航菜单 */
.cate-menu{display:flex;flex-wrap:wrap;gap:8px;}
.cate-menu button{
    padding:8px 14px;
    border:1px solid #007bff;
    background:#fff;
    color:#007bff;
    border-radius:6px;
    cursor:pointer;
}
.cate-menu button.active{
    background:#007bff;
    color:#fff;
}

/* 图片网格 */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:10px;}
.card{/*border:1px solid #eee;*/border-radius:8px;overflow:hidden;}
.card img{width:100%;height:100%;object-fit:cover;cursor:pointer}
.info{padding:10px;}

.progress{display:none;height:6px;background:#eee;margin:10px 0;}
.bar{height:100%;background:#007bff;width:0}

.modal{
    display:none;position:fixed;top:0;left:0;width:100%;height:100%;
    background:rgba(0,0,0,0.5);z-index:999;
}
.modal-body{
    background:#fff;margin:10% auto;padding:20px;width:90%;max-width:500px;
    border-radius:8px;
}
.form-group{margin-bottom:15px}
.form-group label{display:block;margin-bottom:5px}
.form-group input,.form-group select{width:100%;padding:8px;border:1px solid #ccc;border-radius:4px;}

/* 手机端自适应 */
@media (max-width:768px){
    .grid{grid-template-columns:repeat(2,1fr);}
}
@media (max-width:480px){
    .grid{grid-template-columns:repeat(2,1fr);}
    .header{/*flex-direction:column;*/align-items:flex-start;}
}