/* WEB PANEL PROXY public CSS */
*{
    box-sizing:border-box;
}

body{
    margin:0;
    font-family:Arial, Helvetica, sans-serif;
    background:#0082c9;
    min-height:100vh;
    display:flex;
    justify-content:center;
    align-items:center;
}

.login-box{
    width:360px;
    background:#ffffff;
    border-radius:12px;
    padding:32px;
    box-shadow:0 10px 30px rgba(0,0,0,.2);
}

.logo{
    text-align:center;
    font-size:32px;
    font-weight:bold;
    color:#0082c9;
    margin-bottom:24px;
}

input{
    width:100%;
    padding:12px;
    border:1px solid #d9d9d9;
    border-radius:6px;
    margin-bottom:12px;
    font-size:14px;
}

input:focus{
    outline:none;
    border-color:#0082c9;
}

button{
    width:100%;
    padding:12px;
    border:none;
    border-radius:6px;
    background:#0082c9;
    color:#fff;
    font-size:15px;
    cursor:pointer;
}

button:hover{
    opacity:.95;
}

.error-message{
    display:none;
    margin-top:14px;
    padding:12px;
    background:#fff0f0;
    border-left:4px solid #d32f2f;
    border-radius:4px;
    color:#c62828;
    font-size:14px;
}

.shake{
    animation:shake .35s ease-in-out;
}

@keyframes shake{
    0%{transform:translateX(0);}
    20%{transform:translateX(-6px);}
    40%{transform:translateX(6px);}
    60%{transform:translateX(-4px);}
    80%{transform:translateX(4px);}
    100%{transform:translateX(0);}
}