:root {
    --bg-dark: #0a0a0a;
    --terminal-bg: #121212;
    --vscode-bg: #1e1e1e;
    --text-green: #00ff41;
    --text-white: #ffffff;
    --accent-cyan: #00e5ff;
    --prompt-purple: #bd93f9;
    --vscode-blue: #007acc;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
    background: radial-gradient(circle, #1a1a1a 0%, #000000 100%);
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: 'Fira Code', 'Courier New', monospace;
}

.hidden { display: none !important; }

/* Window Container */
.terminal-window {
    width: 90%;
    max-width: 1000px;
    height: 80vh;
    background: var(--terminal-bg);
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.9);
    border: 1px solid #333;
    overflow: hidden;
}

/* Top Bar & Buttons */
.terminal-bar {
    background: #252525;
    padding: 12px 18px;
    display: flex;
    align-items: center;
    border-bottom: 1px solid #333;
}

.buttons { display: flex; gap: 8px; align-items: center; }

.buttons span { 
    width: 12px; height: 12px; border-radius: 50%; 
    display: flex; justify-content: center; align-items: center;
    font-family: Arial, sans-serif; font-size: 9px; font-weight: bold;
    cursor: pointer; transition: all 0.2s ease; color: transparent;
}

.close { background: #ff5f56; }
.minimize { background: #ffbd2e; }
.expand { background: #27c93f; }

.buttons:hover .close { color: rgba(0, 0, 0, 0.6); }
.buttons:hover .minimize:before { content: "−"; color: rgba(0, 0, 0, 0.6); }
.buttons:hover .expand:before { content: "+"; color: rgba(0, 0, 0, 0.6); font-size: 8px; }

.title { flex-grow: 1; text-align: center; color: #888; font-size: 13px; margin-right: 50px; }

/* Terminal Screen */
#terminal-screen {
    flex-grow: 1; padding: 25px; overflow-y: auto; color: var(--text-green);
}

.line { margin-bottom: 8px; text-shadow: 0 0 5px rgba(0, 255, 65, 0.3); line-height: 1.5; white-space: pre-wrap;}
.highlight { color: var(--accent-cyan); font-weight: bold; }
.prompt { color: var(--prompt-purple); font-weight: bold; margin-right: 10px; }
.user { color: #87ff5f; }

#command-input {
    background: transparent; border: none; color: var(--text-white);
    font-family: inherit; font-size: 16px; outline: none; width: 70%;
}

/* VS Code Screen */
#vs-code-editor { display: flex; height: 100%; background: var(--vscode-bg); color: #d4d4d4; }

.editor-sidebar {
    width: 200px; background: #252526; border-right: 1px solid #333; padding: 15px 10px;
}

.sidebar-title { font-size: 11px; font-weight: bold; color: #858585; margin-bottom: 15px; }

.file-list { list-style: none; }
.file-list li {
    padding: 6px 10px; cursor: pointer; font-size: 13px; border-radius: 4px; transition: background 0.2s;
}
.file-list li:hover { background: #2a2d2e; color: #fff; }

.editor-main { flex-grow: 1; display: flex; flex-direction: column; }

.tabs { background: #2d2d2d; display: flex; height: 35px; }
.tab { 
    padding: 0 20px; height: 100%; display: flex; align-items: center; 
    background: var(--vscode-bg); font-size: 12px; border-top: 1px solid var(--vscode-blue);
}

.close-tab { margin-left: 10px; cursor: pointer; font-size: 16px; color: #858585; }
.close-tab:hover { color: #ff5f56; }

.code-area { 
    flex-grow: 1; padding: 25px; font-family: 'Fira Code', monospace; 
    font-size: 14px; overflow-y: auto; line-height: 1.6;
}

#file-content { color: #9cdcfe; white-space: pre-wrap; }

.editor-footer { 
    background: var(--vscode-blue); color: white; height: 22px; 
    display: flex; justify-content: space-between; padding: 0 10px; font-size: 11px; align-items: center;
}