/*
|--------------------------------------------------------------------------
| RATIRAM DASHBOARD — AUTH UI
|--------------------------------------------------------------------------
| Complete responsive authentication stylesheet
| Login + Signup | Single Page | No unwanted page jump
|--------------------------------------------------------------------------
*/


/* =========================================================
   01. ROOT VARIABLES
========================================================= */

:root {

    --bg:
        #050b14;

    --bg-soft:
        #08111f;

    --card:
        rgba(11, 22, 38, 0.96);

    --card-soft:
        rgba(255, 255, 255, 0.025);

    --input:
        rgba(3, 10, 19, 0.82);

    --white:
        #ffffff;

    --text:
        #f1f6ff;

    --text-soft:
        #a0b3ca;

    --text-muted:
        #6c819a;

    --text-dark:
        #4e637c;

    --border:
        rgba(255, 255, 255, 0.075);

    --border-light:
        rgba(255, 255, 255, 0.11);

    --blue:
        #397fff;

    --blue-light:
        #72a5ff;

    --purple:
        #744cff;

    --green:
        #45d99a;

    --red:
        #ff6578;

    --yellow:
        #ffc857;

    --radius-xl:
        28px;

    --radius-lg:
        18px;

    --radius-md:
        13px;

    --radius-sm:
        9px;

    --ease:
        cubic-bezier(.4, 0, .2, 1);

    --ease-out:
        cubic-bezier(.22, 1, .36, 1);

}


/* =========================================================
   02. RESET
========================================================= */

*,
*::before,
*::after {

    box-sizing:
        border-box;

}


html {

    width:
        100%;

    min-height:
        100%;

    scroll-behavior:
        smooth;

}


body {

    width:
        100%;

    min-height:
        100vh;

    margin:
        0;

    padding:
        0;

    background:
        var(--bg);

    color:
        var(--text);

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

    font-size:
        14px;

    line-height:
        1.5;

    -webkit-font-smoothing:
        antialiased;

    -moz-osx-font-smoothing:
        grayscale;

    overflow-x:
        hidden;

}


button,
input,
textarea,
select {

    font:
        inherit;

}


button {

    border:
        0;

    outline:
        none;

}


button:focus-visible,
a:focus-visible,
input:focus-visible {

    outline:
        2px solid
        rgba(114,165,255,.7);

    outline-offset:
        3px;

}


a {

    text-decoration:
        none;

}


img,
svg {

    display:
        block;

}


/* =========================================================
   03. BACKGROUND
========================================================= */

.page-background {

    position:
        fixed;

    inset:
        0;

    z-index:
        0;

    width:
        100%;

    height:
        100%;

    overflow:
        hidden;

    pointer-events:
        none;

    background:

        radial-gradient(
            circle at 8% 5%,
            rgba(49, 116, 255, .14),
            transparent 30%
        ),

        radial-gradient(
            circle at 93% 92%,
            rgba(115, 69, 255, .13),
            transparent 32%
        ),

        linear-gradient(
            145deg,
            #050b14 0%,
            #07101c 55%,
            #050a13 100%
        );

}


.background-grid {

    position:
        absolute;

    inset:
        0;

    opacity:
        .42;

    background-image:

        linear-gradient(
            rgba(255,255,255,.024) 1px,
            transparent 1px
        ),

        linear-gradient(
            90deg,
            rgba(255,255,255,.024) 1px,
            transparent 1px
        );

    background-size:
        58px 58px;

    mask-image:
        linear-gradient(
            to bottom,
            black 0%,
            rgba(0,0,0,.6) 45%,
            transparent 100%
        );

}


.glow {

    position:
        absolute;

    border-radius:
        50%;

    pointer-events:
        none;

    filter:
        blur(110px);

    opacity:
        .30;

}


.glow-blue {

    width:
        440px;

    height:
        440px;

    top:
        -220px;

    left:
        -170px;

    background:
        #246bff;

}


