* {
    box-sizing: border-box
}

html,
body {
    margin: 0;
    min-height: 100%;
    font-family: Arial, Helvetica, sans-serif;
    color: #fff;
}

body {
    min-height: 100vh;
    overflow-x: hidden;
    background: #020a13;
}

/* =========================================================
   NEON SILK BACKGROUND
   ========================================================= */

.silk {
    position: fixed;
    inset: -20%;
    z-index: -3;
    overflow: hidden;
    background: radial-gradient(circle at 50% 50%, #062238 0%, #020a13 48%, #010509 100%);
}

.silk::before,
.silk::after {
    content: "";
    position: absolute;
    width: 75vw;
    height: 32vw;
    min-width: 700px;
    min-height: 300px;
    border-radius: 50%;
    filter: blur(24px);
    opacity: .75;
    transform-origin: center;
}

.silk::before {
    left: -18vw;
    top: 20vh;
    background: radial-gradient(ellipse at 35% 50%, rgba(55, 255, 20, .95) 0%, rgba(55, 255, 20, .55) 10%, rgba(0, 130, 255, .75) 28%, rgba(0, 90, 190, .25) 48%, transparent 70%);
    box-shadow: 0 0 90px rgba(55, 255, 20, .30), 0 0 150px rgba(0, 145, 255, .28);
    animation: silkOne 13s ease-in-out infinite alternate;
}

.silk::after {
    right: -22vw;
    bottom: 12vh;
    background: radial-gradient(ellipse at 60% 45%, rgba(0, 145, 255, .90) 0%, rgba(0, 145, 255, .55) 16%, rgba(55, 255, 20, .72) 35%, rgba(55, 255, 20, .18) 55%, transparent 72%);
    box-shadow: 0 0 100px rgba(0, 145, 255, .30), 0 0 160px rgba(55, 255, 20, .25);
    animation: silkTwo 16s ease-in-out infinite alternate;
}

.wave {
    position: absolute;
    width: 130vw;
    height: 20vw;
    min-height: 190px;
    border-radius: 50%;
    border: 2px solid rgba(63, 170, 255, .35);
    filter: blur(7px);
    transform: rotate(-17deg);
    box-shadow: 0 0 25px rgba(0, 150, 255, .45), 0 0 70px rgba(55, 255, 20, .22);
}

.wave:nth-child(1) {
    left: -28vw;
    top: 15vh;
    animation: waveMove1 14s ease-in-out infinite alternate;
}

.wave:nth-child(2) {
    right: -30vw;
    top: 48vh;
    transform: rotate(18deg);
    border-color: rgba(55, 255, 20, .34);
    animation: waveMove2 17s ease-in-out infinite alternate;
}

.wave:nth-child(3) {
    left: -25vw;
    bottom: -2vh;
    transform: rotate(-10deg);
    border-color: rgba(0, 145, 255, .30);
    animation: waveMove3 19s ease-in-out infinite alternate;
}

@keyframes silkOne {
    from {
        transform: translate(-4vw, -2vh) rotate(-8deg) scale(1)
    }

    to {
        transform: translate(20vw, 10vh) rotate(12deg) scale(1.25)
    }
}

@keyframes silkTwo {
    from {
        transform: translate(7vw, 4vh) rotate(8deg) scale(1)
    }

    to {
        transform: translate(-20vw, -12vh) rotate(-13deg) scale(1.28)
    }
}

@keyframes waveMove1 {
    from {
        transform: translate(-5vw, 0) rotate(-17deg) scale(0.95)
    }

    to {
        transform: translate(22vw, 12vh) rotate(-8deg) scale(1.2)
    }
}

@keyframes waveMove2 {
    from {
        transform: translate(5vw, 0) rotate(18deg) scale(1)
    }

    to {
        transform: translate(-20vw, -8vh) rotate(8deg) scale(1.2)
    }
}

@keyframes waveMove3 {
    from {
        transform: translate(-5vw, 0) rotate(-10deg)
    }

    to {
        transform: translate(20vw, -10vh) rotate(-18deg)
    }
}

/* =========================================================
   PARTICLES
   ========================================================= */

.particles {
    position: fixed;
    inset: 0;
    z-index: -2;
    pointer-events: none;
    background-image: radial-gradient(circle, rgba(55, 255, 20, .75) 1px, transparent 1.5px), radial-gradient(circle, rgba(80, 170, 255, 0.55) 1px, transparent 1.5px);
    background-size: 75px 75px, 105px 105px;
    background-position: 10px 20px, 40px 55px;
    opacity: .18;
    animation: particles 18s linear infinite;
}

@keyframes particles {
    to {
        background-position: 85px 95px, 0 10px
    }
}

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

.page {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 25px 15px;
}

.card {
    width: 100%;
    max-width: 470px;
    padding: 27px 30px 30px;
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(113, 197, 255, .45);
    border-radius: 27px;
    background: linear-gradient(145deg, rgba(3, 18, 29, .90), rgba(1, 9, 15, .78));
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    box-shadow: 0 0 0 1px rgba(55, 255, 20, .06), 0 0 30px rgba(0, 150, 255, .18), 0 0 65px rgba(55, 255, 20, .12), 0 0 85px rgba(255, 35, 45, .08), 0 25px 80px rgba(0, 0, 0, .65);
}

.card::before {
    content: "";
    position: absolute;
    inset: -2px;
    border-radius: 29px;
    padding: 1px;
    background: linear-gradient(120deg, transparent 10%, rgba(55, 255, 20, .85), rgba(0, 145, 255, .9), transparent 55%);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    animation: borderGlow 6s linear infinite;
    pointer-events: none;
}

@keyframes borderGlow {
    to {
        transform: rotate(360deg)
    }
}

/* =========================================================
   LOGO
   ========================================================= */

.logo-wrap {
    text-align: center;
    margin-bottom: 30px;
}

.logo {
    text-align: center;
    width: min(240, 70%);
    max-height: 150px;
    object-fit: contain;
    filter: drop-shadow(0 0 8px rgba(55, 255, 20, .20)) drop-shadow(0 0 14px rgba(0, 145, 255, .18));
}

/* =========================================================
   HEADER
   ========================================================= */

.infinity {
    text-align: center;
    font-size: 35px;
    line-height: 1;
    margin: 4px 0 8px;
    color: #fff;
    text-shadow: 0 0 15px rgba(255, 255, 255, .35);
}

.theme {
    text-align: center;
    font-weight: 900;
    letter-spacing: 0.8px;
    font-size: 17px;
    margin-bottom: 7px;
}

.green {
    color: #39ff14
}

.blue {
    color: #68a8ff
}

.red {
    color: #ff3b45;
    text-shadow: 0 0 10px rgba(255, 45, 55, .35)
}

h1 {
    text-align: center;
    margin: 8px 0 7px;
    font-size: 29px;
    line-height: 1.15;
}

.subtitle {
    text-align: center;
    color: #aebdca;
    line-height: 1.5;
    margin-bottom: 20px;
}
.back-button
{
    text-align: center;
    color: #aebdca;
    line-height: 1.5;
    margin-bottom: 30px;
    margin-top: 10px;
}
/* =========================================================
   FORM
   ========================================================= */

label {
    display: block;
    margin: 16px 0 8px;
    font-weight: 800;
    font-size: 16px;
}

.input-wrap {
    position: relative;
}
.icon {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: #b7c8d4;
    font-size: 20px;
    pointer-events: none;
}

input {
    width: 100%;
    height: 57px;
    padding: 0 15px 0 47px;
    border: 1px solid #365363;
    border-radius: 12px;
    outline: none;
    color: #fff;
    background: rgba(5, 20, 30, .80);
    font-size: 16px;
    transition: 0.25s;
}

input::placeholder {
    color: #8ea4b4;
}

input:focus {
    border-color: #39ff14;
    box-shadow: 0 0 0 2px rgba(55, 255, 20, .10), 0 0 20px rgba(55, 255, 20, .10);
}

button {
    width: 100%;
    height: 58px;
    margin-top: 24px;
    border: 0;
    border-radius: 12px;
    background: linear-gradient(90deg, #39ff14, #55ff20);
    color: #020b05;
    font-size: 17px;
    font-weight: 900;
    cursor: pointer;
    box-shadow: 0 0 22px rgba(55, 255, 20, .23);
    transition: 0.2s;
}

button:hover {
    transform: translateY(-2px);
    box-shadow: 0 0 28px rgba(55, 255, 20, .38), 0 8px 25px rgba(0, 0, 0, .25);
}

button:disabled {
    opacity: .55;
    cursor: not-allowed;
    transform: none;
}

.footer-text {
    text-align: center;
    color: #9fb1bf;
    font-size: 14px;
    line-height: 1.5;
    margin-top: 19px;
}

.message {
    display: none;
    margin-top: 14px;
    padding: 12px 14px;
    border-radius: 10px;
    font-size: 14px;
    line-height: 1.45;
}

.error {
    color: #ffc2c8;
    background: rgba(91, 17, 28, .72);
    border: 1px solid rgba(255, 90, 110, .18);
}

.success {
    color: #baffad;
    background: rgba(11, 60, 34, .72);
    border: 1px solid rgba(55, 255, 20, .18);
}

/* =========================================================
   QR RESULT
   ========================================================= */

.result {
    display: none;
    text-align: center;
}

.result-title {
    color: #39ff14;
    font-size: 19px;
    font-weight: 900;
}

.result-name {
    text-align: center;
    margin-top: 10px;
    font-size: 24px;
    font-weight: 900;
}
.result-dept {
    text-align: center;
    margin-top: 10px;
    font-size: 12px;
    font-weight: 900;
}

.result-id {
    margin-top: 6px;
    color: #aebdca;
}

.qr-box {
    width: 260px;
    height: 260px;
    margin: 20px auto;
    padding: 5px;
    background: #fff;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.qr-box canvas,
.qr-box img {
    max-width: 100%;
    max-height: 100%;
}

.secondary {
    background: #253b48;
    color: #fff;
    box-shadow: none;
    margin-top: 10px;
}

/* Mobile */
@media(max-width:500px) {
    .page {
        padding: 12px
    }

    .card {
        padding: 22px 20px 25px;
        border-radius: 23px
    }

    h1 {
        font-size: 26px
    }

    .logo {
        max-height: 90px
    }

    .theme {
        font-size: 15px
    }
}

.red-lightning {
    position: absolute;
    width: 75vw;
    height: 10vw;
    min-width: 600px;
    min-height: 80px;
    left: -20vw;
    top: 42%;
    border-radius: 50%;
    transform: rotate(-22deg);
    background: linear-gradient(90deg, transparent 0%, rgba(255, 25, 45, 0) 18%, rgba(255, 35, 45, .28) 38%, rgba(255, 65, 70, .9) 50%, rgba(255, 35, 45, .28) 62%, rgba(255, 25, 45, 0) 82%, transparent 100%);
    filter: blur(10px);
    opacity: .65;
    box-shadow: 0 0 25px rgba(255, 35, 45, .55), 0 0 65px rgba(255, 35, 45, .30);
    animation: redSilk 10s ease-in-out infinite alternate;
    pointer-events: none;
}

.red-lightning::after {
    content: "";
    position: absolute;
    left: 35%;
    top: 45%;
    width: 30%;
    height: 2px;
    background: rgba(255, 150, 150, .95);
    box-shadow: 0 0 7px #ff303c, 0 0 18px #ff303c, 0 0 35px rgba(255, 35, 45, .75);
    transform: rotate(-3deg);
}

@keyframes redSilk {
    from {
        transform: translate(-5vw, 5vh) rotate(-22deg) scale(0.85);
        opacity: .35;
    }

    to {
        transform: translate(55vw, -7vh) rotate(-15deg) scale(1.25);
        opacity: .78;
    }
}