.formatter-toolbar {
  display: flex;
  align-items: end;
  justify-content: flex-end;
  gap: 10px;
  padding: 14px 0;
}

.formatter-toolbar label { display: grid; gap: 5px; margin-right: auto; }
.formatter-toolbar label[hidden],
#compare-panel[hidden] { display: none; }
.formatter-toolbar label span { color: var(--color-muted); font-size: 10px; font-weight: 700; text-transform: uppercase; }
.formatter-toolbar select { min-width: 130px; }
.json-query-toolbar { display: grid; grid-template-columns: minmax(160px, .3fr) minmax(0, 1fr); gap: 12px; padding: 14px 0; }.json-query-toolbar label { display: grid; gap: 6px; }.json-query-toolbar span { color: var(--color-muted); font-size: 11px; font-weight: 700; }.json-query-toolbar input, .json-query-toolbar select { min-height: 42px; }

.formatter-editors { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.formatter-editors[hidden] { display: none; }
.html-markdown-page .formatter-editors { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.html-markdown-preview { height: 430px; overflow: auto; padding: 18px; background: var(--color-surface); color: var(--color-ink); font-size: 14px; line-height: 1.65; }
.html-markdown-preview > :first-child { margin-top: 0; }
.html-markdown-preview > :last-child { margin-bottom: 0; }
.html-markdown-preview h1, .html-markdown-preview h2, .html-markdown-preview h3, .html-markdown-preview h4, .html-markdown-preview h5, .html-markdown-preview h6 { margin: 1.25em 0 .5em; line-height: 1.25; }
.html-markdown-preview p, .html-markdown-preview ul, .html-markdown-preview ol, .html-markdown-preview blockquote, .html-markdown-preview pre { margin: 0 0 1em; }
.html-markdown-preview pre { overflow: auto; padding: 12px; border: 1px solid var(--color-border); border-radius: var(--radius-control); background: var(--color-canvas); }
.html-markdown-preview code { font-family: var(--font-code); font-size: .9em; }
.html-markdown-preview blockquote { margin-left: 0; padding: 10px 14px; border: 1px solid var(--color-border); color: var(--color-muted); }
.html-markdown-preview img { max-width: 100%; height: auto; }
.html-markdown-preview table { width: 100%; border-collapse: collapse; }
.html-markdown-preview th, .html-markdown-preview td { padding: 7px 9px; border: 1px solid var(--color-border); text-align: left; }
.html-markdown-preview .align-center { text-align: center; }
.html-markdown-preview .align-right { text-align: right; }
.markdown-guide { grid-column: 1 / -1; margin-bottom: 1rem;}
.markdown-guide summary { width: fit-content; padding: 11px 0; color: var(--color-ink); font-size: 13px; font-weight: 700; cursor: pointer; }
.markdown-guide summary:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; }
.markdown-guide > p { margin: 0 0 12px; color: var(--color-muted); font-size: 13px; }
.markdown-guide-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1px; margin-bottom: 16px; overflow: hidden; border: 1px solid var(--color-border); border-radius: var(--radius-control); background: var(--color-border); }
.markdown-guide-grid > div { display: grid; gap: 4px; min-width: 0; padding: 10px 12px; background: var(--color-surface); }
.markdown-guide-smart.guide-span-2 { grid-column: span 2; }
.markdown-guide-smart.guide-span-3 { grid-column: span 3; }
.markdown-guide-smart.guide-span-4 { grid-column: span 4; }
.markdown-guide-smart.guide-span-5 { grid-column: span 5; }
.markdown-guide-smart.guide-span-6 { grid-column: span 6; }
.markdown-guide-smart.guide-span-7 { grid-column: span 7; }
.markdown-guide-smart.guide-span-8 { grid-column: span 8; }
.markdown-guide-smart.guide-span-9 { grid-column: span 9; }
.markdown-guide-smart.guide-span-10 { grid-column: span 10; }
.markdown-guide-smart.guide-span-11 { grid-column: span 11; }
.markdown-guide-smart.guide-span-12 { grid-column: span 12; }
.markdown-guide-grid span { color: var(--color-muted); font-size: 11px; font-weight: 700; }
.markdown-guide-grid code { overflow-x: auto; color: var(--color-ink); font-family: var(--font-code); font-size: 11px; white-space: nowrap; }
.formatter-editors.is-diff { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.formatter-editor-panel { min-width: 0; overflow: hidden; border: 1px solid var(--color-border); border-radius: var(--radius-control); }
.formatter-editor-heading { display: flex; align-items: center; justify-content: space-between; min-height: 45px; padding: 9px 13px; border-bottom: 1px solid var(--color-border); }
.formatter-editor-heading h3 { margin: 0; font-size: 13px; }
.formatter-editor-heading span { color: var(--color-muted); font-family: var(--font-code); font-size: 10px; }
.formatter-editor-heading > div { display: flex; align-items: center; gap: 8px; }
.editor-action { padding: 4px 7px; border: 1px solid var(--color-border); border-radius: 4px; background: var(--color-canvas); color: var(--color-muted); font: inherit; font-size: 10px; font-weight: 700; cursor: pointer; }
.editor-action:hover:not(:disabled) { border-color: var(--color-ink); color: var(--color-ink); }
.editor-action:disabled { cursor: not-allowed; opacity: .45; }
.editor-action[hidden] { display: none; }
.formatter-editor-panel .schema-code { min-height: 430px; }
#formatter-output { background: var(--color-canvas); }
#formatter-status { min-height: 20px; margin-top: 12px; }

.formatter-editor-panel .CodeMirror { height: 430px; background: var(--color-surface); color: var(--color-ink); font-family: var(--font-code); font-size: 12px; line-height: 1.65; padding: 2px 0 2px 2px; border-bottom-right-radius: 8px; border-bottom-left-radius: 8px;}
.schema-editor-panel .CodeMirror { height: 430px; background: var(--color-surface); color: var(--color-ink); font-family: var(--font-code); font-size: 12px; line-height: 1.65; }
.schema-editor-panel .CodeMirror-gutters { border-right-color: var(--color-border); background: var(--color-canvas); }
.schema-editor-panel .CodeMirror-focused { outline: 0; border-bottom-left-radius: 8px; border-bottom-right-radius: 8px;}
.formatter-editor-panel .CodeMirror-gutters { border-right-color: var(--color-border); background: var(--color-canvas); }
.formatter-editor-panel .CodeMirror-linenumber { color: var(--color-muted); }
.formatter-editor-panel .CodeMirror-focused { outline: 0; }
.schema-editor-panel .CodeMirror-focused::after, .formatter-editor-panel .CodeMirror-focused::after { position: absolute; inset: 0; z-index: 10; border: 2px solid var(--color-accent); border-radius: inherit; content: ""; pointer-events: none; }
.formatter-editor-panel .json-error-line { background: color-mix(in srgb, var(--color-error) 13%, transparent); }
.formatter-editor-panel .diff-added-line { background: color-mix(in srgb, var(--color-accent) 14%, transparent); color: var(--color-accent); }
.formatter-editor-panel .diff-removed-line { background: color-mix(in srgb, var(--color-error) 13%, transparent); color: var(--color-error); }

@media (max-width: 1180px) {
  .html-markdown-page .formatter-editors { grid-template-columns: 1fr 1fr; }
  .html-markdown-page .html-markdown-preview-panel { grid-column: 1 / -1; }
  .formatter-editors.is-diff { grid-template-columns: 1fr 1fr; }
  .formatter-editors.is-diff .formatter-editor-panel:last-child { grid-column: 1 / -1; }
}

@media (max-width: 800px) {
  .json-query-toolbar { grid-template-columns: 1fr; }
  .formatter-editors,
  .formatter-editors.is-diff { grid-template-columns: 1fr; }
  .formatter-editors.is-diff .formatter-editor-panel:last-child { grid-column: auto; }
  .html-markdown-page .formatter-editors { grid-template-columns: 1fr; }
  .html-markdown-page .html-markdown-preview-panel { grid-column: auto; }
  .formatter-toolbar { align-items: stretch; flex-wrap: wrap; }
  .formatter-toolbar label { width: 100%; }
  .formatter-toolbar select { width: 100%; }
  .formatter-toolbar .button { flex: 1; }
}