.glow-purple {

    width:
        480px;

    height:
        480px;

    right:
        -230px;

    bottom:
        -240px;

    background:
        #713bff;

}


/* =========================================================
   04. MAIN AUTH PAGE
========================================================= */

.auth-page {

    position:
        relative;

    z-index:
        1;

    width:
        100%;

    min-height:
        100vh;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    padding:
        38px 28px;

}


/* =========================================================
   05. MAIN CONTAINER
========================================================= */

.auth-container {

    width:
        min(1180px, 100%);

    display:
        grid;

    grid-template-columns:
        minmax(0, 1fr)
        455px;

    align-items:
        center;

    gap:
        clamp(55px, 7vw, 105px);

}


/* =========================================================
   06. BRAND
========================================================= */

.brand {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        12px;

    color:
        var(--white);

    transition:
        opacity .2s ease;

}


.brand:hover {

    opacity:
        .9;

}


.brand-logo {

    width:
        49px;

    height:
        49px;

    display:
        grid;

    place-items:
        center;

    flex:
        0 0 49px;

    border-radius:
        15px;

    background:
        linear-gradient(
            135deg,
            var(--blue),
            var(--purple)
        );

    color:
        #fff;

    font-size:
        21px;

    font-weight:
        900;

    box-shadow:
        0 15px 40px
        rgba(57,126,255,.22);

}


.brand-name {

    display:
        flex;

    flex-direction:
        column;

    color:
        #f5f8ff;

    font-size:
        17px;

    font-weight:
        850;

    letter-spacing:
        -.3px;

    line-height:
        1;

}


.brand-name small {

    margin-top:
        5px;

    color:
        #7288a2;

    font-size:
        8px;

    font-weight:
        800;

    letter-spacing:
        1.7px;

}


/* =========================================================
   07. BRAND CONTENT
========================================================= */

.brand-content {

    margin-top:
        70px;

}


.section-label {

    color:
        #7894b7;

    font-size:
        9px;

    font-weight:
        850;

    letter-spacing:
        2.6px;

    line-height:
        1.2;

    text-transform:
        uppercase;

}


.brand-content h1 {

    max-width:
        650px;

    margin:
        16px 0 0;

    color:
        #f4f7ff;

    font-size:
        clamp(42px, 5vw, 66px);

    font-weight:
        850;

    line-height:
        1.025;

    letter-spacing:
        -3.2px;

}


.brand-content h1 span {

    display:
        block;

    margin-top:
        2px;

    color:
        transparent;

    background:
        linear-gradient(
            90deg,
            #6fa5ff 0%,
            #9b78ff 100%
        );

    -webkit-background-clip:
        text;

    background-clip:
        text;

}


.brand-content > p {

    max-width:
        580px;

    margin:
        25px 0 0;

    color:
        var(--text-soft);

    font-size:
        14px;

    line-height:
        1.8;

}


/* =========================================================
   08. FEATURE LIST
========================================================= */

.feature-list {

    max-width:
        700px;

    display:
        grid;

    grid-template-columns:
        repeat(3, 1fr);

    gap:
        11px;

    margin-top:
        32px;

}


.feature-item {

    min-width:
        0;

    display:
        flex;

    align-items:
        flex-start;

    gap:
        10px;

    padding:
        13px;

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

    border-radius:
        14px;

    background:
        rgba(255,255,255,.023);

    transition:
        transform .25s var(--ease),
        border-color .25s var(--ease),
        background .25s var(--ease);

}


.feature-item:hover {

    transform:
        translateY(-3px);

    border-color:
        rgba(114,165,255,.18);

    background:
        rgba(255,255,255,.042);

}


.feature-icon {

    width:
        34px;

    height:
        34px;

    flex:
        0 0 34px;

    display:
        grid;

    place-items:
        center;

    border-radius:
        10px;

    color:
        #78a7ff;

    background:
        rgba(57,126,255,.10);

}


