/* ==========================================================================
   图片裁剪 /tools/image-cropper  ——  class 前缀 icr-
   三端断点沿用站点通用断点：手机 ≤700px · 平板 701~1099px · 桌面 ≥1100px
   （与 style.css 的 700 / 1100 分界一致，避免出现「站点换栏了、工具页没有」的错位）

   配色：颜色全部取自站点主题变量（深 / 浅色自动适配），这里只负责组织「层次与对比度」：
       页面底 --bg-primary  →  卡片 --bg-secondary  →  按钮 / 输入 / 信息块 --bg-primary（凹陷）
   描边统一用 --icr-line（在 --border-color 上混入 13% 前景色），
   浅色模式下 --border-color 过浅（#eff3f4 近白）也能看清控件边界。
   ========================================================================== */

.icr {
    --icr-gap: 16px;
    --icr-card-r: 14px;
    --icr-ctl-r: 10px;
    --icr-pad: clamp(14px, 1.5vw, 20px);
    --icr-line: color-mix(in srgb, var(--text-primary) 13%, var(--border-color));
    --icr-line-2: color-mix(in srgb, var(--text-primary) 26%, var(--border-color));
    --icr-tint: color-mix(in srgb, var(--accent) 12%, transparent);
    /* 主题未定义 --warning（站点变量表里没有），不兜底的话 color-mix 会因无效变量整条失效、
       「使用技巧」块会变成没有底色与描边；这里给出琥珀色回退，将来主题补上则自动跟随。 */
    --icr-warn: var(--warning, #f59e0b);

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

/* ===== 头部 ===== */
.icr-hero { display: flex; align-items: center; gap: 14px; }
.icr-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(--icr-tint);
    border: 1px solid color-mix(in srgb, var(--accent) 26%, transparent);
}
.icr-hero-txt { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.icr-title { margin: 0; font-size: 22px; font-weight: 800; color: var(--text-primary); letter-spacing: -.01em; }
.icr-sub {
    margin: 0; font-size: 13.5px; line-height: 1.7; color: var(--text-secondary);
    max-width: 78ch;                 /* 长句行宽上限，避免宽屏下一行到底难以阅读 */
}

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

/* ===== 提示条 ===== */
.icr-note {
    padding: 9px 13px; border-radius: 10px; font-size: 13px; font-weight: 600;
    border: 1px solid color-mix(in srgb, var(--accent) 34%, transparent);
    background: var(--icr-tint);
    color: var(--text-primary);
}
.icr-note[hidden] { display: none !important; }
.icr-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);
}

/* ===== 主体：桌面双栏 / 平板与手机单栏 ===== */
.icr-page {
    display: grid;
    gap: var(--icr-gap);
    align-items: start;
    grid-template-columns: minmax(0, 1fr);
    position: relative;
}
.icr-page.is-drag::after {
    content: "松开鼠标即可载入图片";
    position: absolute; inset: 0; z-index: 6; border-radius: 16px; 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(--icr-tint);
}
.icr-col { display: flex; flex-direction: column; gap: 14px; min-width: 0; }

@media (min-width: 1100px) {
    /* 侧栏宽度随视口在 330~380px 之间浮动：宽屏信息块不挤，窄屏画布不被压 */
    .icr-page { grid-template-columns: minmax(0, 1fr) clamp(330px, 24vw, 380px); }
}

/* ===== 卡片 ===== */
.icr-card {
    background: var(--bg-secondary); border: 1px solid var(--icr-line); border-radius: var(--icr-card-r);
    padding: var(--icr-pad); display: flex; flex-direction: column; gap: 12px; min-width: 0;
}
.icr-card-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.icr-card-title { margin: 0; font-size: 14.5px; font-weight: 800; color: var(--text-primary); flex: 1 1 auto; }
.icr-badge {
    font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 20px;
    background: var(--icr-tint); color: var(--accent);
}

