body{
    margin:0;
    background:#000;
    color:#e5e7eb;
    font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
    display:flex;
    justify-content:center;
    align-items:center;
    min-height:100vh;
}

.login-wrap,
.wrap{
    text-align:center;
}

h1{
    text-indent:-9999px;
    background-image:url(/assets/logo.png);
    background-repeat:no-repeat;
    background-position:center top;
    width:200px;
    height:60px;
    background-size:contain;
    margin:0 auto 10px auto;
}

.subtitle{
    margin:0 0 20px 0;
    font-size:16px;
    color:#fff;
}

form{
    background:#020617;
    padding:20px;
    border-radius:10px;
    border:1px solid #111827;
    box-shadow:0 10px 25px rgba(0,0,0,.45);
    min-width:280px;
    max-width:382px;
    margin:0 auto;
    box-sizing:border-box;
}

label{
    display:block;
    text-align:left;
    font-size:13px;
    margin-bottom:6px;
    color:#e5e7eb;
}

input[type=password],
input[type=text]{
    width:100%;
    padding:.6rem .75rem;
    font-size:1rem;
    margin-bottom:1rem;
    border-radius:6px;
    border:1px solid #4b5563;
    box-sizing:border-box;
    background: #fdfdfd;
    color: #111827;
}

input[type=password]:focus,
input[type=text]:focus,
input[type=password]:focus-visible,
input[type=text]:focus-visible{
    outline:none;
    border-color:#4b5563;
    box-shadow:none;
}

input[type=password]::placeholder,
input[type=text]::placeholder{
    color:#6b7280;
}

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active{
    -webkit-text-fill-color:#111827 !important;
    -webkit-box-shadow:0 0 0 1000px #fdfdfd inset !important;
    box-shadow:0 0 0 1000px #fdfdfd inset !important;
    transition:background-color 9999s ease-in-out 0s;
    caret-color:#111827;
}

button{
    padding:.6rem 1.4rem;
    font-size:.95rem;
    cursor:pointer;
    border-radius:6px;
    border:1px solid #1f2937;
    background:#111827;
    color:#e5e7eb;
    font-weight:500;
    width:100%;
}

button:hover{
    background:#1f2937;
}

.error{
    color:#f87171;
    margin-bottom:1rem;
    font-size:.9rem;
    text-align:left;
}

.msg{
    color:#93c5fd;
    margin-bottom:1rem;
    font-size:.9rem;
    text-align:left;
}

.meta{
    margin-top:12px;
    font-size:13px;
    color:#9ca3af;
}

.meta a{
    color:#93c5fd;
    text-decoration:none;
}

.meta a:hover{
    text-decoration:underline;
}

.recaptcha-wrap{
    margin-bottom:12px;
    display:flex;
    justify-content:center;
}

.otp-field-wrap{
    margin-bottom:1rem;
}

.otp-inputs{
    display:grid;
    grid-template-columns:repeat(6, 1fr);
    gap:8px;
    margin-bottom:.25rem;
}

.otp-digit{
    width:100%;
    height:44px;
    margin-bottom:0 !important;
    padding:0 !important;
    text-align:center;
    font-size:1.4rem !important;
    font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
    background:#020617 !important;
    color:#e5e7eb !important;
    border:1px solid #4b5563 !important;
    border-radius:6px;
}

.otp-digit:focus,
.otp-digit:focus-visible{
    outline:none;
    border-color:#64748b !important;
    box-shadow:none !important;
}

form.otp-invalid .otp-inputs{
    animation:otpShake .22s ease-in-out 0s 1;
}

form.otp-invalid .otp-digit{
    border-color:#b91c1c !important;
}

@keyframes otpShake{
    0%{ transform:translateX(0); }
    20%{ transform:translateX(-3px); }
    40%{ transform:translateX(3px); }
    60%{ transform:translateX(-2px); }
    80%{ transform:translateX(2px); }
    100%{ transform:translateX(0); }
}

@media (max-width:480px){
    form{
        padding:0;
        margin:0;
        background:transparent;
        border:none;
        max-width:300px;
    }

    .subtitle{
        margin:0 0 40px 0;
    }
}