.feature-icon svg {

    width:
        17px;

    height:
        17px;

    fill:
        none;

    stroke:
        currentColor;

    stroke-width:
        1.7;

    stroke-linecap:
        round;

    stroke-linejoin:
        round;

}


.feature-item strong {

    display:
        block;

    margin-top:
        1px;

    color:
        #dce7f5;

    font-size:
        10px;

    font-weight:
        800;

    line-height:
        1.3;

}


.feature-item span {

    display:
        block;

    margin-top:
        4px;

    color:
        #607691;

    font-size:
        8.5px;

    line-height:
        1.4;

}


.brand-footer {

    display:
        flex;

    align-items:
        center;

    gap:
        8px;

    margin-top:
        40px;

    color:
        #526982;

    font-size:
        8.5px;

    font-weight:
        600;

}


.brand-footer-dot {

    color:
        var(--green);

    font-size:
        8px;

    text-shadow:
        0 0 10px
        rgba(69,217,154,.8);

}


/* =========================================================
   09. LOGIN SECTION
========================================================= */

.login-section {

    width:
        100%;

    min-width:
        0;

}


/* =========================================================
   10. LOGIN CARD
========================================================= */

.login-card {

    position:
        relative;

    width:
        100%;

    padding:
        31px;

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

    border-radius:
        var(--radius-xl);

    background:
        linear-gradient(
            145deg,
            rgba(14,28,47,.97),
            rgba(7,16,28,.98)
        );

    box-shadow:
        0 30px 90px
        rgba(0,0,0,.48),

        inset 0 1px 0
        rgba(255,255,255,.025);

    backdrop-filter:
        blur(24px);

    -webkit-backdrop-filter:
        blur(24px);

    animation:
        card-enter .55s var(--ease-out);

}


@keyframes card-enter {

    from {

        opacity:
            0;

        transform:
            translateY(18px)
            scale(.985);

    }

    to {

        opacity:
            1;

        transform:
            translateY(0)
            scale(1);

    }

}


/* =========================================================
   11. LOGIN HEADER
========================================================= */

.login-header {

    width:
        100%;

    display:
        flex;

    align-items:
        flex-start;

    justify-content:
        space-between;

    gap:
        15px;

    margin-bottom:
        21px;

}


.login-header h2 {

    margin:
        7px 0 0;

    color:
        #f5f8ff;

    font-size:
        30px;

    font-weight:
        800;

    line-height:
        1.1;

    letter-spacing:
        -1.2px;

}


.login-header p {

    margin:
        7px 0 0;

    color:
        #6f86a2;

    font-size:
        11px;

    line-height:
        1.5;

}


.card-logo {

    width:
        44px;

    height:
        44px;

    flex:
        0 0 44px;

    display:
        grid;

    place-items:
        center;

    border-radius:
        13px;

    background:
        linear-gradient(
            135deg,
            var(--blue),
            var(--purple)
        );

    color:
        white;

    font-size:
        17px;

    font-weight:
        900;

    box-shadow:
        0 12px 30px
        rgba(59,106,255,.22);

}


/* =========================================================
   12. AUTH TABS
========================================================= */

.auth-tabs {

    position:
        relative;

    width:
        100%;

    display:
        grid;

    grid-template-columns:
        1fr 1fr;

    gap:
        4px;

    padding:
        4px;

    margin-bottom:
        22px;

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

    border-radius:
        12px;

    background:
        rgba(255,255,255,.025);

}


.auth-tab {

    position:
        relative;

    min-width:
        0;

    min-height:
        38px;

    padding:
        0 8px;

    border-radius:
        9px;

    background:
        transparent;

    color:
        #637994;

    cursor:
        pointer;

    font-size:
        10px;

    font-weight:
        800;

    white-space:
        nowrap;

    transition:
        color .25s var(--ease),
        background .25s var(--ease),
        box-shadow .25s var(--ease);

}


.auth-tab:hover {

    color:
        #a9bdd7;

}


