body {
margin: 0;
font-family: "Courier New", monospace;
background: #070b08;
color: #c8ffd6;
}

/* TOP BAR */
.topbar {
position: fixed;
top: 0;
left: 0;
width: 100%;
background: rgb(16, 40, 20);
border-bottom: 2px solid rgb(255, 70, 70);
color: rgb(200, 255, 214);
padding: 8px;
text-align: center;
font-size: 13px;
z-index: 999;
}

/* HEADER */
.header {
text-align: center;
padding: 35px 20px;
background: #0c1410;
border-bottom: 1px solid #1eff88;
margin-top: 35px;
}

.header h1 {
margin: 0;
color: #1eff88;
letter-spacing: 3px;
}

.tagline {
display: block;
opacity: 0.7;
margin-top: 5px;
}

.status {
margin-top: 10px;
font-size: 12px;
opacity: 0.7;
}

/* NAV */
.nav {
display: flex;
justify-content: center;
flex-wrap: wrap;
gap: 12px;
padding: 10px;
background: #0a120d;
border-bottom: 1px solid #143d2a;
}

.nav a {
color: #aef7cc;
text-decoration: none;
padding: 5px 10px;
}

.nav a:hover {
color: #1eff88;
border: 1px solid #1eff88;
}

/* MAIN CONTAINER */
.container {
max-width: 900px;
margin: auto;
padding: 20px;
}

.hero {
text-align: center;
padding: 20px;
border: 1px solid #143d2a;
margin-bottom: 20px;
}

/* GRID CARDS */
.grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 10px;
}

.card {
border: 1px solid #143d2a;
padding: 12px;
background: rgba(10,20,15,0.4);
}

/* BUTTONS */
.buttons {
margin-top: 15px;
}

.btn {
display: inline-block;
padding: 10px 16px;
border: 1px solid #1eff88;
color: #1eff88;
text-decoration: none;
transition: 0.2s;
margin-top: 10px;
cursor: pointer;
background: transparent;
font-family: "Courier New", monospace;
}

.btn:hover {
background: #1eff88;
color: black;
}

/* FOOTER */
.footer {
text-align: center;
padding: 15px;
font-size: 12px;
opacity: 0.6;
margin-top: 20px;
}