:root {
    --bg-1: #020617;
    --bg-2: #07111f;
    --bg-3: #160a35;

    --card: rgba(15, 23, 42, 0.68);
    --card-strong: rgba(15, 23, 42, 0.86);

    --border: rgba(255,255,255,0.12);
    --border-strong: rgba(125,173,255,0.34);

    --text: #f8fbff;
    --muted: #b8c4dc;

    --accent: #7c3aed;
    --accent-2: #2563eb;
    --accent-3: #00ffc3;

    --danger: #ff5a70;
    --success: #22c55e;

    --radius: 24px;
}

/* =========================================================
   RESET
========================================================= */

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

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

/* =========================================================
   BODY
========================================================= */

body{

    min-height: 100vh;

    font-family: Arial, sans-serif;

    color: var(--text);

    display: flex;
    flex-direction: column;

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

    padding: clamp(18px, 3vw, 42px);

    overflow-x: hidden;

    background:
            radial-gradient(circle at 12% 16%, rgba(0,255,195,0.18), transparent 28%),
            radial-gradient(circle at 88% 12%, rgba(37,99,235,0.30), transparent 30%),
            radial-gradient(circle at 78% 88%, rgba(124,58,237,0.32), transparent 34%),
            linear-gradient(
                    145deg,
                    var(--bg-1),
                    var(--bg-2) 48%,
                    var(--bg-3)
            );

    position: relative;
}

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

body::before,
body::after{

    content: "";

    position: fixed;

    border-radius: 999px;

    pointer-events: none;

    z-index: 0;

    filter: blur(65px);
}

body::before{

    width: clamp(280px, 42vw, 680px);
    height: clamp(280px, 42vw, 680px);

    right: -12vw;
    bottom: -18vh;

    background: rgba(124,58,237,0.28);
}

body::after{

    width: clamp(240px, 34vw, 520px);
    height: clamp(240px, 34vw, 520px);

    left: -10vw;
    top: -16vh;

    background: rgba(0,255,195,0.18);
}

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

.page-shell{

    position: relative;

    z-index: 2;

    width: min(100%, 480px);
}

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

.container{

    position: relative;

    width: 100%;

    padding: clamp(26px, 4vw, 44px);

    border-radius: var(--radius);

    text-align: center;

    color: var(--text);

    background:
            linear-gradient(
                    145deg,
                    rgba(255,255,255,0.08),
                    rgba(255,255,255,0.025)
            ),
            var(--card);

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

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

    box-shadow:
            0 28px 70px rgba(0,0,0,0.58),
            0 0 35px rgba(37,99,235,0.16),
            inset 0 1px 0 rgba(255,255,255,0.10),
            inset 0 -24px 55px rgba(0,0,0,0.20);

    overflow: hidden;
}

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

.container::before{

    content: "";

    position: absolute;

    inset: 1px;

    border-radius: calc(var(--radius) - 1px);

    background:
            linear-gradient(
                    120deg,
                    rgba(255,255,255,0.16),
                    transparent 25%,
                    transparent 72%,
                    rgba(0,255,195,0.10)
            );

    pointer-events: none;
}

.container::after{

    content: "";

    position: absolute;

    inset: -1px;

    border-radius: calc(var(--radius) + 1px);

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

    pointer-events: none;

    box-shadow:
            0 0 28px rgba(0,255,195,0.09);
}

/* =========================================================
   CONTENT FIX
========================================================= */

.container > *{

    position: relative;

    z-index: 2;
}

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

.logo-badge{

    width: clamp(66px, 10vw, 86px);
    height: clamp(66px, 10vw, 86px);

    margin: 0 auto 22px;

    border-radius: 24px;

    display: grid;
    place-items: center;

    font-size: clamp(28px, 5vw, 40px);

    background:
            linear-gradient(
                    145deg,
                    var(--accent),
                    var(--accent-2)
            );

    box-shadow:
            0 16px 35px rgba(37,99,235,0.36),
            0 0 28px rgba(124,58,237,0.38),
            inset 0 1px 0 rgba(255,255,255,0.28),
            inset 0 -10px 18px rgba(0,0,0,0.20);
}

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

h1{

    font-size: clamp(25px, 5vw, 36px);

    line-height: 1.08;

    margin-bottom: 12px;

    letter-spacing: -0.04em;

    text-shadow:
            0 0 22px rgba(37,99,235,0.22);
}

.subtitle{

    color: var(--muted);

    font-size: clamp(14px, 1.8vw, 15px);

    line-height: 1.55;

    margin-bottom: 24px;
}

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

form{

    position: relative;

    z-index: 2;
}

/* =========================================================
   INPUTS
========================================================= */

.input{

    width: 100%;

    height: clamp(48px, 6vh, 56px);

    padding: 0 16px;

    margin: 8px 0;

    border-radius: 15px;

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

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

    color: var(--text);

    font-size: 15px;

    outline: none;

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

    box-shadow:
            inset 0 2px 8px rgba(0,0,0,0.24),
            0 1px 0 rgba(255,255,255,0.05);
}

