/* =======================================================
   ROADRUNNER COMMAND CENTER
   LOGIN SPACE UI
   Version 1.0
======================================================= */

@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;600;700&display=swap');

:root{

    --bg:#03070C;
    --panel:#0B1622;
    --panel2:#132333;

    --cyan:#00E5FF;
    --cyan2:#00BCD4;

    --text:#F2FCFF;
    --text2:#8FBBCB;

    --border:rgba(0,229,255,.35);

}

*{

    margin:0;
    padding:0;
    box-sizing:border-box;

}

html,
body{

    width:100%;
    height:100%;

}

body {

    font-family: 'Orbitron', sans-serif;

    background:
    linear-gradient(
        rgba(0,10,20,.25),
        rgba(0,10,20,.25)
    ),
    url("../img/backgrounds/login-space.webp")
    center center / cover
    no-repeat
    fixed;

    color: var(--text);

    overflow: hidden;

    position: relative;

}

/* =======================================================
   Deep Space Background
======================================================= */

body::before{

    content:"";

    position:fixed;

    inset:0;

    background:

        radial-gradient(circle at 20% 30%,
            rgba(0,180,255,.12),
            transparent 30%),

        radial-gradient(circle at 80% 35%,
            rgba(0,180,255,.10),
            transparent 25%),

        radial-gradient(circle at 50% 80%,
            rgba(120,180,255,.08),
            transparent 35%);

    pointer-events:none;

    z-index:-3;

    animation:
        nebulaMove 120s linear infinite;

}

/* =======================================================
   Milchstraße
======================================================= */

body::after{

    content:"";

    position:fixed;

    left:-20%;

    top:-10%;

    width:140%;

    height:140%;

    pointer-events:none;

    z-index:-2;

    opacity:.18;

    background:

        radial-gradient(
            ellipse at center,

            rgba(120,220,255,.30) 0%,

            rgba(70,170,255,.18) 12%,

            rgba(20,90,170,.08) 24%,

            transparent 42%

        );

    transform:rotate(-28deg);

    filter:blur(30px);

    animation:galaxyMove 180s linear infinite;

}


/* =======================================================
   Sternenhimmel
======================================================= */

#stars{

    position:fixed;

    inset:0;

    background-image:

        radial-gradient(white 1px,transparent 1px),
        radial-gradient(var(--cyan) 1px,transparent 1px);

    background-size:

        140px 140px,
        260px 260px;

    opacity:.22;
    
    animation:
    stars 180s linear infinite,
    twinkle 6s ease-in-out infinite;

}

@keyframes stars{

    from{

        transform:translateY(0);

    }

    to{

        transform:translateY(-400px);

    }

}


/* =======================================================
   HUD Rahmen
======================================================= */

.hud-frame{

    position:fixed;

    inset:24px;

    border:2px solid var(--cyan);

    border-radius:20px;

    box-shadow:

        0 0 30px rgba(0,229,255,.25),
        inset 0 0 20px rgba(0,229,255,.08);

}

.hud-frame::before{

    content:"";

    position:absolute;

    inset:12px;

    border:1px solid rgba(0,229,255,.25);

    border-radius:14px;

}


/* =======================================================
   Kopfzeile
======================================================= */

.topbar{

    position:fixed;

    top:35px;

    left:55px;

    right:55px;

    display:flex;

    justify-content:space-between;

    align-items:center;

    z-index:100;

}

.brand{

    font-size:28px;

    color:var(--cyan);

    letter-spacing:5px;

    text-shadow:0 0 15px var(--cyan);

}

.clock{

    text-align:right;

}

#time{

    font-size:34px;

    color:var(--cyan);

}

#date{

    color:var(--text2);

}


/* =======================================================
   Hauptlayout
======================================================= */

.layout{

    position:absolute;

    top:120px;

    left:50px;

    right:50px;

    bottom:80px;

    display:grid;

    grid-template-columns:

        280px
        1fr
        280px;

    gap:35px;

    align-items:center;

}


/* =======================================================
   Cockpit Seiten
======================================================= */

.left-console,
.right-console{

    height:100%;

    border:1px solid var(--border);

    border-radius:18px;

    background:rgba(8,20,32,.45);

    backdrop-filter:blur(10px);

}


/* =======================================================
   Login
======================================================= */

