/* =====================================================
   KESKA CONTROL CENTER V2 – LOGIN SECURITY DESIGN
   Rein visuelle Erweiterung
   ===================================================== */

body.keska-login-tron .login-card {
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(0, 202, 255, .52);
    background:
        radial-gradient(
            ellipse at 95% 0%,
            rgba(0, 195, 255, .075),
            transparent 52%
        ),
        linear-gradient(
            155deg,
            rgba(9, 22, 46, .98),
            rgba(5, 13, 30, .97)
        );
    box-shadow:
        0 0 28px rgba(0, 190, 255, .10),
        inset 0 1px 0 rgba(150, 230, 255, .08),
        inset 0 0 26px rgba(0, 120, 255, .035);
    transition: border-color .25s ease, box-shadow .25s ease;
}

@media (hover: hover) {
    body.keska-login-tron .login-card:hover {
        border-color: rgba(0, 220, 255, .78);
        box-shadow:
            0 0 36px rgba(0, 190, 255, .15),
            inset 0 1px 0 rgba(150, 230, 255, .10);
    }
}

body.keska-login-tron .keska-security-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 23px;
    color: #8ce9ff;
}

body.keska-login-tron .keska-security-icon {
    width: 33px;
    height: 33px;
    display: grid;
    place-items: center;
    flex: 0 0 33px;
    border: 1px solid rgba(0, 202, 255, .30);
    border-radius: 10px;
    background: rgba(0, 180, 255, .075);
    box-shadow: inset 0 0 12px rgba(0, 180, 255, .04);
}

body.keska-login-tron .keska-security-icon svg {
    width: 17px;
    height: 17px;
}

body.keska-login-tron .keska-security-label {
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .18em;
}

body.keska-login-tron .keska-security-indicator {
    width: 7px;
    height: 7px;
    margin-left: auto;
    border-radius: 50%;
    background: #2be1a3;
    box-shadow: 0 0 12px rgba(43, 225, 163, .60);
}

body.keska-login-tron .form-control {
    transition:
        border-color .2s ease,
        box-shadow .2s ease,
        background-color .2s ease;
}

body.keska-login-tron .form-control:focus {
    border-color: #00dcff;
    background-color: rgba(3, 17, 39, .98);
    box-shadow:
        0 0 0 3px rgba(0, 202, 255, .12),
        0 0 19px rgba(0, 202, 255, .09);
}

body.keska-login-tron .login-button {
    transition:
        filter .2s ease,
        box-shadow .2s ease,
        transform .2s ease;
}

@media (hover: hover) {
    body.keska-login-tron .login-button:hover {
        filter: brightness(1.12);
        transform: translateY(-1px);
        box-shadow:
            0 9px 30px rgba(68, 92, 255, .32),
            0 0 22px rgba(0, 202, 255, .18);
    }
}

body.keska-login-tron .login-button:focus-visible {
    outline: 2px solid #8ce9ff;
    outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
    body.keska-login-tron .login-card,
    body.keska-login-tron .form-control,
    body.keska-login-tron .login-button {
        transition: none;
    }
}

/* ===================================================
   KESKA CYBERBRAIN 3D V1
   =================================================== */

body.keska-login-tron .login-brand {
    position: relative;
    isolation: isolate;
    overflow: hidden;
}

body.keska-login-tron .keska-cyberbrain {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
    background:
        radial-gradient(
            ellipse at 72% 49%,
            rgba(0, 170, 255, .10),
            transparent 65%
        );
}

body.keska-login-tron #keska-cyberbrain-canvas {
    display: block;
    width: 100%;
    height: 100%;
    opacity: .88;
}

body.keska-login-tron .login-brand > :not(.keska-cyberbrain) {
    position: relative;
    z-index: 2;
}

body.keska-login-tron .brand-main h1 {
    text-shadow:
        0 2px 16px rgba(0, 5, 20, .9),
        0 0 35px rgba(0, 8, 25, .6);
}

@media (max-width: 760px) {
    body.keska-login-tron #keska-cyberbrain-canvas {
        opacity: .42;
    }
}


/* KESKA CYBERBRAIN V2 – Feinabstimmung */

