.cmp-drops { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
  @media (max-width: 760px) { .cmp-drops { grid-template-columns: 1fr; } }
  #tool-compare .dz-ver { margin: 0 0 6px; color: var(--muted); font-size: .78rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
  /* przed wczytaniem plików: ta sama szerokość co w innych narzędziach, oba pola po 420 px obok siebie,
     a siatka (nie pojedyncze pola) dostaje margines, który wyśrodkowuje treść w pionie */
  #tool-compare.is-empty .cmp-drops { width: 100%; max-width: 872px; margin: 0 auto auto; padding-bottom: 24px; gap: 24px; box-sizing: border-box; }
  #tool-compare.is-empty .cmp-drops .dzwrap { min-width: 0; margin-bottom: 0; padding-bottom: 0; }
  /* karty informacyjne pod polem na plik: jedna szerokość we wszystkich narzędziach */
  .view.tool .tool-info-cards { width: 100%; max-width: 872px; margin-left: auto; margin-right: auto; box-sizing: border-box; }
  .cmp-bar, .cmp-nav { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; margin: 4px 0 10px; }
  .cmp-modes { margin: 0; }
  .cmp-nav .sp { flex: 1; }
  .cmp-sum { margin: 0; font-weight: 700; } .cmp-sum.ok { color: var(--ok, #1a7f4b); }
  .cmp-pos { min-width: 4.5em; text-align: center; color: var(--muted); font-variant-numeric: tabular-nums; }
  .cmp-list { display: grid; gap: 4px; max-height: 190px; overflow: auto; margin: 0 0 10px; padding: 4px; border: 1px solid var(--border); border-radius: 12px; background: var(--card); }
  .cmp-list:empty { display: none; }
  #tool-compare .cmp-item { display: flex; gap: 10px; align-items: baseline; width: 100%; min-height: 0; margin: 0; padding: 6px 10px; border: 0; border-radius: 8px; background: transparent; box-shadow: none; color: var(--text); font: inherit; font-size: .9rem; font-weight: 400; text-align: left; cursor: pointer; transform: none; }
  #tool-compare .cmp-item:hover { background: color-mix(in srgb, var(--text) 7%, transparent); }
  #tool-compare .cmp-item.on { background: color-mix(in srgb, var(--accent) 18%, transparent); }
  .cmp-item .n { flex: none; min-width: 1.8em; color: var(--muted); font-variant-numeric: tabular-nums; }
  .cmp-item .t { word-break: break-word; }
  .cmp-item.k-del .n, .cmp-item.k-pageDel .n { color: #e0301e; } .cmp-item.k-ins .n, .cmp-item.k-pageIns .n { color: #1a9e4d; } .cmp-item.k-chg .n { color: #d98a00; }
  .cmp-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 0 0 10px; color: var(--muted); font-size: .85rem; }
  .cmp-legend .lg { display: inline-block; width: 16px; height: 10px; border-radius: 3px; }
  .lg.del { background: rgba(224,48,30,.35); border: 1px solid #e0301e; } .lg.ins { background: rgba(26,158,77,.32); border: 1px solid #1a9e4d; } .lg.vis { background: rgba(217,138,0,.3); border: 1px solid #d98a00; }
  .cmp-view { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
  @media (max-width: 760px) { .cmp-view { grid-template-columns: 1fr; } .cmp-col { max-height: 60vh; } }
  .cmp-col { max-height: calc(100vh - 190px); overflow: auto; padding: 10px; border-radius: 12px; background: color-mix(in srgb, var(--text) 7%, transparent); }
  .cmp-head { position: sticky; top: -10px; z-index: 2; margin: -10px -10px 10px; padding: 8px 12px; background: var(--card); border-bottom: 1px solid var(--border); font-size: .88rem; color: var(--muted); word-break: break-all; }
  .cmp-head b { color: var(--text); }
  .cmp-page { position: relative; margin: 0 auto 12px; background: #fff; box-shadow: 0 2px 10px rgba(0,0,0,.25); }
  .cmp-page canvas { display: block; }
  .cmp-pnum { position: absolute; right: 6px; bottom: 6px; padding: 1px 7px; border-radius: 6px; background: rgba(0,0,0,.55); color: #fff; font-size: .72rem; font-weight: 700; }
  .cmp-hl { position: absolute; display: block; border-radius: 2px; cursor: pointer; mix-blend-mode: multiply; }
  .cmp-hl.del { background: rgba(224,48,30,.32); box-shadow: inset 0 -2px 0 rgba(224,48,30,.9); }
  .cmp-hl.ins { background: rgba(26,158,77,.3); box-shadow: inset 0 -2px 0 rgba(26,158,77,.9); }
  .cmp-hl.vis { background: rgba(217,138,0,.28); }
  .cmp-hl.page { background: transparent !important; box-shadow: inset 0 0 0 4px currentColor; }
  .cmp-hl.del.page { color: #e0301e; } .cmp-hl.ins.page { color: #1a9e4d; }
  .cmp-hl.cur { outline: 2px solid #f0b429; outline-offset: 1px; mix-blend-mode: normal; }
  .cmp-more { color: var(--muted); font-size: .85rem; text-align: center; }
  #cmpmsg { margin-top: 8px; } #cmpmsg.ok { color: var(--ok, #1a7f4b); } #cmpmsg.error { color: var(--error, #d92d20); }