:root {
    --green:#13bf78;
    --green-dark:#079965;
    --green-deep:#067a56;
    --text:#101820;
    --muted:#7a858f;
    --line:#dce4e1;
}

* {
    box-sizing:border-box;
}

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

body {
    background:#f8fbfa;
    color:var(--text);

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

    overflow:hidden;
}


/* ============================================================
   GLOBAL NETWORK BACKGROUND
   ============================================================ */

.network-scene {
    position:fixed;
    inset:0;

    overflow:hidden;

    background:
        linear-gradient(
            90deg,
            rgba(255,255,255,.90),
            rgba(248,252,250,.85),
            rgba(255,255,255,.92)
        );
}

.scene-glow {
    position:absolute;

    width:760px;
    height:760px;

    left:50%;
    top:50%;

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

    border-radius:50%;

    background:
        radial-gradient(
            circle,
            rgba(17,190,119,.08),
            transparent 67%
        );

    filter:blur(18px);
}


.world-network {
    position:absolute;
    inset:0;

    width:100%;
    height:100%;

    opacity:.82;
}


/* MAP */

.map path {
    fill:url(#dots);
    opacity:.28;
}


/* CONNECTIONS */

.links path {
    fill:none;

    stroke:
        rgba(20,184,116,.20);

    stroke-width:1.7;
}

.pulse-links path {
    fill:none;

    stroke:#21c98a;

    stroke-width:2;

    stroke-linecap:round;

    stroke-dasharray:5 15;

    opacity:.45;

    animation:
        dash 7s linear infinite;
}


/* USER NODES */

.node-halo {
    fill:
        rgba(17,190,119,.08);

    stroke:
        rgba(17,190,119,.12);

    stroke-width:1;

    animation:
        nodePulse 3.6s
        ease-in-out
        infinite;
}

.node-bg {
    fill:
        rgba(255,255,255,.92);

    stroke:
        rgba(17,190,119,.17);

    stroke-width:1;
}

.user-node .head,
.user-node .body {
    fill:#55ad86;
}

.user-node:nth-of-type(2n) {
    animation-delay:1.2s;
}


/* SIGNAL DOTS */

.signal-dots circle {
    fill:#24c98a;

    filter:url(#softGlow);

    opacity:.72;

    animation:
        signalPulse
        2.8s
        ease-in-out
        infinite;
}


/* HUD */

.hud {
    position:absolute;

    display:flex;
    gap:7px;

    opacity:.24;
}

.hud-left {
    bottom:48px;
    left:45px;
}

.hud-right {
    top:36px;
    right:50px;
}

.hud i {
    display:block;

    width:7px;
    height:28px;

    border-radius:3px;

    background:
        linear-gradient(
            to top,
            var(--green),
            rgba(17,190,119,.15)
        );
}


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

.login-shell {
    position:relative;

    z-index:10;

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

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

    padding:30px;
}


.login-card {
    width:
        min(
            500px,
            calc(100vw - 40px)
        );

    padding:
        43px 45px 37px;

    background:
        rgba(255,255,255,.955);

    border:
        1px solid
        rgba(80,120,104,.14);

    border-radius:26px;

    box-shadow:
        0 28px 75px
        rgba(28,49,40,.15),
        0 5px 18px
        rgba(28,49,40,.05);

    backdrop-filter:
        blur(18px);
}


/* BRAND */

.brand-header {
    display:flex;

    align-items:center;

    gap:20px;

    margin-bottom:34px;
}


.fa-logo {
    width:58px;
    height:58px;

    flex:0 0 58px;

    display:grid;
    place-items:center;

    color:white;

    font-size:22px;
    font-weight:700;

    border-radius:14px;

    background:
        linear-gradient(
            145deg,
            #12c77a,
            #05a666
        );

    box-shadow:
        0 10px 20px
        rgba(18,199,122,.16);
}


.brand-name {
    margin:0;

    font-size:30px;

    letter-spacing:-1.2px;

    line-height:1;

    font-weight:800;
}


.brand-name span {
    color:var(--green-dark);
}


.brand-subtitle {
    margin-top:8px;

    font-size:14px;

    color:#8a949c;
}


/* WELCOME */

.welcome {
    margin-bottom:28px;
}


.welcome h2 {
    margin:0 0 9px;

    font-size:33px;

    line-height:1.08;

    letter-spacing:-1px;

    font-weight:750;
}


.welcome p {
    margin:0;

    max-width:390px;

    color:#7b858e;

    font-size:15px;

    line-height:1.65;
}


/* FORM */

.form-group {
    margin-bottom:22px;
}


.form-group label {
    display:block;

    margin-bottom:9px;

    font-size:14px;

    font-weight:650;
}


.input-wrap {
    position:relative;
}


.input-wrap input {
    width:100%;
    height:58px;

    padding:
        0 55px 0 50px;

    border:
        1px solid
        #dbe2df;

    border-radius:10px;

    outline:none;

    background:#fff;

    color:#1c252c;

    font-size:15px;

    transition:
        border-color .18s,
        box-shadow .18s;
}


.input-wrap input:focus {
    border-color:
        rgba(17,190,119,.62);

    box-shadow:
        0 0 0 4px
        rgba(17,190,119,.08);
}


.field-icon {
    position:absolute;

    z-index:2;

    left:16px;
    top:50%;

    transform:
        translateY(-50%);

    display:grid;
    place-items:center;

    color:#96a0a7;

    pointer-events:none;
}


.field-icon svg {
    width:21px;
    height:21px;
}


.password-toggle {
    position:absolute;

    right:9px;
    top:50%;

    transform:
        translateY(-50%);

    width:40px;
    height:40px;

    border:0;

    border-radius:8px;

    display:grid;
    place-items:center;

    background:transparent;

    color:#8a959c;

    cursor:pointer;
}


.password-toggle:hover {
    background:#f3f8f5;

    color:var(--green-dark);
}


.password-toggle svg {
    width:21px;
    height:21px;
}


/* LOGIN BUTTON */

.login-button {
    width:100%;
    min-height:57px;

    margin-top:5px;

    border:0;

    border-radius:10px;

    color:white;

    font-size:17px;

    font-weight:750;

    cursor:pointer;

    background:
        linear-gradient(
            90deg,
            #0db96f,
            #16c57a
        );

    box-shadow:
        0 12px 22px
        rgba(15,183,110,.16);

    transition:
        transform .15s,
        box-shadow .15s,
        opacity .15s;
}


.login-button:hover:not(:disabled) {
    transform:
        translateY(-1px);

    box-shadow:
        0 15px 27px
        rgba(15,183,110,.23);
}


.login-button:disabled {
    opacity:.65;

    cursor:not-allowed;
}


/* MESSAGE */

.message {
    display:none;

    margin-bottom:20px;

    padding:12px 14px;

    border-radius:9px;

    font-size:13px;
}


.message.error {
    display:block;

    color:#991b1b;

    background:#fef2f2;

    border:
        1px solid
        #fecaca;
}


.message.success {
    display:block;

    color:#065f46;

    background:#ecfdf5;

    border:
        1px solid
        #a7f3d0;
}


/* SECURITY FOOTER */

.security-note {
    display:flex;

    align-items:flex-start;

    gap:13px;

    margin-top:26px;

    padding-top:23px;

    border-top:
        1px solid
        #edf1ef;

    color:#7c878f;

    font-size:13px;

    line-height:1.55;
}


.security-icon {
    width:24px;

    flex:0 0 24px;

    color:#12bd75;
}


.security-icon svg {
    width:24px;
    height:24px;
}


/* SPINNER */

.spinner {
    display:none;

    width:17px;
    height:17px;

    margin-right:8px;

    vertical-align:-3px;

    border:
        2px solid
        rgba(255,255,255,.35);

    border-top-color:white;

    border-radius:50%;

    animation:
        spin .7s
        linear
        infinite;
}


.login-button.loading .spinner {
    display:inline-block;
}


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

@keyframes dash {

    to {
        stroke-dashoffset:-80;
    }

}


@keyframes nodePulse {

    0%,
    100% {
        transform:scale(.92);
        opacity:.65;
    }

    50% {
        transform:scale(1.12);
        opacity:1;
    }

}


@keyframes signalPulse {

    0%,
    100% {
        opacity:.35;
    }

    50% {
        opacity:1;
    }

}


@keyframes spin {

    to {
        transform:rotate(360deg);
    }

}


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

@media(max-width:600px) {

    body {
        overflow:auto;
    }

    .login-shell {
        padding:18px;
    }

    .login-card {
        padding:
            31px 25px
            28px;
    }

    .brand-header {
        gap:15px;
    }

    .fa-logo {
        width:51px;
        height:51px;

        flex-basis:51px;
    }

    .brand-name {
        font-size:25px;
    }

    .welcome h2 {
        font-size:29px;
    }

    .world-network {
        width:180%;
        left:-40%;
    }

}


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

    * {
        animation:
            none !important;
    }

}