body.keska-login-tron #keska-cyberbrain-canvas {
    opacity: .75;
}

@media (max-width: 760px) {
    body.keska-login-tron #keska-cyberbrain-canvas {
        opacity: .35;
    }
}


/* =====================================================
   KESKA CYBERPUNK HUD V3
   ===================================================== */

body.keska-login-tron .login-brand {
    position: relative;
    isolation: isolate;
    overflow: hidden;
}

/* Gemeinsame HUD-Ebene */

body.keska-login-tron .keska-hud {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;

    background:
        radial-gradient(
            ellipse at 76% 48%,
            rgba(0, 190, 255, .065),
            transparent 62%
        ),
        linear-gradient(
            135deg,
            rgba(0, 185, 255, .025),
            transparent 48%,
            rgba(132, 65, 255, .035)
        );
}

/* Holografisches Datenraster */

body.keska-login-tron .keska-hud-grid {
    position: absolute;
    inset: 0;

    background-image:
        linear-gradient(
            rgba(0, 195, 255, .055) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(0, 195, 255, .055) 1px,
            transparent 1px
        );

    background-size: 38px 38px;

    mask-image:
        linear-gradient(
            90deg,
            transparent 4%,
            rgba(0,0,0,.24) 28%,
            black 78%,
            rgba(0,0,0,.5)
        );

    -webkit-mask-image:
        linear-gradient(
            90deg,
            transparent 4%,
            rgba(0,0,0,.24) 28%,
            black 78%,
            rgba(0,0,0,.5)
        );

    opacity: .65;
}

/* Langsame Lichtabtastung */

body.keska-login-tron .keska-hud-scanline {
    position: absolute;
    left: 12%;
    right: 5%;
    top: -20%;
    height: 120px;

    background:
        linear-gradient(
            to bottom,
            transparent,
            rgba(0, 205, 255, .035) 65%,
            rgba(0, 205, 255, .11) 99%,
            transparent
        );

    animation:
        keska-hud-scan 13s linear infinite;
}

/* Technische Eckmarkierungen */

body.keska-login-tron .keska-hud-corner {
    position: absolute;
    width: 29px;
    height: 29px;
    opacity: .48;
}

body.keska-login-tron .hud-corner-tl {
    top: 25px;
    left: 25px;
    border-top: 1px solid #00cfff;
    border-left: 1px solid #00cfff;
}

body.keska-login-tron .hud-corner-tr {
    top: 25px;
    right: 25px;
    border-top: 1px solid #965bff;
    border-right: 1px solid #965bff;
}

body.keska-login-tron .hud-corner-bl {
    bottom: 25px;
    left: 25px;
    border-bottom: 1px solid #00cfff;
    border-left: 1px solid #00cfff;
}

body.keska-login-tron .hud-corner-br {
    bottom: 25px;
    right: 25px;
    border-bottom: 1px solid #965bff;
    border-right: 1px solid #965bff;
}

/* Schwebende Systemanzeigen */

body.keska-login-tron .keska-hud-data {
    position: absolute;
    z-index: 1;

    color: rgba(96, 222, 255, .74);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .15em;
    line-height: 1.6;

    text-shadow:
        0 0 12px rgba(0, 190, 255, .28);
}

body.keska-login-tron .keska-hud-data small {
    display: block;
    margin-top: 3px;

    font-size: 8px;
    font-weight: 700;
    letter-spacing: .12em;

    color: rgba(151, 119, 255, .62);
}

body.keska-login-tron .hud-data-dot {
    display: inline-block;
    width: 5px;
    height: 5px;
    margin-right: 6px;

    border-radius: 50%;
    background: #27e5c0;

    box-shadow:
        0 0 9px rgba(39, 229, 192, .65);

    animation:
        keska-hud-blink 3s ease-in-out infinite;
}

body.keska-login-tron .hud-data-top {
    top: 31px;
    right: 47px;
}

body.keska-login-tron .hud-data-right {
    right: 34px;
    top: 52%;
    text-align: right;
}

body.keska-login-tron .hud-data-bottom {
    bottom: 37px;
    right: 47px;
}

