/* ===================================
   NASA Mission Control Dashboard
   Designed by Ashraful Ferdous Rafsun
=================================== */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

:root{

    --bg:#07090F;

    --panel:#11141B;

    --panel2:#181C24;

    --orange:#FF9F1C;

    --gold:#FFD166;

    --green:#22C55E;

    --red:#EF4444;

    --white:#F8FAFC;

    --gray:#94A3B8;

}

body{

    background:var(--bg);

    color:var(--white);

    font-family:"Rajdhani",sans-serif;

    overflow-x:hidden;

}

/* ======================
   Background
====================== */

.background-grid{

    position:fixed;

    inset:0;

    background:

    radial-gradient(circle at 15% 20%,rgba(255,159,28,.08),transparent 18%),

    radial-gradient(circle at 80% 70%,rgba(255,255,255,.03),transparent 22%),

    linear-gradient(rgba(255,255,255,.02) 1px,transparent 1px),

    linear-gradient(90deg,rgba(255,255,255,.02) 1px,transparent 1px);

    background-size:
    auto,
    auto,
    60px 60px,
    60px 60px;

    z-index:-1;

}

/* ======================
   Header
====================== */

.topbar{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:28px 50px;

    border-bottom:1px solid rgba(255,255,255,.08);

}

.topbar h1{

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

    font-size:48px;

    letter-spacing:3px;

    color:var(--orange);

}

.topbar p{

    margin-top:8px;

    color:var(--gray);

    letter-spacing:1px;

}

.system-status{

    display:flex;

    align-items:center;

    gap:12px;

    color:var(--green);

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

}

.green-dot{

    width:14px;

    height:14px;

    border-radius:50%;

    background:var(--green);

    box-shadow:0 0 18px var(--green);

}

/* ======================
   Dashboard
====================== */

.dashboard{

    display:grid;

    grid-template-columns:280px 1fr 330px;

    gap:28px;

    padding:35px;

}

/* ======================
   Panels
====================== */

.left-panel,
.center-panel,
.right-panel{

    background:linear-gradient(
        180deg,
        var(--panel),
        var(--panel2)
    );

    border:1px solid rgba(255,255,255,.08);

    border-radius:18px;

    padding:25px;

    position:relative;

    overflow:hidden;

}

/* HUD Corner */

.left-panel::before,
.center-panel::before,
.right-panel::before{

    content:"";

    position:absolute;

    top:12px;

    left:12px;

    width:28px;

    height:28px;

    border-top:3px solid var(--orange);

    border-left:3px solid var(--orange);

}

.left-panel::after,
.center-panel::after,
.right-panel::after{

    content:"";

    position:absolute;

    bottom:12px;

    right:12px;

    width:28px;

    height:28px;

    border-bottom:3px solid var(--orange);

    border-right:3px solid var(--orange);

}

.left-panel h2,
.right-panel h2{

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

    margin-bottom:25px;

    color:var(--gold);

    letter-spacing:2px;

}
/* ======================
   Buttons
====================== */

.left-panel button{

    width:100%;

    margin-bottom:18px;

    padding:15px;

    border:none;

    border-radius:10px;

    background:linear-gradient(
        90deg,
        #FF9F1C,
        #FFB703
    );

    color:#111;

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

    font-size:15px;

    letter-spacing:1px;

    cursor:pointer;

    transition:.35s;

}

.left-panel button:hover{

    transform:translateY(-3px);

    box-shadow:0 12px 30px rgba(255,159,28,.35);

}

/* ======================
   Countdown
====================== */

.countdown-box{

    margin-top:35px;

    text-align:center;

    border-top:1px solid rgba(255,255,255,.08);

    padding-top:25px;

}

.countdown-box h3{

    color:var(--gray);

    margin-bottom:12px;

}

#countdown{

    font-size:56px;

    color:var(--orange);

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

}

/* ======================
   Canvas
====================== */

#spaceCanvas{

    width:100%;

    height:650px;

    border-radius:14px;

    background:#05070C;

    border:2px solid rgba(255,159,28,.15);

}

/* ======================
   Telemetry Cards
====================== */

.card{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:16px;

    padding:16px;

    background:rgba(255,255,255,.03);

    border-left:4px solid var(--orange);

    border-radius:10px;

    transition:.35s;

}

.card:hover{

    transform:translateX(6px);

    background:rgba(255,255,255,.06);

}

.card span{

    color:var(--gray);

}

.card strong{

    color:var(--white);

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

}

/* ======================
   Mission Log
====================== */

.mission-log{

    margin:35px;

    padding:25px;

    border-radius:16px;

    background:linear-gradient(
        180deg,
        #10141C,
        #181D26
    );

    border:1px solid rgba(255,255,255,.08);

}

.mission-log h2{

    color:var(--gold);

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

    margin-bottom:15px;

}

#logOutput{

    color:#B8C2D0;

    line-height:1.8;

}

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

.developer-footer{

    margin:35px;

    padding:20px;

    text-align:center;

    border-top:1px solid rgba(255,255,255,.08);

}

.developer-footer p{

    color:var(--gray);

    margin:8px 0;

}

.developer-name span{

    color:var(--orange);

    font-weight:700;

}
/* ======================
   HUD Lines
====================== */

.left-panel,
.center-panel,
.right-panel{

    box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.03),
    0 18px 40px rgba(0,0,0,.45);

}

.left-panel h2::after,
.right-panel h2::after{

    content:"";

    display:block;

    width:80px;

    height:3px;

    background:linear-gradient(
        90deg,
        #FF9F1C,
        transparent
    );

    margin-top:10px;

}

/* ======================
   Scan Effect
====================== */

.center-panel{

    position:relative;

}

.center-panel::after{

    content:"";

    position:absolute;

    left:0;

    right:0;

    top:0;

    height:3px;

    background:rgba(255,255,255,.15);

    animation:scan 5s linear infinite;

}

@keyframes scan{

0%{

transform:translateY(0);

}

100%{

transform:translateY(650px);

}

}

/* ======================
   Telemetry Glow
====================== */

.card strong{

    text-shadow:
    0 0 8px rgba(255,159,28,.5);

}

/* ======================
   Scrollbar
====================== */

::-webkit-scrollbar{

width:10px;

}

::-webkit-scrollbar-track{

background:#111;

}

::-webkit-scrollbar-thumb{

background:#FF9F1C;

border-radius:20px;

}

/* ======================
   Responsive
====================== */

@media(max-width:1200px){

.dashboard{

grid-template-columns:1fr;

}

#spaceCanvas{

height:500px;

}

}
.graph-panel{

    margin-top:20px;

    background:#121722;

    border:1px solid #FFB020;

    border-radius:12px;

    padding:15px;

}

#graphCanvas{

    width:100%;

    height:180px;

    background:#05070D;

    border-radius:8px;

}