body{
font-family:system-ui;
margin:0;
background:#0f172a;
color:white;
overflow-x:hidden;
}

header{
position:sticky;
top:0;
padding:20px;
background:#020617;
z-index:10;
}

input{
width:100%;
padding:12px;
border-radius:8px;
border:none;
margin-top:10px;
}

#grid{
display:grid;
grid-template-columns:repeat(auto-fill,minmax(220px,1fr));
gap:20px;
padding:30px;
}

.card{
background:#1e293b;
padding:20px;
border-radius:14px;
cursor:pointer;
transform-style:preserve-3d;
transition:transform .3s, box-shadow .3s;
}

.card:hover{
transform:rotateY(12deg) rotateX(6deg) scale(1.05);
box-shadow:0 20px 40px rgba(0,0,0,0.6);
}

.card h4{
margin:0 0 10px 0;
}

.card small{
opacity:.7;
}

#panel{
position:fixed;
right:0;
top:0;
width:400px;
height:100%;
background:#020617;
padding:30px;
overflow:auto;
box-shadow:-10px 0 30px rgba(0,0,0,.7);
transition:transform .4s;
}

.hidden{
transform:translateX(100%);
}

#close{
float:right;
font-size:20px;
background:none;
border:none;
color:white;
cursor:pointer;
}