/* ==========================================================================
   图片加水印 /tools/image-watermark  ——  class 前缀 iwm-
   三端排版：桌面 ≥1100px 双栏（设置栏吸附右侧）· 平板 768~1099px 单栏重排
             · 手机 ≤767px 单列（≤700px 进一步压缩）

   配色：颜色全部取自站点主题变量（深 / 浅色自动适配），本文件只负责组织层次与对比度：
       页面底 --bg-primary  →  卡片 --bg-secondary  →  控件 --bg-primary（凹陷）
   ★ 原实现里卡片与页面底都是 --bg-primary（深色模式下 #000 卡片贴在 #000 页面上，
     只靠一条 1px 描边区分，等于没有卡片），控件反而用更亮的 --bg-secondary，
     层次正好是反的；这里把三层关系摆正。
   描边统一用 --iwm-line（在 --border-color 上混入 13% 前景色）：浅色模式下
     --border-color 近白（#eff3f4），不混前景色就看不出控件边界。
   ========================================================================== */

.iwm {
    /* ---- 设计令牌 ---- */
    --iwm-gap: 16px;
    --iwm-card-r: 16px;
    --iwm-ctl-r: 10px;
    --iwm-line: color-mix(in srgb, var(--text-primary) 13%, var(--border-color));
    --iwm-line-2: color-mix(in srgb, var(--text-primary) 26%, var(--border-color));
    --iwm-tint: color-mix(in srgb, var(--accent) 12%, transparent);
    --iwm-sunken: var(--bg-primary);          /* 凹陷层：输入框 / 滑块槽 / 分段控件 */
    --iwm-tap: 40px;                           /* 触控目标下限（粗指针会再放大） */

    width: 100%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: var(--iwm-gap);
    /* 内边距随视口平滑收敛，不再靠断点硬跳 */
    padding: clamp(16px, 2vw, 26px) clamp(14px, 2.2vw, 30px) clamp(28px, 4vw, 46px);
}
/* 超宽屏：限宽居中，把操作跨度控制在舒适区 */
@media (min-width: 1720px) {
    .iwm { width: min(1760px, 100%); margin-inline: auto; }
}

