/*
 * ============================================================
 * FRITTENBUDE-BBS
 * CYBERPUNK BBS AUTH TERMINAL
 * LOGIN + 2FA
 * ============================================================
 */

:root {
    --auth-black: #030406;
    --auth-panel: #080a0e;
    --auth-panel-2: #0c1016;

    --auth-line: #252b35;
    --auth-line-bright: #39414e;

    --auth-text: #e9edf2;
    --auth-muted: #737b88;

    --auth-magenta: #ff24d6;
    --auth-magenta-soft: #ff67e4;

    --auth-cyan: #28e6ff;
    --auth-green: #2dff9a;
    --auth-amber: #ffd34a;
    --auth-red: #ff4665;

    --auth-mono:
        "Fira Code",
        "JetBrains Mono",
        "Cascadia Code",
        Consolas,
        monospace;
}


/* ============================================================
   BACKDROP
   ============================================================ */

.auth-backdrop {
    position: fixed !important;
    inset: 0 !important;

    z-index: 99999 !important;

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

    padding: 20px !important;

    background:
        radial-gradient(
            circle at 50% 45%,
            rgba(255, 36, 214, .075),
            transparent 34%
        ),
        rgba(0, 0, 0, .84) !important;

    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;

    opacity: 0 !important;
    visibility: hidden !important;

    pointer-events: none !important;

    transition:
        opacity .18s ease,
        visibility .18s ease !important;
}

.auth-backdrop.is-visible {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
}

body.auth-modal-open {
    overflow: hidden !important;
}


/* ============================================================
   MAIN TERMINAL
   ============================================================ */

.auth-modal {
    position: relative !important;

    width: min(650px, 94vw) !important;
    max-width: 650px !important;

    margin: 0 !important;
    padding: 0 !important;

    box-sizing: border-box !important;

    border: 1px solid var(--auth-line-bright) !important;
    border-radius: 4px !important;

    background:
        linear-gradient(
            180deg,
            rgba(12, 16, 22, .99),
            rgba(3, 4, 6, .99)
        ) !important;

    color: var(--auth-text) !important;

    font-family: var(--auth-mono) !important;

    overflow: hidden !important;

    box-shadow:
        0 0 0 1px rgba(255, 36, 214, .05),
        0 0 45px rgba(255, 36, 214, .12),
        0 30px 100px rgba(0, 0, 0, .75) !important;
}


/* ============================================================
   CRT / TERMINAL LAYER
   ============================================================ */

.auth-modal::before {
    content: "";

    position: absolute;
    inset: 0;

    z-index: 0;

    pointer-events: none;

    background:
        repeating-linear-gradient(
            0deg,
            rgba(255,255,255,.012) 0,
            rgba(255,255,255,.012) 1px,
            transparent 1px,
            transparent 4px
        );

    opacity: .35;
}

.auth-modal::after {
    content: "";

    position: absolute;
    top: 0;
    left: 0;
    right: 0;

    height: 2px;

    z-index: 10;

    background:
        linear-gradient(
            90deg,
            transparent,
            var(--auth-magenta),
            var(--auth-cyan),
            transparent
        );

    box-shadow:
        0 0 12px rgba(255,36,214,.75);
}


/* ============================================================
   HEADER
   ============================================================ */

.auth-kicker {
    position: relative !important;

    z-index: 2 !important;

    margin: 0 !important;
    padding: 12px 18px !important;

    border-bottom: 1px solid var(--auth-line) !important;

    background: #06080b !important;

    color: var(--auth-cyan) !important;

    font-family: var(--auth-mono) !important;
    font-size: 10px !important;
    font-weight: 700 !important;

    letter-spacing: .13em !important;

    text-align: left !important;

    text-transform: uppercase !important;
}

.auth-kicker::before {
    content: "● ";

    color: var(--auth-green);

    text-shadow:
        0 0 8px rgba(45,255,154,.8);
}

.auth-kicker::after {
    content: "   //   SECURE BBS NODE";

    color: var(--auth-muted);

    font-weight: 400;
}


/* ============================================================
   TITLE
   ============================================================ */

#auth-modal-title {
    position: relative !important;

    z-index: 2 !important;

    margin: 0 !important;
    padding: 30px 30px 8px !important;

    color: #ffffff !important;

    font-family: var(--auth-mono) !important;
    font-size: clamp(22px, 4vw, 32px) !important;
    font-weight: 800 !important;

    letter-spacing: .08em !important;

    text-align: center !important;

    text-shadow:
        0 0 12px rgba(255,36,214,.42) !important;
}

#auth-modal-title::before {
    content: "┌──────────────────────────────────┐";

    display: block;

    margin-bottom: 12px;

    color: var(--auth-magenta);

    font-size: 10px;

    font-weight: 400;

    letter-spacing: 0;
}

#auth-modal-title::after {
    content: "└──────────────────────────────────┘";

    display: block;

    margin-top: 12px;

    color: var(--auth-magenta);

    font-size: 10px;

    font-weight: 400;

    letter-spacing: 0;
}


/* ============================================================
   SUBTITLE
   ============================================================ */