.auth-tab.active {

    color:
        #f5f8ff;

    background:
        linear-gradient(
            135deg,
            rgba(57,126,255,.20),
            rgba(116,76,255,.20)
        );

    box-shadow:
        inset 0 0 0 1px
        rgba(115,168,255,.09);

}


/* =========================================================
   13. FORMS STAGE
========================================================= */

/*
 * IMPORTANT
 *
 * The stage does NOT dynamically increase the page height.
 * This prevents the Signup form from pushing the complete
 * website downward.
 */

.forms-stage {

    position:
        relative;

    width:
        100%;

    min-width:
        0;

    /*
     * Keep the authentication area controlled.
     */
    max-height:
        455px;

    overflow-x:
        hidden;

    overflow-y:
        auto;

    scrollbar-width:
        thin;

    scrollbar-color:
        rgba(114,165,255,.20)
        transparent;

}


/* Chrome / Edge / Safari */

.forms-stage::-webkit-scrollbar {

    width:
        4px;

}


.forms-stage::-webkit-scrollbar-track {

    background:
        transparent;

}


.forms-stage::-webkit-scrollbar-thumb {

    border-radius:
        10px;

    background:
        rgba(114,165,255,.20);

}


.forms-stage::-webkit-scrollbar-thumb:hover {

    background:
        rgba(114,165,255,.35);

}


/* =========================================================
   14. AUTH PANELS
========================================================= */

.auth-panel {

    width:
        100%;

    display:
        none;

    min-width:
        0;

    opacity:
        0;

    pointer-events:
        none;

    transform:
        translateX(28px)
        scale(.99);

}


.auth-panel.active {

    display:
        block;

    opacity:
        1;

    pointer-events:
        auto;

    transform:
        translateX(0)
        scale(1);

    animation:
        auth-enter-right
        .38s
        var(--ease-out)
        both;

}


.auth-panel.from-left.active {

    animation:
        auth-enter-left
        .38s
        var(--ease-out)
        both;

}


@keyframes auth-enter-right {

    from {

        opacity:
            0;

        transform:
            translateX(28px)
            scale(.99);

    }

    to {

        opacity:
            1;

        transform:
            translateX(0)
            scale(1);

    }

}


@keyframes auth-enter-left {

    from {

        opacity:
            0;

        transform:
            translateX(-28px)
            scale(.99);

    }

    to {

        opacity:
            1;

        transform:
            translateX(0)
            scale(1);

    }

}


/* =========================================================
   15. FORM
========================================================= */

.auth-form {

    width:
        100%;

    display:
        grid;

    gap:
        15px;

}


.form-group {

    width:
        100%;

    min-width:
        0;

    display:
        grid;

    gap:
        7px;

}


.form-group > label {

    color:
        #b5c6da;

    font-size:
        10px;

    font-weight:
        750;

    line-height:
        1.3;

}


/* =========================================================
   16. INPUT WRAPPER
========================================================= */

.input-wrapper {

    position:
        relative;

    width:
        100%;

}


.input-wrapper input {

    width:
        100%;

    height:
        50px;

    min-width:
        0;

    display:
        block;

    padding:
        0 65px 0 43px;

    border:
        1px solid
        rgba(255,255,255,.075);

    border-radius:
        var(--radius-md);

    outline:
        none;

    background:
        var(--input);

    color:
        #f4f7ff;

    font-size:
        12px;

    font-weight:
        500;

    line-height:
        50px;

    transition:
        border-color .25s var(--ease),
        background .25s var(--ease),
        box-shadow .25s var(--ease);

}


.input-wrapper input::placeholder {

    color:
        #506680;

    opacity:
        1;

}


.input-wrapper input:hover {

    border-color:
        rgba(255,255,255,.12);

}


.input-wrapper input:focus {

    border-color:
        rgba(70,137,255,.72);

    background:
        rgba(4,12,22,.94);

    box-shadow:
        0 0 0 3px
        rgba(57,126,255,.09);

}


