* {
    box-sizing: border-box;
}

body {
    min-height: 100vh;
    margin: 0;
    padding: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: Inter, Arial, Helvetica, sans-serif;
    color: #f8fafc;
    background: #111827;
}

.auth-box {
    width: min(100%, 430px);
    padding: 34px;
    border: 1px solid #374151;
    border-radius: 12px;
    background: #1f2937;
    box-shadow: 0 18px 45px rgba(0, 0, 0, .35);
}

.auth-box.wide {
    width: min(100%, 500px);
}

.auth-title {
    margin: 0 0 8px;
    text-align: center;
    font-size: 28px;
}

.auth-subtitle {
    margin: 0 0 26px;
    text-align: center;
    color: #9ca3af;
    line-height: 1.45;
}

.auth-field {
    margin-bottom: 18px;
}

.auth-field label {
    display: block;
    margin-bottom: 7px;
    color: #d1d5db;
    font-size: 14px;
}

.auth-field input {
    width: 100%;
    padding: 11px 12px;
    border: 1px solid #374151;
    border-radius: 7px;
    outline: none;
    color: #fff;
    background: #111827;
    font-size: 15px;
}

.auth-field input:focus {
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, .14);
}

.auth-field .auth-code {
    text-align: center;
    letter-spacing: .35em;
    font-size: 24px;
    font-variant-numeric: tabular-nums;
}

.auth-hint {
    display: block;
    margin-top: 6px;
    color: #9ca3af;
    font-size: 12px;
}

.auth-button {
    width: 100%;
    padding: 12px;
    border: 0;
    border-radius: 7px;
    color: #fff;
    background: #2563eb;
    cursor: pointer;
    font-size: 15px;
    font-weight: 600;
}

.auth-button:hover {
    background: #1d4ed8;
}

.auth-message {
    margin-bottom: 20px;
    padding: 11px 12px;
    border-radius: 7px;
    line-height: 1.45;
}

.auth-message.error {
    color: #fecaca;
    background: rgba(127, 29, 29, .75);
}

.auth-message.success {
    color: #bbf7d0;
    background: rgba(20, 83, 45, .75);
}

.auth-message.warning {
    color: #fde68a;
    background: rgba(120, 53, 15, .78);
    border: 1px solid rgba(245, 158, 11, .55);
}

.auth-links {
    margin-top: 20px;
    text-align: center;
    font-size: 14px;
}

.auth-links a {
    color: #93c5fd;
    text-decoration: none;
}

.auth-links a:hover {
    text-decoration: underline;
}

.auth-link-button {
    padding: 0;
    border: 0;
    color: #93c5fd;
    background: transparent;
    cursor: pointer;
    font: inherit;
}

.auth-link-button:hover {
    text-decoration: underline;
}

/* CITYGATE AUTH GRADIENT CARD */

body {
    position: relative;
    overflow-x: hidden;
    background:
        radial-gradient(
            circle at 18% 12%,
            rgba(37, 99, 235, .10),
            transparent 34%
        ),
        radial-gradient(
            circle at 84% 88%,
            rgba(139, 92, 246, .09),
            transparent 35%
        ),
        #111827;
}

body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
        linear-gradient(
            135deg,
            rgba(34, 211, 238, .025),
            transparent 36%,
            rgba(139, 92, 246, .025)
        );
}

.auth-box {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    border: 1px solid transparent;
    background:
        linear-gradient(
            #1f2937,
            #1f2937
        ) padding-box,
        linear-gradient(
            115deg,
            #22d3ee,
            #3b82f6 48%,
            #8b5cf6
        ) border-box;
    box-shadow:
        0 22px 60px rgba(0, 0, 0, .42),
        0 0 32px rgba(59, 130, 246, .08),
        inset 0 1px 0 rgba(255, 255, 255, .035);
}

.auth-box::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
        radial-gradient(
            circle at 4% 2%,
            rgba(34, 211, 238, .12),
            transparent 36%
        ),
        radial-gradient(
            circle at 100% 100%,
            rgba(139, 92, 246, .13),
            transparent 42%
        );
}

.auth-box::after {
    content: "";
    position: absolute;
    inset: 1px;
    z-index: -1;
    pointer-events: none;
    border-radius: 10px;
    box-shadow:
        inset 0 0 30px rgba(59, 130, 246, .035);
}

.auth-title {
    position: relative;
    color: #f8fafc;
    text-shadow:
        0 0 22px rgba(59, 130, 246, .10);
}

.auth-title::after {
    content: "";
    display: block;
    width: 52px;
    height: 2px;
    margin: 10px auto 0;
    border-radius: 999px;
    background:
        linear-gradient(
            90deg,
            #22d3ee,
            #3b82f6,
            #8b5cf6
        );
    opacity: .86;
}