.auth-subtitle {
    position: relative !important;

    z-index: 2 !important;

    margin: 0 30px 25px !important;

    color: var(--auth-muted) !important;

    font-family: var(--auth-mono) !important;
    font-size: 11px !important;

    line-height: 1.7 !important;

    text-align: center !important;
}

.auth-subtitle::before {
    content: ">> ";

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


/* ============================================================
   ERROR
   ============================================================ */

.auth-error {
    position: relative !important;

    z-index: 5 !important;

    margin: 0 30px 16px !important;
    padding: 10px 13px !important;

    border: 1px solid rgba(255,70,101,.55) !important;
    border-left: 3px solid var(--auth-red) !important;

    border-radius: 2px !important;

    background: rgba(255,70,101,.055) !important;

    color: #ff8296 !important;

    font-family: var(--auth-mono) !important;
    font-size: 10px !important;

    line-height: 1.5 !important;
}

.auth-error::before {
    content: "[AUTH ERROR] ";

    color: var(--auth-red);

    font-weight: 800;
}


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

.auth-form {
    position: relative !important;

    z-index: 3 !important;

    display: flex !important;
    flex-direction: column !important;

    gap: 7px !important;

    margin: 0 30px !important;
    padding: 0 !important;
}

.auth-form label {
    display: block !important;

    margin: 10px 0 2px !important;

    color: var(--auth-amber) !important;

    font-family: var(--auth-mono) !important;
    font-size: 9px !important;
    font-weight: 800 !important;

    letter-spacing: .13em !important;

    text-transform: uppercase !important;
}

.auth-form label::before {
    content: "[";
    color: var(--auth-cyan);
}

.auth-form label::after {
    content: "]";
    color: var(--auth-cyan);
}


/* ============================================================
   INPUT
   ============================================================ */

.auth-form input[type="text"],
.auth-form input[type="password"] {
    width: 100% !important;
    height: 48px !important;

    box-sizing: border-box !important;

    margin: 0 !important;
    padding: 0 14px !important;

    border: 1px solid var(--auth-line-bright) !important;
    border-radius: 2px !important;

    outline: none !important;

    background:
        linear-gradient(
            90deg,
            rgba(40,230,255,.025),
            rgba(255,36,214,.025)
        ) !important;

    color: #ffffff !important;

    font-family: var(--auth-mono) !important;
    font-size: 13px !important;

    caret-color: var(--auth-magenta) !important;

    box-shadow:
        inset 0 0 14px rgba(0,0,0,.35) !important;

    transition:
        border-color .15s ease,
        box-shadow .15s ease !important;
}

.auth-form input::placeholder {
    color: #4f5663 !important;
}

.auth-form input:focus {
    border-color: var(--auth-magenta) !important;

    box-shadow:
        0 0 0 1px rgba(255,36,214,.20),
        0 0 18px rgba(255,36,214,.12),
        inset 0 0 14px rgba(0,0,0,.45) !important;
}


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

.auth-submit {
    width: 100% !important;
    height: 48px !important;

    box-sizing: border-box !important;

    margin: 17px 0 5px !important;
    padding: 0 16px !important;

    border: 1px solid var(--auth-magenta) !important;
    border-radius: 2px !important;

    background:
        linear-gradient(
            90deg,
            rgba(255,36,214,.08),
            rgba(255,36,214,.20),
            rgba(255,36,214,.08)
        ) !important;

    color: #ffffff !important;

    font-family: var(--auth-mono) !important;
    font-size: 12px !important;
    font-weight: 800 !important;

    letter-spacing: .12em !important;

    cursor: pointer !important;

    text-shadow:
        0 0 8px rgba(255,36,214,.55) !important;

    transition:
        background .15s ease,
        box-shadow .15s ease,
        transform .08s ease !important;
}

.auth-submit::before {
    content: ">> ";

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

.auth-submit:hover {
    background:
        rgba(255,36,214,.24) !important;

    box-shadow:
        0 0 20px rgba(255,36,214,.18) !important;
}

.auth-submit:active {
    transform: translateY(1px);
}


/* ============================================================
   2FA
   ============================================================ */

.auth-modal.auth-two-factor #auth-modal-title {
    font-size: clamp(18px, 3.5vw, 27px) !important;
}

.auth-modal.auth-two-factor .auth-subtitle::before {
    content: ">> SECOND FACTOR // ";
    color: var(--auth-green);
}

.auth-modal.auth-two-factor input[name="totp"] {
    height: 64px !important;

    text-align: center !important;

    letter-spacing: .42em !important;

    font-size: 24px !important;
    font-weight: 800 !important;

    color: var(--auth-green) !important;

    text-shadow:
        0 0 10px rgba(45,255,154,.35) !important;
}

.auth-modal.auth-two-factor input[name="totp"]:focus {
    border-color: var(--auth-green) !important;

    box-shadow:
        0 0 0 1px rgba(45,255,154,.18),
        0 0 18px rgba(45,255,154,.12) !important;
}


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

.auth-status {
    position: relative !important;

    z-index: 2 !important;

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

    gap: 9px !important;

    margin: 22px 30px 22px !important;
    padding-top: 13px !important;

    border-top: 1px solid var(--auth-line) !important;

    color: var(--auth-muted) !important;

    font-family: var(--auth-mono) !important;
    font-size: 8px !important;

    letter-spacing: .08em !important;

    text-transform: uppercase !important;
}

.auth-status::before {
    content: "●";

    color: var(--auth-green);

    text-shadow:
        0 0 8px rgba(45,255,154,.8);
}


/* ============================================================
   CLOSE
   ============================================================ */

.auth-close {
    position: absolute !important;

    z-index: 20 !important;

    top: 8px !important;
    right: 10px !important;

    width: 27px !important;
    height: 27px !important;

    padding: 0 !important;

    border: 1px solid var(--auth-line-bright) !important;
    border-radius: 2px !important;

    background: #06080b !important;

    color: var(--auth-muted) !important;

    font-family: var(--auth-mono) !important;
    font-size: 13px !important;

    cursor: pointer !important;
}

.auth-close:hover {
    border-color: var(--auth-magenta) !important;
    color: var(--auth-magenta-soft) !important;
}


/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 600px) {

    .auth-backdrop {
        padding: 10px !important;
    }

    .auth-modal {
        width: 100% !important;
    }

    #auth-modal-title {
        padding-left: 18px !important;
        padding-right: 18px !important;

        font-size: 20px !important;
    }

    .auth-subtitle,
    .auth-error,
    .auth-form,
    .auth-status {
        margin-left: 18px !important;
        margin-right: 18px !important;
    }
}

