:root {
  /* diff palette */
  --diff-bg:        #1c1a17;
  --diff-bg-2:      #24211d;
  --diff-ink:       #e9e3d5;
  --diff-muted:     #6b655c;
  --diff-line:      #2a2724;
  --diff-add-bg:    #1f3326;
  --diff-add-ink:   #a9d6a1;
  --diff-add-strong:#7eb874;
  --diff-del-bg:    #3a1f1c;
  --diff-del-ink:   #e3a99c;
  --diff-del-strong:#c8634a;
}

/* ===== Page ===== */
.page {
  flex: 1;
  max-width: 1100px;
  width: 100%;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* ===== Tool card ===== */
.tool-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
}

.tool-card-body { padding: 18px; display: flex; flex-direction: column; gap: 14px; }

/* ===== Inputs (two-up) ===== */
.inputs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.input-panel { display: flex; flex-direction: column; gap: 6px; }

.input-panel-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px;
}
.input-panel-label {
  font-size: 11px; font-weight: 600; letter-spacing: 0.08em;
  color: var(--muted); text-transform: uppercase;
  display: inline-flex; align-items: center; gap: 6px;
}
.input-panel-label .dot {
  width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0;
  background: var(--diff-del-strong);
}
.input-panel.is-after .input-panel-label .dot { background: var(--diff-add-strong); }
.input-panel-meta { font-size: 12px; color: var(--muted); }

textarea {
  width: 100%; min-height: 220px;
  padding: 12px 14px;
  border: 1px solid var(--border); border-radius: 6px;
  font-family: 'JetBrains Mono', monospace; font-size: 13px; line-height: 1.75;
  color: var(--ink); background: var(--bg);
  resize: vertical; transition: border-color 140ms;
}
textarea::placeholder { color: #d1d5db; }
textarea:focus { outline: none; border-color: #6b7280; background: var(--surface); }

/* ===== Actions ===== */
.actions {
  display: flex; gap: 8px; justify-content: center;
}

.btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 16px; border: 1px solid var(--border); border-radius: 6px;
  background: var(--surface); font-family: 'Noto Sans JP', sans-serif;
  font-size: 13px; font-weight: 500;
  color: var(--sub); cursor: pointer; transition: all 100ms;
}
.btn:hover { background: var(--hover); border-color: #9ca3af; color: var(--ink); }
.btn.primary {
  background: var(--accent); border-color: var(--accent); color: white;
  font-weight: 600;
}
.btn.primary:hover { background: var(--accent-deep); border-color: var(--accent-deep); }
.btn.danger:hover { background: #fef2f2; border-color: #fca5a5; color: #dc2626; }

/* ===== Results ===== */
.results {
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
}

.diff-stats {
  display: flex; gap: 20px; padding: 10px 16px;
  background: var(--bg); border-bottom: 1px solid var(--border);
  font-size: 12px; flex-wrap: wrap; align-items: center;
}
.stat-pill {
  display: inline-flex; align-items: center; gap: 6px; color: var(--sub); font-weight: 500;
}
.stat-pill .swatch { width: 9px; height: 9px; border-radius: 3px; flex-shrink: 0; }
.stat-pill.add .swatch { background: var(--diff-add-strong); }
.stat-pill.del .swatch { background: var(--diff-del-strong); }
.stat-pill.eq  .swatch { background: var(--muted); }
.stat-pill b { font-weight: 600; color: var(--ink); }

.diff-output {
  background: var(--diff-bg);
  max-height: 520px;
  overflow: auto;
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px;
}

.diff-table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.diff-table td {
  padding: 2px 10px; white-space: pre; color: var(--diff-ink);
  vertical-align: top; line-height: 1.65;
}
.diff-table .line-num {
  color: var(--diff-muted); text-align: right;
  width: 44px; min-width: 44px; max-width: 44px;
  border-right: 1px solid var(--diff-line);
  padding-right: 10px; user-select: none; font-size: 11px;
}
.diff-table .line-marker {
  text-align: center; width: 22px; min-width: 22px; max-width: 22px;
  user-select: none; font-weight: 600;
}
.diff-table .line-content { overflow: hidden; text-overflow: ellipsis; }

.diff-table tr.line-add { background: var(--diff-add-bg); }
.diff-table tr.line-add .line-num    { color: var(--diff-add-strong); }
.diff-table tr.line-add .line-marker { color: var(--diff-add-strong); }
.diff-table tr.line-add .line-content { color: var(--diff-add-ink); }

.diff-table tr.line-del { background: var(--diff-del-bg); }
.diff-table tr.line-del .line-num    { color: var(--diff-del-strong); }
.diff-table tr.line-del .line-marker { color: var(--diff-del-strong); }
.diff-table tr.line-del .line-content { color: var(--diff-del-ink); }

.diff-table tr.line-eq .line-marker { color: var(--diff-muted); }

.diff-table tr.line-skip td {
  color: var(--diff-muted); background: var(--diff-bg-2);
  padding: 6px 12px; font-size: 11px; letter-spacing: 0.08em; text-align: center;
}

.no-diff {
  padding: 32px 20px; text-align: center;
  color: var(--diff-add-ink); font-size: 14px; background: var(--diff-bg);
  font-family: 'Noto Sans JP', sans-serif;
}
.no-diff .ok-mark {
  display: inline-grid; place-items: center;
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--diff-add-bg); color: var(--diff-add-strong);
  margin-bottom: 10px;
}


.about-text { font-size: 13.5px; color: var(--sub); line-height: 1.75; }
.about-text p { margin-bottom: 12px; }
.about-text p:last-child { margin: 0; }
.about-text b { color: var(--ink); }

/* ===== Legend ===== */
.legend {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px;
}
.legend-item {
  border: 1px solid var(--border); border-radius: 6px; padding: 12px 14px;
  display: flex; flex-direction: column; gap: 6px; background: var(--bg);
}
.legend-tag {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: 'JetBrains Mono', monospace; font-size: 11.5px; font-weight: 600;
  width: max-content; padding: 3px 9px; border-radius: 4px;
}
.legend-tag.add { background: var(--diff-add-bg); color: var(--diff-add-ink); }
.legend-tag.del { background: var(--diff-del-bg); color: var(--diff-del-ink); }
.legend-tag.eq  { background: var(--bg); color: var(--sub); border: 1px solid var(--border); }
.legend-text { color: var(--sub); font-size: 13px; }

/* ===== Use cases ===== */
.uses {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px;
  list-style: none;
}
.uses li {
  padding: 10px 14px; border: 1px solid var(--border); border-radius: 6px;
  color: var(--sub); font-size: 13px; background: var(--bg);
}
.uses li::before { content: "→ "; color: var(--muted); }

/* ===== Responsive ===== */
@media (max-width: 900px) {
  .inputs { grid-template-columns: 1fr; }
  .legend { grid-template-columns: 1fr; }
  .uses   { grid-template-columns: 1fr; }
}