/* ============================================================
   起源计划 · 图片处理栏目样式（/tupian/）
   只被本栏目 12 页加载，不进全站 is46-ui.css，避免 262 页跟着换版本。
   设计变量沿用 is46-ui.css 的 --brand / --ink-* / --line。
   ============================================================ */

.i46-img-root { clear: both; }

/* ---------- 拖入区 ---------- */
.i46-img-drop {
  position: relative;
  padding: 26px 16px;
  margin-bottom: 14px;
  text-align: center;
  background: #f8fafc;
  border: 2px dashed #cfd8e8;
  border-radius: 14px;
  cursor: pointer;
  transition: border-color .15s, background .15s;
}
.i46-img-drop:hover,
.i46-img-drop.is-on { border-color: var(--brand, #2563eb); background: #eff5ff; }
.i46-img-drop input[type=file] { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; }
.i46-img-drop-t { margin: 0 0 4px; font-size: 14.5px; font-weight: 600; color: var(--ink, #1f2430); }
.i46-img-drop-s { margin: 0; font-size: 12.5px; color: var(--ink-3, #8b95a6); }

/* ---------- 参数面板 ---------- */
.i46-img-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 16px;
  align-items: flex-start;
  padding: 12px 14px;
  margin-bottom: 12px;
  background: #f6f8fc;
  border: 1px solid #e3e6ec;
  border-radius: 12px;
}
.i46-img-field { display: flex; flex-direction: column; gap: 5px; min-width: 120px; }
.i46-img-field.is-wide { flex: 1 1 100%; }
/* `:not(.i46-chip)` 是必需的：复选胶囊（平铺满屏 / 加粗 / 保留 ICC / 镜像…）
   也是 `.i46-img-field` 的直接子 <label>，被本条命中后会从 inline-flex 变成
   justify-content:space-between + align-items:baseline 的「标题行」，勾选框中心
   比文字中心高 5.5px（实测 inputTop=1 / spanTop=8），看着就是没上下居中。
   同族修复见 is46-ui.css 段 39 的 `.i46-field label:not(.i46-chip)`。 */
.i46-img-field > label:not(.i46-chip), .i46-img-lbl {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  font-size: 12.5px;
  font-weight: 600;
  color: #4b5563;
}
.i46-img-field output { font-weight: 700; color: var(--brand, #2563eb); font-variant-numeric: tabular-nums; }
.i46-img-field input[type=text],
.i46-img-field input[type=number],
.i46-img-field select,
.i46-img-field textarea {
  box-sizing: border-box;   /* 不设的话 height:34 会再加上下边框 2px，和 select 差 2px 对不齐 */
  height: 34px;
  padding: 0 9px;
  font-size: 13px;
  color: var(--ink, #1f2430);
  background: #fff;
  border: 1px solid #d7dce5;
  border-radius: 8px;
  font-family: inherit;
}
.i46-img-field textarea { height: auto; padding: 7px 9px; resize: vertical; }
/* is46-ui.css 有 `.i46-main textarea:not(.form-control):not(.json_input){min-height:180px}`，
   那是给 JSON/文本类工具的大输入框用的，会把这里两行的水印框撑成 180px。
   选择器权重必须 ≥ 它（3 类 + 1 元素），且 tupian.css 在其之后加载才能盖掉。 */
.i46-main .i46-img-bar .i46-img-field textarea { min-height: 58px; max-height: 132px; height: auto; }
/* 原生 file 控件（水印 logo 选择）默认只有 25px 且不带边框，和同行 34px 控件摆一起很突兀 */
.i46-main .i46-img-bar .i46-img-field input[type=file] {
  box-sizing: border-box;
  height: 34px;
  max-width: 230px;
  padding: 4px 8px;
  font-size: 12.5px;
  color: var(--ink, #1f2430);
  background: #fff;
  border: 1px solid #d7dce5;
  border-radius: 8px;
}
.i46-img-field input[type=file]::file-selector-button {
  height: 22px;
  margin-right: 8px;
  padding: 0 8px;
  font: inherit;
  font-size: 12px;
  color: #4b5563;
  background: #f3f6fb;
  border: 1px solid #dfe4ee;
  border-radius: 6px;
  cursor: pointer;
}
.i46-img-field input[type=color] { width: 46px; height: 34px; padding: 2px; border: 1px solid #d7dce5; border-radius: 8px; background: #fff; }
.i46-img-field input[type=range] { width: 168px; height: 34px; accent-color: var(--brand, #2563eb); }
.i46-img-field input:focus-visible,
.i46-img-field select:focus-visible,
.i46-img-field textarea:focus-visible { outline: 2px solid var(--brand, #2563eb); outline-offset: 1px; }
.i46-img-hint { font-size: 11.5px; color: var(--ink-3, #8b95a6); }
.i46-img-cgroup {
  flex: 1 1 100%;
  margin-top: 2px;
  padding-top: 8px;
  border-top: 1px dashed #dfe4ee;
  font-size: 12px;
  font-weight: 700;
  color: #6b7280;
}
.i46-img-cgroup:first-child { border-top: 0; padding-top: 0; }
.i46-chips { display: flex; flex-wrap: wrap; gap: 6px; }
/* 复选胶囊（平铺满屏 / 加粗 / 保留 ICC / 镜像…）是 .i46-img-field 的直接子元素，
   而该 field 是列向 flex 且有 min-width:120px —— 默认 align-items:stretch 会把胶囊
   拉成整列宽的色条（「加粗」两个字撑在 120px 里）。它又不像单选组那样有上方标题行，
   会比同一行的控件高出一截（实测 383 vs 405，差 22px = 标题 17px + field 的 gap 5px）。 */
.i46-img-field > .i46-chip {
  align-self: flex-start;
  margin-top: 22px;
}
/* 复选胶囊不能沿用单选那套「整块变蓝」：is46-ui.css 的
   `.i46-chip:has(input:checked){background:brand}` + `input{accent-color:#fff}`
   会让蓝底上出现一个白色方块（勾还是蓝色），看着像贴了张纸；
   未勾选时又是灰底上一个白框，像掉了东西。改成：胶囊保持浅色，
   勾选态用浅蓝底 + 品牌色描边，勾选框自己用品牌色填充、白勾。 */
.i46-img-field > .i46-chip {
  background: #fff;
  border-color: #dfe4ee;
  color: #374151;
  /* 几何兜底（权重 0,2,0 > 任何 `.i46-img-field > label` 的 0,1,1）：
     保持胶囊自己的行内 flex + 垂直居中，不再被标题行规则改写。 */
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 7px;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.2;
}
.i46-img-field > .i46-chip:hover { background: #f5f8ff; border-color: #c7d3ea; }
.i46-img-field > .i46-chip input[type=checkbox] { accent-color: var(--brand, #2563eb); }
.i46-img-field > .i46-chip:has(input:checked) {
  background: #eaf1ff;
  border-color: var(--brand, #2563eb);
  color: var(--brand-dk, #1d4ed8);
}
.i46-img-field > .i46-chip:has(input:checked):hover { background: #dfeaff; }
.i46-img-field > .i46-chip:has(input:checked) input[type=checkbox] { accent-color: var(--brand, #2563eb); }

/* ---------- 操作条 ---------- */
/* 按钮类名（i46-btn / -primary / -ghost）由 img-core.js 生成，
   此前 CSS 里没有对应规则，导致整栏目的按钮都是浏览器默认灰按钮。 */
.i46-btn {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 34px;
  padding: 0 16px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.2;
  color: var(--ink, #1f2430);
  background: #fff;
  border: 1px solid #d7dce5;
  border-radius: 8px;
  cursor: pointer;
  white-space: nowrap;
  -webkit-user-select: none;
  user-select: none;
  transition: background .15s, border-color .15s, color .15s, box-shadow .15s;
}
.i46-btn:hover { background: #f3f6fb; border-color: #c3ccdb; }
.i46-btn:active { transform: translateY(1px); }
.i46-btn:focus-visible { outline: 2px solid var(--brand, #2563eb); outline-offset: 1px; }
.i46-btn[hidden] { display: none; }        /* 不写这条：display:inline-flex 会盖掉 hidden 属性，ZIP 按钮会一直露着 */
.i46-btn[disabled] { opacity: .55; cursor: not-allowed; transform: none; }

.i46-btn-primary {
  color: #fff;
  background: var(--brand, #2563eb);
  border-color: var(--brand, #2563eb);
  box-shadow: 0 1px 2px rgba(37, 99, 235, .28);
}
.i46-btn-primary:hover { background: var(--brand-dk, #1d4ed8); border-color: var(--brand-dk, #1d4ed8); }

.i46-btn-ghost { color: #4b5563; background: transparent; border-color: #dfe4ee; }
.i46-btn-ghost:hover { color: var(--ink, #1f2430); background: #f3f6fb; }

/* 结果卡里的小按钮：比操作条矮一档，避免抢主操作 */
.i46-img-item .i46-btn { min-height: 30px; padding: 0 12px; font-size: 12.5px; }

.i46-img-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 10px; }
.i46-img-status { min-height: 18px; margin: 0 0 10px; font-size: 12.5px; color: var(--ink-3, #8b95a6); }

/* ---------- 预览舞台（裁剪 / 打码选区） ---------- */
.i46-img-stagebox { margin: 0 0 14px; }
.i46-img-stage {
  position: relative;
  display: inline-block;
  max-width: 100%;
  border: 1px solid #e3e6ec;
  border-radius: 10px;
  overflow: hidden;
  background: repeating-conic-gradient(#f3f5f9 0 25%, #fff 0 50%) 0 0 / 18px 18px;
  cursor: crosshair;
  touch-action: none;
  user-select: none;
}
.i46-img-stage img { display: block; max-width: 100%; height: auto; }
.i46-img-region-layer { position: absolute; inset: 0; pointer-events: none; }
.i46-img-rect {
  position: absolute;
  border: 2px solid #fff;
  box-shadow: 0 0 0 1px rgba(37, 99, 235, .9), 0 2px 10px rgba(15, 23, 42, .25);
  background: rgba(37, 99, 235, .12);
}
.i46-img-rect.is-new { border-style: dashed; }

/* ---------- 结果列表 ---------- */
.i46-img-results { display: flex; flex-direction: column; gap: 10px; }

/* ---------- 前后对比（一根可左右拖的竖线：线左原图、线右结果） ---------- */
.i46-img-item.has-cmp { flex-direction: column; align-items: stretch; gap: 10px; }
/* 缩放档切换条 */
.i46-img-cmp-zoom { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 8px; }
.i46-img-cmp-zoom .i46-btn { min-height: 28px; padding: 0 12px; font-size: 12.5px; }
.i46-img-cmp-zoom .i46-btn.is-on {
  background: var(--brand, #2563eb);
  border-color: var(--brand, #2563eb);
  color: #fff;
}
.i46-img-cmp-zhint { flex: 1 1 200px; font-size: 12px; color: var(--ink-3, #8b95a6); }
.i46-img-cmp {
  --pos: 50%;
  position: relative;
  width: 100%;
  max-height: 62vh;
  overflow: hidden;
  border: 1px solid #e3e6ec;
  border-radius: 10px;
  background: #eef1f6;
  cursor: ew-resize;
  /* 适应档只吃横向手势，纵向留给页面滚动；否则手机上这根竖线会把整页滑动抢走 */
  touch-action: pan-y;
  -webkit-user-select: none;
  user-select: none;
}
.i46-img-cmp.is-one { cursor: grab; touch-action: none; }
.i46-img-cmp.is-one:active { cursor: grabbing; }
/* 两层各是一个「窗口」，里面的 stage 尺寸与位移由 JS 写成完全一样的值，
   所以同一列像素在两层里位置一致，拖动不会错位；左层只是把宽度裁到竖线处。
   （不用 clip-path 是因为 1:1 档要按 stage 坐标裁，用宽度最直接。） */
.i46-img-cmp-pane { position: absolute; inset: 0; overflow: hidden; }
.i46-img-cmp-pane.is-before { right: auto; width: var(--pos); }
.i46-img-cmp-stage { position: absolute; left: 0; top: 0; will-change: transform; }
.i46-img-cmp-stage img {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
  -webkit-user-drag: none;
}
.i46-img-cmp-line {
  position: absolute;
  z-index: 2;
  top: 0;
  bottom: 0;
  left: var(--pos);
  width: 2px;
  margin-left: -1px;
  background: #fff;
  box-shadow: 0 0 0 1px rgba(37, 99, 235, .85);
  pointer-events: none;
}
.i46-img-cmp-handle {
  position: absolute;
  z-index: 2;
  top: 50%;
  left: var(--pos);
  transform: translate(-50%, -50%);
  width: 32px;
  height: 32px;
  padding: 0;
  border: 2px solid var(--brand, #2563eb);
  border-radius: 50%;
  background: #fff url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232563eb' stroke-width='2.2' stroke-linecap='round'><path d='M9 6 4 12l5 6M15 6l5 6-5 6'/></svg>") center / 18px 18px no-repeat;
  box-shadow: 0 2px 8px rgba(15, 23, 42, .28);
  cursor: ew-resize;
}
.i46-img-cmp-handle:focus-visible { outline: 2px solid var(--brand, #2563eb); outline-offset: 2px; }
.i46-img-cmp-tag {
  position: absolute;
  z-index: 2;
  top: 8px;
  padding: 2px 9px;
  font-size: 11.5px;
  color: #fff;
  background: rgba(17, 24, 39, .72);
  border-radius: 999px;
  pointer-events: none;
  transition: opacity .12s;
}
.i46-img-cmp-tag.is-l { left: 8px; }
.i46-img-cmp-tag.is-r { right: 8px; }
/* 像素误差实测行（对比盒下面那行小字） */
.i46-img-cmp-stats {
  margin: -4px auto 0;
  max-width: 760px;
  font-size: 12px;
  line-height: 1.6;
  color: var(--ink-3, #8b95a6);
  text-align: center;
  font-variant-numeric: tabular-nums;
}

/* ---------- 尺寸变了时的「原图 / 结果」两张缩略图 ---------- */
.i46-img-thumbs { display: flex; gap: 10px; flex: none; }
.i46-img-thumbwrap { display: flex; flex-direction: column; gap: 4px; align-items: center; }
.i46-img-thumbcap { font-size: 11.5px; color: var(--ink-3, #8b95a6); }

/* 「只读展示」型结果（信息页的表格、Base64 的输出）的容器 */
.i46-img-shown { padding: 2px 0; }
.i46-img-shown .i46-h2 { margin: 6px 0 8px; font-size: 13.5px; }
/* 工具卡下方追加的独立小节（如 Base64「反过来」） */
.i46-img-extra { margin-top: 14px; padding-top: 12px; border-top: 1px dashed #dfe4ee; }
.i46-img-b64in {
  box-sizing: border-box;
  display: block;
  width: 100%;
  min-height: 84px;
  margin: 8px 0 10px;
  padding: 8px 10px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--ink, #1f2430);
  background: #fff;
  border: 1px solid #d7dce5;
  border-radius: 8px;
  resize: vertical;
}
.i46-img-b64in:focus-visible { outline: 2px solid var(--brand, #2563eb); outline-offset: 1px; }
.i46-img-item {
  display: flex;
  gap: 14px;
  align-items: center;
  padding: 10px 12px;
  background: #fff;
  border: 1px solid #e8ebf2;
  border-radius: 12px;
}
.i46-img-item.is-err { background: #fef2f2; border-color: #fecaca; color: #b91c1c; font-size: 13px; display: block; }
.i46-img-item.is-err p { margin: 0; }
/* 带对比图的卡片里，元信息排在图下面，按钮靠右 */
.i46-img-item.has-cmp .i46-img-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; }
.i46-img-item.has-cmp .i46-img-name { flex: 1 1 100%; }
.i46-img-item.has-cmp .i46-img-line,
.i46-img-item.has-cmp .i46-img-note { flex: 1 1 auto; margin: 0; }
.i46-img-item.has-cmp .i46-btn { margin-left: auto; }
.i46-img-thumb {
  flex: none;
  width: 96px; height: 96px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 8px;
  background: repeating-conic-gradient(#f3f5f9 0 25%, #fff 0 50%) 0 0 / 14px 14px;
  border: 1px solid #eceff5;
  overflow: hidden;
}
.i46-img-thumb img { max-width: 100%; max-height: 100%; display: block; }
.i46-img-meta { flex: 1 1 auto; min-width: 0; }
.i46-img-name { margin: 0 0 3px; font-size: 13.5px; font-weight: 600; color: var(--ink, #1f2430); word-break: break-all; }
.i46-img-line { margin: 0 0 6px; font-size: 12.5px; color: #4b5563; font-variant-numeric: tabular-nums; }
.i46-img-note { margin: 0 0 6px; font-size: 12px; color: var(--ink-3, #8b95a6); }
.i46-img-error { padding: 12px; font-size: 13px; color: #b91c1c; background: #fef2f2; border: 1px solid #fecaca; border-radius: 8px; }

/* ---------- 信息 / EXIF 页的表格 ---------- */
.i46-img-kv { width: 100%; border-collapse: collapse; font-size: 13px; margin: 4px 0 14px; }
.i46-img-kv th, .i46-img-kv td { padding: 7px 10px; border-bottom: 1px solid #eef1f6; text-align: left; vertical-align: top; }
.i46-img-kv th { width: 34%; color: #6b7280; font-weight: 600; background: #fafbfd; }
.i46-img-kv td { color: var(--ink, #1f2430); word-break: break-all; }
.i46-img-kv td .mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12.5px; }
.i46-img-warn {
  padding: 9px 12px; margin: 0 0 12px;
  font-size: 12.5px; color: #92400e; background: #fff7ed;
  border: 1px solid #fed7aa; border-radius: 10px;
}
.i46-img-ok { color: #15803d; }
.i46-img-bad { color: #b91c1c; }
.i46-img-code {
  display: block; padding: 10px 12px; margin: 6px 0 10px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12.5px; line-height: 1.6; color: #1f2430;
  background: #f7f8fb; border: 1px solid #e6e9f0; border-radius: 8px;
  white-space: pre-wrap; word-break: break-all;
}

/* ---------- 窄屏 ---------- */
@media (max-width: 767.98px) {
  /* is46-ui.css 段 24 在窄屏给 button 抬到 44px、input 38px、select 40px，
     而本栏目的 .i46-btn 类名优先级更高，结果一行里出现 34/38/40 三种高度，
     按钮反而成了最矮的控件。这里统一抬到 44px 的触控基线。 */
  .i46-img-field input[type=text],
  .i46-img-field input[type=number],
  .i46-img-field select,
  .i46-img-field input[type=color] {
    height: 44px;
    min-height: 44px;
    font-size: 16px;        /* iOS Safari：小于 16px 的输入框聚焦会自动放大整页 */
  }
  .i46-img-field input[type=range] { height: 44px; }
  .i46-img-field textarea { font-size: 16px; }
  /* is46-ui 段 24 给 file 控件的 min-height:38 会盖掉上面的 34，一并抬到 44 */
  .i46-main .i46-img-bar .i46-img-field input[type=file] { height: 44px; min-height: 44px; }
  .i46-img-field input[type=file]::file-selector-button { height: 30px; font-size: 13px; }
  .i46-chip { min-height: 44px; }
  .i46-btn { min-height: 44px; padding: 0 18px; }
  /* 对比盒上方的缩放档：窄屏要能按得准（44 太高会把图挤下去），取 38 */
  .i46-img-cmp-zoom .i46-btn { min-height: 38px; padding: 0 14px; font-size: 13px; }
  .i46-img-cmp-zhint { flex-basis: 100%; }
  .i46-img-item .i46-btn { min-height: 40px; padding: 0 14px; font-size: 13px; }
}

@media (max-width: 700px) {
  .i46-img-drop { padding: 20px 12px; }
  .i46-img-field { flex: 1 1 46%; min-width: 0; }
  .i46-img-field input[type=range] { width: 100%; }
  .i46-img-item { flex-direction: column; align-items: stretch; }
  .i46-img-thumb { width: 100%; height: auto; max-height: 220px; }
  .i46-img-actions .i46-btn { flex: 1 1 auto; }
}