.tool-head{padding:32px 0;display:flex;flex-direction:column;gap:14px;max-width:760px}
.tool-head h1{margin:0;font:700 56px/1.02 var(--font-display);letter-spacing:-.03em}
.tool-head p{margin:0;font-size:18px;line-height:1.5;color:var(--muted)}

.controls{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px;padding-bottom:20px}
.toggles,.actions{display:flex;flex-wrap:wrap;align-items:center;gap:22px}
.actions{gap:10px}
.toggle{display:flex;align-items:center;gap:10px;font-size:14px;font-weight:500;cursor:pointer}
.switch{appearance:none;-webkit-appearance:none;margin:0;width:48px;height:28px;border-radius:999px;background:#9AA1B0;position:relative;cursor:pointer;flex:none;transition:background .15s}
.switch::after{content:"";position:absolute;top:3px;left:3px;width:22px;height:22px;border-radius:50%;background:#fff;transition:transform .15s}
.switch:checked{background:var(--blue)}
.switch:checked::after{transform:translateX(20px)}

.editors{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.pane{background:#fff;border-radius:20px;display:flex;flex-direction:column;box-shadow:0 0 0 1.5px var(--line)}
.pane-head{display:flex;align-items:center;justify-content:space-between;padding:14px 18px;border-bottom:1.5px solid var(--line)}
.pane-head label{display:flex;align-items:center;gap:10px;font-weight:600;font-size:15px}
.pane-head i{width:10px;height:10px;border-radius:3px;display:inline-block}
.count{font:400 12px var(--font-mono);color:var(--muted)}
.editor{width:100%;height:340px;resize:vertical;border:0;background:#fff;color:var(--ink);font:400 13px/1.65 var(--font-mono);padding:16px 18px;white-space:pre;overflow:auto;border-radius:0 0 20px 20px}

.result{margin-top:28px;background:var(--ink);border-radius:24px;overflow:hidden}
.result-bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px;padding:18px 22px;border-bottom:1px solid #262B35}
.stats{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.result-title{font:700 20px var(--font-display);color:#fff;margin-right:6px}
.chip{font:500 13px var(--font-mono);padding:5px 12px;border-radius:999px}
.chip.add{background:#17381F;color:#9BE8AE}
.chip.del{background:#4A1D1D;color:#FFB4AA}
.chip.neutral{background:#262B35;color:#C9CEDA}
.result .toggle{color:#E4E7EE}
.message{padding:56px 24px;text-align:center;color:#AEB4C2;font-size:16px}
.message.ok{color:#9BE8AE;font-weight:600;font-size:17px}
.diff-scroll{overflow-x:auto}
.diff{min-width:720px;max-height:640px;overflow-y:auto;font:400 13px/1.6 var(--font-mono)}
.row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
.cell{display:flex;min-width:0}
.cell.l{border-right:1px solid #262B35}
.ln{flex:0 0 44px;text-align:right;padding-right:10px;color:#7C8496;user-select:none}
.mk{flex:0 0 18px;user-select:none}
.l .mk{color:#FFB4AA}.r .mk{color:#9BE8AE}
.code{flex:1 1 0;min-width:0;white-space:pre-wrap;overflow-wrap:anywhere;padding-right:12px;color:#C9CEDA;min-height:1.6em}
.cell.del{background:#3A1818}.cell.del .code{color:#FFD3CE}
.cell.add{background:#12301A}.cell.add .code{color:#C9F5D4}
.cell.none{background:#12151B}
.cell.del mark{background:#8A2A25}.cell.add mark{background:#1F6B33}
mark{color:inherit;border-radius:2px}
.sep{grid-column:1/-1;padding:6px 18px;background:#181C24;color:#8A92A3;font-size:12px;text-align:center}
.tip{margin:18px 4px 0;font-size:13px;line-height:1.5;color:var(--muted)}
[hidden]{display:none!important}

@media (max-width:760px){
  .editors{grid-template-columns:minmax(0,1fr)}
  .tool-head h1{font-size:38px}
}