/* 微视印 · 工作室工具补充分量表
 *
 * 定位：creative-image-tools.css 提供两栏版式与卡片/表单等基础件，
 *   这里只补新一批工具（标注、封面、对比、去重等）需要的复合件。
 *
 * 主题策略：所有颜色都走本文件自己的 --st-* 变量，深色主题只覆写变量，
 *   不去跟 theme.css 的 --ct-* 抢选择器。这样新增工具天然支持深色模式，
 *   也不必再往 theme.css 里堆页面级规则。
 */

:root {
  --st-surface: #fff;
  --st-soft: #f5f7fa;
  --st-line: #e5ebf1;
  --st-ink: #334154;
  --st-ink-strong: #1d2a3d;
  --st-muted: #7a8797;
  --st-warn-ink: #a2630a;
  --st-warn-bg: #fff6e6;
  --st-warn-line: #f2ddb4;
  --st-ok-ink: #1c7d59;
  --st-ok-bg: #eefaf4;
  --st-ok-line: #c8ecdb;
  --st-danger-ink: #b4392f;
}

[data-theme="dark"] {
  --st-surface: #161b22;
  --st-soft: #1a1f27;
  --st-line: rgba(255, 255, 255, .1);
  --st-ink: #dbe3ea;
  --st-ink-strong: #eef3f8;
  --st-muted: #9198a1;
  --st-warn-ink: #e0b768;
  --st-warn-bg: #241d10;
  --st-warn-line: #4a3c1c;
  --st-ok-ink: #5ed6a4;
  --st-ok-bg: #12241c;
  --st-ok-line: #1e4033;
  --st-danger-ink: #f2918a;
}