/* ===== 极简折叠按钮（默认展开） ===== */
.icr-fold {
    width: 26px; height: 26px; flex: 0 0 auto; padding: 0; margin-left: auto;
    display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid var(--icr-line); background: var(--bg-primary); border-radius: 8px;
    color: var(--text-secondary); cursor: pointer;
    transition: color .15s, border-color .15s;
    -webkit-tap-highlight-color: transparent;
}
.icr-fold:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (hover: hover) {
    .icr-fold:hover { color: var(--accent); border-color: var(--accent); }
}
/* 两条边拼出的折角箭头：rotate(45deg) 朝下 = 展开，rotate(-45deg) 朝右 = 已折叠 */
.icr-fold-ico {
    width: 8px; height: 8px; margin-top: -2px;
    border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
    transition: transform .18s ease;
}
[data-fold].is-folded .icr-fold-ico { transform: rotate(-45deg); margin: 0 0 0 2px; }

/* 折叠后只留标题行：属性选择器统一作用于卡片 / 技巧块 / 说明区，无需额外包裹层 */
[data-fold].is-folded > *:not(.icr-card-head) { display: none !important; }
.icr-card.is-folded, .icr-tips.is-folded { padding-top: 10px; padding-bottom: 10px; }

/* ===== 上传区（凹陷工作面，与卡片形成层次差） ===== */
.icr-drop {
    min-height: clamp(210px, 34vh, 330px);
    border: 2px dashed var(--icr-line-2); border-radius: 16px;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
    text-align: center; padding: clamp(18px, 3vw, 32px) 18px; cursor: pointer;
    background: var(--bg-primary);
    transition: border-color .15s, background .15s;
}
.icr-drop[hidden] { display: none !important; }
.icr-drop-ico { font-size: clamp(32px, 5vw, 40px); line-height: 1; opacity: .7; }
.icr-drop-t { font-size: 15px; font-weight: 800; color: var(--text-primary); }
.icr-drop-s { font-size: 12.5px; color: var(--text-secondary); line-height: 1.7; max-width: 46ch; }
@media (hover: hover) {
    .icr-drop:hover { border-color: var(--accent); background: var(--icr-tint); }
}

/* ===== 画布舞台 ===== */
.icr-stage {
    position: relative; overflow: auto; border-radius: 12px; padding: 12px;
    border: 1px solid var(--icr-line);
    /* ★ 舞台是「固定高度的工作区」而不是 max-height：高度不随画布内容变化，
       JS 量到的 clientHeight 才是稳定值，适应比例不会被上一张画布 / 初始 300×150 的默认
       画布尺寸带偏（那会让首图被缩到极小，裁剪框跟着小得离谱）。
       高度随视口收敛：矮屏（笔记本 / 横屏手机）不被顶出屏幕，高屏能吃满空间。 */
    height: clamp(280px, calc(100vh - 300px), 720px);
    height: clamp(280px, calc(100dvh - 300px), 720px);   /* dvh：移动端浏览器工具栏收起时不跳动 */
    /* 预留滚动条位置：否则「画布变宽 → 出现滚动条 → clientWidth 变小 → 重新计算适应比例 → 画布再变」
       的循环会让拖动中的裁剪框忽大忽小、明显发涩 */
    scrollbar-gutter: stable;
    overscroll-behavior: contain;      /* 在画布里划到头时不要把整页一起带走 */
    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: flex-start; justify-content: flex-start;
}
.icr-stage[hidden] { display: none !important; }
/* 图片比舞台小时居中；用 margin:auto 而非 justify-content:center —— 后者在可滚动容器里
   会把内容溢出到左侧且滚不到（经典 flex 居中陷阱），auto 外边距在负剩余空间时自动归零。 */
.icr-wrap { position: relative; flex: 0 0 auto; margin: auto; }
.icr-canvas { display: block; max-width: none; border-radius: 3px; }
.icr-canvas[hidden] { display: none !important; }

/* ===== 全屏显示裁剪画布 ===== */
/* 进入全屏后，舞台铺满整个屏幕（覆盖固定高度工作区），并重算适应比例（见 render()）。
   双写标准与 -webkit- 前缀以兼容 Safari / 旧 Chromium。 */