/* ===== 头部 ===== */
.iwm-hero { display: flex; align-items: center; gap: 14px; }
.iwm-hero-ico {
    width: 46px; height: 46px; flex: 0 0 46px; border-radius: 14px;
    display: flex; align-items: center; justify-content: center;
    font-size: 24px; line-height: 1;
    background: var(--iwm-tint);
    border: 1px solid color-mix(in srgb, var(--accent) 26%, transparent);
}
.iwm-hero-txt { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.iwm-title { margin: 0; font-size: 22px; font-weight: 800; color: var(--text-primary); letter-spacing: -.01em; }
.iwm-sub {
    margin: 0; font-size: 13.5px; line-height: 1.7; color: var(--text-secondary);
    max-width: 78ch;                 /* 长句行宽上限，宽屏下一行到底不好读 */
}

/* ===== 整屏（工具页占满电脑端屏幕，保留左侧导航） ===== */
body.page-image-watermark-full .app,
body.page-image-watermark-full .main-content,
body.page-image-watermark-full .page-container { max-width: 100%; }

/* ===== 提示条 ===== */
.iwm-note {
    padding: 10px 14px; border-radius: var(--iwm-ctl-r);
    font-size: 13px; font-weight: 600; line-height: 1.6;
    border: 1px solid color-mix(in srgb, var(--accent) 34%, transparent);
    background: var(--iwm-tint);
    color: var(--text-primary);
}
.iwm-note[hidden] { display: none !important; }
.iwm-note.is-err {
    border-color: color-mix(in srgb, var(--danger) 42%, transparent);
    background: color-mix(in srgb, var(--danger) 10%, transparent);
    color: var(--danger);
}

/* ===== 主体：桌面双栏 / 平板与手机单栏 ===== */
.iwm-page {
    display: grid; gap: var(--iwm-gap); align-items: start;
    grid-template-columns: minmax(0, 1fr) 360px;
    position: relative;
}
/* 拖拽悬停：整页高亮，明确告诉用户「松手就加进来」 */
.iwm-page.is-drag::after {
    content: "松开鼠标即可添加图片";
    position: absolute; inset: 0; z-index: 5; border-radius: var(--iwm-card-r); pointer-events: none;
    display: flex; align-items: center; justify-content: center;
    font-size: 15px; font-weight: 700; color: var(--accent);
    border: 2px dashed var(--accent);
    background: var(--iwm-tint);
}
.iwm-col { display: flex; flex-direction: column; gap: var(--iwm-gap); min-width: 0; }
/* 桌面端：设置栏吸附右侧，滚动长列表时参数始终可见（避免「调参数要滚回顶部」） */
@media (min-width: 1100px) {
    .iwm-col-side {
        position: sticky; top: 14px;
        max-height: calc(100vh - 28px); max-height: calc(100dvh - 28px);
        overflow-y: auto; overscroll-behavior: contain;
        scrollbar-gutter: stable;        /* 预留滚动条位置，出/不出滚动条不引起横向抖动 */
        /* 内缩 2px 再负边距抵回：滚动容器会裁掉焦点环，留 2px 让键盘焦点完整可见 */
        padding: 2px; margin: -2px;
    }
}

/* ===== 卡片 ===== */
.iwm-card {
    background: var(--bg-secondary);
    border: 1px solid var(--iwm-line);
    border-radius: var(--iwm-card-r);
    padding: 16px 18px;
    display: flex; flex-direction: column; gap: 14px;
    min-width: 0;
}
.iwm-card-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.iwm-card-title {
    margin: 0; font-size: 15px; font-weight: 800; color: var(--text-primary);
    letter-spacing: -.01em; flex: 1 1 auto;
}
.iwm-card-sub {
    font-size: 12.5px; color: var(--text-secondary); font-weight: 600;
    padding: 2px 9px; border-radius: 999px;
    background: var(--iwm-sunken); border: 1px solid var(--iwm-line);
    font-variant-numeric: tabular-nums;      /* 张数跳动时数字宽度稳定 */
}
/* 卡片内的分组小标题：把长表单切成可扫读的三段 */
.iwm-sect-t {
    margin: 2px 0 -2px; font-size: 12px; font-weight: 800; letter-spacing: .04em;
    color: var(--text-secondary); text-transform: none;
    display: flex; align-items: center; gap: 8px;
}
.iwm-sect-t::after {
    content: ""; flex: 1 1 auto; height: 1px;
    background: linear-gradient(to right, var(--iwm-line), transparent);
}

/* ===== 通用控件 ===== */
.iwm-btn {
    padding: 9px 14px; font-size: 13.5px; font-weight: 600; font-family: inherit;
    border-radius: var(--iwm-ctl-r); min-height: 36px;
    border: 1px solid var(--iwm-line); background: var(--iwm-sunken); color: var(--text-primary);
    cursor: pointer; transition: border-color .15s, color .15s, background-color .15s;
}
.iwm-btn-lg { padding: 11px 22px; font-size: 14.5px; min-height: var(--iwm-tap); }
.iwm-btn-sm { padding: 6px 11px; font-size: 12.5px; border-radius: 8px; min-height: 30px; }
.iwm-btn-go { background: var(--accent); border-color: var(--accent); color: #fff; flex: 1 1 auto; }
.iwm-btn-danger { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 45%, transparent); }
.iwm-btn:disabled { opacity: .45; cursor: not-allowed; }
/* hover 只在真·指针设备上生效：触屏点击后残留高亮是「点了没反应」的错觉来源 */
@media (hover: hover) {
    .iwm-btn:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }
    .iwm-btn-go:hover:not(:disabled) { color: #fff; border-color: var(--accent); filter: brightness(1.08); }
    .iwm-btn-danger:hover:not(:disabled) { border-color: var(--danger); color: var(--danger); }
}
.iwm-btn:active:not(:disabled) { transform: translateY(1px); }

.iwm-input, .iwm-select, .iwm-textarea {
    padding: 8px 11px; font-size: 13.5px; font-family: inherit;
    border-radius: var(--iwm-ctl-r); width: 100%; min-height: 38px;
    border: 1px solid var(--iwm-line); background: var(--iwm-sunken); color: var(--text-primary);
    min-width: 0; box-sizing: border-box;
}
.iwm-input:focus, .iwm-select:focus, .iwm-textarea:focus { outline: none; border-color: var(--accent); }
.iwm-input:disabled, .iwm-select:disabled { opacity: .5; cursor: not-allowed; }
.iwm-select { flex: 1 1 auto; width: auto; }

/* 键盘可达性：所有可点元素统一焦点环，鼠标点击不显示 */
.iwm-btn:focus-visible,
.iwm-seg-btn:focus-visible,
.iwm-chip:focus-visible,
.iwm-swatch:focus-visible,
.iwm-pos:focus-visible,
.iwm-item-del:focus-visible,
.iwm-item:focus-visible,
.iwm-range:focus-visible,
.iwm-color:focus-visible,
.iwm-input:focus-visible,
.iwm-select:focus-visible,
.iwm-table-wrap:focus-visible {
    outline: 2px solid var(--accent); outline-offset: 2px;
}

/* 分段按钮（类型 / 模式 / 预览切换） */
.iwm-seg {
    display: flex; gap: 4px; padding: 3px; border-radius: 12px;
    background: var(--iwm-sunken); border: 1px solid var(--iwm-line);
}
.iwm-seg-btn {
    flex: 1 1 0; min-width: 0; padding: 7px 6px; font-size: 12.5px; font-weight: 600; font-family: inherit;
    border: 0; border-radius: 9px; background: transparent; color: var(--text-secondary);
    cursor: pointer; white-space: nowrap; min-height: 32px;
    transition: background-color .15s, color .15s;
}
.iwm-seg-btn.is-on { background: var(--accent); color: #fff; font-weight: 700; }
@media (hover: hover) { .iwm-seg-btn:hover:not(.is-on) { color: var(--text-primary); background: color-mix(in srgb, var(--text-primary) 7%, transparent); } }
.iwm-seg-view { flex: 0 0 auto; }

/* ===== 预览 ===== */
/* 舞台是「随视口收敛的固定高度工作区」：首图不必滚动就能看全，
   且高度不随画布尺寸变化，布局不会因换图而跳动。 */
.iwm-prev {
    position: relative; overflow: hidden;
    border-radius: 12px;
    border: 1px solid var(--iwm-line);
    height: clamp(240px, calc(100vh - 340px), 620px);
    height: clamp(240px, calc(100dvh - 340px), 620px);   /* dvh：移动端工具栏收起时不跳动 */
    background-color: var(--bg-primary);
    background-image:
        linear-gradient(45deg, color-mix(in srgb, var(--text-primary) 6%, transparent) 25%, transparent 25%, transparent 75%, color-mix(in srgb, var(--text-primary) 6%, transparent) 75%),
        linear-gradient(45deg, color-mix(in srgb, var(--text-primary) 6%, transparent) 25%, transparent 25%, transparent 75%, color-mix(in srgb, var(--text-primary) 6%, transparent) 75%);
    background-size: 22px 22px;
    background-position: 0 0, 11px 11px;
    display: flex; align-items: center; justify-content: center;
    padding: 10px;
    box-sizing: border-box;
}
/* 画布始终按容器收敛，不会溢出或撑高舞台 */
.iwm-prev-canvas {
    display: block; max-width: 100%; max-height: 100%;
    width: auto; height: auto; border-radius: 4px;
    box-shadow: 0 6px 22px rgba(0, 0, 0, .28);
}
.iwm-prev-canvas[hidden] { display: none !important; }
.iwm-prev-empty {
    display: flex; flex-direction: column; align-items: center; gap: 9px;
    padding: 22px 18px; text-align: center;
}
.iwm-prev-empty[hidden] { display: none !important; }
.iwm-prev-empty-ico { font-size: 34px; line-height: 1; opacity: .55; }
.iwm-prev-empty-t { margin: 0; font-size: 14.5px; font-weight: 700; color: var(--text-primary); }
/* 主按钮默认 flex:1 1 auto，在纵向 flex 容器里会纵向拉伸，这里锁回内容高度 */
.iwm-prev-empty .iwm-btn { flex: 0 0 auto; }
.iwm-prev-empty-s { margin: 0; font-size: 12.5px; color: var(--text-secondary); line-height: 1.75; }
.iwm-meta {
    font-size: 12px; color: var(--text-secondary);
    font-variant-numeric: tabular-nums;      /* 尺寸数字跳动时不左右抖 */
    min-height: 1.2em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* 预览区全屏按钮：舞台内右上角浮层，半透明毛玻璃 */
.iwm-fs-btn {
    position: absolute; top: 8px; right: 8px; z-index: 5;
    width: 34px; height: 34px; padding: 0;
    display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid var(--iwm-line); border-radius: 9px;
    background: color-mix(in srgb, var(--bg-primary) 82%, transparent);
    color: var(--text-secondary); cursor: pointer;
    -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
    transition: color .15s, background .15s, border-color .15s;
}
@media (hover: hover) { .iwm-fs-btn:hover { color: var(--text-primary); border-color: var(--accent); } }
.iwm-fs-btn svg {
    width: 18px; height: 18px; fill: none; stroke: currentColor;
    stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}
.iwm-fs-btn.is-on { color: #fff; background: var(--accent); border-color: var(--accent); }
/* 全屏态：舞台铺满屏幕、深色底、内边距留白 */
.iwm-prev:fullscreen {
    width: 100vw; height: 100vh; height: 100dvh;
    border-radius: 0; border: 0; padding: 24px;
    background: #0e1116;
}
.iwm-prev:fullscreen .iwm-fs-btn { top: 16px; right: 16px; background: rgba(255, 255, 255, .12); border-color: transparent; }
.iwm-prev:fullscreen .iwm-prev-canvas { max-width: 100%; max-height: 100%; box-shadow: 0 10px 40px rgba(0, 0, 0, .5); }
.iwm-prev:-webkit-full-screen {
    width: 100vw; height: 100vh; border-radius: 0; border: 0; padding: 24px;
    background: #0e1116; display: flex; align-items: center; justify-content: center;
}
.iwm-prev:-webkit-full-screen .iwm-prev-canvas { max-width: 100%; max-height: 100%; }

/* ===== 图片列表 ===== */
.iwm-list-wrap { display: flex; flex-direction: column; gap: 10px; }
.iwm-list-wrap[hidden] { display: none !important; }
/* contain：把列表的重排/重绘限制在自身，图片较多时滚动与重绘更稳 */
.iwm-list {
    display: grid; gap: 8px;
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    contain: layout style;
}
.iwm-list-empty { margin: 0; font-size: 13px; color: var(--text-secondary); padding: 10px 2px; }
.iwm-list-empty[hidden] { display: none !important; }
.iwm-item {
    display: flex; align-items: center; gap: 9px; padding: 7px 9px;
    border-radius: 11px; cursor: pointer; min-height: 48px;
    border: 1px solid var(--iwm-line); background: var(--iwm-sunken);
    transition: border-color .15s, background-color .15s;
}
.iwm-item.is-cur {
    border-color: var(--accent);
    background: color-mix(in srgb, var(--accent) 9%, var(--iwm-sunken));
}
.iwm-item-thumb {
    width: 34px; height: 34px; flex: 0 0 34px; border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
    font-size: 12px; font-weight: 700; color: var(--accent);
    background: var(--iwm-tint); overflow: hidden;
}
.iwm-item-info { flex: 1 1 auto; min-width: 0; }
.iwm-item-name {
    font-size: 12.5px; font-weight: 600; color: var(--text-primary);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.iwm-item-meta { font-size: 11.5px; color: var(--text-secondary); font-variant-numeric: tabular-nums; }
.iwm-item-del {
    flex: 0 0 auto; width: 28px; height: 28px; border-radius: 8px;
    border: 1px solid transparent; background: transparent;
    color: var(--text-secondary); cursor: pointer; font-size: 12px; line-height: 1;
}
@media (hover: hover) {
    .iwm-item:hover { border-color: var(--iwm-line-2); }
    .iwm-item-del:hover { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 40%, transparent); }
}

/* ===== 设置表单 ===== */
.iwm-grid { display: flex; flex-direction: column; gap: 14px; }
.iwm-row { display: flex; flex-direction: column; gap: 7px; }
.iwm-row[hidden] { display: none !important; }
.iwm-row.is-off { opacity: .5; }
.iwm-row-2 { display: grid; gap: 10px; grid-template-columns: 1fr 1fr; }
.iwm-label {
    font-size: 12.5px; font-weight: 700; color: var(--text-primary);
    display: flex; align-items: center; gap: 8px;
}
.iwm-val {
    font-size: 12px; font-weight: 700; color: var(--accent);
    font-variant-numeric: tabular-nums;
    padding: 1px 7px; border-radius: 999px;
    background: var(--iwm-tint);
}
.iwm-field { display: flex; align-items: center; gap: 8px; }
.iwm-unit { font-size: 12px; color: var(--text-secondary); flex: 0 0 auto; }
.iwm-group { display: flex; flex-direction: column; gap: 14px; }
.iwm-group[hidden] { display: none !important; }
.iwm-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.iwm-actions-row .iwm-btn { flex: 1 1 auto; }

/* 滑块：默认外观在深浅色下粗细不一，这里统一轨道与滑块尺寸，
   触摸设备上把可点区域加高（细滑块在手机上很难精确拖到目标值）。 */
.iwm-range {
    flex: 1 1 auto; min-width: 0; width: 100%;
    accent-color: var(--accent);
    height: 22px; margin: 0; background: transparent;
    -webkit-appearance: none; appearance: none;
}
.iwm-range::-webkit-slider-runnable-track {
    height: 5px; border-radius: 999px;
    background: var(--iwm-line); border: 0;
}
.iwm-range::-webkit-slider-thumb {
    -webkit-appearance: none; appearance: none;
    width: 17px; height: 17px; margin-top: -6px;
    border-radius: 50%; background: var(--accent);
    border: 2px solid var(--bg-secondary);
    box-shadow: 0 1px 4px rgba(0, 0, 0, .3); cursor: pointer;
}
.iwm-range::-moz-range-track {
    height: 5px; border-radius: 999px; background: var(--iwm-line); border: 0;
}
.iwm-range::-moz-range-thumb {
    width: 15px; height: 15px; border-radius: 50%;
    background: var(--accent); border: 2px solid var(--bg-secondary);
    box-shadow: 0 1px 4px rgba(0, 0, 0, .3); cursor: pointer;
}
.iwm-num { width: 88px; flex: 0 0 88px; }

/* 九宫格位置 */
.iwm-pos-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; max-width: 220px; }
.iwm-pos {
    aspect-ratio: 1 / 1; border-radius: 10px; border: 1px solid var(--iwm-line);
    background: var(--iwm-sunken); cursor: pointer; position: relative;
    transition: border-color .15s, background-color .15s;
    display: flex; align-items: center; justify-content: center; padding: 0;
}
.iwm-pos::before {
    content: ""; width: 9px; height: 9px; border-radius: 3px;
    background: color-mix(in srgb, var(--text-primary) 30%, transparent);
    transition: background-color .15s;
}
.iwm-pos.is-on { border-color: var(--accent); background: var(--iwm-tint); }
.iwm-pos.is-on::before { background: var(--accent); }
@media (hover: hover) { .iwm-pos:hover { border-color: var(--accent); } }
.iwm-pos[data-p="top-left"]::before { transform: translate(-5px, -5px); }
.iwm-pos[data-p="top-center"]::before { transform: translate(0, -5px); }
.iwm-pos[data-p="top-right"]::before { transform: translate(5px, -5px); }
.iwm-pos[data-p="middle-left"]::before { transform: translate(-5px, 0); }
.iwm-pos[data-p="middle-right"]::before { transform: translate(5px, 0); }
.iwm-pos[data-p="bottom-left"]::before { transform: translate(-5px, 5px); }
.iwm-pos[data-p="bottom-center"]::before { transform: translate(0, 5px); }
.iwm-pos[data-p="bottom-right"]::before { transform: translate(5px, 5px); }

/* 颜色 */
.iwm-color-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.iwm-color {
    width: 52px; height: 36px; flex: 0 0 52px; padding: 3px; border-radius: 9px;
    border: 1px solid var(--iwm-line); background: var(--iwm-sunken); cursor: pointer;
}
.iwm-colors { display: flex; gap: 6px; flex-wrap: wrap; }
.iwm-swatch {
    width: 26px; height: 26px; border-radius: 8px;
    border: 1px solid var(--iwm-line-2); cursor: pointer; padding: 0;
    transition: transform .12s, box-shadow .12s;
}
@media (hover: hover) {
    .iwm-swatch:hover { border-color: var(--accent); box-shadow: 0 0 0 2px var(--iwm-tint); }
}

/* 快捷文字 */
.iwm-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.iwm-chip {
    padding: 6px 11px; font-size: 12px; font-family: inherit; border-radius: 999px;
    cursor: pointer; min-height: 30px;
    border: 1px solid var(--iwm-line); background: var(--iwm-sunken); color: var(--text-secondary);
    transition: border-color .15s, color .15s;
}
@media (hover: hover) { .iwm-chip:hover { border-color: var(--accent); color: var(--accent); } }

/* 勾选 */
.iwm-checks { display: flex; gap: 14px; flex-wrap: wrap; }
.iwm-check {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 12.5px; color: var(--text-primary); cursor: pointer;
}
.iwm-check input { width: 16px; height: 16px; accent-color: var(--accent); }

.iwm-hint { margin: 0; font-size: 12px; color: var(--text-secondary); line-height: 1.7; }
.iwm-hint.is-ok { color: var(--accent); font-weight: 600; }

/* ===== 说明 ===== */
.iwm-help { margin-top: 0; }
.iwm-help h2 { font-size: 16px; margin: 0 0 10px; color: var(--text-primary); }
.iwm-help h3 { font-size: 14px; margin: 18px 0 8px; color: var(--text-primary); }
.iwm-help h3:first-of-type { margin-top: 12px; }
.iwm-help p { margin: 0 0 10px; font-size: 13px; line-height: 1.85; color: var(--text-secondary); max-width: 88ch; }
.iwm-help ul { margin: 0 0 10px; padding-left: 20px; }
.iwm-help li { font-size: 13px; line-height: 1.85; color: var(--text-secondary); }
/* 表格在窄屏独立横向滚动，不再把整页撑出横向滚动条 */
.iwm-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: 10px; }
.iwm-help table { width: 100%; border-collapse: collapse; font-size: 12.5px; min-width: 420px; }
.iwm-help th, .iwm-help td {
    border: 1px solid var(--iwm-line); padding: 8px 10px; text-align: left;
    color: var(--text-secondary); vertical-align: top;
}
.iwm-help th { background: var(--iwm-sunken); color: var(--text-primary); font-weight: 700; white-space: nowrap; }

/* 说明区折叠：极简折叠按钮（默认展开） */
.iwm-help-head { margin-bottom: 0; }
.iwm-help-head .iwm-card-title { margin: 0; }
.iwm-fold {
    flex: 0 0 auto;
    width: 30px; height: 30px; padding: 0; margin: -3px -6px -3px 0;
    display: inline-flex; align-items: center; justify-content: center;
    border: 0; border-radius: 8px; background: transparent; cursor: pointer;
    color: var(--text-secondary);
    transition: color .15s, background .15s;
}
@media (hover: hover) { .iwm-fold:hover { color: var(--text-primary); background: color-mix(in srgb, var(--text-primary) 8%, transparent); } }
.iwm-fold:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.iwm-fold svg {
    width: 18px; height: 18px; fill: none; stroke: currentColor;
    stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round;
    transition: transform .2s ease;
}
.iwm-help.is-collapsed .iwm-fold svg { transform: rotate(-90deg); }
.iwm-help.is-collapsed .iwm-help-body { display: none; }

/* ===== 触摸设备：把可点区域放大到手指友好尺寸 ===== */
@media (pointer: coarse) {
    .iwm { --iwm-tap: 44px; }
    .iwm-btn, .iwm-btn-lg, .iwm-seg-btn, .iwm-chip, .iwm-pos, .iwm-swatch, .iwm-item-del { min-height: var(--iwm-tap); }
    .iwm-swatch, .iwm-item-del { width: var(--iwm-tap); }
    .iwm-swatch { height: var(--iwm-tap); }
    .iwm-input, .iwm-select { min-height: var(--iwm-tap); }
    .iwm-range { height: 34px; }
    .iwm-range::-webkit-slider-thumb { width: 24px; height: 24px; margin-top: -9.5px; }
    .iwm-range::-moz-range-thumb { width: 22px; height: 22px; }
    .iwm-check input { width: 18px; height: 18px; }
    /* 触摸端没有 hover，禁掉点按时的临时高亮，避免「点了没反应」的错觉 */
    .iwm-btn:active:not(:disabled) { transform: none; }
}

/* ===== 平板：768 ~ 1099px =====
   单栏但按「先看效果、再调参数、最后批量与说明」重排；
   display:contents 让四张卡片直接成为网格项，跨列顺序才可控。 */
@media (max-width: 1099px) {
    .iwm-page { grid-template-columns: minmax(0, 1fr); }
    .iwm-col { display: contents; }
    .iwm-card-prev { order: 1; }
    .iwm-card-set { order: 2; }
    .iwm-card-export { order: 3; }
    .iwm-card-list { order: 4; }
    .iwm-card-help { order: 5; }
    /* 平板竖屏宽度够：设置项排成两列，减少纵向滚动 */
    .iwm-card-set .iwm-grid { display: grid; gap: 14px 18px; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
    .iwm-card-set .iwm-sect-t,
    .iwm-card-set .iwm-group { grid-column: 1 / -1; }
    .iwm-card-set .iwm-group { display: contents; }
    .iwm-card-set .iwm-group > .iwm-sect-t { display: flex; }
    .iwm-pos-grid { max-width: none; }
}

/* ===== 手机：≤767px 单列纵向流 ===== */
@media (max-width: 767px) {
    .iwm-hero { align-items: flex-start; }
    .iwm-hero-ico { width: 40px; height: 40px; flex-basis: 40px; font-size: 21px; border-radius: 12px; }
    .iwm-title { font-size: 19px; }
    .iwm-sub { font-size: 12.5px; }
    .iwm-card { padding: 14px 13px; }
    .iwm-prev { height: clamp(190px, 34vh, 320px); }
    .iwm-card-set .iwm-grid { display: flex; }         /* 撤回平板的两列，字号行太长不好读 */
    .iwm-card-set .iwm-group { display: flex; }
    .iwm-list { grid-template-columns: minmax(0, 1fr); }
    /* 快捷文案改横向滑动：省掉 3~4 行竖向空间 */
    .iwm-chips {
        flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px;
        scrollbar-width: none; -webkit-overflow-scrolling: touch;
        scroll-snap-type: x proximity;
    }
    .iwm-chips::-webkit-scrollbar { display: none; }
    .iwm-chip { flex: 0 0 auto; scroll-snap-align: start; }
    /* 主操作独占整行，拇指更好点 */
    .iwm-actions .iwm-btn { flex: 1 1 100%; }
    .iwm-actions-export .iwm-btn { flex: 1 1 auto; }
    .iwm-actions-export .iwm-btn-sm { flex: 0 0 auto; }
    .iwm-seg-view { flex: 1 1 100%; }
    .iwm-input, .iwm-select, .iwm-textarea { font-size: 16px; }   /* 防 iOS 聚焦缩放 */
    .iwm-num { width: 96px; flex: 0 0 96px; }
    .iwm-help table { min-width: 360px; }
}

/* ===== 超窄屏：≤700px 进一步压缩（与站点 700px 分界对齐） ===== */
@media (max-width: 700px) {
    .iwm-card-head { gap: 8px; }
    .iwm-pos-grid { max-width: 100%; }
    .iwm-item { min-height: 52px; }
    .iwm-help h2 { font-size: 15px; }
}

/* ===== 无障碍：尊重「减少动态效果」偏好 ===== */
@media (prefers-reduced-motion: reduce) {
    .iwm *, .iwm *::before, .iwm *::after {
        transition-duration: .01ms !important; animation-duration: .01ms !important;
    }
}

/* [hidden] 兜底：保证被 JS 隐藏的区块在任何 display 声明下都不显示 */
.iwm [hidden] { display: none !important; }