* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

:root {
    --bg: #060914;
    --card: rgba(15, 21, 37, 0.88);
    --border: rgba(255, 255, 255, 0.09);

    --text: #f5f7ff;
    --muted: #8d97ae;

    --blue: #6c8cff;
    --blue-light: #9bacff;

    --green: #36d399;
    --red: #ff5c73;
}

html,
body {
    min-height: 100%;
}

body {
    min-height: 100vh;

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

    padding: 20px;

    background:
        radial-gradient(
            circle at 15% 20%,
            rgba(108, 140, 255, 0.15),
            transparent 30%
        ),
        radial-gradient(
            circle at 85% 75%,
            rgba(54, 211, 153, 0.07),
            transparent 28%
        ),
        var(--bg);

    color: var(--text);

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

    line-height: 1.5;

    overflow-x: hidden;
}


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

body::before {
    content: "";

    position: fixed;

    width: 420px;
    height: 420px;

    top: -180px;
    right: -140px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(108, 140, 255, 0.12),
            transparent 70%
        );

    pointer-events: none;

    animation:
        floatGlow
        8s
        ease-in-out
        infinite;
}

body::after {
    content: "";

    position: fixed;

    width: 360px;
    height: 360px;

    bottom: -180px;
    left: -120px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(54, 211, 153, 0.07),
            transparent 70%
        );

    pointer-events: none;

    animation:
        floatGlow
        10s
        ease-in-out
        infinite
        reverse;
}

@keyframes floatGlow {

    0%,
    100% {
        transform:
            translate3d(0, 0, 0);
    }

    50% {
        transform:
            translate3d(0, 18px, 0);
    }
}


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

.auth-page {
    width: 100%;
    max-width: 440px;

    position: relative;

    z-index: 1;

    animation:
        pageEnter
        .5s
        ease
        both;
}

@keyframes pageEnter {

    from {
        opacity: 0;

        transform:
            translateY(16px)
            scale(.98);
    }

    to {
        opacity: 1;

        transform:
            translateY(0)
            scale(1);
    }
}


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

.auth-card {
    position: relative;

    width: 100%;

    padding:
        42px
        36px
        36px;

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

    border-radius: 24px;

    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.045),
            rgba(255, 255, 255, 0.012)
        ),
        var(--card);

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

        inset 0 1px 0
        rgba(255, 255, 255, 0.04);

    backdrop-filter:
        blur(24px);

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

    overflow: hidden;
}

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

    position: absolute;

    top: 0;

    left: 15%;
    right: 15%;

    height: 2px;

    background:
        linear-gradient(
            90deg,
            transparent,
            var(--blue),
            var(--blue-light),
            transparent
        );

    opacity: .75;

    box-shadow:
        0 0 25px
        rgba(108, 140, 255, .45);
}


/* ========================================
   TITLE
======================================== */

.auth-card h1 {
    text-align: center;

    font-size: 36px;

    font-weight: 850;

    letter-spacing: -1.8px;

    background:
        linear-gradient(
            120deg,
            #ffffff,
            var(--blue-light)
        );

    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.subtitle {
    margin-top: 5px;

    text-align: center;

    color: var(--muted);

    font-size: 13px;
}


/* ========================================
   DIVIDER
======================================== */

.divider {
    width: 100%;
    height: 1px;

    margin:
        27px
        0;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255, 255, 255, .10),
            transparent
        );
}


/* ========================================
   LOGIN TEXT
======================================== */

.login-text {
    margin-bottom: 20px;

    text-align: center;

    color: #c3c9d8;

    font-size: 14px;
}


/* ========================================
   TELEGRAM AREA
======================================== */

.telegram-login-area {
    width: 100%;

    min-height: 80px;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: flex-start;

    gap: 10px;
}


/* ========================================
   LOADER
======================================== */

.telegram-loader {
    width: 100%;
    height: 20px;

    display: flex !important;

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

    opacity: 1;

    transform: translateY(0);

    transition:
        opacity .3s ease,
        transform .3s ease;
}


/* Скрывается JS после появления Telegram iframe */

.telegram-loader.hidden {
    display: none !important;

    opacity: 0;

    transform: translateY(-4px);
}


/* ========================================
   THREE DOTS
======================================== */

.telegram-loading-dots {
    width: auto;
    height: 20px;

    display: flex;

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

    gap: 7px;
}

.telegram-loading-dots i {
    display: block !important;

    width: 8px;
    height: 8px;

    margin: 0;
    padding: 0;

    flex: 0 0 8px;

    border-radius: 50%;

    background:
        var(--blue);

    opacity: .3;

    animation:
        telegramDotPulse
        1.2s
        ease-in-out
        infinite;
}

.telegram-loading-dots i:nth-child(1) {
    animation-delay: 0s;
}

.telegram-loading-dots i:nth-child(2) {
    animation-delay: .15s;
}

.telegram-loading-dots i:nth-child(3) {
    animation-delay: .30s;
}

