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

body{

font-family:system-ui,Arial;
background:#0f0f0f;
color:white;
padding:20px;

}

header{

text-align:center;
margin-bottom:30px;

}

h1{

font-size:28px;
margin-bottom:20px;

}

.filters{

display:flex;
flex-wrap:wrap;
gap:10px;
justify-content:center;

}

input,select{

padding:12px;
border-radius:8px;
border:none;
font-size:16px;

}

input{

width:250px;

}

select{

width:200px;

}

#catalog{

display:grid;
grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
gap:20px;

}

.book{

background:#1a1a1a;
border-radius:12px;
padding:16px;

transition:0.2s;

}

.book:hover{

transform:translateY(-4px);
background:#222;

}

.book h3{

font-size:18px;
margin-bottom:6px;

}

.book p{

font-size:14px;
color:#aaa;

}

.category{

margin-top:10px;
font-size:12px;
background:#333;
padding:4px 8px;
border-radius:6px;
display:inline-block;

}

footer{

text-align:center;
margin-top:40px;
color:#666;

}


/* 📱 móvil */

@media (max-width:600px){

h1{
font-size:22px;
}

input{
width:100%;
}

select{
width:100%;
}

.filters{
flex-direction:column;
align-items:stretch;
}

.amazon-link {
  display: inline-block;
  margin-top: 10px;
  padding: 6px 12px;
  background: #ff9900;
  color: #000;
  font-weight: bold;
  border-radius: 6px;
  text-decoration: none;
  transition: 0.2s;
}

.amazon-link:hover {
  background: #e68a00;
  transform: translateY(-2px);
}



}