:root{color-scheme:light;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;font-size:15px;background:#f5f7fb;color:#18202f;--panel: #ffffff;--panel-strong: #f9fbff;--line: #dce3ee;--muted: #657084;--text: #18202f;--brand: #155e75;--brand-strong: #0e7490;--added: #087f5b;--added-bg: #e7f7ef;--removed: #b42318;--removed-bg: #fff0ed;--modified: #8a5a00;--modified-bg: #fff7da;--focus: #2563eb}*{box-sizing:border-box}body{margin:0;min-width:320px;min-height:100vh}button,input,select,textarea{font:inherit}button{cursor:pointer}.app-shell{min-height:100vh;padding:18px}.topbar,.control-band,.stats-band,.workspace,.result-panel{max-width:1680px;margin:0 auto}.topbar{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-bottom:14px}.brand{display:flex;align-items:center;gap:12px;min-width:220px}.brand-mark{display:grid;width:42px;height:42px;place-items:center;border:1px solid #9dd3dd;border-radius:8px;color:#064e63;background:#e6f8fb}.brand h1,.brand p,.panel-title h2,.editor-title h2,.result-header h2,.result-header p{margin:0}.brand h1{font-size:22px;line-height:1.05}.brand p,.result-header p,.status,.message{color:var(--muted);font-size:13px}.toolbar,.result-actions{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:8px}.select-field,.text-field{display:flex;align-items:center;gap:8px;color:var(--muted);font-size:13px}.select-field select,.text-field input{height:34px;border:1px solid var(--line);border-radius:6px;background:#fff;color:var(--text)}.select-field select{min-width:138px;padding:0 34px 0 10px}.text-field input{width:100%;padding:0 10px}.text-field.compact{width:178px}.text-field.wide{flex:1 1 320px;min-width:260px}.icon-button,.square-button{display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--line);border-radius:6px;background:#fff;color:#253044;transition:border-color .12s ease,background .12s ease,transform .12s ease}.icon-button{min-height:34px;gap:7px;padding:0 11px}.square-button{width:34px;height:34px;flex:0 0 auto}.icon-button:hover,.square-button:hover{border-color:#9ab0c9;background:#f8fbff}.icon-button:active,.square-button:active{transform:translateY(1px)}.icon-button.primary{border-color:var(--brand);background:var(--brand);color:#fff}.control-band,.stats-band{display:flex;flex-wrap:wrap;align-items:center;gap:10px;border:1px solid var(--line);background:var(--panel);border-radius:8px}.control-band{padding:10px}.stats-band{margin-top:10px;padding:8px 10px}.toggle{display:inline-flex;align-items:center;gap:8px;height:34px;padding:0 10px;border:1px solid var(--line);border-radius:6px;color:#253044;background:#fff}.toggle input{position:absolute;opacity:0;pointer-events:none}.toggle span{position:relative;width:34px;height:18px;border-radius:999px;background:#cbd5e1}.toggle span:after{position:absolute;top:3px;left:3px;width:12px;height:12px;border-radius:50%;background:#fff;content:"";transition:left .12s ease,background .12s ease}.toggle input:checked+span{background:var(--brand-strong)}.toggle input:checked+span:after{left:19px}.toggle strong{font-size:13px;font-weight:650}.metric{display:inline-flex;align-items:center;gap:8px;min-height:32px;padding:0 10px;border:1px solid var(--line);border-radius:6px;background:var(--panel-strong)}.metric span{color:var(--muted);font-size:12px}.metric strong{font-size:14px}.metric-icon{display:grid;place-items:center;color:var(--brand)}.metric.added strong,.type-pill.added,.nav-item.added span{color:var(--added)}.metric.removed strong,.type-pill.removed,.nav-item.removed span{color:var(--removed)}.metric.modified strong,.type-pill.modified,.nav-item.modified span{color:var(--modified)}.message{margin-left:auto}.workspace{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:12px;margin-top:12px}.editors{display:grid;grid-template-columns:minmax(0,1fr) 44px minmax(0,1fr);gap:10px;min-width:0}.between-tools{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9px}.editor-pane,.navigator,.result-panel{border:1px solid var(--line);border-radius:8px;background:var(--panel);min-width:0}.editor-title,.panel-title,.result-header{display:flex;align-items:center;gap:10px}.editor-title{justify-content:space-between;min-height:56px;padding:10px 12px;border-bottom:1px solid var(--line)}.editor-title h2,.panel-title h2,.result-header h2{font-size:15px}.status.error{color:var(--removed)}.hidden-input{display:none}.plain-editor{display:grid;grid-template-columns:minmax(0,1fr);min-height:390px;background:#fbfdff}.plain-editor.with-line-numbers{grid-template-columns:54px minmax(0,1fr)}.input-line-gutter{overflow:hidden;border-right:1px solid var(--line);padding:14px 8px;color:#7a8799;background:#f3f6fa;font:13px/1.55 SFMono-Regular,Consolas,Liberation Mono,monospace;text-align:right;-webkit-user-select:none;user-select:none;white-space:pre}.plain-editor textarea{display:block;width:100%;min-height:390px;resize:vertical;border:0;outline:0;padding:14px;color:#101827;background:#fbfdff;font:13px/1.55 SFMono-Regular,Consolas,Liberation Mono,monospace;-moz-tab-size:2;tab-size:2}.editor-diff-view{min-height:390px;max-height:620px;overflow:auto;background:#fbfdff;font:13px/1.55 SFMono-Regular,Consolas,Liberation Mono,monospace}.editor-code-line{display:grid;grid-template-columns:minmax(0,1fr);min-height:24px;border-bottom:1px solid rgba(220,227,238,.55)}.editor-diff-view.with-line-numbers .editor-code-line{grid-template-columns:54px minmax(0,1fr)}.editor-code-gutter{padding:3px 8px;border-right:1px solid var(--line);color:#7a8799;background:#f3f6fa;text-align:right;-webkit-user-select:none;user-select:none}.editor-code-content{min-width:0;margin:0;padding-top:3px;padding-right:12px;padding-bottom:3px;color:#101827;white-space:pre-wrap;word-break:break-word}.editor-code-line.added .editor-code-content{background:var(--added-bg)}.editor-code-line.removed .editor-code-content{background:var(--removed-bg)}.editor-code-line.modified .editor-code-content{background:var(--modified-bg)}.editor-code-line.child-diff .editor-code-content{background:#eef7ff}.fold-button,.fold-spacer{display:inline-flex;width:17px;height:17px;margin-right:4px;vertical-align:-3px}.fold-button{align-items:center;justify-content:center;border:0;border-radius:4px;background:transparent;color:#526074;padding:0}.fold-button:hover{background:#dce8f5;color:#1f2b3d}.editor-code-empty{min-height:390px}.code-diff-editor{background:#fbfdff}.cm-line.cm-diff-added{background:var(--added-bg)}.cm-line.cm-diff-removed{background:var(--removed-bg)}.cm-line.cm-diff-modified{background:var(--modified-bg)}.cm-inline-diff{border-radius:3px;box-decoration-break:clone;-webkit-box-decoration-break:clone;padding:0 2px;font-weight:750}.cm-inline-added{background:#bdeccf;color:#065f46}.cm-inline-removed{background:#ffc9c2;color:#8f1d14}.cm-folded-unchanged{margin:2px 10px;border:1px dashed #b8c5d6;border-radius:6px;padding:4px 10px;color:#64748b;background:#f4f7fb;font:12px/1.4 SFMono-Regular,Consolas,Liberation Mono,monospace}.navigator{overflow:hidden}.panel-title{min-height:48px;padding:0 12px;border-bottom:1px solid var(--line);color:#26344d}.diff-nav-list{max-height:400px;overflow:auto;padding:8px}.nav-item{display:grid;width:100%;grid-template-columns:46px minmax(0,1fr);gap:8px;align-items:center;margin-bottom:6px;border:1px solid transparent;border-radius:6px;background:transparent;padding:8px;text-align:left}.nav-item:hover,.nav-item.active{border-color:#bfd4ee;background:#f3f8ff}.nav-item span{font-size:12px;font-weight:700}.nav-item strong{overflow:hidden;color:#26344d;font:12px/1.35 SFMono-Regular,Consolas,Liberation Mono,monospace;text-overflow:ellipsis;white-space:nowrap}.nav-empty,.empty-state{padding:28px 18px;color:var(--muted);text-align:center}.result-panel{margin-top:12px;overflow:hidden}.result-header{justify-content:space-between;min-height:58px;padding:10px 12px;border-bottom:1px solid var(--line)}.structured-table,.text-table{overflow:auto}.structured-row{display:grid;width:100%;grid-template-columns:94px minmax(180px,.9fr) minmax(180px,1fr) minmax(180px,1fr);gap:0;border:0;border-bottom:1px solid var(--line);background:#fff;padding:0;color:var(--text);text-align:left}.structured-row.header,.text-row.header{position:sticky;top:0;z-index:1;background:#edf3fa;color:#41506a;font-size:12px;font-weight:750}.structured-row>div,.structured-row>code,.structured-row>pre{min-width:0;margin:0;border-right:1px solid var(--line);padding:10px 12px;white-space:pre-wrap;word-break:break-word}.structured-row>code,.structured-row>pre{font:12px/1.5 SFMono-Regular,Consolas,Liberation Mono,monospace}.structured-row:hover,.structured-row.active{background:#f4f9ff}.structured-row.added>pre:last-child,.text-row.added>pre:last-child{background:var(--added-bg)}.structured-row.removed>pre:nth-child(3),.text-row.removed>pre:nth-child(2){background:var(--removed-bg)}.structured-row.modified>pre,.text-row.modified>pre{background:var(--modified-bg)}.inline-diff{border-radius:3px;box-decoration-break:clone;-webkit-box-decoration-break:clone;padding:0 2px;font-weight:750}.inline-diff.added{background:#bdeccf;color:#065f46}.inline-diff.removed{background:#ffc9c2;color:#8f1d14}.type-pill{display:inline-flex;align-items:center;justify-content:center;min-width:42px;min-height:23px;border:1px solid currentColor;border-radius:999px;padding:0 8px;font-size:12px;font-weight:750}.text-row{display:grid;grid-template-columns:54px minmax(260px,1fr) 54px minmax(260px,1fr);min-width:760px;border-bottom:1px solid var(--line)}.text-row>div,.text-row>pre{min-height:31px;margin:0;border-right:1px solid var(--line);padding:7px 10px}.text-row>pre{overflow:visible;white-space:pre-wrap;word-break:break-word;font:12px/1.45 SFMono-Regular,Consolas,Liberation Mono,monospace}.line-number{color:var(--muted);background:#f7f9fc;font:12px/1.45 SFMono-Regular,Consolas,Liberation Mono,monospace;text-align:right}@media(max-width:1180px){.topbar{align-items:flex-start;flex-direction:column}.toolbar,.result-actions{justify-content:flex-start}.workspace{grid-template-columns:1fr}.navigator{order:2}}@media(max-width:820px){.app-shell{padding:10px}.editors{grid-template-columns:1fr}.between-tools{flex-direction:row}.editor-pane textarea{min-height:260px}.structured-row{min-width:860px}.message{width:100%;margin-left:0}}