.input-wrapper.is-focused
.input-icon {

    color:
        var(--blue-light);

}


/* =========================================================
   17. INPUT ICON
========================================================= */

.input-icon {

    position:
        absolute;

    z-index:
        2;

    left:
        14px;

    top:
        50%;

    width:
        16px;

    height:
        16px;

    display:
        block;

    color:
        #607994;

    transform:
        translateY(-50%);

    pointer-events:
        none;

    transition:
        color .25s var(--ease);

}


.input-icon svg {

    width:
        100%;

    height:
        100%;

    fill:
        none;

    stroke:
        currentColor;

    stroke-width:
        1.7;

    stroke-linecap:
        round;

    stroke-linejoin:
        round;

}


/* =========================================================
   18. PASSWORD BUTTON
========================================================= */

.password-toggle {

    position:
        absolute;

    z-index:
        3;

    top:
        50%;

    right:
        7px;

    min-width:
        40px;

    height:
        34px;

    display:
        grid;

    place-items:
        center;

    padding:
        0 5px;

    border-radius:
        8px;

    background:
        transparent;

    color:
        #617a96;

    cursor:
        pointer;

    transform:
        translateY(-50%);

    font-size:
        8px;

    font-weight:
        850;

    letter-spacing:
        .3px;

    transition:
        color .2s ease,
        background .2s ease;

}


.password-toggle:hover {

    color:
        #83adff;

    background:
        rgba(255,255,255,.045);

}


/* =========================================================
   19. LOGIN OPTIONS
========================================================= */

.login-options {

    width:
        100%;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        12px;

    margin-top:
        -1px;

}


.remember {

    position:
        relative;

    min-width:
        0;

    display:
        inline-flex;

    align-items:
        center;

    gap:
        7px;

    color:
        #7187a1;

    font-size:
        10px;

    cursor:
        pointer;

    user-select:
        none;

}


.remember input,
.terms-check input {

    position:
        absolute;

    width:
        1px;

    height:
        1px;

    opacity:
        0;

    pointer-events:
        none;

}


.custom-check {

    position:
        relative;

    width:
        16px;

    height:
        16px;

    flex:
        0 0 16px;

    display:
        block;

    border:
        1px solid
        rgba(255,255,255,.14);

    border-radius:
        5px;

    background:
        rgba(255,255,255,.025);

    transition:
        background .2s var(--ease),
        border-color .2s var(--ease),
        box-shadow .2s var(--ease);

}


.remember input:checked
+ .custom-check,
.terms-check input:checked
+ .custom-check {

    border-color:
        transparent;

    background:
        linear-gradient(
            135deg,
            var(--blue),
            var(--purple)
        );

    box-shadow:
        0 5px 14px
        rgba(57,126,255,.22);

}


.remember input:checked
+ .custom-check::after,
.terms-check input:checked
+ .custom-check::after {

    content:
        "✓";

    position:
        absolute;

    inset:
        0;

    display:
        grid;

    place-items:
        center;

    color:
        white;

    font-size:
        9px;

    font-weight:
        900;

}


.forgot-link {

    flex:
        0 0 auto;

    color:
        #75a4f6;

    font-size:
        10px;

    font-weight:
        700;

    transition:
        color .2s ease;

}


.forgot-link:hover {

    color:
        #a4c4ff;

    text-decoration:
        underline;

}


/* =========================================================
   20. MAIN BUTTON
========================================================= */

.login-button {

    width:
        100%;

    min-height:
        51px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        9px;

    margin-top:
        2px;

    border-radius:
        13px;

    background:
        linear-gradient(
            135deg,
            #397fff 0%,
            #704cff 100%
        );

    color:
        #fff;

    cursor:
        pointer;

    font-size:
        12px;

    font-weight:
        800;

    box-shadow:
        0 13px 30px
        rgba(59,103,255,.20);

    transition:
        transform .22s var(--ease),
        box-shadow .22s var(--ease),
        opacity .22s var(--ease);

}


