body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
margin: 0;
padding: 20px;
background-color: #f5f5f5;
}
.container {
max-width: 1200px;
margin: 0 auto;
background: white;
padding: 30px;
border-radius: 8px;
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}
h1 {
color: #333;
margin-bottom: 30px;
}
.controls {
margin-bottom: 30px;
}
.btn {
padding: 12px 24px;
border: none;
border-radius: 4px;
cursor: pointer;
font-size: 14px;
margin-right: 10px;
transition: background-color 0.2s;
}
.btn-primary {
background-color: #007bff;
color: white;
}
.btn-primary:hover {
background-color: #0056b3;
}
.btn-secondary {
background-color: #6c757d;
color: white;
}
.btn-secondary:hover {
background-color: #545b62;
}
.context-display {
margin-bottom: 30px;
padding: 20px;
background-color: #f8f9fa;
border-radius: 4px;
border: 1px solid #dee2e6;
}
.context-display pre {
background-color: #ffffff;
padding: 15px;
border-radius: 4px;
overflow-x: auto;
font-size: 12px;
}
.status-log {
border-top: 2px solid #dee2e6;
padding-top: 20px;
}
#logContainer {
height: 300px;
overflow-y: auto;
background-color: #f8f9fa;
border: 1px solid #dee2e6;
border-radius: 4px;
padding: 15px;
}
.log-entry {
margin-bottom: 10px;
padding: 8px;
background-color: white;
border-left: 3px solid #007bff;
font-family: 'Monaco', 'Consolas', monospace;
font-size: 12px;
white-space: pre-wrap;
}
