*{

box-sizing:border-box;

}



body{

margin:0;

font-family:
system-ui,
-apple-system,
"Segoe UI",
Arial,
sans-serif;


background:
linear-gradient(
135deg,
#e0f2fe,
#f8fdff
);


color:#0c4a6e;


}



.container{

max-width:1100px;

margin:auto;

padding:30px;

}



header{

text-align:center;

}



h1{

font-size:42px;

margin-bottom:8px;

color:#0284c7;

}



header p{

color:#64748b;

}



input{

width:90%;

max-width:650px;

padding:14px 18px;

font-size:16px;

border-radius:20px;

border:

1px solid #bae6fd;

outline:none;


}



input:focus{

border-color:#0284c7;

box-shadow:
0 0 10px #0284c755;

}



#stats{

display:grid;

grid-template-columns:
repeat(3,1fr);

gap:18px;

margin:30px 0;


}



#stats div{


background:white;

border-radius:18px;

padding:20px;

text-align:center;


box-shadow:
0 8px 25px #0284c722;


}



#stats strong{

display:block;

font-size:30px;

color:#0284c7;

margin-top:5px;

}



.card{

background:white;

padding:22px;

margin:22px 0;

border-radius:20px;


box-shadow:
0 10px 30px #0284c733;


}



.card h2{

margin-top:0;

font-size:26px;

color:#075985;

}



.entry{

margin-top:18px;

padding-top:18px;

border-top:

1px solid #e0f2fe;


}



.entry:first-child{

border-top:none;

}



.domain{

display:flex;

justify-content:space-between;

align-items:center;


background:#f0f9ff;

padding:12px 15px;

border-radius:12px;


font-family:monospace;

}



.tag{


display:inline-block;

margin:12px 0;


background:#0284c7;

color:white;


padding:6px 14px;


border-radius:20px;


font-size:14px;


}



.ips{


display:grid;

grid-template-columns:

repeat(
auto-fit,
minmax(220px,1fr)
);


gap:12px;


}



.ip{


display:flex;

justify-content:space-between;

align-items:center;


background:#082f49;


color:#e0f2fe;


padding:10px 12px;


border-radius:12px;


font-family:monospace;


}



button{


border:0;


background:#0284c7;


color:white;


padding:5px 10px;


border-radius:8px;


cursor:pointer;


}



button:hover{


background:#0369a1;


}



@media(max-width:700px){


#stats{

grid-template-columns:1fr;

}



.container{

padding:15px;

}



h1{

font-size:32px;

}



}
/* =========================
   Documentation section
   ========================= */


.docs {

    background:white;

    padding:30px;

    margin-top:40px;

    border-radius:20px;

    box-shadow:
    0 10px 30px #0284c733;

    line-height:1.8;

}



.docs h2 {

    color:#0284c7;

    margin-top:35px;

}



.docs h3 {

    color:#075985;

    margin-top:25px;

}



.docs a {

    color:#0284c7;

    text-decoration:none;

}



.docs a:hover {

    text-decoration:underline;

}



.docs pre {

    background:#082f49;

    color:#e0f2fe;

    padding:15px;

    border-radius:12px;

    overflow-x:auto;

    font-family:monospace;

}



.docs code {

    background:#e0f2fe;

    padding:3px 6px;

    border-radius:6px;

}



.docs pre code {

    background:none;

    padding:0;

}



.docs blockquote {

    border-left:

    5px solid #0284c7;

    margin-left:0;

    padding-left:20px;

    color:#475569;

    font-style:italic;

}



.docs li {

    margin:10px 0;

}



.thanks {

    text-align:center;

    color:#0284c7;

    font-size:20px;

    margin-top:30px;

}