/* ============================================================
 * tools.css - 工具家族公共样式（code 14 模板 + PDF 工具等共用）
 * 颜色统一使用 :root 变量，调整主题只改变量区即可
 * ============================================================ */
:root {
    /* 品牌主色（Bootstrap primary） */
    --tools-primary: #0d6efd;
    --tools-primary-soft: #eef4ff;

    /* 状态色 */
    --tools-danger: #dc3545;

    /* 边框 */
    --tools-border: #e5e7eb;
    --tools-border-dash: #cdd5e0;
    --tools-border-divider: #e5e9f0;
    --tools-border-success: #d1e7dd;

    /* 背景 */
    --tools-bg-soft: #f8fafc;
    --tools-bg-slate: #f1f5f9;
    --tools-bg-success: #f0fdf4;

    /* 文字与阴影 */
    --tools-text-muted: #6c757d;
    --tools-shadow-sm: 0 1px 3px rgba(0, 0, 0, .08);
}

/* ============================================================
 * code 家族行号代码区（14 个 code 模板共用）
 * .code-view / .cv-inner / pre / .cv-lines / .cv-code
 * ============================================================ */
.code-view {
    max-height: 34rem; overflow: auto;
    background: var(--bs-body-bg); border: 1px solid var(--bs-border-color); border-radius: .375rem;
}
.code-view .cv-inner { display: flex; min-width: 100%; }
.code-view pre {
    margin: 0; padding: .5rem 0; font-family: var(--bs-font-monospace);
    font-size: .8125rem; line-height: 1.55; white-space: pre;
}
.code-view .cv-lines {
    position: sticky; left: 0; z-index: 1;
    background: var(--bs-tertiary-bg); color: var(--bs-secondary-color);
    text-align: right; padding: .5rem .6rem .5rem 1rem;
    user-select: none; border-right: 1px solid var(--bs-border-color); min-width: 3.2em;
}
.code-view .cv-code { padding: .5rem 1rem .5rem .8rem; flex: 1; min-width: 0; }

/* ============================================================
 * PDF 工具共享上传组件（pdf_merge.html）
 * ============================================================ */
.pdf-dropzone{
    --pdf-accent: var(--tools-primary);
    border: 2px dashed var(--tools-border-dash); border-radius: .9rem;
    background: var(--tools-bg-soft);
    transition: border-color .2s ease, background-color .2s ease; position: relative;
}
.pdf-dropzone.dragover, .pdf-dropzone:hover{
    border-color: var(--tools-primary); background: var(--tools-primary-soft);
}
.pdf-dropzone .pdf-pick-btn{color:var(--tools-primary);font-weight:500;cursor:pointer;}
.pdf-file-list{padding:.25rem .75rem .5rem;}
.pdf-file-row{border-bottom:1px dashed var(--tools-border-divider);}
.pdf-file-row:last-child{border-bottom:0;}
.pdf-file-row.error{color:var(--tools-danger);font-size:.85rem;padding:.35rem 0;}
.pdf-file-row .pdf-remove{font-size:.6rem;}

/* ============================================================
 * PDF 合并工具页面（pdf_merge.html）
 * ============================================================ */
