/* ZemsTools - JSON 格式化与美化 (JSON Format) 专属样式表 */

/* 1. 双栏工作区分栏比例与主次层级 (30% 草稿输入 : 70% 核心美化) */
.editor-pane-input {
    width: 30%;
    flex: none;
    min-width: 220px;
    background-color: rgba(15, 23, 42, 0.6);
}

.editor-pane-output {
    flex: 1;
    min-width: 260px;
    box-shadow: inset 0 0 0 1px rgba(59, 130, 246, 0.15);
}

[data-theme="light"] .editor-pane-output {
    box-shadow: inset 0 0 0 1px rgba(37, 99, 235, 0.12);
}

/* 2. 右侧核心区元信息顶栏高质感渐变 */
.pane-meta-highlight {
    background: linear-gradient(90deg, rgba(30, 41, 59, 0.95), rgba(30, 41, 59, 0.85)) !important;
    border-bottom: 1px solid rgba(59, 130, 246, 0.25) !important;
}

[data-theme="light"] .pane-meta-highlight {
    background: linear-gradient(90deg, #ffffff, #f8fafc) !important;
    border-bottom: 1px solid rgba(37, 99, 235, 0.25) !important;
}

.pane-meta-right {
    display: flex;
    align-items: center;
}

/* 3. 左侧面板快捷操作按钮 (如快速粘贴) */
.btn-meta-quick {
    background: transparent;
    border: 1px solid var(--border-color);
    color: var(--text-muted);
    font-size: 11px;
    padding: 1px 7px;
    border-radius: 3px;
    cursor: pointer;
    margin-right: 8px;
    transition: all 0.15s ease;
    font-family: var(--font-sans);
}

.btn-meta-quick:hover {
    color: var(--text-main);
    border-color: var(--primary);
    background-color: var(--primary-light);
}

/* 4. 左侧原始草稿区：彻底去除所有彩色语法高亮，呈现纯单色文本，形成主次反差 */
.editor-pane-input .CodeMirror pre.CodeMirror-line,
.editor-pane-input .CodeMirror pre.CodeMirror-line span,
.editor-pane-input .CodeMirror .cm-property,
.editor-pane-input .CodeMirror .cm-string,
.editor-pane-input .CodeMirror .cm-number,
.editor-pane-input .CodeMirror .cm-atom,
.editor-pane-input .CodeMirror .cm-punctuation,
.editor-pane-input .CodeMirror .cm-bracket,
.editor-pane-input .CodeMirror .cm-keyword,
.editor-pane-input .CodeMirror .cm-variable,
.editor-pane-input .CodeMirror .cm-def {
    color: #e2e8f0 !important;
}

[data-theme="light"] .editor-pane-input .CodeMirror pre.CodeMirror-line,
[data-theme="light"] .editor-pane-input .CodeMirror pre.CodeMirror-line span,
[data-theme="light"] .editor-pane-input .CodeMirror .cm-property,
[data-theme="light"] .editor-pane-input .CodeMirror .cm-string,
[data-theme="light"] .editor-pane-input .CodeMirror .cm-number,
[data-theme="light"] .editor-pane-input .CodeMirror .cm-atom,
[data-theme="light"] .editor-pane-input .CodeMirror .cm-punctuation,
[data-theme="light"] .editor-pane-input .CodeMirror .cm-bracket,
[data-theme="light"] .editor-pane-input .CodeMirror .cm-keyword,
[data-theme="light"] .editor-pane-input .CodeMirror .cm-variable,
[data-theme="light"] .editor-pane-input .CodeMirror .cm-def {
    color: #1e293b !important;
}

/* 5. 编辑器草稿输入区轻量占位提示符 */
.editor-placeholder {
    position: absolute;
    top: 36px;
    left: 14px;
    color: var(--text-muted);
    opacity: 0.6;
    font-size: 13px;
    font-family: var(--font-sans);
    pointer-events: none;
    user-select: none;
    z-index: 4;
    transition: opacity 0.15s ease;
}

.editor-placeholder.hidden {
    opacity: 0;
    pointer-events: none;
}

/* 6. 浮动报错条 */
.error-banner {
    display: none;
    padding: 6px 16px;
    background-color: rgba(239, 68, 68, 0.15);
    border-bottom: 1px solid var(--danger);
    color: var(--danger);
    font-size: 12.5px;
    font-family: var(--font-mono);
    width: 100%;
    box-sizing: border-box;
}

/* 7. 顶部工具栏语法校验状态标签与错误跳转胶囊 */
.status-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 600;
}

.status-pill.success {
    color: var(--success);
}

.status-pill.error {
    color: var(--danger);
}

.status-error-jump {
    background-color: rgba(239, 68, 68, 0.15);
    border: 1px solid var(--danger);
    color: var(--danger);
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 11.5px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s ease;
    font-family: var(--font-mono);
}

.status-error-jump:hover {
    background-color: var(--danger);
    color: #ffffff;
}