/* ============================================================
   CYBERPUNK AUTH UI — TYPOGRAPHY / GLOW / RESPONSIVE FINAL
   ============================================================ */


/* ------------------------------------------------------------
   LOGIN TRIGGER
   Kein Browser-Standardbutton mehr.
   ------------------------------------------------------------ */

.auth-trigger {
    appearance: none !important;
    -webkit-appearance: none !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    min-width: 112px !important;
    min-height: 42px !important;

    margin: 0 !important;
    padding: 8px 18px !important;

    border: 1px solid #ff24d6 !important;
    border-radius: 2px !important;

    outline: none !important;

    background:
        linear-gradient(
            180deg,
            rgba(255,36,214,.16),
            rgba(255,36,214,.055)
        ) !important;

    color: #ffffff !important;

    font-family:
        "Fira Code",
        "JetBrains Mono",
        "Cascadia Code",
        Consolas,
        monospace !important;

    font-size: 13px !important;
    font-weight: 800 !important;

    letter-spacing: .14em !important;

    text-shadow:
        0 0 6px rgba(255,255,255,.8),
        0 0 12px rgba(255,36,214,.9),
        0 0 24px rgba(255,36,214,.65) !important;

    box-shadow:
        0 0 5px rgba(255,36,214,.65),
        0 0 14px rgba(255,36,214,.38),
        inset 0 0 10px rgba(255,36,214,.08) !important;

    cursor: pointer !important;

    transition:
        color .15s ease,
        border-color .15s ease,
        background .15s ease,
        box-shadow .15s ease,
        transform .12s ease !important;
}

.auth-trigger::before {
    content: ">>" !important;

    margin-right: 9px !important;

    color: #2dff9a !important;

    text-shadow:
        0 0 6px rgba(45,255,154,.95),
        0 0 14px rgba(45,255,154,.65) !important;
}

.auth-trigger:hover {
    border-color: #ff67e4 !important;

    background:
        linear-gradient(
            180deg,
            rgba(255,36,214,.30),
            rgba(255,36,214,.10)
        ) !important;

    color: #ffffff !important;

    transform: translateY(-1px) !important;

    box-shadow:
        0 0 7px rgba(255,36,214,.9),
        0 0 20px rgba(255,36,214,.65),
        0 0 42px rgba(255,36,214,.28),
        inset 0 0 14px rgba(255,36,214,.12) !important;
}

.auth-trigger:active {
    transform: translateY(0) !important;

    box-shadow:
        0 0 6px rgba(255,36,214,.7),
        inset 0 0 12px rgba(255,36,214,.18) !important;
}

.auth-trigger:focus-visible {
    outline: 1px solid #28e6ff !important;
    outline-offset: 4px !important;

    box-shadow:
        0 0 5px rgba(40,230,255,.8),
        0 0 18px rgba(40,230,255,.35),
        0 0 30px rgba(255,36,214,.35) !important;
}


/* ------------------------------------------------------------
   AUTH WINDOW — DESKTOP
   ------------------------------------------------------------ */

.auth-modal {
    width: min(720px, 94vw) !important;
    max-width: 720px !important;

    font-size: 14px !important;

    box-shadow:
        0 0 0 1px rgba(255,36,214,.08),
        0 0 30px rgba(255,36,214,.20),
        0 0 70px rgba(255,36,214,.12),
        0 30px 100px rgba(0,0,0,.82) !important;
}


/* ------------------------------------------------------------
   HEADER
   ------------------------------------------------------------ */

