/* =========================================================
   TICKY TICKY LOGIN
   MODERN SPLIT SCREEN
   ========================================================= */


/* =========================================================
   PAGE
   ========================================================= */

.login-page {

    min-height: 100vh;

    width: 100%;

    display: flex;

    align-items: stretch;

    justify-content: center;

    background:
        linear-gradient(
            135deg,
            #eef4ef 0%,
            #f8faf8 45%,
            #e8f1ea 100%
        );

    padding: 24px;

}


/* =========================================================
   MAIN SHELL
   ========================================================= */

.login-shell {

    width: min(
        1400px,
        100%
    );

    min-height: calc(
        100vh - 48px
    );

    display: grid;

    grid-template-columns:
        minmax(420px, 0.9fr)
        minmax(560px, 1.1fr);

    overflow: hidden;

    background:
        #ffffff;

    border:
        1px solid
        #d7e1d7;

    border-radius:
        28px;

    box-shadow:
        0 30px 80px
        rgba(
            15,
            61,
            46,
            0.14
        );

}


/* =========================================================
   LEFT LOGIN SIDE
   ========================================================= */

.login-side {

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    background:
        #ffffff;

    padding:
        64px 72px;

}


.login-content {

    width:
        100%;

    max-width:
        470px;

}


/* =========================================================
   BRAND
   ========================================================= */

.login-brand {

    display:
        flex;

    align-items:
        center;

    gap:
        14px;

    margin-bottom:
        64px;

}


.login-brand .logo-icon {

    width:
        48px;

    height:
        48px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        14px;

    background:
        linear-gradient(
            135deg,
            #dfe9df,
            #cfe0d2
        );

    color:
        #0f3d2e;

    font-size:
        16px;

    font-weight:
        800;

}


.login-brand h1 {

    margin:
        0;

    color:
        #0f3d2e;

    font-size:
        19px;

    font-weight:
        800;

}


.login-brand span {

    display:
        block;

    margin-top:
        2px;

    color:
        #6b7f70;

    font-size:
        11px;

    font-weight:
        500;

}


/* =========================================================
   INTRO
   ========================================================= */

.login-intro {

    margin-bottom:
        36px;

}


.eyebrow {

    display:
        inline-flex;

    align-items:
        center;

    margin-bottom:
        14px;

    color:
        #2e7d32;

    font-size:
        11px;

    font-weight:
        800;

    letter-spacing:
        0.14em;

}


.login-intro h2 {

    margin:
        0 0 12px;

    color:
        #0f3d2e;

    font-size:
        clamp(
            36px,
            4vw,
            52px
        );

    line-height:
        1.04;

    font-weight:
        800;

    letter-spacing:
        -0.04em;

}


.login-intro p {

    max-width:
        430px;

    margin:
        0;

    color:
        #637466;

    font-size:
        15px;

    line-height:
        1.7;

}


/* =========================================================
   FORM
   ========================================================= */

.login-form {

    width:
        100%;

}


.login-form .form-group {

    margin-bottom:
        22px;

}


.form-label {

    display:
        block;

    margin-bottom:
        9px;

    color:
        #26392d;

    font-size:
        13px;

    font-weight:
        700;

}


/* =========================================================
   INPUTS
   ========================================================= */

.login-form input {

    width:
        100%;

    height:
        54px;

    padding:
        0 16px;

    border:
        1px solid
        #d7e1d7;

    border-radius:
        12px;

    background:
        #fbfdfb;

    color:
        #1f2937;

    font-size:
        14px;

    outline:
        none;

    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease,
        background-color 0.2s ease;

}


.login-form input::placeholder {

    color:
        #9aaa9e;

}


.login-form input:hover {

    border-color:
        #b9cdbd;

}


.login-form input:focus {

    background:
        #ffffff;

    border-color:
        #2e7d32;

    box-shadow:
        0 0 0 4px
        rgba(
            46,
            125,
            50,
            0.10
        );

}


/* =========================================================
   PASSWORD
   ========================================================= */

