@font-face{font-family:Poppins;src:url('Poppins-Regular.ttf') format('truetype');font-weight:400;font-display:swap}
@font-face{font-family:Poppins;src:url('Poppins-Bold.ttf') format('truetype');font-weight:700;font-display:swap}
:root{color-scheme:dark;font-family:Poppins,Arial,sans-serif;color:#f7f7f7;background:#101114}
*{box-sizing:border-box}
body{margin:0;min-width:280px;background:#101114 url('background.png') center center/cover no-repeat fixed}
.login-page{min-height:100vh;min-height:100svh;display:flex;align-items:center;justify-content:flex-end;padding:48px 7.8vw}
.login-card{width:456px;max-width:100%;padding:24px 30px 34px;border:3px solid #f4f4f4;border-radius:23px;background:rgba(15,17,20,.97);box-shadow:0 15px 55px #0005}
.brand{height:57px;display:flex;justify-content:flex-end;align-items:center;overflow:hidden}
.brand img{width:290px;max-width:none;height:auto;margin-right:-41px}
.accent{width:28px;height:3px;background:#df1020;margin:7px 0 15px}
h1{font-size:35px;line-height:1.06;letter-spacing:-1.2px;margin:0 0 13px;font-weight:700}
h1 span{display:block;color:#ed1826}
.intro{font-size:11px;line-height:1.9;color:#b3b4b7;margin:0 0 24px}
.field{margin-bottom:12px}
.input-wrap{display:flex;align-items:center;position:relative}
.input-wrap input{font:inherit;font-size:12px;color:#fff;width:100%;height:46px;border:1px solid #45464a;border-radius:8px;background:#202326;padding:0 45px 0 48px;box-shadow:inset 0 0 0 2px #ffffff03}
input::placeholder{color:#aeb0b4;opacity:1}
.field-icon{position:absolute;left:16px;width:20px;height:20px;color:#c0c2c5;pointer-events:none}
.password-toggle{position:absolute;right:3px;top:1px;width:43px;height:44px;display:grid;place-items:center;background:none;border:0;color:#c0c2c5;cursor:pointer;border-radius:6px}
.password-toggle svg{width:20px;height:20px}
.password-toggle[aria-pressed=true] .eye-slash{display:none}
.form-options{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:10px;margin:15px 0 19px}
.remember{display:flex;align-items:center;gap:8px;cursor:pointer;min-height:28px}
.remember input[type=checkbox]{width:17px;height:17px;margin:0;accent-color:#ed1826}
a{color:#ddd;text-decoration:none}
.form-options a{border-bottom:1px solid #bc1721;padding:5px 0 2px}
a:hover{color:#fff}
.submit-button{display:flex;align-items:center;justify-content:center;gap:12px;width:100%;min-height:46px;padding:10px;border:0;border-radius:8px;background:#e30b1b;color:#fff;font:inherit;font-size:13px;cursor:pointer}
.submit-button:hover{background:#fa1526}
.submit-button span{font-size:22px;line-height:1}
.membership{text-align:center;font-size:11px;margin-top:19px}
.membership a{text-decoration:underline;text-underline-offset:4px;color:#bfc1c5}
:focus-visible{outline:2px solid #fff;outline-offset:4px}
.input-wrap input:focus{outline:2px solid #ed1826;outline-offset:2px}
.field-error,.validation-summary{color:#ffb4ba;font-size:12px;line-height:1.6}
.field-validation-valid,.validation-summary-valid{display:none}
.field-error:not(:empty){display:block;margin-top:7px}
.validation-summary-errors{padding:10px 12px;border:1px solid #ad343e;border-radius:7px;background:#39191d;margin-bottom:16px}
.validation-summary ul{margin:0;padding-left:18px}
.input-validation-error{border-color:#ff8994!important}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
footer{padding:8px 16px;text-align:center;font-size:10px;color:#b1b3b7;background:#0b0d10}
@media(min-width:1000px){.login-card{transform:translateY(28px)}}
@media(max-width:999px){.login-page{padding:36px 6vw}.login-card{width:430px}}
@media(max-width:600px){body{background-position:38% center;background-attachment:scroll}.login-page{justify-content:center;padding:30px 18px;background:#0005}.login-card{padding:22px 23px 29px;border-width:2px;border-radius:20px}h1{font-size:32px}.intro{font-size:11px}.desktop-break{display:none}.form-options{font-size:10px}.brand{height:54px}}
@media(max-width:340px){.login-page{padding:20px 12px}.login-card{padding:18px}h1{font-size:28px}.form-options{flex-wrap:wrap}.brand img{width:260px;margin-right:-37px}}

/* Desktop proportions matched to the requested frame. */
@media(min-width:1000px){
.login-page{--login-unit:clamp(.85px,.0636vw,1.75px);padding-left:3.5vw;padding-right:3.5vw}
.login-card{width:calc(456 * var(--login-unit));max-width:100%;padding:calc(24 * var(--login-unit)) calc(30 * var(--login-unit)) calc(34 * var(--login-unit));border:calc(3 * var(--login-unit)) solid #f4f4f4;border-radius:calc(23 * var(--login-unit));background:rgba(15,17,20,.97);box-shadow:0 calc(15 * var(--login-unit)) calc(55 * var(--login-unit)) #0005}
.brand{height:calc(57 * var(--login-unit));display:flex;justify-content:flex-end;align-items:center;overflow:hidden}
.brand img{width:calc(290 * var(--login-unit));max-width:none;height:auto;margin-right:calc(-41 * var(--login-unit))}
.accent{width:calc(28 * var(--login-unit));height:calc(3 * var(--login-unit));background:#df1020;margin:calc(7 * var(--login-unit)) 0 calc(15 * var(--login-unit))}
h1{font-size:calc(35 * var(--login-unit));line-height:1.06;letter-spacing:calc(-1.2 * var(--login-unit));margin:0 0 calc(13 * var(--login-unit));font-weight:700}
h1 span{display:block;color:#ed1826}
.intro{font-size:calc(11 * var(--login-unit));line-height:1.9;color:#b3b4b7;margin:0 0 calc(24 * var(--login-unit))}
.field{margin-bottom:calc(12 * var(--login-unit))}
.input-wrap{display:flex;align-items:center;position:relative}
.input-wrap input{font:inherit;font-size:calc(12 * var(--login-unit));color:#fff;width:100%;height:calc(46 * var(--login-unit));border:calc(1 * var(--login-unit)) solid #45464a;border-radius:calc(8 * var(--login-unit));background:#202326;padding:0 calc(45 * var(--login-unit)) 0 calc(48 * var(--login-unit));box-shadow:inset 0 0 0 calc(2 * var(--login-unit)) #ffffff03}
input::placeholder{color:#aeb0b4;opacity:1}
.field-icon{position:absolute;left:calc(16 * var(--login-unit));width:calc(20 * var(--login-unit));height:calc(20 * var(--login-unit));color:#c0c2c5;pointer-events:none}
.password-toggle{position:absolute;right:calc(3 * var(--login-unit));top:calc(1 * var(--login-unit));width:calc(43 * var(--login-unit));height:calc(44 * var(--login-unit));display:grid;place-items:center;background:none;border:0;color:#c0c2c5;cursor:pointer;border-radius:calc(6 * var(--login-unit))}
.password-toggle svg{width:calc(20 * var(--login-unit));height:calc(20 * var(--login-unit))}
.password-toggle[aria-pressed=true] .eye-slash{display:none}
.form-options{display:flex;align-items:center;justify-content:space-between;gap:calc(10 * var(--login-unit));font-size:calc(10 * var(--login-unit));margin:calc(15 * var(--login-unit)) 0 calc(19 * var(--login-unit))}
.remember{display:flex;align-items:center;gap:calc(8 * var(--login-unit));cursor:pointer;min-height:calc(28 * var(--login-unit))}
.remember input[type=checkbox]{width:calc(17 * var(--login-unit));height:calc(17 * var(--login-unit));margin:0;accent-color:#ed1826}
a{color:#ddd;text-decoration:none}
.form-options a{border-bottom:calc(1 * var(--login-unit)) solid #bc1721;padding:calc(5 * var(--login-unit)) 0 calc(2 * var(--login-unit))}
a:hover{color:#fff}
.submit-button{display:flex;align-items:center;justify-content:center;gap:calc(12 * var(--login-unit));width:100%;min-height:calc(46 * var(--login-unit));padding:calc(10 * var(--login-unit));border:0;border-radius:calc(8 * var(--login-unit));background:#e30b1b;color:#fff;font:inherit;font-size:calc(13 * var(--login-unit));cursor:pointer}
.submit-button:hover{background:#fa1526}
.submit-button span{font-size:calc(22 * var(--login-unit));line-height:1}
.membership{text-align:center;font-size:calc(11 * var(--login-unit));margin-top:calc(19 * var(--login-unit))}
.membership a{text-decoration:underline;text-underline-offset:calc(4 * var(--login-unit));color:#bfc1c5}
:focus-visible{outline:calc(2 * var(--login-unit)) solid #fff;outline-offset:calc(4 * var(--login-unit))}
.input-wrap input:focus{outline:calc(2 * var(--login-unit)) solid #ed1826;outline-offset:calc(2 * var(--login-unit))}
.field-error,.validation-summary{color:#ffb4ba;font-size:calc(12 * var(--login-unit));line-height:1.6}
.field-validation-valid,.validation-summary-valid{display:none}
.field-error:not(:empty){display:block;margin-top:calc(7 * var(--login-unit))}
.validation-summary-errors{padding:calc(10 * var(--login-unit)) calc(12 * var(--login-unit));border:calc(1 * var(--login-unit)) solid #ad343e;border-radius:calc(7 * var(--login-unit));background:#39191d;margin-bottom:calc(16 * var(--login-unit))}
.validation-summary ul{margin:0;padding-left:calc(18 * var(--login-unit))}
.input-validation-error{border-color:#ff8994!important}
.sr-only{position:absolute;width:calc(1 * var(--login-unit));height:calc(1 * var(--login-unit));padding:0;margin:calc(-1 * var(--login-unit));overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

.login-card{transform:translateY(12px)}
}

/* Center the logo inside the login card at every screen size. */
.brand{justify-content:center}
.brand img{margin-right:0}