.code-actions { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:.7rem 1rem; padding:1rem; margin:1rem 0; border:1px solid #bae6fd; border-radius:12px; background:#f0f9ff; }
.code-actions p { margin:.2rem 0; }
.code-actions .code-result { flex-basis:100%; }
.editor-help { color:#475569; font-size:.9rem; }
.editor-actions { margin:.8rem 0; align-items:center; }
.code-result { overflow-wrap:anywhere; font-size:.9rem; color:#075985; }
.code-editor-shell { --code-line:1.75rem; --code-pad:1rem; color-scheme:dark; min-width:0; margin:.6rem 0; overflow:hidden; border:1px solid #334155; border-radius:12px; background:#0f172a; box-shadow:0 4px 14px #0f172a15; }
.code-editor-shell:focus-within { border-color:#38bdf8; outline:3px solid #0284c733; outline-offset:2px; }
.code-editor-heading { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:.6rem; padding:.65rem 1rem; border-bottom:1px solid #334155; background:#1e293b; color:#cbd5e1; font:.8rem/1.5 system-ui,sans-serif; }
.code-editor-heading strong { color:#7dd3fc; letter-spacing:.06em; }
.code-editor-viewport { position:relative; overflow:hidden; }
.code-editor-layer { position:absolute; inset:0 0 0 3.5rem; overflow:hidden; pointer-events:none; }
.code-editor-shell pre, .code-editor-shell textarea.code-editor-input, .code-editor-gutter { box-sizing:border-box; margin:0; font:.94rem/var(--code-line) ui-monospace,SFMono-Regular,Consolas,"Liberation Mono",monospace; tab-size:4; white-space:pre; letter-spacing:normal; font-variant-ligatures:none; text-align:left; text-transform:none; word-break:normal; overflow-wrap:normal; }
.code-editor-shell pre { width:max-content; min-width:100%; max-width:none; padding:var(--code-pad); border:0; border-radius:0; background:transparent; color:#e2e8f0; overflow:visible; }
.code-editor-shell textarea.code-editor-input { position:relative; display:block; width:calc(100% - 3.5rem); margin-left:3.5rem; height:300px; min-height:220px; max-height:none; box-shadow:none; padding:var(--code-pad); border:0; border-radius:0; background:transparent; color:transparent; caret-color:#f8fafc; -webkit-text-fill-color:transparent; resize:vertical; overflow:auto; outline:none; scrollbar-color:#64748b #0f172a; }
/* El marc exterior indica el focus sense tapar el codi ni la numeració. */
.code-editor-shell textarea.code-editor-input:focus-visible { outline:none!important; outline-offset:0!important; }
.shader-editors .code-editor-shell textarea.code-editor-input { min-height:340px; }
.code-editor-shell textarea::selection { background:#38bdf84d; }
.code-editor-gutter { position:absolute; top:0; left:0; width:3.5rem; min-height:100%; padding:var(--code-pad) .75rem; text-align:right; color:#94a3b8; background:#111c30; border-right:1px solid #334155; pointer-events:none; }
.syntax-keyword { color:#c4b5fd; }
.syntax-number { color:#fdba74; }
.syntax-function { color:#67e8f9; }
.syntax-variable, .syntax-property { color:#93c5fd; }
.syntax-string { color:#bef264; }
.syntax-comment { color:#94a3b8; font-style:italic; }
.syntax-operator { color:#f9a8d4; }
.syntax-punctuation { color:#fde68a; }
.code-editor-tools { display:flex; flex-wrap:wrap; gap:.4rem; }
.code-editor-tools button { font:600 .8rem/1.4 system-ui,sans-serif; padding:.35rem .65rem; border:1px solid #475569; border-radius:6px; background:#26364d; color:#f1f5f9; cursor:pointer; }
.code-editor-tools button:hover { background:#334b68; border-color:#7dd3fc; }
.code-editor-tools button:focus-visible { outline:2px solid #7dd3fc; outline-offset:2px; }
.code-editor-tools button:first-child { border-color:#64748b; }
.code-editor-footer { display:flex; flex-wrap:wrap; justify-content:space-between; gap:.4rem 1rem; padding:.55rem 1rem; border-top:1px solid #334155; background:#162237; color:#cbd5e1; font:.75rem/1.5 system-ui,sans-serif; }
.code-editor-footer [role=status]:empty { display:none; }
.code-editor-footer [role=status]:not(:empty) { flex-basis:100%; color:#bef264; }
.code-editor-shell.is-expanded textarea.code-editor-input { height:65vh; min-height:340px; }
.code-editor-shell textarea.code-editor-input::placeholder { color:#94a3b8; -webkit-text-fill-color:#94a3b8; opacity:1; }
@media(max-width:750px) { .code-editor-shell { --code-line:1.6rem; --code-pad:.85rem; } .code-editor-shell pre, .code-editor-shell textarea.code-editor-input, .code-editor-gutter { font-size:.9rem; } }
@media(forced-colors:active) { .code-editor-shell textarea.code-editor-input { color:CanvasText; -webkit-text-fill-color:CanvasText; background:Canvas; } .code-editor-layer { display:none; } }
@media print { .code-editor-shell, .code-actions, .editor-actions, .code-result { display:none; } }