.password-input-wrapper {

    position:
        relative;

}


.password-input-wrapper input {

    padding-right:
        54px;

}


.password-toggle {

    position:
        absolute;

    right:
        8px;

    top:
        50%;

    transform:
        translateY(-50%);

    width:
        38px;

    height:
        38px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border:
        none;

    border-radius:
        9px;

    background:
        transparent;

    color:
        #6b7f70;

    cursor:
        pointer;

    transition:
        background-color 0.2s ease,
        color 0.2s ease;

}


.password-toggle:hover {

    background:
        #eef4ef;

    color:
        #1b5e20;

}


.password-eye {

    font-size:
        13px;

}


/* =========================================================
   MESSAGE
   ========================================================= */

.login-message {

    min-height:
        22px;

    margin-bottom:
        10px;

    font-size:
        13px;

    line-height:
        1.5;

}


/* =========================================================
   LOGIN BUTTON
   ========================================================= */

.login-button {

    width:
        100%;

    height:
        56px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        12px;

    margin-top:
        4px;

    border:
        none;

    border-radius:
        12px;

    background:
        linear-gradient(
            90deg,
            #0f3d2e,
            #1b5e20,
            #2e7d32
        );

    color:
        #ffffff;

    font-size:
        14px;

    font-weight:
        800;

    cursor:
        pointer;

    box-shadow:
        0 10px 24px
        rgba(
            27,
            94,
            32,
            0.22
        );

    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease,
        filter 0.2s ease;

}


.login-button:hover {

    transform:
        translateY(-2px);

    box-shadow:
        0 14px 28px
        rgba(
            27,
            94,
            32,
            0.28
        );

    filter:
        brightness(1.04);

}


.login-button:active {

    transform:
        translateY(0);

}


.login-button:disabled {

    opacity:
        0.65;

    cursor:
        not-allowed;

    transform:
        none;

}


.login-arrow {

    font-size:
        17px;

    transition:
        transform 0.2s ease;

}


.login-button:hover .login-arrow {

    transform:
        translateX(4px);

}


/* =========================================================
   FOOTER
   ========================================================= */

.login-footer {

    margin-top:
        26px;

    text-align:
        center;

}


.login-footer span {

    color:
        #829188;

    font-size:
        11px;

}


/* =========================================================
   RIGHT VISUAL SIDE
   ========================================================= */

.login-visual {

    position:
        relative;

    overflow:
        hidden;

    min-height:
        100%;

    padding:
        42px 48px;

    display:
        flex;

    flex-direction:
        column;

    justify-content:
        space-between;

    background:
        linear-gradient(
            140deg,
            #08271b 0%,
            #0f3d2e 38%,
            #1b5e20 72%,
            #2e7d32 100%
        );

    color:
        #ffffff;

}


/* =========================================================
   DECORATIVE GLOW
   ========================================================= */

.visual-glow {

    position:
        absolute;

    border-radius:
        50%;

    pointer-events:
        none;

    filter:
        blur(4px);

}


.visual-glow-one {

    width:
        420px;

    height:
        420px;

    right:
        -120px;

    top:
        -80px;

    background:
        rgba(
            134,
            239,
            172,
            0.12
        );

}


.visual-glow-two {

    width:
        360px;

    height:
        360px;

    left:
        -120px;

    bottom:
        -100px;

    background:
        rgba(
            223,
            233,
            223,
            0.08
        );

}


/* =========================================================
   BACKGROUND GRID
   ========================================================= */

.visual-grid {

    position:
        absolute;

    inset:
        0;

    opacity:
        0.16;

    background-image:
        linear-gradient(
            rgba(
                255,
                255,
                255,
                0.12
            ) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(
                255,
                255,
                255,
                0.12
            ) 1px,
            transparent 1px
        );

    background-size:
        46px 46px;

    mask-image:
        linear-gradient(
            to bottom,
            black,
            transparent 88%
        );

}


/* =========================================================
   VISUAL TOP
   ========================================================= */

