.text-diff-workspace { display:flex; min-height:620px; flex-direction:column; padding:14px; border:1px solid #dce4ed; border-radius:14px; background:#fff; box-shadow:0 8px 24px rgba(23,44,76,.06); }
.text-diff-toolbar { display:flex; flex-wrap:wrap; align-items:center; gap:7px; margin-bottom:9px; }
.text-diff-button-group { display:flex; gap:5px; }
.text-diff-search { display:grid; grid-template-columns:minmax(120px,220px) 42px 42px; gap:5px; }
.text-diff-search input { width:100%; min-width:0; height:38px; padding:7px 10px; border:1px solid #cbd6e3; border-radius:8px; background:#fff; }
.text-diff-search input:focus { border-color:#4b8bec; outline:3px solid rgba(75,139,236,.16); }
.text-diff-edit-actions { margin-inline-start:auto; }
.text-diff-icon-button { display:inline-flex; min-width:42px; height:38px; align-items:center; justify-content:center; gap:0; padding:5px 7px; border:1px solid #0b63ce; border-radius:8px; background:#0b63ce; color:#fff; }
.text-diff-icon-button:hover { background:#0959b9; }
.text-diff-icon-button.is-warning { border-color:#e6b84f; background:#fff8e7; color:#73510a; }
.text-diff-icon-button.is-warning:hover { background:#ffefc4; }
.text-diff-icon-button .material-icons { font-size:19px; }
.text-diff-icon-button .text-diff-secondary-icon { font-size:16px; }
.text-diff-icon-button:focus-visible,.text-diff-option:has(input:focus-visible) { outline:3px solid #8ab0f8; outline-offset:2px; }
.text-diff-options { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:10px; }
.text-diff-option { display:inline-flex; align-items:center; gap:6px; min-height:34px; padding:5px 10px; border:1px solid #d8e0e9; border-radius:999px; background:#f8fafc; color:#43536a; font-size:12px; font-weight:650; cursor:pointer; }
.text-diff-option input { width:15px; height:15px; margin:0; accent-color:#0b63ce; }
.text-diff-pane-labels { display:grid; grid-template-columns:1fr 1fr; gap:42px; padding:0 10px 5px; color:#52657d; font-size:12px; font-weight:750; }
.text-diff-pane-labels span:last-child { text-align:end; }
.compare-container { position:relative; display:flex; min-height:420px; flex:1 1 auto; overflow:hidden; border:1px solid #cbd6e3; border-radius:10px; background:#fff; }
.compare-container .mergely-resizer { position:absolute; inset:0; }
.compare-container #mergely { position:absolute; inset:0; height:100%; }
.compare-container .CodeMirror { font-family:"SFMono-Regular",Consolas,"Liberation Mono",monospace; font-size:13px; line-height:1.55; }
.compare-container .CodeMirror-gutters { background:#f6f8fb; border-color:#dce4ed; }
.compare-container .mergely-column { border-color:#cbd6e3; }
.mergely-summary { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:7px; margin-top:10px; }
.text-diff-summary-item { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:5px; min-width:0; padding:8px 9px; border:1px solid #e0e6ed; border-radius:8px; background:#f8fafc; }
.text-diff-summary-item span { overflow:hidden; color:#64748b; font-size:11px; line-height:1.25; text-overflow:ellipsis; white-space:nowrap; }
.text-diff-summary-item strong { color:#172033; font-size:16px; font-variant-numeric:tabular-nums; }
.text-diff-help { margin-top:28px; padding:22px; border-radius:14px; background:#f4f7fb; }
.text-diff-help h2 { margin:3px 0 10px; font-size:20px; }
.text-diff-help p:not(.text-diff-eyebrow) { margin:7px 0; color:#52657d; }
.text-diff-eyebrow { margin:0; color:#2563eb; font-size:11px; font-weight:800; letter-spacing:.12em; }
@media (max-width:900px) {
  .mergely-summary { grid-template-columns:repeat(3,minmax(0,1fr)); }
}
@media (max-width:760px) {
  .text-diff-workspace { min-height:590px; padding:10px; border-radius:11px; }
  .text-diff-toolbar { display:grid; grid-template-columns:auto minmax(0,1fr); }
  .text-diff-search { grid-column:1/-1; grid-row:2; grid-template-columns:minmax(0,1fr) 40px 40px; }
  .text-diff-edit-actions { margin-inline-start:auto; }
  .text-diff-icon-button { min-width:40px; }
  .text-diff-options { gap:5px; }
  .text-diff-option { padding:4px 8px; }
  .compare-container { min-height:400px; }
  .mergely-summary { gap:5px; }
  .text-diff-summary-item { padding:7px; }
  .text-diff-summary-item span { white-space:normal; }
  .text-diff-help { margin-top:22px; padding:18px; }
}
@media (max-width:480px) {
  .text-diff-workspace { min-height:560px; padding:8px; }
  .text-diff-toolbar { gap:5px; }
  .text-diff-button-group { gap:4px; }
  .text-diff-icon-button { min-width:37px; width:37px; height:36px; padding:4px; }
  .text-diff-search { grid-template-columns:minmax(0,1fr) 37px 37px; gap:4px; }
  .text-diff-search input { height:36px; }
  .text-diff-options { margin-bottom:7px; }
  .text-diff-option { min-height:30px; font-size:11px; }
  .text-diff-pane-labels { gap:36px; padding-inline:7px; }
  .compare-container { min-height:370px; }
  .compare-container .CodeMirror { font-size:12px; }
  .mergely-summary { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .text-diff-summary-item { min-height:42px; }
}