.login-panel{

    width:500px;

    max-width:90%;

    margin:auto;

    background:rgba(10,20,32,.82);

    border:1px solid var(--border);

    border-radius:18px;

    backdrop-filter:blur(18px);

    padding:35px;

    box-shadow:
        0 0 25px rgba(0,229,255,.18);
        
        border-top:2px solid rgba(0,229,255,.40);

}

.logo{

    width:110px;

    display:block;

    margin:0 auto 15px;

}

.login-panel h1{

    font-size:28px;

    letter-spacing:4px;

}

.login-panel h2{

    font-size:16px;

    margin-bottom:18px;

}

.subtitle{

    margin-bottom:22px;

    font-size:15px;

}

/* =======================================================
   Formular
======================================================= */

.login-panel form{

    display:flex;

    flex-direction:column;

    gap:18px;

    margin-top:30px;

}

.login-panel input[type="email"],
.login-panel input[type="password"]{

    width:100%;

    height:58px;

    padding:0 20px;

    background:#0b1723;

    border:2px solid rgba(0,229,255,.35);

    border-radius:10px;

    color:#ffffff;

    font-size:18px;

    font-family:'Orbitron',sans-serif;

    transition:.3s;

}

.login-panel input:focus{

    outline:none;

    border-color:#00E5FF;

    box-shadow:0 0 20px rgba(0,229,255,.45);

}

.remember{

    display:flex;

    align-items:center;

    gap:22px;

    color:#8FBBCB;

    font-size:15px;

}

.login-panel button{

    width:100%;

    height:56px;

    border:none;

    border-radius:8px;

    background:linear-gradient(
        90deg,
        #00BCD4,
        #00E5FF
    );

    color:#08131d;

    font-size:18px;

    font-weight:bold;

    letter-spacing:2px;

    cursor:pointer;

    transition:.3s;

}

.login-panel button:hover{

    transform:translateY(-2px);

    background:#00E5FF;

    box-shadow:

        0 0 25px rgba(0,229,255,.55),

        0 0 45px rgba(0,229,255,.20);
 
}


/* =======================================================
   Footer
======================================================= */

footer{

    position:fixed;

    bottom:35px;

    left:0;

    width:100%;

    text-align:center;

    color:var(--text2);

}

footer a{

    color:var(--cyan);

    text-decoration:none;

    margin:0 10px;

}


/* ===== Overrides v1.1 ===== */
.login-panel form{
    display:flex;
    flex-direction:column;
    align-items:stretch;
    gap:18px;
    width:100%;
}
.login-panel input:not([type="checkbox"]){
    display:block;
    width:100%;
    height:58px;
    padding:0 18px;
    background:#0b1723;
    border:2px solid rgba(0,229,255,.35);
    border-radius:10px;
    color:#fff;
    font-size:18px;
    font-family:'Orbitron',sans-serif;
}
.login-panel .remember{
    display:flex;
    align-items:center;
    gap:10px;
    width:auto;
    color:#8FBBCB;
    font-size:15px;
}
.login-panel .remember input[type="checkbox"]{
    width:18px;
    height:18px;
    flex:0 0 18px;
    accent-color:#00E5FF;
}
.login-panel button{
    display:block;
    width:100%;
}
.login-links{

    display:flex;

    justify-content:space-between;

    margin-top:22px;

}

.login-links a{

    color:var(--cyan);

    text-decoration:none;

    transition:.3s;

}

.login-links a:hover{

    color:white;

    text-shadow:0 0 12px var(--cyan);

}
.guest-info{
    margin-top:20px;
    color:var(--text2);
    line-height:1.5;
}

/* =======================================================
   HUD Konsolen
======================================================= */

.left-console,
.right-console{

    padding:25px;

}

.left-console h3,
.right-console h3{

    color:var(--cyan);

    margin-bottom:25px;

    letter-spacing:2px;

    font-size:20px;

    text-shadow:0 0 10px var(--cyan);

}

.status-item{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-top:18px;

    font-size:15px;

}

.online{

    color:#59ff9d;

    font-weight:bold;

    text-shadow:0 0 12px #59ff9d;

    animation:blinkStatus 2s infinite;

}

@keyframes blinkStatus{

    0%{

        opacity:1;

    }

    50%{

        opacity:.45;

    }

    100%{

        opacity:1;

    }

}

.progress{

    width:100%;

    height:8px;

    margin-top:8px;

    margin-bottom:18px;

    background:#122332;

    border-radius:20px;

    overflow:hidden;

}

