:root {
  color-scheme: light;
  --background: 48 30% 96%;
  --foreground: 30 8% 10%;
  --card: 45 25% 93%;
  --secondary: 45 22% 90%;
  --muted-foreground: 40 6% 39%;
  --accent: 217 84% 46%;
  --accent-foreground: 0 0% 98%;
  --destructive: 4 70% 47%;
  --added: 142 52% 32%;
  --border: 45 18% 85%;
  --ring: 217 84% 46%;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --font-display: "Space Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --background: 30 8% 8%;
    --foreground: 45 25% 90%;
    --card: 30 7% 11%;
    --secondary: 30 6% 15%;
    --muted-foreground: 40 6% 62%;
    --accent: 217 90% 64%;
    --accent-foreground: 30 8% 8%;
    --destructive: 4 75% 62%;
    --added: 142 50% 52%;
    --border: 30 6% 21%;
    --ring: 217 90% 64%;
  }
}

*, *::before, *::after { box-sizing: border-box; border-radius: 0 !important; }
html, body { margin: 0; }
body {
  background: hsl(var(--background));
  color: hsl(var(--foreground));
  font: 400 13.5px/1.5 var(--font-mono);
  -webkit-font-smoothing: antialiased;
}
a { color: hsl(var(--accent)); text-decoration: none; }
a:hover { text-decoration: underline; }
:focus-visible { outline: 1px solid hsl(var(--ring)); outline-offset: 1px; }

.wrap { max-width: 1480px; margin: 0 auto; padding: 20px clamp(12px, 3vw, 32px) 40px; }
.page-transition { animation: page-enter 420ms cubic-bezier(0.22, 1, 0.36, 1) backwards; }
@keyframes page-enter {
  from { opacity: 0; transform: translateY(10px); filter: blur(6px); }
  to { opacity: 1; transform: translateY(0); filter: blur(0); }
}
@media (prefers-reduced-motion: reduce) { .page-transition { animation: none; } }

.top { display: flex; align-items: baseline; gap: 18px; flex-wrap: wrap; margin-bottom: 16px; }
.brand { font: 700 clamp(1.6rem, 3vw, 2.1rem)/1 var(--font-display); letter-spacing: -0.02em; color: hsl(var(--foreground)); }
.brand:hover { text-decoration: none; }
.glyph { color: hsl(var(--accent)); font-weight: 400; }
.tag { margin: 0; color: hsl(var(--muted-foreground)); }

.section-heading { font: 700 1.1rem/1.2 var(--font-display); letter-spacing: -0.01em; margin: 0 0 10px; }
.section-heading::before { content: "■ "; color: hsl(var(--accent)); font-weight: 400; }