.login-button:hover {

    transform:
        translateY(-2px);

    box-shadow:
        0 18px 38px
        rgba(59,103,255,.29);

}


.login-button:active {

    transform:
        translateY(0);

}


.login-button:disabled {

    opacity:
        .60;

    cursor:
        not-allowed;

    transform:
        none;

    box-shadow:
        none;

}


.login-button span:last-child {

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

}


.login-button svg {

    width:
        16px;

    height:
        16px;

    fill:
        none;

    stroke:
        currentColor;

    stroke-width:
        1.8;

    stroke-linecap:
        round;

    stroke-linejoin:
        round;

    transition:
        transform .22s var(--ease);

}


.login-button:hover svg {

    transform:
        translateX(3px);

}


/* =========================================================
   21. AUTH SWITCH
========================================================= */

.auth-switch {

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    flex-wrap:
        wrap;

    gap:
        5px;

    margin-top:
        18px;

    color:
        #566d87;

    font-size:
        9.5px;

    line-height:
        1.5;

}


.switch-link {

    padding:
        0;

    background:
        transparent;

    color:
        #78a7ff;

    cursor:
        pointer;

    font-size:
        9.5px;

    font-weight:
        800;

    transition:
        color .2s ease,
        transform .2s ease;

}


.switch-link:hover {

    color:
        #aac7ff;

    text-decoration:
        underline;

    transform:
        translateY(-1px);

}


/* =========================================================
   22. PASSWORD STRENGTH
========================================================= */

.password-strength {

    width:
        100%;

    display:
        flex;

    align-items:
        center;

    gap:
        8px;

    margin-top:
        -1px;

}


.strength-bars {

    flex:
        1;

    min-width:
        0;

    display:
        flex;

    gap:
        3px;

}


.strength-bars span {

    height:
        3px;

    flex:
        1;

    border-radius:
        10px;

    background:
        rgba(255,255,255,.08);

    transition:
        background .25s var(--ease);

}


.password-strength small {

    width:
        92px;

    flex:
        0 0 92px;

    color:
        #526983;

    font-size:
        7.5px;

    text-align:
        right;

}


/* Weak */

.password-strength[data-strength="1"]
.strength-bars span:nth-child(1) {

    background:
        var(--red);

}


/* Fair */

.password-strength[data-strength="2"]
.strength-bars span:nth-child(-n+2) {

    background:
        var(--yellow);

}


/* Good */

.password-strength[data-strength="3"]
.strength-bars span:nth-child(-n+3) {

    background:
        #63adff;

}


/* Strong */

.password-strength[data-strength="4"]
.strength-bars span {

    background:
        var(--green);

}


/* =========================================================
   23. PASSWORD MATCH MESSAGE
========================================================= */

.field-message {

    display:
        block;

    min-height:
        11px;

    color:
        #526983;

    font-size:
        8px;

    line-height:
        1.4;

}


.field-message.success {

    color:
        var(--green);

}


.field-message.error {

    color:
        var(--red);

}


/* =========================================================
   24. TERMS
========================================================= */

.terms-check {

    position:
        relative;

    display:
        flex;

    align-items:
        flex-start;

    gap:
        8px;

    color:
        #667d98;

    font-size:
        9px;

    line-height:
        1.55;

    cursor:
        pointer;

    user-select:
        none;

}


.terms-check a {

    color:
        #75a4f6;

    text-decoration:
        none;

}


.terms-check a:hover {

    color:
        #a6c5ff;

    text-decoration:
        underline;

}


/* =========================================================
   25. SECURITY
========================================================= */

.security-status {

    width:
        100%;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        7px;

    margin-top:
        18px;

    color:
        #536a83;

    font-size:
        8.5px;

}


