/* PDF watermark editor. Page and editor layout live in tool.css. */
.for-text,.for-image{display:flex;flex-direction:column;gap:18px}
.field input[name=pages]{font:400 14px var(--mono)}


/* Font picker */
.font-row{display:flex;gap:8px;align-items:stretch}
.font-row select{flex:1;min-width:0}
.toggles{display:flex;gap:4px}
.toggles label{position:relative}
.toggles input{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
.toggles span{
  display:flex;align-items:center;justify-content:center;width:40px;height:100%;min-height:40px;
  border:1px solid var(--line);border-radius:10px;background:rgba(8,10,18,.4);
  font-family:Georgia,serif;font-size:16px;color:var(--muted);cursor:pointer;
}
.toggles input:checked + span{background:rgba(168,85,247,.22);color:var(--fg);border-color:rgba(168,85,247,.55)}
.toggles input:focus-visible + span{outline:2px solid var(--cyan);outline-offset:2px}
.toggles input:disabled + span{opacity:.35;cursor:default}

.pos-grid input,.image-pick input{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
.seg-hint{grid-column:1/-1;margin:8px 0 0}
.remember{margin:0;font-size:13px;color:var(--faint);line-height:1.6}
.remember .link-btn{font-size:13px;text-decoration:underline;text-underline-offset:3px}

.image-pick{display:flex;align-items:center;gap:12px;min-width:0}
.btn-sm{padding:9px 14px;font-size:14px;cursor:pointer;position:relative}
.btn-sm:focus-within{outline:2px solid var(--cyan);outline-offset:3px}
.image-name{font-size:13px;color:var(--faint);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}

.chips{display:flex;gap:6px;flex-wrap:wrap}
.chips button{
  padding:5px 10px;border-radius:999px;
  border:1px solid var(--line);background:rgba(8,10,18,.4);
  font:600 12px var(--mono);color:var(--muted);
}
.chips button:hover{color:var(--fg);border-color:rgba(255,255,255,.2)}
.chips button.on{color:var(--fg);border-color:rgba(168,85,247,.55);background:rgba(168,85,247,.18)}
.chips button:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}

/* 3x3 position picker */
.pos-row{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.pos-grid{
  display:grid;grid-template-columns:repeat(3,28px);gap:4px;
  padding:6px;border-radius:10px;border:1px solid var(--line);background:rgba(8,10,18,.4);
  transition:opacity .2s ease;
}
.pos-grid label{position:relative;display:flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:6px;cursor:pointer}
.pos-grid label:hover{background:rgba(255,255,255,.06)}
.pos-grid i{width:8px;height:8px;border-radius:50%;background:var(--faint);transition:transform .15s ease,background .2s ease}
.pos-grid input:checked + i{background:var(--grad);transform:scale(1.5)}
.pos-grid input:focus-visible + i{outline:2px solid var(--cyan);outline-offset:4px}
.pos-grid.off{opacity:.35}
.check{display:flex;align-items:center;gap:8px;font-size:14px;color:var(--muted);cursor:pointer}
.check input{width:16px;height:16px;accent-color:var(--violet);margin:0}

.settings .actions{margin-top:2px}