.compare-main { padding-block: 16px 64px; max-width: 1120px; }
.compare-breadcrumb { display:block; color:var(--muted); font-size:13px; margin-bottom:18px; }
.compare-breadcrumb a { text-decoration:underline; }
.compare-heading h1 { font-size:clamp(30px,5vw,44px); letter-spacing:-1px; margin:8px 0; }
.compare-heading p { color:var(--muted); margin:8px 0 14px; }
.compare-private { display:inline-block; background:#dcece2; color:#3f6b52; border-radius:99px; padding:5px 13px; font-size:12px; font-weight:700; }
.compare-tabs { display:flex; flex-wrap:wrap; gap:8px; margin:22px 0; }
.compare-tabs a { display:inline-flex; align-items:center; min-height:44px; font-size:13px; padding:8px 14px; background:var(--white); border:1px solid var(--line); border-radius:99px; }
.compare-tabs [aria-current] { background:var(--ink); color:var(--white); }
.compare-input-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
.compare-panel, .compare-options, .compare-result, .compare-help, .list-result-card { background:var(--white); border:1px solid var(--line); border-radius:20px; padding:20px; min-width:0; }
.compare-panel label { display:block; font-weight:750; margin-bottom:10px; }
.compare-panel textarea, .list-result-area { display:block; width:100%; min-height:220px; resize:vertical; font:inherit; font-size:16px; line-height:1.7; padding:14px; background:var(--white); color:var(--ink); border:1px solid #c5b7a6; border-radius:12px; overflow-wrap:anywhere; }
.compare-options { margin-top:16px; }
.compare-options legend { padding-inline:8px; font-weight:750; }
.compare-primary-options { display:flex; flex-wrap:wrap; gap:12px 20px; align-items:end; }
.compare-field { display:flex; flex-direction:column; gap:6px; min-width:180px; flex:1 1 220px; font-size:14px; font-weight:650; }
.compare-field select { min-height:44px; border:1px solid #c5b7a6; border-radius:10px; background:var(--white); color:var(--ink); font:inherit; padding:10px; }
.compare-advanced { border-top:1px solid var(--line); margin-top:14px; }
.compare-advanced summary, .compare-help summary { min-height:44px; line-height:24px; padding-block:10px; cursor:pointer; font-weight:700; }
.compare-checks { display:flex; flex-wrap:wrap; gap:6px 20px; }
.compare-checks label { display:inline-flex; align-items:center; gap:8px; min-height:44px; font-size:14px; cursor:pointer; }
.compare-checks input { width:18px; height:18px; accent-color:var(--accent); }
.compare-runbar { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px; margin:16px 0; }
.compare-actions { display:flex; flex-wrap:wrap; gap:8px; }
.compare-actions .button { min-height:44px; font:inherit; cursor:pointer; }
.compare-main button:disabled { opacity:.5; cursor:not-allowed; transform:none; }
.compare-status, .compare-state, .compare-hint { color:var(--muted); font-size:13px; overflow-wrap:anywhere; }
.compare-status { min-height:1.8em; margin:0; flex:1 1 280px; }
.compare-status.is-error, .compare-error { color:#a53124; }
.compare-state { margin:0 0 12px; font-weight:700; }
.compare-state[data-state=stale] { color:#8a5319; }
.compare-state[data-state=ready] { color:#3f6b52; }
.compare-result { margin-top:16px; }
.compare-result-head { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:10px; margin-bottom:12px; }
.compare-result-head h2 { margin:0; font-size:18px; }
.diff-toolbar { display:flex; flex-wrap:wrap; align-items:center; gap:8px; }
.diff-toolbar .button { min-height:40px; padding:8px 12px; }
.diff-count { min-width:72px; text-align:center; color:var(--muted); font-size:13px; font-weight:700; }
.diff-summary { margin:0 0 12px; padding:10px 12px; border-radius:12px; background:#f7f0e6; color:var(--muted); font-size:13px; }
.diff-legend { display:flex; flex-wrap:wrap; gap:10px; margin:0 0 12px; font-size:12px; color:var(--muted); }
.diff-legend span { display:inline-flex; gap:6px; align-items:center; }
.diff-legend i { width:12px; height:12px; border-radius:3px; display:inline-block; }
.diff-legend .add { background:#dcece2; }
.diff-legend .delete { background:#f6dee2; }
.diff-legend .modified { background:#f6edbe; }
.diff-output { min-height:220px; max-height:560px; overflow:auto; border:1px solid #d6c8b6; border-radius:14px; background:#fcfaf6; color:var(--ink); font:14px/1.7 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; white-space:pre-wrap; overflow-wrap:anywhere; }
.diff-output:focus-visible, .diff-chunk:focus-visible, .compare-main :is(button,select,textarea):focus-visible { outline:3px solid var(--accent); outline-offset:3px; }
.diff-lines { padding:8px 0; white-space:normal; }
.diff-line { padding:3px 12px; white-space:pre-wrap; overflow-wrap:anywhere; }
.diff-line.diff-add { background:#e8f3ec; color:#315d44; }
.diff-line.diff-delete { background:#fae8eb; color:#8c4653; }
.diff-line.diff-modified { box-shadow:inset 4px 0 #d8b85d; }
.diff-inline { padding:14px; }
.diff-inline .diff-add { background:#dcece2; color:#315d44; text-decoration:none; }
.diff-inline .diff-delete { background:#f6dee2; color:#8c4653; text-decoration:line-through; }
.diff-inline .diff-modified { box-shadow:inset 0 -2px #d8b85d; }
.diff-chunk { border-radius:4px; }
.diff-chunk.is-current { outline:3px solid #d98a51; outline-offset:2px; }
.compare-mobile-switch { display:none; gap:8px; margin:12px 0; }
.compare-mobile-switch button { flex:1 1 0; min-height:44px; border:1px solid var(--line); border-radius:99px; background:var(--white); color:var(--ink); font:inherit; font-weight:700; }
.compare-mobile-switch button[aria-pressed=true] { background:var(--ink); color:var(--white); }
.list-stats { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:8px; margin:0 0 16px; }
.list-stat { background:#f7f0e6; border-radius:12px; padding:10px; text-align:center; min-width:0; }
.list-stat strong { display:block; font-size:20px; }
.list-stat span { display:block; color:var(--muted); font-size:11px; margin-top:2px; }
.list-result-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
.list-result-card { padding:16px; }
.list-result-card h3 { margin:0; font-size:16px; }
.list-result-card .compare-result-head { margin-bottom:8px; }
.list-result-area { min-height:150px; resize:vertical; background:#faf7f1; }
.list-result-card .compare-actions { margin-top:10px; }
.compare-help { font-size:14px; color:var(--muted); margin-top:22px; }
.compare-help summary { font-size:16px; color:var(--ink); }
.compare-help ul { padding-left:22px; }
.compare-help li { margin-block:8px; }
.compare-main [hidden] { display:none !important; }
@media(max-width:860px) { .list-stats { grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media(max-width:720px) {
  .compare-main { padding-top:8px; }
  .compare-input-grid { grid-template-columns:1fr; }
  .compare-panel, .compare-options, .compare-result, .compare-help { padding:16px; }
  .compare-panel textarea { min-height:210px; }
  .compare-mobile-switch { display:flex; }
  .compare-text-form[data-mobile-view=a] .compare-input-b, .compare-text-form[data-mobile-view=a] .compare-result { display:none; }
  .compare-text-form[data-mobile-view=b] .compare-input-a, .compare-text-form[data-mobile-view=b] .compare-result { display:none; }
  .compare-text-form[data-mobile-view=diff] .compare-input-grid, .compare-text-form[data-mobile-view=diff] .compare-options, .compare-text-form[data-mobile-view=diff] .compare-runbar { display:none; }
  .list-result-grid { grid-template-columns:1fr; }
  .compare-actions .button { flex:1 1 auto; padding-inline:12px; }
  .compare-primary-options { display:block; }
  .compare-field { min-width:0; }
}
@media(max-width:390px) { .list-stats { grid-template-columns:repeat(2,minmax(0,1fr)); } .diff-toolbar { width:100%; } .diff-toolbar .button { flex:1 1 auto; } }
@media(prefers-reduced-motion:reduce) { .compare-main *, .compare-main *::before, .compare-main *::after { scroll-behavior:auto !important; transition:none !important; } }

.json-diff-output { display:grid; gap:8px; max-height:min(60vh,560px); overflow:auto; padding:4px; }
.json-diff-row { display:grid; gap:4px; padding:10px 12px; border-radius:12px; background:#faf7f1; border:1px solid #eadfce; }
.json-diff-path { font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:12px; color:#5c5248; word-break:break-all; }
.json-diff-detail { display:flex; flex-wrap:wrap; gap:6px; align-items:center; font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:13px; }
.json-diff-arrow { color:var(--muted); }
.json-diff-add { border-left:4px solid #5f8f73; }
.json-diff-delete { border-left:4px solid #b45b67; }
.json-diff-change, .json-diff-type { border-left:4px solid #d8b85d; }
.csv-stats { grid-template-columns:repeat(7,minmax(0,1fr)); }
@media(max-width:860px) { .csv-stats { grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media(max-width:390px) { .csv-stats { grid-template-columns:repeat(2,minmax(0,1fr)); } }