.auth-kicker {
    padding: 14px 20px !important;

    font-size: 11px !important;
    letter-spacing: .15em !important;
}


/* ------------------------------------------------------------
   TITLE
   ------------------------------------------------------------ */

#auth-modal-title {
    padding:
        38px 35px 12px !important;

    font-size:
        clamp(28px, 4vw, 38px) !important;

    line-height: 1.15 !important;

    letter-spacing: .10em !important;

    text-shadow:
        0 0 8px rgba(255,255,255,.45),
        0 0 18px rgba(255,36,214,.65),
        0 0 34px rgba(255,36,214,.35) !important;
}

#auth-modal-title::before,
#auth-modal-title::after {
    font-size: 11px !important;
}


/* ------------------------------------------------------------
   SUBTITLE
   ------------------------------------------------------------ */

.auth-subtitle {
    margin:
        0 35px 32px !important;

    font-size: 12px !important;
}


/* ------------------------------------------------------------
   ERROR
   ------------------------------------------------------------ */

.auth-error {
    margin:
        0 35px 20px !important;

    font-size: 11px !important;
}


/* ------------------------------------------------------------
   FORM
   ------------------------------------------------------------ */

.auth-form {
    margin:
        0 35px !important;

    gap: 9px !important;
}

.auth-form label {
    margin:
        13px 0 4px !important;

    font-size: 10px !important;

    letter-spacing: .14em !important;
}


/* ------------------------------------------------------------
   INPUTS
   ------------------------------------------------------------ */

.auth-form input[type="text"],
.auth-form input[type="password"] {
    height: 56px !important;

    padding:
        0 17px !important;

    font-size: 15px !important;

    border-color:
        #303844 !important;

    box-shadow:
        inset 0 0 18px rgba(0,0,0,.45),
        0 0 0 rgba(255,36,214,0) !important;
}

.auth-form input[type="text"]:hover,
.auth-form input[type="password"]:hover {
    border-color:
        rgba(255,36,214,.65) !important;
}

.auth-form input[type="text"]:focus,
.auth-form input[type="password"]:focus {
    border-color:
        #ff24d6 !important;

    box-shadow:
        0 0 0 1px rgba(255,36,214,.22),
        0 0 9px rgba(255,36,214,.45),
        0 0 24px rgba(255,36,214,.18),
        inset 0 0 18px rgba(0,0,0,.55) !important;
}


/* ------------------------------------------------------------
   SUBMIT
   ------------------------------------------------------------ */

.auth-submit {
    height: 56px !important;

    margin:
        22px 0 7px !important;

    font-size: 13px !important;

    letter-spacing: .15em !important;

    border-color:
        #ff24d6 !important;

    background:
        linear-gradient(
            180deg,
            rgba(255,36,214,.28),
            rgba(255,36,214,.10)
        ) !important;

    box-shadow:
        0 0 7px rgba(255,36,214,.55),
        0 0 20px rgba(255,36,214,.22),
        inset 0 0 14px rgba(255,36,214,.08) !important;
}

.auth-submit:hover {
    background:
        linear-gradient(
            180deg,
            rgba(255,36,214,.40),
            rgba(255,36,214,.16)
        ) !important;

    box-shadow:
        0 0 8px rgba(255,36,214,.85),
        0 0 25px rgba(255,36,214,.45),
        0 0 50px rgba(255,36,214,.20),
        inset 0 0 16px rgba(255,36,214,.12) !important;
}


/* ------------------------------------------------------------
   STATUS
   ------------------------------------------------------------ */

.auth-status {
    margin:
        27px 35px 27px !important;

    padding-top:
        16px !important;

    font-size:
        9px !important;

    letter-spacing:
        .12em !important;
}


/* ------------------------------------------------------------
   CLOSE
   ------------------------------------------------------------ */

.auth-close {
    width: 31px !important;
    height: 31px !important;

    top: 8px !important;
    right: 10px !important;

    font-size: 14px !important;

    border-color:
        #303844 !important;

    box-shadow:
        0 0 0 rgba(255,36,214,0) !important;
}

.auth-close:hover {
    border-color:
        #ff24d6 !important;

    color:
        #ff67e4 !important;

    box-shadow:
        0 0 8px rgba(255,36,214,.55),
        0 0 18px rgba(255,36,214,.25) !important;
}


/* ============================================================
   TABLET
   601px – 1024px
   ============================================================ */

@media (min-width: 601px) and (max-width: 1024px) {

    .auth-backdrop {
        padding:
            24px !important;
    }

    .auth-modal {
        width:
            min(680px, 90vw) !important;

        max-width:
            680px !important;
    }

    #auth-modal-title {
        font-size:
            clamp(27px, 4.5vw, 34px) !important;
    }

    .auth-form input[type="text"],
    .auth-form input[type="password"] {
        height:
            54px !important;

        font-size:
            14px !important;
    }

    .auth-submit {
        height:
            54px !important;
    }
}


/* ============================================================
   SMARTPHONE
   ============================================================ */

