/* =========================================================
   Step 49
   Gateway / Login / My Reports
   ========================================================= */


/* =========================================================
   Entry Layout
   ========================================================= */

.entry-page {
    min-height: 100vh;

    padding:
        56px 24px
        90px;

    background:
        transparent;

    color:
        #ffffff;
}


.entry-page__container {
    width: 100%;

    max-width:
        1040px;

    margin:
        0 auto;
}


.entry-page__header {
    max-width:
        720px;

    margin:
        0 auto 42px;

    text-align:
        center;
}


.entry-page__eyebrow {
    display:
        inline-flex;

    margin:
        0 0 16px;

    padding:
        7px 13px;

    border:
        1px solid
        rgba(139, 173, 255, 0.34);

    border-radius:
        999px;

    background:
        rgba(8, 24, 61, 0.74);

    color:
        #bcd0ff;

    font-size:
        11px;

    font-weight:
        700;

    letter-spacing:
        0.17em;

    backdrop-filter:
        blur(10px);
}


.entry-page__title {
    margin:
        0;

    font-size:
        clamp(
            36px,
            5vw,
            54px
        );

    line-height:
        1.15;

    color:
        #ffffff;

    text-shadow:
        0 8px 30px
        rgba(0, 0, 0, 0.32);
}


.entry-page__description {
    max-width:
        620px;

    margin:
        18px auto 0;

    color:
        rgba(
            231,
            238,
            255,
            0.78
        );

    font-size:
        16px;

    line-height:
        1.8;
}


/* =========================================================
   Gateway
   ========================================================= */

.gateway-panel {
    display:
        grid;

    grid-template-columns:
        repeat(
            2,
            minmax(0, 1fr)
        );

    gap:
        22px;
}


.gateway-panel[hidden] {
    display:
        none;
}


.gateway-card {
    position:
        relative;

    overflow:
        hidden;

    display:
        flex;

    flex-direction:
        column;

    min-height:
        360px;

    padding:
        32px;

    border:
        1px solid
        rgba(
            127,
            160,
            245,
            0.26
        );

    border-radius:
        24px;

    background:
        linear-gradient(
            145deg,
            rgba(
                10,
                28,
                67,
                0.94
            ),
            rgba(
                5,
                17,
                44,
                0.91
            )
        );

    box-shadow:
        0 18px 48px
        rgba(
            0,
            0,
            0,
            0.27
        ),
        inset 0 1px 0
        rgba(
            255,
            255,
            255,
            0.05
        );

    backdrop-filter:
        blur(16px);
}


.gateway-card::before {
    content:
        "";

    position:
        absolute;

    width:
        230px;

    height:
        230px;

    top:
        -120px;

    right:
        -90px;

    border-radius:
        50%;

    background:
        radial-gradient(
            circle,
            rgba(
                86,
                128,
                255,
                0.20
            ),
            transparent 70%
        );

    pointer-events:
        none;
}


.gateway-card--primary {
    border-color:
        rgba(
            139,
            173,
            255,
            0.42
        );
}


.gateway-card__eyebrow {
    position:
        relative;

    z-index:
        1;

    margin:
        0 0 15px;

    color:
        #9db9ff;

    font-size:
        11px;

    font-weight:
        800;

    letter-spacing:
        0.15em;
}


.gateway-card__title {
    position:
        relative;

    z-index:
        1;

    margin:
        0;

    color:
        #ffffff;

    font-size:
        26px;

    line-height:
        1.35;
}


.gateway-card__description {
    position:
        relative;

    z-index:
        1;

    margin:
        18px 0 0;

    color:
        rgba(
            226,
            235,
            255,
            0.74
        );

    font-size:
        15px;

    line-height:
        1.8;
}


.gateway-card__meta {
    position:
        relative;

    z-index:
        1;

    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        8px;

    margin:
        22px 0 28px;
}


.gateway-card__meta span {
    padding:
        7px 10px;

    border:
        1px solid
        rgba(
            132,
            166,
            255,
            0.22
        );

    border-radius:
        999px;

    background:
        rgba(
            29,
            58,
            116,
            0.42
        );

    color:
        rgba(
            231,
            238,
            255,
            0.82
        );

    font-size:
        12px;
}


/* =========================================================
   Buttons
   ========================================================= */

.gateway-button {
    min-height:
        50px;

    padding:
        13px 20px;

    border-radius:
        13px;

    font-size:
        14px;

    font-weight:
        700;

    cursor:
        pointer;

    transition:
        transform 0.18s ease,
        border-color 0.18s ease,
        background 0.18s ease,
        box-shadow 0.18s ease;
}


.gateway-card
.gateway-button {
    width:
        100%;

    margin-top:
        auto;
}