.icr-stage:fullscreen,
.icr-stage:-webkit-full-screen,
.icr-stage:-ms-fullscreen {
    width: 100vw; height: 100vh; max-height: none; min-height: 0;
    padding: 28px; margin: 0; border: 0; border-radius: 0;
    display: flex; align-items: center; justify-content: center;
    background-color: var(--bg-primary);
}
.icr-stage:-webkit-full-screen { width: 100%; height: 100%; }   /* 旧 WebKit 用 100% 而非 vw/vh */
/* 全屏时放大拖拽手柄与参考线，便于在大幅面上精确操作（桌面端） */
@media (hover: hover) and (min-width: 820px) {
    .icr-stage:fullscreen .icr-h, .icr-stage:-webkit-full-screen .icr-h { width: 16px; height: 16px; }
    .icr-stage:fullscreen .icr-box, .icr-stage:-webkit-full-screen .icr-box { border-width: 3px; }
}
/* 浮在画布右上角的「退出全屏」按钮：平时隐藏，仅全屏态可见（舞台被全屏后卡片标题栏已不在视野内） */
.icr-full-exit {
    display: none; position: absolute; top: 16px; right: 16px; z-index: 5;
    width: 40px; height: 40px; align-items: center; justify-content: center;
    border: 1px solid var(--icr-line); background: color-mix(in srgb, var(--bg-secondary) 80%, transparent);
    backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
    border-radius: 10px; color: var(--text-secondary); font-size: 18px; line-height: 1;
    cursor: pointer; -webkit-tap-highlight-color: transparent; transition: color .15s, border-color .15s;
}
.icr-full-exit:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (hover: hover) {
    .icr-full-exit:hover { color: var(--accent); border-color: var(--accent); }
}
.icr-stage:fullscreen .icr-full-exit,
.icr-stage:-webkit-full-screen .icr-full-exit,
.icr-stage:-ms-fullscreen .icr-full-exit { display: inline-flex; }

/* ===== 裁剪框 ===== */
.icr-box {
    position: absolute; cursor: move; box-sizing: border-box;
    left: 0; top: 0;              /* 基准锚点固定在舞台原点，实际位移交给 transform，避免 left/top 触发 layout */
    border: 2px solid rgba(255, 255, 255, .92);
    /* 遮罩阴影：范围只覆盖可见舞台（JS 会按舞台尺寸再收敛），不再用 9999px —— 后者的合成纹理会
       超出浏览器层上限被降级，移动时反而整片重绘，正是拖动发涩/不平滑的根因 */
    box-shadow: 0 0 0 2048px rgba(0, 0, 0, .6);
    will-change: transform;       /* 提升为合成层：拖动时只改 transform，由 GPU 平移（含阴影）不触发重绘 */
    transition: border-color .15s;
    touch-action: none;            /* ★ 触屏拖裁剪框时不要滚动页面 */
}
.icr-box[hidden] { display: none !important; }
.icr-box.is-round { border-radius: 999px; }
.icr-grid { position: absolute; inset: 0; pointer-events: none; opacity: .5; }
.icr-grid[hidden] { display: none !important; }
.icr-grid::before, .icr-grid::after {
    content: ""; position: absolute; background: rgba(255, 255, 255, .85);
}
.icr-grid::before { left: 33.333%; right: 33.333%; top: 0; bottom: 0; border-left: 1px solid rgba(255, 255, 255, .85); border-right: 1px solid rgba(255, 255, 255, .85); background: transparent; }
.icr-grid::after { top: 33.333%; bottom: 33.333%; left: 0; right: 0; border-top: 1px solid rgba(255, 255, 255, .85); border-bottom: 1px solid rgba(255, 255, 255, .85); background: transparent; }

