*{box-sizing:border-box}html,body{margin:0;min-height:100%}body{background:radial-gradient(ellipse at top,#222,#090909 65%);color:#fff;font-family:Arial,Helvetica,sans-serif;min-height:100vh}.login-header{height:78px;border-bottom:1px solid #333;padding:0 5%;display:flex;align-items:center;justify-content:space-between}.brand{font-weight:800;letter-spacing:.24em;font-size:19px;color:#f4cf22;text-decoration:none}.back{color:#aaa;font-size:11px;letter-spacing:.14em;text-decoration:none}.back:hover{color:#fff}main{min-height:calc(100vh - 78px);display:grid;place-items:center;padding:30px 16px}.login-panel{width:min(100%,460px);background:#111;border:1px solid #333;padding:clamp(28px,5vw,46px);box-shadow:0 24px 80px #0009}.kicker{color:#f4cf22;font-size:10px;letter-spacing:.22em;font-weight:800}.login-panel h1{font-size:38px;font-weight:500;letter-spacing:-.04em;margin:18px 0 10px}.intro{font-size:14px;line-height:1.6;color:#aaa;margin:0 0 28px}.field{margin:0 0 20px}.field label{display:block;font-size:11px;letter-spacing:.12em;font-weight:700;margin-bottom:8px}.field input{width:100%;background:#181818;border:1px solid #383838;border-radius:0;color:#fff;font:inherit;padding:14px}.field input:focus{outline:none;border-color:#f4cf22}.password-wrap{position:relative}.password-wrap input{padding-right:58px}.eye-toggle{position:absolute;right:5px;top:50%;transform:translateY(-50%);height:42px;width:46px;border:0;background:transparent;color:#bbb;cursor:pointer;font-size:12px}.eye-toggle:hover{color:#fff}.submit{display:flex;align-items:center;justify-content:space-between;width:100%;margin-top:28px;padding:17px 20px;border:1px solid #f4cf22;background:#f4cf22;color:#050505;font-size:11px;letter-spacing:.12em;font-weight:800;cursor:pointer}.submit:hover{background:transparent;color:#f4cf22}.submit span{font-size:20px}.error{padding:13px 15px;margin-bottom:22px;border:1px solid #884444;background:#361b1b;color:#ffd7d7;font-size:13px}

.footnote{
    text-align:center;
    color:#777;
    font-size:12px;
    margin:24px 0 0;
}
.footnote a{
    display: inline-block;
    margin-top: 12px; 
}

    button:focus-visible,a:focus-visible{outline:2px solid #f4cf22;outline-offset:3px}
@media(max-width:560px){.login-header{height:64px;padding:0 20px}
.login-panel{padding:30px 24px}.login-panel h1{font-size:32px}}
.login-header img{
    max-width:120px;
    height:auto;
}

/* CYCKS — Chrome autofill correction */

.field input:-webkit-autofill,
.field input:-webkit-autofill:hover,
.field input:-webkit-autofill:focus,
.field input:-webkit-autofill:active {
    -webkit-text-fill-color: #fff !important;
    -webkit-box-shadow: 0 0 0 1000px #181818 inset !important;
    box-shadow: 0 0 0 1000px #181818 inset !important;
    caret-color: #fff !important;
}

/* Password eye visibility */

.eye-toggle {
    color: #bcbcbc;
}

.eye-toggle:hover,
.eye-toggle:focus-visible {
    color: #f4cf22;
}
<style>
/* CYCKS — Check Email page only */

.login-main {
    min-height: calc(100vh - 86px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
    box-sizing: border-box;
}

.login-layout {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.login-panel {
    width: 100%;
    max-width: 480px;
    box-sizing: border-box;
}

@media (max-width: 600px) {
    .login-main {
        min-height: calc(100dvh - 86px);
        padding: 24px 16px;
    }
}
</style>