:root {
    --bg-color: #1e1e1e;
    --sidebar-bg: #252526;
    --text-color: #d4d4d4;
    --sidebar-text: #858585;
    --border-color: #333;
    --caret-color: white;
    --selection-bg: rgba(255, 255, 255, 0.1);
    --kwd-color: #569cd6;
    --str-color: #ce9178;
    --com-color: #6a9955;
    --fun-color: #dcdcaa;
    --num-color: #b5cea8;
}

body.light-mode {
    --bg-color: #ffffff;
    --sidebar-bg: #f3f3f3;
    --text-color: #000000;
    --sidebar-text: #2b91af;
    --border-color: #e0e0e0;
    --caret-color: black;
    --selection-bg: rgba(0, 0, 0, 0.1);
    --kwd-color: #0000ff;
    --str-color: #a31515;
    --com-color: #008000;
    --fun-color: #795e26;
    --num-color: #098658;
}

* { box-sizing: border-box; }
body { margin: 0; height: 100vh; display: flex; flex-direction: column; background: var(--bg-color); color: var(--text-color); font-family: sans-serif; }

.toolbar { height: 50px; background: var(--sidebar-bg); border-bottom: 1px solid var(--border-color); display: flex; align-items: center; justify-content: space-between; padding: 0 20px; }
.brand { font-weight: bold; font-family: monospace; font-size: 1.5em; color: #61afef; }

.editor-container { flex-grow: 1; display: flex; overflow: hidden; position: relative; }
.line-numbers { width: 50px; background: var(--sidebar-bg); color: var(--sidebar-text); text-align: right; padding: 10px 10px; font-family: 'Consolas', monospace; font-size: 14px; line-height: 24px; border-right: 1px solid var(--border-color); user-select: none; overflow: hidden; }

.code-area { flex-grow: 1; position: relative; }
#editing, #highlighting { margin: 0; padding: 10px; border: 0; width: 100%; height: 100%; position: absolute; top: 0; left: 0; font-family: 'Consolas', monospace; font-size: 14px; line-height: 24px; tab-size: 4; white-space: pre; overflow: auto; }

#editing { z-index: 1; color: transparent; background: transparent; caret-color: var(--caret-color); resize: none; outline: none; -webkit-text-fill-color: transparent; }
#highlighting { z-index: 0; pointer-events: none; }

.kwd { color: var(--kwd-color); }
.str { color: var(--str-color); }
.com { color: var(--com-color); }
.fun { color: var(--fun-color); }
.num { color: var(--num-color); }

.status-bar { height: 30px; background: #007acc; color: white; display: flex; align-items: center; justify-content: space-between; padding: 0 15px; font-size: 12px; }
.btn-primary { background: #007acc; color: white; border: none; padding: 6px 12px; border-radius: 4px; cursor: pointer; }
.btn-secondary { background: transparent; border: 1px solid var(--border-color); color: var(--text-color); padding: 6px 12px; border-radius: 4px; cursor: pointer; margin-left: 5px; }