/*
 * JSON Workbench 全局设计令牌
 * 颜色变量同时服务普通状态、四类差异状态和 SVG 的 currentColor 继承。
 */
:root {
  --ink: #1d2924;
  --muted: #68756f;
  --paper: #f3f2ec;
  --panel: #fffdf8;
  --surface-soft: #f5f6f1;
  --surface-muted: #eef1eb;
  --surface-status: #faf9f4;
  --editor-gutter: #eef0ea;
  --output-surface: #fafbf7;
  --toolbar-surface: #e8ebe4;
  --menu-surface: linear-gradient(180deg, #f8f8f4, #edf0e9);
  --segment-top: #e6e9e2;
  --segment-bottom: #dde2da;
  --segment-border: #ccd3ca;
  --segment-active-top: #fffdf8;
  --segment-active-bottom: #f5f8f3;
  --line: #d7dcd3;
  --line-strong: #bac3b8;
  --meta: #87928b;
  --green: #17684b;
  --green-strong: #1f7657;
  --green-deep: #10523d;
  --green-soft: #e1eee6;
  --action-hover-bg: linear-gradient(135deg, #fafcf9, #e1eee6);
  --action-hover-border: #b6d1c1;
  --action-hover-shadow: 0 5px 14px rgba(23, 104, 75, .12);
  --red: #ad4c41;
  --red-soft: #f6e8e4;
  --danger-hover-bg: linear-gradient(135deg, #fffaf8, #f6e8e4);
  --danger-hover-border: #e4c3bc;
  --danger-hover-shadow: 0 5px 14px rgba(173, 76, 65, .12);
  --amber: #9a6726;
  --amber-soft: #f5ecd9;
  --purple: #70568f;
  --purple-soft: #ece7f2;
  --purple-border: #d9d0e3;
  --blue: #3f668d;
  --shadow: 0 20px 60px rgba(21, 36, 29, .08);
  --shadow-soft: 0 10px 28px rgba(21, 36, 29, .065);
  --mono: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
  --sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* 基础重置与固定视口：页面外层不滚动，功能面板负责自己的滚动区域。 */
* { box-sizing: border-box; }
html { height: 100%; color-scheme: light; scroll-behavior: smooth; overflow: hidden; }
body { height: 100%; margin: 0; color: var(--ink); background: linear-gradient(180deg, #f7f6f1, var(--paper)); font-family: var(--sans); min-width: 320px; overflow: hidden; }
button, textarea, input, select { font: inherit; }
button { color: inherit; }
button:focus-visible, textarea:focus-visible, input:focus-visible, select:focus-visible { outline: 3px solid rgba(23, 104, 75, .22); outline-offset: 2px; }
[hidden] { display: none !important; }
.visually-hidden { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0,0,0,0) !important; white-space: nowrap !important; border: 0 !important; }
/* SVG 精灵本身不可见，实际图标由各处 <use> 元素引用。 */
.svg-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
svg { width: 1.1em; height: 1.1em; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
svg .icon-fill { fill: currentColor; stroke: none; }

/* 品牌、模式切换和当前视图操作共用单一顶栏；窄屏时仍留在同一容器内换行。 */
.site-header { position: relative; z-index: 40; width: min(1480px, calc(100% - 48px)); height: 48px; margin: 8px auto 0; padding: 5px 8px; display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto; grid-template-areas: "brand note actions nav"; align-items: center; gap: 8px; overflow: visible; border: 1px solid var(--line); border-bottom: 0; background: var(--toolbar-surface); box-shadow: var(--shadow-soft); }
.brand { grid-area: brand; justify-self: start; color: inherit; text-decoration: none; display: flex; align-items: center; gap: 10px; }
.brand-mark { width: 34px; height: 34px; display: block; flex: 0 0 34px; }
.brand-mark img { width: 34px; height: 34px; display: block; }
.brand strong { display: block; letter-spacing: .14em; font-size: 14px; }
.brand small { display: block; margin-top: 1px; color: var(--muted); font-size: 7px; letter-spacing: .26em; }
.window-note { position: relative; z-index: 25; grid-area: note; min-width: 0; display: flex; align-items: center; gap: 5px; }
.window-note-toggle { width: 32px; height: 32px; flex: 0 0 32px; padding: 0; display: grid; place-items: center; color: var(--green); background: var(--surface-soft); border: 1px solid var(--line-strong); border-radius: 8px; cursor: pointer; transition: color .16s ease, background .16s ease, border-color .16s ease, box-shadow .16s ease, transform .16s ease; }
.window-note-toggle svg { width: 17px; height: 17px; }
.window-note-toggle:hover, .window-note-toggle[aria-expanded="true"] { color: var(--green); background: var(--action-hover-bg); border-color: var(--action-hover-border); box-shadow: var(--action-hover-shadow); transform: translateY(-1px); }
.window-note-toggle:active { transform: translateY(0); }
.window-note-badge { max-width: 132px; height: 30px; min-width: 0; padding: 0 10px; overflow: hidden; color: var(--ink); background: var(--panel); border: 1px solid var(--line); border-radius: 8px; cursor: pointer; font-size: 12px; font-weight: 750; text-overflow: ellipsis; white-space: nowrap; transition: color .16s ease, background .16s ease, border-color .16s ease, box-shadow .16s ease, transform .16s ease; }
.window-note-badge:hover { color: var(--green); background: var(--action-hover-bg); border-color: var(--action-hover-border); box-shadow: var(--action-hover-shadow); transform: translateY(-1px); }
.window-note-popover { position: absolute; z-index: 40; top: calc(100% + 9px); left: 0; width: min(340px, calc(100vw - 48px)); padding: 14px; color: var(--ink); background: var(--panel); border: 1px solid var(--line-strong); border-radius: 12px; box-shadow: 0 18px 48px rgba(21,36,29,.16); }
.window-note-popover::before { content: ""; position: absolute; top: -6px; left: 10px; width: 10px; height: 10px; background: var(--panel); border-top: 1px solid var(--line-strong); border-left: 1px solid var(--line-strong); transform: rotate(45deg); }
.window-note-label { position: relative; display: block; margin: 0 0 9px; color: var(--green); font-size: 13px; font-weight: 800; }
.window-note-field { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 9px; }
.window-note-input { width: 100%; height: 40px; padding: 0 12px; color: var(--ink); background: var(--panel); border: 1px solid var(--line-strong); border-radius: 8px; font-size: 14px; font-weight: 700; }
.window-note-input:focus { outline: 0; border-color: var(--green); box-shadow: 0 0 0 3px rgba(23,104,75,.12); }
.window-note-clear { height: 40px; padding: 0 13px; color: var(--muted); background: var(--toolbar-surface); border: 1px solid var(--line); border-radius: 8px; cursor: pointer; font-size: 12px; font-weight: 750; transition: color .16s ease, background .16s ease, border-color .16s ease, box-shadow .16s ease; }
.window-note-clear:hover { color: var(--red); background: var(--red-soft); border-color: var(--danger-hover-border); box-shadow: var(--danger-hover-shadow); }
.window-note-help { margin: 9px 1px 0; color: var(--muted); font-size: 10px; }

/* 8px 顶部留白 + 48px 顶栏 + 24px 页脚之外的空间全部交给应用视图。 */
.app-shell { width: min(1480px, calc(100% - 48px)); height: calc(100dvh - 80px); margin: 0 auto; overflow: hidden; }
.eyebrow { margin: 0 0 14px; color: var(--green); font-size: 11px; font-weight: 800; letter-spacing: .22em; }

/* 顶部模式选择器采用分段控件样式，active 状态不改变按钮尺寸。 */
.main-tabs { grid-area: nav; justify-self: end; padding: 3px; display: grid; grid-template-columns: repeat(2, minmax(98px, 1fr)); gap: 3px; background: linear-gradient(180deg, var(--segment-top), var(--segment-bottom)); border: 1px solid var(--segment-border); border-radius: 10px; box-shadow: inset 0 1px 2px rgba(21,36,29,.055), 0 2px 8px rgba(21,36,29,.045); }
.main-tab { min-height: 30px; padding: 2px 9px; display: flex; align-items: center; justify-content: center; gap: 7px; color: var(--muted); background: transparent; border: 1px solid transparent; border-radius: 7px; cursor: pointer; text-align: left; transition: color .18s ease, background .18s ease, border-color .18s ease, box-shadow .18s ease, transform .18s ease; }
.main-tab:hover { color: var(--green); background: rgba(255,253,248,.68); border-color: var(--action-hover-border); box-shadow: 0 2px 6px rgba(23,104,75,.07); }
.main-tab:active { transform: translateY(1px); }
.main-tab.is-active { color: var(--green); background: linear-gradient(180deg, var(--segment-active-top), var(--segment-active-bottom)); border-color: var(--action-hover-border); box-shadow: 0 3px 10px rgba(21,36,29,.1), inset 0 1px 0 rgba(255,255,255,.88); }
.tab-icon { width: 23px; height: 23px; flex: 0 0 auto; display: grid; place-items: center; border: 1px solid currentColor; border-radius: 6px; background: rgba(255,255,255,.28); opacity: .84; transition: background .18s ease, box-shadow .18s ease, opacity .18s ease; }
.main-tab.is-active .tab-icon { background: var(--green-soft); box-shadow: inset 0 0 0 1px rgba(255,255,255,.55); opacity: 1; }
.tab-icon svg { width: 14px; height: 14px; }
.tab-copy { display: grid; }
.tab-copy strong { font-size: 11px; white-space: nowrap; }
.header-view-toolbar { grid-area: actions; width: 100%; height: 38px; min-width: 0; display: flex; align-items: center; justify-content: flex-start; justify-self: stretch; gap: 3px; }
.header-view-toolbar .tool-button { min-height: 34px; padding-inline: 9px; font-size: 12px; white-space: nowrap; }
.header-view-toolbar .toolbar-spacer { display: none; }
.header-view-toolbar .status-pill { flex: 0 0 auto; margin-left: 0; padding: 6px 9px; white-space: nowrap; }
#json-global-toolbar #editor-status { margin-left: auto; }
#diff-global-toolbar .highlight-legend { margin-left: auto; }

/* 两个业务视图共用相同高度；hidden 属性由 app.js 切换。 */
.app-view { height: 100%; padding: 0 0 8px; }
#editor-view { display: flex; flex-direction: column; min-height: 0; }
#diff-view { display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
.status-pill { display: inline-flex; align-items: center; gap: 7px; padding: 7px 11px; border-radius: 99px; font-size: 12px; font-weight: 700; }
.status-pill svg { width: 14px; height: 14px; }
.status-valid { color: var(--green); background: var(--green-soft); }
.status-invalid { color: var(--red); background: var(--red-soft); }
.status-idle { color: var(--muted); background: var(--surface-muted); }

/* 通用工具栏。允许窄屏换行，但桌面端保持单行并让 spacer 推开危险操作。 */
.toolbar { min-height: 48px; padding: 5px 8px; display: flex; align-items: center; gap: 4px; flex-wrap: wrap; border: 1px solid var(--line); border-bottom: 0; background: var(--toolbar-surface); }
.tool-button, .inline-action { min-height: 38px; padding: 0 13px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 1px solid transparent; border-radius: 6px; background: transparent; cursor: pointer; font-size: 13px; font-weight: 650; transition: color .16s ease, background .16s ease, border-color .16s ease, box-shadow .16s ease, transform .16s ease; }
.tool-button:hover, .inline-action:hover { color: var(--green); background: var(--action-hover-bg); border-color: var(--action-hover-border); box-shadow: var(--action-hover-shadow); transform: translateY(-1px); }
.tool-button:active, .inline-action:active { box-shadow: 0 2px 7px rgba(23,104,75,.09); transform: translateY(0); }
.tool-button.is-primary { color: white; background: var(--green); border-color: var(--green); }
.tool-button.is-primary:hover { color: white; background: linear-gradient(135deg, var(--green-strong), var(--green-deep)); border-color: var(--green-deep); }
.tool-button.danger, .inline-action.danger { color: var(--red); }
.tool-button.danger:hover, .inline-action.danger:hover { color: var(--red); background: var(--danger-hover-bg); border-color: var(--danger-hover-border); box-shadow: var(--danger-hover-shadow); }
.tool-button svg, .inline-action svg { width: 17px; height: 17px; }
.toolbar-menu { position: relative; z-index: 20; flex: 0 0 auto; }
.toolbar-menu > summary { list-style: none; }
.toolbar-menu > summary::-webkit-details-marker { display: none; }
.toolbar-menu > summary .menu-chevron { width: 12px; height: 12px; margin-left: 3px; transform: rotate(90deg); transition: transform .15s ease; }
.toolbar-menu[open] > summary { color: var(--green); background: var(--panel); border-color: var(--line-strong); }
.toolbar-menu[open] > summary .menu-chevron { transform: rotate(-90deg); }
.toolbar-menu-popover { position: absolute; z-index: 30; top: calc(100% + 6px); left: 0; width: 320px; max-height: min(560px, calc(100dvh - 145px)); padding: 7px; overflow-y: auto; background: var(--panel); border: 1px solid var(--line-strong); box-shadow: 0 18px 45px rgba(21,36,29,.16); }
.toolbar-menu-heading { padding: 8px 9px 5px; color: var(--muted); font-size: 9px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.toolbar-menu-heading:not(:first-child) { margin-top: 5px; padding-top: 10px; border-top: 1px solid var(--line); }
.example-menu-item { width: 100%; padding: 8px 9px; display: grid; gap: 2px; color: var(--ink); background: transparent; border: 0; cursor: pointer; text-align: left; }
.example-menu-item:hover, .example-menu-item:focus-visible { background: var(--green-soft); outline: 0; }
.example-menu-item strong { font-size: 11px; }
.example-menu-item span { color: var(--muted); font-size: 10px; }
.tool-select { min-height: 36px; padding: 0 7px 0 11px; display: inline-flex; align-items: center; gap: 6px; border: 1px solid transparent; color: var(--ink); cursor: pointer; }
.tool-select:hover, .tool-select:focus-within { background: var(--panel); border-color: var(--line-strong); }
.tool-select svg { width: 17px; height: 17px; }
.tool-select select { min-height: 34px; padding: 0 25px 0 0; color: inherit; background: transparent; border: 0; font-size: 13px; font-weight: 650; cursor: pointer; }
.tool-select select:focus { outline: 0; }
.toolbar-spacer { flex: 1; }

/*
 * 格式化页双栏布局。
 * min-height: 0 是关键：它允许子面板在固定视口中收缩并产生内部滚动。
 */
.editor-grid { flex: 1 1 auto; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.panel { background: var(--panel); border: 1px solid var(--line-strong); box-shadow: var(--shadow-soft); }
.editor-grid .panel + .panel { border-left: 0; }
.source-panel, .tree-panel { min-height: 0; display: flex; flex-direction: column; }
.panel-header { height: 42px; flex: 0 0 42px; padding: 0 14px; display: flex; align-items: center; justify-content: space-between; color: var(--muted); background: var(--menu-surface); border-bottom: 1px solid var(--line); box-shadow: inset 0 1px 0 rgba(255,255,255,.72); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; }
.panel-header > div { display: flex; align-items: center; gap: 9px; }
.panel-header strong { color: var(--ink); font-size: 12px; }
.panel-header svg { width: 16px; height: 16px; color: var(--green); }
.tree-header-actions { gap: 3px !important; }
.panel-header-actions { gap: 8px !important; }
.tree-header-button { min-height: 29px; padding: 0 7px; display: inline-flex; align-items: center; gap: 5px; color: var(--green); background: transparent; border: 1px solid transparent; border-radius: 6px; cursor: pointer; font-size: 12px; font-weight: 750; letter-spacing: 0; transition: color .16s ease, background .16s ease, border-color .16s ease, box-shadow .16s ease, transform .16s ease; }
.tree-header-button.copy-header { font-size: 12px; font-weight: 750; }
.tree-header-button:hover { color: var(--green); background: var(--action-hover-bg); border-color: var(--action-hover-border); box-shadow: var(--action-hover-shadow); transform: translateY(-1px); }
.tree-header-button:active { box-shadow: 0 2px 7px rgba(23,104,75,.09); transform: translateY(0); }
.tree-header-button.danger { color: var(--red); }
.tree-header-button.danger:hover { color: var(--red); background: var(--danger-hover-bg); border-color: var(--danger-hover-border); box-shadow: var(--danger-hover-shadow); }
.tree-header-button svg { width: 14px; height: 14px; color: currentColor; }
/* 源码编辑器由固定行号栏和可滚动 textarea 组成。 */
.code-wrap { height: auto; flex: 1 1 auto; min-height: 0; display: grid; grid-template-columns: 48px minmax(0, 1fr); overflow: hidden; }
.line-numbers { padding: 18px 12px; overflow: hidden; color: var(--meta); background: var(--editor-gutter); border-right: 1px solid var(--line); font: 13px/1.65 var(--mono); text-align: right; white-space: pre; user-select: none; }
.code-input { width: 100%; height: 100%; resize: none; padding: 18px 20px; color: var(--ink); background: var(--panel); border: 0; font: 13px/1.65 var(--mono); tab-size: 2; white-space: pre; overflow: auto; }
.code-input:focus { outline: 0; box-shadow: inset 0 0 0 2px rgba(23,104,75,.18); }
.panel-message { min-height: 26px; margin: 0; padding: 5px 15px; color: var(--red); background: var(--surface-status); border-top: 1px solid var(--line); font-size: 10px; line-height: 1.5; }
.panel-message:empty::after { content: "就绪"; color: var(--meta); }
.panel-message.muted { color: var(--meta); }
.panel-message.is-idle { color: var(--muted); }
.panel-message.is-valid { color: var(--green); }
.panel-message.is-invalid { color: var(--red); }
.source-footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.source-footer #source-error:empty::after { content: "就绪"; color: var(--meta); }
.source-footer #source-meta { flex: 0 0 auto; margin-left: auto; color: var(--meta); font-family: var(--mono); }
.diff-source-footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.diff-source-status { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.diff-source-status.is-idle { color: var(--muted); }
.diff-source-status.is-valid { color: var(--green); }
.diff-source-status.is-invalid { color: var(--red); }
.diff-source-meta { flex: 0 0 auto; margin-left: auto; color: var(--meta); font-family: var(--mono); }

/* 树编辑器可能同时横向和纵向增长，因此独立承担双向滚动。 */
.tree-editor { height: auto; flex: 1 1 auto; min-height: 0; padding: 12px 12px 24px; overflow: auto; font: 12px/1.4 var(--mono); }
.tree-empty { height: 100%; min-height: 180px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px; color: var(--muted); text-align: center; }
.tree-empty svg { width: 25px; height: 25px; margin-bottom: 3px; color: var(--line-strong); }
.tree-empty strong { color: var(--ink); font: 700 12px var(--sans); }
.tree-empty span { font: 11px var(--sans); }
/* 最小宽度避免深层节点的类型和值控件被过度压缩。 */
.tree-node { min-width: 620px; }
.tree-row { min-height: 38px; display: flex; align-items: center; gap: 7px; border-left: 1px solid transparent; }
.tree-row:hover { background: var(--surface-soft); border-left-color: var(--green); }
.tree-indent { width: calc(var(--depth) * 20px); flex: 0 0 auto; }
.tree-toggle, .tree-action { width: 28px; height: 28px; padding: 0; display: inline-grid; place-items: center; border: 0; border-radius: 6px; background: transparent; cursor: pointer; color: var(--muted); transition: color .16s ease, background .16s ease, box-shadow .16s ease, transform .16s ease; }
.tree-toggle:hover, .tree-action:hover { color: var(--green); background: var(--action-hover-bg); box-shadow: var(--action-hover-shadow); transform: translateY(-1px); }
.tree-toggle svg { transition: transform .15s; }
.tree-toggle.is-open svg { transform: rotate(90deg); }
.tree-toggle-spacer { width: 28px; }
.tree-key { width: 135px; padding: 5px 7px; border: 1px solid transparent; background: transparent; color: var(--blue); font-weight: 700; }
.tree-key:hover, .tree-key:focus { border-color: var(--line); background: var(--panel); }
.tree-key.index, .tree-key.root { color: var(--meta); }
.tree-colon { color: var(--meta); }
.tree-type { width: 86px; padding: 5px 23px 5px 7px; color: var(--purple); background: var(--purple-soft); border: 1px solid var(--purple-border); font: 11px var(--mono); }
.tree-value { width: min(290px, 30vw); padding: 6px 8px; color: var(--green); background: var(--panel); border: 1px solid var(--line); font: 12px var(--mono); }
.tree-value.number { color: var(--amber); }
.tree-value.invalid { border-color: var(--red); background: var(--red-soft); }
.tree-summary { color: var(--meta); }
.tree-actions { margin-left: auto; padding-right: 8px; display: flex; }
.tree-action.delete:hover { color: var(--red); background: var(--danger-hover-bg); box-shadow: var(--danger-hover-shadow); }
.tree-action svg { width: 15px; height: 15px; }
.tree-children[hidden] { display: none; }

/* 对比页双栏占满工具栏之下的所有空间；交换按钮绝对定位在两栏中心。 */
.diff-input-grid { position: relative; flex: 1 1 auto; min-height: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 30px; }
.diff-toolbar { flex: 0 0 auto; margin-bottom: 8px; border-bottom: 1px solid var(--line); }
.highlight-legend { padding: 0 8px; display: flex; align-items: center; gap: 14px; color: var(--muted); font-size: 10px; }
.highlight-legend span { display: flex; align-items: center; gap: 6px; white-space: nowrap; }
.highlight-legend i { width: 14px; height: 8px; display: inline-block; border-left: 3px solid; }
.legend-old i { background: rgba(173,76,65,.13); border-color: var(--red); }
.legend-new i { background: rgba(23,104,75,.13); border-color: var(--green); }
.diff-source { min-width: 0; min-height: 0; display: flex; flex-direction: column; }
.diff-header-actions { display: flex; align-items: center; gap: 2px !important; }
.diff-header-actions .inline-action { padding-inline: 6px; }
.inline-action.danger { color: var(--red); }
.diff-header-actions .inline-action.danger svg { color: currentColor; }
/*
 * 差异输入采用行号栏 + 代码区；代码区内高亮层在下，透明背景 textarea 在上。
 * diff-panel.js 会同步三者的 scrollTop，使行号和背景色始终跟随对应源码行。
 */
.diff-editor-wrap { position: relative; height: auto; flex: 1 1 auto; min-height: 0; display: grid; grid-template-columns: 48px minmax(0, 1fr); overflow: hidden; background: var(--panel); }
.diff-line-numbers { padding: 18px 10px; overflow: hidden; color: var(--meta); background: var(--editor-gutter); border-right: 1px solid var(--line); font: 13px/1.65 var(--mono); text-align: right; white-space: pre; user-select: none; }
.diff-editor-layer { position: relative; min-width: 0; min-height: 0; overflow: hidden; }
.diff-source .standalone { position: relative; z-index: 1; display: block; height: 100%; background: transparent; }
.diff-line-highlights { position: absolute; z-index: 0; top: 0; left: 0; width: 100%; min-width: 100%; padding: 18px 0; overflow: hidden; pointer-events: none; font: 13px/1.65 var(--mono); will-change: transform; }
.diff-highlight-line { height: 1.65em; border-left: 3px solid transparent; }
.diff-highlight-line.is-removed { background: rgba(173, 76, 65, .13); border-left-color: var(--red); }
.diff-highlight-line.is-added { background: rgba(23, 104, 75, .13); border-left-color: var(--green); }
.inline-action { min-height: 30px; padding: 0 7px; color: var(--green); font-size: 12px; font-weight: 750; }
.inline-action svg { color: currentColor; }
.side-marker { width: 24px; height: 24px; display: inline-grid; place-items: center; border-radius: 50%; color: white; font: 700 11px var(--mono); }
.marker-left { background: var(--blue); }.marker-right { background: var(--green); }
/* 左右交换按钮覆盖在栏间空隙，不占用任一编辑器宽度。 */
.compare-bridge { position: absolute; z-index: 2; left: 50%; top: 50%; width: 46px; height: 46px; padding: 0; transform: translate(-50%,-50%); display: grid; place-items: center; color: var(--green); background: var(--panel); border: 1px solid var(--line-strong); border-radius: 50%; cursor: pointer; box-shadow: var(--shadow-soft); transition: color .18s ease, background .18s ease, transform .18s ease; }
.compare-bridge:hover { color: white; background: var(--green); transform: translate(-50%,-50%) scale(1.06); }
.compare-bridge svg { width: 21px; height: 21px; }
.diff-summary { color: var(--muted); font-size: 13px; }
.summary-count { color: var(--ink); font: 700 27px var(--mono); }
.filter-row { display: flex; flex-wrap: wrap; gap: 8px; margin: 24px 0 14px; }
.filter-button { padding: 8px 12px; border: 1px solid var(--line); background: var(--panel); cursor: pointer; color: var(--muted); font-size: 12px; font-weight: 700; }
.filter-button.is-active { color: white; background: var(--ink); border-color: var(--ink); }
.filter-button span { margin-left: 5px; opacity: .7; font-family: var(--mono); }
.diff-results { display: grid; gap: 8px; }
.empty-state { min-height: 210px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 9px; color: var(--muted); background: var(--panel); border: 1px dashed var(--line-strong); }
.empty-state svg { width: 30px; height: 30px; margin-bottom: 5px; color: var(--line-strong); }
.empty-state strong { color: var(--ink); }
.empty-state span { font-size: 13px; }
/* 每条结构差异按“类型 / 路径 / 原值 / 新值”四列展示。 */
.diff-card { display: grid; grid-template-columns: 130px minmax(160px, .85fr) 1fr 1fr; align-items: stretch; background: var(--panel); border: 1px solid var(--line); border-left: 4px solid var(--line-strong); }
.diff-card.added { border-left-color: var(--green); }.diff-card.removed { border-left-color: var(--red); }.diff-card.changed { border-left-color: var(--amber); }.diff-card.type-changed { border-left-color: var(--purple); }
.diff-cell { min-width: 0; padding: 14px 16px; border-left: 1px solid var(--line); }
.diff-cell:first-child { border-left: 0; }
.diff-label { display: inline-flex; align-items: center; padding: 4px 7px; font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.added .diff-label { color: var(--green); background: var(--green-soft); }.removed .diff-label { color: var(--red); background: var(--red-soft); }.changed .diff-label { color: var(--amber); background: var(--amber-soft); }.type-changed .diff-label { color: var(--purple); background: var(--purple-soft); }
.diff-path { overflow: hidden; color: var(--blue); font: 12px/1.55 var(--mono); word-break: break-all; }
.value-caption { display: block; margin-bottom: 5px; color: var(--meta); font-size: 9px; letter-spacing: .12em; text-transform: uppercase; }
.diff-value { margin: 0; overflow: auto; color: var(--ink); font: 11px/1.55 var(--mono); white-space: pre-wrap; overflow-wrap: anywhere; max-height: 120px; }
.diff-missing { color: var(--meta); font-style: italic; }

/*
 * 统一工具右侧的转换输出沿用源码编辑器密度，独立同步行号与滚动。
 */
.converter-code-wrap { flex: 1 1 auto; min-height: 0; display: grid; grid-template-columns: 48px minmax(0, 1fr); overflow: hidden; }
.converter-line-numbers { padding: 18px 10px; overflow: hidden; color: var(--meta); background: var(--editor-gutter); border-right: 1px solid var(--line); font: 13px/1.65 var(--mono); text-align: right; white-space: pre; user-select: none; }
.converter-output { color: var(--ink); background: var(--output-surface); }
.converter-output-footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.converter-output-footer #converter-output-message { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.converter-output-footer #converter-output-meta { flex: 0 0 auto; margin-left: auto; color: var(--meta); font-family: var(--mono); }
.converter-output-controls { gap: 3px !important; }
.converter-output-controls > .tree-header-button { padding-inline: 5px; }
.converter-result-tabs { padding: 3px; display: flex; gap: 2px; background: linear-gradient(180deg, var(--segment-top), var(--segment-bottom)); border: 1px solid var(--segment-border); border-radius: 8px; box-shadow: inset 0 1px 2px rgba(21,36,29,.05); }
.source-sort-menu { position: relative; z-index: 15; display: block !important; text-transform: none; letter-spacing: 0; }
.source-sort-trigger { width: 104px; height: 32px; padding: 0 8px; display: flex; align-items: center; gap: 6px; color: var(--green); background: transparent; border: 1px solid transparent; border-radius: 6px; cursor: pointer; font-size: 12px; font-weight: 750; text-align: left; transition: color .16s ease, background .16s ease, border-color .16s ease, box-shadow .16s ease, transform .16s ease; }
.source-sort-trigger:hover { color: var(--green); background: var(--action-hover-bg); border-color: var(--action-hover-border); box-shadow: var(--action-hover-shadow); transform: translateY(-1px); }
.source-sort-trigger[aria-expanded="true"] { color: var(--green); background: var(--green-soft); border-color: var(--action-hover-border); box-shadow: 0 3px 10px rgba(23,104,75,.1); }
.source-sort-trigger span { flex: 0 0 auto; white-space: nowrap; }
.source-sort-trigger .source-sort-icon { width: 15px; height: 15px; flex: 0 0 15px; color: currentColor; }
.source-sort-trigger .select-chevron { width: 11px; height: 11px; flex: 0 0 11px; margin-left: -3px; color: currentColor; transform: rotate(90deg); transition: transform .15s ease; }
.source-sort-trigger[aria-expanded="true"] .select-chevron { transform: rotate(-90deg); }
.source-sort-options { position: absolute; z-index: 30; top: calc(100% + 5px); left: 0; width: 104px; padding: 4px; background: var(--panel); border: 1px solid var(--line-strong); border-radius: 5px; box-shadow: 0 12px 30px rgba(21,36,29,.14); }
.source-sort-option { width: 100%; min-height: 32px; padding: 0 8px; display: flex; align-items: center; justify-content: space-between; gap: 10px; color: var(--ink); background: transparent; border: 0; border-radius: 3px; cursor: pointer; font-size: 12px; font-weight: 650; text-align: left; }
.source-sort-option:hover, .source-sort-option:focus-visible { color: var(--green); background: var(--green-soft); outline: 0; }
.source-sort-option[aria-selected="true"] { color: var(--green); background: var(--green-soft); font-weight: 800; }
.source-sort-option svg { width: 13px; height: 13px; flex: 0 0 13px; color: currentColor; opacity: 0; }
.source-sort-option[aria-selected="true"] svg { opacity: 1; }
.converter-result-tab { min-height: 28px; padding: 0 9px; color: var(--muted); background: transparent; border: 1px solid transparent; border-radius: 5px; cursor: pointer; font-size: 12px; font-weight: 750; letter-spacing: 0; transition: color .16s ease, background .16s ease, border-color .16s ease, box-shadow .16s ease; }
.converter-result-tab:hover { color: var(--green); background: rgba(255,253,248,.68); border-color: var(--action-hover-border); box-shadow: 0 1px 4px rgba(23,104,75,.06); }
.converter-result-tab.is-active { color: var(--green); background: linear-gradient(180deg, var(--segment-active-top), var(--segment-active-bottom)); border-color: var(--action-hover-border); box-shadow: 0 2px 7px rgba(21,36,29,.09), inset 0 1px 0 rgba(255,255,255,.88); }
.unified-output-body { flex: 1 1 auto; min-height: 0; overflow: hidden; }
.unified-output-body .tree-editor { height: 100%; }
.output-view-tabs { flex: 0 0 auto; text-transform: none; }
.unified-output-header { gap: 8px; }

/* 差异报告使用固定定位弹层，不参与主工作区高度计算。 */
.modal-backdrop { position: fixed; z-index: 50; inset: 0; padding: clamp(18px, 4vw, 48px); display: grid; place-items: center; background: rgba(21,36,29,.46); backdrop-filter: blur(4px); }
.report-modal { width: min(1120px, 100%); height: min(82vh, 760px); display: flex; flex-direction: column; overflow: hidden; background: var(--paper); border: 1px solid var(--line-strong); box-shadow: 0 28px 80px rgba(16,27,22,.25); }
.report-modal-header { flex: 0 0 auto; padding: 20px 22px 16px; display: flex; align-items: center; justify-content: space-between; gap: 20px; background: var(--panel); border-bottom: 1px solid var(--line); }
.report-modal-header .eyebrow { margin-bottom: 6px; }
.report-modal-header h2 { margin: 0; font-size: 24px; }
.report-modal-actions { display: flex; align-items: center; gap: 20px; }
.modal-close { width: 36px; height: 36px; padding: 0; color: var(--muted); background: transparent; border: 1px solid var(--line); cursor: pointer; font-size: 25px; line-height: 1; }
.modal-close:hover { color: var(--red); background: var(--red-soft); border-color: var(--danger-hover-border); }
.report-modal-body { flex: 1 1 auto; min-height: 0; padding: 0 22px 22px; overflow-y: auto; }
.report-modal-body .filter-row { position: sticky; z-index: 2; top: 0; margin: 0 -22px 14px; padding: 14px 22px; background: var(--paper); border-bottom: 1px solid var(--line); }

/* Toast 高于报告弹层，确保对比完成提示不会被遮挡。 */
.toast-region { position: fixed; z-index: 60; right: 22px; bottom: 22px; display: grid; gap: 8px; }
.toast { min-width: 240px; padding: 13px 16px; color: white; background: var(--ink); border-left: 4px solid var(--green-strong); box-shadow: 0 14px 35px rgba(16,27,22,.17); font-size: 13px; animation: toast-in .2s ease-out; }
.toast.error { border-left-color: var(--red); }
@keyframes toast-in { from { opacity: 0; transform: translateY(8px); } }
.site-footer { height: 24px; padding: 0 clamp(18px, 4vw, 60px); display: flex; align-items: center; justify-content: space-between; gap: 20px; color: var(--meta); border-top: 1px solid var(--line); font: 8px var(--mono); letter-spacing: .1em; }
.site-footer a { color: inherit; text-decoration: none; border-bottom: 1px solid transparent; transition: color .15s ease, border-color .15s ease; }
.site-footer a:hover, .site-footer a:focus-visible { color: var(--green); border-color: currentColor; outline: 0; }

/* 中等宽度下，操作栏在同一顶栏容器内占据第二行。 */
@media (max-width: 1100px) {
  .site-header { height: 96px; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-rows: 43px 43px; grid-template-areas: "brand note nav" "actions actions actions"; row-gap: 0; }
  .app-shell { height: calc(100dvh - 128px); }
  .header-view-toolbar { width: 100%; justify-self: stretch; border-top: 1px solid var(--line); }
}

/* 平板：格式化面板改为上下排列，对比面板上下平分剩余空间。 */
@media (max-width: 900px) {
  .app-shell { width: min(100% - 28px, 1480px); }
  .site-header { width: min(100% - 28px, 1480px); padding-inline: 8px; grid-template-columns: auto minmax(0, 1fr) auto; column-gap: 8px; }
  .brand > span:last-child { display: none; }
  .main-tabs { width: min(100%, 320px); justify-self: end; }
  .window-note-badge { max-width: 100px; }
  #editor-view { overflow-y: auto; }
  .editor-grid { flex: 0 0 auto; grid-template-columns: 1fr; }
  .diff-input-grid { flex: 1 1 auto; grid-template-columns: 1fr; grid-template-rows: minmax(0, 1fr) auto minmax(0, 1fr); gap: 10px; }
  .editor-grid .panel + .panel { border-left: 1px solid var(--line-strong); border-top: 0; }
  .source-panel, .tree-panel { height: 430px; }
  .tree-editor, .code-wrap { height: auto; }
  .compare-bridge { position: relative; left: auto; top: auto; transform: none; margin: -18px auto; }
  .compare-bridge:hover { transform: scale(1.06); }
  .diff-editor-wrap { height: auto; }
  .diff-card { grid-template-columns: 105px 1fr; }
  .diff-card .diff-cell:nth-child(n+3) { grid-column: span 1; border-top: 1px solid var(--line); }
  .diff-card .diff-cell:nth-child(3) { border-left: 0; }
}
/* 手机：隐藏辅助文案，将标题栏操作收缩为纯图标按钮。 */
@media (max-width: 600px) {
  .site-header { height: 96px; padding: 5px 8px; column-gap: 8px; }
  .app-shell { height: calc(100dvh - 128px); }
  .brand { gap: 0; }.brand > span:last-child { display: none; }.brand-mark { width: 35px; height: 35px; }
  .site-header { grid-template-columns: auto minmax(38px, 1fr) minmax(150px, 220px); grid-template-areas: "brand note nav" "actions actions actions"; }
  .window-note { gap: 3px; }
  .window-note-badge { max-width: 72px; padding-inline: 7px; }
  .window-note-popover { left: -43px; width: min(320px, calc(100vw - 28px)); }
  .main-tabs { width: 100%; min-width: 0; grid-template-columns: repeat(2, minmax(54px, 1fr)); }
  .main-tab { min-height: 36px; padding: 3px 4px; gap: 4px; }.tab-icon { display: none; }
  .tab-copy strong { font-size: 10px; }
  .diff-header-actions .inline-action { width: 28px; padding: 0; gap: 0; font-size: 0; }
  .diff-header-actions .inline-action svg { width: 15px; height: 15px; }
  .diff-editor-wrap { grid-template-columns: 40px minmax(0, 1fr); }
  .diff-line-numbers { padding-inline: 7px; }
  .converter-code-wrap { grid-template-columns: 40px minmax(0, 1fr); }
  .converter-line-numbers { padding-inline: 7px; }
  .converter-output-controls { width: 100%; justify-content: space-between; }
  .converter-result-tab { padding-inline: 6px; }
  .app-view { padding: 7px 0 6px; }
  .tree-header-button span { display: none; }
  .header-view-toolbar .tool-button { flex: 0 0 auto; }
  .header-view-toolbar .tool-button { width: 34px; padding: 0; gap: 0; font-size: 0; }
  .header-view-toolbar .tool-button svg { width: 16px; height: 16px; }
  .header-view-toolbar .menu-chevron { display: none; }
  .header-view-toolbar .highlight-legend { display: none; }
  .toolbar-spacer { display: none; }
  .toolbar-menu { flex: 0 0 auto; }
  .toolbar-menu-popover { width: min(320px, calc(100vw - 44px)); }
  .header-view-toolbar .status-pill { flex: 0 0 auto; padding-inline: 8px; }
  .unified-output-header { height: auto; min-height: 42px; flex: 0 0 auto; padding-block: 4px; flex-wrap: wrap; }
  .output-view-tabs { width: 100%; }
  .output-view-tabs .converter-result-tab { flex: 1; }
  .highlight-legend { width: 100%; justify-content: center; padding: 5px; }
  .tree-editor, .code-wrap { height: 380px; }
  .line-numbers { display: none; }.code-wrap { grid-template-columns: 1fr; }
  .diff-card { grid-template-columns: 1fr; }.diff-cell { border-left: 0; border-top: 1px solid var(--line); }.diff-cell:first-child { border-top: 0; }
  .site-footer { padding: 0 12px; flex-direction: row; align-items: center; }
  .report-modal { height: calc(100dvh - 24px); }
  .report-modal-header { padding: 15px; }
  .report-modal-body { padding: 0 14px 14px; }
}

/* 尊重系统减少动态效果设置，避免滚动和动画造成不适。 */
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; transition-duration: .01ms !important; } }