.diff-page { --diff-add:#9ed7ad; --diff-remove:#ffaaa0; --diff-change:#efd38d; }
.diff-main { padding:62px 0 110px; }
.diff-intro { max-width:940px; margin-bottom:32px; }
.diff-intro h1 { margin:0 0 16px; font-size:clamp(2.8rem,7vw,6.4rem); line-height:.94; letter-spacing:-.06em; }
.diff-intro h1 span { color:var(--accent); }
.diff-intro > p { max-width:760px; margin:0; color:var(--muted); font-size:1.08rem; }
.truth-card,.editor-card,.results-card,.info-grid article { border:1px solid var(--line); border-radius:var(--radius); background:rgba(16,23,19,.88); box-shadow:var(--shadow); }
.truth-card { display:grid; grid-template-columns:auto 1fr; gap:18px; padding:24px 28px; margin-bottom:18px; border-color:rgba(198,223,136,.28); background:linear-gradient(145deg,rgba(198,223,136,.07),rgba(16,23,19,.9)); }
.truth-mark { width:44px; height:44px; display:grid; place-items:center; border:1px solid var(--line-strong); border-radius:14px; color:var(--accent); font-size:1.55rem; font-weight:800; }
.truth-card h2 { margin:0 0 7px; font-size:1.08rem; }
.truth-card p { margin:0; color:var(--muted); font-size:.9rem; }
.editor-card,.results-card { padding:clamp(18px,4vw,36px); }
.editor-toolbar,.pane-heading,.result-header,.result-controls,.export-row { display:flex; align-items:center; justify-content:space-between; gap:14px; }
.editor-toolbar { margin-bottom:18px; }
.toolbar-actions,.export-row,.change-nav { display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
.primary-button,.ghost-button,.file-button { min-height:44px; display:inline-flex; align-items:center; justify-content:center; padding:0 16px; border-radius:12px; border:0; cursor:pointer; font-weight:750; }
.primary-button { background:var(--accent); color:#10160f; }
.ghost-button,.file-button { border:1px solid var(--line); background:rgba(255,255,255,.025); color:var(--text); }
.ghost-button:hover,.file-button:hover { border-color:var(--line-strong); background:rgba(255,255,255,.05); }
.primary-button:disabled,.ghost-button:disabled { opacity:.45; cursor:not-allowed; }
.file-button input { position:absolute; width:1px; height:1px; opacity:0; overflow:hidden; }
.editor-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
.editor-pane { min-width:0; padding:16px; border:1px solid var(--line); border-radius:18px; background:rgba(0,0,0,.13); }
.pane-heading p { margin:0 0 3px; color:var(--accent); font-size:.68rem; font-weight:850; letter-spacing:.14em; text-transform:uppercase; }
.pane-heading h2 { margin:0; font-size:1.1rem; }
.name-input { width:100%; min-height:42px; margin:14px 0 9px; padding:0 12px; border:1px solid var(--line); border-radius:11px; background:#0c120f; color:var(--muted); font-weight:700; }
.editor-pane textarea { width:100%; min-height:390px; resize:vertical; padding:15px; border:1px solid var(--line); border-radius:13px; background:#080d0a; color:var(--text); font:13px/1.55 ui-monospace,SFMono-Regular,Consolas,monospace; tab-size:4; }
.editor-pane textarea:focus,.name-input:focus { outline:1px solid var(--accent); border-color:var(--accent); }
.text-count { margin:8px 1px 0; color:var(--soft); font-size:.74rem; }
.options-grid { display:flex; flex-wrap:wrap; gap:10px 20px; margin:18px 0 0; padding:16px; border:1px solid var(--line); border-radius:14px; }
.options-grid legend { padding:0 7px; color:var(--accent); font-size:.73rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase; }
.options-grid label { color:var(--muted); font-size:.82rem; }
.message { margin-bottom:16px; padding:13px 15px; border:1px solid var(--line); border-radius:12px; color:var(--muted); }
.message.error { color:var(--danger); border-color:rgba(255,155,143,.35); background:rgba(255,155,143,.06); }
.message.success { color:var(--success); border-color:rgba(169,220,145,.35); background:rgba(169,220,145,.05); }
.results-card { margin-top:18px; }
.result-header { align-items:flex-start; }
.result-kicker { margin:0 0 5px; color:var(--accent); font-size:.7rem; font-weight:850; letter-spacing:.15em; text-transform:uppercase; }
.result-header h2 { margin:0; font-size:clamp(1.7rem,3vw,2.5rem); }
.result-header p:not(.result-kicker) { margin:7px 0 0; color:var(--muted); }
.stats { display:grid; grid-template-columns:repeat(4,minmax(70px,1fr)); gap:8px; }
.stats div { min-width:78px; padding:12px; border:1px solid var(--line); border-radius:13px; text-align:center; background:rgba(255,255,255,.02); }
.stats strong { display:block; font-size:1.35rem; }
.stats span { color:var(--soft); font-size:.68rem; text-transform:uppercase; letter-spacing:.08em; }
.result-controls { margin:22px 0 12px; flex-wrap:wrap; }
.view-tabs { display:flex; gap:6px; padding:4px; border:1px solid var(--line); border-radius:13px; background:rgba(0,0,0,.18); }
.view-tab { min-height:39px; padding:0 13px; border:0; border-radius:9px; background:transparent; color:var(--muted); cursor:pointer; font-weight:750; }
.view-tab[aria-selected="true"] { color:var(--text); background:var(--panel-2); }
.change-nav span { min-width:54px; text-align:center; color:var(--muted); font-size:.78rem; }
.diff-view { border:1px solid var(--line); border-radius:15px; overflow:auto; background:#080d0a; }
.side-head { position:sticky; top:0; z-index:2; display:grid; grid-template-columns:1fr 1fr; background:#111914; border-bottom:1px solid var(--line); }
.side-head span { padding:11px 48px; color:var(--muted); font-size:.76rem; font-weight:800; overflow-wrap:anywhere; }
.side-head span + span { border-left:1px solid var(--line); }
.side-rows { min-width:760px; }
.diff-row { display:grid; grid-template-columns:42px minmax(0,1fr) 42px minmax(0,1fr); border-bottom:1px solid rgba(220,231,224,.07); font:12.5px/1.55 ui-monospace,SFMono-Regular,Consolas,monospace; }
.diff-row:last-child { border-bottom:0; }
.line-number { padding:5px 7px; color:#657269; background:rgba(255,255,255,.018); text-align:right; user-select:none; }
.line-code { min-height:29px; padding:5px 10px; white-space:pre; overflow-wrap:normal; }
.diff-view.wrap .line-code,.diff-view.wrap .unified-code { white-space:pre-wrap; overflow-wrap:anywhere; }
.diff-row .line-code:nth-child(2),.diff-row .line-number:nth-child(3) { border-right:1px solid var(--line); }
.diff-row.changed { background:rgba(239,211,141,.045); }
.diff-row.removed { background:rgba(255,170,160,.045); }
.diff-row.added { background:rgba(158,215,173,.045); }
.diff-row.current-change { outline:2px solid var(--accent); outline-offset:-2px; }
.word-delete { background:rgba(255,155,143,.24); color:#ffd7d2; border-radius:3px; }
.word-insert { background:rgba(169,220,145,.22); color:#d9f4ce; border-radius:3px; }
.collapsed-row { padding:8px 15px; color:var(--soft); text-align:center; font-size:.73rem; border-bottom:1px solid var(--line); background:rgba(255,255,255,.015); }
.unified-rows { min-width:650px; font:12.5px/1.55 ui-monospace,SFMono-Regular,Consolas,monospace; }
.hunk-header { padding:7px 12px; color:#b7c8ff; background:rgba(154,199,255,.08); border-top:1px solid var(--line); }
.hunk-header:first-child { border-top:0; }
.unified-line { display:grid; grid-template-columns:42px 42px 22px minmax(0,1fr); border-top:1px solid rgba(220,231,224,.06); }
.unified-line.delete { background:rgba(255,170,160,.055); }
.unified-line.insert { background:rgba(158,215,173,.055); }
.unified-prefix { padding:4px 2px; text-align:center; color:var(--muted); }
.unified-code { padding:4px 9px; white-space:pre; }
.render-note { margin:10px 0 0; color:var(--soft); font-size:.75rem; }
.export-row { justify-content:flex-start; margin-top:16px; }
.info-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; margin-top:18px; }
.info-grid article { padding:24px; }
.info-grid h2 { margin:0 0 8px; font-size:1rem; }
.info-grid p { margin:0; color:var(--muted); font-size:.84rem; }
@media (max-width:900px) { .editor-grid,.info-grid { grid-template-columns:1fr; } .result-header { flex-direction:column; } .stats { width:100%; } }
@media (max-width:600px) { .diff-main { padding-top:38px; } .editor-card,.results-card { padding:15px; } .editor-toolbar,.pane-heading { align-items:flex-start; flex-direction:column; } .toolbar-actions,.editor-toolbar .primary-button { width:100%; } .toolbar-actions > *, .editor-toolbar .primary-button { flex:1; } .stats { grid-template-columns:repeat(2,1fr); } .change-nav { width:100%; justify-content:space-between; } .side-head span { padding-left:44px; } }