:root {
            --login-bg: #0d0f12;
            --login-surface: #17191d;
            --login-surface-2: #1f2227;
            --login-field: #131519;
            --login-border: #343941;
            --login-border-strong: #4a505b;
            --login-text: #eef2f7;
            --login-muted: #9ea7b5;
            --login-soft: #737d8c;
            --login-accent: #35a9ff;
            --login-accent-dark: #087ebd;
            --login-success: #47d7a1;
            --login-danger: #ff6685;
            --login-radius: 6px;
        }

        * {
            box-sizing: border-box;
        }

        html {
            min-height: 100%;
            color-scheme: dark;
        }

        body {
            margin: 0;
            min-width: 320px;
            min-height: 100vh;
            min-height: 100svh;
            color: var(--login-text);
            background:
                radial-gradient(circle at 14% 18%, rgba(53, 169, 255, 0.08), transparent 27rem),
                radial-gradient(circle at 88% 82%, rgba(58, 160, 255, 0.07), transparent 28rem),
                var(--login-bg);
            font-family: "Trebuchet MS", "Avenir Next", sans-serif;
        }

        body::before {
            position: fixed;
            inset: 0;
            z-index: -1;
            content: "";
            pointer-events: none;
            opacity: 0.28;
            background-image:
                linear-gradient(rgba(255, 255, 255, 0.025) 1px, transparent 1px),
                linear-gradient(90deg, rgba(255, 255, 255, 0.025) 1px, transparent 1px);
            background-size: 42px 42px;
            mask-image: linear-gradient(to bottom, black, transparent 88%);
        }

        button,
        input {
            font: inherit;
        }

        a {
            color: inherit;
        }

        .login-page {
            display: grid;
            min-height: 100vh;
            min-height: 100svh;
            place-items: center;
            padding: 32px;
        }

        .login-shell {
            position: relative;
            display: grid;
            grid-template-columns: minmax(0, 1.08fr) minmax(390px, 0.92fr);
            width: min(1040px, 100%);
            min-height: 650px;
            overflow: hidden;
            border: 1px solid var(--login-border);
            border-radius: var(--login-radius);
            background: var(--login-surface);
            box-shadow: 0 32px 90px rgba(0, 0, 0, 0.46);
        }

        .login-shell::before {
            position: absolute;
            z-index: 3;
            top: 0;
            right: 0;
            left: 0;
            height: 3px;
            content: "";
            background: linear-gradient(90deg, var(--login-accent), var(--login-accent-dark) 48%, transparent 82%);
        }

        .login-story {
            position: relative;
            display: flex;
            overflow: hidden;
            flex-direction: column;
            justify-content: space-between;
            padding: 48px 52px;
            border-right: 1px solid var(--login-border);
            background:
                radial-gradient(circle at 17% 10%, rgba(53, 169, 255, 0.13), transparent 22rem),
                linear-gradient(145deg, #1d2025 0%, #15171b 72%);
        }

        .login-story::after {
            position: absolute;
            right: -95px;
            bottom: -115px;
            width: 340px;
            height: 340px;
            border: 1px solid rgba(53, 169, 255, 0.14);
            border-radius: 50%;
            content: "";
            box-shadow:
                inset 0 0 0 42px rgba(53, 169, 255, 0.025),
                inset 0 0 0 84px rgba(53, 169, 255, 0.018);
        }

        .brand {
            position: relative;
            z-index: 1;
            display: inline-flex;
            align-items: center;
            align-self: flex-start;
            gap: 10px;
            color: var(--login-text);
            text-decoration: none;
            letter-spacing: -0.06em;
            font-size: 24px;
            font-weight: 800;
        }

        .brand-mark {
            position: relative;
            width: 32px;
            height: 32px;
            border: 2px solid var(--login-accent);
            border-radius: 50%;
            box-shadow:
                inset 0 0 0 7px rgba(53, 169, 255, 0.1),
                0 0 22px rgba(53, 169, 255, 0.23);
        }

        .brand-mark::after {
            position: absolute;
            inset: 11px;
            border-radius: 50%;
            background: var(--login-accent);
            content: "";
        }

        .brand-accent {
            color: var(--login-accent);
        }

        .story-content {
            position: relative;
            z-index: 1;
            max-width: 490px;
            margin: 54px 0 42px;
        }

        .archive-label {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            margin-bottom: 22px;
            color: var(--login-accent);
            letter-spacing: 0.12em;
            font-family: "Courier New", monospace;
            font-size: 11px;
            font-weight: 700;
            text-transform: uppercase;
        }

        .archive-label::before {
            width: 7px;
            height: 7px;
            border-radius: 50%;
            background: var(--login-accent);
            content: "";
            box-shadow: 0 0 12px rgba(53, 169, 255, 0.75);
        }

        .story-content h1 {
            max-width: 470px;
            margin: 0;
            color: #ffffff;
            letter-spacing: -0.045em;
            font-size: clamp(36px, 5vw, 58px);
            line-height: 0.98;
        }

        .story-content > p {
            max-width: 430px;
            margin: 24px 0 0;
            color: var(--login-muted);
            font-size: 16px;
            line-height: 1.65;
        }

        .archive-preview {
            display: grid;
            gap: 1px;
            overflow: hidden;
            margin-top: 34px;
            border: 1px solid var(--login-border);
            border-radius: var(--login-radius);
            background: var(--login-border);
        }

        .archive-row {
            display: grid;
            grid-template-columns: 9px minmax(0, 1fr) auto;
            align-items: center;
            gap: 12px;
            min-height: 48px;
            padding: 0 15px;
            background: rgba(20, 22, 26, 0.96);
        }

        .archive-dot {
            width: 6px;
            height: 6px;
            border-radius: 50%;
            background: #3aa0ff;
            box-shadow: 0 0 10px rgba(58, 160, 255, 0.48);
        }

        .archive-row:nth-child(2) .archive-dot {
            background: #ff4f75;
            box-shadow: 0 0 10px rgba(255, 79, 117, 0.42);
        }

        .archive-row:nth-child(3) .archive-dot {
            background: var(--login-accent);
            box-shadow: 0 0 10px rgba(53, 169, 255, 0.42);
        }

        .archive-name {
            overflow: hidden;
            color: #c8ced8;
            font-family: "Courier New", monospace;
            font-size: 11px;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .archive-type {
            color: var(--login-soft);
            letter-spacing: 0.08em;
            font-family: "Courier New", monospace;
            font-size: 9px;
            text-transform: uppercase;
        }

        .story-note {
            position: relative;
            z-index: 1;
            display: flex;
            align-items: center;
            gap: 10px;
            color: var(--login-soft);
            font-size: 12px;
        }

        .story-note svg {
            width: 17px;
            height: 17px;
            color: var(--login-accent);
        }

        .login-panel {
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 48px;
            background: #1b1d21;
        }

        .login-form-wrap {
            width: min(100%, 390px);
        }

        .mobile-brand {
            display: none;
            margin-bottom: 34px;
        }

        .login-heading {
            margin-bottom: 30px;
        }

        .login-heading h2 {
            margin: 0;
            color: #ffffff;
            letter-spacing: -0.035em;
            font-size: 31px;
            line-height: 1.12;
        }

        .login-heading p {
            margin: 10px 0 0;
            color: var(--login-muted);
            font-size: 14px;
            line-height: 1.55;
        }

        .error-message,
        .auth-message {
            display: flex;
            align-items: flex-start;
            gap: 10px;
            margin: 0 0 20px;
            padding: 12px 14px;
            border: 1px solid rgba(255, 102, 133, 0.4);
            border-radius: var(--login-radius);
            color: #ffb0c0;
            background: rgba(255, 79, 117, 0.09);
            font-size: 13px;
            line-height: 1.45;
        }

        .error-message svg,
        .auth-message svg {
            flex: 0 0 auto;
            width: 17px;
            height: 17px;
            margin-top: 1px;
            color: var(--login-danger);
        }

        .auth-message.is-success {
            border-color: rgba(71, 215, 161, 0.4);
            color: #a8f1d5;
            background: rgba(71, 215, 161, 0.09);
        }

        .auth-message.is-success svg {
            color: var(--login-success);
        }

        .auth-message.is-error {
            border-color: rgba(255, 102, 133, 0.4);
            color: #ffb0c0;
            background: rgba(255, 79, 117, 0.09);
        }

        .resend-activation-form {
            margin: -7px 0 20px;
        }

        .resend-activation-button {
            display: inline-flex;
            align-items: center;
            gap: 7px;
            padding: 0;
            border: 0;
            color: var(--login-accent);
            background: transparent;
            cursor: pointer;
            font-size: 12px;
            font-weight: 700;
            text-decoration: none;
        }

        .resend-activation-button:hover {
            color: #83caff;
            text-decoration: underline;
        }

        .resend-activation-button:focus-visible {
            border-radius: var(--login-radius);
            outline: 2px solid rgba(53, 169, 255, 0.75);
            outline-offset: 4px;
        }

        .field {
            display: grid;
            gap: 8px;
            margin-bottom: 18px;
        }

        .field-label {
            color: #d8dde6;
            font-size: 12px;
            font-weight: 700;
        }

        .input-shell {
            position: relative;
            display: flex;
            align-items: center;
            height: 50px;
            border: 1px solid var(--login-border);
            border-radius: var(--login-radius);
            background: var(--login-field);
            transition: border-color 160ms ease, box-shadow 160ms ease, background 160ms ease;
        }

        .input-shell:focus-within {
            border-color: rgba(53, 169, 255, 0.78);
            background: #111317;
            box-shadow: 0 0 0 3px rgba(53, 169, 255, 0.09);
        }

        .field-icon {
            flex: 0 0 auto;
            width: 18px;
            height: 18px;
            margin-left: 15px;
            color: var(--login-soft);
        }

        .input-shell:focus-within .field-icon {
            color: var(--login-accent);
        }

        .input-shell input {
            width: 100%;
            height: 100%;
            min-width: 0;
            border: 0;
            outline: 0;
            padding: 0 15px 0 12px;
            color: var(--login-text);
            background: transparent;
            font-size: 14px;
        }

        .input-shell.has-toggle input {
            padding-right: 50px;
        }

        .input-shell input::placeholder {
            color: #626b78;
        }

        .input-shell input:-webkit-autofill,
        .input-shell input:-webkit-autofill:hover,
        .input-shell input:-webkit-autofill:focus {
            -webkit-text-fill-color: var(--login-text);
            box-shadow: 0 0 0 1000px var(--login-field) inset;
            transition: background-color 9999s ease-out;
        }

        .password-toggle {
            position: absolute;
            right: 7px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 36px;
            height: 36px;
            padding: 0;
            border: 0;
            border-radius: var(--login-radius);
            color: var(--login-muted);
            background: transparent;
            cursor: pointer;
        }

        .password-toggle:hover,
        .password-toggle:focus-visible {
            outline: 0;
            color: var(--login-accent);
            background: rgba(255, 255, 255, 0.055);
        }

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

        .password-toggle .eye-off,
        .password-toggle[aria-pressed="true"] .eye-on {
            display: none;
        }

        .password-toggle[aria-pressed="true"] .eye-off {
            display: block;
        }

        .form-options {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 16px;
            margin: 2px 0 22px;
        }

        .remember-option {
            display: inline-flex;
            align-items: center;
            gap: 9px;
            color: var(--login-muted);
            font-size: 12px;
            cursor: pointer;
        }

        .remember-option input {
            width: 16px;
            height: 16px;
            margin: 0;
            accent-color: var(--login-accent);
        }

        .text-link {
            color: var(--login-accent);
            font-size: 12px;
            font-weight: 700;
            text-decoration: none;
        }

        .text-link:hover {
            text-decoration: underline;
            text-underline-offset: 3px;
        }

        .captcha-frame {
            min-height: 78px;
            margin-bottom: 20px;
            overflow: hidden;
            border-radius: var(--login-radius);
        }

        .login-button {
            display: inline-flex;
            align-items: center;
            justify-content: space-between;
            width: 100%;
            height: 50px;
            padding: 0 17px 0 19px;
            border: 1px solid #53b7ff;
            border-radius: var(--login-radius);
            color: #17191d;
            background: var(--login-accent);
            cursor: pointer;
            font-weight: 800;
            transition: background 160ms ease, border-color 160ms ease, transform 160ms ease;
        }

        .login-button:hover {
            border-color: #8aceff;
            background: #69bfff;
            transform: translateY(-1px);
        }

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

        .login-button:focus-visible {
            outline: 3px solid rgba(53, 169, 255, 0.24);
            outline-offset: 3px;
        }

        .login-button svg {
            width: 18px;
            height: 18px;
        }

        .signup-line {
            margin: 26px 0 0;
            padding-top: 24px;
            border-top: 1px solid var(--login-border);
            color: var(--login-muted);
            text-align: center;
            font-size: 13px;
        }

        .signup-line a {
            margin-left: 4px;
            color: var(--login-text);
            font-weight: 700;
            text-decoration: none;
        }

        .signup-line a:hover {
            color: var(--login-accent);
        }

        @media (max-width: 860px) {
            .login-page {
                align-items: start;
                padding: 22px;
            }

            .login-shell {
                grid-template-columns: 1fr;
                min-height: auto;
            }

            .login-story {
                min-height: 252px;
                padding: 32px 38px;
                border-right: 0;
                border-bottom: 1px solid var(--login-border);
            }

            .story-content {
                margin: 36px 0 4px;
            }

            .story-content h1 {
                max-width: 620px;
                font-size: clamp(34px, 8vw, 48px);
            }

            .story-content > p {
                max-width: 620px;
                margin-top: 16px;
            }

            .archive-preview,
            .story-note {
                display: none;
            }

            .login-panel {
                padding: 42px 38px 48px;
            }
        }

        @media (max-width: 560px) {
            body::before {
                display: none;
            }

            .login-page {
                display: block;
                padding: 0;
            }

            .login-shell {
                width: 100%;
                min-height: 100vh;
                min-height: 100svh;
                border: 0;
                border-radius: 0;
                box-shadow: none;
            }

            .login-story {
                min-height: 208px;
                padding: 27px 22px 30px;
            }

            .brand {
                font-size: 21px;
            }

            .brand-mark {
                width: 29px;
                height: 29px;
            }

            .brand-mark::after {
                inset: 10px;
            }

            .story-content {
                margin: 29px 0 0;
            }

            .archive-label {
                margin-bottom: 14px;
            }

            .story-content h1 {
                font-size: clamp(31px, 10vw, 40px);
                line-height: 1.02;
            }

            .story-content > p {
                display: none;
            }

            .login-panel {
                align-items: flex-start;
                padding: 30px 22px 40px;
            }

            .login-heading {
                margin-bottom: 25px;
            }

            .login-heading h2 {
                font-size: 27px;
            }

            .form-options {
                align-items: flex-start;
                flex-direction: column;
                gap: 13px;
            }
        }

        @media (max-width: 360px) {
            .g-recaptcha {
                width: 304px;
                transform: scale(0.88);
                transform-origin: left top;
            }

            .captcha-frame {
                min-height: 69px;
                margin-bottom: 14px;
            }
        }
    
:root {
    --auth-shell-width: 1080px;
    --auth-shell-height: 720px;
    --auth-form-width: 410px;
    --auth-border: #343941;
}

.auth-page {
    padding: 32px;
}

.auth-shell {
    grid-template-columns: minmax(0, 1.02fr) minmax(420px, 0.98fr);
    width: min(var(--auth-shell-width), 100%);
    height: var(--auth-shell-height);
    min-height: var(--auth-shell-height);
}

.auth-story {
    min-width: 0;
    padding: 48px 52px;
}

.auth-story-content {
    max-width: 470px;
    margin: 46px 0 34px;
}

.auth-story-content h1 {
    max-width: 470px;
    font-size: clamp(36px, 5vw, 56px);
    line-height: 1;
}

.auth-story-content > p {
    max-width: 430px;
    margin-top: 21px;
    font-size: 15px;
    line-height: 1.65;
}

.auth-story-kicker {
    margin-bottom: 20px;
}

.auth-panel {
    min-width: 0;
    align-items: stretch;
    padding: 48px;
    overflow-y: auto;
    scrollbar-color: #464c55 #1b1d21;
    scrollbar-width: thin;
}

.auth-form {
    width: min(100%, var(--auth-form-width));
    margin: auto 0;
}

.auth-heading {
    margin-bottom: 26px;
}

.auth-heading h2 {
    font-size: 31px;
    line-height: 1.12;
}

.auth-heading p {
    margin-top: 9px;
    font-size: 14px;
    line-height: 1.5;
}

@media (max-width: 900px) {
    .auth-page {
        align-items: start;
        padding: 22px;
    }

    .auth-shell {
        grid-template-columns: 1fr;
        width: min(var(--auth-shell-width), 100%);
        height: auto;
        min-height: 0;
    }

    .auth-story {
        min-height: 252px;
        padding: 32px 38px;
        border-right: 0;
        border-bottom: 1px solid var(--auth-border);
    }

    .auth-story-content {
        max-width: none;
        margin: 34px 0 4px;
    }

    .auth-story-content h1 {
        max-width: 650px;
        font-size: clamp(34px, 8vw, 48px);
    }

    .auth-story-content > p {
        max-width: 650px;
        margin-top: 16px;
    }

    .auth-panel {
        min-height: 0;
        padding: 42px 38px 48px;
        overflow: visible;
    }

    .auth-form {
        margin: 0;
    }
}

@media (max-width: 560px) {
    .auth-page {
        display: block;
        padding: 0;
    }

    .auth-shell {
        width: 100%;
        height: auto;
        min-height: 100vh;
        min-height: 100svh;
        border: 0;
        border-radius: 0;
        box-shadow: none;
    }

    .auth-story {
        min-height: 208px;
        padding: 27px 22px 30px;
    }

    .auth-story-content {
        margin: 29px 0 0;
    }

    .auth-story-content h1 {
        font-size: clamp(31px, 10vw, 40px);
        line-height: 1.02;
    }

    .auth-story-content > p {
        display: none;
    }

    .auth-story-kicker {
        margin-bottom: 14px;
    }

    .auth-panel {
        align-items: flex-start;
        padding: 30px 22px 40px;
    }

    .auth-form {
        width: 100%;
    }

    .auth-heading {
        margin-bottom: 24px;
    }

    .auth-heading h2 {
        font-size: 27px;
    }
}

:root { --auth-shell-height: 720px; }
.brand { gap:12px; letter-spacing:0; }
.club-brand-copy { display:grid; gap:2px; }
.club-brand-copy small { font-size:10px; letter-spacing:.19em; color:#aeb8c7; }
.club-brand-copy strong { font-size:24px; letter-spacing:-.025em; color:var(--login-accent); }
.archive-name { font-family:inherit; font-size:12px; }
.archive-type { font-size:10px; }
.archive-row:nth-child(2) .archive-dot { background:#78dbcb; box-shadow:0 0 10px #78dbcb55; }
.archive-row:nth-child(3) .archive-dot { background:#a4a1ff; box-shadow:0 0 10px #a4a1ff55; }
.story-content h1 { line-height:1.06; }
.login-button { margin-top:8px; }
.login-security { display:flex; align-items:center; justify-content:center; gap:7px; margin:20px 0 0; font-size:11px; color:var(--login-soft); }
.login-security svg { width:14px; height:14px; }
a:focus-visible,button:focus-visible { outline:2px solid var(--login-accent); outline-offset:4px; }
@media (max-width:900px) { .archive-preview,.story-note { display:none; } }
@media (max-width:560px) { .input-shell input { font-size:16px; } .auth-story { min-height:0; } .auth-story-content h1 { max-width:330px; } }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { transition:none!important; } }

.login-options {margin:4px 0 20px;color:#b7bec8;font-size:14px}.login-options label{display:flex;align-items:center;gap:9px;cursor:pointer}.login-options input{width:17px;height:17px;accent-color:#35a9ff}altcha-widget{display:block;margin:0 0 20px;max-width:100%;--altcha-max-width:100%}.club-brand-copy strong{font-size:27px}

.auth-feedback{padding:13px 15px;margin:0 0 20px;border:1px solid #355641;background:#172b20;color:#b7ebc8;font-size:14px;line-height:1.5}.auth-help{color:#9ca7b5;font-size:13px;line-height:1.5;margin:10px 0 18px}.login-options{justify-content:space-between;display:flex;gap:12px;flex-wrap:wrap}.login-options a{color:#8dcfff;font-size:13px}.auth-back{color:#9ca7b5;font-size:14px;text-align:center;margin:20px 0 0}.auth-back a{color:#f3f5f8}.auth-panel{padding-top:32px;padding-bottom:32px}.auth-heading{margin-bottom:20px}.field{margin-bottom:16px}

.auth-secondary .auth-shell{height:auto;min-height:720px}.auth-secondary .auth-panel{overflow:visible}.auth-secondary .auth-story{justify-content:space-between}@media(max-width:760px){.auth-secondary .auth-shell{min-height:0}}

.availability-status{font-size:12px;line-height:1.45;margin:7px 0 0;color:#9ca7b5;min-height:0}.availability-status:empty{display:none}.availability-status[data-state=available]{color:#8cdbac}.availability-status[data-state=unavailable]{color:#ffabab}

/* Match the shared content font on public authentication forms. */
.auth-page { font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; -webkit-font-smoothing: antialiased; }