@keyframes telegramDotPulse {

    0% {
        opacity: .25;

        transform:
            scale(.7);
    }

    50% {
        opacity: 1;

        transform:
            scale(1.2);
    }

    100% {
        opacity: .25;

        transform:
            scale(.7);
    }
}


/* ========================================
   TELEGRAM WIDGET
======================================== */

.telegram-login {
    width: 100%;

    min-height: 46px;

    display: flex;

    align-items: center;

    justify-content: center;

    margin-top: 0;
}

.telegram-login iframe {
    display: block;

    max-width: 100% !important;

    margin:
        0 auto !important;
}


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

.telegram-error {
    width: 100%;

    display: flex;

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

    gap: 10px;

    color: var(--muted);

    font-size: 13px;
}

.telegram-error-icon {
    width: 28px;
    height: 28px;

    flex: 0 0 28px;

    display: flex;

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

    border-radius: 8px;

    background:
        rgba(255, 92, 115, .10);

    border:
        1px solid
        rgba(255, 92, 115, .18);

    color:
        var(--red);

    font-weight: 800;
}

.telegram-error-text {
    display: flex;

    flex-direction: column;

    gap: 1px;

    text-align: left;
}

.telegram-error-text strong {
    color:
        var(--text);

    font-size: 12px;
}

.telegram-error-text span {
    color:
        var(--muted);

    font-size: 11px;
}


/* ========================================
   STATUS
======================================== */

.status {
    min-height: 20px;

    margin-top: 17px;

    text-align: center;

    color: var(--muted);

    font-size: 13px;

    transition:
        color .2s ease,
        opacity .2s ease;
}

.status.success {
    color:
        var(--green);
}

.status.error {
    color:
        var(--red);
}


/* ========================================
   ACCESS DENIED
======================================== */

.access-denied-toast {
    position: fixed;

    top: 24px;
    left: 50%;

    z-index: 9999;

    width:
        min(
            calc(100% - 32px),
            430px
        );

    display: flex;

    align-items: center;

    gap: 14px;

    padding:
        15px
        17px;

    border:
        1px solid
        rgba(255, 92, 115, .22);

    border-radius: 15px;

    background:
        rgba(18, 22, 36, .94);

    box-shadow:
        0 20px 60px
        rgba(0, 0, 0, .45),

        0 0 35px
        rgba(255, 92, 115, .08);

    backdrop-filter:
        blur(18px);

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

    opacity: 0;

    transform:
        translate(-50%, -20px)
        scale(.97);

    pointer-events: none;

    transition:
        opacity .3s ease,
        transform .3s ease;
}

.access-denied-toast.show {
    opacity: 1;

    transform:
        translate(-50%, 0)
        scale(1);
}

.access-denied-icon {
    width: 34px;
    height: 34px;

    flex: 0 0 34px;

    display: flex;

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

    border-radius: 10px;

    background:
        rgba(255, 92, 115, .12);

    border:
        1px solid
        rgba(255, 92, 115, .18);

    color:
        #ff7184;

    font-size: 17px;

    font-weight: 800;
}

.access-denied-content {
    display: flex;

    flex-direction: column;

    gap: 2px;

    min-width: 0;
}

.access-denied-content strong {
    color:
        #f5f7ff;

    font-size: 13px;

    font-weight: 750;
}

.access-denied-content span {
    color:
        #929bb0;

    font-size: 12px;

    line-height: 1.4;
}


/* ========================================
   MOBILE
======================================== */

@media (max-width: 600px) {

    body {
        padding: 14px;
    }

    .auth-page {
        max-width: 100%;
    }

    .auth-card {
        padding:
            34px
            22px
            30px;

        border-radius: 21px;
    }

    .auth-card h1 {
        font-size: 30px;
    }

    .subtitle {
        font-size: 12px;
    }

    .divider {
        margin:
            23px
            0;
    }

    .login-text {
        font-size: 13px;
    }

    .telegram-login-area {
        min-height: 76px;
    }

    .access-denied-toast {
        top: 14px;

        width:
            calc(100% - 24px);

        padding:
            13px
            14px;

        border-radius: 13px;
    }

    .access-denied-icon {
        width: 32px;
        height: 32px;

        flex-basis: 32px;
    }
}


/* ========================================
   SMALL PHONES
======================================== */

@media (max-width: 380px) {

    body {
        padding: 10px;
    }

    .auth-card {
        padding:
            28px
            17px
            25px;

        border-radius: 18px;
    }

    .auth-card h1 {
        font-size: 27px;
    }

    .login-text {
        font-size: 12px;
    }

    .telegram-loading-dots i {
        width: 7px;
        height: 7px;

        flex-basis: 7px;
    }
}


/* ========================================
   REDUCED MOTION
======================================== */

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

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

        animation-duration:
            .01ms !important;

        animation-iteration-count:
            1 !important;

        transition-duration:
            .01ms !important;
    }
}