/* 
   watermark tool css
   dependency on /resources/global.css for all else
 */
.tool-hero {background-image:url('/resources/watermark.webp');}
.dropzone {border:2px dashed rgba(229,0,125,0.3);border-radius:2px;padding:44px 20px;text-align:center;cursor:pointer;transition:border-color .15s ease, background .15s ease;background:linear-gradient(180deg, rgba(229,0,125,0.03), transparent);}
.dropzone:hover, .dropzone.drag {border-color:var(--spot);background:rgba(229,0,125,0.05);}
.dropzone svg {width:38px;height:38px;margin-bottom:10px;color:var(--spot);}
.dropzone p {margin:0;font-weight:600;font-family:'Barlow',sans-serif;}
.dropzone .hint {color:var(--slate);font-size:13.5px;margin-top:6px;font-family:'Barlow',monospace;letter-spacing:0.02em;}
input[type=file] {font-family:'Barlow',sans-serif;font-size:13.5px;}
#dropzone input[type=file] {display:none;}
.workspace {display:none;}
.workspace.active {display:block;}
.preview-wrap {border:1px solid var(--line);border-radius:2px;background:linear-gradient(45deg, #e2e0d8 25%, transparent 25%, transparent 75%, #e2e0d8 75%), linear-gradient(45deg, #e2e0d8 25%, transparent 25%, transparent 75%, #e2e0d8 75%);background-size:16px 16px;background-position:0 0, 8px 8px;margin-bottom:24px;display:flex;justify-content:center;padding:12px;}
.preview-wrap canvas {max-width:100%;height:auto;display:block;}
.type-toggle {display:flex;gap:8px;margin-bottom:22px;}
.type-btn {flex:1;padding:10px;border:1px solid var(--line);border-radius:3px;background:var(--paper);font-family:'Barlow',monospace;font-size:12px;letter-spacing:0.06em;text-transform:uppercase;font-weight:600;color:var(--slate);cursor:pointer;transition:border-color .15s ease, background .15s ease, color .15s ease;}
.type-btn:hover {border-color:var(--spot);}
.type-btn.active {border-color:var(--spot);background:rgba(229,0,125,0.05);color:var(--spot-dark);}
.field-block {margin-bottom:22px;}
.field-block label {display:block;font-family:'Barlow',monospace;font-size:11px;letter-spacing:0.08em;text-transform:uppercase;color:var(--slate);margin-bottom:8px;}
.field-block input[type=text] {width:100%;border:1px solid var(--line);border-radius:2px;padding:11px 12px;font-family:'Barlow',sans-serif;font-size:14.5px;color:var(--ink);background:var(--paper);}
.field-block input[type=text]:focus {outline:none;border-color:var(--spot);}
.field-block input[type=color] {width:100%;height:42px;border:1px solid var(--line);border-radius:2px;padding:3px;cursor:pointer;background:var(--paper);}
.field-hint {font-family:'Barlow',monospace;font-size:11.5px;color:var(--slate);margin:8px 0 0;}
.anchor-grid {display:grid;grid-template-columns:repeat(3,1fr);gap:4px;width:132px;aspect-ratio:1;padding:6px;border:1px solid var(--line);border-radius:2px;background:var(--panel);}
.anchor-btn {border:1px solid transparent;border-radius:3px;background:rgba(23,24,28,0.06);cursor:pointer;position:relative;transition:background .15s ease, border-color .15s ease;}
.anchor-btn:hover {background:rgba(229,0,125,0.12);}
.anchor-btn.active {background:var(--spot);border-color:var(--spot-dark);}
.anchor-btn::after {content:'';position:absolute;top:50%;left:50%;width:6px;height:6px;border-radius:50%;background:var(--ink);transform:translate(-50%,-50%);opacity:0.3;}
.anchor-btn.active::after {background:#fff;opacity:1;}
.sliders-grid {display:grid;grid-template-columns:1fr 1fr;gap:18px 20px;margin:24px 0 4px;}
.slider-block label {display:flex;justify-content:space-between;font-size:12.5px;font-weight:600;font-family:'Barlow',monospace;margin-bottom:6px;color:var(--slate);}
.slider-block label span:last-child {color:var(--spot-dark);}
.slider-block input[type=range] {width:100%;-webkit-appearance:none;height:6px;border-radius:4px;background:var(--panel);outline:none;}
.slider-block input[type=range]::-webkit-slider-thumb {-webkit-appearance:none;width:18px;height:18px;border-radius:50%;background:var(--spot);border:3px solid #fff;box-shadow:0 0 0 1px var(--line);cursor:pointer;}
.actions {display:flex;gap:10px;flex-wrap:wrap;margin-top:28px;}
@media (max-width:480px) {.sliders-grid {grid-template-columns:1fr;}}

@media (max-width:860px) {.tool-hero {background-image:none;}}