.gateway-button--primary {
    border:
        1px solid
        rgba(
            151,
            182,
            255,
            0.52
        );

    background:
        linear-gradient(
            135deg,
            #3965ca,
            #244694
        );

    color:
        #ffffff;

    box-shadow:
        0 10px 24px
        rgba(
            0,
            0,
            0,
            0.20
        );
}


.gateway-button--primary:hover {
    transform:
        translateY(-2px);

    border-color:
        rgba(
            184,
            205,
            255,
            0.86
        );

    background:
        linear-gradient(
            135deg,
            #4776dc,
            #2c54aa
        );

    box-shadow:
        0 14px 30px
        rgba(
            0,
            0,
            0,
            0.26
        );
}


.gateway-button--secondary {
    border:
        1px solid
        rgba(
            139,
            173,
            255,
            0.32
        );

    background:
        rgba(
            17,
            40,
            88,
            0.70
        );

    color:
        #dce7ff;
}


.gateway-button--secondary:hover {
    transform:
        translateY(-2px);

    border-color:
        rgba(
            164,
            191,
            255,
            0.65
        );

    background:
        rgba(
            30,
            60,
            122,
            0.82
        );
}


.gateway-button:disabled {
    opacity:
        0.55;

    cursor:
        wait;

    transform:
        none;
}


/* =========================================================
   Account Panels
   ========================================================= */

.account-panel {
    width:
        100%;

    max-width:
        760px;

    margin:
        0 auto;
}


.account-panel[hidden] {
    display:
        none;
}


.account-back-button {
    margin:
        0 0 16px;

    padding:
        8px 0;

    border:
        0;

    background:
        transparent;

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

    font-size:
        14px;

    cursor:
        pointer;
}


.account-back-button:hover {
    color:
        #ffffff;
}


.account-card {
    padding:
        36px;

    border:
        1px solid
        rgba(
            127,
            160,
            245,
            0.28
        );

    border-radius:
        24px;

    background:
        linear-gradient(
            145deg,
            rgba(
                10,
                28,
                67,
                0.96
            ),
            rgba(
                5,
                17,
                44,
                0.94
            )
        );

    box-shadow:
        0 18px 48px
        rgba(
            0,
            0,
            0,
            0.28
        );

    backdrop-filter:
        blur(16px);
}


.account-card__eyebrow {
    margin:
        0 0 12px;

    color:
        #9db9ff;

    font-size:
        11px;

    font-weight:
        800;

    letter-spacing:
        0.16em;
}


.account-card__title {
    margin:
        0;

    color:
        #ffffff;

    font-size:
        28px;

    line-height:
        1.35;
}


.account-card__description {
    margin:
        14px 0 26px;

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

    font-size:
        14px;

    line-height:
        1.8;
}


/* =========================================================
   Login Form
   ========================================================= */

.account-form {
    display:
        flex;

    flex-direction:
        column;

    gap:
        12px;
}


.account-form[hidden] {
    display:
        none;
}


.account-form__label {
    color:
        rgba(
            239,
            244,
            255,
            0.90
        );

    font-size:
        13px;

    font-weight:
        700;
}


