@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800;900&display=swap');

:root {
    --bg: #02050a;
    --card: #08111c;
    --card2: #0d1b2a;

    --cyan: #00eaff;
    --blue: #1677ff;
    --purple: #8b5cf6;

    --white: #ffffff;
    --text: #eafcff;
    --muted: #8ca5b8;

    --border: rgba(0, 234, 255, 0.20);
}

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

body {
    min-height: 100vh;

    font-family: 'Poppins', sans-serif;

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

    padding: 20px;

    color: var(--white);

    background:
        radial-gradient(
            circle at 50% 10%,
            rgba(0, 234, 255, 0.16),
            transparent 30%
        ),
        radial-gradient(
            circle at 10% 90%,
            rgba(22, 119, 255, 0.15),
            transparent 35%
        ),
        radial-gradient(
            circle at 90% 90%,
            rgba(139, 92, 246, 0.10),
            transparent 30%
        ),
        #02050a;
}


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

.admin-login-page {
    width: 100%;
    max-width: 430px;

    position: relative;
}


/* ================= LOGIN BOX ================= */

.login-box {
    position: relative;

    padding: 42px 32px 34px;

    border-radius: 25px;

    text-align: center;

    background:
        linear-gradient(
            145deg,
            rgba(13, 27, 42, 0.98),
            rgba(3, 8, 14, 0.99)
        );

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

    box-shadow:
        0 30px 80px rgba(0,0,0,.75),
        0 0 40px rgba(0,234,255,.07);

    overflow: hidden;
}


/* Top glowing line */

.login-box::before {
    content: "";

    position: absolute;

    top: 0;
    left: 8%;

    width: 84%;
    height: 3px;

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

    box-shadow:
        0 0 18px var(--cyan);
}


/* ================= ICON ================= */

.login-icon {
    width: 82px;
    height: 82px;

    margin: 0 auto 20px;

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

    border-radius: 23px;

    font-size: 38px;

    background:
        linear-gradient(
            145deg,
            #102d45,
            #050b12
        );

    border: 1px solid rgba(0,234,255,.4);

    box-shadow:
        0 0 25px rgba(0,234,255,.14),
        inset 0 0 25px rgba(0,234,255,.04);

    transition: .3s ease;
}

.login-icon:hover {
    transform: translateY(-4px) scale(1.04);

    box-shadow:
        0 0 35px rgba(0,234,255,.28);
}


/* ================= TG HUNTERS TITLE ================= */

.login-box h1 {
    font-size: 30px;

    font-weight: 900;

    letter-spacing: 2.5px;

    background:
        linear-gradient(
            90deg,
            #ffffff 0%,
            #8cf8ff 35%,
            #00eaff 55%,
            #ffffff 100%
        );

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

    background-clip: text;

    text-shadow:
        0 0 25px rgba(0,234,255,.15);
}


/* ================= ADMIN LOGIN TITLE ================= */

.login-box h2 {
    margin-top: 7px;

    font-size: 21px;

    font-weight: 800;

    letter-spacing: 1px;

    color: var(--cyan);

    text-shadow:
        0 0 15px rgba(0,234,255,.35);
}


/* ================= SUBTITLE ================= */

.login-box > p {
    margin-top: 7px;
    margin-bottom: 28px;

    color: var(--muted);

    font-size: 12px;

    font-weight: 500;

    letter-spacing: .5px;
}


/* ================= INPUT ================= */

.login-box input {
    width: 100%;

    height: 54px;

    margin-bottom: 16px;

    padding: 0 17px;

    border-radius: 14px;

    outline: none;

    border: 1px solid rgba(255,255,255,.08);

    background:
        linear-gradient(
            145deg,
            #101f2e,
            #070d14
        );

    color: #ffffff;

    font-family: 'Poppins', sans-serif;

    font-size: 13px;

    transition: .25s ease;
}

.login-box input::placeholder {
    color: #637b8e;
}

.login-box input:hover {
    border-color: rgba(0,234,255,.35);
}

.login-box input:focus {
    border-color: var(--cyan);

    background: #0a1724;

    box-shadow:
        0 0 0 3px rgba(0,234,255,.06),
        0 0 25px rgba(0,234,255,.10);
}


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

#loginBtn {
    width: 100%;

    height: 56px;

    margin-top: 4px;

    border: none;

    border-radius: 15px;

    cursor: pointer;

    font-family: 'Poppins', sans-serif;

    font-size: 14px;

    font-weight: 900;

    letter-spacing: 1.5px;

    color: #001016;

    background:
        linear-gradient(
            100deg,
            #00eaff,
            #58f4ff,
            #1680ff,
            #8b5cf6
        );

    background-size: 200% 100%;

    box-shadow:
        0 12px 30px rgba(0,234,255,.18);

    transition:
        .3s ease;
}

#loginBtn:hover {
    transform: translateY(-3px);

    background-position: 100% 0;

    box-shadow:
        0 18px 45px rgba(0,234,255,.28);

    filter: brightness(1.08);
}

#loginBtn:active {
    transform: scale(.98);
}

#loginBtn:disabled {
    cursor: not-allowed;

    opacity: .65;

    transform: none;
}


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

#loginMessage {
    min-height: 22px;

    margin-top: 15px;

    font-size: 12px;

    font-weight: 600;

    line-height: 1.5;
}


/* Success */

#loginMessage.success {
    color: #48ffb0;

    text-shadow:
        0 0 12px rgba(72,255,176,.3);
}


/* Error */

#loginMessage.error {
    color: #ff5c70;

    text-shadow:
        0 0 12px rgba(255,92,112,.25);
}


/* ================= SECURITY ================= */

.login-box::after {
    content: "🔐  AUTHORIZED ADMIN ACCESS ONLY";

    display: block;

    margin-top: 22px;
    padding-top: 17px;

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

    color: #587184;

    font-size: 9px;

    font-weight: 600;

    letter-spacing: 1.2px;
}


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

@media (max-width: 600px) {

    body {
        padding: 15px;
    }

    .login-box {
        padding: 35px 22px 30px;

        border-radius: 22px;
    }

    .login-icon {
        width: 72px;
        height: 72px;

        font-size: 33px;
    }

    .login-box h1 {
        font-size: 25px;

        letter-spacing: 1.7px;
    }

    .login-box h2 {
        font-size: 18px;
    }

    .login-box > p {
        font-size: 11px;

        margin-bottom: 23px;
    }

    .login-box input {
        height: 51px;

        font-size: 12px;
    }

    #loginBtn {
        height: 53px;

        font-size: 13px;
    }
}


/* ================= SMALL PHONE ================= */

@media (max-width: 360px) {

    .login-box {
        padding: 30px 17px 26px;
    }

    .login-icon {
        width: 65px;
        height: 65px;

        font-size: 30px;
    }

    .login-box h1 {
        font-size: 21px;
    }

    .login-box h2 {
        font-size: 16px;
    }
}