* { box-sizing: border-box; }

body {
margin: 0;
padding: 15px;
background: #070b09;
color: #b9e7c4;
font-family: monospace;
}

.panel { max-width: 760px; margin: auto; }

header, .card {
border: 1px solid #285b39;
background: #0b120e;
padding: 15px;
margin-bottom: 12px;
}

h1 { font-size: 25px; color: #7cff9b; margin: 0 0 8px; }
h2 { font-size: 15px; color: #7cff9b; margin-top: 0; }
hr { border-color: #285b39; }
.small { font-size: 12px; color: #72967b; }
.status { color: #7cff9b; font-weight: bold; }
.alert { color: #7cff9b; }
.warning { color: #ffcf70; }
.critical { color: #ff6666; }

.grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 9px;
margin-top: 10px;
}

button, select {
width: 100%;
padding: 12px 8px;
background: #102519;
color: #b9e7c4;
border: 1px solid #438655;
font-family: monospace;
font-size: 12px;
}

button { cursor: pointer; }
button:active { background: #245b35; }
button.danger { border-color: #a84a4a; color: #ffaaaa; }
button:disabled { opacity: .5; }

.bar {
height: 9px;
background: #1a2a20;
margin: 8px 0 12px;
}

.fill {
height: 100%;
width: 64%;
background: #69e889;
transition: width .3s;
}

.energy-fill { width: 78%; }

#log {
font-size: 12px;
line-height: 1.7;
overflow-wrap: anywhere;
}

.entry {
border-bottom: 1px solid #1b3523;
padding: 7px 0;
}

.sector {
border: 1px solid #285b39;
padding: 10px;
margin: 7px 0;
}

.sector-title {
display: flex;
justify-content: space-between;
gap: 8px;
margin-bottom: 7px;
}

.locked { color: #ff7777; }
.open { color: #7cff9b; }

.error {
margin-top: 12px;
padding: 10px;
border: 1px solid #a84a4a;
color: #ffaaaa;
overflow-wrap: anywhere;
}

@media (max-width: 440px) {
.grid { grid-template-columns: 1fr; }
}