/* VoxBB editor + content tokens.
   Themes override these on :root (or on a theme scope) instead of editing component CSS.
   Dark values apply for the OS preference and for the theme's explicit dark switch. */
:root {
  --nxe-field: #ffffff;
  --nxe-bar: #f2f3f5;
  --nxe-raise: #ffffff;
  --nxe-line: #dcdfe4;
  --nxe-line-strong: #c5c9d0;
  --nxe-text: #1c1e22;
  --nxe-muted: #626873;
  --nxe-faint: #8b909a;
  --nxe-hover: rgba(20, 24, 32, .06);
  --nxe-press: rgba(20, 24, 32, .1);
  --nxe-primary: #2f78bd;
  --nxe-primary-hover: #2869a7;
  --nxe-on-primary: #ffffff;
  --nxe-link: #1f68b0;
  --nxe-soft: rgba(47, 120, 189, .14);
  --nxe-danger: #c93636;
  --nxe-ok: #1a7f37;
  --nxe-radius: 16px;
  --nxe-shadow: 0 10px 30px rgba(15, 20, 30, .14), 0 2px 6px rgba(15, 20, 30, .08);
  --nxe-font: inherit;
  --nxe-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;

  --nx-code-bg: #f3f4f6;
  --nx-quote-bg: #f6f7f9;
  --nx-tc-red: #cf222e; --nx-tc-orange: #bc4c00; --nx-tc-yellow: #946400; --nx-tc-green: #1a7f37; --nx-tc-teal: #0f766e;
  --nx-tc-blue: #0a5fd1; --nx-tc-purple: #8250df; --nx-tc-pink: #bf3989; --nx-tc-gray: #6e7781;
  --nx-tc-neutral: #6e7781; --nx-tc-amber: #a06000;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --nxe-field: #141517; --nxe-bar: #1f2023; --nxe-raise: #232428; --nxe-line: #2b2d31; --nxe-line-strong: #3b3e44;
    --nxe-text: #e6e5e2; --nxe-muted: #9a9da4; --nxe-faint: #6f737b; --nxe-hover: rgba(255,255,255,.06); --nxe-press: rgba(255,255,255,.1);
    --nxe-primary: #3a86c8; --nxe-primary-hover: #4a95d6; --nxe-link: #72b4ee; --nxe-soft: rgba(90,160,225,.18); --nxe-danger: #f07070; --nxe-ok: #6fcf7c;
    --nxe-shadow: 0 14px 40px rgba(0,0,0,.5), 0 2px 8px rgba(0,0,0,.35);
    --nx-code-bg: #0f1012; --nx-quote-bg: #1c1d20;
    --nx-tc-red: #ff7b72; --nx-tc-orange: #ffa657; --nx-tc-yellow: #e3c35a; --nx-tc-green: #6fcf7c; --nx-tc-teal: #4fd1c5;
    --nx-tc-blue: #79b8ff; --nx-tc-purple: #c297ff; --nx-tc-pink: #f58ac8; --nx-tc-gray: #9aa1a9; --nx-tc-neutral: #9aa1a9; --nx-tc-amber: #e9b04d;
  }
}
:root[data-theme="dark"] {
  --nxe-field: #141517; --nxe-bar: #1f2023; --nxe-raise: #232428; --nxe-line: #2b2d31; --nxe-line-strong: #3b3e44;
  --nxe-text: #e6e5e2; --nxe-muted: #9a9da4; --nxe-faint: #6f737b; --nxe-hover: rgba(255,255,255,.06); --nxe-press: rgba(255,255,255,.1);
  --nxe-primary: #3a86c8; --nxe-primary-hover: #4a95d6; --nxe-link: #72b4ee; --nxe-soft: rgba(90,160,225,.18); --nxe-danger: #f07070; --nxe-ok: #6fcf7c;
  --nxe-shadow: 0 14px 40px rgba(0,0,0,.5), 0 2px 8px rgba(0,0,0,.35);
  --nx-code-bg: #0f1012; --nx-quote-bg: #1c1d20;
  --nx-tc-red: #ff7b72; --nx-tc-orange: #ffa657; --nx-tc-yellow: #e3c35a; --nx-tc-green: #6fcf7c; --nx-tc-teal: #4fd1c5;
  --nx-tc-blue: #79b8ff; --nx-tc-purple: #c297ff; --nx-tc-pink: #f58ac8; --nx-tc-gray: #9aa1a9; --nx-tc-neutral: #9aa1a9; --nx-tc-amber: #e9b04d;
}

