/* =========================
   Base
========================= */

body{
margin:0;
font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial;
background:linear-gradient(135deg,#020617,#0f172a,#020617);
color:#e5e7eb;
}


/* =========================
   Header
========================= */

.header{
background:#020617;
border-bottom:1px solid #1e293b;
padding:20px;
display:flex;
justify-content:space-between;
align-items:center;
}


/* =========================
   Logo
========================= */

.logo{
display:flex;
align-items:center;
gap:10px;
font-size:20px;
font-weight:bold;
text-decoration:none;
color:white;
}

.logo img{
transition:0.4s;
}

.logo img:hover{
transform:rotate(-8deg) scale(1.1);
filter:drop-shadow(0 0 8px #3b82f6);
}


/* =========================
   Navigation
========================= */

.nav a{
margin-left:20px;
text-decoration:none;
color:#94a3b8;
transition:0.2s;
}

.nav a:hover{
color:white;
}


/* =========================
   Layout
========================= */

.container{
max-width:1100px;
margin:auto;
padding:40px;
}


/* =========================
   Tool Grid
========================= */

.tool-list{
display:grid;
grid-template-columns:repeat(auto-fill,minmax(230px,1fr));
gap:25px;
}


/* =========================
   Tool Card
========================= */

.tool-card{
background:#020617;
border:1px solid #1e293b;
border-radius:12px;
padding:25px;
transition:all 0.25s ease;
cursor:pointer;
animation:fadeUp 0.6s ease;
}

.tool-card:hover{
transform:translateY(-8px) scale(1.02);
border-color:#3b82f6;
box-shadow:0 15px 40px rgba(0,0,0,0.6);
}

.tool-card h3{
margin-top:0;
color:white;
}

.tool-card p{
color:#94a3b8;
}


/* =========================
   Tool Button
========================= */

.tool-card a{
display:inline-block;
margin-top:12px;
padding:8px 14px;
border-radius:8px;
background:linear-gradient(135deg,#6366f1,#3b82f6);
color:white;
text-decoration:none;
font-size:14px;
transition:all 0.3s ease;
}

.tool-card a:hover{
transform:scale(1.08);
box-shadow:0 0 10px rgba(59,130,246,0.8);
}


/* =========================
   Forms
========================= */

textarea{
width:100%;
background:#020617;
color:white;
border:1px solid #1e293b;
border-radius:8px;
padding:12px;
margin-top:10px;
}

button{
padding:10px 16px;
border-radius:8px;
border:none;
background:linear-gradient(135deg,#6366f1,#3b82f6);
color:white;
cursor:pointer;
margin-top:10px;
transition:all 0.25s;
}

button:hover{
transform:scale(1.05);
box-shadow:0 0 10px rgba(59,130,246,0.8);
}


/* =========================
   Result Box
========================= */

pre{
background:#020617;
padding:15px;
border-radius:8px;
border:1px solid #1e293b;
overflow:auto;
margin-top:15px;
}


/* =========================
   Footer
========================= */

.footer{
text-align:center;
padding:40px;
color:#64748b;
}


/* =========================
   Animations
========================= */

@keyframes fadeUp{

0%{
opacity:0;
transform:translateY(20px);
}

100%{
opacity:1;
transform:translateY(0);
}

}
/* =========================
   Particle Background
========================= */

#particles{
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
z-index:-1;
background:transparent;
}