:root {
    /* JSON 语法配色：保持站点原有方案，不随主题改动 */
    --json-key: #92278f;
    --json-string: #3ab54a;
    --json-integer: #1890ff;
    --json-decimal: #13c2c2;
    --json-boolean: #fa8c16;
    --json-null: #e53935;
    --json-punct: #333;
    --fold-accent: #0284c7;
    --search-highlight: rgba(250, 204, 21, 0.45);
    --editor-bg: #ffffff;
    --gutter-bg: #f8fafc;
    --cm-selection: rgba(14, 165, 233, 0.2);
    --cm-activeline: rgba(14, 165, 233, 0.05);
}

.workspace {
    --input-pane-width: 50%;
    display: flex;
    gap: 0;
    height: calc(100dvh - var(--chrome-h));
    min-height: 420px;
    border-bottom: 1px solid var(--border);
}

.workspace.fullscreen {
    position: fixed;
    inset: 0;
    z-index: 9999;
    height: 100vh;
    background: var(--bg);
}

.workspace.input-hidden .pane-input,
.workspace.input-hidden .pane-resizer {
    display: none;
}

.workspace.input-hidden .pane-output {
    flex: 1;
    width: 100%;
}

.pane {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    background: var(--editor-bg);
}

/* 面板顶部主色分隔线 */
.pane-output::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--primary), transparent);
    z-index: 3;
    pointer-events: none;
}

.pane-input {
    flex: none;
    width: var(--input-pane-width);
    min-width: 160px;
}

.pane-output {
    flex: 1;
    min-width: 160px;
}

/* ── 拖拽分隔条 ─────────────────────────── */
.pane-resizer {
    flex: none;
    width: 6px;
    cursor: col-resize;
    background: var(--subtle-bg);
    border-left: 1px solid var(--border);
    border-right: 1px solid var(--border);
    position: relative;
    z-index: 4;
    transition: background 0.18s ease, box-shadow 0.18s ease;
}

.pane-resizer::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 2px;
    height: 36px;
    border-radius: 2px;
    background: var(--text-mute);
    pointer-events: none;
    transition: background 0.18s ease;
}

.pane-resizer:hover,
.pane-resizer:focus-visible,
.workspace.resizing .pane-resizer {
    background: var(--surface-hover);
    box-shadow: var(--glow-soft);
    outline: none;
}

.pane-resizer:hover::after,
.pane-resizer:focus-visible::after,
.workspace.resizing .pane-resizer::after {
    background: var(--primary);
}

.workspace.resizing {
    cursor: col-resize;
    user-select: none;
}

/* ── 面板头部 / 工具栏 ───────────────────── */
.pane-header {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    padding: 9px 12px;
    font-size: 12px;
    color: var(--text-dim);
    border-bottom: 1px solid var(--border);
    background: var(--subtle-bg);
    box-sizing: border-box;
}

.pane-header-toolbar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.pane-title {
    flex-shrink: 0;
    position: relative;
    padding-left: 12px;
    font-family: var(--font-mono);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--text-dim);
}

.pane-title::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--primary);
    box-shadow: 0 0 0 2px rgba(14, 165, 233, 0.2);
}