/* Kleine Datenbalken */

body.keska-login-tron .keska-hud-bars {
    position: absolute;
    top: 27%;
    right: 39px;

    display: flex;
    align-items: flex-end;
    gap: 4px;
    height: 28px;

    opacity: .65;
}

body.keska-login-tron .keska-hud-bars i {
    display: block;
    width: 3px;
    height: 30%;

    background:
        linear-gradient(
            to top,
            #255aff,
            #27dfff
        );

    box-shadow:
        0 0 6px rgba(0, 200, 255, .25);

    animation:
        keska-hud-bars 2.4s ease-in-out infinite alternate;
}

body.keska-login-tron .keska-hud-bars i:nth-child(3n) {
    animation-delay: -.8s;
}

body.keska-login-tron .keska-hud-bars i:nth-child(4n) {
    animation-delay: -1.6s;
}

body.keska-login-tron .keska-hud-bars i:nth-child(5n) {
    animation-delay: -.3s;
}

/* Kleines Fadenkreuz */

body.keska-login-tron .keska-hud-crosshair {
    position: absolute;
    top: 19%;
    right: 22%;

    width: 17px;
    height: 17px;

    border: 1px solid rgba(0, 210, 255, .28);
    border-radius: 50%;

    box-shadow:
        0 0 12px rgba(0, 210, 255, .08);
}

body.keska-login-tron .keska-hud-crosshair::before,
body.keska-login-tron .keska-hud-crosshair::after {
    content: "";
    position: absolute;
    background: rgba(0, 210, 255, .38);
}

body.keska-login-tron .keska-hud-crosshair::before {
    width: 25px;
    height: 1px;
    top: 7px;
    left: -5px;
}

body.keska-login-tron .keska-hud-crosshair::after {
    width: 1px;
    height: 25px;
    top: -5px;
    left: 7px;
}

/* Ebenenreihenfolge */

body.keska-login-tron .keska-hud {
    z-index: 0;
}

body.keska-login-tron .keska-cyberbrain {
    z-index: 1;
}

body.keska-login-tron .login-brand > :not(
    .keska-hud,
    .keska-cyberbrain
) {
    position: relative;
    z-index: 3;
}

/* Animationen */

@keyframes keska-hud-scan {
    from {
        transform: translateY(-160px);
    }

    to {
        transform: translateY(850px);
    }
}

@keyframes keska-hud-blink {
    0%, 100% {
        opacity: 1;
    }

    50% {
        opacity: .35;
    }
}

@keyframes keska-hud-bars {
    from {
        height: 18%;
    }

    to {
        height: 100%;
    }
}

/* Mobile */

@media (max-width: 760px) {
    body.keska-login-tron .keska-hud {
        opacity: .48;
    }

    body.keska-login-tron .keska-hud-data,
    body.keska-login-tron .keska-hud-bars,
    body.keska-login-tron .keska-hud-crosshair {
        display: none;
    }
}

/* Reduzierte Animation */

@media (prefers-reduced-motion: reduce) {
    body.keska-login-tron .keska-hud * {
        animation: none !important;
    }
}


/* =====================================================
   KESKA HUD V3 LAYER FIX
   Korrigiert ältere :not()-Regeln des Login-Layouts
   ===================================================== */

/* Hintergrundebene muss aus dem normalen Layout raus */
body.keska-login-tron
.login-brand > .keska-hud {
    position: absolute !important;
    inset: 0 !important;
    width: 100%;
    height: 100%;
    z-index: 1 !important;
    pointer-events: none !important;
    overflow: hidden;
    box-sizing: border-box;
}

/* Gehirn liegt über dem HUD */
body.keska-login-tron
.login-brand > .keska-cyberbrain {
    position: absolute !important;
    inset: 0 !important;
    z-index: 2 !important;
    pointer-events: none !important;
}

/* Logo, Text und Status bleiben im Vordergrund */
body.keska-login-tron
.login-brand > .brand-top,
body.keska-login-tron
.login-brand > .brand-main,
body.keska-login-tron
.login-brand > .brand-bottom {
    position: relative !important;
    z-index: 4 !important;
}

