.code-editor, .code-editor-with-tools, .code-editor-field { min-width: 0; }
.code-editor-with-tools > textarea[hidden], .code-editor-field > textarea[hidden] { display: none !important; }
.code-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; padding: .5rem; min-width: 0; background: var(--surface, var(--card)); border: 1px solid var(--border); border-bottom: 0; border-radius: 10px 10px 0 0; }
.code-toolbar button { padding: .3rem .55rem; min-height: 2.2rem; min-width: 2.2rem; font: .875rem/1.3 ui-monospace, Consolas, monospace; border: 1px solid var(--border); border-radius: 7px; color: var(--text); background: var(--code, var(--code-bg)); }
.code-toolbar .code-reset { margin-left: auto; }
.code-view { font: .875rem/1.6 ui-monospace, Consolas, monospace; tab-size: 4; background: var(--code, var(--code-bg)); white-space: pre-wrap; overflow-wrap: anywhere; padding: 1rem; border-radius: 10px; max-height: 350px; overflow: auto; margin: .7rem 0; }
.code-line-number { display: inline-block; width: calc(var(--line-digits, 2) * 1ch + 1ch); margin-right: 1.1ch; text-align: right; color: var(--muted); user-select: none; font-weight: normal; }
.code-line-number::before { content: attr(data-line); }
.code-view.numbered-code { white-space: normal; }
.numbered-code .code-line { display: grid; grid-template-columns: calc(var(--line-digits, 2) * 1ch + 1ch) minmax(0, 1fr); column-gap: 1.1ch; }
.numbered-code .code-line-number { width: auto; margin: 0; align-self: start; }
.code-line-text { min-width: 0; white-space: pre-wrap; }
.code-comment { color: var(--editor-comment, #52634d); } .code-string { color: var(--editor-string, #9e4328); } .code-number { color: var(--editor-number, #834098); } .code-keyword { color: var(--editor-keyword, #174fc4); font-weight: 700; }
:root[data-theme=night] { --editor-comment: #a4b99b; --editor-string: #eaa988; --editor-number: #dab0ed; --editor-keyword: #a8c2fa; }
:root[data-theme=black-white] { --editor-comment: #000; --editor-string: #000; --editor-number: #000; --editor-keyword: #000; --editor-keyword-weight: normal; }
@media (prefers-color-scheme: dark) { :root:not([data-theme]) { --editor-comment: #a4b99b; --editor-string: #eaa988; --editor-number: #dab0ed; --editor-keyword: #a8c2fa; } }