.toolbar {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.toolbar-group {
    display: flex;
    align-items: center;
    gap: 4px;
}

.toolbar-divider {
    width: 1px;
    height: 16px;
    flex: none;
    background: var(--border);
}

.output-search {
    margin-left: auto;
    width: 170px;
    max-width: 100%;
    padding: 5px 12px;
    font-size: 12px;
    font-family: var(--font-mono);
    color: var(--text);
    background: var(--pane-bg-solid);
    border: 1px solid var(--border);
    border-radius: 7px;
    outline: none;
    transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.output-search::placeholder {
    color: var(--text-mute);
}

.output-search:focus {
    border-color: var(--primary);
    box-shadow: var(--ring);
}

.btn-icon {
    position: relative;
    border: 1px solid var(--border);
    background: var(--pane-bg-solid);
    border-radius: 7px;
    padding: 5px 11px;
    font-size: 12px;
    font-family: var(--font-mono);
    letter-spacing: 0.3px;
    cursor: pointer;
    color: var(--text-dim);
    transition: color 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease, transform 0.12s ease;
}

.btn-icon:hover {
    color: var(--primary-ink);
    border-color: var(--border-strong);
    background: var(--surface);
    box-shadow: var(--glow-soft);
}

.btn-icon:active {
    transform: translateY(1px);
}

.btn-icon.active {
    color: var(--btn-fg);
    font-weight: 600;
    background: linear-gradient(135deg, var(--primary-lift), var(--primary));
    border-color: transparent;
    box-shadow: 0 2px 10px rgba(14, 165, 233, 0.4);
}

.btn-icon.active:hover {
    color: var(--btn-fg);
    filter: brightness(1.06);
}

/* ── CodeMirror ─────────────────────────── */
.pane .CodeMirror {
    flex: 1;
    height: auto !important;
    /* 编辑器字体在此统一声明，输入栏与输出栏共用，不要在输出栏单独覆盖 */
    font-family: monospace;
    font-size: 14px;
    line-height: 1.5;
    color: var(--text);
    background: var(--editor-bg);
}

#input-editor,
#output-editor {
    display: none;
}

.output-editor-wrap {
    flex: 1;
    min-height: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    background: var(--editor-bg);
}

.output-editor-wrap .CodeMirror {
    flex: 1;
    background: var(--editor-bg);
}

.output-editor-wrap .CodeMirror-scroll {
    padding: 12px 8px 12px 4px;
}

/* 光标 / 选区 / 当前行 */
.pane .CodeMirror-cursor {
    border-left: 2px solid var(--primary-ink);
}

.pane .CodeMirror-selected,
.pane .CodeMirror-line::selection,
.pane .CodeMirror-line > span::selection,
.pane .CodeMirror-line > span > span::selection {
    background: var(--cm-selection);
}

.pane .CodeMirror-focused .CodeMirror-selected {
    background: var(--cm-selection);
}

.pane .CodeMirror-activeline-background {
    background: var(--cm-activeline);
}

.pane .CodeMirror-matchingbracket {
    color: var(--primary-ink) !important;
    background: rgba(14, 165, 233, 0.16);
    outline: none;
}

.pane .CodeMirror-nonmatchingbracket {
    color: var(--json-null) !important;
}

/* 行号槽 */
.pane .CodeMirror-gutters,
.output-editor-wrap .CodeMirror-gutters {
    background: var(--gutter-bg);
    border-right: 1px solid var(--border);
}

.output-editor-wrap .CodeMirror-linenumber,
.pane .CodeMirror-linenumber {
    color: var(--text-mute);
    padding: 0 8px 0 4px;
    min-width: 28px;
    text-align: right;
}

/* 折叠按钮：主色圆角方框 */
.output-editor-wrap .CodeMirror-foldgutter {
    width: 24px;
}

.output-editor-wrap .CodeMirror-foldgutter .CodeMirror-gutter-elt {
    display: flex;
    align-items: center;
    justify-content: center;
}

.output-editor-wrap .CodeMirror-foldgutter-open,
.output-editor-wrap .CodeMirror-foldgutter-folded {
    color: transparent;
    display: block;
    width: 14px;
    height: 14px;
    line-height: 0;
    cursor: pointer;
}

.output-editor-wrap .CodeMirror-foldgutter-open:after,
.output-editor-wrap .CodeMirror-foldgutter-folded:after {
    content: "";
    display: block;
    width: 14px;
    height: 14px;
    border: 1.5px solid var(--fold-accent);
    border-radius: 4px;
    background-color: #fff;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 8px 8px;
    box-sizing: border-box;
    transition: box-shadow 0.16s ease, background-color 0.16s ease;
}

.output-editor-wrap .CodeMirror-foldgutter-open:hover:after,
.output-editor-wrap .CodeMirror-foldgutter-folded:hover:after {
    background-color: rgba(14, 165, 233, 0.14);
    box-shadow: 0 0 0 2px rgba(14, 165, 233, 0.22);
}

.output-editor-wrap .CodeMirror-foldgutter-open:after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Crect x='1' y='4.25' width='8' height='1.5' fill='%230284c7'/%3E%3C/svg%3E");
}

.output-editor-wrap .CodeMirror-foldgutter-folded:after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Crect x='1' y='4.25' width='8' height='1.5' fill='%230284c7'/%3E%3Crect x='4.25' y='1' width='1.5' height='8' fill='%230284c7'/%3E%3C/svg%3E");
}

/* ── 语法高亮 ───────────────────────────── */
.pane .CodeMirror .cm-string.cm-property {
    color: var(--json-key);
    font-weight: 600;
}

.pane .CodeMirror .cm-string {
    color: var(--json-string);
}

.pane .CodeMirror .cm-property {
    color: var(--json-key);
    font-weight: 600;
}

.pane .CodeMirror .cm-json-integer,
.pane .CodeMirror .cm-number {
    color: var(--json-integer);
}

.pane .CodeMirror .cm-json-decimal {
    color: var(--json-decimal);
}

.pane .CodeMirror .cm-json-boolean,
.pane .CodeMirror .cm-atom {
    color: var(--json-boolean);
}

.pane .CodeMirror .cm-json-null {
    color: var(--json-null);
}

.pane .CodeMirror .cm-punctuation,
.pane .CodeMirror .CodeMirror-line {
    color: var(--json-punct);
}