/* ── 工具条：一排可切换的绘制/操作工具 ── */
.st-toolbar { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.st-tool {
  display: inline-flex; align-items: center; gap: 5px;
  min-height: 32px; padding: 0 10px;
  border: 1px solid var(--st-line); border-radius: 9px;
  color: var(--st-ink); background: var(--st-surface);
  font-size: 11px; font-weight: 850;
}
.st-tool:hover { border-color: #c5d1dd; }
.st-tool[aria-pressed="true"], .st-tool.active {
  border-color: transparent; color: #fff;
  background: linear-gradient(135deg, var(--ct-brand, #5b5ce2), #3687df);
}
.st-tool[disabled] { opacity: .45; cursor: not-allowed; }
.st-tool em { font-style: normal; font-size: 13px; line-height: 1; }

/* ── 小徽标 ── */
.st-badge {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 7px; border: 1px solid var(--st-line); border-radius: 99px;
  color: var(--st-muted); background: var(--st-soft);
  font-size: 10px; font-weight: 900; white-space: nowrap;
}
.st-badge.ok { color: var(--st-ok-ink); background: var(--st-ok-bg); border-color: var(--st-ok-line); }
.st-badge.warn { color: var(--st-warn-ink); background: var(--st-warn-bg); border-color: var(--st-warn-line); }
.st-badge.danger { color: var(--st-danger-ink); background: var(--st-soft); }

/* ── 数据表：格式对比 / 去重清单等 ── */
.st-table { width: 100%; border-collapse: collapse; font-size: 11px; }
.st-table th, .st-table td {
  padding: 7px 8px; border-bottom: 1px solid var(--st-line);
  color: var(--st-ink); text-align: left; vertical-align: middle;
}
.st-table th { color: var(--st-muted); font-size: 10px; font-weight: 900; letter-spacing: .02em; }
.st-table tr:last-child td { border-bottom: 0; }
.st-table td.num, .st-table th.num { text-align: right; font-variant-numeric: tabular-nums; }
.st-table tbody tr.is-best { background: var(--st-ok-bg); }
.st-table-wrap { overflow-x: auto; margin-top: 8px; }

/* ── 键值行：统计信息 ── */
.st-stat { display: grid; gap: 6px; margin-top: 8px; }
.st-stat div { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.st-stat span { color: var(--st-muted); font-size: 11px; }
.st-stat b { color: var(--st-ink-strong); font-size: 12px; font-variant-numeric: tabular-nums; }

/* ── 文件/条目列表 ── */
.st-list { display: grid; gap: 6px; margin-top: 8px; }
.st-row {
  display: grid; grid-template-columns: 44px minmax(0, 1fr) auto;
  gap: 9px; align-items: center;
  padding: 7px; border: 1px solid var(--st-line); border-radius: 10px;
  background: var(--st-surface);
}
.st-row.is-drop { opacity: .55; }
.st-row.is-conflict { border-color: var(--st-danger-ink); background: var(--st-warn-bg); }
.st-row-main em { display: block; overflow: hidden; margin-top: 3px; color: var(--st-ok-ink); font-size: 11px; font-style: normal; font-weight: 800; text-overflow: ellipsis; white-space: nowrap; }
.st-row.is-conflict .st-row-main em { color: var(--st-danger-ink); }
.st-row img, .st-row .st-row-mark {
  width: 44px; height: 44px; display: grid; place-items: center;
  border-radius: 7px; object-fit: cover; background: var(--st-soft);
  color: var(--st-muted); font-size: 15px; font-weight: 900;
}
.st-row-main { min-width: 0; }
.st-row-main b, .st-row-main span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.st-row-main b { color: var(--st-ink); font-size: 11.5px; }
.st-row-main span { margin-top: 3px; color: var(--st-muted); font-size: 10px; }
.st-row-ops { display: flex; gap: 4px; }
.st-row-ops button {
  width: 26px; height: 26px; padding: 0;
  border: 1px solid var(--st-line); border-radius: 7px;
  color: var(--st-ink); background: var(--st-surface); font-size: 11px; line-height: 1;
}

/* ── 缩略图网格：分组结果 ── */
.st-grid-thumbs { display: grid; grid-template-columns: repeat(auto-fill, minmax(86px, 1fr)); gap: 7px; margin-top: 8px; }
.st-thumb-cell {
  position: relative; padding: 0; border: 2px solid transparent; border-radius: 9px;
  overflow: hidden; background: var(--st-soft); cursor: pointer;
}
.st-thumb-cell img { width: 100%; height: 72px; display: block; object-fit: cover; }
.st-thumb-cell span {
  display: block; overflow: hidden; padding: 4px 5px;
  color: var(--st-muted); background: var(--st-surface);
  font-size: 9px; font-weight: 750; text-align: left; text-overflow: ellipsis; white-space: nowrap;
}
.st-thumb-cell.is-keep { border-color: var(--st-ok-ink); }
.st-thumb-cell.is-picked { border-color: var(--ct-brand, #5b5ce2); }
.st-thumb-cell i {
  position: absolute; left: 3px; top: 3px; padding: 1px 5px;
  border-radius: 99px; color: #fff; background: rgba(20, 30, 45, .72);
  font-size: 9px; font-style: normal; font-weight: 850;
}
.st-thumb-cell.is-keep i { background: var(--st-ok-ink); }

/* ── 查重结果分组 ── */
.st-group {
  margin-bottom: 10px; padding: 11px 12px;
  border: 1px solid var(--st-line); border-radius: 12px; background: var(--st-surface);
}
.st-group > header {
  display: flex; flex-wrap: wrap; align-items: center; gap: 7px; margin-bottom: 2px;
  color: var(--st-ink-strong); font-size: 12px; font-weight: 900;
}
.st-group > header small { color: var(--st-muted); font-size: 10.5px; font-weight: 700; }
.st-group .st-grid-thumbs { margin-top: 7px; }

/* ── 编码 / 体积条 ── */
.st-bar { height: 6px; border-radius: 99px; background: var(--st-soft); overflow: hidden; }
.st-bar > i { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, var(--ct-brand, #5b5ce2), #3687df); }
.st-bar.ok > i { background: linear-gradient(90deg, #1c9f6e, #46c98f); }

/* ── 对比滑块（图片对比工具）── */
.st-compare { position: relative; display: inline-block; max-width: 100%; line-height: 0; }
.st-compare canvas { display: block; max-width: 100%; max-height: 560px; box-shadow: 0 12px 28px rgba(25, 39, 60, .14); }
.st-compare-handle {
  position: absolute; top: 0; bottom: 0; width: 3px;
  background: #fff; box-shadow: 0 0 0 1px rgba(20, 30, 45, .35);
  cursor: ew-resize; touch-action: none;
}
.st-compare-handle::after {
  content: "⇔"; position: absolute; top: 50%; left: 50%;
  width: 26px; height: 26px; display: grid; place-items: center;
  transform: translate(-50%, -50%);
  border-radius: 50%; color: #2b3849; background: #fff;
  box-shadow: 0 2px 8px rgba(20, 30, 45, .3); font-size: 12px;
}
.st-canvas-host { position: relative; display: inline-block; max-width: 100%; line-height: 0; }
.st-canvas-host canvas { display: block; max-width: 100%; max-height: 560px; box-shadow: 0 12px 28px rgba(25, 39, 60, .14); cursor: crosshair; touch-action: none; }

/* ── 代码块（Data URL / CSS / picture 回退）── */
.st-code-wrap { position: relative; margin-top: 8px; }
.st-code {
  max-height: 150px; overflow: auto; margin: 0; padding: 10px;
  border: 1px solid var(--st-line); border-radius: 9px;
  color: var(--st-ink); background: var(--st-soft);
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: 10.5px; line-height: 1.6; white-space: pre-wrap; word-break: break-all;
}
.st-code-wrap .st-copy { position: absolute; right: 6px; top: 6px; }

/* ── 提示条 ── */
.st-alert {
  display: flex; gap: 8px; margin-top: 9px; padding: 9px 10px;
  border: 1px solid var(--st-warn-line); border-radius: 9px;
  color: var(--st-warn-ink); background: var(--st-warn-bg);
  font-size: 10.5px; line-height: 1.55;
}
.st-alert.ok { color: var(--st-ok-ink); background: var(--st-ok-bg); border-color: var(--st-ok-line); }

/* ── 颜色行 ── */
.st-color { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 7px; align-items: center; }
.st-color input[type="color"] {
  width: 34px; height: 32px; padding: 2px;
  border: 1px solid var(--st-line); border-radius: 8px; background: var(--st-surface);
}
.st-color input[type="text"] {
  width: 100%; height: 32px; padding: 0 8px;
  border: 1px solid var(--st-line); border-radius: 8px;
  color: var(--st-ink); background: var(--st-surface);
  font-family: ui-monospace, Consolas, monospace; font-size: 11px;
}

/* ── 进度 ── */
.st-progress { display: flex; align-items: center; gap: 8px; margin-top: 8px; color: var(--st-muted); font-size: 10.5px; }
.st-progress > span { flex: 0 0 auto; font-variant-numeric: tabular-nums; }
.st-progress > div { flex: 1; height: 5px; border-radius: 99px; background: var(--st-soft); overflow: hidden; }
.st-progress > div > i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--ct-brand, #5b5ce2), #3687df); transition: width .18s ease; }

/* ── 视频取景 ── */
.st-video { width: 100%; max-width: 640px; display: block; border-radius: 12px; background: #000; }
.st-video::cue { font-size: 12px; }

@media (max-width: 600px) {
  .st-toolbar { gap: 5px; }
  .st-tool { min-height: 30px; padding: 0 8px; font-size: 10.5px; }
  .st-row { grid-template-columns: 38px minmax(0, 1fr) auto; }
  .st-row img, .st-row .st-row-mark { width: 38px; height: 38px; }
}