@media (max-width: 600px) {

    .auth-backdrop {
        align-items:
            center !important;

        padding:
            12px !important;
    }

    .auth-modal {
        width:
            calc(100vw - 24px) !important;

        max-width:
            none !important;

        max-height:
            calc(100dvh - 24px) !important;

        overflow-y:
            auto !important;

        border-radius:
            3px !important;
    }

    .auth-kicker {
        padding:
            11px 14px !important;

        font-size:
            9px !important;

        letter-spacing:
            .10em !important;
    }

    .auth-kicker::after {
        content:
            " // SECURE NODE" !important;
    }

    #auth-modal-title {
        padding:
            28px 16px 8px !important;

        font-size:
            clamp(22px, 7vw, 29px) !important;

        letter-spacing:
            .06em !important;
    }

    #auth-modal-title::before,
    #auth-modal-title::after {
        font-size:
            8px !important;

        overflow:
            hidden !important;

        white-space:
            nowrap !important;
    }

    .auth-subtitle {
        margin:
            0 18px 23px !important;

        font-size:
            10px !important;
    }

    .auth-error {
        margin:
            0 18px 15px !important;

        font-size:
            10px !important;
    }

    .auth-form {
        margin:
            0 18px !important;

        gap:
            6px !important;
    }

    .auth-form label {
        margin:
            10px 0 3px !important;

        font-size:
            9px !important;
    }

    .auth-form input[type="text"],
    .auth-form input[type="password"] {
        width:
            100% !important;

        height:
            51px !important;

        padding:
            0 13px !important;

        font-size:
            14px !important;
    }

    .auth-submit {
        height:
            52px !important;

        margin:
            18px 0 4px !important;

        font-size:
            11px !important;
    }

    .auth-status {
        margin:
            21px 18px 20px !important;

        padding-top:
            13px !important;

        font-size:
            8px !important;
    }

    .auth-close {
        width:
            29px !important;

        height:
            29px !important;

        top:
            7px !important;

        right:
            8px !important;
    }

    /* 2FA */
    .auth-modal.auth-two-factor input[name="totp"] {
        height:
            58px !important;

        font-size:
            21px !important;

        letter-spacing:
            .28em !important;
    }
}


/* ============================================================
   VERY SMALL PHONES
   ============================================================ */

@media (max-width: 380px) {

    .auth-backdrop {
        padding:
            7px !important;
    }

    .auth-modal {
        width:
            calc(100vw - 14px) !important;

        max-height:
            calc(100dvh - 14px) !important;
    }

    #auth-modal-title {
        font-size:
            20px !important;

        padding-top:
            24px !important;
    }

    .auth-subtitle {
        margin-bottom:
            18px !important;
    }

    .auth-form,
    .auth-error,
    .auth-subtitle {
        margin-left:
            14px !important;

        margin-right:
            14px !important;
    }

    .auth-form input[type="text"],
    .auth-form input[type="password"] {
        height:
            48px !important;

        font-size:
            13px !important;
    }

    .auth-submit {
        height:
            49px !important;
    }

    .auth-status {
        margin-left:
            14px !important;

        margin-right:
            14px !important;
    }
}


/* ============================================================
   TOUCH DEVICES
   ============================================================ */

@media (hover: none) and (pointer: coarse) {

    .auth-trigger {
        min-height:
            44px !important;
    }

    .auth-form input[type="text"],
    .auth-form input[type="password"],
    .auth-submit {
        min-height:
            48px !important;
    }
}


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

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

    .auth-trigger,
    .auth-form input,
    .auth-submit,
    .auth-close {
        transition:
            none !important;
    }
}


/* ============================================================
   AUTH TYPOGRAPHY — PRESENTER / MAGENTA LOGIN FINAL
   ============================================================ */

/* LOGIN-TRIGGER */
.auth-trigger {
    min-width: 128px !important;
    min-height: 46px !important;
    padding: 9px 20px !important;

    border: 1px solid #ff20d9 !important;

    color: #ff20d9 !important;

    font-size: 15px !important;
    font-weight: 900 !important;
    letter-spacing: .16em !important;

    text-shadow:
        0 0 5px #ff20d9,
        0 0 12px #ff20d9,
        0 0 25px rgba(255,32,217,.85),
        0 0 42px rgba(255,32,217,.45) !important;

    background:
        rgba(255,20,210,.055) !important;

    box-shadow:
        0 0 6px rgba(255,32,217,.9),
        0 0 16px rgba(255,32,217,.55),
        0 0 34px rgba(255,32,217,.25),
        inset 0 0 14px rgba(255,32,217,.10) !important;
}

.auth-trigger::before {
    color: #ff20d9 !important;

    text-shadow:
        0 0 5px #ff20d9,
        0 0 12px #ff20d9,
        0 0 22px rgba(255,32,217,.8) !important;
}

.auth-trigger:hover {
    color: #ffffff !important;
    border-color: #ff55e5 !important;

    background:
        rgba(255,20,210,.16) !important;

    text-shadow:
        0 0 5px #ffffff,
        0 0 12px #ff20d9,
        0 0 25px #ff20d9,
        0 0 45px rgba(255,32,217,.8) !important;

    box-shadow:
        0 0 8px #ff20d9,
        0 0 20px #ff20d9,
        0 0 42px rgba(255,32,217,.55),
        inset 0 0 18px rgba(255,32,217,.14) !important;
}


