/* ── THEME ─────────────────────────────────────────────── */
:root {
  --bg:     #fafafa;
  --bg2:    #f4f4f5;
  --bg3:    #e4e4e7;
  --border: #d4d4d8;
  --text:   #18181b;
  --text2:  #52525b;
  --text3:  #a1a1aa;
  --accent: #2563eb;

  --del-bg:     #fef2f2;
  --del-bg2:    #fee2e2;
  --del-fg:     #991b1b;
  --del-border: #fca5a5;

  --add-bg:     #f0fdf4;
  --add-bg2:    #dcfce7;
  --add-fg:     #166534;
  --add-border: #86efac;

  --empty-bg: #f4f4f5;
  --mono: 'Cascadia Code', 'Fira Code', ui-monospace, 'Courier New', monospace;
  --r: 0.5rem;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg:     #09090b;
    --bg2:    #18181b;
    --bg3:    #27272a;
    --border: #3f3f46;
    --text:   #fafafa;
    --text2:  #a1a1aa;
    --text3:  #71717a;
    --accent: #60a5fa;

    --del-bg:     #2d1515;
    --del-bg2:    #3f1c1c;
    --del-fg:     #fca5a5;
    --del-border: #7f1d1d;

    --add-bg:     #0f2d1a;
    --add-bg2:    #14532d;
    --add-fg:     #86efac;
    --add-border: #166534;

    --empty-bg: #18181b;
  }
}

[data-theme="light"] {
  --bg:#fafafa; --bg2:#f4f4f5; --bg3:#e4e4e7; --border:#d4d4d8;
  --text:#18181b; --text2:#52525b; --text3:#a1a1aa; --accent:#2563eb;
  --del-bg:#fef2f2; --del-bg2:#fee2e2; --del-fg:#991b1b; --del-border:#fca5a5;
  --add-bg:#f0fdf4; --add-bg2:#dcfce7; --add-fg:#166534; --add-border:#86efac;
  --empty-bg:#f4f4f5;
}
[data-theme="dark"] {
  --bg:#09090b; --bg2:#18181b; --bg3:#27272a; --border:#3f3f46;
  --text:#fafafa; --text2:#a1a1aa; --text3:#71717a; --accent:#60a5fa;
  --del-bg:#2d1515; --del-bg2:#3f1c1c; --del-fg:#fca5a5; --del-border:#7f1d1d;
  --add-bg:#0f2d1a; --add-bg2:#14532d; --add-fg:#86efac; --add-border:#166534;
  --empty-bg:#18181b;
}

/* ── RESET ─────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
  min-height: 100dvh;
  padding: 1rem;

  @media (min-width: 640px) { padding: 1.5rem 2rem; }
}

.container { width: 100%; max-width: 100rem; margin-inline: auto; }

button { cursor: pointer; border: none; background: none; color: inherit; font: inherit; }

/* ── HEADER ────────────────────────────────────────────── */
header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.25rem;
  gap: 1rem;

  & h1 { font-size: 1.375rem; font-weight: 700; letter-spacing: -0.025em; }
}

/* ── BUTTONS ───────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.4rem 0.875rem;
  border-radius: var(--r);
  font-size: 0.875rem;
  font-weight: 500;
  border: 1px solid var(--border);
  background: var(--bg2);
  color: var(--text);
  transition: background 0.12s;

  &:hover { background: var(--bg3); }
}

.btn-icon {
  padding: 0.5rem;
  border-radius: var(--r);
  border: 1px solid var(--border);
  background: var(--bg2);
  line-height: 0;

  &:hover { background: var(--bg3); }
  & svg { display: block; width: 1.125rem; height: 1.125rem; }
}

.btn-apply {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  padding: 0.2rem 0.45rem;
  font-size: 0.7rem;
  font-weight: 600;
  border-radius: 0.3rem;
  background: var(--add-bg2);
  border: 1px solid var(--add-border);
  color: var(--add-fg);
  white-space: nowrap;
  line-height: 1.2;

  &:hover { filter: brightness(0.88); }
}

/* ── FILES PANEL ───────────────────────────────────────── */
details.files-panel {
  border: 1px solid var(--border);
  border-radius: var(--r);
  margin-bottom: 1.25rem;
  background: var(--bg2);

  & > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 1rem;
    cursor: pointer;
    user-select: none;
    font-size: 0.9375rem;
    font-weight: 600;
    list-style: none;

    &::-webkit-details-marker { display: none; }

    & .chevron {
      width: 1rem; height: 1rem;
      color: var(--text3);
      transition: transform 0.2s;
      flex-shrink: 0;
    }
  }

  &[open] > summary .chevron { transform: rotate(180deg); }

  & .files-body {
    padding: 1rem;
    border-top: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    gap: 1rem;

    @media (min-width: 768px) { flex-direction: row; }
  }
}

