/* Shared account views: sign in, registration, and password settings. */
.account-layout {
    display:grid;
    grid-template-columns:1fr 1.08fr;
    max-width:1000px;
    margin:54px auto 80px;
    min-height:660px;
    background:var(--surface);
    border:1px solid var(--surface-raised);
    border-radius:22px;
    overflow:hidden;
    box-shadow:0 28px 100px color-mix(in srgb, var(--background) 20.00%, transparent);
    color:var(--font);
    animation:account-enter .6s ease both
}

.account-story {
    position:relative;
    display:flex;
    flex-direction:column;
    padding:45px;
    overflow:hidden;
    background:radial-gradient(ellipse at 40% 48%,color-mix(in srgb, var(--main) 43.92%, transparent),transparent 65%),linear-gradient(140deg,var(--surface),var(--surface) 60%,var(--surface));
    border-right:1px solid var(--surface-raised)
}

.account-story::before,.account-story::after {
    content:"";
    position:absolute;
    inset:100px -80px;
    transform:rotate(-27deg);
    border:1px solid color-mix(in srgb, var(--main) 9.41%, transparent);
    pointer-events:none
}

.account-story::after {
    inset:145px -105px;
    transform:rotate(-27deg)
}

.account-eyebrow {
    display:block;
    font-size:10px;
    font-weight:700;
    letter-spacing:2.4px;
    color:var(--muted);
    margin-bottom:18px
}

.account-story>.account-eyebrow {
    color:var(--main);
    z-index:1
}

.account-emblem {
    font-family:Arial,sans-serif;
    font-size:190px;
    font-weight:900;
    font-style:italic;
    letter-spacing:-22px;
    line-height:1;
    margin:43px 0 32px;
    color:var(--main,var(--main));
    text-shadow:0 10px 70px color-mix(in srgb, var(--main) 29.02%, transparent);
    position:relative;
    align-self:center;
    animation:account-float 6s ease-in-out infinite
}

.account-emblem>span {
    display:inline-block;
    font-size:90px;
    font-style:normal;
    color:var(--font);
    transform:translate(-20px,20px);
    text-shadow:none
}

.account-story h2 {
    font-size:30px;
    line-height:1.5;
    font-weight:800;
    position:relative;
    letter-spacing:-.8px;
    color:var(--font)
}

.account-story h2>span {
    color:var(--main)
}

.account-story p {
    font-size:13px;
    line-height:1.85;
    color:var(--muted);
    position:relative;
    margin-top:10px
}

.account-story-footer {
    margin-top:auto;
    display:flex;
    align-items:center;
    gap:10px;
    font-size:12px;
    color:var(--font);
    padding-top:25px
}

.account-status-dot {
    width:6px;
    height:6px;
    display:inline-block;
    border-radius:50%;
    background:var(--main);
    box-shadow:0 0 14px var(--main)
}

.account-panel {
    padding:42px 48px;
    display:flex;
    flex-direction:column;
    justify-content:center
}

.account-back {
    font-size:12px;
    color:var(--muted);
    text-decoration:none;
    margin-bottom:38px;
    display:flex;
    align-items:center;
    gap:9px;
    width:fit-content;
    transition:color .2s
}

.account-back:hover,.account-help a:hover {
    color:var(--font)
}

.account-panel>.account-eyebrow {
    color:var(--main);
    margin-bottom:10px
}

.account-panel h1 {
    font-size:29px;
    font-weight:800;
    letter-spacing:-.6px;
    color:var(--font);
    line-height:1.4;
    margin:0 0 12px
}

.account-panel h1>span {
    color:var(--main)
}

.account-intro {
    font-size:12px;
    line-height:1.8;
    color:var(--muted);
    margin-bottom:25px
}

.account-form {
    display:grid;
    gap:18px
}

.account-field label {
    font-size:12px;
    font-weight:500;
    color:var(--font);
    display:block;
    margin-bottom:9px
}

.account-input-wrap {
    position:relative;
    display:flex;
    align-items:center
}