/* KICKER */
.auth-kicker {
    font-size: 13px !important;
    font-weight: 800 !important;
    letter-spacing: .18em !important;
}


/* HAUPTÜBERSCHRIFT */
#auth-modal-title {
    font-size: clamp(34px, 5vw, 48px) !important;
    font-weight: 900 !important;
    letter-spacing: .09em !important;
    line-height: 1.08 !important;

    color: #ffffff !important;

    text-shadow:
        0 0 7px rgba(255,255,255,.85),
        0 0 15px rgba(255,32,217,.85),
        0 0 30px rgba(255,32,217,.70),
        0 0 55px rgba(255,32,217,.35) !important;
}


/* UNTERTITEL */
.auth-subtitle {
    font-size: 15px !important;
    font-weight: 600 !important;
    letter-spacing: .04em !important;

    color: #e8e8ee !important;

    text-shadow:
        0 0 8px rgba(255,32,217,.35) !important;
}


/* LABELS */
.auth-form label {
    font-size: 12px !important;
    font-weight: 900 !important;
    letter-spacing: .16em !important;

    color: #ff20d9 !important;

    text-shadow:
        0 0 5px rgba(255,32,217,.9),
        0 0 12px rgba(255,32,217,.55) !important;
}


/* EINGABEFELDER */
.auth-form input[type="text"],
.auth-form input[type="password"] {
    height: 60px !important;

    font-size: 17px !important;
    font-weight: 600 !important;

    color: #ffffff !important;

    border-color: #ff20d9 !important;

    box-shadow:
        0 0 5px rgba(255,32,217,.55),
        0 0 15px rgba(255,32,217,.18),
        inset 0 0 18px rgba(0,0,0,.55) !important;
}

.auth-form input[type="text"]::placeholder,
.auth-form input[type="password"]::placeholder {
    color: #8f8f9a !important;
    font-size: 15px !important;
}

.auth-form input[type="text"]:focus,
.auth-form input[type="password"]:focus {
    border-color: #ff4be2 !important;

    box-shadow:
        0 0 0 1px rgba(255,32,217,.35),
        0 0 8px #ff20d9,
        0 0 22px rgba(255,32,217,.55),
        0 0 42px rgba(255,32,217,.22),
        inset 0 0 18px rgba(0,0,0,.55) !important;
}


/* ANMELDEN BUTTON */
.auth-submit {
    height: 60px !important;

    font-size: 15px !important;
    font-weight: 900 !important;
    letter-spacing: .18em !important;

    color: #ffffff !important;

    border: 1px solid #ff20d9 !important;

    background:
        linear-gradient(
            180deg,
            #ff2bdc 0%,
            #e900b9 100%
        ) !important;

    text-shadow:
        0 1px 3px rgba(0,0,0,.45),
        0 0 8px rgba(255,255,255,.55) !important;

    box-shadow:
        0 0 7px #ff20d9,
        0 0 18px #ff20d9,
        0 0 38px rgba(255,32,217,.55),
        inset 0 0 12px rgba(255,255,255,.10) !important;
}

.auth-submit:hover {
    background:
        linear-gradient(
            180deg,
            #ff48e4 0%,
            #f000c4 100%
        ) !important;

    box-shadow:
        0 0 9px #ff20d9,
        0 0 24px #ff20d9,
        0 0 48px rgba(255,32,217,.70),
        inset 0 0 15px rgba(255,255,255,.16) !important;
}


/* STATUS */
.auth-status {
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: .16em !important;
}


/* 2FA */
.auth-modal.auth-two-factor #auth-modal-title {
    font-size: clamp(30px, 4.5vw, 43px) !important;
}

.auth-modal.auth-two-factor input[name="totp"] {
    height: 66px !important;

    font-size: 25px !important;
    font-weight: 800 !important;

    letter-spacing: .30em !important;
    text-align: center !important;

    color: #ff20d9 !important;

    text-shadow:
        0 0 7px #ff20d9,
        0 0 16px rgba(255,32,217,.75) !important;
}


/* ------------------------------------------------------------
   MOBILE / TABLET
   ------------------------------------------------------------ */

@media (max-width: 1024px) {

    #auth-modal-title {
        font-size:
            clamp(30px, 6vw, 42px) !important;
    }

    .auth-form input[type="text"],
    .auth-form input[type="password"] {
        height: 57px !important;
        font-size: 16px !important;
    }

    .auth-submit {
        height: 57px !important;
    }
}

@media (max-width: 600px) {

    .auth-trigger {
        min-width: 112px !important;
        min-height: 44px !important;

        font-size: 13px !important;
    }

    .auth-kicker {
        font-size: 10px !important;
    }

    #auth-modal-title {
        font-size:
            clamp(27px, 8vw, 36px) !important;

        letter-spacing: .06em !important;
    }

    .auth-subtitle {
        font-size: 12px !important;
    }

    .auth-form label {
        font-size: 10px !important;
    }

    .auth-form input[type="text"],
    .auth-form input[type="password"] {
        height: 53px !important;
        font-size: 15px !important;
    }

    .auth-submit {
        height: 54px !important;
        font-size: 13px !important;
    }

    .auth-modal.auth-two-factor input[name="totp"] {
        height: 58px !important;
        font-size: 21px !important;
    }
}