.visual-top {

    position:
        relative;

    z-index:
        2;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

}


.visual-badge {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        8px;

    padding:
        8px 12px;

    border:
        1px solid
        rgba(
            255,
            255,
            255,
            0.15
        );

    border-radius:
        999px;

    background:
        rgba(
            255,
            255,
            255,
            0.08
        );

    backdrop-filter:
        blur(10px);

    font-size:
        10px;

    font-weight:
        800;

    letter-spacing:
        0.12em;

}


.badge-dot {

    width:
        7px;

    height:
        7px;

    border-radius:
        50%;

    background:
        #86efac;

    box-shadow:
        0 0 12px
        rgba(
            134,
            239,
            172,
            0.75
        );

}


.visual-version {

    color:
        rgba(
            255,
            255,
            255,
            0.58
        );

    font-size:
        11px;

}


/* =========================================================
   VISUAL MAIN
   ========================================================= */

.visual-main {

    position:
        relative;

    z-index:
        2;

    width:
        100%;

    max-width:
        680px;

    margin:
        0 auto;

}


.visual-eyebrow {

    display:
        block;

    margin-bottom:
        16px;

    color:
        #b7f7ca;

    font-size:
        11px;

    font-weight:
        800;

    letter-spacing:
        0.16em;

}


.visual-main h2 {

    margin:
        0;

    max-width:
        620px;

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

    line-height:
        0.98;

    font-weight:
        800;

    letter-spacing:
        -0.05em;

}


.visual-main h2 span {

    color:
        #9bf5b9;

}


.visual-main p {

    max-width:
        520px;

    margin:
        22px 0 0;

    color:
        rgba(
            255,
            255,
            255,
            0.72
        );

    font-size:
        15px;

    line-height:
        1.7;

}


/* =========================================================
   PRODUCTIVITY VISUAL
   ========================================================= */

.productivity-visual {

    position:
        relative;

    height:
        330px;

    margin-top:
        32px;

}


/* =========================================================
   ORBIT
   ========================================================= */

.visual-orbit {

    position:
        absolute;

    width:
        300px;

    height:
        300px;

    left:
        50%;

    top:
        50%;

    transform:
        translate(
            -50%,
            -50%
        );

    border:
        1px solid
        rgba(
            255,
            255,
            255,
            0.13
        );

    border-radius:
        50%;

    box-shadow:
        0 0 80px
        rgba(
            134,
            239,
            172,
            0.08
        );

}


/* =========================================================
   PRODUCTIVITY CARD
   ========================================================= */

.productivity-card {

    position:
        absolute;

    border:
        1px solid
        rgba(
            255,
            255,
            255,
            0.14
        );

    background:
        rgba(
            255,
            255,
            255,
            0.08
        );

    backdrop-filter:
        blur(20px);

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

    border-radius:
        18px;

    box-shadow:
        0 20px 60px
        rgba(
            0,
            0,
            0,
            0.20
        );

}


.main-productivity-card {

    left:
        50%;

    top:
        50%;

    transform:
        translate(
            -50%,
            -50%
        );

    width:
        min(
            390px,
            72%
        );

    padding:
        24px;

}


.productivity-card-header {

    display:
        flex;

    align-items:
        flex-start;

    justify-content:
        space-between;

}


.card-label {

    display:
        block;

    margin-bottom:
        8px;

    color:
        rgba(
            255,
            255,
            255,
            0.62
        );

    font-size:
        9px;

    font-weight:
        800;

    letter-spacing:
        0.12em;

}


.productivity-card-header strong {

    display:
        block;

    font-size:
        42px;

    line-height:
        1;

}


.card-icon {

    width:
        42px;

    height:
        42px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        12px;

    background:
        rgba(
            134,
            239,
            172,
            0.16
        );

    color:
        #b7f7ca;

    font-size:
        18px;

}


.productivity-bar {

    height:
        8px;

    margin-top:
        28px;

    border-radius:
        999px;

    overflow:
        hidden;

    background:
        rgba(
            255,
            255,
            255,
            0.10
        );

}


