@font-face{
font-family:dana;
src:url("https://onlinetool.ir/dana.woff2") format("woff2");
font-weight:normal;
font-style:normal;
}

:root{
--bg:#050505;
--surface:#0a0f0a;
--surface2:#0f160f;
--border:#133316;
--accent:#00ff66;
--accent2:#00cc44;
--text:#b6ffcc;
--muted:#1f7a3a;
}

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

body{
background:var(--bg);
color:var(--text);
font-family:dana;
min-height:100vh;
display:flex;
flex-direction:column;
}

/* header */

.header{
background:#070b07;
border-bottom:1px solid var(--border);
}

.header-inner{
max-width:1100px;
margin:auto;
display:flex;
align-items:center;
justify-content:space-between;
padding:18px;
}

.logo{
font-size:20px;
font-weight:bold;
color:var(--accent);
}

.menu{
display:flex;
gap:18px;
}

.menu a{
color:var(--muted);
text-decoration:none;
font-size:14px;
}

.menu a:hover{
color:white;
}

/* container */

.container{
max-width:1100px;
margin:auto;
padding:40px 20px;
width:100%;
flex:1;
}

.page-title{
text-align:center;
font-size:28px;
margin-bottom:30px;
background:linear-gradient(135deg,var(--accent),var(--accent2));
-webkit-background-clip:text;
color:transparent;
}

/* search */

.search{
width:100%;
padding:14px;
background:var(--surface);
border:1px solid var(--border);
border-radius:10px;
color:white;
margin-bottom:30px;
}

/* grid */

.grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:20px;
}

/* card */

.card{
background:var(--surface);
border:1px solid var(--border);
border-radius:16px;
overflow:hidden;
text-decoration:none;
color:white;
transition:.25s;
box-shadow:0 8px 30px rgba(0,255,102,.15);
}

.card:hover{
transform:translateY(-6px);
border-color:var(--accent);
}

.card img{
width:100%;
height:160px;
object-fit:cover;
}

.card-body{
padding:16px;
}

.card-title{
font-size:18px;
margin-bottom:6px;
}

.card-desc{
font-size:13px;
color:var(--muted);
margin-bottom:10px;
}

.clicks{
font-size:12px;
color:#00ff66;
}

/* footer */

.footer{
background:#070b07;
border-top:1px solid var(--border);
margin-top:40px;
}

.footer-inner{
max-width:1100px;
margin:auto;
padding:25px;
text-align:center;
color:var(--muted);
font-size:14px;
}

.footer a{
color:var(--accent);
text-decoration:none;
}

/* responsive */

@media(max-width:900px){

.grid{
grid-template-columns:repeat(2,1fr);
}

}

@media(max-width:600px){

.menu{
display:none;
}

.grid{
grid-template-columns:1fr;
}

}