/* VoxBB rendered content. Used by posts (server-rendered) AND inside the editor, so what you write is what readers see. */
.nexus-content { color: var(--nxe-text); overflow-wrap: anywhere; line-height: 1.55; }
.nexus-content > *:first-child { margin-top: 0; }
.nexus-content > *:last-child { margin-bottom: 0; }
.nexus-content p { margin: 0 0 .65em; }
.nexus-content h1, .nexus-content h2, .nexus-content h3 { line-height: 1.25; margin: .9em 0 .4em; font-weight: 700; }
.nexus-content h1 { font-size: 1.6em; }
.nexus-content h2 { font-size: 1.32em; }
.nexus-content h3 { font-size: 1.12em; }
.nexus-content ul, .nexus-content ol { padding-left: 1.6em; margin: 0 0 .65em; }
.nexus-content li > p { margin: .15em 0; }
.nexus-content a { color: var(--nxe-link); text-decoration: underline; text-underline-offset: 2px; }
.nexus-content blockquote { margin: .4em 0 .8em; padding: .6em 1em; border-left: 3px solid var(--nxe-primary); background: var(--nx-quote-bg); border-radius: 0 10px 10px 0; }
.nexus-content blockquote[data-author]::before { content: attr(data-author) " said:"; display: block; font-weight: 700; margin-bottom: .35em; }
.nexus-content .nx-quote-head { display: block; font-weight: 700; margin-bottom: .35em; color: var(--nxe-text); text-decoration: none; }
.nexus-content blockquote.nx-quote::before { content: none; }
.nexus-content code { font: .88em/1.4 var(--nxe-mono); background: var(--nx-code-bg); border: 1px solid var(--nxe-line); padding: .08em .35em; border-radius: 5px; }
.nexus-content pre { margin: .4em 0 .8em; background: var(--nx-code-bg); border: 1px solid var(--nxe-line); border-radius: 10px; padding: 12px 14px; overflow-x: auto; }
.nexus-content pre code { background: none; border: 0; padding: 0; font-size: 13.5px; line-height: 1.6; white-space: pre; }
.nexus-content hr { border: 0; border-top: 1px solid var(--nxe-line-strong); margin: 1.1em 0; }
.nexus-content img { display: block; max-width: 100%; height: auto; border-radius: 10px; margin: .3em 0 .7em; }
.nexus-content .nx-mention { color: var(--nxe-link); background: var(--nxe-soft); padding: 0 .3em; border-radius: 5px; font-weight: 600; white-space: nowrap; text-decoration: none; }
.nexus-content .tableWrapper, .nexus-content .nx-table-wrap { overflow-x: auto; margin: .4em 0 .8em; }
.nexus-content table { border-collapse: collapse; min-width: 60%; }
.nexus-content td, .nexus-content th { border: 1px solid var(--nxe-line-strong); padding: 6px 10px; vertical-align: top; position: relative; min-width: 60px; }
.nexus-content th { background: var(--nxe-bar); font-weight: 600; text-align: left; }
.nexus-content td > p, .nexus-content th > p { margin: 0; }
.nexus-content td > p:empty::after, .nexus-content th > p:empty::after { content: "\00a0"; }

.nexus-content .nx-ispoiler { background: var(--nxe-text); color: transparent; border-radius: 4px; padding: 0 .2em; cursor: pointer; transition: color .15s, background .15s; }
.nexus-content .nx-ispoiler.is-shown { background: var(--nxe-hover); color: inherit; }