/* ── FILE INPUT ────────────────────────────────────────── */
.file-panel {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;

  & .file-label {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--text2);
    text-transform: uppercase;
    letter-spacing: 0.05em;
  }
}

.drop-zone {
  border: 2px dashed var(--border);
  border-radius: var(--r);
  padding: 0.6rem 1rem;
  text-align: center;
  font-size: 0.8125rem;
  color: var(--text3);
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s, background 0.15s;

  &:hover, &.dragover {
    border-color: var(--accent);
    color: var(--accent);
    background: color-mix(in srgb, var(--accent) 6%, transparent);
  }
}

textarea.file-text {
  width: 100%;
  min-height: 8rem;
  resize: vertical;
  padding: 0.625rem 0.75rem;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--r);
  color: var(--text);
  font-family: var(--mono);
  font-size: 0.8125rem;
  line-height: 1.6;
  tab-size: 2;
  transition: border-color 0.15s, box-shadow 0.15s;

  &:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 20%, transparent);
  }

  &.dragover {
    border-color: var(--accent);
    border-style: dashed;
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 20%, transparent);
    background: color-mix(in srgb, var(--accent) 4%, var(--bg));
  }
}

/* ── DIFF TOOLBAR ──────────────────────────────────────── */
.diff-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.75rem;
  gap: 0.75rem;
  flex-wrap: wrap;

  & .diff-stats {
    font-size: 0.875rem;
    display: flex;
    align-items: center;
    gap: 1.25rem;
    color: var(--text2);
    flex-wrap: wrap;

    & .stat-del { color: var(--del-fg); font-weight: 600; }
    & .stat-add { color: var(--add-fg); font-weight: 600; }
  }
}

/* ── DIFF TABLE ────────────────────────────────────────── */
.diff-wrap {
  border: 1px solid var(--border);
  border-radius: var(--r);
  overflow: hidden;
}

.diff-col-header {
  display: grid;
  grid-template-columns: 1fr 4rem 1fr;
  background: var(--bg2);
  border-bottom: 1px solid var(--border);
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text2);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  position: sticky;
  top: 0;
  z-index: 2;

  & > div {
    padding: 0.4rem 0.75rem;

    &:nth-child(2) {
      border-left: 1px solid var(--border);
      border-right: 1px solid var(--border);
      background: var(--bg2);
    }
  }
}

.diff-row {
  display: grid;
  grid-template-columns: 1fr 4rem 1fr;

  &:not(:last-child) { border-bottom: 1px solid var(--border); }
}

.diff-cell {
  overflow-x: auto;
  font-family: var(--mono);
  font-size: 0.78rem;
  line-height: 1.7;
  padding: 0.05rem 0.625rem;
  white-space: pre;
  min-width: 0;
}

.diff-gutter {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 0.2rem 0.25rem;
  border-left: 1px solid var(--border);
  border-right: 1px solid var(--border);
  background: var(--bg2);
}

/* Row colours */
.row-equal {
  & .diff-cell { color: var(--text2); background: var(--bg); }
}

.row-del {
  & .diff-left {
    background: var(--del-bg);
    color: var(--del-fg);
    border-left: 3px solid var(--del-border);
  }
  & .diff-right { background: var(--empty-bg); color: var(--text3); }
}

.row-ins {
  & .diff-left { background: var(--empty-bg); color: var(--text3); }
  & .diff-right {
    background: var(--add-bg);
    color: var(--add-fg);
    border-right: 3px solid var(--add-border);
  }
}

.row-change {
  & .diff-left {
    background: var(--del-bg);
    color: var(--del-fg);
    border-left: 3px solid var(--del-border);
  }
  & .diff-right {
    background: var(--add-bg);
    color: var(--add-fg);
    border-right: 3px solid var(--add-border);
  }
}

/* Collapsed section */
.row-collapsed {
  cursor: pointer;
  background: var(--bg2);

  &:hover { background: var(--bg3); }

  & .collapsed-cell {
    grid-column: 1 / -1;
    text-align: center;
    font-size: 0.8125rem;
    color: var(--text3);
    padding: 0.35rem;

    &:hover { color: var(--accent); }
  }
}

/* ── EMPTY / IDENTICAL ─────────────────────────────────── */
.empty-state {
  padding: 4rem 2rem;
  text-align: center;
  color: var(--text3);
  font-size: 0.9375rem;
  border: 1px dashed var(--border);
  border-radius: var(--r);
}

.identical-state {
  padding: 2rem;
  text-align: center;
  color: var(--add-fg);
  background: var(--add-bg);
  border: 1px solid var(--add-border);
  border-radius: var(--r);
  font-size: 0.9375rem;
  font-weight: 600;
}