.status-dot {

    width:
        6px;

    height:
        6px;

    flex:
        0 0 6px;

    border-radius:
        50%;

    background:
        var(--green);

    box-shadow:
        0 0 10px
        rgba(69,217,154,.65);

}


/* =========================================================
   26. TABLET
========================================================= */

@media (max-width: 1050px) {

    .auth-container {

        grid-template-columns:
            minmax(0, 1fr)
            430px;

        gap:
            45px;

    }


    .brand-content h1 {

        font-size:
            49px;

        letter-spacing:
            -2.5px;

    }

}


/* =========================================================
   27. TABLET / SMALL LAPTOP
========================================================= */

@media (max-width: 900px) {

    .auth-page {

        padding:
            30px 20px;

    }


    .auth-container {

        grid-template-columns:
            1fr 420px;

        gap:
            35px;

    }


    .brand-content {

        margin-top:
            50px;

    }


    .brand-content h1 {

        font-size:
            43px;

        letter-spacing:
            -2.1px;

    }


    .feature-list {

        grid-template-columns:
            1fr;

        max-width:
            330px;

    }


    .brand-footer {

        margin-top:
            27px;

    }

}


/* =========================================================
   28. MOBILE / TABLET
========================================================= */

@media (max-width: 820px) {

    body {

        overflow-x:
            hidden;

    }


    .auth-page {

        min-height:
            100svh;

        padding:
            25px 16px 30px;

        align-items:
            flex-start;

        overflow-x:
            hidden;

    }


    .auth-container {

        width:
            min(500px, 100%);

        grid-template-columns:
            1fr;

        gap:
            25px;

        margin:
            auto;

    }


    .brand-section {

        text-align:
            center;

    }


    .brand {

        justify-content:
            center;

    }


    .brand-content {

        margin-top:
            25px;

    }


    .brand-content h1 {

        max-width:
            550px;

        margin-left:
            auto;

        margin-right:
            auto;

        font-size:
            38px;

        letter-spacing:
            -1.8px;

    }


    .brand-content > p {

        max-width:
            500px;

        margin-left:
            auto;

        margin-right:
            auto;

    }


    .feature-list {

        display:
            flex;

        max-width:
            100%;

        justify-content:
            center;

        flex-wrap:
            wrap;

    }


    .feature-item {

        flex:
            1 1 145px;

        text-align:
            left;

    }


    .brand-footer {

        justify-content:
            center;

    }


    .login-section {

        width:
            100%;

    }


    .login-card {

        width:
            100%;

    }


    /*
     * Mobile forms should be allowed to grow naturally.
     * This prevents the card from cutting Signup content.
     */

    .forms-stage {

        max-height:
            none;

        overflow:
            visible;

    }

}


/* =========================================================
   29. MOBILE
========================================================= */

@media (max-width: 600px) {

    .auth-page {

        padding:
            18px 13px 25px;

    }


    .auth-container {

        gap:
            20px;

    }


    .brand-logo {

        width:
            44px;

        height:
            44px;

        flex-basis:
            44px;

        border-radius:
            13px;

        font-size:
            19px;

    }


    .brand-name {

        font-size:
            15px;

    }


    .brand-name small {

        font-size:
            7px;

        letter-spacing:
            1.4px;

    }


    .brand-content {

        margin-top:
            22px;

    }


    .brand-content h1 {

        font-size:
            32px;

        letter-spacing:
            -1.4px;

    }


    .brand-content > p {

        font-size:
            12px;

        line-height:
            1.65;

    }


    .feature-list {

        margin-top:
            22px;

    }


    .feature-item {

        padding:
            11px;

    }


    .feature-icon {

        width:
            31px;

        height:
            31px;

        flex-basis:
            31px;

    }


    .login-card {

        padding:
            24px 19px;

        border-radius:
            22px;

    }


    .login-header {

        margin-bottom:
            18px;

    }


    .login-header h2 {

        font-size:
            27px;

    }


    .login-header p {

        font-size:
            10px;

    }


    .card-logo {

        width:
            40px;

        height:
            40px;

        flex-basis:
            40px;

        border-radius:
            12px;

    }


    .auth-tabs {

        margin-bottom:
            20px;

    }


    .auth-form {

        gap:
            14px;

    }


    .input-wrapper input {

        height:
            49px;

        line-height:
            49px;

        font-size:
            11.5px;

    }


    .login-button {

        min-height:
            50px;

    }


    .security-status {

        margin-top:
            17px;

    }

}


