/* Image tools */
.im-layout { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.im-drop { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 28px 16px; border: 2px dashed var(--line);
  border-radius: var(--radius); text-align: center; cursor: pointer; }
.im-drop.over, .im-drop:hover { border-color: var(--accent); background: var(--accent-soft); }
.im-drop small { color: var(--muted); }
.im-drop-ico .icon { width: 32px; height: 32px; color: var(--accent); }
.im-list { display: flex; flex-direction: column; gap: 6px; margin-top: 12px; }
.im-item { display: flex; align-items: center; gap: 10px; padding: 6px; border: 1px solid var(--line); border-radius: var(--radius-sm); }
.im-item img { width: 52px; height: 52px; object-fit: cover; border-radius: 6px; flex: none; }
.im-item span { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.im-item b { font-weight: 500; font-size: .88rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.im-item small { color: var(--muted); font-size: .8rem; }
.im-preview-wrap { margin-top: 12px; padding: 8px; border-radius: var(--radius-sm); background: repeating-conic-gradient(var(--line) 0 25%, transparent 0 50%) 0 0 / 16px 16px; }
.im-preview-wrap canvas { display: block; max-width: 100%; height: auto; margin: 0 auto; }
.im-opts input[type=color] { width: 100%; height: 38px; padding: 2px; }
.im-opts input[type=range] { width: 100%; }
.im-out { display: flex; flex-direction: column; gap: 6px; margin-top: 12px; }
.im-res { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 10px; border-radius: var(--radius-sm);
  background: var(--ok-soft); font-size: .85rem; }
.im-res .bad { color: var(--bad); }
.im-msg { margin: 10px 0 0; padding: 10px 12px; border-radius: var(--radius-sm); background: var(--info-soft); }
.im-msg.bad { background: var(--bad-soft); color: var(--bad); }
/* editor pages (imagex.js) */
.im-item.on { border-color: var(--accent); background: var(--accent-soft); }
.im-item[data-pick] { cursor: pointer; }
.ix-stage { position: relative; margin-top: 12px; padding: 8px; border-radius: var(--radius-sm); line-height: 0;
  background: repeating-conic-gradient(var(--line) 0 25%, transparent 0 50%) 0 0 / 16px 16px; }
.ix-stage canvas#ix-canvas { display: block; max-width: 100%; max-height: 70vh; height: auto; width: auto; margin: 0 auto; }
.ix-crop { position: absolute; margin: 8px; box-shadow: 0 0 0 9999px rgb(0 0 0 / .45); outline: 2px solid #fff; cursor: move; touch-action: none; }
.ix-stage:has(.ix-crop) { overflow: hidden; }
.ix-stage:has(.ix-crop) canvas#ix-canvas { margin: 0; }
.ix-crop i { position: absolute; width: 16px; height: 16px; background: #fff; border: 2px solid var(--accent); border-radius: 50%; }
.ix-crop i[data-h=nw] { left: -8px; top: -8px; cursor: nwse-resize; } .ix-crop i[data-h=ne] { right: -8px; top: -8px; cursor: nesw-resize; }
.ix-crop i[data-h=sw] { left: -8px; bottom: -8px; cursor: nesw-resize; } .ix-crop i[data-h=se] { right: -8px; bottom: -8px; cursor: nwse-resize; }
.ix-btns { gap: 6px; margin-bottom: 10px; }
.ix-loupe { position: absolute; width: 120px; height: 120px; border-radius: 50%; border: 3px solid #fff; box-shadow: 0 4px 16px rgb(0 0 0 / .35); pointer-events: none; }
.ix-chip { display: inline-block; width: 30px; height: 30px; border-radius: 8px; border: 1px solid var(--line); }
.ix-picked, .ix-palette { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6px; }
.ix-sw { display: flex; align-items: center; gap: 8px; padding: 6px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); color: var(--text); text-align: left; cursor: pointer; font: inherit; }
.ix-sw:hover { border-color: var(--accent); }
.ix-sw i { width: 32px; height: 32px; border-radius: 6px; flex: none; border: 1px solid var(--line); }
.ix-sw span { display: flex; flex-direction: column; min-width: 0; font-size: .82rem; }
.ix-sw small { color: var(--muted); font-size: .72rem; }
.ix-h { font-size: .95rem; margin: 14px 0 8px; }
.ix-favprev { display: flex; flex-direction: column; gap: 12px; margin: 12px 0; }
.ix-favprev figure { margin: 0; text-align: center; font-size: .72rem; color: var(--muted); }
.ix-favprev img { display: block; border-radius: 6px; image-rendering: auto; }
.ix-tab { display: flex; align-items: center; gap: 8px; max-width: 220px; padding: 8px 12px; border-radius: 10px 10px 0 0; background: var(--surface-2); border: 1px solid var(--line); font-size: .8rem; }
.ix-code { margin: 0; padding: 10px; border-radius: var(--radius-sm); background: var(--surface-2); font: .78rem/1.5 ui-monospace, Consolas, monospace; white-space: pre-wrap; word-break: break-all; }
@media (max-width: 820px) { .im-layout { grid-template-columns: minmax(0, 1fr); } }