.nexus-content .nx-box { --bc: var(--nx-tc-neutral); margin: .4em 0 .8em; border: 1px solid color-mix(in srgb, var(--bc) 38%, var(--nxe-line)); background: color-mix(in srgb, var(--bc) 9%, var(--nxe-field)); border-radius: 12px; overflow: hidden; }
.nexus-content .nx-box--blue { --bc: var(--nx-tc-blue); }
.nexus-content .nx-box--green { --bc: var(--nx-tc-green); }
.nexus-content .nx-box--amber { --bc: var(--nx-tc-amber); }
.nexus-content .nx-box--red { --bc: var(--nx-tc-red); }
.nexus-content .nx-box--purple { --bc: var(--nx-tc-purple); }
.nexus-content .nx-box--neutral { background: var(--nx-quote-bg); border-color: var(--nxe-line-strong); }
.nexus-content .nx-box-title, .nexus-content .nx-box > summary { padding: 8px 14px; font-weight: 700; color: color-mix(in srgb, var(--bc) 70%, var(--nxe-text)); border-bottom: 1px solid color-mix(in srgb, var(--bc) 25%, var(--nxe-line)); }
.nexus-content .nx-box > summary { cursor: pointer; list-style: none; display: flex; gap: 8px; align-items: center; border-bottom-color: transparent; }
.nexus-content .nx-box > summary::-webkit-details-marker { display: none; }
.nexus-content .nx-box > summary::before { content: ""; width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-45deg); transition: transform .15s; margin-right: 2px; }
.nexus-content .nx-box[open] > summary { border-bottom-color: color-mix(in srgb, var(--bc) 25%, var(--nxe-line)); }
.nexus-content .nx-box[open] > summary::before { transform: rotate(45deg); }
.nexus-content .nx-box-body { padding: 10px 14px; }
.nexus-content .nx-box-body > *:last-child { margin-bottom: 0; }