.progress div{

    height:100%;

    background:linear-gradient(90deg,#00BCD4,#00E5FF);

    box-shadow:0 0 12px #00E5FF;

}

/* =====================================
   HUD Trennlinie
===================================== */

.hud-line{

    border:none;

    border-top:1px solid rgba(0,229,255,.25);

    margin:25px 0;

}

/* =======================================================
   HUD Ecken
======================================================= */

.login-panel,
.left-console,
.right-console{

    position:relative;

    overflow:hidden;

}

/* obere linke Ecke */
.login-panel::before,
.left-console::before,
.right-console::before{

    content:"";

    position:absolute;

    top:14px;
    left:14px;

    width:28px;
    height:28px;

    border-top:2px solid var(--cyan);
    border-left:2px solid var(--cyan);

    opacity:.9;

}

/* untere rechte Ecke */
.login-panel::after,
.left-console::after,
.right-console::after{

    content:"";

    position:absolute;

    right:14px;
    bottom:14px;

    width:28px;
    height:28px;

    border-right:2px solid var(--cyan);
    border-bottom:2px solid var(--cyan);

    opacity:.9;

}

/* =======================================================
   Scanner
======================================================= */

.login-panel::marker{
    display:none;
}

.scan-line{

    position:absolute;

    left:0;
    right:0;

    height:2px;

    background:rgba(0,229,255,.35);

    box-shadow:0 0 12px #00E5FF;

    animation:scan 6s linear infinite;

}

@keyframes scan{

    0%{

        top:-5px;

    }

    100%{

        top:100%;

    }

}

/* ==========================
   Login HUD Header
========================== */

.panel-header{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:20px;

    padding-bottom:12px;

    border-bottom:1px solid rgba(0,229,255,.20);

}

.panel-header span{

    color:var(--cyan);

    font-size:14px;

    letter-spacing:2px;

}

.status-dot{

    width:10px;

    height:10px;

    border-radius:50%;

    background:#4CFF88;

    box-shadow:0 0 10px #4CFF88;

    animation:blinkStatus 2s infinite;

}

@keyframes twinkle{

    0%{
        opacity:.18;
    }

    50%{
        opacity:.30;
    }

    100%{
        opacity:.18;
    }

}

/* ==========================
   Bootscreen
========================== */

#boot-screen{

    position:fixed;

    inset:0;

    background:#02060a;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    z-index:9999;

}

.boot-logo{

    font-size:34px;

    color:#00E5FF;

    letter-spacing:5px;

    margin-bottom:40px;

    text-shadow:0 0 18px #00E5FF;

}

.boot-text{

    width:420px;

    max-width:90%;

}

#boot-message{

    margin-bottom:20px;

    color:#8FBBCB;

}

.boot-progress{

    width:100%;

    height:10px;

    background:#102030;

    border-radius:20px;

    overflow:hidden;

}

#boot-bar{

    width:0%;

    height:100%;

    background:linear-gradient(90deg,#00BCD4,#00E5FF);

    box-shadow:0 0 20px #00E5FF;

}

#app{

    display:none;

}

@keyframes nebulaMove{

    0%{

        transform:translateX(0);

    }

    50%{

        transform:translateX(-40px);

    }

    100%{

        transform:translateX(0);

    }

}

@keyframes galaxyMove{

    0%{

        transform:
            rotate(-28deg)
            translateX(0);

    }

    50%{

        transform:
            rotate(-28deg)
            translateX(-40px);

    }

    100%{

        transform:
            rotate(-28deg)
            translateX(0);

    }

}

/* ==========================
   SPACE CANVAS
========================== */

#space{

    position:fixed;

    inset:0;

    width:100%;

    height:100%;

    z-index: 5;

    pointer-events:none;

}

/* ===========================
   SPACE ENGINE
=========================== */

#space-engine{
    position:fixed;
    inset:0;
    overflow:hidden;
    pointer-events:none;
    z-index:5;
}

/* =====================================
   2FA QR-Code
===================================== */

.login-panel code{
    display:block;
    margin:12px 0 25px;
    color:#8FBBCB;
    font-size:13px;
    word-break:break-all;
    overflow-wrap:anywhere;
    text-align:center;
}

.qr-code{
    display:block;
    width:180px;
    height:180px;
    margin:20px auto;
}