.custom-a {
    text-decoration: none;
    color: #383838;
}

.custom-a:hover {
    font-weight: bold;
    color: #41c9a5;
}

/* 共用双栏编辑器布局（json-compress 等页面依赖，json.html 由 code-format-split 覆盖） */
.json-editor-split {
    display: flex;
    gap: 8px;
    width: 100%;
    height: 46.8vh;
    align-items: stretch;
}

.json-editor-panel {
    flex: 1;
    min-width: 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.json-editor-panel-input {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background-color: #e0e0e0;
    border: 1px solid #d8d8d8;
    border-radius: 4px;
}

.json-editor-panel-input .ln-textarea {
    border: none;
    border-radius: 0;
    background: #fff;
}

.json-editor-panel-input #input-editor-host .cm-editor {
    border: none;
    border-radius: 0;
}

.json-editor-panel-input .ln-textarea-gutter-field,
.json-editor-panel-input .ln-textarea-input {
    font-family: var(--font-mono);
}

.json-editor-panel-input .ln-textarea-gutter-field {
    font-size: 0.925rem;
    padding-right: 12px;
}

.json-editor-panel-input .ln-textarea .ln-textarea-input,
.json-editor-panel-input .ln-textarea .ln-textarea-input:focus {
    border: none !important;
    border-left: none !important;
    outline: none !important;
    box-shadow: none !important;
    padding-left: 6px;
    white-space: pre;
    overflow-wrap: normal;
    word-wrap: normal;
    word-break: normal;
    overflow-x: auto;
}

#input-editor-host {
    flex: 1;
    min-width: 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.json-editor-panel .output-panel {
    flex: 1;
    min-height: 0;
    height: 100%;
}

.json-editor-panel #editor-output {
    height: 100%;
    width: 100%;
}

.json-editor-panel-output .ace_scroller {
    cursor: text;
}

/* 右侧选中高亮（与 JSON 编辑器一致） */
.right .ace_marker-layer .ace_selection,
#editor-output .ace_marker-layer .ace_selection,
.json-editor-panel-output .ace_marker-layer .ace_selection {
    background: rgba(45, 130, 255, 0.22) !important;
}

.right .ace_marker-layer .ace_selected-word,
#editor-output .ace_marker-layer .ace_selected-word,
.json-editor-panel-output .ace_marker-layer .ace_selected-word {
    border: 1px solid rgba(45, 130, 255, 0.4) !important;
    background: transparent !important;
    border-radius: 0;
}

.right .ace_editor.ace_multiselect .ace_selection.ace_start,
#editor-output.ace_multiselect .ace_selection.ace_start {
    box-shadow: none;
}

/*
 * 折叠/展开会改变可视高度，纵向滚动条显隐时 Ace 会改 scroller 的 right，
 * 整块内容就会左右跳。始终预留滚动条槽位，避免跳动；右侧多留一点边距。
 */
#editor-output .ace_scroller {
    right: 28px !important;
}

#editor-output .ace_scrollbar-v {
    box-sizing: border-box;
    width: 16px !important;
    display: block !important;
    visibility: visible !important;
    overflow-y: scroll !important;
    bottom: 0 !important;
    right: 6px !important;
}

#editor-output .ace_scrollbar-inner {
    min-width: 1px;
}

.output-panel-success {
    background-color: #fff;
}

.right.output-panel .wd-editor,
.right .ace-chrome,
.tool-form-json .right.output-panel .wd-editor,
.tool-form-json .right .ace-chrome {
    background-color: #fff !important;
}

.output-panel-error {
    background-color: #fce4e4;
}

.output-panel-error .ace_line {
    color: #ea5455 !important;
}

/** 右侧 JSON 语法高亮（Monaco Editor vs 主题 JSON） */
.right .ace-chrome .ace_variable,
#editor-output .ace-chrome .ace_variable {
    color: #a31515 !important;
    font-weight: normal;
    cursor: pointer;
}

.right .ace-chrome .ace_variable:hover,
#editor-output .ace-chrome .ace_variable:hover {
    text-decoration: underline;
    text-underline-offset: 2px;
}

.right .ace-chrome .ace_string,
#editor-output .ace-chrome .ace_string {
    color: #0451a5 !important;
}

.right .ace-chrome .ace_constant.ace_numeric,
#editor-output .ace-chrome .ace_constant.ace_numeric {
    color: #098658 !important;
}