.nexus-content .nx-embed { position: relative; max-width: 640px; margin: .4em 0 .8em; border-radius: 12px; overflow: hidden; background: #000; }
.nexus-content .nx-embed--video { aspect-ratio: 16 / 9; }
.nexus-content .nx-embed--audio { background: none; }
.nexus-content .nx-embed iframe { display: block; width: 100%; height: 100%; border: 0; }
.nexus-content .nx-embed--audio iframe { height: 152px; }
.nexus-content .nx-embed-link { display: inline-flex; gap: 8px; align-items: center; padding: 10px 14px; border: 1px solid var(--nxe-line-strong); border-radius: 12px; background: var(--nxe-bar); color: var(--nxe-text); text-decoration: none; }

/* hljs token colors follow the palette so code reads well in both modes */
.nexus-content .hljs-comment, .nexus-content .hljs-quote { color: var(--nx-tc-gray); font-style: italic; }
.nexus-content .hljs-keyword, .nexus-content .hljs-selector-tag, .nexus-content .hljs-literal { color: var(--nx-tc-purple); }
.nexus-content .hljs-string, .nexus-content .hljs-regexp, .nexus-content .hljs-addition { color: var(--nx-tc-green); }
.nexus-content .hljs-number, .nexus-content .hljs-symbol, .nexus-content .hljs-bullet { color: var(--nx-tc-orange); }
.nexus-content .hljs-title, .nexus-content .hljs-section { color: var(--nx-tc-blue); }
.nexus-content .hljs-attr, .nexus-content .hljs-attribute, .nexus-content .hljs-property, .nexus-content .hljs-selector-class { color: var(--nx-tc-teal); }
.nexus-content .hljs-built_in, .nexus-content .hljs-type { color: var(--nx-tc-yellow); }
.nexus-content .hljs-variable, .nexus-content .hljs-template-variable, .nexus-content .hljs-tag, .nexus-content .hljs-name, .nexus-content .hljs-deletion { color: var(--nx-tc-red); }
.nexus-content .hljs-meta { color: var(--nx-tc-pink); }
.nexus-content .nx-h1 { font-size: 1.6em; }
.nexus-content .nx-h2 { font-size: 1.32em; }
.nexus-content .nx-h3 { font-size: 1.12em; }
.nexus-content .nx-attach { display: inline-block; }
.nexus-content .nx-attach-missing { color: var(--nxe-muted); font-style: italic; }

/* VoxBB editor chrome. Everything is prefixed nxe- and scoped, so themes can't collide with it by accident. */
.nexus-editor, .nexus-editor-layer { font-family: var(--nxe-font); }
.nexus-editor .ic, .nexus-editor-layer .ic { width: 18px; height: 18px; flex: none; display: block; }
.nexus-editor kbd, .nexus-editor-layer kbd { font: 500 11px/1 system-ui, sans-serif; padding: 3px 5px; border-radius: 5px; background: var(--nxe-hover); border: 1px solid var(--nxe-line); color: var(--nxe-muted); white-space: nowrap; }
.nexus-editor [hidden], .nexus-editor-layer [hidden] { display: none !important; }
.nexus-editor button, .nexus-editor-layer button, .nexus-editor-layer input, .nexus-editor-layer select { font: inherit; color: inherit; }
.nexus-editor button, .nexus-editor-layer button { cursor: pointer; }
.nexus-editor :focus-visible, .nexus-editor-layer :focus-visible { outline: 2px solid var(--nxe-primary); outline-offset: 2px; }
.nexus-editor:not(.is-mounted) textarea { width: 100%; min-height: 160px; }

.nxe-frame { position: relative; background: var(--nxe-field); color: var(--nxe-text); border: 1px solid var(--nxe-line); border-radius: var(--nxe-radius); transition: border-color .15s, box-shadow .15s; }
.nxe-frame.is-active { border-color: var(--nxe-line-strong); }
.nxe-frame:focus-within { box-shadow: 0 0 0 3px var(--nxe-soft); }
.nxe-frame.is-shaking { animation: nxe-shake .3s; }
@keyframes nxe-shake { 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }
.nxe-mode-label { position: absolute; top: -10px; left: 16px; font-size: 12px; font-weight: 600; padding: 0 8px; border-radius: 6px; background: var(--nxe-primary); color: var(--nxe-on-primary); line-height: 20px; z-index: 1; }
.nxe-mode-label:empty { display: none; }
.nxe-surface { min-height: 120px; padding: 16px 20px 8px; cursor: text; display: flex; flex-direction: column; }
.nxe-frame.is-active .nxe-surface { min-height: 170px; }
.nxe-frame[data-mode="preview"] .nxe-surface { cursor: default; }
.nxe-editor { flex: 1; display: flex; flex-direction: column; }
.nxe-editor .ProseMirror { flex: 1; outline: none; }
.nxe-bb { display: block; width: 100%; min-height: 200px; flex: 1; resize: vertical; border: 0; background: transparent; outline: none; font: 14px/1.6 var(--nxe-mono); color: var(--nxe-text); padding: 0; }
.nxe-preview-empty { color: var(--nxe-muted); }

/* Editor-only content affordances */
.nxe-editor .ProseMirror p.is-editor-empty:first-child::before,
.nxe-editor .ProseMirror .is-empty[data-placeholder]:not(:only-child)::before { content: attr(data-placeholder); color: var(--nxe-faint); pointer-events: none; float: left; height: 0; }
.nxe-editor .ProseMirror-selectednode { outline: 2px solid var(--nxe-primary); outline-offset: 2px; }
.nxe-editor .selectedCell::after { content: ""; position: absolute; inset: 0; background: var(--nxe-soft); pointer-events: none; }
.nxe-editor .nx-ispoiler { background: repeating-linear-gradient(135deg, var(--nxe-hover) 0 6px, transparent 6px 12px); color: inherit; border-bottom: 1px dashed var(--nxe-muted); cursor: text; }
.nxe-editor img[src^="blob:"] { opacity: .55; filter: grayscale(.4); }
.nxe-editor .nx-box-head { display: flex; align-items: center; gap: 6px; padding: 5px 6px; border-bottom: 1px solid color-mix(in srgb, var(--bc) 25%, var(--nxe-line)); }
.nxe-editor .nx-box-kind { display: inline-flex; align-items: center; gap: 5px; border: 0; background: var(--nxe-hover); border-radius: 7px; padding: 3px 8px; font-size: 12.5px; font-weight: 600; color: var(--nxe-muted); }
.nxe-editor .nx-box-kind .ic { width: 13px; height: 13px; }
.nxe-editor .nx-box-kind[aria-pressed="true"] { color: var(--nxe-text); }
.nxe-editor .nx-box-title-input { flex: 1; min-width: 60px; border: 0; background: none; outline: none; font: inherit; font-weight: 700; padding: 3px 4px; color: color-mix(in srgb, var(--bc) 70%, var(--nxe-text)); }
.nxe-editor .nx-box-title-input::placeholder { color: var(--nxe-faint); font-weight: 500; }
.nxe-editor .nx-box-swatches { display: flex; gap: 4px; }
.nxe-editor .nx-box-sw { width: 16px; height: 16px; border-radius: 50%; border: 0; padding: 0; background: var(--c); }
.nxe-editor .nx-box-sw--neutral { --c: var(--nx-tc-neutral); } .nxe-editor .nx-box-sw--blue { --c: var(--nx-tc-blue); } .nxe-editor .nx-box-sw--green { --c: var(--nx-tc-green); }
.nxe-editor .nx-box-sw--amber { --c: var(--nx-tc-amber); } .nxe-editor .nx-box-sw--red { --c: var(--nx-tc-red); } .nxe-editor .nx-box-sw--purple { --c: var(--nx-tc-purple); }
.nxe-editor .nx-box-sw[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--nxe-field), 0 0 0 4px var(--c); }
.nxe-editor .nx-box-del { border: 0; background: none; color: var(--nxe-faint); border-radius: 6px; padding: 3px; display: grid; }
.nxe-editor .nx-box-del .ic { width: 15px; height: 15px; }
.nxe-editor .nx-box-del:hover { color: var(--nxe-danger); background: var(--nxe-hover); }
.nxe-editor .nx-media-card { display: flex; align-items: center; gap: 14px; margin: .4em 0 .8em; padding: 12px 14px; border: 1px solid var(--nxe-line-strong); border-radius: 12px; background: var(--nxe-bar); max-width: 560px; }
.nxe-editor .nx-media-play { --pc: #e33; width: 48px; height: 34px; border-radius: 9px; background: var(--pc); flex: none; position: relative; }
.nxe-editor .nx-media-play::after { content: ""; position: absolute; left: 50%; top: 50%; transform: translate(-35%, -50%); border-left: 12px solid #fff; border-top: 8px solid transparent; border-bottom: 8px solid transparent; }
.nxe-editor .nx-media-card--vimeo .nx-media-play { --pc: #1ab7ea; } .nxe-editor .nx-media-card--spotify .nx-media-play { --pc: #1db954; }
.nxe-editor .nx-media-card--soundcloud .nx-media-play { --pc: #f50; } .nxe-editor .nx-media-card--twitter .nx-media-play { --pc: #555; } .nxe-editor .nx-media-card--tiktok .nx-media-play { --pc: #222; }
.nxe-editor .nx-media-meta { display: flex; flex-direction: column; min-width: 0; font-size: 14px; }
.nxe-editor .nx-media-meta span { color: var(--nxe-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Toolbar pill under the text. Hidden until the editor is in use, sticky while writing long posts. */
.nxe-toolbar { position: sticky; bottom: 10px; z-index: 5; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: 0fr; transition: grid-template-rows .2s ease, margin .2s ease; margin: 0 10px; }
.nxe-frame.is-active .nxe-toolbar { grid-template-rows: 1fr; margin: 0 10px 10px; }
.nxe-tb-inner { overflow: hidden; min-height: 0; }
.nxe-frame.is-active .nxe-tb-inner { overflow: visible; }
.nxe-tb-pill { display: flex; align-items: center; gap: 8px; background: var(--nxe-bar); border: 1px solid var(--nxe-line); border-radius: 12px; padding: 4px 6px; }
.nxe-tb-main { display: flex; align-items: center; gap: 2px; flex: 1; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.nxe-tb-main::-webkit-scrollbar { display: none; }
.nxe-tb-group { display: flex; gap: 2px; }
.nxe-tb-side { display: flex; gap: 2px; padding-left: 8px; border-left: 1px solid var(--nxe-line); }
.nxe-tb-sep { width: 1px; height: 20px; background: var(--nxe-line); margin: 0 4px; flex: none; }
.nxe-tb { display: inline-flex; align-items: center; justify-content: center; gap: 1px; height: 34px; min-width: 32px; padding: 0 6px; border: 0; border-radius: 8px; background: none; color: var(--nxe-muted); flex: none; transition: background .12s, color .12s; }
.nxe-tb .nxe-caret { width: 11px; height: 11px; margin-right: -3px; opacity: .7; }
.nxe-tb:hover:not(:disabled) { background: var(--nxe-hover); color: var(--nxe-text); }
.nxe-tb:active:not(:disabled) { background: var(--nxe-press); }
.nxe-tb.is-on { background: var(--nxe-soft); color: var(--nxe-link); }
.nxe-tb.is-open { background: var(--nxe-press); color: var(--nxe-text); }
.nxe-tb:disabled { opacity: .35; cursor: default; }
.nxe-tb--sm { height: 28px; min-width: 28px; padding: 0 5px; }
.nxe-tb--sm .ic { width: 16px; height: 16px; }
.nxe-tb--danger:hover:not(:disabled) { color: var(--nxe-danger); }

.nxe-meta { display: flex; gap: 14px; align-items: center; font-size: 13px; color: var(--nxe-faint); min-height: 18px; }
.nxe-status { display: inline-flex; align-items: center; gap: 5px; }
.nxe-status .ic { width: 14px; height: 14px; color: var(--nxe-ok); }
.nxe-tray { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.nxe-att { display: flex; align-items: center; gap: 10px; padding: 6px; border: 1px solid var(--nxe-line); border-radius: 12px; background: var(--nxe-field); color: var(--nxe-text); max-width: 320px; }
.nxe-att img { width: 44px; height: 44px; border-radius: 8px; object-fit: cover; }
.nxe-att-meta { display: flex; flex-direction: column; min-width: 0; font-size: 13px; }
.nxe-att-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 140px; font-weight: 600; }
.nxe-att-size { color: var(--nxe-muted); }
.nxe-att-act { display: flex; align-items: center; gap: 2px; margin-left: auto; }

.nxe-btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; height: 36px; padding: 0 14px; border-radius: 10px; border: 1px solid transparent; font-size: 15px; font-weight: 600; background: none; white-space: nowrap; }
.nxe-btn .ic { width: 17px; height: 17px; }
.nxe-btn--ghost { border-color: var(--nxe-line); color: var(--nxe-link); background: var(--nxe-field); }
.nxe-btn--ghost:hover { background: var(--nxe-hover); }
.nxe-btn--primary { background: var(--nxe-primary); color: var(--nxe-on-primary); }
.nxe-btn--primary:hover { background: var(--nxe-primary-hover); }
.nxe-btn--sm { height: 28px; padding: 0 10px; font-size: 13px; border-radius: 7px; }

/* Floating layers */
.nexus-editor-layer { position: relative; z-index: 1000; color: var(--nxe-text); }
.nxe-pop, .nxe-suggest, .nxe-bubble, .nxe-blockbar { position: fixed; z-index: 1000; background: var(--nxe-raise); color: var(--nxe-text); border: 1px solid var(--nxe-line-strong); border-radius: 12px; box-shadow: var(--nxe-shadow); }
.nxe-pop { padding: 6px; min-width: 210px; max-width: min(340px, calc(100vw - 16px)); animation: nxe-pop .12s ease-out; }
@keyframes nxe-pop { from { opacity: 0; transform: translateY(4px) scale(.98); } }
.nxe-pop-head { font-size: 12.5px; font-weight: 600; color: var(--nxe-faint); padding: 6px 8px 4px; }
.nxe-pop-note { font-size: 13px; color: var(--nxe-muted); margin: 6px 8px 4px; line-height: 1.4; }
.nxe-pop-err { font-size: 13px; color: var(--nxe-danger); margin: 4px 2px 0; }
.nxe-pop-err:empty { display: none; }
.nxe-pop-sep { height: 1px; background: var(--nxe-line); margin: 5px 4px; }
.nxe-mi { display: flex; align-items: center; gap: 10px; width: 100%; border: 0; background: none; padding: 7px 8px; border-radius: 8px; text-align: left; font-size: 15px; color: var(--nxe-text); }
.nxe-mi .ic { color: var(--nxe-muted); }
.nxe-mi:hover, .nxe-mi:focus-visible, .nxe-mi.is-active { background: var(--nxe-hover); outline: none; }
.nxe-mi.is-on .ic:first-child { color: var(--nxe-link); }
.nxe-mi-l { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nxe-mi-hint { font-size: 13px; color: var(--nxe-faint); white-space: nowrap; }
.nxe-mi kbd { margin-left: 8px; }
.nxe-mi .nxe-mi-check { color: var(--nxe-link); width: 16px; height: 16px; }
.nxe-mi--danger:hover, .nxe-mi--danger:hover .ic { color: var(--nxe-danger); }
.nxe-pop-form { display: flex; flex-direction: column; gap: 8px; padding: 2px 4px 4px; width: 300px; max-width: 100%; }
.nxe-pop-form input, .nxe-pop--emoji input { width: 100%; height: 36px; border: 1px solid var(--nxe-line-strong); background: var(--nxe-field); border-radius: 9px; padding: 0 10px; outline: none; }
.nxe-pop-form input:focus, .nxe-pop--emoji input:focus { border-color: var(--nxe-primary); box-shadow: 0 0 0 3px var(--nxe-soft); }
.nxe-pop-row { display: flex; justify-content: flex-end; gap: 8px; }
.nxe-pop-row--tight input { flex: 1; }
.nxe-dropzone { display: flex; flex-direction: column; align-items: center; gap: 2px; width: 300px; max-width: 100%; margin: 2px 4px 8px; padding: 16px 10px; border: 1.5px dashed var(--nxe-line-strong); border-radius: 10px; background: var(--nxe-field); color: var(--nxe-text); font-size: 14px; }
.nxe-dropzone .ic { width: 22px; height: 22px; color: var(--nxe-link); margin-bottom: 4px; }
.nxe-dropzone span { color: var(--nxe-muted); font-size: 13px; }
.nxe-dropzone:hover { border-color: var(--nxe-primary); }
.nxe-swatches { display: grid; grid-template-columns: repeat(9, 1fr); gap: 6px; padding: 4px 8px 8px; }
.nxe-sw { width: 24px; height: 24px; border-radius: 50%; border: 0; background: var(--sw); padding: 0; }
.nxe-sw.is-on { box-shadow: 0 0 0 2px var(--nxe-raise), 0 0 0 4px var(--sw); }
.nxe-pop--emoji { width: 340px; padding: 8px; }
.nxe-emoji-tabs { display: flex; gap: 2px; margin: 8px 0 6px; border-bottom: 1px solid var(--nxe-line); padding-bottom: 6px; }
.nxe-emoji-tab { border: 0; background: none; font-size: 18px; padding: 4px 8px; border-radius: 7px; filter: grayscale(.7); opacity: .7; }
.nxe-emoji-tab[aria-selected="true"] { background: var(--nxe-hover); filter: none; opacity: 1; }
.nxe-emoji-grid { display: grid; grid-template-columns: repeat(8, 1fr); gap: 2px; max-height: 210px; overflow-y: auto; }
.nxe-emo { border: 0; background: none; font-size: 24px; line-height: 1; padding: 6px 0; border-radius: 8px; }
.nxe-emo:hover, .nxe-emo:focus-visible { background: var(--nxe-hover); outline: none; }
.nxe-emoji-foot { display: flex; align-items: center; gap: 8px; min-height: 34px; margin-top: 6px; padding: 4px 4px 0; border-top: 1px solid var(--nxe-line); font-size: 13px; color: var(--nxe-muted); }
.nxe-emoji-foot code { font: 13px var(--nxe-mono); color: var(--nxe-text); }
.nxe-emo-big { font-size: 22px; }
.nxe-emo-sm { font-size: 18px; width: 18px; text-align: center; }
.nxe-tgrid { display: grid; grid-template-columns: repeat(7, 22px); gap: 4px; padding: 4px 8px; }
.nxe-tcell { width: 22px; height: 22px; border: 1px solid var(--nxe-line-strong); background: var(--nxe-field); border-radius: 4px; padding: 0; }
.nxe-tcell.is-on { background: var(--nxe-soft); border-color: var(--nxe-primary); }
.nxe-suggest { padding: 6px; width: 300px; max-height: 360px; overflow-y: auto; }
.nxe-av { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--nxe-primary); color: #fff; font-size: 10px; font-weight: 700; object-fit: cover; flex: none; }
.nxe-sug-foot { display: flex; gap: 4px; align-items: center; flex-wrap: wrap; font-size: 12px; color: var(--nxe-faint); padding: 6px 8px 2px; border-top: 1px solid var(--nxe-line); margin-top: 4px; }
.nxe-bubble { display: flex; align-items: center; gap: 2px; padding: 4px; }
.nxe-bubble .nxe-tb { height: 30px; min-width: 30px; }
.nxe-blockbar { display: flex; align-items: center; gap: 1px; padding: 3px; border-radius: 10px; }
.nxe-lang { height: 28px; border: 0; background: var(--nxe-hover); border-radius: 7px; padding: 0 6px; font-size: 13px; outline: none; }
.nxe-tip { position: fixed; z-index: 1010; pointer-events: none; display: flex; align-items: center; gap: 8px; padding: 5px 8px; border-radius: 8px; background: var(--nxe-text); color: var(--nxe-field); font-size: 13px; font-weight: 600; opacity: 0; transform: translateY(2px); transition: opacity .1s, transform .1s; white-space: nowrap; }
.nxe-tip.is-on { opacity: 1; transform: none; }
.nxe-tip kbd { background: transparent; border-color: color-mix(in srgb, var(--nxe-field) 35%, transparent); color: inherit; opacity: .8; }
.nxe-toast { position: fixed; left: 50%; bottom: 24px; z-index: 1020; transform: translate(-50%, 20px); opacity: 0; background: var(--nxe-text); color: var(--nxe-field); padding: 10px 16px; border-radius: 10px; font-weight: 600; font-size: 15px; transition: opacity .2s, transform .2s; pointer-events: none; max-width: calc(100vw - 32px); text-align: center; }
.nxe-toast.is-on { opacity: 1; transform: translate(-50%, 0); }

@media (max-width: 720px) {
  .nxe-tb-pill { flex-wrap: wrap; }
  .nxe-tb-main { flex-basis: 100%; }
  .nxe-tb-side { border-left: 0; padding-left: 0; border-top: 1px solid var(--nxe-line); padding-top: 4px; flex: 1; justify-content: flex-end; }
}
@media (prefers-reduced-motion: reduce) {
  .nexus-editor *, .nexus-editor-layer * { animation: none !important; transition: none !important; }
}

/* VoxBB flexible image/layout authoring */
.nxe-editor .nx-layout{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin:12px 0 18px;padding:10px;border:1px dashed var(--nxe-line-strong);border-radius:12px;background:color-mix(in srgb,var(--nxe-bar) 72%,transparent)}
.nxe-editor .nx-layout--3,.nxe-editor [data-nb-layout="3"]{grid-template-columns:repeat(3,minmax(0,1fr))}.nxe-editor .nx-layout-cell{min-width:0;min-height:92px;padding:10px;border:1px solid var(--nxe-line);border-radius:9px;background:var(--nxe-field)}
.voxbb-draggable-image{cursor:grab}.voxbb-draggable-image.is-dragging{cursor:grabbing;opacity:.72}.voxbb-image-ui[hidden]{display:none!important}.voxbb-image-ui{position:absolute;inset:0;z-index:40;pointer-events:none}.voxbb-image-selection{position:absolute;border:2px solid var(--nxe-primary);border-radius:10px;box-shadow:0 0 0 3px color-mix(in srgb,var(--nxe-primary) 18%,transparent);pointer-events:none}.voxbb-image-selection.is-resizing{border-style:dashed}.voxbb-image-meter{position:absolute;right:7px;bottom:7px;padding:3px 6px;border-radius:5px;background:rgba(5,12,20,.8);color:#fff;font:700 11px/1 system-ui}.voxbb-image-handle{position:absolute;width:16px;height:16px;border:2px solid var(--nxe-field);border-radius:4px;background:var(--nxe-primary);pointer-events:auto;touch-action:none}.voxbb-image-handle--nw{left:-9px;top:-9px;cursor:nwse-resize}.voxbb-image-handle--ne{right:-9px;top:-9px;cursor:nesw-resize}.voxbb-image-handle--sw{left:-9px;bottom:-9px;cursor:nesw-resize}.voxbb-image-handle--se{right:-9px;bottom:-9px;cursor:nwse-resize}.voxbb-image-toolbar{position:absolute;display:flex;align-items:center;gap:4px;max-width:min(760px,calc(100% - 8px));padding:5px;border:1px solid var(--nxe-line-strong);border-radius:9px;background:var(--nxe-field);box-shadow:0 10px 28px rgba(0,0,0,.28);pointer-events:auto;white-space:nowrap;overflow-x:auto}.voxbb-image-toolbar button{min-width:31px;height:30px;padding:0 7px;border:1px solid transparent;border-radius:6px;background:transparent;color:var(--nxe-muted);font:700 12px/1 system-ui;cursor:pointer}.voxbb-image-toolbar button:hover,.voxbb-image-toolbar button.is-active{background:var(--nxe-soft);color:var(--nxe-text);border-color:var(--nxe-line)}.voxbb-image-toolbar-sep{width:1px;height:20px;background:var(--nxe-line);margin:0 2px}.voxbb-image-move-hint{padding:0 6px;color:var(--nxe-faint);font-size:11px;font-weight:650}@media(max-width:700px){.nxe-editor .nx-layout,.nxe-editor .nx-layout--3,.nxe-editor [data-nb-layout="3"]{grid-template-columns:1fr}.voxbb-image-move-hint{display:none}}