/* Free visible watermark tool (/onlyfans-watermark-generator.html) */
.wm-tool { display: grid; gap: 1.5rem; }
@media (min-width: 900px) { .wm-tool { grid-template-columns: minmax(0, 320px) minmax(0, 1fr); align-items: start; } }
.wm-tool__form { display: grid; gap: 1rem; }
.wm-field { display: grid; gap: 0.35rem; }
.wm-field > label, .wm-field > .wm-label { font-weight: 600; color: var(--ink); }
.wm-field input[type="text"], .wm-field select, .wm-field input[type="file"] {
  width: 100%; min-height: 46px; padding: 0.55rem 0.8rem; border-radius: 12px;
  border: 1.5px solid var(--line-strong); background: var(--white); font: inherit; color: var(--ink);
}
.wm-field input[type="range"] { width: 100%; min-height: 32px; accent-color: #6d28d9; }
.wm-field input:focus-visible, .wm-field select:focus-visible { outline: 3px solid #6d28d9; outline-offset: 2px; }
.wm-hint { font-size: 0.9rem; color: var(--ink-soft); margin: 0; }
.wm-stage { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 0.75rem; min-height: 220px; display: grid; place-items: center; }
.wm-stage canvas { max-width: 100%; height: auto; border-radius: 8px; display: block; }
.wm-empty { color: var(--ink-soft); text-align: center; margin: 0; padding: 2rem 1rem; }
.wm-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 0.75rem; }
.wm-actions .btn:disabled { opacity: 0.55; cursor: not-allowed; }
@media (prefers-reduced-motion: reduce) { .wm-tool * { transition: none !important; } }