/* ============================================================
   BBS AUTH TRIGGER — CLEAN MAGENTA CYBERPUNK
   LOGIN / LOGOUT
   ============================================================ */

.auth-trigger,
.logout-button {
    appearance: none !important;
    -webkit-appearance: none !important;

    border: 0 !important;
    outline: 0 !important;

    background: transparent !important;
    background-image: none !important;

    color: #ff20d9 !important;

    font-family: inherit !important;
    font-size: 16px !important;
    font-weight: 900 !important;

    letter-spacing: .16em !important;
    line-height: 1.2 !important;

    padding: 6px 4px !important;
    margin: 0 !important;

    cursor: pointer !important;

    text-shadow:
        0 0 4px #ff20d9,
        0 0 10px #ff20d9,
        0 0 20px rgba(255,32,217,.90),
        0 0 38px rgba(255,32,217,.55) !important;

    box-shadow: none !important;

    transition:
        color .15s ease,
        text-shadow .15s ease,
        transform .15s ease !important;
}


/*
 * WICHTIG:
 * Keine Pfeile, keine Icons, keine generierten Zeichen.
 */
.auth-trigger::before,
.auth-trigger::after,
.logout-button::before,
.logout-button::after {
    content: none !important;
    display: none !important;
}


/*
 * LOGIN
 */
.auth-trigger {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}


/*
 * LOGOUT
 */
.logout-button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}


/*
 * Hover
 */
.auth-trigger:hover,
.logout-button:hover {
    color: #ff69e8 !important;

    text-shadow:
        0 0 5px #ffffff,
        0 0 10px #ff20d9,
        0 0 20px #ff20d9,
        0 0 36px rgba(255,32,217,.90),
        0 0 60px rgba(255,32,217,.45) !important;

    transform: translateY(-1px) !important;
}


/*
 * Active
 */
.auth-trigger:active,
.logout-button:active {
    color: #ffb3f3 !important;

    text-shadow:
        0 0 5px #ffffff,
        0 0 12px #ff20d9,
        0 0 25px #ff20d9 !important;

    transform: translateY(0) !important;
}


/*
 * Tastaturfokus:
 * kein Rahmen um den Button, aber weiterhin sichtbar.
 */
.auth-trigger:focus,
.logout-button:focus {
    outline: none !important;
    border: 0 !important;
    box-shadow: none !important;
}

.auth-trigger:focus-visible,
.logout-button:focus-visible {
    outline: 1px dotted rgba(255,32,217,.75) !important;
    outline-offset: 4px !important;
}


/* ============================================================
   HOME ACCOUNT BOX
   ============================================================ */