/* HUD-Anzeigen innerhalb der Hintergrundebene */
body.keska-login-tron
.keska-hud > .keska-hud-data {
    position: absolute !important;
    z-index: 2;
}

/* Raster dezent, aber sichtbar */
body.keska-login-tron
.keska-hud > .keska-hud-grid {
    opacity: .9;
}

/* HUD-Daten lesbar */
body.keska-login-tron
.keska-hud > .keska-hud-data {
    color: rgba(105, 226, 255, .88);
}

body.keska-login-tron
.keska-hud > .keska-hud-data small {
    color: rgba(170, 140, 255, .75);
}

@media (max-width: 760px) {
    body.keska-login-tron
    .login-brand > .keska-hud {
        opacity: .45;
    }
}


/* ==========================================================
   KESKA FULL HEIGHT HUD SCAN V1
   Durchgehendes Cyberpunk-Raster über die linke Login-Hälfte
   ========================================================== */

body.keska-login-tron .login-brand {
    position: relative;
    isolation: isolate;
    overflow: hidden;
}

/* Vollflächige Rasterebene */
body.keska-login-tron .login-brand::before {
    content: "";
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;

    background:
        repeating-linear-gradient(
            0deg,
            transparent 0,
            transparent 35px,
            rgba(0, 215, 255, .075) 36px
        ),
        repeating-linear-gradient(
            90deg,
            transparent 0,
            transparent 35px,
            rgba(0, 215, 255, .075) 36px
        ),
        linear-gradient(
            180deg,
            rgba(0, 210, 255, .035),
            transparent 45%,
            rgba(0, 210, 255, .045)
        );

    opacity: .85;
}

/* Vertikaler holografischer Scanbalken */
body.keska-login-tron .login-brand::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: -25%;
    height: 22%;
    z-index: 1;
    pointer-events: none;

    background: linear-gradient(
        180deg,
        transparent 0%,
        rgba(0, 225, 190, .018) 25%,
        rgba(0, 235, 205, .09) 48%,
        rgba(80, 255, 220, .14) 50%,
        rgba(0, 235, 205, .06) 52%,
        transparent 100%
    );

    animation: keska-full-scan 9s linear infinite;
}

/* Bestehendes HUD und Gehirn bleiben sichtbar */
body.keska-login-tron
.login-brand > .keska-hud {
    position: absolute !important;
    inset: 0 !important;
    z-index: 2 !important;
}

body.keska-login-tron
.login-brand > .keska-cyberbrain {
    position: absolute !important;
    inset: 0 !important;
    z-index: 3 !important;
}

/* Texte und Logo immer ganz vorne */
body.keska-login-tron
.login-brand > .brand-top,
body.keska-login-tron
.login-brand > .brand-main,
body.keska-login-tron
.login-brand > .brand-bottom {
    position: relative !important;
    z-index: 5 !important;
}

@keyframes keska-full-scan {
    0% {
        top: -25%;
    }

    100% {
        top: 105%;
    }
}

@media (prefers-reduced-motion: reduce) {
    body.keska-login-tron .login-brand::after {
        animation: none;
        top: 40%;
    }
}


/* ==========================================================
   KESKA CLEAN FULLSCREEN HUD V4
   Ein Raster, ein Scanstreifen, keine Ellipse
   ========================================================== */

/* Linke Seite als feste Zeichenfläche */
body.keska-login-tron .login-shell > .login-brand {
    position: relative !important;
    isolation: isolate;
    overflow: hidden !important;
}

/* Alte Hintergrund-Ellipsen entfernen */
body.keska-login-tron .login-shell > .login-brand::before {
    content: none !important;
    display: none !important;
}

/* Alten Scanbalken entfernen */
body.keska-login-tron .login-shell > .login-brand::after {
    content: none !important;
    display: none !important;
}

/* Bestehende begrenzte Raster-/Scan-Effekte deaktivieren */
body.keska-login-tron .keska-hud-grid,
body.keska-login-tron .keska-hud-scanline {
    display: none !important;
}