.right .ace-chrome .ace_constant.ace_language,
#editor-output .ace-chrome .ace_constant.ace_language,
.right .ace-chrome .ace_constant.ace_language.ace_boolean,
#editor-output .ace-chrome .ace_constant.ace_language.ace_boolean {
    color: #0451a5 !important;
}

.right .ace-chrome .ace_constant.ace_language.ace_escape,
#editor-output .ace-chrome .ace_constant.ace_language.ace_escape {
    color: #0451a5 !important;
}

.right .ace-chrome .ace_paren,
#editor-output .ace-chrome .ace_paren {
    color: #000000 !important;
}

.right .ace_line,
#editor-output .ace_line {
    color: #333333;
}

.wd-editor {
    min-width: 400px;
    transition: width 0.2s;
    background-color: #e0e0e0;
    border: 1px solid #d8d8d8;
    border-radius: 4px;
    overflow: hidden;
    padding: 0;
}

.tool-form-json .wd-editor {
    padding: 0;
}

/**去掉他自己的错误显示  支持转移*/
.ace_gutter-cell.ace_error {
    background-image: none !important;
}


/**两个编辑框的共同的样式*/
/** 整个编辑框的文字的大小和行高 */
.ace_editor {
    font-size: 14.8px !important;
    line-height: 20px !important;
}

/* .ace_editor {
    position: relative;
    overflow: hidden;
    padding: 0;
    font: 13.8px/normal 'Monaco', 'Menlo', 'Ubuntu Mono', 'Consolas', 'source-code-pro', monospace;
    line-height: 20px !important;
    direction: ltr;
    text-align: left;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
} */

/**激活行的行头的背景色*/
.ace-chrome .ace_gutter-active-line {
    /* background-color: #f0f0f0; */
    background-color: #f6f6f6;
}

/**行号框背景色*/

.ace-chrome .ace_gutter {
    /* background-color: #f0f0f0; */
    background-color: #f6f6f6;
    border-right: none;
}


/**激活行的编辑器中的背景色*/
.ace-chrome .ace_marker-layer .ace_active-line {
    background-color: transparent;
    background-color: #f6f6f6;
}

/**活动光标的颜色*/
.ace-chrome .ace_cursor {
    color: #787878;
}

/**非活动光标的透明度*/
.ace_hidden-cursors .ace_cursor {
    opacity: 0;
}


/**右侧样式*/
.right .ace_gutter-layer {
    border-right: none;
}

/**右侧数字的颜色和大小*/
.right .ace_gutter-cell {
    color: #888;
    font-size: 0.925rem;
    font-family: var(--font-mono);
    /* 原先折叠三角占位；隐藏后补回右侧留白，避免内容贴行号 */
    padding-right: 12px;
}

/**行号右侧的线  */
.right .ace_content {
    /** 这个地方不能放开，否则会导致压缩成一行的时候：<click to see more...>*/
    /* font-family: monospace, Tahoma, "微软雅黑", "幼圆" !important; */
    border-left: none;
}

/**key 颜色 - 见上方 Monaco JSON 高亮规则 */
.right .ace-chrome .ace_variable {
    font-weight: normal;
}

/**选中大括号或者中括号后的样式*/
.right .ace_marker-layer .ace_bracket,
.right .ace_marker-layer .ace_error_bracket,
#editor-output .ace_marker-layer .ace_bracket,
#editor-output .ace_marker-layer .ace_error_bracket,
.right .ace_br15,
#editor-output .ace_br15 {
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
}



/**设置内容样式*/
.ace-chrome .ace_variable {
    /* color: red; */
}

/**字体颜色*/
.ace_line{
    color: #333333;
}

/** 折叠相关：统一浅蓝系（方块 +/- + Array 文案 + 复制图标） */
.right .ace_line,
#editor-output .ace_line {
    --json-fold-accent: #69b1ff;
    --json-fold-accent-hover: #40a9ff;
}

/** 折叠占位文字：Array[n] / Object{...} */
.right .ace_line .ace_fold,
#editor-output .ace_line .ace_fold {
    display: inline !important;
    width: auto !important;
    height: auto !important;
    margin: 0 2px 0 0;
    padding: 0;
    vertical-align: middle;
    color: var(--json-fold-accent) !important;
    font-size: 12px;
    font-weight: 500;
    font-family: var(--font-mono);
    line-height: 1.4;
    background: none !important;
    background-image: none !important;
    border: none;
    border-radius: 0;
    cursor: pointer;
    text-decoration: none;
    transition: color 0.15s ease;
}

