/* SITUATION-MAP MASTER CORE v6.8.0 */
:root {
    --bg-dark: #08080a;
    --accent: #00f2ff; 
    --hazard-red: #ff3333;
    --hazard-amber: #ffcc00;
    --panel-border: #1a1a1f;
    --inner-border: #26262b;
}

html, body { 
    height: 100%; margin: 0; background: #000; 
    font-family: 'Courier New', monospace; color: var(--accent);
    overflow: hidden;
}

#map { position: absolute; top: 0; bottom: 0; left: 0; right: 0; z-index: 1; }

/* TACTICAL PANES */
.tactical-pane {
    position: absolute; background: #0c0c0f;
    border: 1px solid var(--panel-border); z-index: 10000;
    display: flex; flex-direction: column; width: 360px;
    box-shadow: 0 0 20px rgba(0,0,0,0.8);
}

.pane-header {
    background: #141419; padding: 10px 14px; font-size: 0.75rem; 
    font-weight: bold; cursor: grab; display: flex; 
    justify-content: space-between; border-bottom: 1px solid var(--panel-border);
}

.pane-content { padding: 15px; }

/* UI COMPONENTS: SLIDERS & BARS */
.system-box { border: 1px solid var(--inner-border); padding: 12px; margin-bottom: 15px; }
.box-label { font-size: 0.65rem; color: var(--accent); display: block; margin-bottom: 10px; font-weight: bold; }

.sub-label-row { display: flex; justify-content: space-between; font-size: 0.55rem; color: #666; margin-bottom: 4px; }

progress { width: 100%; height: 4px; appearance: none; margin-bottom: 12px; }
progress::-webkit-progress-bar { background: #1a1a1a; }
progress::-webkit-progress-value { background: var(--accent); }

input[type=range] { width: 100%; background: transparent; appearance: none; }
input[type=range]::-webkit-slider-runnable-track { width: 100%; height: 2px; background: #333; }
input[type=range]::-webkit-slider-thumb { 
    appearance: none; height: 12px; width: 12px; border-radius: 50%; 
    background: #888; border: 1px solid #fff; cursor: pointer; margin-top: -5px;
}

.tactical-input {
    width: 100%; background: #000; border: 1px solid var(--accent);
    color: var(--accent); padding: 8px; font-family: monospace; font-size: 0.7rem; box-sizing: border-box;
}

.key-row { display: flex; align-items: center; margin-bottom: 6px; font-size: 0.65rem; }
.key-dot { width: 8px; height: 8px; border-radius: 50%; margin-right: 10px; }

#tactical-footer {
    position: absolute; bottom: 0; width: 100%; height: 25px;
    background: #000; font-size: 0.6rem; color: #444;
    text-align: center; line-height: 25px; z-index: 10001;
}

.chassis-btn {
    width: 100%; background: #000; border: 1px solid var(--accent);
    color: var(--accent); padding: 8px; cursor: pointer; font-size: 0.7rem; margin-top: 5px;
}