/* Container */

.wuc-container{
max-width:640px;
margin:40px auto;
background:#ffffff;
border-radius:14px;
box-shadow:0 20px 45px rgba(0,0,0,0.15);
overflow:hidden;
font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial;
}

/* Header */

.wuc-header{
background:#000000;
color:#ffffff;
padding:20px;
font-size:20px;
text-align:center;
letter-spacing:0.5px;
}

/* Form */

#wuc-form{
display:flex;
gap:10px;
padding:20px;
flex-wrap:wrap;
}

/* Input */

#wuc-url{
flex:1;
padding:14px 16px;
border-radius:8px;
border:1px solid #ddd;
font-size:15px;
transition:all 0.2s ease;
outline:none;
}

#wuc-url:focus{
border-color:#d6111e;
box-shadow:0 0 0 3px rgba(214,17,30,0.15);
}

/* Button */

#wuc-form button{
background:linear-gradient(135deg,#d6111e,#a80c15);
color:#ffffff;
border:none;
padding:14px 20px;
border-radius:8px;
font-size:15px;
font-weight:600;
cursor:pointer;
transition:all 0.25s ease;
box-shadow:0 6px 14px rgba(214,17,30,0.25);
}

/* Button hover */

#wuc-form button:hover{
transform:translateY(-2px);
box-shadow:0 10px 22px rgba(214,17,30,0.35);
}

/* Button active */

#wuc-form button:active{
transform:translateY(0);
box-shadow:0 4px 10px rgba(214,17,30,0.25);
}

/* Results */

#wuc-results{
padding:20px;
border-top:1px solid #eee;
font-size:15px;
}

/* Status card */

.wuc-item{
background:#f8f8f8;
padding:16px;
border-radius:10px;
line-height:1.6;
border-left:5px solid #ddc76d;
box-shadow:0 6px 14px rgba(0,0,0,0.08);
}

/* Online status */

.wuc-online{
border-left-color:#2ecc71;
}

/* Offline status */

.wuc-offline{
border-left-color:#d6111e;
}

/* Responsive */

@media (max-width:600px){

#wuc-form{
flex-direction:column;
}

#wuc-form button{
width:100%;
}

}