/* Diffly — 样式（PR diff 配色：删除=红，新增=绿） */

:root {
  --bg: #f5f6f8;
  --panel: #ffffff;
  --border: #d8dce2;
  --text: #24292f;
  --muted: #6a737d;
  --accent: #2563eb;
  --num-bg: #f0f1f4;
  --num-fg: #9aa1ab;

  --del-bg: #ffebe9;        /* 删除行 / 修改行左侧 */
  --del-tk: #ffb8ad;        /* 删除侧行内不同 token */
  --del-num: #ffd8d3;       /* 删除侧行号 */
  --ins-bg: #e6ffec;        /* 新增行 / 修改行右侧 */
  --ins-tk: #a5f3b6;        /* 新增侧行内不同 token */
  --ins-num: #cdf3d8;       /* 新增侧行号 */
  --blk-bg: #f3f4f6;        /* 被忽略的空行差异 */
  --empty-bg: repeating-linear-gradient(45deg, #f4f5f7 0 8px, #eceef1 8px 16px);
  --current-outline: #f59e0b;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #14161a;
    --panel: #1c1f24;
    --border: #33383f;
    --text: #d7dbe0;
    --muted: #8b939d;
    --accent: #5b8def;
    --num-bg: #22262c;
    --num-fg: #5c646e;

    --del-bg: #3a2426;
    --del-tk: #6e3a3d;
    --del-num: #472c2e;
    --ins-bg: #1e3328;
    --ins-tk: #2f5c40;
    --ins-num: #28402f;
    --blk-bg: #24282e;
    --empty-bg: repeating-linear-gradient(45deg, #1d2025 0 8px, #181b1f 8px 16px);
    --current-outline: #d97706;
  }
}

* { box-sizing: border-box; }

/* CSS 里给 section 设了 display:flex，会覆盖 hidden 属性的默认隐藏，这里补回 */
[hidden] { display: none !important; }

html, body { height: 100%; }

body {
  margin: 0;
  font: 14px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
        "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  background: var(--bg);
  color: var(--text);
  display: flex;
  flex-direction: column;
}

/* ---------- 顶栏 ---------- */

header {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  padding: 8px 16px;
  background: var(--panel);
  border-bottom: 1px solid var(--border);
}

.brand {
  font-size: 17px;
  font-weight: 700;
  letter-spacing: .3px;
}
.brand .tag {
  margin-left: 8px;
  font-size: 11px;
  font-weight: 500;
  color: var(--muted);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 1px 8px;
  vertical-align: 2px;
}

.options {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  color: var(--muted);
  font-size: 13px;
  user-select: none;
}
.options label { display: flex; align-items: center; gap: 4px; cursor: pointer; }

.header-actions { margin-left: auto; display: flex; gap: 8px; }

/* ---------- 按钮 ---------- */

.btn {
  font: inherit;
  color: var(--text);
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 5px 12px;
  cursor: pointer;
  transition: background .12s, border-color .12s;
}
.btn:hover { border-color: var(--accent); color: var(--accent); }
.btn.small { padding: 3px 10px; font-size: 12.5px; }
.btn.primary {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
  font-weight: 600;
  padding: 9px 28px;
  font-size: 15px;
}
.btn.primary:hover { filter: brightness(1.1); color: #fff; }
.btn.active { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn kbd {
  font: 11px/1 ui-monospace, monospace;
  opacity: .75;
  margin-left: 6px;
}

/* ---------- 编辑区 ---------- */

#editStage {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.panes {
  flex: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  padding: 12px 16px;
  min-height: 0;
}

.pane {
  display: flex;
  flex-direction: column;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
  min-height: 0;
}

.pane-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 10px;
  border-bottom: 1px solid var(--border);
  background: var(--num-bg);
}
.pane-name { font-weight: 600; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pane-tools { display: flex; gap: 6px; flex-shrink: 0; }

textarea {
  flex: 1;
  border: 0;
  resize: none;
  outline: none;
  padding: 10px 12px;
  background: var(--panel);
  color: var(--text);
  font: 13px/1.55 ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas,
        "Liberation Mono", monospace;
  tab-size: 4;
  min-height: 0;
}
textarea.drop { outline: 2px dashed var(--accent); outline-offset: -6px; }

.compare-bar {
  display: flex;
  justify-content: center;
  padding: 4px 0 16px;
}

/* ---------- 结果区 ---------- */

#resultStage {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding: 8px 16px;
  background: var(--panel);
  border-bottom: 1px solid var(--border);
}
.toolbar .sep { width: 1px; height: 20px; background: var(--border); }
.toolbar .flex { flex: 1; }
.seg { display: flex; }
.seg .btn { border-radius: 0; }
.seg .btn:first-child { border-radius: 6px 0 0 6px; }
.seg .btn:last-child { border-radius: 0 6px 6px 0; margin-left: -1px; }
.diff-pos { font-size: 12px; color: var(--muted); min-width: 48px; }
.stats { font-size: 12.5px; color: var(--muted); }

.legend {
  display: flex;
  gap: 18px;
  padding: 5px 16px;
  font-size: 12px;
  color: var(--muted);
  background: var(--panel);
  border-bottom: 1px solid var(--border);
}
.legend span { display: flex; align-items: center; gap: 6px; }
.sw { width: 12px; height: 12px; border-radius: 3px; display: inline-block; }
.del-sw { background: var(--del-bg); border: 1px solid var(--del-tk); }
.ins-sw { background: var(--ins-bg); border: 1px solid var(--ins-tk); }
.tk-sw { background: linear-gradient(90deg, var(--del-tk) 50%, var(--ins-tk) 50%); }

/* ---------- diff 视图 ---------- */

.diff-box {
  flex: 1;
  overflow: auto;
  min-height: 0;
  padding-bottom: 24px;
  background: var(--panel);   /* 内容不足一屏时也铺满整高，不露 body 底色 */
}

.grid {
  display: grid;
  min-width: 100%;
  width: max-content;
  font: 13px/1.55 ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas,
        "Liberation Mono", monospace;
}
.grid.wrap { width: 100%; }

.row { display: contents; }

.num {
  padding: 0 8px;
  text-align: right;
  color: var(--num-fg);
  background: var(--num-bg);
  user-select: none;
  border-right: 1px solid var(--border);
  min-height: 1.55em;
}

/* 并排视图的 +/- 符号列 */
.sgn {
  text-align: center;
  color: var(--num-fg);
  background: var(--panel);
  user-select: none;
  font-weight: 600;
  min-height: 1.55em;
}

.code {
  padding: 0 10px;
  white-space: pre;
  min-height: 1.55em;
  overflow-wrap: normal;
}
.grid.wrap .code { white-space: pre-wrap; overflow-wrap: anywhere; }
.code .sign { color: var(--num-fg); user-select: none; margin-right: 6px; }

/* 行底色（PR diff 配色：删除/旧=红，新增/新=绿）
   并排视图 .row 子格顺序：num(1) sgn(2) code(3) num(4) sgn(5) code(6) */
.row.eq .code, .row.eq .sgn { background: var(--panel); }
.row.chg .code:nth-child(3), .row.del .code:nth-child(3),
.row.chg .sgn:nth-child(2), .row.del .sgn:nth-child(2) { background: var(--del-bg); }
.row.chg .code:nth-child(6), .row.ins .code:nth-child(6),
.row.chg .sgn:nth-child(5), .row.ins .sgn:nth-child(5) { background: var(--ins-bg); }
.row.chg .num:nth-child(1), .row.del .num:nth-child(1) { background: var(--del-num); }
.row.chg .num:nth-child(4), .row.ins .num:nth-child(4) { background: var(--ins-num); }
/* 统一视图：num(1) num(2) code(3)，符号为 code 内的 .sign 行内元素 */
.row.u.del .code { background: var(--del-bg); }
.row.u.del .num { background: var(--del-num); }
.row.u.ins .code { background: var(--ins-bg); }
.row.u.ins .num { background: var(--ins-num); }
.row.blk .code, .row.blk .sgn { background: var(--blk-bg); color: var(--muted); }
.code.empty, .sgn.empty { background: var(--empty-bg) !important; }

/* 行内高亮 */
.tk { border-radius: 2px; }
.row.chg .code:nth-child(3) .tk, .row.u.del .tk { background: var(--del-tk); }
.row.chg .code:nth-child(6) .tk, .row.u.ins .tk { background: var(--ins-tk); }

/* 当前定位的差异 */
.row.current .code, .row.current .num {
  outline: 2px solid var(--current-outline);
  outline-offset: -2px;
}

/* 折叠条（注意：不能继承 .row 的 display:contents，否则 grid-column 失效、后续行整体错位） */
.row.expander {
  display: block;
  grid-column: 1 / -1;
  text-align: center;
  padding: 3px 0;
  background: var(--num-bg);
  color: var(--muted);
  font-size: 12px;
  cursor: pointer;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  user-select: none;
}
.row.expander:hover { color: var(--accent); }

/* 小屏：编辑区上下排 */
@media (max-width: 720px) {
  .panes { grid-template-columns: 1fr; }
}