/* =========================
GLOBAL
========================= */

body{

background:#0b0f1a;
color:#00ffcc;

font-family:Arial, Helvetica, sans-serif;

margin:0;
padding:0;

display:flex;
flex-direction:column;
min-height:100vh;

}

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

header{

background:#020617;
padding:20px;
border-bottom:1px solid #00ffcc33;

}

.header{

display:flex;
align-items:center;
gap:20px;

}

.logo{

height:120px;

}

nav{

margin-top:15px;

}

nav a{

color:#00ffcc;
text-decoration:none;
margin-right:20px;
font-weight:bold;

transition:0.3s;

}

nav a:hover{

color:white;

}

/* =========================
CONTENT
========================= */

main{

flex:1;

}

.container{

padding:40px;

}

/* =========================
MISSION CONTROL GRID
========================= */

.mission-grid{

display:grid;

grid-template-columns:repeat(auto-fit,minmax(220px,1fr));

gap:20px;

margin-bottom:30px;

}

/* =========================
DASHBOARD GRID
========================= */

.dashboard{

display:grid;

grid-template-columns:repeat(auto-fit,minmax(320px,1fr));

gap:25px;

margin-top:30px;

}

/* =========================
PANELS
========================= */

.panel{

background:#020617;

padding:20px;

border-radius:10px;

border:1px solid #00ffcc33;

box-shadow:0 0 10px #00ffcc22;

text-align:center;

}

/* telemetry numbers */

.telemetry{

font-size:22px;

font-weight:bold;

}

/* AI analysis */

.ai{

font-size:18px;

margin-top:10px;

}

/* =========================
ALERTS
========================= */

.alarm{

color:red;

font-weight:bold;

font-size:26px;

margin-top:15px;

animation:blink 1s infinite;

}

@keyframes blink{

0%{opacity:1;}
50%{opacity:0.3;}
100%{opacity:1;}

}

/* =========================
CHARTS
========================= */

canvas{

background:#020617;

border-radius:10px;

padding:10px;

box-shadow:0 0 10px #00ffcc22;

}

/* =========================
BUTTONS
========================= */

.report-btn{

padding:12px 25px;

font-size:16px;

background:#00ffcc;

border:none;

border-radius:6px;

cursor:pointer;

font-weight:bold;

transition:0.3s;

}

.report-btn:hover{

background:#00ffaa;

}

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

footer{

background:#020617;

padding:15px;

text-align:center;

margin-top:auto;

border-top:1px solid #00ffcc33;

}
table{
background:#020617;
color:#00ffcc;
border-collapse:collapse;
}

th, td{
padding:10px;
border:1px solid #00ffcc;
}
.hero-img:hover{
transform:scale(1.02);
transition:0.3s;
}

.card:hover{
transform:translateY(-5px);
transition:0.3s;
}
/* ACTION BAR */

.action-bar{
display:flex;
gap:20px;
margin:30px 0;
}

/* BUTTONS */

.action-btn{
background:#00ffcc;
color:#000;
border:none;
padding:15px 25px;
font-size:16px;
font-weight:bold;
cursor:pointer;
border-radius:8px;
}

.action-btn:hover{
background:#00ccaa;
transform:scale(1.05);
transition:0.2s;
}
/* HERO */

.hero{
position:relative;
margin-bottom:50px;
}

.hero-img{
width:100%;
height:400px;
object-fit:cover;
border-radius:12px;
filter:brightness(0.5);
}

.hero-overlay{
position:absolute;
top:30%;
left:50px;
color:#00ffcc;
}

.hero-overlay h1{
font-size:42px;
margin-bottom:10px;
}

.hero-overlay p{
font-size:18px;
margin-bottom:20px;
}

/* ACTION BUTTONS */

.action-bar{
display:flex;
gap:15px;
}

.action-btn{
background:#00ffcc;
color:#000;
border:none;
padding:12px 20px;
font-weight:bold;
cursor:pointer;
border-radius:6px;
}

.action-btn:hover{
background:#00ccaa;
transform:scale(1.05);
transition:0.2s;
}

/* SECTION */

.section-title{
margin-top:40px;
color:#00ffcc;
}

/* GRID */

.system-grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:30px;
margin-top:20px;
}

/* CARD */

.system-card{
background:#020617;
border-radius:10px;
overflow:hidden;
box-shadow:0 0 20px #00ffcc22;
}

.system-img{
width:100%;
height:250px;
object-fit:cover;
}

.system-content{
padding:20px;
}

/* FLOW */

.flow{
display:flex;
flex-wrap:wrap;
align-items:center;
gap:15px;
margin-top:30px;
}

.flow-box{
background:#020617;
padding:10px 15px;
border:1px solid #00ffcc;
border-radius:6px;
}

.flow-arrow{
color:#00ffcc;
font-size:20px;
}



.step {
flex:1;
padding:10px;
text-align:center;
border-radius:6px;
background:#eee;
font-weight:bold;
}

.step.active{
    background:#007bff;
    color:white;
}

.step.done{
    background:#28a745;
    color:white;
}

.step.pending {
background:#ccc;
}

.section-desc {
    color: #bbb;
    font-size: 15px;
    margin-bottom: 20px;
    max-width: 700px;
    line-height: 1.5;
}
.step{
    position:relative;
}

.step.done::after{
    content:"✔";
    position:absolute;
    right:10px;
    top:8px;
    font-size:14px;
    color:white;
}
.progress-wrapper{
    width:100%;
    height:20px;
    background:#ddd;
    margin:15px 0;
    border-radius:10px;
    overflow:hidden;
}

#progressBar{
    height:100%;
    width:0%;
    background:#28a745;
    transition:0.3s;
}

#progressText{
    margin-bottom:20px;
    font-weight:bold;
}
.step.done{
    background:#28a745;
    color:white;
}