.auth-subtitle {
    margin-top: 12px;
}

.auth-field input {
    transition:
        border-color .18s ease,
        box-shadow .18s ease,
        background .18s ease;
}

.auth-field input:hover {
    border-color: #475569;
}

.auth-field input:focus {
    border-color: #3b82f6;
    background: color-mix(
        in srgb,
        #111827 94%,
        #2563eb
    );
    box-shadow:
        0 0 0 3px rgba(59, 130, 246, .14),
        0 0 18px rgba(59, 130, 246, .06);
}

.auth-button {
    position: relative;
    overflow: hidden;
    background:
        linear-gradient(
            100deg,
            #2563eb,
            #3b82f6 52%,
            #2563eb
        );
    background-size: 180% 100%;
    box-shadow:
        0 8px 20px rgba(37, 99, 235, .18);
    transition:
        background-position .22s ease,
        box-shadow .18s ease,
        transform .18s ease;
}

.auth-button:hover {
    background-position: 100% 0;
    box-shadow:
        0 10px 25px rgba(37, 99, 235, .25);
    transform: translateY(-1px);
}

.auth-button:active {
    transform: translateY(0);
}

.auth-links a,
.auth-link-button {
    transition:
        color .18s ease,
        text-shadow .18s ease;
}

.auth-links a:hover,
.auth-link-button:hover {
    color: #bfdbfe;
    text-shadow:
        0 0 12px rgba(59, 130, 246, .22);
}

@media (max-width: 520px) {
    body {
        padding: 14px;
    }

    .auth-box {
        padding: 28px 24px;
        border-radius: 11px;
    }

    .auth-box::after {
        border-radius: 9px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .auth-button,
    .auth-field input,
    .auth-links a,
    .auth-link-button {
        transition: none;
    }
}
\n\n/* CITYGATE INVITE REGISTRATION */\n\n.auth-brand-mark {\n    width: 48px;\n    height: 48px;\n    margin: 0 auto 18px;\n    display: grid;\n    place-items: center;\n    border: 1px solid rgba(96, 165, 250, .45);\n    border-radius: 14px;\n    color: #dbeafe;\n    background: linear-gradient(135deg, rgba(34, 211, 238, .16), rgba(124, 58, 237, .20));\n    box-shadow: 0 10px 28px rgba(37, 99, 235, .16);\n    font-weight: 700;\n    letter-spacing: .04em;\n}\n\n.auth-links-stack {\n    display: grid;\n    gap: 10px;\n}\n\n.invite-code-input {\n    text-transform: uppercase;\n    letter-spacing: .09em;\n    font-variant-numeric: tabular-nums;\n}\n\n.invite-state {\n    width: fit-content;\n    margin: 0 auto 16px;\n    padding: 7px 11px;\n    border: 1px solid;\n    border-radius: 999px;\n    font-size: 12px;\n    font-weight: 600;\n}\n\n.invite-state-valid {\n    color: #bbf7d0;\n    border-color: rgba(34, 197, 94, .42);\n    background: rgba(22, 101, 52, .25);\n}\n\n.invite-state-invalid {\n    color: #fecaca;\n    border-color: rgba(239, 68, 68, .4);\n    background: rgba(127, 29, 29, .22);\n}\n\n.invite-summary {\n    display: grid;\n    gap: 1px;\n    margin: 0 0 16px;\n    overflow: hidden;\n    border: 1px solid #374151;\n    border-radius: 9px;\n    background: #374151;\n}\n\n.invite-summary > div {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    gap: 18px;\n    padding: 11px 13px;\n    background: rgba(17, 24, 39, .92);\n}\n\n.invite-summary span {\n    color: #9ca3af;\n    font-size: 12px;\n}\n\n.invite-summary strong {\n    color: #f3f4f6;\n    text-align: right;\n    font-size: 13px;\n    font-weight: 600;\n}\n\n.invite-rights-note {\n    margin: 0 0 20px;\n    padding: 12px 13px;\n    border: 1px solid rgba(59, 130, 246, .28);\n    border-radius: 8px;\n    color: #bfdbfe;\n    background: rgba(30, 64, 175, .12);\n    font-size: 12px;\n    line-height: 1.55;\n}\n\n.auth-button-link {\n    display: block;\n    text-align: center;\n    text-decoration: none;\n}\n\n@media (max-width: 520px) {\n    .invite-summary > div {\n        align-items: flex-start;\n        flex-direction: column;\n        gap: 4px;\n    }\n\n    .invite-summary strong {\n        text-align: left;\n    }\n}\n