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

body{
font-family:system-ui, -apple-system, Arial, sans-serif;
background:#f4f6fb;
color:#111;
line-height:1.6;
}

/* ===== CONTAINER ===== */
.container{
max-width:900px;
margin:20px auto;
background:#fff;
padding:20px;
border-radius:14px;
box-shadow:0 10px 25px rgba(0,0,0,0.05);
}

/* ===== NAVBAR ===== */
nav{
display:flex;
justify-content:space-between;
align-items:center;
margin-bottom:20px;
}

nav .logo{
font-size:20px;
font-weight:bold;
color:#2563eb;
}

nav .links a{
margin-left:15px;
text-decoration:none;
color:#333;
font-weight:500;
}

nav .links a:hover{
color:#2563eb;
}

/* ===== HEADINGS ===== */
h1{
font-size:28px;
margin-bottom:10px;
}

h2{
font-size:20px;
margin:20px 0 10px;
}

/* ===== TOOL CARD ===== */
.tool-card{
padding:15px;
border:1px solid #eee;
border-radius:10px;
margin-bottom:10px;
background:#fafafa;
transition:0.3s;
}

.tool-card:hover{
transform:translateY(-3px);
box-shadow:0 8px 15px rgba(0,0,0,0.05);
}

/* ===== TOOL BOX ===== */
.tool-box{
margin-top:15px;
padding:20px;
border-radius:12px;
border:1px solid #eee;
background:#f9fafc;
}

/* ===== INPUTS ===== */
input, textarea, select{
width:100%;
padding:10px;
margin-top:10px;
border-radius:8px;
border:1px solid #ddd;
font-size:14px;
outline:none;
}

input:focus, textarea:focus{
border-color:#2563eb;
}

/* ===== BUTTON ===== */
button{
margin-top:12px;
padding:10px 20px;
border:none;
border-radius:8px;
background:#2563eb;
color:#fff;
font-weight:500;
cursor:pointer;
transition:0.2s;
}

button:hover{
background:#1e4ed8;
}

/* ===== RESULT ===== */
.result{
margin-top:15px;
padding:10px;
background:#eef2ff;
border-radius:8px;
font-weight:bold;
color:#1e3a8a;
}

/* ===== LINKS ===== */
a{
color:#2563eb;
text-decoration:none;
}

a:hover{
text-decoration:underline;
}

/* ===== GRID (HOME PAGE) ===== */
.grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
gap:10px;
}

/* ===== FOOTER ===== */
footer{
margin-top:30px;
text-align:center;
font-size:14px;
color:#666;
}

/* ===== MOBILE ===== */
@media(max-width:600px){
.container{
padding:15px;
}

h1{
font-size:22px;
}
}