:root {
    --bg-color: #191919;
    --preview-bg: #222222;
    --line-num-bg: #1c1c1c;
    --font-main: 16px/1.5 monospace; /* 1.5倍行高即 24px */
    --highlight-color: rgba(202, 216, 0, 0.2);
    --active-text: #cad800;
    --single-line-height: 24px; /* 定义单行物理高度 */
}

html, body { width: 100%; height: 100%; overflow: hidden; margin: 0; background: var(--bg-color); }
.editor-container { display: flex; width: 100%; height: 100%; }

/* 左侧行号区 */
.line-number-gutter {
    width: 45px; height: 100%; background: var(--line-num-bg);
    color: #555; font: var(--font-main); overflow: hidden;
    flex-shrink: 0; border-right: 1px solid #333;
    padding: 10px 0; box-sizing: border-box; user-select: none;
}

.line-number-gutter div { 
    text-align: center; 
    width: 100%; 
    box-sizing: border-box;
    /* 关键：固定 line-height 确保数字永远在第一行顶部 */
    line-height: var(--single-line-height); 
}

.line-number-gutter div.active {
    background: var(--highlight-color);
    color: var(--active-text);
    box-shadow: inset -2px 0 0 var(--active-text); /* 用内阴影代替 border 避免抖动 */
}

.viewport { flex: 1; height: 100%; position: relative; overflow: auto; }

.text-editor, .content-preview {
    position: absolute; top: 0; left: 0; width: 100%;
    margin: 0; padding: 10px; box-sizing: border-box;
    font: var(--font-main); white-space: pre-wrap;
    word-wrap: break-word; word-break: break-all; min-height: 100%;
}

.text-editor {
    z-index: 2; background: transparent; color: transparent;
    caret-color: #ffffff; border: none; outline: none; resize: none; overflow: hidden;
}

.content-preview { z-index: 1; background: var(--preview-bg); color: #ddd; pointer-events: none; }

/* 内容行高度至少为单行高度 */
.content-preview div { min-height: var(--single-line-height); }
.key { color: #cad800; }
.keys { color: #68CDFE; }
.keyo { color: #BB86AE; }
.keyi { color: #C39178; }

.text-editor::selection { background: rgba(255, 255, 255, 0.15); }