:root {
    --bg: #1e1e1e;
    --panel: #252526;
    --border: #333;
    --html-color: #e34c26;
    --css-color: #264de4;
    --js-color: #f7df1e;
}

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

body {
    background: var(--bg);
    color: white;
    font-family: 'Segoe UI', sans-serif;
    height: 100vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

header {
    height: 50px;
    background: var(--panel);
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 20px;
    border-bottom: 1px solid var(--border);
}

main { display: grid; grid-template-columns: 1fr 1fr; flex: 1; }

.editor-side { display: grid; grid-template-rows: repeat(3, 1fr); border-right: 2px solid #000; }

.editor-box { position: relative; display: flex; flex-direction: column; }
.html-border { border-left: 5px solid var(--html-color); }
.css-border { border-left: 5px solid var(--css-color); }
.js-border { border-left: 5px solid var(--js-color); }

.editor-box label {
    position: absolute; top: 5px; right: 10px;
    font-size: 10px; color: #888; z-index: 10;
}

/* Highlighting Overlay Logic */
.container { position: relative; flex: 1; }

textarea, #html-highlight {
    position: absolute; top: 0; left: 0;
    width: 100%; height: 100%;
    padding: 20px; font-family: 'Consolas', monospace;
    font-size: 14px; line-height: 1.5;
    white-space: pre-wrap; word-wrap: break-word;
}

textarea {
    background: transparent; color: transparent;
    caret-color: white; border: none; outline: none;
    resize: none; z-index: 2;
}

#css-code, #js-code { color: #d4d4d4; background: var(--bg); }

#html-highlight { z-index: 1; color: #9cdcfe; overflow: hidden; }

/* Syntax Colors */
.token-tag { color: #569cd6; } /* Blue < > */
.token-name { color: #9cdcfe; } /* Tag names */
.token-attr { color: #ce9178; } /* Attributes */

/* Console Styles */
.preview-side { display: flex; flex-direction: column; background: white; }
iframe { flex: 2; border: none; }
#console-output {
    flex: 1; background: #000; color: #0f0;
    font-family: monospace; border-top: 4px solid var(--border);
    overflow-y: auto;
}
.console-header { background: #222; padding: 5px; font-size: 10px; color: #aaa; }
.log-entry { padding: 2px 10px; border-bottom: 1px solid #111; }