.inputs { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.pane { border: 1px solid hsl(var(--border)); background: hsl(var(--card)); display: flex; flex-direction: column; min-width: 0; transition: border-color 150ms; }
.pane.drag { border-color: hsl(var(--accent)); }
.pane-head { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-bottom: 1px solid hsl(var(--border)); }
.name { font: 500 12.5px var(--font-mono); color: hsl(var(--foreground)); background: transparent; border: 1px solid transparent; padding: 2px 4px; min-width: 0; flex: 1 1 100px; max-width: 240px; }
.name:hover, .name:focus { border-color: hsl(var(--border)); outline: none; }
.meta { color: hsl(var(--muted-foreground)); font-size: 11px; flex: 1 1 auto; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 480px) { .meta { display: none; } }
textarea {
  font: 400 12.5px/1.5 var(--font-mono); color: hsl(var(--foreground)); background: hsl(var(--background));
  border: 0; padding: 10px 12px; height: 220px; resize: vertical; width: 100%; tab-size: 4; white-space: pre; overflow: auto;
}
textarea:focus { outline: none; box-shadow: inset 0 0 0 1px hsl(var(--ring)); }
textarea::placeholder { color: hsl(var(--muted-foreground)); }

.btn, .seg button {
  font: 500 12.5px/1 var(--font-mono); color: hsl(var(--foreground)); background: hsl(var(--background));
  border: 1px solid hsl(var(--border)); padding: 8px 12px; cursor: pointer; white-space: nowrap; transition: background-color 150ms, border-color 150ms;
}
.btn:hover, .seg button:hover { background: hsl(var(--secondary)); }
.btn.sm { padding: 4px 8px; font-size: 11px; }
.btn.primary { background: hsl(var(--foreground)); color: hsl(var(--background)); border-color: hsl(var(--foreground)); }
.btn.primary:hover { background: hsl(var(--accent)); border-color: hsl(var(--accent)); color: hsl(var(--accent-foreground)); }
.btn:disabled { opacity: 0.45; cursor: default; }
.seg { display: inline-flex; }
.seg button + button { border-left: 0; }
.seg button[aria-pressed="true"] { background: hsl(var(--foreground)); color: hsl(var(--background)); border-color: hsl(var(--foreground)); }
.seg button[aria-pressed="true"]::before { content: "▸ "; }

.bar { display: flex; align-items: center; gap: 8px 16px; flex-wrap: wrap; margin: 14px 0 10px; }
.grow { flex: 1; }
.chk { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; user-select: none; font-size: 12.5px; }
.chk input { accent-color: hsl(var(--accent)); margin: 0; }

.status { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 8px 0; border-top: 1px solid hsl(var(--border)); }
.stats { display: flex; gap: 14px; flex-wrap: wrap; font-size: 12.5px; color: hsl(var(--muted-foreground)); }
.stats b { font-weight: 600; }
.add { color: hsl(var(--added)); }
.del { color: hsl(var(--destructive)); }
.chg { color: hsl(var(--accent)); }
.nav { display: flex; align-items: center; gap: 8px; }
.pos { min-width: 9ch; text-align: center; font-size: 12.5px; color: hsl(var(--muted-foreground)); }
.msg { margin: 0 0 8px; min-height: 1.5em; font-size: 12.5px; color: hsl(var(--muted-foreground)); }
.msg.err { color: hsl(var(--destructive)); }

.json { border: 1px solid hsl(var(--border)); background: hsl(var(--card)); padding: 12px 14px; margin-bottom: 12px; }
.json ol { margin: 0; padding: 0; list-style: none; max-height: 220px; overflow: auto; font-size: 12.5px; }
.json li { padding: 2px 0; display: flex; gap: 10px; flex-wrap: wrap; }
.json .p { color: hsl(var(--foreground)); font-weight: 500; }
.json .v { color: hsl(var(--muted-foreground)); word-break: break-all; }

/* diff output */
.out { --nw: 4ch; border: 1px solid hsl(var(--border)); font: 400 12.5px/1.55 var(--font-mono); min-height: 120px; }
.out:empty { display: none; }
.r { display: grid; grid-template-columns: var(--nw) minmax(0, 1fr) var(--nw) minmax(0, 1fr); }
.unified .r { grid-template-columns: var(--nw) var(--nw) 2ch minmax(0, 1fr); }
.r > * { padding: 0 8px 0 0; min-height: 1.55em; }
.r code { font: inherit; white-space: pre-wrap; word-break: break-all; padding-left: 8px; tab-size: 4; }
.r .n { font-style: normal; text-align: right; color: hsl(var(--muted-foreground)); user-select: none; font-size: 11px; line-height: 1.55rem; background: hsl(var(--card)); opacity: 0.85; }
.split .r code:nth-of-type(1) { border-right: 1px solid hsl(var(--border)); }
.r .s { font-style: normal; user-select: none; text-align: center; padding: 0; }
.r .d { background: hsl(var(--destructive) / 0.1); }
.r .a { background: hsl(var(--added) / 0.12); }
.r .e { background: hsl(var(--secondary) / 0.6); }
.r .d mark, .r.d mark { background: hsl(var(--destructive) / 0.3); color: inherit; }
.r .a mark, .r.a mark { background: hsl(var(--added) / 0.32); color: inherit; }
.unified .r.d > * { background: hsl(var(--destructive) / 0.1); }
.unified .r.a > * { background: hsl(var(--added) / 0.12); }
.unified .r.d .s { color: hsl(var(--destructive)); }
.unified .r.a .s { color: hsl(var(--added)); }
.blk { border-left: 2px solid transparent; scroll-margin: 30vh; }
.blk.cur { border-left-color: hsl(var(--accent)); }
.fold { border-top: 1px solid hsl(var(--border)); border-bottom: 1px solid hsl(var(--border)); background: hsl(var(--card)); }
.fold button { all: unset; display: block; width: 100%; padding: 3px 12px; cursor: pointer; color: hsl(var(--muted-foreground)); font-size: 11px; box-sizing: border-box; }
.fold button:hover, .fold button:focus-visible { color: hsl(var(--accent)); background: hsl(var(--secondary)); }

.empty { padding: 36px 20px; text-align: center; color: hsl(var(--muted-foreground)); }
.empty p { margin: 0 0 14px; }
.empty .row { display: inline-flex; gap: 8px; flex-wrap: wrap; justify-content: center; }

.foot { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 18px; color: hsl(var(--muted-foreground)); font-size: 11px; }
kbd { font: 500 11px var(--font-mono); border: 1px solid hsl(var(--border)); padding: 0 4px; background: hsl(var(--card)); color: hsl(var(--foreground)); }

body.dragging .pane { border-style: dashed; }

@media (max-width: 760px) {
  .inputs { grid-template-columns: 1fr; }
  textarea { height: 150px; }
  .bar .grow { display: none; }
}