:root{
    color-scheme:dark;

    --bg:#080604;
    --card:#15100d;
    --card2:#0e0b09;
    --copper:#ef9a65;
    --cream:#fff7f0;
    --muted:#b9a89a;
    --line:rgba(239,154,101,.22);
}


*{
    box-sizing:border-box;
}


html,
body{
    min-height:100%;
}


body.kpr-body{
    margin:0;

    background:
        radial-gradient(
            circle at 50% -10%,
            rgba(239,154,101,.12),
            transparent 38%
        ),
        var(--bg);

    color:var(--cream);

    font-family:
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Arial,
        sans-serif;
}


.kpr-shell{
    width:100%;

    min-height:100vh;

    min-height:100dvh;

    display:flex;

    align-items:center;

    justify-content:center;

    padding:
        max(24px, env(safe-area-inset-top))
        18px
        max(24px, env(safe-area-inset-bottom));
}


.kpr-card{
    width:min(
        100%,
        510px
    );

    padding:
        30px;

    border:
        1px solid
        var(--line);

    border-radius:
        27px;

    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,.025),
            rgba(255,255,255,.006)
        ),
        var(--card);

    box-shadow:
        0 26px 80px
        rgba(0,0,0,.36);
}


.kpr-head{
    display:flex;

    align-items:center;

    justify-content:
        space-between;

    gap:20px;

    margin-bottom:34px;
}


.kpr-brand{
    color:var(--copper);

    font-size:20px;

    font-weight:900;

    letter-spacing:.14em;

    text-decoration:none;
}


.kpr-context{
    color:#8f7d70;

    font-size:12px;

    font-weight:750;

    text-transform:uppercase;

    letter-spacing:.12em;
}


.kpr-copy{
    margin-bottom:26px;
}


.kpr-eyebrow{
    display:block;

    margin-bottom:10px;

    color:var(--copper);

    font-size:11px;

    font-weight:850;

    letter-spacing:.16em;
}


.kpr-copy h1{
    margin:0 0 12px;

    color:var(--cream);

    font-size:
        clamp(
            28px,
            7vw,
            38px
        );

    line-height:1.04;

    letter-spacing:-.035em;
}


.kpr-copy p{
    margin:0;

    color:var(--muted);

    font-size:15px;

    line-height:1.65;
}


.kpr-copy strong{
    color:var(--cream);
}


.kpr-message{
    margin:
        -8px 0 24px;

    padding:
        13px 15px;

    border:
        1px solid
        rgba(239,154,101,.25);

    border-radius:14px;

    background:
        rgba(239,154,101,.075);

    color:#ffd5bb;

    font-size:14px;

    line-height:1.5;
}


.kpr-message.is-success{
    border-color:
        rgba(149,214,164,.25);

    background:
        rgba(149,214,164,.07);

    color:#c7efd0;
}


.kpr-form{
    display:grid;

    gap:18px;
}


.kpr-label{
    display:grid;

    gap:8px;

    color:#d8c9bd;

    font-size:13px;

    font-weight:700;
}


.kpr-input{
    width:100%;

    min-height:53px;

    padding:0 15px;

    border:
        1px solid
        rgba(239,154,101,.22);

    border-radius:14px;

    outline:none;

    background:#0b0907;

    color:var(--cream);

    font:inherit;

    font-size:16px;

    transition:
        border-color .16s ease,
        box-shadow .16s ease;
}


.kpr-input:focus{
    border-color:
        rgba(239,154,101,.65);

    box-shadow:
        0 0 0 4px
        rgba(239,154,101,.09);
}


.kpr-code{
    height:68px;

    text-align:center;

    font-size:30px;

    font-weight:850;

    letter-spacing:.2em;

    font-variant-numeric:
        tabular-nums;
}


.kpr-primary{
    min-height:54px;

    display:flex;

    align-items:center;

    justify-content:center;

    padding:0 20px;

    border:0;

    border-radius:15px;

    background:
        var(--copper);

    color:#180d08;

    font-size:15px;

    font-weight:900;

    text-align:center;

    cursor:pointer;

    text-decoration:none;
}


.kpr-primary:hover{
    filter:brightness(1.05);
}


.kpr-primary-link{
    width:100%;
}


.kpr-password-wrap{
    position:relative;
}


.kpr-password-wrap
.kpr-input{
    padding-right:78px;
}


.kpr-eye{
    position:absolute;

    top:50%;

    right:11px;

    transform:
        translateY(-50%);

    border:0;

    background:transparent;

    color:var(--copper);

    font-size:12px;

    font-weight:800;

    cursor:pointer;
}


.kpr-privacy{
    margin:
        18px 0 0;

    color:#76685e;

    font-size:12px;

    line-height:1.55;
}


.kpr-inline-form{
    margin-top:16px;

    text-align:center;
}


.kpr-link-button{
    border:0;

    background:transparent;

    color:var(--copper);

    font-size:13px;

    font-weight:750;

    cursor:pointer;
}


.kpr-footer{
    margin-top:26px;

    padding-top:20px;

    border-top:
        1px solid
        rgba(255,255,255,.055);

    text-align:center;
}


.kpr-footer a{
    color:#a99586;

    font-size:13px;

    text-decoration:none;
}


@media(max-width:560px){

    .kpr-shell{
        align-items:
            flex-start;

        padding-left:12px;
        padding-right:12px;
    }


    .kpr-card{
        padding:
            24px 19px;

        border-radius:23px;
    }


    .kpr-head{
        margin-bottom:28px;
    }


    .kpr-code{
        font-size:27px;
    }

}