.icr-h { position: absolute; z-index: 3; background: transparent; touch-action: none; }
.icr-h[data-h="nw"] { top: -2px; left: -2px; width: 22px; height: 22px; border-top: 4px solid #fff; border-left: 4px solid #fff; cursor: nwse-resize; }
.icr-h[data-h="ne"] { top: -2px; right: -2px; width: 22px; height: 22px; border-top: 4px solid #fff; border-right: 4px solid #fff; cursor: nesw-resize; }
.icr-h[data-h="sw"] { bottom: -2px; left: -2px; width: 22px; height: 22px; border-bottom: 4px solid #fff; border-left: 4px solid #fff; cursor: nesw-resize; }
.icr-h[data-h="se"] { bottom: -2px; right: -2px; width: 22px; height: 22px; border-bottom: 4px solid #fff; border-right: 4px solid #fff; cursor: nwse-resize; }
.icr-h[data-h="n"] { top: -5px; left: 50%; transform: translateX(-50%); width: 34px; height: 8px; border-radius: 6px; background: #fff; border: 1px solid var(--accent); cursor: ns-resize; }
.icr-h[data-h="s"] { bottom: -5px; left: 50%; transform: translateX(-50%); width: 34px; height: 8px; border-radius: 6px; background: #fff; border: 1px solid var(--accent); cursor: ns-resize; }
.icr-h[data-h="w"] { left: -5px; top: 50%; transform: translateY(-50%); width: 8px; height: 34px; border-radius: 6px; background: #fff; border: 1px solid var(--accent); cursor: ew-resize; }
.icr-h[data-h="e"] { right: -5px; top: 50%; transform: translateY(-50%); width: 8px; height: 34px; border-radius: 6px; background: #fff; border: 1px solid var(--accent); cursor: ew-resize; }
body.icr-dragging { user-select: none; }

/* ===== 工具条 ===== */
.icr-bar { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.icr-bar-sep { width: 1px; align-self: stretch; background: var(--icr-line); margin: 0 2px; }
/* 缩放组（− 100% ＋）始终作为一个整体，不会被换行拆散 */
.icr-zoom { display: flex; align-items: center; gap: 6px; }

/* ===== 通用控件 ===== */
.icr-btn {
    padding: 7px 12px; font-size: 13px; font-weight: 600; font-family: inherit;
    border-radius: var(--icr-ctl-r); min-height: 36px; white-space: nowrap;
    border: 1px solid var(--icr-line); background: var(--bg-primary); color: var(--text-primary);
    cursor: pointer; transition: border-color .15s, color .15s, background .15s, filter .15s;
    -webkit-tap-highlight-color: transparent;
}
@media (hover: hover) {
    .icr-btn:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }
}
.icr-btn:active:not(:disabled) { transform: translateY(1px); }
.icr-btn:disabled { opacity: .42; cursor: not-allowed; }
.icr-btn-go { background: var(--accent); border-color: var(--accent); color: #fff; flex: 1 1 auto; }
.icr-btn-go:hover:not(:disabled) { color: #fff; filter: brightness(1.08); }
.icr-btn-danger { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 45%, transparent); }
.icr-btn-danger:hover:not(:disabled) { border-color: var(--danger); color: var(--danger); }
.icr-btn-lg { min-height: 44px; padding: 10px 22px; font-size: 14px; }

/* 键盘可达性：统一的焦点环 */
.icr-btn:focus-visible, .icr-chip:focus-visible,
.icr-input:focus-visible, .icr-select:focus-visible, .icr-range:focus-visible {
    outline: 2px solid var(--accent); outline-offset: 2px;
}

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

.icr-grid-form { display: grid; gap: 8px; grid-template-columns: repeat(auto-fit, minmax(132px, 1fr)); }
.icr-field { display: flex; align-items: center; gap: 6px; min-width: 0; }
.icr-field span { font-size: 12px; color: var(--text-secondary); flex: 0 0 auto; }
.icr-row { display: flex; flex-direction: column; gap: 6px; }
.icr-row[hidden] { display: none !important; }
.icr-row.is-off { opacity: .5; }
/* 桌面端「标签 + 控件」同行，压缩纵向高度 */
.icr-row.is-inline { flex-direction: row; align-items: center; justify-content: space-between; gap: 10px; }
.icr-row.is-inline .icr-select { width: auto; min-width: 172px; flex: 0 1 auto; }
.icr-label { font-size: 12.5px; font-weight: 700; color: var(--text-primary); display: flex; align-items: center; gap: 8px; }
.icr-val { font-size: 12px; font-weight: 600; color: var(--text-secondary); font-variant-numeric: tabular-nums; }
.icr-hint { font-size: 12.5px; color: var(--text-secondary); line-height: 1.75; }
.icr-hint b { color: var(--text-primary); }

.icr-range { flex: 1 1 auto; min-width: 0; accent-color: var(--accent); }

/* 信息块 */
.icr-stats { display: grid; gap: 8px; grid-template-columns: repeat(auto-fit, minmax(112px, 1fr)); }
.icr-stat {
    padding: 8px 10px; border-radius: 10px; border: 1px solid var(--icr-line); background: var(--bg-primary);
    min-width: 0;
}
.icr-stat-k { font-size: 11px; color: var(--text-secondary); font-weight: 700; }
.icr-stat-v {
    font-size: 13px; font-weight: 800; color: var(--text-primary); font-variant-numeric: tabular-nums;
    overflow-wrap: anywhere;
}
.icr-stat-wide {
    grid-column: 1 / -1;
    background: var(--icr-tint);
    border-color: color-mix(in srgb, var(--accent) 30%, transparent);
}

/* 比例面板 */
.icr-ratios { display: flex; flex-direction: column; gap: 12px; }   /* 分组之间要留白，否则四组糊在一起 */
.icr-ratio-grp { display: flex; flex-direction: column; gap: 6px; }
.icr-ratio-title { margin: 0; font-size: 11px; font-weight: 800; color: var(--text-secondary); letter-spacing: .04em; }
.icr-ratio-row { display: grid; gap: 6px; grid-template-columns: repeat(auto-fit, minmax(92px, 1fr)); }
.icr-chip {
    padding: 7px 8px; font-size: 12px; font-family: inherit; font-weight: 600; border-radius: 9px; cursor: pointer;
    border: 1px solid var(--icr-line); background: var(--bg-primary); color: var(--text-secondary);
    text-align: center; transition: border-color .15s, color .15s, background .15s;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-height: 34px;
    -webkit-tap-highlight-color: transparent;
}
@media (hover: hover) {
    .icr-chip:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }
}
.icr-chip.is-on { border-color: var(--accent); background: var(--icr-tint); color: var(--accent); }
.icr-chip:disabled { opacity: .42; cursor: not-allowed; }

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

.icr-tips {
    padding: 12px 14px; border-radius: var(--icr-card-r); font-size: 12.5px; line-height: 1.8; color: var(--text-secondary);
    background: color-mix(in srgb, var(--icr-warn) 10%, transparent);
    border: 1px solid color-mix(in srgb, var(--icr-warn) 30%, transparent);
    /* 与卡片同构：标题行 + 内容纵向排列，才能复用统一的折叠规则 */
    display: flex; flex-direction: column; gap: 8px; min-width: 0;
}
.icr-tips ul { margin: 0; padding-left: 18px; }

/* ===== 说明区 ===== */
.icr-help { max-width: 92ch; }   /* 长文本限制行宽，宽屏不会拉成一条 */
.icr-help > h2 { font-size: 15.5px; margin: 0 0 8px; color: var(--text-primary); }
.icr-help h3 { font-size: 14px; margin: 14px 0 6px; color: var(--text-primary); }
.icr-help p { margin: 0 0 8px; font-size: 13px; line-height: 1.85; color: var(--text-secondary); }
.icr-help ul { margin: 0 0 8px; padding-left: 20px; }
.icr-help li { font-size: 13px; line-height: 1.85; color: var(--text-secondary); }
.icr-help table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.icr-help th, .icr-help td { border: 1px solid var(--icr-line); padding: 6px 9px; text-align: left; color: var(--text-secondary); vertical-align: top; }
.icr-help th { background: var(--bg-secondary); color: var(--text-primary); font-weight: 700; }

/* ==========================================================================
   响应式
   ========================================================================== */

/* ---------- 平板（701~1099px）：单栏，但把右侧卡片排成两列，避免长条留白 ---------- */
@media (min-width: 820px) and (max-width: 1099px) {
    .icr-col-side { display: grid; grid-template-columns: 1fr 1fr; gap: var(--icr-gap); align-items: start; }
    .icr-col-side > .icr-tips { grid-column: 1 / -1; }
    .icr-stage { height: clamp(320px, 58vh, 620px); height: clamp(320px, 58dvh, 620px); }
}

/* ---------- 手机（≤700px，与站点移动端断点一致） ---------- */
@media (max-width: 700px) {
    .icr { --icr-gap: 12px; padding: 14px 12px max(28px, env(safe-area-inset-bottom)); }
    .icr-hero { gap: 10px; }
    .icr-hero-ico { width: 40px; height: 40px; flex-basis: 40px; font-size: 21px; border-radius: 12px; }
    .icr-title { font-size: 19px; }
    .icr-sub {
        font-size: 13px;
        /* 副标题最多 3 行：手机上不占掉半屏，画布能更早进入视野 */
        display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
    }

    .icr-card { padding: 13px 12px; border-radius: 12px; }

    .icr-drop { min-height: clamp(180px, 30vh, 260px); }
    .icr-drop-s { font-size: 12px; }

    /* 舞台按可视高度自适应：横竖屏切换、地址栏收起都不会把画布顶出屏幕 */
    /* 内边距保持 12px：JS 里把舞台左右内边距按 24 扣除去算适应比例，移动端若改成 8px 会算偏 */
    .icr-stage { height: clamp(220px, 48dvh, 460px); }

    /* 工具条改成等分网格：手指点得到，也不会因换行挤成一团 */
    .icr-bar { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
    .icr-bar-sep { display: none; }
    .icr-bar-box { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .icr-bar-act { grid-template-columns: 2fr 1fr; }
    .icr-zoom { grid-column: 1 / -1; justify-content: space-between; }
    .icr-btn { min-height: 44px; padding: 8px 10px; }
    .icr-btn-lg { min-height: 48px; }

    /* 触屏手指更粗，放大手柄的点击热区 */
    .icr-h[data-h="nw"], .icr-h[data-h="ne"], .icr-h[data-h="sw"], .icr-h[data-h="se"] { width: 32px; height: 32px; }
    .icr-h[data-h="n"], .icr-h[data-h="s"] { width: 48px; height: 12px; }
    .icr-h[data-h="w"], .icr-h[data-h="e"] { width: 12px; height: 48px; }

    .icr-row.is-inline { flex-direction: column; align-items: stretch; }
    .icr-row.is-inline .icr-select { width: 100%; }
    .icr-input, .icr-select { font-size: 16px; min-height: 44px; }   /* 16px 防 iOS 聚焦时整页缩放 */
    .icr-chip { min-height: 40px; font-size: 12.5px; }
    .icr-stat-v { font-size: 14px; }
    .icr-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }

    /* 窄屏：说明表格改为「一行为一张小卡」，不再横向溢出 */
    .icr-help table, .icr-help tbody, .icr-help tr, .icr-help td { display: block; width: auto; }
    .icr-help thead { display: none; }
    .icr-help table { border: 0; }
    .icr-help tr {
        border: 1px solid var(--icr-line); border-radius: 10px; padding: 8px 10px; margin: 0 0 8px;
    }
    .icr-help td { border: 0; padding: 2px 0; }
    .icr-help td:first-child { font-weight: 800; color: var(--text-primary); }
}

/* ---------- 超小屏（≤380px）：进一步压缩横向占用 ---------- */
@media (max-width: 380px) {
    .icr-title { font-size: 18px; }
    .icr-grid-form { grid-template-columns: 1fr 1fr; }
    /* 窄屏：操作区仍是 2 列（纵向堆叠太占屏），仅「裁剪框 / 导出」两处改成单列或 2 列 */
    .icr-bar-box { grid-template-columns: 1fr 1fr; }
    .icr-bar-act { grid-template-columns: 1fr; }
    .icr-stats { grid-template-columns: 1fr 1fr; }
}

/* ---------- 无障碍：尊重系统的「减少动态效果」 ---------- */
@media (prefers-reduced-motion: reduce) {
    .icr * { transition: none !important; animation: none !important; }
}