.account-form__input {
    width:
        100%;

    min-height:
        52px;

    padding:
        13px 15px;

    border:
        1px solid
        rgba(
            131,
            163,
            239,
            0.32
        );

    border-radius:
        13px;

    outline:
        none;

    background:
        rgba(
            4,
            15,
            39,
            0.80
        );

    color:
        #ffffff;

    font-size:
        16px;

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


.account-form__input::placeholder {
    color:
        rgba(
            218,
            227,
            247,
            0.36
        );
}


.account-form__input:focus {
    border-color:
        rgba(
            151,
            182,
            255,
            0.78
        );

    box-shadow:
        0 0 0 3px
        rgba(
            76,
            118,
            224,
            0.15
        );
}


.account-form__input--code {
    max-width:
        240px;

    font-size:
        22px;

    font-weight:
        700;

    letter-spacing:
        0.20em;

    text-align:
        center;
}


.account-form__hint {
    margin:
        0 0 8px;

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

    font-size:
        14px;

    line-height:
        1.7;
}


.account-form__hint strong {
    color:
        #ffffff;
}


.account-form__error {
    margin:
        0;

    color:
        #ffaaaa;

    font-size:
        13px;

    line-height:
        1.6;
}


.account-form__error[hidden] {
    display:
        none;
}


.account-text-button {
    align-self:
        flex-start;

    padding:
        5px 0;

    border:
        0;

    background:
        transparent;

    color:
        #a9c2ff;

    font-size:
        13px;

    cursor:
        pointer;
}


.account-text-button:hover {
    color:
        #ffffff;
}


/* =========================================================
   My Reports
   ========================================================= */

.reports-header {
    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        20px;

    margin-bottom:
        24px;
}


.reports-header__email {
    margin:
        8px 0 0;

    color:
        rgba(
            222,
            232,
            255,
            0.64
        );

    font-size:
        13px;
}


.reports-actions {
    display:
        flex;

    justify-content:
        flex-start;

    margin-bottom:
        20px;
}


.reports-message {
    padding:
        24px;

    border:
        1px solid
        rgba(
            127,
            160,
            245,
            0.24
        );

    border-radius:
        16px;

    background:
        rgba(
            8,
            25,
            60,
            0.76
        );

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

    text-align:
        center;
}


.reports-message[hidden] {
    display:
        none;
}


.reports-message--error {
    border-color:
        rgba(
            255,
            125,
            125,
            0.28
        );

    color:
        #ffb4b4;
}


.reports-list {
    display:
        flex;

    flex-direction:
        column;

    gap:
        14px;
}


.history-report-card {
    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        24px;

    padding:
        22px;

    border:
        1px solid
        rgba(
            127,
            160,
            245,
            0.25
        );

    border-radius:
        18px;

    background:
        linear-gradient(
            135deg,
            rgba(
                10,
                29,
                70,
                0.94
            ),
            rgba(
                6,
                19,
                49,
                0.92
            )
        );

    box-shadow:
        0 10px 28px
        rgba(
            0,
            0,
            0,
            0.20
        );
}


.history-report-card__main {
    min-width:
        0;

    flex:
        1;
}


.history-report-card__top {
    display:
        flex;

    align-items:
        center;

    gap:
        10px;

    margin-bottom:
        10px;
}


.history-report-card__date {
    color:
        rgba(
            221,
            231,
            255,
            0.60
        );

    font-size:
        12px;
}


.history-report-card__status {
    padding:
        5px 8px;

    border-radius:
        999px;

    font-size:
        10px;

    font-weight:
        800;
}


.history-report-card__status--free {
    background:
        rgba(
            111,
            139,
            200,
            0.18
        );

    color:
        #c6d6fa;
}


.history-report-card__status--paid {
    background:
        rgba(
            98,
            159,
            255,
            0.22
        );

    color:
        #bcd5ff;
}


.history-report-card__title {
    margin:
        0;

    color:
        #ffffff;

    font-size:
        18px;
}


.history-report-card__id {
    margin:
        8px 0 0;

    color:
        rgba(
            219,
            229,
            250,
            0.48
        );

    font-size:
        11px;

    overflow-wrap:
        anywhere;
}


.history-report-card__actions {
    flex:
        0 0 auto;

    display:
        flex;

    flex-direction:
        column;

    align-items:
        flex-end;

    gap:
        8px;
}


.history-report-card__button {
    min-width:
        110px;

    padding:
        10px 14px;

    border:
        1px solid
        rgba(
            151,
            182,
            255,
            0.42
        );

    border-radius:
        11px;

    background:
        rgba(
            41,
            77,
            157,
            0.76
        );

    color:
        #ffffff;

    font-size:
        13px;

    font-weight:
        700;

    cursor:
        pointer;
}


.history-report-card__button:hover {
    background:
        rgba(
            55,
            96,
            192,
            0.92
        );
}


.history-report-card__upgrade {
    color:
        rgba(
            204,
            218,
            249,
            0.50
        );

    font-size:
        10px;
}


/* =========================================================
   Tablet
   ========================================================= */

@media (
    max-width: 800px
) {

    .gateway-panel {
        grid-template-columns:
            1fr;
    }


    .gateway-card {
        min-height:
            310px;
    }

}


/* =========================================================
   Mobile
   ========================================================= */

@media (
    max-width: 600px
) {

    .entry-page {
        padding:
            38px 14px
            64px;
    }


    .entry-page__header {
        margin-bottom:
            30px;
    }


    .entry-page__title {
        font-size:
            34px;
    }


    .entry-page__description {
        font-size:
            14px;
    }


    .gateway-panel {
        gap:
            14px;
    }


    .gateway-card {
        min-height:
            auto;

        padding:
            24px 20px;

        border-radius:
            19px;
    }


    .gateway-card__title {
        font-size:
            22px;
    }


    .gateway-card
    .gateway-button {
        margin-top:
            26px;
    }


    .account-card {
        padding:
            26px 20px;

        border-radius:
            19px;
    }


    .account-card__title {
        font-size:
            24px;
    }


    .account-form__input--code {
        max-width:
            none;
    }


    .reports-header {
        align-items:
            flex-start;

        flex-direction:
            column;
    }


    .reports-header
    #logout-button {
        width:
            100%;
    }


    .reports-actions
    .gateway-button {
        width:
            100%;
    }


    .history-report-card {
        align-items:
            stretch;

        flex-direction:
            column;

        gap:
            18px;
    }


    .history-report-card__actions {
        align-items:
            stretch;
    }


    .history-report-card__button {
        width:
            100%;
    }

}