/* 图片水印 image-watermark 专用样式 */
.wm-fields { margin: 12px 0; }
.wm-fields .field { margin: 12px 0; }
.wm-fields .field > label { display: block; font-size: 13px; color: var(--text-secondary, #5b6675); margin-bottom: 8px; }
.wm-fields .field-row { display: flex; flex-wrap: wrap; gap: 20px; align-items: flex-end; margin: 14px 0; }

/* 九宫格位置选择 */
.pos-grid {
    display: grid; grid-template-columns: repeat(3, 30px); grid-template-rows: repeat(3, 30px);
    gap: 4px; width: max-content;
}
.pos-grid button {
    border: 1px solid var(--border-color, #e3e8ee); background: var(--bg-body, #fff);
    border-radius: 6px; cursor: pointer; padding: 0; transition: .12s;
}
.pos-grid button:hover { border-color: var(--primary, #ff6b00); }
.pos-grid button.on { background: var(--primary, #ff6b00); border-color: var(--primary, #ff6b00); }

.preview-area { margin: 14px 0; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.canvas-box { position: relative; display: inline-block; line-height: 0; }
.preview-canvas { display: block; max-width: 100%; height: auto; }

/* 选区框 */
.sel-box {
    position: absolute; border: 1.5px dashed #fff;
    box-shadow: 0 0 0 1px rgba(0,0,0,.5); background: rgba(255,107,0,.12);
    box-sizing: border-box; pointer-events: none;
}
.sel-box.hidden { display: none; }

.btn-row { display: flex; gap: 10px; flex-wrap: wrap; margin: 14px 0; }
.hidden { display: none !important; }

@media (max-width: 600px) {
    .wm-fields .field-row { gap: 14px; }
}