.amer-register-page{
    min-height:calc(100vh - 80px);
    padding:24px;
    display:grid;
    place-items:center;
}

.amer-register-shell{
    width:min(1080px,100%);
    display:grid;
    grid-template-columns:.9fr 1.1fr;
    overflow:hidden;
    border-radius:26px;
    border:1px solid #e5eaf2;
    background:#fff;
    box-shadow:0 24px 70px rgba(27,42,70,.10);
}

.amer-register-brand{
    position:relative;
    min-height:650px;
    padding:42px;
    display:flex;
    flex-direction:column;
    justify-content:center;
    color:#fff;
    background:
        radial-gradient(circle at 20% 20%,rgba(104,126,255,.35),transparent 30%),
        radial-gradient(circle at 90% 80%,rgba(112,81,214,.25),transparent 30%),
        linear-gradient(145deg,#111e34,#08121f);
}

.register-logo{
    width:56px;
    height:56px;
    display:grid;
    place-items:center;
    margin-bottom:28px;
    border-radius:17px;
    background:linear-gradient(135deg,#5b75f3,#7964df);
    font-size:25px;
    font-weight:900;
}

.register-eyebrow,
.register-card-kicker{
    color:#8190da;
    font-size:9px;
    font-weight:900;
    letter-spacing:1.5px;
}

.register-brand-copy h1{
    max-width:360px;
    margin:7px 0 10px;
    font-size:30px;
    font-weight:900;
    line-height:1.6;
}

.register-brand-copy p{
    max-width:390px;
    margin:0;
    color:#9aa8bd;
    font-size:12px;
    line-height:2;
}

.register-benefits{
    display:grid;
    gap:10px;
    margin-top:36px;
}

.register-benefits>div{
    display:grid;
    grid-template-columns:36px 1fr;
    gap:2px 10px;
    align-items:center;
    padding:12px 14px;
    border-radius:14px;
    border:1px solid rgba(255,255,255,.07);
    background:rgba(255,255,255,.035);
}

.register-benefits span{
    grid-row:1/3;
    width:36px;
    height:36px;
    display:grid;
    place-items:center;
    border-radius:10px;
    background:rgba(105,126,245,.14);
    color:#9eabff;
    font-size:8px;
    font-weight:900;
}

.register-benefits strong{
    font-size:10px;
}

.register-benefits small{
    color:#8290a8;
    font-size:8px;
}

.amer-register-card{
    padding:38px;
}

.register-card-head h2{
    margin:4px 0 2px;
    color:#1c2940;
    font-size:23px;
    font-weight:900;
}

.register-card-head p{
    margin:0 0 24px;
    color:#8b96a8;
    font-size:9px;
}

.register-form{
    display:grid;
    gap:13px;
}

.register-field label{
    display:block;
    margin-bottom:6px;
    color:#516078;
    font-size:9px;
    font-weight:800;
}

.register-field input{
    width:100%;
    min-height:46px;
    padding:10px 12px;
    border:1px solid #e1e7ef;
    border-radius:12px;
    background:#fbfcfe;
    color:#253149;
    outline:none;
    font-family:inherit;
    font-size:10px;
}

.register-field input:focus{
    border-color:#7d8ff4;
    box-shadow:0 0 0 3px rgba(91,117,243,.08);
}

.register-field>span{
    display:block;
    margin-top:4px;
    color:#dc5670;
    font-size:8px;
}

.referral-field{
    padding:12px;
    border-radius:14px;
    border:1px dashed #d8deee;
    background:#f9faff;
}

.referral-field-head{
    display:flex;
    justify-content:space-between;
    align-items:center;
}

.referral-field-head>span{
    padding:3px 7px;
    border-radius:7px;
    background:#eef1ff;
    color:#697ee6;
    font-size:7px;
}

.referral-field small{
    display:block;
    margin-top:6px;
    color:#8b96a8;
    font-size:7.5px;
    line-height:1.8;
}

.register-password-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:10px;
}

.password-wrap{
    position:relative;
}

.password-wrap input{
    padding-left:44px;
}

.password-toggle{
    position:absolute;
    left:7px;
    top:50%;
    transform:translateY(-50%);
    width:32px;
    height:32px;
    border:0;
    border-radius:9px;
    background:#eef1f6;
    color:#7b879b;
}

.register-submit{
    min-height:49px;
    margin-top:4px;
    padding:10px 15px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    border:0;
    border-radius:13px;
    background:linear-gradient(135deg,#5d75f3,#735fdd);
    color:#fff;
    font-family:inherit;
    font-size:10px;
    font-weight:900;
    box-shadow:0 12px 28px rgba(91,117,243,.22);
}

.register-login-link{
    margin-top:5px;
    text-align:center;
    color:#8793a7;
    font-size:8.5px;
}

.register-login-link a{
    margin-right:5px;
    color:#6175df;
    font-weight:800;
    text-decoration:none;
}

.register-validation{
    padding:10px 12px;
    border-radius:10px;
    background:#fff4f6;
    color:#c94e66;
    font-size:8.5px;
}

html[data-theme="dark"] .amer-register-shell,
html[data-theme="dark"] .amer-register-card{
    background:#101a2c !important;
    border-color:rgba(255,255,255,.07) !important;
}

html[data-theme="dark"] .register-card-head h2{
    color:#eef2f9 !important;
}

html[data-theme="dark"] .register-field label{
    color:#aab4c5 !important;
}

html[data-theme="dark"] .register-field input{
    background:#0c1626 !important;
    border-color:rgba(255,255,255,.08) !important;
    color:#eef2f9 !important;
}

html[data-theme="dark"] .referral-field{
    background:#0d1728 !important;
    border-color:rgba(255,255,255,.08) !important;
}

@media(max-width:850px){
    .amer-register-page{
        padding:12px 8px 85px;
    }

    .amer-register-shell{
        grid-template-columns:1fr;
        border-radius:20px;
    }

    .amer-register-brand{
        min-height:auto;
        padding:25px;
    }

    .register-benefits{
        grid-template-columns:1fr 1fr 1fr;
        gap:6px;
        margin-top:22px;
    }

    .register-benefits>div{
        display:block;
        padding:10px;
    }

    .register-benefits span{
        margin-bottom:7px;
    }

    .amer-register-card{
        padding:24px 18px;
    }
}

@media(max-width:520px){
    .register-benefits{
        grid-template-columns:1fr;
    }

    .register-password-grid{
        grid-template-columns:1fr;
    }
}