.account-input-wrap>i {
    position:absolute;
    left:15px;
    font-size:13px;
    color:var(--muted);
    pointer-events:none
}

.account-input-wrap input {
    width:100%;
    height:49px;
    padding:0 44px;
    border:1px solid var(--surface-raised);
    border-radius:9px;
    color:var(--font);
    background:var(--surface);
    font:inherit;
    font-size:12px;
    outline:none;
    transition:border-color .2s,box-shadow .2s
}

.account-input-wrap input::placeholder {
    color:var(--muted)
}

.account-input-wrap input:focus {
    border-color:var(--main,var(--main));
    box-shadow:0 0 0 3px color-mix(in srgb, var(--main) 8.24%, transparent)
}

.account-password-toggle {
    position:absolute;
    right:8px;
    border:0;
    background:none;
    color:var(--muted);
    width:34px;
    height:34px;
    border-radius:6px;
    cursor:pointer
}

.account-password-toggle:hover {
    color:var(--font);
    background:color-mix(in srgb, var(--font) 3.14%, transparent)
}

.account-submit {
    width:100%;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:14px;
    background:linear-gradient(105deg,var(--main),var(--main));
    color:var(--font);
    border:1px solid var(--main);
    border-radius:9px;
    min-height:49px;
    font:inherit;
    font-size:13px;
    font-weight:700;
    box-shadow:0 7px 24px color-mix(in srgb, var(--main) 14.12%, transparent);
    cursor:pointer;
    transition:transform .2s,box-shadow .2s
}

.account-submit:hover {
    transform:translateY(-2px);
    box-shadow:0 10px 30px color-mix(in srgb, var(--main) 25.10%, transparent)
}

.account-submit:disabled {
    opacity:.6;
    cursor:wait;
    transform:none
}

.account-feedback {
    margin:0;
    color:var(--main);
    font-size:12px;
    line-height:1.65
}

.account-feedback:empty {
    display:none
}

.account-switch {
    text-align:center;
    color:var(--muted);
    font-size:12px;
    margin:24px 0 0
}

.account-switch a {
    color:var(--main);
    text-decoration:none;
    font-weight:600;
    margin-left:3px
}

.account-help {
    display:flex;
    align-items:center;
    justify-content:center;
    gap:5px;
    border-top:1px solid var(--surface-raised);
    padding-top:20px;
    margin-top:29px;
    color:var(--muted);
    font-size:11px
}

.account-help a {
    color:var(--muted);
    text-decoration:none;
    transition:color .2s
}

.account-captcha {
    max-width:100%;
    overflow:hidden;
    min-height:78px
}

.account-layout--compact {
    max-width:520px;
    display:block;
    min-height:0
}

.account-layout--compact .account-panel {
    padding:40px
}

.account-form :focus-visible,.account-back:focus-visible,.account-switch a:focus-visible {
    outline:2px solid var(--main);
    outline-offset:4px
}

@keyframes account-enter {
    from {
        opacity:0;
        transform:translateY(16px)
    }
    to {
        opacity:1;
        transform:none
    }
}

@keyframes account-float {
    0%,100% {
        transform:translateY(0)
    }
    50% {
        transform:translateY(-9px)
    }
}

@media(max-width:800px) {
    .account-layout {
        margin:30px auto 50px;
        max-width:510px;
        grid-template-columns:1fr;
        min-height:0
    }
    .account-story {
        display:none
    }
    .account-panel {
        padding:35px
    }
    .account-panel h1 {
        font-size:27px
    }
    .account-back {
        margin-bottom:30px
    }
}

@media(max-width:420px) {
    .account-layout {
        border-radius:14px;
        margin-top:18px
    }
    .account-panel,.account-layout--compact .account-panel {
        padding:27px 20px
    }
    .account-panel h1 {
        font-size:24px
    }
    .account-help {
        font-size:10px
    }
}

@media(prefers-reduced-motion:reduce) {
    .account-layout,.account-emblem {
        animation:none
    }
    .account-submit,.account-input-wrap input {
        transition:none
    }
}