.productivity-bar span {

    display:
        block;

    height:
        100%;

    border-radius:
        inherit;

    background:
        linear-gradient(
            90deg,
            #86efac,
            #4ade80
        );

}


.productivity-card-footer {

    display:
        flex;

    justify-content:
        space-between;

    margin-top:
        14px;

    color:
        rgba(
            255,
            255,
            255,
            0.56
        );

    font-size:
        10px;

}


.productivity-card-footer span:last-child {

    color:
        #9bf5b9;

    font-weight:
        800;

}


/* =========================================================
   MINI CARD
   ========================================================= */

.mini-card {

    left:
        4%;

    bottom:
        24px;

    display:
        flex;

    align-items:
        center;

    gap:
        12px;

    padding:
        14px 16px;

}


.mini-icon {

    width:
        34px;

    height:
        34px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        10px;

    background:
        rgba(
            255,
            255,
            255,
            0.09
        );

    color:
        #b7f7ca;

}


.mini-card span,
.floating-card span {

    display:
        block;

    color:
        rgba(
            255,
            255,
            255,
            0.52
        );

    font-size:
        8px;

    font-weight:
        800;

    letter-spacing:
        0.10em;

}


.mini-card strong,
.floating-card strong {

    display:
        block;

    margin-top:
        2px;

    font-size:
        13px;

}


/* =========================================================
   FLOATING CARD
   ========================================================= */

.floating-card {

    right:
        4%;

    top:
        30px;

    display:
        flex;

    align-items:
        center;

    gap:
        12px;

    padding:
        14px 16px;

}


.floating-icon {

    width:
        34px;

    height:
        34px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        10px;

    background:
        rgba(
            134,
            239,
            172,
            0.14
        );

    color:
        #9bf5b9;

}


/* =========================================================
   VISUAL BOTTOM
   ========================================================= */

.visual-bottom {

    position:
        relative;

    z-index:
        2;

    display:
        flex;

    gap:
        44px;

    padding-top:
        24px;

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

}


.visual-stat strong {

    display:
        block;

    color:
        #ffffff;

    font-size:
        13px;

}


.visual-stat span {

    display:
        block;

    margin-top:
        4px;

    color:
        rgba(
            255,
            255,
            255,
            0.48
        );

    font-size:
        10px;

}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (
    max-width: 1050px
) {

    .login-shell {

        grid-template-columns:
            1fr;

    }


    .login-visual {

        min-height:
            600px;

    }


    .login-side {

        padding:
            56px 48px;

    }

}


@media (
    max-width: 650px
) {

    .login-page {

        padding:
            0;

    }


    .login-shell {

        min-height:
            100vh;

        border:
            none;

        border-radius:
            0;

        box-shadow:
            none;

    }


    .login-side {

        padding:
            42px 24px;

    }


    .login-brand {

        margin-bottom:
            46px;

    }


    .login-intro h2 {

        font-size:
            40px;

    }


    .login-visual {

        min-height:
            520px;

        padding:
            30px 24px;

    }


    .visual-main h2 {

        font-size:
            44px;

    }


    .productivity-visual {

        height:
            270px;

    }


    .main-productivity-card {

        width:
            82%;

    }


    .mini-card {

        left:
            0;

        bottom:
            8px;

    }


    .floating-card {

        right:
            0;

        top:
            12px;

    }


    .visual-bottom {

        gap:
            24px;

    }

}

/* =========================================================
   TICKY TICKY MASCOT
   ========================================================= */

.mascot-logo {
    width: 72px;
    height: 72px;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 0;

    background: transparent !important;

    border-radius: 18px;

    overflow: hidden;
}


.mascot-logo img {
    width: 100%;
    height: 100%;

    object-fit: contain;

    display: block;

    transition:
        transform 0.25s ease;
}


.mascot-logo:hover img {
    transform: scale(1.05) rotate(-2deg);
}