/* ==========================================
   YGF STUDIO ADMIN LOGIN
========================================== */

* {
    box-sizing: border-box;
}


html,
body {

    margin: 0;

    width: 100%;
    min-height: 100%;

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

    background: #080808;

    color: #ffffff;

}


body {

    min-height: 100vh;

}


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

.login-page {

    position: relative;

    min-height: 100vh;

    display: flex;

    align-items: center;

    justify-content: center;

    padding: 30px;

    overflow: hidden;

}


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

.login-background {

    position: fixed;

    inset: 0;

    pointer-events: none;

    overflow: hidden;

    background:
        radial-gradient(
            circle at 50% 35%,
            rgba(255, 255, 255, 0.055),
            transparent 35%
        ),
        #080808;

}


.background-grid {

    position: absolute;

    inset: -50%;

    opacity: 0.14;

    background-image:

        linear-gradient(
            rgba(255,255,255,0.045) 1px,
            transparent 1px
        ),

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

    background-size: 45px 45px;

    transform:
        perspective(700px)
        rotateX(55deg)
        translateY(20%);

}


.background-glow {

    position: absolute;

    width: 500px;

    height: 500px;

    left: 50%;

    top: 40%;

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

    background:
        radial-gradient(
            circle,
            rgba(255,255,255,0.065),
            transparent 70%
        );

    filter: blur(30px);

}


/* ==========================================
   CONTAINER
========================================== */

.login-container {

    position: relative;

    z-index: 2;

    width: 100%;

    max-width: 430px;

}


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

.login-card {

    position: relative;

    padding: 42px;

    background:
        linear-gradient(
            145deg,
            rgba(28,28,28,0.97),
            rgba(12,12,12,0.97)
        );

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

    border-radius: 18px;

    box-shadow:
        0 30px 80px
        rgba(0,0,0,0.55);

    backdrop-filter:
        blur(20px);

}


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

.login-brand {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 13px;

    margin-bottom: 42px;

}


.brand-logo {

    width: 48px;

    height: 48px;

    display: flex;

    align-items: center;

    justify-content: center;

}


.brand-logo img {

    max-width: 100%;

    max-height: 100%;

    object-fit: contain;

}


.brand-text {

    display: flex;

    flex-direction: column;

    gap: 3px;

}


.brand-text strong {

    font-size: 17px;

    letter-spacing: 1.8px;

    line-height: 1;

}


.brand-text span {

    font-size: 9px;

    letter-spacing: 2.5px;

    color: #858585;

}


/* ==========================================
   HEADING
========================================== */

.login-heading {

    margin-bottom: 28px;

}


.login-kicker {

    display: block;

    margin-bottom: 9px;

    font-size: 9px;

    font-weight: 700;

    letter-spacing: 2px;

    color: #8c8c8c;

}


.login-heading h1 {

    margin: 0 0 8px;

    font-size: 29px;

    font-weight: 700;

    letter-spacing: -0.7px;

}


.login-heading p {

    margin: 0;

    color: #777;

    font-size: 13px;

    line-height: 1.6;

}


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

.form-group {

    margin-bottom: 20px;

}


.form-group label {

    display: block;

    margin-bottom: 8px;

    color: #bcbcbc;

    font-size: 11px;

    font-weight: 600;

    letter-spacing: 0.4px;

}


.form-group input {

    width: 100%;

    height: 48px;

    padding: 0 14px;

    border-radius: 9px;

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

    outline: none;

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

    color: #ffffff;

    font-size: 13px;

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

}


.form-group input::placeholder {

    color: #555;

}


.form-group input:focus {

    border-color:
        rgba(255,255,255,0.28);

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

    box-shadow:
        0 0 0 3px
        rgba(255,255,255,0.025);

}


/* ==========================================
   2FA INPUT
========================================== */

#twoFactorToken {

    text-align: center;

    font-size: 24px;

    font-weight: 700;

    letter-spacing: 9px;

    padding-left: 20px;

}


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

.login-button {

    width: 100%;

    height: 50px;

    margin-top: 4px;

    border: 0;

    border-radius: 9px;

    background: #ffffff;

    color: #080808;

    font-size: 12px;

    font-weight: 800;

    letter-spacing: 0.5px;

    cursor: pointer;

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

}


.login-button:hover {

    transform:
        translateY(-1px);

    box-shadow:
        0 10px 30px
        rgba(255,255,255,0.08);

}


.login-button:active {

    transform:
        translateY(0);

}


.login-button:disabled {

    cursor: not-allowed;

    opacity: 0.5;

    transform: none;

}


/* ==========================================
   BACK BUTTON
========================================== */

.back-button {

    width: 100%;

    margin-top: 15px;

    padding: 8px;

    border: 0;

    background: transparent;

    color: #777;

    font-size: 11px;

    cursor: pointer;

    transition:
        color 0.2s ease;

}


.back-button:hover {

    color: #ffffff;

}


/* ==========================================
   ERROR
========================================== */

.login-error {

    margin:
        -4px 0 18px;

    padding: 11px 13px;

    border-radius: 8px;

    border: 1px solid
        rgba(255,80,80,0.18);

    background:
        rgba(255,50,50,0.055);

    color: #ff8f8f;

    font-size: 11px;

    line-height: 1.5;

}


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

.login-footer {

    margin-top: 25px;

    text-align: center;

    color: #505050;

    font-size: 10px;

}


/* ==========================================
   COPYRIGHT
========================================== */

.login-copyright {

    margin-top: 18px;

    text-align: center;

    color: #3f3f3f;

    font-size: 9px;

    letter-spacing: 1px;

}


/* ==========================================
   UTILITIES
========================================== */

.hidden {

    display: none !important;

}


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

@media (max-width: 520px) {

    .login-page {

        padding: 18px;

    }

    .login-card {

        padding: 30px 24px;

        border-radius: 15px;

    }

    .login-brand {

        margin-bottom: 32px;

    }

    .login-heading h1 {

        font-size: 25px;

    }

}