/* 在线文本比较工具样式：青色主题；左右两个「可编辑 + 差异高亮」面板。
   站点外壳（导航条 / 广告位）的自包含样式在本文件顶部 —— 工具页不引 assets/site.css。 */

:root {
  --bg: #f6f7f9;
  --panel: #ffffff;
  --line: #e5e7eb;
  --text: #1f2328;
  --muted: #6b7280;
  --accent: #0891b2;
  --accent-dark: #0e7490;
  --accent-soft: #ecfeff;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;

  /* 差异只用「一种」底色，而且只画在不一致的内容上（不画整行背景）：
       · 修改行 → 只标出变化的那几段文字
       · 新增 / 删除行 → 整行文字都标上
     类型靠行号后的符号列区分（+ 新增 / − 删除 / ~ 修改），不靠颜色。 */
  --diff-mk: #ffe0a0;              /* 不一致内容的底色（唯一的差异色） */
  --diff-line: #e0a02a;            /* 行号栏强调线（同色系） */
  --diff-ink: #a16207;             /* 符号列文字 */
  --cur-bg: rgba(8,145,178,.14);   /* 当前定位到的差异块（导航提示，不是差异色） */

  --row-h: 20px;
  --gut-w: 44px;                   /* 行号列宽 */
  --sg-w: 16px;                    /* 符号列宽 */
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 14px/1.6 -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* ------------------------------------------------------------ 站点外壳 */
.site-nav {
  display: flex; align-items: center; gap: 16px;
  height: 52px; padding: 0 20px;
  background: var(--panel); border-bottom: 1px solid var(--line);
}
.site-nav a { text-decoration: none; color: var(--muted); font-size: 13px; }
.site-nav a:hover { color: var(--accent); }
.site-nav .brand {
  display: flex; align-items: center; gap: 7px;
  font-size: 13.5px; font-weight: 650; color: var(--text);
}
.site-nav .brand i {
  width: 20px; height: 20px; border-radius: 5px; background: #2563eb; color: #fff;
  font-size: 10px; font-style: normal; font-weight: 600;
  display: flex; align-items: center; justify-content: center;
}
.site-nav .back { margin-left: auto; }

.ad { position: relative; display: flex; justify-content: center; }
.ad:empty { display: none; }
.ad-frame { display: block; width: 100%; height: 100%; border: 0; }
.ad-inline { width: 100%; max-width: 1180px; height: 90px; margin: 0 auto; }
.ad-label {
  position: absolute; right: 8px; top: 2px; pointer-events: none;
  font-size: 10px; line-height: 14px; padding: 0 4px; border-radius: 4px;
  color: #9ca3af; background: rgba(255,255,255,.9); border: 1px solid var(--line);
}

/* ------------------------------------------------------------ 页面与工具栏 */
/* 宽度随窗口自适应，但两侧始终留出空白（窗口越宽留得越多，最多 200px）——
   将来放 160×600 广告位就用这块留白，不需要改动比对区排版。 */
.page {
  width: calc(100% - 2 * clamp(30px, (100vw - 1250px) / 3, 200px));
  margin: 0 auto;
  padding: 26px 0 40px;
}

h1 { margin: 0 0 8px; font-size: 26px; font-weight: 650; text-align: center; letter-spacing: .2px; }
.lead { margin: 0 0 20px; text-align: center; color: var(--muted); font-size: 13.5px; }

.toolbar {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  flex-wrap: wrap; margin-bottom: 12px;
}
.tb-group { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.toolbar button {
  border: 1px solid var(--line); background: var(--panel); color: var(--text);
  font: 13px inherit; padding: 7px 14px; border-radius: 8px; cursor: pointer;
}
.toolbar button:hover { border-color: var(--accent); color: var(--accent-dark); }

.opt {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 12.5px; color: #4b5563; cursor: pointer; user-select: none;
  padding: 4px 8px; border-radius: 7px; background: var(--panel); border: 1px solid var(--line);
}
.opt:hover { border-color: #cbd5e1; }
.opt input { margin: 0; accent-color: var(--accent); cursor: pointer; }

.msg {
  margin: 0 0 12px; padding: 9px 12px; font-size: 12.5px; line-height: 1.7;
  color: var(--accent-dark); background: var(--accent-soft);
  border: 1px solid #a5f3fc; border-radius: 8px;
}
.msg.warn { color: #92400e; background: #fffbeb; border-color: #fcd34d; }
.msg.ok { color: #0f766e; background: #f0fdfa; border-color: #99f6e4; }

/* ------------------------------------------------------------ 统计条 */
.statusbar {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  flex-wrap: wrap; margin-bottom: 10px;
}
.chips { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 12.5px; }
.chip {
  display: inline-block;
  padding: 3px 9px; border-radius: 20px; border: 1px solid var(--line); background: var(--panel);
  color: #374151; font-variant-numeric: tabular-nums;
}
.chip.zero { color: #9ca3af; }
.sb-acts { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.sb-acts button {
  border: 1px solid var(--line); background: var(--panel); color: #374151;
  font: 12.5px inherit; padding: 5px 11px; border-radius: 7px; cursor: pointer;
}
.sb-acts button:hover { border-color: var(--accent); color: var(--accent-dark); }

/* ------------------------------------------------------------ 比对区 */
.diffwrap { position: relative; }

/* 两侧预留广告位（160×600）：落在 .page 的留白里，不占比对区宽度。
   未启用时容器为空 → .ad:empty 不渲染；窗口不够宽（留白不足 176px）时直接不显示。 */
.ad-side { position: absolute; top: 0; width: 160px; height: 600px; }
#adLeft { right: calc(100% + 16px); }
#adRight { left: calc(100% + 16px); }

.diff {
  display: grid; grid-template-columns: 1fr 1fr; gap: 14px;
  align-items: start;
}

.pane {
  min-width: 0;
  background: var(--panel); border: 1px solid var(--line);
  border-radius: 12px; overflow: hidden;
}
.pane-head {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 12px; min-height: 41px;
  background: #f8fafc; border-bottom: 1px solid var(--line);
}
.pane-head .tag {
  flex: 0 0 auto; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 5px;
  background: #64748b; color: #fff; font-size: 11px; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center;
}
.pane-head .fname {
  font-size: 12.5px; color: #374151; max-width: 52%; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap;
}
.pane-head .meta { font-size: 11.5px; color: #9aa4b2; white-space: nowrap; }
.pane-head .pane-acts { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.linkbtn {
  font: 12px inherit; color: var(--accent-dark); background: transparent;
  border: 1px solid var(--line); border-radius: 6px; padding: 3px 8px; cursor: pointer;
  white-space: nowrap;
}
.linkbtn:hover { border-color: var(--accent); background: var(--accent-soft); }

/* 面板主体：左边行号 + 符号列，右边「高亮层 + textarea」叠加。
   高度由 app.js 按内容行数设置（两侧取较大者，保持等高），这里是兜底值。 */
.pane-body {
  position: relative; display: flex;
  height: 300px; overflow: hidden; background: #fff;
}

/* 行号与符号列（不参与横向滚动，只跟内容上下同步） */
.gutter {
  flex: 0 0 auto; width: calc(var(--gut-w) + var(--sg-w));
  overflow: hidden; padding: 8px 0;
  background: #fbfcfd; border-right: 1px solid #eef1f5;
  font: 12.5px/var(--row-h) var(--mono); user-select: none;
}
.gline { display: flex; height: var(--row-h); line-height: var(--row-h); }
.gline .no {
  flex: 0 0 var(--gut-w); padding-right: 8px; text-align: right;
  color: #b0b8c4; font-size: 11.5px;
}
/* 符号列：+ 新增 / − 删除 / ~ 修改；没有差异的行不显示 */
.gline .sg {
  flex: 0 0 var(--sg-w); text-align: center;
  color: transparent; font-size: 12px; font-weight: 700;
}
.gline.on .sg { color: var(--diff-ink); }
.gline.cur { background: var(--cur-bg); }
/* 超大文件时行号栏退化成纯文本（单个文本节点，避免上万个元素拖慢页面） */
.gutter.plain {
  white-space: pre; padding-right: 8px; text-align: right;
  color: #b0b8c4; font-size: 11.5px;
}

/* 文本区：高亮层在下（文字透明，只画底色），textarea 在上（可见文字 + 原生编辑能力） */
.area { position: relative; flex: 1 1 auto; min-width: 0; }
.hl { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.hl-in { position: absolute; left: 0; top: 0; padding: 8px 12px; will-change: transform; }

/* ⚠️ 高亮层与文本框必须严格同一套字体 / 行高 / 内边距 / 空白处理，否则底色会和文字错位 */
.hl-in, .area textarea {
  font: 12.5px/var(--row-h) var(--mono);
  white-space: pre; tab-size: 4;
}
.hl-in { color: transparent; }
.hl-in .ln { min-height: var(--row-h); }
.hl-in .ln.cur { background: var(--cur-bg); }
.hl-in .mk { background: var(--diff-mk); border-radius: 2px; }

.area textarea {
  position: relative; display: block; width: 100%; height: 100%;
  margin: 0; border: 0; outline: none; resize: none;
  padding: 8px 12px; background: transparent; color: var(--text);
  overflow: auto;
}
.area textarea::placeholder { color: #b6bcc6; }

/* 拖入文件的提示层 */
.dropmask {
  position: absolute; inset: 0; z-index: 4;
  display: none; align-items: center; justify-content: center;
  background: rgba(8,145,178,.07); border: 2px dashed var(--accent);
  color: var(--accent-dark); font-size: 13px; font-weight: 600;
  pointer-events: none;
}
.pane-body.over .dropmask { display: flex; }

/* ------------------------------------------------------------ 「仅显示差异」只读视图
   拖入/编辑区没法隐藏相同的行（textarea 里藏不了行），所以这个视图单独一套：
   左右行按差异「对齐」（某侧没有对应内容时为斜纹占位行），相同行折叠成一行提示。
   只读，用来快速扫差异；取消勾选即可回到可编辑视图。 */
.pane-body.diffonly { height: auto; max-height: clamp(320px, 62vh, 660px); }
/* 高度由内容撑开时，两个面板的行数相同（对齐视图），所以高度天然一致 */
.viewer {
  flex: 1 1 auto; min-width: 0; overflow: auto;
  padding: 8px 0; background: #fff;
  font: 12.5px/var(--row-h) var(--mono); tab-size: 4;
}
.vrow {
  display: flex; align-items: flex-start;
  height: var(--row-h); line-height: var(--row-h);
  background: #fff;
}
.vrow .no {
  position: sticky; left: 0; z-index: 1;
  flex: 0 0 var(--gut-w); padding-right: 8px; text-align: right;
  color: #b0b8c4; background: inherit; font-size: 11.5px; user-select: none;
}
.vrow .sg {
  position: sticky; left: var(--gut-w); z-index: 1;
  flex: 0 0 var(--sg-w); text-align: center;
  color: transparent; background: inherit; font-size: 12px; font-weight: 700;
  user-select: none;
}
.vrow.t-ins .sg, .vrow.t-del .sg, .vrow.t-chg .sg { color: var(--diff-ink); }
.vrow .txt { flex: 1 1 auto; padding-right: 14px; white-space: pre; }
.vrow .mk { background: var(--diff-mk); border-radius: 2px; }
/* 另一侧没有对应内容时的占位行（中性斜纹） */
.vrow.gap { background: repeating-linear-gradient(45deg, #fafbfc 0 6px, #eef1f6 6px 12px); }
/* 被折叠的相同内容 */
.vrow.t-skip { background: #fbfcfd; }
.vrow.t-skip .txt { color: #94a3b8; font-size: 11.5px; letter-spacing: .3px; }
/* 当前定位到的差异块 */
.vrow.cur { background: var(--cur-bg); }

.foot-note {
  margin: 16px 0 0; text-align: center;
  font-size: 12.5px; color: var(--muted); line-height: 1.9;
}

/* ------------------------------------------------------------ 响应式 */
/* 留白不足 176px（放不下 160 宽广告位）时不显示侧栏广告位 */
@media (max-width: 1800px) {
  .ad-side { display: none; }
}
@media (max-width: 980px) {
  .diff { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .page { padding: 20px 0 32px; }
  h1 { font-size: 21px; }
  .lead { font-size: 12.5px; }
  .toolbar { justify-content: flex-start; }
  .toolbar button { padding: 6px 11px; }
  .pane-head .meta { display: none; }
}