/* Base & Reset */
body {
    background-color: #1e1e1e;
    color: #cccccc;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    margin: 0;
    height: 100vh;
    display: flex;
    overflow: hidden;
}

#ide-container {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
}

/* Header / Top Navigation */
.ide-header {
    background-color: #333333;
    border-bottom: 1px solid #252526;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 20px;
    height: 50px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    z-index: 10;
}

.logo h1 {
    font-size: 1.2rem;
    margin: 0;
    color: #ffffff;
    letter-spacing: 1px;
}

.logo span { color: #007acc; }

.ide-toolbar {
    display: flex;
    align-items: center;
    gap: 15px;
    font-size: 0.9rem;
}

.separator { width: 1px; height: 20px; background-color: #555; }

/* Inputs */
select {
    background-color: #3c3c3c;
    color: #fff;
    border: 1px solid #555;
    padding: 4px 8px;
    border-radius: 3px;
    outline: none;
}

.cpu-group { display: flex; align-items: center; gap: 10px; }
.cpu-badge { background: #007acc; color: white; padding: 2px 6px; border-radius: 3px; font-size: 0.8rem; font-weight: bold; width: 60px; text-align: center;}
.turbo-label { display: flex; align-items: center; gap: 4px; color: #ff5555; font-weight: bold; font-size: 0.8rem; cursor: pointer; }

/* Main Workspace (Split Screen) */
.ide-workspace {
    display: flex;
    flex: 1;
    overflow: hidden;
}

.panel {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.panel-header {
    background-color: #252526;
    height: 35px;
    display: flex;
    align-items: center;
    padding: 0 10px;
}

/* Left: Editor */
.editor-panel {
    flex: 1;
    border-right: 1px solid #444;
    background-color: #1e1e1e;
    min-width: 300px;
}

.tab.active {
    background-color: #1e1e1e;
    color: #4AF626; /* Retro accent for the filename */
    padding: 8px 15px;
    border-top: 2px solid #007acc;
    font-family: monospace;
    font-size: 0.9rem;
}

.editor-content {
    flex: 1;
    overflow-y: auto;
    padding: 15px;
}

#source-viewer {
    margin: 0;
    font-family: 'Courier New', Courier, monospace;
    font-size: 0.9rem;
    line-height: 1.5;
    white-space: pre;
}

/* Syntax Highlighting (Lightweight) */
.syn-kw { color: #569cd6; font-weight: bold; } /* Keywords */
.syn-str { color: #ce9178; } /* Strings */
.syn-num { color: #b5cea8; } /* Numbers */
.syn-com { color: #6a9955; font-style: italic; } /* Comments */

/* Right: Execution */
.execution-panel {
    flex: 1;
    background-color: #000;
    display: flex;
    flex-direction: column;
    min-width: 350px;
}

.action-bar {
    justify-content: space-between;
    background-color: #333333;
    border-bottom: 1px solid #111;
}

.btn-icon {
    background: transparent;
    border: none;
    color: #cccccc;
    cursor: pointer;
    padding: 6px 10px;
    border-radius: 3px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s, color 0.2s;
}

.btn-icon:hover {
    background: #444;
    color: #fff;
}

.action-left, .action-right { display: flex; gap: 5px; }

/* Canvas wrapper for centering */
.canvas-container {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    padding: 10px;
}

#vga-display {
    background-color: #000;
    width: 100%;
    max-width: 640px;
    aspect-ratio: 640 / 400; /* Forces 4:3 native ratio */
    height: auto;
    image-rendering: pixelated; 
    box-shadow: 0 0 20px rgba(0,0,0,0.8);
    border: 1px solid #333;
}

/* Responsive Wrap for small screens */
@media (max-width: 800px) {
    .ide-workspace { flex-direction: column; }
    .editor-panel { border-right: none; border-bottom: 1px solid #444; height: 40vh; flex: none; }
}