/* HUD über die komplette linke Hälfte */
body.keska-login-tron .login-shell > .login-brand > .keska-hud {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    z-index: 1 !important;
    overflow: hidden !important;
    pointer-events: none !important;
    box-sizing: border-box !important;
    opacity: 1 !important;

    background:
        repeating-linear-gradient(
            0deg,
            transparent 0 35px,
            rgba(0, 205, 255, .065) 36px
        ),
        repeating-linear-gradient(
            90deg,
            transparent 0 35px,
            rgba(0, 205, 255, .065) 36px
        ),
        linear-gradient(
            145deg,
            rgba(0, 190, 255, .025),
            rgba(0, 110, 220, .035)
        ) !important;
}

/* Neuer Scanstreifen: volle Breite */
body.keska-login-tron .login-shell > .login-brand > .keska-hud::before {
    content: "" !important;
    display: block !important;
    position: absolute !important;

    left: 0 !important;
    right: 0 !important;
    width: 100% !important;

    top: -25%;
    height: 20%;

    z-index: 1;
    pointer-events: none;

    background:
        linear-gradient(
            to bottom,
            transparent 0%,
            rgba(0, 220, 200, .018) 35%,
            rgba(0, 230, 215, .075) 48%,
            rgba(95, 255, 230, .13) 50%,
            rgba(0, 230, 215, .055) 52%,
            transparent 100%
        ) !important;

    animation:
        keska-clean-scan-v4 10s linear infinite !important;
}

/* Alte dekorative HUD-Ellipsen nicht anzeigen */
body.keska-login-tron .login-shell > .login-brand > .keska-hud::after {
    content: none !important;
    display: none !important;
}

/* Gehirn darüber */
body.keska-login-tron .login-shell > .login-brand > .keska-cyberbrain {
    position: absolute !important;
    inset: 0 !important;
    z-index: 2 !important;
    pointer-events: none !important;
}

/* HUD-Beschriftungen */
body.keska-login-tron .login-shell > .login-brand .keska-hud-data,
body.keska-login-tron .login-shell > .login-brand .keska-hud-bars,
body.keska-login-tron .login-shell > .login-brand .keska-hud-crosshair,
body.keska-login-tron .login-shell > .login-brand .keska-hud-corner {
    z-index: 3;
}

/* Logo, Titel, Beschreibung, Status ganz vorne */
body.keska-login-tron .login-shell > .login-brand > .brand-top,
body.keska-login-tron .login-shell > .login-brand > .brand-main,
body.keska-login-tron .login-shell > .login-brand > .brand-bottom {
    position: relative !important;
    z-index: 5 !important;
}

@keyframes keska-clean-scan-v4 {
    from {
        top: -25%;
    }

    to {
        top: 105%;
    }
}

@media (prefers-reduced-motion: reduce) {
    body.keska-login-tron .login-shell > .login-brand > .keska-hud::before {
        animation: none !important;
        top: 40%;
    }
}


/* =====================================================
   KESKA LOGIN NEON DESCRIPTION V1
   ===================================================== */

body.keska-login-tron .brand-main .keska-neon-description {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 7px;

    width: max-content;
    max-width: 100%;
    margin-top: 27px;
    padding: 12px 17px;

    border-left: 2px solid rgba(0, 210, 255, .72);
    border-radius: 0 9px 9px 0;

    background:
        linear-gradient(
            90deg,
            rgba(0, 185, 255, .095),
            rgba(0, 185, 255, .025) 65%,
            transparent
        );

    box-shadow:
        inset 12px 0 25px rgba(0, 165, 255, .025);
}

body.keska-login-tron .keska-neon-label {
    display: block;
    color: rgba(175, 192, 218, .85);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .17em;
    line-height: 1.5;
}

body.keska-login-tron .keska-neon-line {
    display: block;
    color: #85e8ff;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .085em;
    line-height: 1.5;

    text-shadow:
        0 0 14px rgba(0, 200, 255, .19);
}

@media (max-width: 760px) {
    body.keska-login-tron .brand-main .keska-neon-description {
        padding: 10px 13px;
        margin-top: 18px;
    }

    body.keska-login-tron .keska-neon-line {
        font-size: 11px;
        letter-spacing: .045em;
    }
}