.input::placeholder{

    color:
            rgba(229,247,255,0.52);
}

.input:focus{

    border-color: var(--border-strong);

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

    box-shadow:
            0 0 0 4px rgba(37,99,235,0.16),
            0 12px 26px rgba(0,0,0,0.18),
            inset 0 2px 8px rgba(0,0,0,0.20);

    transform: translateY(-1px);
}

/* =========================================================
   BUTTONS
========================================================= */

.button{

    width: 100%;

    min-height: 52px;

    padding: 13px 18px;

    border: 0;

    border-radius: 16px;

    cursor: pointer;

    color: white;

    font-size: 16px;

    font-weight: 700;

    letter-spacing: 0.01em;

    background:
            linear-gradient(
                    145deg,
                    #9333ea,
                    #6366f1 52%,
                    #2563eb
            );

    box-shadow:
            0 16px 30px rgba(37,99,235,0.28),
            0 7px 0 rgba(15,23,42,0.72),
            inset 0 1px 0 rgba(255,255,255,0.24),
            inset 0 -10px 16px rgba(0,0,0,0.18);

    transition:
            transform 0.18s ease,
            box-shadow 0.18s ease,
            filter 0.18s ease;
}

.button:hover{

    transform: translateY(-3px);

    filter: brightness(1.07);

    box-shadow:
            0 22px 38px rgba(37,99,235,0.36),
            0 10px 0 rgba(15,23,42,0.70),
            inset 0 1px 0 rgba(255,255,255,0.28),
            inset 0 -10px 16px rgba(0,0,0,0.16);
}

.button:active{

    transform: translateY(3px);

    box-shadow:
            0 9px 18px rgba(37,99,235,0.25),
            0 2px 0 rgba(15,23,42,0.76),
            inset 0 3px 8px rgba(0,0,0,0.22);
}

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

.link-button{

    margin-top: 16px;

    background: transparent;

    color: #93c5fd;

    box-shadow: none;

    min-height: auto;

    padding: 10px;

    font-size: 14px;

    border: 1px solid transparent;
}

.link-button:hover{

    transform: none;

    box-shadow: none;

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

    border-color: rgba(255,255,255,0.09);
}

/* =========================================================
   EULA
========================================================= */

.eula-title{

    color: var(--text);

    font-size: 16px;

    font-weight: 800;

    margin: 18px 0 10px;

    text-align: left;
}

.eula-container{

    max-height: min(250px, 32vh);

    overflow-y: auto;

    text-align: left;

    padding: 16px;

    border-radius: 16px;

    color: #d8e6ff;

    background:
            rgba(2,6,23,0.42);

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

    box-shadow:
            inset 0 0 20px rgba(0,0,0,0.24);

    font-size: 14px;

    line-height: 1.55;
}

.eula-section{

    margin-bottom: 12px;
}

.eula-section strong{

    color: white;
}

.eula-checkbox{

    display: flex;

    align-items: flex-start;

    gap: 10px;

    margin: 18px 0;

    text-align: left;

    color: var(--muted);

    font-size: 14px;

    line-height: 1.4;
}

.eula-checkbox input[type="checkbox"]{

    margin-top: 2px;

    width: 18px;

    height: 18px;

    accent-color: var(--accent-2);
}

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

.message{

    position: relative;

    z-index: 5;

    width: min(100%, 480px);

    margin: 0 auto 18px;

    padding: 12px 16px;

    border-radius: 14px;

    font-weight: 700;

    text-align: center;

    background: var(--card-strong);

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

    box-shadow:
            0 12px 26px rgba(0,0,0,0.32);
}

.message.success{

    color: #a7f3d0;

    border-color:
            rgba(34,197,94,0.32);
}

.message.error{

    color: #fecdd3;

    border-color:
            rgba(255,90,112,0.32);
}

/* =========================================================
   SPACER
========================================================= */

.spacer10px,
.spacerdiv10px{

    height: 10px;
}

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

.site-footer{

    position: relative;

    z-index: 2;

    width: min(940px, 100%);

    margin-top: 22px;

    color:
            rgba(229,247,255,0.42);

    text-align: center;

    font-size: clamp(11px, 1.6vw, 13px);

    line-height: 1.45;
}

/* =========================================================
   SCROLLBAR
========================================================= */

::-webkit-scrollbar{

    width: 10px;
}

::-webkit-scrollbar-track{

    background:
            rgba(255,255,255,0.05);
}

::-webkit-scrollbar-thumb{

    background:
            rgba(147,197,253,0.38);

    border-radius: 10px;
}

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

@media (max-height: 760px){

    body{

        justify-content: flex-start;

        overflow-y: auto;
    }

    .page-shell{

        margin-top: 16px;
    }
}

@media (max-width: 520px){

    body{

        padding: 14px;
    }
}