:root{font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC",sans-serif;color:#233449;background:#f5f7fa;font-size:14px}*{box-sizing:border-box}body{margin:0}header{max-width:1440px;margin:auto;padding:38px 40px 30px;display:flex;align-items:center;gap:15px}.logo{background:#264ed4;color:white;font-size:36px;width:54px;height:54px;border-radius:15px;text-align:center;line-height:50px}h1{font-size:25px;margin:0 0 5px;letter-spacing:1px}p{margin:0;color:#8590a0}.privacy{margin-left:auto;color:#42806b;font-size:12px;background:#e9f4ef;padding:9px 13px;border-radius:20px}main{max-width:1440px;margin:auto;padding:0 40px}button{font:inherit;border:1px solid #dde3ec;background:white;color:#536176;border-radius:7px;padding:9px 13px;cursor:pointer}button:hover{border-color:#758cde;background:#f3f6ff}button:focus-visible,input:focus-visible{outline:3px solid #afc1ff}.primary{background:#3159da;color:white;border-color:#3159da;font-weight:600}.primary:hover{background:#254cc8;color:white}kbd{font-size:10px;margin-left:14px;opacity:.65}.toolbar,.toolbar>div{display:flex;align-items:center;gap:10px}.toolbar{justify-content:space-between;margin-bottom:18px}label{display:inline-flex;align-items:center;gap:5px;color:#647187;font-size:12px;cursor:pointer}input{accent-color:#3159da}.editors{display:grid;grid-template-columns:1fr 1fr;gap:20px}article,.results{background:#fff;border:1px solid #dee5ef;border-radius:12px;overflow:hidden;box-shadow:0 3px 10px #24314d03}.panel-head{display:flex;justify-content:space-between;align-items:center;padding:14px 17px;border-bottom:1px solid #e9edf4}.panel-head>div{display:flex;gap:10px;align-items:center}.badge{background:#eef2ff;color:#4160bb;padding:4px 8px;border-radius:5px;font-size:12px}small{font-size:11px;color:#8c98a9}.panel-head button{border:0;padding:5px;color:#667995;font-size:12px}textarea{display:block;resize:vertical;width:100%;min-height:240px;height:280px;border:0;padding:20px;outline:none;font:13px/1.8 ui-monospace,SFMono-Regular,Consolas,"PingFang SC",monospace;color:#39465a;background:white}textarea::placeholder{color:#a6afbf}textarea:focus{box-shadow:inset 0 0 0 2px #bacbff}article.drag{outline:2px dashed #3159da}.results{margin-top:24px}.result-head{padding:20px;display:flex;justify-content:space-between;align-items:center}.result-head>div:first-child{display:flex;gap:15px;align-items:center}h2{font-size:16px;margin:0}#status{font-size:12px;color:#8290a4}.actions{display:flex;gap:8px;align-items:center}#position{font-size:11px;color:#8290a4;min-width:40px;text-align:center}.legend{padding:0 20px 16px;display:flex;gap:14px;align-items:center;font-size:11px;color:#97a1b1}.legend .removed,.legend .added{padding:4px 9px;border-radius:4px;color:#9a414f}.legend .added{color:#26806b}.diff-titles{display:grid;grid-template-columns:1fr 1fr;background:#f8f9fc;border-block:1px solid #e5eaf2;color:#7a879b;font-size:11px;padding:10px 20px}#diff{max-height:560px;overflow:auto}.empty{text-align:center;padding:45px}.empty b{display:block;font-size:40px;color:#c9d2e3;margin-bottom:10px}.empty p{font-size:13px;margin-bottom:8px}.row{display:grid;grid-template-columns:1fr 1fr;min-width:0}.cell{display:flex;min-width:0;border-bottom:1px solid #f0f2f6;font:12px/1.9 ui-monospace,SFMono-Regular,Consolas,"PingFang SC",monospace}.cell:first-child{border-right:1px solid #e5eaf2}.number{flex:0 0 45px;text-align:right;padding:5px 10px;color:#a2acbc;user-select:none;border-right:1px solid #e9edf1}.text{padding:5px 12px;white-space:pre-wrap;overflow-wrap:anywhere;min-width:0;min-height:33px}.removed{background:#fff0f1}.added{background:#ecf9f2}mark{background:#b9edce;color:inherit;border-radius:2px}.removed mark{background:#f7bfc7}.row.current{outline:2px solid #7b98f0;outline-offset:-2px}footer{font-size:11px;color:#9ba5b4;padding:20px 0 35px;display:flex;justify-content:space-between}@media(max-width:850px){header{padding:24px 18px}.privacy{font-size:10px}main{padding:0 18px}.toolbar{align-items:flex-start;gap:12px;flex-direction:column}.toolbar>div{flex-wrap:wrap}.editors{grid-template-columns:1fr;gap:14px}.result-head{gap:12px;align-items:flex-start;flex-direction:column}.actions{flex-wrap:wrap}.panel-head{padding:12px}.panel-head small{display:none}footer span{display:none}.number{flex-basis:30px;padding:5px}.text{padding:5px 7px}}

/* Identical text metrics keep the editable layer and highlighting aligned. */
.editor-surface{position:relative;height:340px;min-height:200px;resize:vertical;overflow:hidden;background:white}
.editor-surface textarea,.editor-highlight{font:13px/24px ui-monospace,SFMono-Regular,Consolas,"PingFang SC",monospace;letter-spacing:normal;tab-size:4;padding:20px;margin:0;border:0;white-space:pre;word-break:normal;overflow-wrap:normal}
.editor-highlight{position:absolute;inset:0;overflow:hidden;pointer-events:none;color:#39465a}
.editor-surface textarea{position:relative;width:100%;height:100%;min-height:0;resize:none;background:transparent;color:transparent;caret-color:#263c65;overflow:auto;-webkit-text-fill-color:transparent}
.editor-surface textarea::placeholder{color:#a6afbf;-webkit-text-fill-color:#a6afbf}
.editor-surface textarea::selection{background:#638cf34d}
.editor-line{display:block;min-height:24px;width:max-content;min-width:100%}
.editor-line.removed{background:#fff0f1}.editor-line.added{background:#ecf9f2}
.editor-line.current{box-shadow:inset 3px 0 #6384e6}