:root {
    --bg: #E5E5E5;
    --text: #1A1A1A;
    --monitor-bg: #000000;
    --monitor-text: #FFFFFF;
    --border: #A0A0A0;
}

body {
    background: var(--bg);
    color: var(--text);
    font-family: 'IBM Plex Mono', monospace;
    margin: 0; padding: 0;
    text-transform: uppercase;
    overflow-x: hidden;
}

/* The CRT Scanline Layer */
.crt-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.05) 50%),
                linear-gradient(90deg, rgba(255, 0, 0, 0.01), rgba(0, 255, 0, 0.01), rgba(0, 0, 255, 0.01));
    background-size: 100% 3px, 3px 100%;
    pointer-events: none; z-index: 10;
}

#monitor {
    background: var(--monitor-bg);
    color: var(--monitor-text);
    height: 40vh;
    padding: 20px;
    border-bottom: 3px double var(--text);
}

.monitor-grid { display: flex; gap: 30px; }

.dithered {
    width: 200px; height: 200px;
    border: 1px solid var(--monitor-text);
    image-rendering: pixelated;
    filter: grayscale(1) contrast(200%);
}

.terminal-table {
    width: 100%; border-collapse: collapse;
    margin-bottom: 60px; /* Space for footer */
}

.terminal-table th, .terminal-table td {
    padding: 12px; border-bottom: 1px solid var(--border);
    text-align: left; font-size: 14px;
}

.req-btn {
    background: none; border: 1px solid var(--text);
    font-family: inherit; cursor: pointer; padding: 2px 8px;
}

.req-btn:hover { background: var(--text); color: var(--bg); }

#function-bar {
    position: fixed; bottom: 0; width: 100%;
    background: #333; color: #AAA; display: flex; height: 40px;
}

.f-key {
    flex: 1; line-height: 40px; text-align: center;
    border-right: 1px solid #000; cursor: pointer; font-size: 12px;
}

.f-key.active { background: var(--bg); color: var(--text); font-weight: bold; }