.pdfm-card{border:1px solid var(--tools-border);border-radius:.9rem;overflow:hidden;background:#fff;}
.pdfm-card-body{padding:1rem 1.1rem;}
.pdfm-result{border:1px solid var(--tools-border-success);border-radius:.75rem;background:var(--tools-bg-success);}

/* ============================================================
 * 哈希 / 加密工具通用样式（hash/* 与 crypto/* 模板共用）
 * .hash-input / .hash-result / .tool-out / .tool-pem / .tool-drop
 * ============================================================ */
.hash-input {
    min-height: 96px;
}
/* 展示型结果容器：写入 textContent，空态用 data-placeholder 显示占位文案 */
.hash-result {
    font-family: var(--bs-font-monospace, monospace);
    word-break: break-all;
    background-color: var(--bs-tertiary-bg, #f8f9fa);
    border: 1px solid var(--bs-border-color, #dee2e6);
    border-radius: .375rem;
    padding: .75rem .875rem;
    min-height: 58px;
}
.hash-result:empty::before {
    content: attr(data-placeholder);
    color: var(--bs-secondary-color, #6c757d);
    font-family: var(--bs-body-font-family);
    font-size: .875rem;
}
/* 等宽输出框（密文 / 摘要 textarea） */
.tool-out {
    font-family: var(--bs-font-monospace, monospace);
    word-break: break-all;
}
/* PEM 密钥框（RSA / ECC 公私钥，字号略小以容纳多行） */
.tool-pem {
    font-family: var(--bs-font-monospace, monospace);
    font-size: .8rem;
    word-break: break-all;
}
/* 文件拖拽上传区 */
.tool-drop {
    border: 2px dashed #ced4da;
    border-radius: .5rem;
    padding: 1.25rem 1rem;
    text-align: center;
    cursor: pointer;
    transition: border-color .15s ease, background-color .15s ease;
}
.tool-drop:hover,
.tool-drop.is-over {
    border-color: #0d6efd;
    background-color: #f2f7ff;
}
/* 文件信息（名称 / 大小两列） */
.tool-file-meta {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: .25rem .75rem;
    font-size: .875rem;
}
/* 批量计算结果行（hash-kit.js 渲染） */
.hash-batch-row {
    padding: .4rem .6rem;
    border-bottom: 1px dashed var(--tools-border-divider);
}
.hash-batch-row:last-child {
    border-bottom: 0;
}
/* 校验模式下的计算值展示（比结果区略紧凑） */
.hash-result.hash-result-sm {
    min-height: 44px;
    font-size: .875rem;
}

/* ============================================================
 * 工具页通用 tab 切换（分段控制器风格）
 * 适用：输入模式（文本/文件）、操作方向（加密/解密、签名/验签）、
 *      功能模式（生成/校验）等使用频率高的切换
 * 用法：<ul class="nav tool-tabs" role="tablist"> ... </ul>
 * 说明：整组宽度自适应、不撑满；颜色统一走 :root 变量
 * ============================================================ */
.tool-tabs {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .25rem;
    padding: .25rem;
    margin: 0 0 1rem;
    list-style: none;
    background: #e5e7eb;
    border-radius: .5rem;
}
.tool-tabs .nav-link {
    display: inline-flex;
    align-items: center;
    padding: .5rem 1.1rem;
    font-size: .875rem;
    font-weight: 500;
    line-height: 1.4;
    color: #334155;
    background: transparent;
    border: 0;
    border-radius: .4rem;
    transition: background-color .15s ease, color .15s ease, box-shadow .15s ease;
    cursor: pointer;
}
.tool-tabs .nav-link:hover {
    color: #1d4ed8;
    background: rgba(13, 110, 253, 0.08);
}
.tool-tabs .nav-link.active {
    color: #0d4ed8;
    background: #eef4ff;
    font-weight: 600;
    box-shadow: var(--tools-shadow-sm);
}

/* ============================================================
 * 图片工具家族（image-kit 系列：压缩 / 格式转换 / 编辑 / 水印拼接 / EXIF / SVG·Favicon）
 * ============================================================ */
.imgkit-preview-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 150px;
    padding: .5rem;
    border: 1px solid var(--tools-border);
    border-radius: .5rem;
    background-color: var(--tools-bg-soft);
}
.imgkit-preview-label {
    width: 100%;
    margin-bottom: .35rem;
    font-size: .8125rem;
    color: var(--tools-text-muted);
}
.imgkit-preview {
    max-width: 100%;
    max-height: 230px;
    border-radius: .25rem;
    object-fit: contain;
}
.imgkit-table th,
.imgkit-table td {
    font-size: .875rem;
    vertical-align: middle;
}
.imgkit-table .badge {
    font-weight: 500;
}
.imgkit-table tr.img-row-fail td {
    background-color: #fff8f8;
}
.imgkit-formats {
    margin-top: .6rem;
    font-size: .8125rem;
    color: var(--tools-text-muted);
}
.imgkit-dim {
    min-width: 76px;
    text-align: right;
    font-variant-numeric: tabular-nums;
}
.imgkit-range-labels {
    display: flex;
    justify-content: space-between;
    margin-top: .15rem;
    font-size: .75rem;
    color: var(--tools-text-muted);
}
.imgkit-compare {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .5rem;
}
.imgkit-compare-item {
    width: 100%;
}
.imgkit-compare-item .imgkit-preview-box {
    min-height: 130px;
}
.imgkit-compare-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--tools-primary-soft);
    color: var(--tools-primary);
    font-size: .9rem;
}
/* 实时预览舞台（水印 / 拼接页）：canvas 等比缩放，不溢出容器 */
.imgkit-stage {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 180px;
    padding: .5rem;
    border: 1px solid var(--tools-border);
    border-radius: .5rem;
    background-color: var(--tools-bg-soft);
}
.imgkit-stage canvas {
    display: block;
    max-width: 100%;
    max-height: 360px;
    border-radius: .25rem;
}
.imgkit-stage-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    min-height: 150px;
    color: var(--tools-text-muted);
    font-size: .875rem;
    text-align: center;
}
/* 已选图片列表：缩略图 + 可点击切换预览 */
.imgkit-thumb {
    flex: 0 0 34px;
    width: 34px;
    height: 34px;
    border: 1px solid var(--tools-border);
    border-radius: .25rem;
    object-fit: cover;
    background-color: #fff;
}
.imgkit-list-row {
    cursor: pointer;
}
.imgkit-list-row.is-active {
    background-color: var(--tools-primary-soft);
}
/* 九宫格位置选择（水印页）：3×3 Unicode 箭头 + 通宽平铺按钮 */
.imgkit-pos-grid {
    display: grid;
    grid-template-columns: repeat(3, 40px);
    gap: 4px;
    width: max-content;
}
.imgkit-pos-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    font-size: 1rem;
    line-height: 1;
    color: var(--tools-text-muted);
    background: var(--tools-bg-soft);
    border: 1px solid var(--tools-border);
    border-radius: .375rem;
    transition: color .12s ease, background-color .12s ease, border-color .12s ease;
}
.imgkit-pos-btn:hover {
    color: var(--tools-primary);
    background: var(--tools-primary-soft);
    border-color: var(--tools-primary);
}
.imgkit-pos-btn.is-active {
    color: var(--tools-primary);
    background: var(--tools-primary-soft);
    border-color: var(--tools-primary);
}
.imgkit-pos-tile {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    width: 128px; /* 3 x 40px + 2 x 4px gap */
    margin-top: 4px;
    padding: .4rem .5rem;
    font-size: .875rem;
    color: var(--tools-text-muted);
    background: var(--tools-bg-soft);
    border: 1px solid var(--tools-border);
    border-radius: .375rem;
    transition: color .12s ease, background-color .12s ease, border-color .12s ease;
}
.imgkit-pos-tile:hover,
.imgkit-pos-tile.is-active {
    color: var(--tools-primary);
    background: var(--tools-primary-soft);
    border-color: var(--tools-primary);
}
/* 预览翻页：‹ 1/8 › */
.imgkit-preview-nav {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
}
.imgkit-preview-nav .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    line-height: 1;
}
.imgkit-preview-nav .imgkit-counter {
    min-width: 46px;
    text-align: center;
    font-size: .8125rem;
    color: var(--tools-text-muted);
    font-variant-numeric: tabular-nums;
}
/* 拼接拖拽排序 */
.imgkit-drag-handle {
    cursor: grab;
    color: var(--tools-text-muted);
}
.imgkit-drag-handle:active {
    cursor: grabbing;
}
.imgkit-sort-row.is-dragging {
    opacity: .45;
}
.imgkit-sort-row.is-drop-target {
    box-shadow: inset 0 2px 0 var(--tools-primary);
}
.imgkit-saved {
    margin-top: 1rem;
    padding: .75rem;
    text-align: center;
    border: 1px solid var(--tools-border-success);
    border-radius: .5rem;
    background: var(--tools-bg-success);
}
.imgkit-saved-label {
    font-size: .8125rem;
    color: var(--tools-text-muted);
}
.imgkit-saved-value {
    font-size: 1.75rem;
    font-weight: 700;
    line-height: 1.2;
    color: #198754;
}
.imgkit-saved-value.is-negative {
    color: var(--tools-danger);
}
.imgkit-saved-detail {
    font-size: .8125rem;
    color: var(--tools-text-muted);
}
.imgkit-advanced-toggle {
    padding: .25rem 0;
    border: 0;
    background: transparent;
    font-size: .8125rem;
    font-weight: 600;
    color: #334155;
    cursor: pointer;
}
.imgkit-advanced-toggle:hover {
    color: var(--tools-primary);
}
.imgkit-advanced-toggle i {
    transition: transform .15s ease;
}
.imgkit-advanced-toggle.is-open i {
    transform: rotate(180deg);
}
.imgkit-b64-thumb {
    max-width: 100%;
    max-height: 120px;
    border: 1px solid var(--tools-border);
    border-radius: .375rem;
    background-color: var(--tools-bg-soft);
}
.imgkit-b64-out {
    max-height: 260px;
    margin-bottom: .5rem;
    padding: .5rem .75rem;
    overflow: auto;
    font-family: var(--bs-font-monospace, monospace);
    font-size: .75rem;
    line-height: 1.5;
    white-space: pre-wrap;
    word-break: break-all;
    border: 1px solid var(--tools-border);
    border-radius: .5rem;
    background-color: var(--tools-bg-soft);
}
.imgkit-b64-in {
    font-family: var(--bs-font-monospace, monospace);
    font-size: .8125rem;
}
@media (max-width: 767.98px) {
    .imgkit-preview {
        max-height: 170px;
    }
    .imgkit-table thead th:first-child,
    .imgkit-table tbody td:first-child {
        position: sticky;
        left: 0;
        z-index: 1;
        background-color: #fff;
    }
}

