/* Shared code surfaces: editor and published article. */
.article-codeblock, .code-editor {
    --code-bg:#f6f8fa; --code-bar:#f0f3f6; --code-line:#dce1e7; --code-ink:#24292f;
    --code-muted:#57606a; --code-keyword:#a3294c; --code-string:#17623a; --code-number:#0550ae;
    --code-function:#6639a6; --code-comment:#687581;
    --code-guide:#8191a038;
}
.article-codeblock { border:1px solid var(--code-line); border-radius:10px; overflow:hidden; background:var(--code-bg); color:var(--code-ink); }
.dark .article-codeblock {
    --code-bg:#161b22; --code-bar:#1c222b; --code-line:#303945; --code-ink:#e6edf3;
    --code-muted:#a3aebc; --code-keyword:#ff9baf; --code-string:#a5d6af; --code-number:#8bc6ff;
    --code-function:#d7b5ff; --code-comment:#97a4b2;
    --code-guide:#b0bece30;
}
.code-indent { position:absolute; left:0; pointer-events:none; background-image:repeating-linear-gradient(to right,var(--code-guide) 0,var(--code-guide) 1px,transparent 1px,transparent 2ch); }
.code-block-header { display:flex; align-items:center; justify-content:space-between; gap:16px; min-height:40px; padding:5px 12px 5px 16px; background:var(--code-bar); border-bottom:1px solid var(--code-line); color:var(--code-muted); font:500 12px/1.5 -apple-system,BlinkMacSystemFont,"Noto Sans SC",sans-serif; }
.code-copy { border:0; border-radius:5px; padding:5px 8px; background:transparent; color:var(--code-muted); font:inherit; cursor:pointer; }
.code-copy:hover { background:var(--code-line); color:var(--code-ink); }
.code-copy:focus-visible, .article-codeblock .code-pre:focus-visible { outline:2px solid #0071e3; outline-offset:-3px; }
.article-codeblock .code-pre { margin:0; padding:16px; border:0; border-radius:0; background:var(--code-bg); overflow:auto; }
.article-codeblock .code-highlight { position:relative; display:block; color:var(--code-ink); font:400 14px/1.7 ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace; white-space:pre; tab-size:2; }
.article-codeblock :is(.hljs-keyword,.hljs-selector-tag,.hljs-meta .hljs-keyword) { color:var(--code-keyword); }
.article-codeblock :is(.hljs-string,.hljs-regexp,.hljs-addition,.hljs-meta .hljs-string) { color:var(--code-string); }
.article-codeblock :is(.hljs-number,.hljs-literal,.hljs-attr,.hljs-attribute,.hljs-variable,.hljs-template-variable) { color:var(--code-number); }
.article-codeblock :is(.hljs-title,.hljs-section,.hljs-selector-class,.hljs-built_in,.hljs-type) { color:var(--code-function); }
.article-codeblock :is(.hljs-comment,.hljs-quote,.hljs-meta) { color:var(--code-comment); }
.article-codeblock .hljs-deletion { color:var(--code-keyword); }
.article-codeblock .hljs-emphasis { font-style:italic; }
.article-codeblock .hljs-strong { font-weight:700; }
.article-codeblock ::selection { background:#0071e335; }

.content-admin #editorjs .code-editor { margin:8px 0; border:1px solid #dce1e7; border-radius:8px; background:#f8f9fb; color:#24292f; transition:border-color .15s; }
.content-admin #editorjs .code-editor:focus-within { border-color:#7aaddb; }
.content-admin #editorjs .ce-block:has(.code-editor):hover { background:transparent; }
.code-editor__header { display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:40px; padding:5px 10px 5px 14px; border-bottom:1px solid #e3e7ec; }
.code-editor__language { position:relative; }
.code-editor__language > summary { display:flex; align-items:center; gap:12px; min-height:28px; padding:4px 6px; border-radius:5px; color:#465462; cursor:pointer; list-style:none; font-size:12px; font-weight:500; }
.code-editor__language > summary::-webkit-details-marker { display:none; }
.code-editor__language > summary::after { content:""; width:6px; height:6px; border-right:1px solid currentColor; border-bottom:1px solid currentColor; transform:translateY(-2px) rotate(45deg); }
.code-editor__language > summary:hover, .code-editor__copy:hover { background:#e9edf2; }
.code-editor__languages { position:absolute; left:0; top:calc(100% + 6px); z-index:20; min-width:180px; max-height:250px; overflow:auto; padding:5px; border:1px solid #dce1e7; border-radius:8px; background:white; box-shadow:0 6px 20px #18243414; }
.content-admin .code-editor__languages button { display:block; width:100%; padding:8px 10px; border:0; border-radius:4px; background:none; color:#465462; text-align:left; font-size:12px; }
.content-admin .code-editor__languages button:hover { background:#f0f3f6; }
.content-admin .code-editor__languages button[aria-pressed="true"] { background:#eaf3fc; color:#0066c4; }
.code-editor__actions { display:flex; align-items:center; gap:4px; }
.content-admin :is(.code-editor__copy,.code-editor__format) { min-height:28px; padding:4px 8px; border:0; border-radius:5px; background:none; color:#576575; font-size:12px; white-space:nowrap; }
.code-editor__format:hover:not(:disabled) { background:#e9edf2; }
.content-admin #editorjs .code-editor__input {
    display:block; width:100%; min-height:144px; max-height:560px; margin:0; padding:16px;
    border:0; border-radius:0; background:transparent; color:#24292f; box-shadow:none;
    font:400 14px/23px ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
    white-space:pre; overflow:auto; overflow-wrap:normal; tab-size:2; resize:none; transition:none;
}
.code-editor__body { position:relative; overflow:hidden; }
.content-admin #editorjs .code-editor__highlight {
    position:absolute; inset:0; display:block; margin:0; padding:16px; border:0; border-radius:0;
    background:transparent; color:var(--code-ink); overflow:hidden; pointer-events:none; user-select:none;
    font:400 14px/23px ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
    white-space:pre; tab-size:2;
}
.content-admin #editorjs .code-editor__highlight code { position:relative; display:block; font:inherit; color:inherit; white-space:inherit; }
.content-admin #editorjs :is(.code-editor__input,.code-editor__highlight) { font-variant-ligatures:none; letter-spacing:normal; word-spacing:normal; text-align:left; direction:ltr; }
.content-admin #editorjs .code-editor__input { position:relative; color:transparent; -webkit-text-fill-color:transparent; caret-color:#24292f; }
.content-admin #editorjs .code-editor__input::placeholder { color:#8994a0; -webkit-text-fill-color:#8994a0; }
.content-admin #editorjs .code-editor__input::selection { background:#0071e330; }
.code-editor :is(.hljs-keyword,.hljs-selector-tag,.hljs-meta .hljs-keyword) { color:var(--code-keyword); }
.code-editor :is(.hljs-string,.hljs-regexp,.hljs-addition,.hljs-meta .hljs-string) { color:var(--code-string); }
.code-editor :is(.hljs-number,.hljs-literal,.hljs-attr,.hljs-attribute,.hljs-variable,.hljs-template-variable) { color:var(--code-number); }
.code-editor :is(.hljs-title,.hljs-section,.hljs-selector-class,.hljs-built_in,.hljs-type) { color:var(--code-function); }
.code-editor :is(.hljs-comment,.hljs-quote,.hljs-meta) { color:var(--code-comment); }
.content-admin #editorjs .code-editor__input:focus { outline:none; box-shadow:none; }
.code-editor__footer { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:4px 12px; padding:8px 14px; border-top:1px solid #e3e7ec; color:#667585; font-size:11px; line-height:1.5; }
@media (max-width:600px) {
    .article-codeblock .code-highlight { font-size:13px; }
    .article-codeblock .code-pre { padding:14px; }
    .content-admin #editorjs .code-editor__input { padding:12px; font-size:13px; }
    .content-admin #editorjs .code-editor__highlight { padding:12px; font-size:13px; }
}
@media (forced-colors:active) {
    .content-admin #editorjs .code-editor__highlight { display:none; }
    .content-admin #editorjs .code-editor__input { color:CanvasText; -webkit-text-fill-color:CanvasText; caret-color:CanvasText; }
}