.auth-account-box .account-state,
.auth-account-box .account-status {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

.auth-account-box .account-state-label,
.auth-account-box .account-user {
    color: #ffffff !important;

    font-size: 15px !important;
    font-weight: 800 !important;

    text-shadow:
        0 0 5px rgba(255,255,255,.55),
        0 0 12px rgba(255,32,217,.55) !important;
}

.auth-account-box .account-role {
    color: #ff20d9 !important;

    font-size: 10px !important;
    font-weight: 900 !important;

    letter-spacing: .10em !important;

    text-shadow:
        0 0 5px #ff20d9,
        0 0 12px rgba(255,32,217,.70) !important;
}

.auth-account-box .account-dot {
    background: #00ff88 !important;

    box-shadow:
        0 0 5px #00ff88,
        0 0 12px rgba(0,255,136,.75) !important;
}


/* ============================================================
   LOGIN / LOGOUT FORM
   ============================================================ */

.logout-form {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    margin: 0 !important;
    padding: 0 !important;

    background: transparent !important;
    border: 0 !important;
}


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

@media (max-width: 600px) {

    .auth-trigger,
    .logout-button {
        font-size: 14px !important;
        letter-spacing: .13em !important;

        padding: 7px 3px !important;

        text-shadow:
            0 0 4px #ff20d9,
            0 0 9px #ff20d9,
            0 0 18px rgba(255,32,217,.75) !important;
    }

    .auth-account-box .account-state-label,
    .auth-account-box .account-user {
        font-size: 13px !important;
    }

    .auth-account-box .account-role {
        font-size: 9px !important;
    }
}


/* ============================================================
   TABLET
   ============================================================ */

@media (min-width: 601px) and (max-width: 1024px) {

    .auth-trigger,
    .logout-button {
        font-size: 15px !important;
    }
}


/* ============================================================
   FINAL LOGIN BUTTON
   TRANSPARENT / MAGENTA / NEON GLOW
   KEIN HOVER-HINTERGRUND / KEIN RAHMEN
   ============================================================ */

.auth-trigger {
    appearance: none !important;
    -webkit-appearance: none !important;

    display: inline-block !important;

    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;

    border: 0 !important;
    border-width: 0 !important;
    border-radius: 0 !important;

    box-shadow: none !important;
    outline: none !important;

    color: #ff20d9 !important;

    font-family: inherit !important;
    font-size: 16px !important;
    font-weight: 900 !important;

    letter-spacing: .14em !important;
    line-height: 1.2 !important;

    padding: 4px 2px !important;
    margin: 0 !important;

    cursor: pointer !important;

    text-shadow:
        0 0 4px #ff20d9,
        0 0 9px #ff20d9,
        0 0 18px #ff20d9,
        0 0 32px rgba(255, 32, 217, .85) !important;

    transform: none !important;

    transition:
        color .15s ease,
        text-shadow .15s ease !important;
}


/* PFEILE / ICONS / GENERIERTE INHALTE KOMPLETT WEG */
.auth-trigger::before,
.auth-trigger::after {
    content: none !important;
    display: none !important;
}


/*
 * HOVER:
 * EXAKT WIE NORMAL.
 * KEIN KASTEN.
 * KEIN HINTERGRUND.
 * KEINE BEWEGUNG.
 */
.auth-trigger:hover {
    appearance: none !important;
    -webkit-appearance: none !important;

    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;

    border: 0 !important;
    border-radius: 0 !important;

    box-shadow: none !important;
    outline: none !important;

    color: #ff20d9 !important;

    transform: none !important;

    text-shadow:
        0 0 4px #ff20d9,
        0 0 9px #ff20d9,
        0 0 18px #ff20d9,
        0 0 32px rgba(255, 32, 217, .85) !important;
}


/*
 * FOCUS:
 * ebenfalls kein Rahmen und kein Hintergrund.
 */
.auth-trigger:focus,
.auth-trigger:focus-visible,
.auth-trigger:active {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;

    border: 0 !important;
    border-radius: 0 !important;

    box-shadow: none !important;
    outline: none !important;

    color: #ff20d9 !important;

    transform: none !important;

    text-shadow:
        0 0 4px #ff20d9,
        0 0 9px #ff20d9,
        0 0 18px #ff20d9,
        0 0 32px rgba(255, 32, 217, .85) !important;
}


/*
 * TABLET
 */
@media (min-width: 601px) and (max-width: 1024px) {
    .auth-trigger {
        font-size: 15px !important;
        padding: 5px 2px !important;
    }
}


/*
 * MOBILE
 */
@media (max-width: 600px) {
    .auth-trigger {
        font-size: 14px !important;
        letter-spacing: .12em !important;
        padding: 6px 2px !important;

        text-shadow:
            0 0 4px #ff20d9,
            0 0 8px #ff20d9,
            0 0 16px #ff20d9 !important;
    }

    .auth-trigger:hover,
    .auth-trigger:focus,
    .auth-trigger:focus-visible,
    .auth-trigger:active {
        background: transparent !important;
        box-shadow: none !important;
        border: 0 !important;
        transform: none !important;
    }
}

/* ===== AUTOFILL FIX ===== */
.auth-modal input:-webkit-autofill,
.auth-modal input:-webkit-autofill:hover,
.auth-modal input:-webkit-autofill:focus,
.auth-modal input:-webkit-autofill:active {
    -webkit-text-fill-color: #f5f5f5 !important;
    -webkit-box-shadow: 0 0 0 1000px #0b1118 inset !important;
    box-shadow: 0 0 0 1000px #0b1118 inset !important;
    caret-color: #f5f5f5 !important;
    transition: background-color 9999s ease-in-out 0s;
}


/* ===== FORCE BROWSER AUTOFILL DARK STYLE ===== */
.auth-modal input[type="email"],
.auth-modal input[type="email"]:-webkit-autofill,
.auth-modal input[type="email"]:-webkit-autofill:hover,
.auth-modal input[type="email"]:-webkit-autofill:focus,
.auth-modal input[type="email"]:-webkit-autofill:active {
    background-color: #0b1118 !important;
    background-image: none !important;
    -webkit-text-fill-color: #f5f5f5 !important;
    color: #f5f5f5 !important;
    caret-color: #f5f5f5 !important;

    -webkit-box-shadow:
        0 0 0 1000px #0b1118 inset !important;

    box-shadow:
        0 0 0 1000px #0b1118 inset !important;

    border-color: #ff20d9 !important;

    -webkit-background-clip: text !important;
    background-clip: text !important;

    transition:
        background-color 999999s ease-out 0s,
        color 999999s ease-out 0s !important;
}

/* ===== EMAIL FIELD SIZE FIX ===== */
/* E-Mail-Feld exakt wie die übrigen Auth-Felder */
.auth-modal input[type="email"] {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    height: 56px !important;
    min-height: 56px !important;
    box-sizing: border-box !important;
}

/* ===== REGISTER LINK: NO UNDERLINE ===== */
a.auth-trigger,
a.auth-trigger:link,
a.auth-trigger:visited,
a.auth-trigger:hover,
a.auth-trigger:focus,
a.auth-trigger:focus-visible,
a.auth-trigger:active {
    text-decoration: none !important;
}