:root{
    --hc-auth-ink:#261d24;
    --hc-auth-muted:#756873;
    --hc-auth-line:#eadde5;
    --hc-auth-pink:#df327f;
    --hc-auth-pink-dark:#9f1f63;
    --hc-auth-purple:#6e3fc7;
    --hc-auth-success:#1b8d62;
    --hc-auth-error:#c83c50;
}

.hc-auth-page{
    position:relative;
    isolation:isolate;
    min-height:calc(100vh - 70px);
    overflow:hidden;
    padding:54px 18px 70px;
    background:linear-gradient(145deg,#fff8fb 0%,#f7edf5 48%,#f4effa 100%);
    color:var(--hc-auth-ink);
}

.hc-auth-page:before,.hc-auth-page:after{
    content:"";
    position:absolute;
    z-index:-1;
    border-radius:50%;
    pointer-events:none;
}

.hc-auth-page:before{
    width:430px;
    height:430px;
    top:-180px;
    left:-170px;
    background:radial-gradient(circle,rgba(224,50,128,.2),rgba(224,50,128,0) 70%);
}

.hc-auth-page:after{
    width:480px;
    height:480px;
    right:-210px;
    bottom:-230px;
    background:radial-gradient(circle,rgba(111,63,199,.17),rgba(111,63,199,0) 70%);
}

.hc-auth-shell{
    display:grid;
    grid-template-columns:minmax(290px,.88fr) minmax(390px,1.12fr);
    width:min(1040px,100%);
    margin:0 auto;
    overflow:hidden;
    border:1px solid rgba(126,72,101,.12);
    border-radius:30px;
    background:rgba(255,255,255,.93);
    box-shadow:0 28px 75px rgba(88,39,68,.15);
    backdrop-filter:blur(12px);
}

.hc-auth-intro{
    position:relative;
    overflow:hidden;
    padding:52px 44px;
    background:linear-gradient(150deg,#78194f 0%,#b62570 52%,#ed4388 100%);
    color:#fff;
}

.hc-auth-intro:after{
    content:"";
    position:absolute;
    width:250px;
    height:250px;
    right:-100px;
    bottom:-110px;
    border:1px solid rgba(255,255,255,.23);
    border-radius:50%;
    box-shadow:0 0 0 38px rgba(255,255,255,.045),0 0 0 76px rgba(255,255,255,.035);
}

.hc-auth-brand{
    position:relative;
    z-index:1;
    display:inline-flex;
    align-items:center;
    gap:11px;
    margin-bottom:46px;
    font-size:13px;
    font-weight:800;
    letter-spacing:2.5px;
    text-transform:uppercase;
}

.hc-auth-brand-mark{
    display:grid;
    width:38px;
    height:38px;
    place-items:center;
    border:1px solid rgba(255,255,255,.38);
    border-radius:12px;
    background:rgba(255,255,255,.14);
    font-family:Georgia,serif;
    font-size:21px;
}

.hc-auth-intro h1{
    position:relative;
    z-index:1;
    max-width:390px;
    margin:0;
    font-size:clamp(34px,4.2vw,52px);
    line-height:1.05;
    letter-spacing:-1.7px;
}

.hc-auth-intro>p{
    position:relative;
    z-index:1;
    max-width:410px;
    margin:22px 0 36px;
    color:rgba(255,255,255,.83);
    font-size:16px;
    line-height:1.7;
}

.hc-auth-points{
    position:relative;
    z-index:1;
    display:grid;
    gap:17px;
}

.hc-auth-point{
    display:flex;
    align-items:center;
    gap:13px;
    color:rgba(255,255,255,.94);
    font-size:14px;
}

.hc-auth-point svg{
    flex:0 0 21px;
    width:21px;
    height:21px;
    padding:4px;
    border-radius:50%;
    background:rgba(255,255,255,.16);
    fill:none;
    stroke:currentColor;
    stroke-width:2.4;
    stroke-linecap:round;
    stroke-linejoin:round;
}

.hc-auth-card{
    min-width:0;
    padding:50px 56px 42px;
    background:#fff;
}

.hc-auth-card-centered{
    display:flex;
    flex-direction:column;
    justify-content:center;
}

.hc-auth-eyebrow{
    margin:0 0 8px;
    color:var(--hc-auth-pink-dark);
    font-size:12px;
    font-weight:800;
    letter-spacing:1.4px;
    text-transform:uppercase;
}

.hc-auth-step h2,.hc-auth-card h2{
    margin:0;
    color:var(--hc-auth-ink);
    font-size:30px;
    line-height:1.18;
    letter-spacing:-.7px;
}

.hc-auth-subtitle{
    margin:11px 0 27px;
    color:var(--hc-auth-muted);
    font-size:14px;
    line-height:1.65;
}

.hc-auth-field{
    margin-bottom:18px;
    text-align:left;
}

.hc-auth-field label{
    display:block;
    margin:0 0 7px;
    color:#443840;
    font-size:12px;
    font-weight:800;
}

.hc-auth-input-wrap{position:relative}

.hc-auth-field input{
    width:100%;
    height:50px;
    margin:0;
    padding:0 46px 0 14px;
    border:1px solid #ded3da;
    border-radius:13px;
    outline:0;
    background:#fff;
    color:var(--hc-auth-ink);
    font:inherit;
    font-size:14px;
    transition:.2s;
}

.hc-auth-field input:focus{
    border-color:var(--hc-auth-pink);
    box-shadow:0 0 0 3px rgba(223,50,127,.1);
}

.hc-auth-field input::placeholder{color:#b1a5ac}

.hc-auth-toggle{
    position:absolute;
    top:5px;
    right:5px;
    height:40px;
    padding:0 9px;
    border:0;
    background:transparent;
    color:#8a7782;
    font-size:11px;
    font-weight:800;
    cursor:pointer;
}

.hc-auth-row{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:14px;
    margin:3px 0 0;
    color:#6e6169;
    font-size:12px;
}

.hc-auth-check{
    display:flex;
    align-items:center;
    gap:8px;
    cursor:pointer;
}

.hc-auth-check input{
    width:17px;
    height:17px;
    margin:0;
    accent-color:var(--hc-auth-pink);
}

.hc-auth-link,.hc-auth-link-button{
    color:var(--hc-auth-pink-dark);
    font-weight:800;
    text-decoration:none;
}

.hc-auth-link:hover{text-decoration:underline}

.hc-auth-link-button{
    padding:2px;
    border:0;
    background:transparent;
    font:inherit;
    font-size:12px;
    text-decoration:underline;
    cursor:pointer;
}

.hc-auth-link-button:disabled{
    color:#9e9299;
    text-decoration:none;
    cursor:not-allowed;
}

.hc-auth-primary,.hc-auth-secondary{
    min-height:50px;
    border-radius:14px;
    font:inherit;
    font-size:14px;
    font-weight:800;
    cursor:pointer;
    transition:.2s;
}

.hc-auth-primary{
    display:flex;
    width:100%;
    margin-top:24px;
    align-items:center;
    justify-content:center;
    gap:9px;
    border:0;
    background:linear-gradient(105deg,var(--hc-auth-pink-dark),var(--hc-auth-pink));
    box-shadow:0 10px 23px rgba(184,35,108,.22);
    color:#fff;
}

.hc-auth-primary:hover{
    transform:translateY(-1px);
    box-shadow:0 13px 27px rgba(184,35,108,.27);
}

.hc-auth-primary:disabled{
    opacity:.62;
    cursor:wait;
    transform:none;
}

.hc-auth-primary svg{
    width:18px;
    height:18px;
    fill:none;
    stroke:currentColor;
    stroke-width:2;
    stroke-linecap:round;
    stroke-linejoin:round;
}

.hc-auth-secondary{
    width:100%;
    margin-top:10px;
    padding:0 18px;
    border:1px solid var(--hc-auth-line);
    background:#fff;
    color:#695963;
}

.hc-auth-message{
    display:none;
    margin:18px 0 0;
    padding:12px 14px;
    border-radius:12px;
    font-size:13px;
    line-height:1.5;
    text-align:left;
}

.hc-auth-message.show{display:block}
.hc-auth-message.error{border:1px solid #f0bcc5;background:#fff1f3;color:#a6293f}
.hc-auth-message.success{border:1px solid #bce3d2;background:#effbf6;color:#176f50}
.hc-auth-message a{color:inherit;font-weight:800}
.hc-auth-message ul{margin:7px 0 0;padding-left:18px}

.hc-auth-footer-link{
    margin:29px 0 0;
    padding-top:21px;
    border-top:1px solid #eee5ea;
    color:#81747c;
    font-size:13px;
    text-align:center;
}

.hc-auth-footer-link a{
    color:var(--hc-auth-pink-dark);
    font-weight:800;
    text-decoration:none;
}

.hc-auth-progress{
    display:flex;
    align-items:center;
    margin:0 0 38px;
}

.hc-auth-progress-item{
    display:flex;
    align-items:center;
    color:#afa1aa;
    font-size:11px;
    font-weight:800;
    letter-spacing:.7px;
    text-transform:uppercase;
    white-space:nowrap;
}

.hc-auth-progress-item span{
    display:grid;
    width:29px;
    height:29px;
    margin-right:8px;
    place-items:center;
    border:1px solid #dfd3da;
    border-radius:50%;
    background:#fff;
    font-size:12px;
    transition:.25s;
}

.hc-auth-progress-item.active{color:var(--hc-auth-pink-dark)}
.hc-auth-progress-item.active span{border-color:var(--hc-auth-pink);background:var(--hc-auth-pink);color:#fff;box-shadow:0 6px 14px rgba(223,50,127,.24)}
.hc-auth-progress-item.done span{border-color:#f4c3da;background:#fff0f7;color:var(--hc-auth-pink-dark)}
.hc-auth-progress-line{height:1px;min-width:20px;flex:1;margin:0 10px;background:#eadfe5}

.hc-auth-step{display:none;animation:hcAuthIn .3s ease both}
.hc-auth-step.active{display:block}

@keyframes hcAuthIn{
    from{opacity:0;transform:translateY(9px)}
    to{opacity:1;transform:translateY(0)}
}

.hc-auth-code{
    display:flex;
    justify-content:center;
    gap:9px;
    margin:28px 0 12px;
}

.hc-auth-code input{
    width:49px;
    height:58px;
    margin:0;
    padding:0;
    border:1px solid #ded1d9;
    border-radius:13px;
    outline:0;
    background:#fff9fc;
    color:var(--hc-auth-pink-dark);
    font-size:25px;
    font-weight:800;
    text-align:center;
    caret-color:var(--hc-auth-pink);
}

.hc-auth-code input:focus{
    border-color:var(--hc-auth-pink);
    box-shadow:0 0 0 3px rgba(223,50,127,.11);
}

.hc-auth-email-pill{
    display:inline-flex;
    max-width:100%;
    padding:8px 12px;
    overflow:hidden;
    border-radius:999px;
    background:#f7edf3;
    color:#7e365f;
    font-size:12px;
    font-weight:800;
    text-overflow:ellipsis;
    white-space:nowrap;
}

.hc-auth-center{text-align:center}
.hc-auth-center .hc-auth-subtitle{margin-bottom:9px}
.hc-auth-helper{margin-top:16px;color:#81717a;font-size:12px;text-align:center}

.hc-auth-rules{
    display:flex;
    flex-wrap:wrap;
    gap:6px 13px;
    margin:-3px 0 19px;
    padding:0;
    color:#9c8e97;
    font-size:11px;
    list-style:none;
}

.hc-auth-rules li:before{
    content:"";
    display:inline-block;
    width:6px;
    height:6px;
    margin-right:6px;
    border-radius:50%;
    background:#d9ccd3;
    vertical-align:1px;
}

.hc-auth-rules li.valid{color:var(--hc-auth-success)}
.hc-auth-rules li.valid:before{background:var(--hc-auth-success)}

.hc-auth-success-view{
    padding:25px 0 12px;
    text-align:center;
}

.hc-auth-success-icon{
    display:grid;
    width:78px;
    height:78px;
    margin:0 auto 22px;
    place-items:center;
    border-radius:50%;
    background:#e9f8f1;
    color:var(--hc-auth-success);
    animation:hcAuthPop .45s ease both;
}

.hc-auth-success-icon svg{
    width:37px;
    height:37px;
    fill:none;
    stroke:currentColor;
    stroke-width:2.2;
    stroke-linecap:round;
    stroke-linejoin:round;
}

@keyframes hcAuthPop{
    0%{opacity:0;transform:scale(.65)}
    70%{transform:scale(1.08)}
    100%{opacity:1;transform:scale(1)}
}

.hc-auth-spinner{
    width:18px;
    height:18px;
    border:2px solid rgba(255,255,255,.42);
    border-top-color:#fff;
    border-radius:50%;
    animation:hcAuthSpin .7s linear infinite;
}

@keyframes hcAuthSpin{to{transform:rotate(360deg)}}

@media(max-width:850px){
    .hc-auth-page{padding:28px 14px 50px}
    .hc-auth-shell{grid-template-columns:1fr;max-width:610px}
    .hc-auth-intro{padding:30px 34px}
    .hc-auth-brand{margin-bottom:20px}
    .hc-auth-intro h1{font-size:32px}
    .hc-auth-intro>p{margin:14px 0 0}
    .hc-auth-points{display:none}
    .hc-auth-card{padding:34px 38px 36px}
}

@media(max-width:560px){
    .hc-auth-page{padding:0 0 35px;background:#fff}
    .hc-auth-shell{border:0;border-radius:0;box-shadow:none}
    .hc-auth-intro{padding:24px 22px 26px;border-radius:0 0 24px 24px}
    .hc-auth-brand{margin-bottom:14px}
    .hc-auth-intro h1{font-size:29px;letter-spacing:-1px}
    .hc-auth-intro>p{font-size:13px;line-height:1.55}
    .hc-auth-card{padding:29px 20px 32px}
    .hc-auth-progress{margin-bottom:29px}
    .hc-auth-progress-item{font-size:0}
    .hc-auth-progress-item span{margin:0}
    .hc-auth-progress-line{margin:0 8px}
    .hc-auth-step h2,.hc-auth-card h2{font-size:26px}
    .hc-auth-row{align-items:flex-start;flex-direction:column;gap:11px}
    .hc-auth-code{gap:5px;margin-top:25px}
    .hc-auth-code input{width:calc((100vw - 65px)/6);max-width:48px;height:54px;font-size:23px}
}

/* Google OAuth */
.hc-google-button{
    display:flex;
    width:100%;
    min-height:50px;
    align-items:center;
    justify-content:center;
    gap:11px;
    padding:0 18px;
    border:1px solid #d7dce2;
    border-radius:14px;
    background:#fff;
    color:#302b2f;
    box-shadow:0 4px 13px rgba(43,37,41,.05);
    font:inherit;
    font-size:14px;
    font-weight:800;
    cursor:pointer;
    transition:.2s;
}
.hc-google-button:hover{
    transform:translateY(-1px);
    border-color:#c5cbd2;
    box-shadow:0 8px 18px rgba(43,37,41,.08);
}
.hc-google-icon{width:20px;height:20px;flex:0 0 20px}
.hc-auth-separator{
    display:flex;
    align-items:center;
    gap:12px;
    margin:22px 0;
    color:#a0929a;
    font-size:11px;
    font-weight:800;
    letter-spacing:.5px;
    text-transform:uppercase;
}
.hc-auth-separator:before,.hc-auth-separator:after{
    content:"";
    height:1px;
    flex:1;
    background:#eee5ea;
}