/* ============================================================
 * 图片编辑器（image/editor.html，id=174）
 * 预览视口 / 缩放工具条 / 裁剪辅助 / 两列调色 / 体积统计 / 底部操作条
 * ============================================================ */
.ied-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    margin-bottom: .5rem;
}
/* 缩放分段控制器（比 tool-tabs 更紧凑） */
.ied-zoom {
    display: inline-flex;
    align-items: center;
    gap: .15rem;
    padding: .2rem;
    background: #e5e7eb;
    border-radius: .5rem;
}
.ied-zoom .btn {
    padding: .25rem .65rem;
    font-size: .8125rem;
    font-weight: 500;
    line-height: 1.4;
    color: #334155;
    background: transparent;
    border: 0;
    border-radius: .35rem;
}
.ied-zoom .btn:hover {
    color: #1d4ed8;
    background: rgba(13, 110, 253, .08);
}
.ied-zoom .btn.active {
    color: #0d4ed8;
    background: #eef4ff;
    font-weight: 600;
    box-shadow: var(--tools-shadow-sm);
}
.ied-viewports {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .75rem;
}
.ied-viewport {
    position: relative;
    height: 430px;
    padding: .6rem;
    overflow: auto;
    border: 1px solid var(--tools-border);
    border-radius: .5rem;
    background-color: var(--tools-bg-soft);
}
.ied-viewport canvas {
    display: block;
}
.ied-canvas-wrap {
    position: relative;
    display: inline-block;
    line-height: 0;
}
.ied-canvas-wrap img {
    display: block;
    max-width: none;
}
/* 裁剪框：遮罩比旧版更淡，避免整屏发黑 */
.ied-crop {
    position: absolute;
    box-sizing: border-box;
    border: 1px solid #fff;
    box-shadow: 0 0 0 9999px rgba(15, 23, 42, .28);
    cursor: move;
    touch-action: none;
}
.ied-crop-grid {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image:
        linear-gradient(to right, rgba(255, 255, 255, .6) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(255, 255, 255, .6) 1px, transparent 1px);
    background-size: 33.333% 33.333%;
    background-position: -1px -1px;
}
.ied-crop-badge {
    position: absolute;
    top: 4px;
    left: 4px;
    padding: 1px 6px;
    font-size: 11px;
    line-height: 1.5;
    font-variant-numeric: tabular-nums;
    color: #fff;
    background: rgba(15, 23, 42, .72);
    border-radius: 4px;
    pointer-events: none;
}
.ied-crop-handle {
    position: absolute;
    width: 12px;
    height: 12px;
    background: #fff;
    border: 1px solid #0d6efd;
    border-radius: 2px;
}
.ied-crop-handle[data-handle="nw"] { top: -6px; left: -6px; cursor: nwse-resize; }
.ied-crop-handle[data-handle="ne"] { top: -6px; right: -6px; cursor: nesw-resize; }
.ied-crop-handle[data-handle="sw"] { bottom: -6px; left: -6px; cursor: nesw-resize; }
.ied-crop-handle[data-handle="se"] { bottom: -6px; right: -6px; cursor: nwse-resize; }
/* 居中辅助线（裁剪框对齐图片中心时出现） */
.ied-guide {
    position: absolute;
    z-index: 2;
    pointer-events: none;
}
.ied-guide.is-v {
    top: 0;
    bottom: 0;
    left: 50%;
    border-left: 1px dashed rgba(13, 110, 253, .9);
}
.ied-guide.is-h {
    left: 0;
    right: 0;
    top: 50%;
    border-top: 1px dashed rgba(13, 110, 253, .9);
}
/* 调色：桌面两列（列优先，5 行 × 2 列），移动端一列 */
.ied-adjust-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(5, auto);
    grid-auto-flow: column;
    gap: .3rem 1.25rem;
}
.ied-slider-row {
    display: grid;
    grid-template-columns: 74px 1fr 42px;
    align-items: center;
    gap: .5rem;
}
.ied-slider-row label {
    margin: 0;
    font-size: .8125rem;
    color: var(--tools-text-muted);
}
.ied-slider-row .form-range {
    margin: 0;
}
.ied-slider-val {
    font-size: .8125rem;
    text-align: right;
    font-variant-numeric: tabular-nums;
    color: var(--tools-text-muted);
}
/* 比例 / 滤镜 / 常用尺寸 芯片 */
.ied-chips {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
}
.ied-chip {
    padding: .25rem .7rem;
    font-size: .8125rem;
    line-height: 1.5;
    color: #334155;
    background: #fff;
    border: 1px solid var(--tools-border);
    border-radius: 999px;
}
.ied-chip:hover {
    color: #1d4ed8;
    border-color: #0d6efd;
}
.ied-chip.active {
    color: #0d4ed8;
    font-weight: 600;
    background: #eef4ff;
    border-color: #0d6efd;
}
/* 体积统计（原文件 / 输出文件 / 节省） */
.ied-stats {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: .2rem .75rem;
    font-size: .875rem;
}
.ied-stats .ied-stat-label {
    color: var(--tools-text-muted);
}
.ied-stat-saved {
    color: #198754;
    font-weight: 600;
}
.ied-stat-saved.is-negative {
    color: var(--tools-danger);
}
/* 文件信息条（上传后显示） */
.ied-infobar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
    padding: .5rem .75rem;
    font-size: .8125rem;
    border: 1px solid var(--tools-border);
    border-radius: .5rem;
    background-color: var(--tools-bg-soft);
}
.ied-infobar .text-muted {
    font-variant-numeric: tabular-nums;
}
/* 底部操作条（撤销/重做 · 状态 · 下载） */
.ied-bottombar {
    position: sticky;
    bottom: 0;
    z-index: 3;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    margin-top: .75rem;
    padding: .6rem .75rem;
    background: #fff;
    border: 1px solid var(--tools-border);
    border-radius: .5rem;
    box-shadow: var(--tools-shadow-sm);
}
.ied-status {
    font-size: .8125rem;
    color: var(--tools-text-muted);
    font-variant-numeric: tabular-nums;
}
.ied-info {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: .25rem .75rem;
    font-size: .875rem;
}
.ied-info .text-muted {
    font-variant-numeric: tabular-nums;
}
/* 分区标题栏：整行可点、默认展开（进来一眼看到全部功能），仍可手动收起。
   ⚠️ 不要动 .imgkit-advanced-toggle 基类与 .is-open，image/compress.html 的
   「高级设置」依赖它的箭头翻转；这里用独立类，互不影响。 */
