.tool-page{max-width:1100px;margin:0 auto;padding:18px 16px;}
.tool-header{display:flex;gap:16px;align-items:flex-start;justify-content:space-between;margin-bottom:14px;}
.tool-title{font-size:22px;line-height:1.2;margin:0;}
.tool-subtitle{margin:6px 0 0;color:rgba(0,0,0,.65);max-width:720px;}

.tool-actions{display:flex;gap:10px;align-items:center;}

.diff-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:10px;}
@media (max-width: 980px){.diff-grid{grid-template-columns:1fr;}}

.card{background:#fff;border:1px solid rgba(0,0,0,.08);border-radius:14px;box-shadow:0 6px 20px rgba(0,0,0,.04);}
.card-head{padding:12px 14px;border-bottom:1px solid rgba(0,0,0,.06);display:flex;align-items:center;justify-content:space-between;gap:12px;}
.card-title{font-weight:650;}
.card-body{padding:12px 14px;}

.textarea{
  width:100%;
  min-height:280px;
  resize:vertical;
  border:1px solid rgba(0,0,0,.12);
  border-radius:12px;
  padding:12px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono","Courier New", monospace;
  font-size:13px;
  line-height:1.45;
  outline:none;
}
.textarea:focus{border-color:rgba(0,0,0,.25);box-shadow:0 0 0 3px rgba(0,0,0,.06);}




.input,.select{
  border:1px solid rgba(0,0,0,.12);
  border-radius:12px;
  padding:10px 12px;
  outline:none;
}
.select{background:#fff;}
.input:focus,.select:focus{border-color:rgba(0,0,0,.25);box-shadow:0 0 0 3px rgba(0,0,0,.06);}

.diff-results{margin-top:14px;}
.diff-results-head{align-items:flex-start;}
.diff-savebar{display:flex;gap:10px;align-items:center;flex-wrap:wrap;}
.hint{color:rgba(0,0,0,.6);font-size:13px;padding-top:2px;}

.diff-legend{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:10px;}
.pill{padding:6px 10px;border-radius:999px;font-size:12px;border:1px solid rgba(0,0,0,.10);}
.pill-del{background:rgba(255,0,0,.06);}
.pill-add{background:rgba(0,160,0,.08);}
.pill-same{background:rgba(0,0,0,.03);}

/* ===== Output grid (fix voor lange regels die layout oprekken) ===== */
.diff-output-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
@media (max-width: 980px){.diff-output-grid{grid-template-columns:1fr;}}

/* Als JS 'is-stacked' zet (bij extreme overflow): onder elkaar */
.diff-output-grid.is-stacked{grid-template-columns:1fr;}

/* Cruciaal: grid-items mogen krimpen (anders duwen lange regels alles uit elkaar) */
.diff-output{min-width:0;}

.diff-output-title{font-weight:700;margin-bottom:8px;}
.diff-pre{
  border:1px solid rgba(0,0,0,.10);
  border-radius:12px;
  padding:12px;
  min-height:220px;
  overflow:auto;
  background:rgba(0,0,0,.02);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono","Courier New", monospace;
  font-size:13px;
  line-height:1.45;

  /* Geen horizontale scroll als primaire oplossing: wrap lange regels */
  white-space:pre-wrap;
  overflow-wrap:anywhere;
  word-break:break-word;

  /* extra zekerheid tegen grid-overschot */
  min-width:0;
}

.diff-same{display:block;}
.diff-del{display:block;background:rgba(255,0,0,.14);border-left:3px solid rgba(255,0,0,.55);padding-left:8px;border-radius:6px;}
.diff-add{display:block;background:rgba(0,160,0,.14);border-left:3px solid rgba(0,160,0,.55);padding-left:8px;border-radius:6px;}
.diff-empty{display:block;min-height:1.45em;}

.diff-status{margin-top:10px;color:rgba(0,0,0,.65);font-size:13px;}