:root {
    --bg: #08090c;
    --panel: #101217;
    --panel-border: #242832;

    --text: #f2f3f5;
    --muted: #858b98;

    --accent: #ffffff;
    --accent-hover: #e5e7eb;

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



}

/* Public gateway */
.gateway {
    min-height: 100vh;
    padding: 28px 5vw;
    background: #efeee9;
    color: #101316;
    font-family: 'Arial Narrow', 'Barlow Condensed', sans-serif;
    background-image: linear-gradient(90deg, rgba(16, 19, 22, .06) 1px, transparent 1px), linear-gradient(rgba(16, 19, 22, .06) 1px, transparent 1px);
    background-size: 32px 32px
}

.gateway-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #101316;
    padding-bottom: 20px
}

.gateway .brand {
    color: #101316;
    text-decoration: none;
    font-size: 20px;
    font-weight: 800;
    letter-spacing: .1em
}

.gateway .brand-mark {
    display: inline-grid;
    place-items: center;
    width: 38px;
    height: 38px;
    margin-right: 10px;
    background: #101316;
    color: #efeee9;
    font-size: 12px
}

.gateway nav {
    display: flex;
    align-items: center;
    gap: 24px
}

.gateway nav a {
    color: #101316;
    text-decoration: none;
    font: 700 11px/1 monospace;
    letter-spacing: .08em
}

.gateway nav .login-link {
    padding: 12px 16px;
    background: #ec3b2e;
    color: #fff
}

.gateway-hero {
    min-height: calc(100vh - 170px);
    display: flex;
    flex-direction: column;
    justify-content: center;
    max-width: 940px;
    padding: 76px 0
}

.eyebrow {
    margin: 0 0 18px;
    font: 700 11px/1 monospace;
    letter-spacing: .13em;
    color: #ec3b2e
}

.gateway-hero h1 {
    max-width: 800px;
    margin: 0;

    text-transform: uppercase;
}

.gateway-hero h1 em {
    font-style: normal;
    color: #ec3b2e
}

.gateway-copy {
    max-width: 510px;
    margin: 36px 0;
    font: 400 17px/1.5 monospace;
    color: #404346
}

.gateway-action {
    display: inline-flex;
    align-self: flex-start;
    gap: 32px;
    padding: 16px 20px;
    background: #101316;
    color: #efeee9;
    text-decoration: none;
    font: 700 11px monospace;
    letter-spacing: .08em
}

.gateway-strip {
    display: grid;
    grid-template-columns: 190px 1fr auto;
    gap: 24px;
    align-items: center;
    border-top: 1px solid #101316;
    padding: 18px 0;
    font: 11px monospace;
    letter-spacing: .04em
}

.gateway-strip p {
    margin: 0;
    font-weight: 700
}

.gateway-strip span {
    color: #545653
}

.gateway-strip a {
    color: #101316;
    text-decoration: none;
    font-weight: 700
}

@media(max-width:620px) {
    .gateway {
        padding: 20px
    }

    .gateway nav a:not(.login-link) {
        display: none
    }

    .gateway-hero {
        min-height: calc(100vh - 142px);
        padding: 62px 0
    }

    .gateway-copy {
        font-size: 14px
    }

    .gateway-strip {
        grid-template-columns: 1fr;
        gap: 9px
    }

    .gateway-strip a {
        margin-top: 5px
    }
}

* {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    width: 100%;
    min-height: 100%;
    font-family:
        Inter,
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;

    background: var(--bg);
    color: var(--text);
}

body {
    min-height: 100vh;
}

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

.access-page {
    min-height: 100vh;

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

    padding: 24px;

    background:
        radial-gradient(circle at 50% 0%,
            rgba(255, 255, 255, 0.045),
            transparent 45%),
        var(--bg);
}

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

.access-card {
    width: 100%;
    max-width: 440px;

    padding: 38px;

    background: rgba(16, 18, 23, 0.96);

    border: 1px solid var(--panel-border);
    border-radius: 14px;

    box-shadow:
        0 25px 80px rgba(0, 0, 0, 0.45),
        0 0 0 1px rgba(255, 255, 255, 0.015);

    animation: card-enter 0.35s ease-out;
}

/* =========================
   BRAND
========================= */

.brand {
    display: flex;
    align-items: center;
    gap: 14px;
}

.brand-mark {
    width: 46px;
    height: 46px;

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

    border-radius: 10px;

    background: #ffffff;
    color: #08090c;

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

    letter-spacing: -1px;
}

.brand h1 {
    margin: 0;

    font-size: 24px;
    line-height: 1;

    font-weight: 800;
    letter-spacing: 1px;
}

.brand h1 span {
    opacity: 0.45;
}

.brand p {
    margin: 6px 0 0;

    color: var(--muted);

    font-size: 12px;
    letter-spacing: 0.4px;
}

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

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

    margin: 30px 0;
    background: var(--panel-border);
}

/* =========================
   INTRO
========================= */

.intro h2 {
    margin: 0;

    font-size: 21px;
    font-weight: 700;
}

.intro p {
    margin: 8px 0 0;

    color: var(--muted);

    font-size: 14px;
    line-height: 1.5;
}

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

#login-form {
    margin-top: 28px;
}

.field {
    margin-bottom: 18px;
}

.field label {
    display: block;

    margin-bottom: 8px;

    font-size: 12px;
    font-weight: 600;

    color: #b9bdc7;

    text-transform: uppercase;
    letter-spacing: 0.6px;
}