.ied-panel-head {
    display: flex;
    align-items: center;
    gap: .5rem;
    width: 100%;
    margin-top: 1rem;
    padding: .6rem .75rem;
    font-size: .875rem;
    font-weight: 600;
    color: #0f172a;
    text-align: left;
    background: #f1f5f9;
    border: 1px solid var(--tools-border);
    border-radius: .5rem;
    cursor: pointer;
    transition: border-color .15s ease, background-color .15s ease;
}
.ied-panel-head:hover {
    border-color: var(--tools-primary);
    background: #eef4ff;
}
.ied-panel-head:focus-visible {
    outline: 2px solid var(--tools-primary);
    outline-offset: 2px;
}
.ied-panel-head > i:first-child {
    color: var(--tools-primary);
}
.ied-panel-title {
    font-size: .875rem;
}
.ied-panel-state {
    margin-left: auto;
    font-size: .75rem;
    font-weight: 400;
    color: var(--tools-text-muted);
}
.ied-panel-chevron {
    font-size: .75rem;
    color: var(--tools-text-muted);
    transition: transform .15s ease;
}
.ied-panel-head.is-collapsed .ied-panel-chevron {
    transform: rotate(180deg);
}
/* 功能导航：点击展开对应分区并滚动定位 */
.ied-nav {
    margin-top: 1rem;
}
.ied-nav .ied-chip {
    display: inline-flex;
    align-items: center;
}
@media (max-width: 767.98px) {
    .ied-viewports {
        grid-template-columns: 1fr;
    }
    .ied-viewport {
        height: 320px;
    }
    .ied-adjust-grid {
        grid-template-columns: 1fr;
        grid-template-rows: none;
        grid-auto-flow: row;
    }
}