/* =========================================================
   30. SMALL MOBILE
========================================================= */

@media (max-width: 420px) {

    .auth-page {

        padding:
            12px 10px 20px;

    }


    .brand-content h1 {

        font-size:
            29px;

        letter-spacing:
            -1.1px;

    }


    .brand-content > p {

        display:
            none;

    }


    .feature-list {

        display:
            none;

    }


    .brand-footer {

        display:
            none;

    }


    .login-card {

        padding:
            21px 16px;

        border-radius:
            20px;

    }


    .login-header h2 {

        font-size:
            25px;

    }


    .login-header p {

        max-width:
            230px;

    }


    .auth-tab {

        font-size:
            9px;

    }


    .form-group > label {

        font-size:
            9px;

    }


    .login-options {

        align-items:
            flex-start;

    }


    .remember,
    .forgot-link {

        font-size:
            9px;

    }


    .password-strength small {

        width:
            82px;

        flex-basis:
            82px;

        font-size:
            7px;

    }

}


/* =========================================================
   31. VERY SMALL MOBILE
========================================================= */

@media (max-width: 360px) {

    .auth-page {

        padding:
            8px;

    }


    .auth-container {

        gap:
            15px;

    }


    .brand-content {

        margin-top:
            17px;

    }


    .brand-content h1 {

        font-size:
            26px;

    }


    .login-card {

        padding:
            19px 13px;

        border-radius:
            18px;

    }


    .login-header h2 {

        font-size:
            23px;

    }


    .card-logo {

        width:
            37px;

        height:
            37px;

        flex-basis:
            37px;

    }


    .auth-tabs {

        padding:
            3px;

    }


    .auth-tab {

        min-height:
            36px;

        font-size:
            8.5px;

    }


    .input-wrapper input {

        padding-left:
            40px;

        padding-right:
            60px;

    }


    .login-options {

        flex-direction:
            column;

        align-items:
            flex-start;

        gap:
            9px;

    }


    .forgot-link {

        margin-left:
            23px;

    }


    .terms-check {

        font-size:
            8px;

    }

}


/* =========================================================
   32. LANDSCAPE MOBILE
========================================================= */

@media
    (max-width: 820px)
    and (orientation: landscape) {

    .auth-page {

        align-items:
            flex-start;

        padding:
            15px;

    }


    .auth-container {

        grid-template-columns:
            1fr 1fr;

        max-width:
            900px;

        align-items:
            start;

    }


    .brand-content {

        margin-top:
            25px;

    }


    .brand-content h1 {

        font-size:
            29px;

    }


    .feature-list,
    .brand-footer {

        display:
            none;

    }


    .login-card {

        max-height:
            calc(100svh - 30px);

        overflow:
            hidden;

    }


    .forms-stage {

        max-height:
            calc(100svh - 210px);

        overflow-y:
            auto;

    }

}


/* =========================================================
   33. DESKTOP LARGE SCREEN
========================================================= */

@media (min-width: 1400px) {

    .auth-container {

        width:
            min(1240px, 100%);

    }


    .brand-content h1 {

        font-size:
            69px;

    }


    .login-card {

        padding:
            34px;

    }

}


/* =========================================================
   34. REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

    html {

        scroll-behavior:
            auto;

    }


    *,
    *::before,
    *::after {

        animation-duration:
            .01ms !important;

        animation-iteration-count:
            1 !important;

        transition-duration:
            .01ms !important;

    }

}