.right .ace_line .ace_fold:hover,
#editor-output .ace_line .ace_fold:hover,
.right .ace_line .ace_fold:active,
#editor-output .ace_line .ace_fold:active {
    color: var(--json-fold-accent-hover) !important;
    text-decoration: none;
}

/** 行内折叠 +/-：白字实心小方块（符号略下移，上下更匀） */
.right .ace_line .json-fold-toggle,
#editor-output .ace_line .json-fold-toggle {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: 14.4px;
    height: 14.4px;
    margin: 0 4px 0 0;
    padding: 1px 0 0;
    vertical-align: 1px;
    border: none;
    border-radius: 4.8px;
    background: var(--json-fold-accent);
    color: #fff !important;
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
    text-align: center;
    font-family: Arial, Helvetica, sans-serif;
    cursor: pointer;
    user-select: none;
    pointer-events: auto;
    transition: background-color 0.15s ease, transform 0.1s ease;
}

.right .ace_line .json-fold-toggle.is-expanded,
#editor-output .ace_line .json-fold-toggle.is-expanded,
.right .ace_line .json-fold-toggle.is-collapsed,
#editor-output .ace_line .json-fold-toggle.is-collapsed {
    background: var(--json-fold-accent);
    color: #fff !important;
}

.right .ace_line .json-fold-toggle:hover,
#editor-output .ace_line .json-fold-toggle:hover {
    background: var(--json-fold-accent-hover);
    color: #fff !important;
}

.right .ace_line .json-fold-toggle:active,
#editor-output .ace_line .json-fold-toggle:active {
    transform: scale(0.92);
}

/** 彻底隐藏 Ace 左侧 gutter 折叠三角 */
.right .ace_fold-widget,
#editor-output .ace_fold-widget {
    display: none !important;
}

/** 折叠节点后的复制图标（与 Array/Object 文案垂直对齐） */
.right .ace_line .json-fold-copy,
#editor-output .ace_line .json-fold-copy {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: 14px;
    height: 14px;
    margin-left: 6px;
    padding: 0;
    vertical-align: -2px;
    color: var(--json-fold-accent);
    opacity: 0.85;
    cursor: pointer;
    user-select: none;
    pointer-events: auto;
    line-height: 1;
    transition: color 0.15s ease, opacity 0.15s ease;
}

.right .ace_line .json-fold-copy svg,
#editor-output .ace_line .json-fold-copy svg {
    display: block;
    width: 13px;
    height: 13px;
    margin: 0;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    pointer-events: none;
}

.right .ace_line .json-fold-copy:hover,
#editor-output .ace_line .json-fold-copy:hover,
.right .ace_line .json-fold-copy:active,
#editor-output .ace_line .json-fold-copy:active {
    color: var(--json-fold-accent-hover);
    opacity: 1;
}

/* 首页底部通栏状态栏（对齐 json-editor：横跨左右） */
.tool-form-json .json-editor-workspace > .json-online-statusbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-shrink: 0;
    min-height: 32px;
    padding: 0 12px;
    border-top: 1px solid #ececec;
    background: #fafafa;
    font-size: 12px;
    color: #888;
    box-sizing: border-box;
}

.tool-form-json .json-editor-workspace > .json-online-statusbar .json-online-statusbar-left,
.tool-form-json .json-editor-workspace > .json-online-statusbar .json-online-statusbar-right {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.tool-form-json .json-editor-workspace > .json-online-statusbar .json-online-status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #bfbfbf;
    flex-shrink: 0;
}

.tool-form-json .json-editor-workspace > .json-online-statusbar .json-online-status-dot.is-ok {
    background: #52c41a;
}

.tool-form-json .json-editor-workspace > .json-online-statusbar .json-online-status-dot.is-error {
    background: #ff4d4f;
}

.tool-form-json .json-editor-workspace > .json-online-statusbar #json-home-status {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tool-form-json .json-editor-workspace > .json-online-statusbar #json-home-status.is-error {
    color: #cf1322;
}

.tool-form-json .json-editor-workspace > .json-online-statusbar #json-home-status.is-ok {
    color: #389e0d;
}

.tool-form-json .json-editor-workspace > .json-online-statusbar .json-online-meta {
    color: #999;
    white-space: nowrap;
}