.field input {
    width: 100%;
    height: 46px;

    padding: 0 14px;

    border: 1px solid var(--panel-border);
    border-radius: 8px;

    outline: none;

    background: #0b0d11;
    color: var(--text);

    font-size: 14px;

    transition:
        border-color 0.15s ease,
        box-shadow 0.15s ease,
        background 0.15s ease;
}

.field input::placeholder {
    color: #555b67;
}

.field input:hover {
    border-color: #353b47;
}

.field input:focus {
    border-color: #626976;

    background: #0d0f14;

    box-shadow:
        0 0 0 3px rgba(255, 255, 255, 0.05);
}

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

#login-button {
    width: 100%;
    height: 46px;

    margin-top: 8px;

    border: 0;
    border-radius: 8px;

    background: var(--accent);
    color: #08090c;

    cursor: pointer;

    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.8px;

    transition:
        background 0.15s ease,
        transform 0.1s ease,
        opacity 0.15s ease;
}

#login-button:hover {
    background: var(--accent-hover);
}

#login-button:active {
    transform: translateY(1px);
}

#login-button:disabled {
    cursor: wait;
    opacity: 0.55;
}

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

.status {
    margin-top: 16px;

    padding: 11px 13px;

    border-radius: 7px;

    font-size: 13px;
    line-height: 1.4;
}

.status.hidden {
    display: none;
}

.status.error {
    background: rgba(239, 68, 68, 0.08);
    border: 1px solid rgba(239, 68, 68, 0.22);
    color: #fca5a5;
}

.status.success {
    background: rgba(34, 197, 94, 0.08);
    border: 1px solid rgba(34, 197, 94, 0.22);
    color: #86efac;
}

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

footer {
    margin-top: 30px;

    text-align: center;

    color: #555b67;

    font-size: 11px;
    letter-spacing: 0.3px;
}

/* =========================
   ANIMATION
========================= */

@keyframes card-enter {
    from {
        opacity: 0;
        transform: translateY(8px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

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

@media (max-width: 520px) {
    .access-page {
        padding: 16px;
    }

    .access-card {
        padding: 28px 22px;
    }

    .brand h1 {
        font-size: 21px;
    }
}

.gateway #account-navigation {
    display: flex;
    align-items: center;
    gap: 12px;
}

.gateway .organization-name {
    font: 700 11px/1 monospace;
    letter-spacing: .08em;
}

.gateway .logout-link {
    border: 0;
    padding: 0;
    background: transparent;
    color: #101316;
    cursor: pointer;
    font: 700 11px/1 monospace;
    letter-spacing: .08em;
}

.gateway {
    min-height: 100vh;
    padding: 28px 5vw;
    background: #efeee9;
    color: #101316;
    font-family: 'Arial Narrow', 'Barlow Condensed', sans-serif;
    background-image: linear-gradient(90deg, rgba(16, 19, 22, .06) 1px, transparent 1px), linear-gradient(rgba(16, 19, 22, .06) 1px, transparent 1px);
    background-size: 32px 32px
}

.gateway-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #101316;
    padding-bottom: 20px
}

.gateway .brand {
    color: #101316;
    text-decoration: none;
    font-size: 20px;
    font-weight: 800;
    letter-spacing: .1em
}

.gateway .brand-mark {
    display: inline-grid;
    place-items: center;
    width: 38px;
    height: 38px;
    margin-right: 10px;
    background: #101316;
    color: #efeee9;
    font-size: 12px
}

.gateway nav {
    display: flex;
    align-items: center;
    gap: 24px
}

.gateway nav a {
    color: #101316;
    text-decoration: none;
    font: 700 11px/1 monospace;
    letter-spacing: .08em
}

.gateway nav .login-link {
    padding: 12px 16px;
    background: #ec3b2e;
    color: #fff
}

.gateway-hero {
    min-height: calc(100vh - 170px);
    display: flex;
    flex-direction: column;
    justify-content: center;
    max-width: 940px;
    padding: 76px 0
}

.eyebrow {
    margin: 0 0 18px;
    font: 700 11px/1 monospace;
    letter-spacing: .13em;
    color: #ec3b2e
}

.gateway-hero h1 {
    max-width: 800px;
    margin: 0;
    font-size: clamp(62px, 9vw, 132px);
    line-height: .82;
    letter-spacing: 0;
    text-transform: uppercase
}

.gateway-hero h1 em {
    font-style: normal;
    color: #ec3b2e
}

.gateway-copy {
    max-width: 510px;
    margin: 36px 0;
    font: 400 17px/1.5 monospace;
    color: #404346
}

.gateway-action {
    display: inline-flex;
    align-self: flex-start;
    gap: 32px;
    padding: 16px 20px;
    background: #101316;
    color: #efeee9;
    text-decoration: none;
    font: 700 11px monospace;
    letter-spacing: .08em
}

.gateway-strip {
    display: grid;
    grid-template-columns: 190px 1fr auto;
    gap: 24px;
    align-items: center;
    border-top: 1px solid #101316;
    padding: 18px 0;
    font: 11px monospace;
    letter-spacing: .04em
}

.gateway-strip p {
    margin: 0;
    font-weight: 700
}

.gateway-strip span {
    color: #545653
}

.gateway-strip a {
    color: #101316;
    text-decoration: none;
    font-weight: 700
}

@media(max-width:620px) {
    .gateway {
        padding: 20px
    }

    .gateway nav>a:not(.login-link) {
        display: none
    }

    .gateway-hero {
        min-height: calc(100vh - 142px);
        padding: 62px 0
    }

    .gateway-copy {
        font-size: 14px
    }

    .gateway-strip {
        grid-template-columns: 1fr;
        gap: 9px
    }

    .gateway-strip a {
        margin-top: 5px
    }
}