/* Diff Checker / Text Compare. Needs /assets/css/modern-tool-cards.css (tokens + .cat-code accent). */
.diff, .diff *, .diff *::before, .diff *::after { box-sizing: border-box; }
.diff { display: grid; gap: 1rem; }

.diff-panel { background: var(--tc-bg); border: 1px solid var(--tc-border); border-radius: 20px; box-shadow: var(--tc-shadow); overflow: hidden; display: grid; }

.diff-panel__head { display: flex; align-items: center; flex-wrap: wrap; gap: .6rem; padding: .9rem 1.25rem; background: var(--tc-surface); border-bottom: 1px solid var(--tc-border); }
.diff-panel__head h3 { margin: 0; font-size: .8rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--tc-muted); }
.diff-panel__head > i { color: var(--accent); font-size: 1.1rem; }
.diff-panel__head .diff-clear { margin-left: auto; }

.diff-body { display: grid; gap: .9rem; padding: 1.25rem; }

.diff-clear {
  display: inline-flex; align-items: center; gap: .35rem; height: 2.1rem; padding: 0 .8rem; font: inherit; font-size: .8rem; font-weight: 600;
  color: var(--tc-muted); background: var(--tc-bg); border: 1px solid var(--tc-border); border-radius: 9px; cursor: pointer;
}
.diff-clear:hover { color: var(--accent); border-color: var(--accent); }
.diff-clear:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.diff-inputs { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
@media (max-width: 760px) { .diff-inputs { grid-template-columns: 1fr; } }

.diff-side { display: grid; gap: .4rem; }
.diff-side__head { font-size: .8rem; font-weight: 700; color: var(--tc-muted); }
.diff-area {
  width: 100%; padding: .8rem .9rem; font-family: ui-monospace, "SF Mono", Consolas, monospace; font-size: .88rem; resize: vertical;
  color: var(--tc-text); background: var(--tc-bg); border: 1px solid var(--tc-border); border-radius: 12px;
}
.diff-area:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent); }

.diff-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem .9rem; }
.diff-check { display: inline-flex; align-items: center; gap: .45rem; font-size: .84rem; color: var(--tc-text); cursor: pointer; user-select: none; }
.diff-check input { accent-color: var(--accent); width: 1rem; height: 1rem; }

.diff-stats { margin-left: auto; display: flex; gap: .7rem; font-size: .8rem; font-weight: 700; color: var(--tc-muted); }
.diff-stats .is-add { color: #16a34a; }
.diff-stats .is-del { color: #dc2626; }

.diff-result {
  font-family: ui-monospace, "SF Mono", Consolas, monospace; font-size: .85rem; line-height: 1.6;
  background: var(--tc-surface); border: 1px solid var(--tc-border); border-radius: 12px; overflow-x: auto;
}
.diff-row { display: grid; grid-template-columns: 2.6rem 2.6rem 1.4rem 1fr; gap: 0; white-space: pre-wrap; word-break: break-word; }
.diff-row__num { padding: .1rem .5rem; text-align: right; color: var(--tc-muted); opacity: .6; user-select: none; border-right: 1px solid var(--tc-border); }
.diff-row__marker { padding: .1rem .3rem; text-align: center; font-weight: 800; user-select: none; }
.diff-row__text { padding: .1rem .6rem .1rem 0; }

.diff-row.is-equal .diff-row__marker { color: var(--tc-muted); opacity: .4; }
.diff-row.is-add { background: rgba(22, 163, 74, .12); }
.diff-row.is-add .diff-row__marker { color: #16a34a; }
.diff-row.is-del { background: rgba(220, 38, 38, .12); }
.diff-row.is-del .diff-row__marker { color: #dc2626; }

.diff-empty { padding: 1rem; color: var(--tc-muted); font-family: inherit; font-size: .9rem; }

.diff-foot { margin: 0; display: flex; gap: .5rem; font-size: .84rem; color: var(--tc-muted); }
.diff-foot i { color: var(--accent); margin-top: .15rem; }