/* ============================================================
 * 图片工具家族（证件照 / 抠图 / OCR / 打码 / 取色 / 切图）
 * ============================================================ */

/* 透明区域棋盘格：透明背景一律用棋盘格表现，不用纯白模拟 */
.imgkit-checker {
    background-color: #fff;
    background-image:
        linear-gradient(45deg, #d9d9d9 25%, transparent 25%, transparent 75%, #d9d9d9 75%),
        linear-gradient(45deg, #d9d9d9 25%, transparent 25%, transparent 75%, #d9d9d9 75%);
    background-size: 16px 16px;
    background-position: 0 0, 8px 8px;
}

/* 空状态：没有图片时不显示空白结果区 */
.imgkit-empty-block {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .35rem;
    min-height: 150px;
    padding: 1.25rem .75rem;
    border: 1px dashed var(--tools-border);
    border-radius: .5rem;
    background-color: var(--tools-bg-soft);
    color: var(--tools-text-muted);
    font-size: .875rem;
    text-align: center;
}

/* 可交互画布舞台：外层 relative，覆盖层 canvas 绝对定位 */
.imgkit-interactive {
    position: relative;
    display: inline-block;
    max-width: 100%;
    line-height: 0;
}
.imgkit-interactive canvas.imgkit-main {
    display: block;
    max-width: 100%;
    max-height: 460px;
    border-radius: .25rem;
    touch-action: none;
}
.imgkit-interactive canvas.imgkit-overlay {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    max-height: none;
    border-radius: .25rem;
    pointer-events: none;
}
.imgkit-stage.is-draggable canvas.imgkit-main {
    cursor: grab;
}
.imgkit-stage.is-draggable.is-dragging canvas.imgkit-main {
    cursor: grabbing;
}

/* 证件照 / 打码的方向微调键 */
.imgkit-nudge {
    display: grid;
    grid-template-columns: repeat(3, 40px);
    grid-template-rows: repeat(3, 34px);
    gap: .25rem;
}
.imgkit-nudge .btn {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 34px;
    padding: .1rem .35rem;
    font-size: .8rem;
}

/* 背景色 / 遮挡色选择 */
.imgkit-color-choice {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
}
.imgkit-color-choice .btn {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .25rem .6rem;
    font-size: .8125rem;
}
.imgkit-color-dot {
    display: inline-block;
    width: 14px;
    height: 14px;
    border: 1px solid rgba(0, 0, 0, .18);
    border-radius: 50%;
    background-color: #fff;
}

/* 调色板色块 */
.imgkit-swatch {
    position: relative;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-width: 0;
    padding: 0;
    border: 1px solid var(--tools-border);
    border-radius: .5rem;
    background: #fff;
    cursor: pointer;
    text-align: left;
}
.imgkit-swatch:hover,
.imgkit-swatch.is-active {
    border-color: var(--tools-primary);
    box-shadow: 0 0 0 2px rgba(var(--tools-primary-rgb, 13, 110, 253), .18);
}
.imgkit-swatch-color {
    height: 62px;
}
.imgkit-swatch-meta {
    padding: .3rem .4rem;
    font-size: .75rem;
    line-height: 1.25;
    color: var(--tools-text-muted);
}
.imgkit-swatch-meta strong {
    display: block;
    font-size: .8125rem;
    color: var(--tools-text);
    font-variant-numeric: tabular-nums;
}
.imgkit-swatch-pct {
    position: absolute;
    top: .3rem;
    right: .3rem;
    padding: 0 .3rem;
    border-radius: .25rem;
    background: rgba(0, 0, 0, .45);
    color: #fff;
    font-size: .6875rem;
    line-height: 1.5;
}
.imgkit-swatch-sm .imgkit-swatch-color {
    height: 34px;
}

/* 切图结果缩略图 */
.imgkit-grid-cell {
    position: relative;
    overflow: hidden;
    border: 1px solid var(--tools-border);
    border-radius: .375rem;
    background-color: var(--tools-bg-soft);
}
.imgkit-grid-cell img {
    display: block;
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: contain;
    background: #fff;
}
.imgkit-grid-cell .imgkit-grid-no {
    position: absolute;
    top: .25rem;
    left: .25rem;
    padding: 0 .3rem;
    border-radius: .25rem;
    background: rgba(0, 0, 0, .5);
    color: #fff;
    font-size: .6875rem;
    line-height: 1.5;
}

/* OCR 结果区（高度内容驱动，禁止 height:100%——
 * 列是 flex 拉伸项，100% 会让统计与按钮溢出到行外） */
.imgkit-ocr-view {
    display: flex;
    flex-direction: column;
    min-height: 320px;
}
.imgkit-ocr-view textarea {
    flex: 1 1 auto;
    min-height: 260px;
    font-size: .875rem;
    line-height: 1.6;
    resize: vertical;
}

/* 打码模式提示条 */
.imgkit-hint-bar {
    padding: .4rem .6rem;
    border-radius: .375rem;
    background-color: var(--tools-bg-soft);
    font-size: .8125rem;
    color: var(--tools-text-muted);
}

/* ------------------------------------------------------------
 * 智能抠图（imagelab/bgremove.html）
 * 模式芯片 / 输出格式芯片 / 背景取样 / 三视图与对比分割线
 * ------------------------------------------------------------ */

/* 芯片组：抠图模式、输出格式等高频切换 */
.imgkit-chips {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
}
.imgkit-chip {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    padding: .3rem .75rem;
    font-size: .8125rem;
    line-height: 1.5;
    color: #334155;
    background: #fff;
    border: 1px solid var(--tools-border);
    border-radius: 999px;
    cursor: pointer;
}
.imgkit-chip:hover {
    color: #1d4ed8;
    border-color: var(--tools-primary);
}
.imgkit-chip.is-active {
    color: #0d4ed8;
    font-weight: 600;
    background: var(--tools-primary-soft);
    border-color: var(--tools-primary);
}
.imgkit-chip i {
    font-size: .75rem;
}
/* 浏览器不支持该输出格式时禁用对应芯片 */
.imgkit-chip:disabled {
    opacity: .5;
    cursor: not-allowed;
}

/* 取样色块与取样状态 */
.imgkit-sample-dot {
    display: inline-block;
    width: 16px;
    height: 16px;
    vertical-align: -3px;
    border: 1px solid rgba(0, 0, 0, .18);
    border-radius: 50%;
    background-color: #fff;
}
/* 取样模式：预览区显示十字光标并高亮，提示"点这里取背景" */
.imgkit-view-pane.imgkit-sampling,
.imgkit-sampling .imgkit-preview-box,
.imgkit-sampling .imgkit-view-pane {
    cursor: crosshair;
    outline: 2px solid var(--tools-primary);
    outline-offset: -2px;
}

/* 三视图（原图 / 抠图 / 对比）容器 */
.imgkit-view-pane {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 220px;
    padding: .5rem;
    border: 1px solid var(--tools-border);
    border-radius: .5rem;
    background-color: var(--tools-bg-soft);
}
.imgkit-view-pane img,
.imgkit-view-pane canvas {
    display: block;
    max-width: 100%;
    max-height: 420px;
    border-radius: .25rem;
}
.imgkit-view-pane.is-empty::before {
    content: attr(data-empty);
    color: var(--tools-text-muted);
    font-size: .875rem;
}
.imgkit-view-pane.is-empty img,
.imgkit-view-pane.is-empty canvas {
    display: none;
}

/* 对比分割视图：容器高度由原图撑开，结果层按左侧百分比裁切 */
.imgkit-cmp {
    position: relative;
    display: inline-block;
    max-width: 100%;
    overflow: hidden;
    line-height: 0;
    border-radius: .25rem;
    touch-action: none;
}
.imgkit-cmp-orig {
    display: block;
    max-width: 100%;
    max-height: 420px;
}
.imgkit-cmp-clip {
    position: absolute;
    inset: 0;
    overflow: hidden;
}
.imgkit-cmp-clip canvas {
    display: block;
    width: 100%;
    height: 100%;
}
.imgkit-cmp-handle {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 2px;
    margin-left: -1px;
    background: #fff;
    box-shadow: 0 0 0 1px rgba(15, 23, 42, .35);
    cursor: ew-resize;
}
.imgkit-cmp-handle::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 30px;
    height: 30px;
    margin: -15px 0 0 -15px;
    border: 1px solid rgba(15, 23, 42, .25);
    border-radius: 50%;
    background: rgba(255, 255, 255, .92);
    box-shadow: var(--tools-shadow-sm);
}
.imgkit-cmp-tag {
    position: absolute;
    top: .35rem;
    padding: 0 .4rem;
    color: #fff;
    font-size: .6875rem;
    line-height: 1.6;
    background: rgba(15, 23, 42, .62);
    border-radius: .25rem;
    pointer-events: none;
}
.imgkit-cmp-tag.is-left { left: .35rem; }
.imgkit-cmp-tag.is-right { right: .35rem; }
@media (max-width: 575.98px) {
    .imgkit-view-pane {
        min-height: 180px;
    }
    .imgkit-view-pane img,
    .imgkit-view-pane canvas,
    .imgkit-cmp-orig {
        max-height: 300px;
    }
}

/* ============================================================
 * 网格切图预览（九宫格）
 * ============================================================ */
.imgkit-grid-preview {
    width: 100%;
    max-width: 420px;
    background-color: #fff;
    border: 1px solid var(--tools-border);
    border-radius: .5rem;
    overflow: hidden;
}
.imgkit-grid-lattice {
    display: grid;
    gap: 0;
}
.imgkit-grid-tile {
    position: relative;
    aspect-ratio: 1 / 1;
    background-repeat: no-repeat;
    background-color: var(--tools-bg-soft);
    cursor: grab;
    min-width: 0;
}
.imgkit-grid-tile:active {
    cursor: grabbing;
}
.imgkit-grid-tile.is-active {
    outline: 2px solid var(--tools-primary);
    outline-offset: -2px;
}
.imgkit-grid-tile .imgkit-grid-no {
    position: absolute;
    top: 2px;
    left: 2px;
    min-width: 16px;
    padding: 0 3px;
    border-radius: 3px;
    background: rgba(13, 110, 253, .85);
    color: #fff;
    font-size: .625rem;
    line-height: 15px;
    text-align: center;
}
@media (max-width: 575.98px) {
    .imgkit-grid-preview {
        max-width: 100%;
    }
}

/* ============================================================
 * 图片颜色提取（imagelab/palette.html）
 * 主色大卡 / 色值行 / 取色十字
 * ============================================================ */

/* 主色大卡：色块本身就是按钮，HEX 直接压在色块上（自动反色） */
.imgkit-pal-hero {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: .5rem;
    min-height: 108px;
    padding: .75rem 1rem;
    color: #fff;
    border: 1px solid var(--tools-border);
    border-radius: .5rem;
}
.imgkit-pal-hero.is-light {
    color: #0f172a;
}
.imgkit-pal-hex {
    font-family: var(--bs-font-monospace, monospace);
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: .02em;
}
.imgkit-pal-name {
    font-size: .8125rem;
    opacity: .85;
}
.imgkit-pal-hero .btn {
    flex: 0 0 auto;
}

/* 色值行：标签 / 值 / 复制按钮 */
.imgkit-pal-row {
    display: grid;
    grid-template-columns: 62px minmax(0, 1fr) auto;
    align-items: center;
    gap: .5rem;
    padding: .4rem 0;
    border-bottom: 1px dashed var(--tools-border-divider);
}
.imgkit-pal-row:last-child {
    border-bottom: 0;
}
.imgkit-pal-row .imgkit-pal-label {
    font-size: .8125rem;
    color: var(--tools-text-muted);
}
.imgkit-pal-row code {
    font-size: .8125rem;
    word-break: break-all;
}

/* ============================================================
 * EXIF 查看 / 清除（image/exif.html）
 * 摘要 + 隐私检查 + GPS 高危卡 + 元数据分组 + 清理前后验证
 * ============================================================ */
.iex-head {
    display: flex;
    align-items: flex-start;
    gap: .75rem;
}
.iex-preview {
    flex: 0 0 96px;
    width: 96px;
    height: 96px;
    object-fit: contain;
    background-color: #fff;
    border: 1px solid var(--tools-border);
    border-radius: .5rem;
}
.iex-head-main {
    flex: 1 1 auto;
    min-width: 0;
}
.iex-sub {
    margin-top: .125rem;
    font-size: .8125rem;
    color: var(--tools-text-muted);
    word-break: break-all;
}
/* 隐私检查结论条：默认中性，按风险换色 */
.iex-risk {
    padding: .6rem .75rem;
    border: 1px solid var(--tools-border);
    border-radius: .5rem;
    background-color: var(--tools-bg-soft);
    font-size: .875rem;
}
.iex-risk-label {
    margin-bottom: .125rem;
    font-size: .75rem;
    font-weight: 600;
    color: var(--tools-text-muted);
}
.iex-risk.is-danger {
    border-color: rgba(220, 53, 69, .35);
    background-color: #fff5f5;
    color: #b02a37;
}
.iex-risk.is-warn {
    border-color: rgba(255, 193, 7, .55);
    background-color: #fffbf0;
    color: #8a6100;
}
.iex-risk.is-safe {
    border-color: rgba(25, 135, 84, .35);
    background-color: #f2fbf6;
    color: #146c43;
}
/* GPS 高危卡片 */
.iex-gps-card {
    border-color: rgba(220, 53, 69, .35);
}
.iex-gps-card .card-body {
    background-color: #fff8f8;
    border-radius: inherit;
}
/* 三列元数据行：名称 / 值 / 复制按钮（无按钮时留空占位） */
.iex-rows {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: start;
    gap: .25rem .75rem;
    font-size: .875rem;
}
.iex-copy-cell {
    min-width: 1.5rem;
    text-align: right;
}
.iex-copy {
    padding: 0 .25rem;
    border: 0;
    background: none;
    color: var(--tools-text-muted);
    line-height: 1.2;
    cursor: pointer;
}
.iex-copy:hover {
    color: var(--tools-primary);
}
/* 清理区：主按钮 + 自定义勾选 */
.iex-clean-primary {
    padding: .75rem;
    border: 1px solid var(--tools-border);
    border-radius: .5rem;
    background-color: var(--tools-bg-soft);
}
.iex-clean-custom {
    margin-top: .875rem;
    padding-top: .875rem;
    border-top: 1px dashed var(--tools-border);
}
.iex-clean-custom-head {
    margin-bottom: .5rem;
    font-size: .75rem;
    color: var(--tools-text-muted);
}
.iex-opt .iex-opt-name {
    display: block;
    font-size: .875rem;
}
.iex-opt .iex-opt-desc {
    display: block;
    font-size: .75rem;
    color: var(--tools-text-muted);
}
/* 清理前后验证 */
.iex-done-head {
    font-weight: 600;
    color: #198754;
}
.iex-counts {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    margin-top: .5rem;
}
.iex-count {
    text-align: center;
}
.iex-count-label {
    font-size: .75rem;
    color: var(--tools-text-muted);
}
.iex-count-value {
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.2;
}
.iex-count-value.is-done {
    color: #198754;
}
.iex-count-arrow {
    color: var(--tools-text-muted);
}
.iex-verify {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: center;
    gap: .3rem .9rem;
    margin-top: .5rem;
    font-size: .875rem;
}
.iex-verify-head {
    font-size: .75rem;
    color: var(--tools-text-muted);
    text-align: center;
}
.iex-keep {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem 1rem;
    margin-top: .6rem;
    font-size: .8125rem;
    color: var(--tools-text-muted);
}
@media (max-width: 575.98px) {
    .iex-preview {
        flex-basis: 72px;
        width: 72px;
        height: 72px;
    }
}

/* ============================================================
 * 图片打码 / 马赛克（imagelab/mosaic.html）
 * 可缩放视口 / 缩放分段控件 / 导出设置 / 安全提示
 * ============================================================ */

/* 可滚动视口：画布在里面自由缩放，页面滚动交给视口之外的区域。
   display:block + 子元素 margin:auto 的居中方式在内容超出时不会吃掉左侧，
   比 flex/text-align 居中更安全。 */
.imgkit-viewport {
    display: block;
    width: 100%;
    max-height: 480px;
    padding: .5rem;
    overflow: auto;
    border: 1px solid var(--tools-border);
    border-radius: .5rem;
    background-color: var(--tools-bg-soft);
    -webkit-overflow-scrolling: touch;
}
.imgkit-viewport .imgkit-interactive {
    display: block;
    margin: 0 auto;
}
/* 视口内的画布由缩放条控制尺寸，不再受图片工具默认的 max-height 截断 */
.imgkit-viewport .imgkit-interactive canvas.imgkit-main {
    max-width: none;
    max-height: none;
}

/* 画布下方缩放条：[−] 100% [+] [适应窗口] */
.imgkit-zoom {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    margin-top: .5rem;
}
.imgkit-zoom-group {
    display: inline-flex;
    align-items: center;
    gap: .15rem;
    padding: .2rem;
    background: #e5e7eb;
    border-radius: .5rem;
}
.imgkit-zoom-group .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 30px;
    padding: .25rem .5rem;
    font-size: .8125rem;
    line-height: 1.4;
    color: #334155;
    background: transparent;
    border: 0;
    border-radius: .35rem;
    box-shadow: none;
}
.imgkit-zoom-group .btn:hover {
    color: #1d4ed8;
    background: rgba(13, 110, 253, .08);
}
.imgkit-zoom-group .btn:disabled {
    opacity: .45;
}
.imgkit-zoom-value {
    min-width: 56px;
    text-align: center;
    font-size: .8125rem;
    font-variant-numeric: tabular-nums;
    color: #334155;
}

/* 导出设置行：格式芯片 + JPG 质量 */
.imgkit-export-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem .75rem;
    padding: .6rem .75rem;
    border: 1px solid var(--tools-border);
    border-radius: .5rem;
    background-color: var(--tools-bg-soft);
}
.imgkit-export-row .form-label {
    margin: 0;
    font-size: .8125rem;
    color: var(--tools-text-muted);
}
.imgkit-export-quality {
    display: flex;
    align-items: center;
    gap: .5rem;
    min-width: 200px;
}
.imgkit-export-quality .form-range {
    margin: 0;
}

/* 安全提示条：打码工具专用，比普通说明更醒目 */
.imgkit-safe-bar {
    display: flex;
    align-items: flex-start;
    gap: .4rem;
    font-size: .8125rem;
    color: #b45309;
}
.imgkit-safe-bar i {
    margin-top: .1rem;
    font-size: .875rem;
}
@media (max-width: 575.98px) {
    .imgkit-viewport {
        max-height: 340px;
    }
    .imgkit-export-quality {
        min-width: 0;
    }
}