.pane .CodeMirror .cm-error,
.pane .CodeMirror .cm-invalidchar {
    color: var(--json-null);
    background: var(--error-bg);
}

/* 折叠占位标记 */
.output-editor-wrap .CodeMirror-foldmarker {
    text-shadow: none;
    font-family: inherit;
    cursor: pointer;
}

.output-editor-wrap .json-fold-marker {
    color: var(--text-dim);
    font-weight: normal;
    padding: 0 4px;
    background: var(--surface-hover);
    border: 1px solid var(--border);
    border-radius: 4px;
}

.output-editor-wrap .json-fold-marker .json-fold-count {
    color: var(--json-integer);
}

/* 搜索高亮 */
.output-editor-wrap .cm-search-match {
    background: var(--search-highlight);
    border-radius: 3px;
    box-shadow: 0 0 0 1px rgba(202, 138, 4, 0.5);
}

.hint {
    margin: 6px 14px;
    font-size: 12px;
    font-family: var(--font-mono);
    color: var(--text-mute);
    text-align: right;
}

/* ============================================================
   深色主题下的编辑器配色。
   亮色沿用站点原有的语法配色（紫 key / 绿字符串 / #333 标点），
   那套是为白底设计的——#333 标点放在深色底上几乎看不见，
   所以深色必须换一套，而不是共用。
   ============================================================ */
[data-theme="dark"] {
    --json-key: #67e8f9;
    --json-string: #86efac;
    --json-integer: #7dd3fc;
    --json-decimal: #5eead4;
    --json-boolean: #fbbf24;
    --json-null: #f87171;
    --json-punct: #7d92b2;
    --fold-accent: #22d3ee;
    --search-highlight: rgba(250, 204, 21, 0.28);
    --editor-bg: rgba(13, 20, 32, 0.82);
    --gutter-bg: rgba(7, 11, 20, 0.4);
    --cm-selection: rgba(34, 211, 238, 0.22);
    --cm-activeline: rgba(125, 211, 252, 0.05);
}

[data-theme="dark"] .pane .CodeMirror-cursor {
    box-shadow: 0 0 8px rgba(34, 211, 238, 0.7);
}

[data-theme="dark"] .pane .CodeMirror-matchingbracket {
    background: rgba(34, 211, 238, 0.16);
}

[data-theme="dark"] .pane-title::before {
    box-shadow: 0 0 8px var(--primary);
}

[data-theme="dark"] .btn-icon.active {
    box-shadow: 0 0 16px rgba(34, 211, 238, 0.5);
}

/* 折叠按钮的方框底色与内嵌 SVG 都写死了颜色，无法用 CSS 变量，只能整条覆盖 */
[data-theme="dark"] .output-editor-wrap .CodeMirror-foldgutter-open:after,
[data-theme="dark"] .output-editor-wrap .CodeMirror-foldgutter-folded:after {
    background-color: rgba(34, 211, 238, 0.1);
}

[data-theme="dark"] .output-editor-wrap .CodeMirror-foldgutter-open:hover:after,
[data-theme="dark"] .output-editor-wrap .CodeMirror-foldgutter-folded:hover:after {
    background-color: rgba(34, 211, 238, 0.25);
    box-shadow: 0 0 10px rgba(34, 211, 238, 0.6);
}

[data-theme="dark"] .output-editor-wrap .CodeMirror-foldgutter-open:after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Crect x='1' y='4.25' width='8' height='1.5' fill='%2322d3ee'/%3E%3C/svg%3E");
}

[data-theme="dark"] .output-editor-wrap .CodeMirror-foldgutter-folded:after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Crect x='1' y='4.25' width='8' height='1.5' fill='%2322d3ee'/%3E%3Crect x='4.25' y='1' width='1.5' height='8' fill='%2322d3ee'/%3E%3C/svg%3E");
}

[data-theme="dark"] .output-editor-wrap .json-fold-marker {
    background: rgba(125, 211, 252, 0.08);
}

/* ── 窄屏：双栏改上下堆叠 ───────────────── */
@media (max-width: 900px) {
    .workspace {
        flex-direction: column;
        height: auto;
        min-height: 0;
    }

    .pane-input,
    .workspace.input-hidden .pane-output {
        width: 100%;
    }

    .pane-input {
        height: 46vh;
        min-height: 220px;
    }

    .pane-output {
        height: 58vh;
        min-height: 260px;
        flex: none;
    }

    /* 竖排时列宽拖拽无意义 */
    .pane-resizer {
        display: none;
    }

    .pane-header {
        gap: 6px;
    }

    .output-search {
        margin-left: 0;
        width: 100%;
        order: 3;
    }

    .hint {
        text-align: left;
    }
}

@media (max-width: 560px) {
    .toolbar-divider {
        display: none;
    }

    .btn-icon {
        padding: 5px 9px;
    }
}