/* =========================================================
   AUTHENTICATION
   ========================================================= */


.login-card,
.status-card,
.workspace-card {

    width:
        min(
            680px,
            100%
        );

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

    border-radius:
        26px;

    background:
        var(--surface);

    box-shadow:
        0 28px 90px
        rgba(
            0,
            0,
            0,
            0.28
        );

    backdrop-filter:
        blur(18px);

}


.login-card {

    width:
        min(
            480px,
            100%
        );

    padding:
        38px;

}


.login-header {

    display:
        flex;

    align-items:
        center;

    gap:
        16px;

}


.login-header h1 {

    font-size:
        25px;

    line-height:
        1.2;

}


.login-description {

    margin:
        26px 0;

    color:
        var(--text-secondary);

    font-size:
        14px;

    line-height:
        1.6;

}


.login-form {

    display:
        grid;

    gap:
        11px;

}


.login-form label {

    margin-top:
        6px;

    color:
        #cdd8e8;

    font-size:
        13px;

    font-weight:
        600;

}


.login-form input {

    width:
        100%;

    height:
        46px;

    padding:
        0 14px;

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

    border-radius:
        11px;

    outline:
        none;

    color:
        var(--text-primary);

    background:
        var(--input-background);

}


.login-form input:focus {

    border-color:
        rgba(
            98,
            166,
            255,
            0.55
        );

    box-shadow:
        0 0 0 3px
        rgba(
            98,
            166,
            255,
            0.08
        );

}


.login-form input::placeholder {

    color:
        #718096;

}


.login-form .primary-button {

    margin-top:
        13px;

}


.form-error {

    padding:
        11px 13px;

    margin-top:
        5px;

    border:
        1px solid
        rgba(
            255,
            107,
            120,
            0.2
        );

    border-radius:
        10px;

    color:
        #ffabb3;

    background:
        rgba(
            255,
            107,
            120,
            0.07
        );

    font-size:
        13px;

}


/* =========================================================
   LOADING
   ========================================================= */


.status-card {

    width:
        min(
            420px,
            100%
        );

    padding:
        36px;

    text-align:
        center;

}


.status-card .system-mark {

    margin:
        0 auto 20px;

}


.status-card h1 {

    margin-bottom:
        10px;

    font-size:
        22px;

}


.status-card p {

    color:
        var(--text-secondary);

    font-size:
        14px;

}


/* =========================================================
   AUTHENTICATED WORKSPACE
   ========================================================= */


.workspace-card {

    padding:
        34px;

}


.workspace-header {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        20px;

    padding-bottom:
        26px;

    border-bottom:
        1px solid
        rgba(
            255,
            255,
            255,
            0.07
        );

}


.workspace-header h1 {

    font-size:
        28px;

}


.user-summary {

    display:
        grid;

    grid-template-columns:
        1fr auto;

    gap:
        20px;

    margin-top:
        28px;

    padding:
        22px;

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

    border-radius:
        16px;

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

}


.user-summary > div {

    display:
        grid;

    gap:
        5px;

}


.summary-label {

    color:
        var(--text-secondary);

    font-size:
        12px;

    text-transform:
        uppercase;

    letter-spacing:
        0.08em;

}


#userName {

    font-size:
        17px;

}


#userEmail {

    color:
        var(--text-secondary);

    font-size:
        13px;

}


.role-panel {

    min-width:
        120px;

}


#userRole {

    color:
        #9dc8ff;

}


.foundation-message {

    display:
        flex;

    align-items:
        flex-start;

    gap:
        13px;

    margin-top:
        22px;

    padding:
        18px;

    border-radius:
        14px;

    background:
        rgba(
            79,
            227,
            164,
            0.05
        );

}


.foundation-message p {

    margin-top:
        5px;

    color:
        var(--text-secondary);

    font-size:
        13px;

    line-height:
        1.5;

}


.online-indicator {

    width:
        9px;

    height:
        9px;

    flex-shrink:
        0;

    margin-top:
        5px;

    border-radius:
        50%;

    background:
        var(--success);

    box-shadow:
        0 0 14px
        rgba(
            79,
            227,
            164,
            0.65
        );

}


@media (
    max-width: 600px
) {

    .login-card,
    .workspace-card {

        padding:
            26px 22px;

        border-radius:
            20px;

    }


    .workspace-header {

        align-items:
            flex-start;

    }


    .user-summary {

        grid-template-columns:
            1fr;

    }

}