/* Scoped tool styles (imagetools.css); every rule is limited to .tools-page so it never touches the site chrome. */
.tools-page .img-tool{max-width:1000px;
    margin:0 auto;}
.tools-page .drop-zone{border:2px dashed var(--primary-border);
    background:var(--panel);
    border-radius:16px;
    padding:56px 24px;
    text-align:center;
    cursor:pointer;
    transition:border-color .2s,background .2s;}
.tools-page .drop-zone:hover,.tools-page .drop-zone.dragover{border-color:var(--primary);
    background:var(--primary-light);}
.tools-page .drop-zone .dz-icon{font-size:46px;}
.tools-page .drop-zone h3{margin:14px 0 6px;
    font-size:19px;
    color:var(--ink);}
.tools-page .drop-zone p{color:var(--slate);
    font-size:14px;}
.tools-page .img-workspace{margin-top:26px;}
.tools-page .tool-hint{background:var(--primary-light);
    border:1px solid var(--primary-soft);
    border-radius:12px;
    padding:12px 16px;
    margin-bottom:18px;
    font-size:13.5px;
    line-height:1.6;
    color:var(--ink-2);}
.tools-page .tool-hint strong{color:var(--primary-ink);}
.tools-page .tool-hint em{color:var(--primary-ink); font-style:normal; font-weight:600;}
.tools-page .img-controls{display:flex;
    flex-wrap:wrap;
    align-items:flex-end;
    gap:22px;
    background:#fff;
    border:1px solid var(--line);
    border-radius:16px;
    padding:22px 24px;
    margin-bottom:24px;}
.tools-page .img-field{display:flex;
    flex-direction:column;
    gap:7px;}
.tools-page .img-field label{font-size:13px;
    font-weight:600;
    color:var(--slate-dark);}
.tools-page .img-field input[type="number"],.tools-page .img-field select{width:130px;
    padding:11px 13px;
    border:1px solid var(--primary-soft);
    border-radius:10px;
    background:var(--panel);
    color:var(--ink);
    font-family:inherit;
    font-size:14px;
    font-weight:600;
    outline:none;
    transition:border-color .2s,box-shadow .2s;}
.tools-page .img-field input[type="number"]:focus,.tools-page .img-field select:focus{border-color:var(--primary);
    box-shadow:0 0 0 4px rgba(91,90,196,.08);}
.tools-page .img-field.check{flex-direction:row;
    align-items:center;
    gap:8px;}
.tools-page .img-field.check input{width:18px;height:18px;accent-color:var(--primary);cursor:pointer;}
.tools-page .range-field{min-width:220px;}
.tools-page .range-field input[type="range"]{width:100%; accent-color:var(--primary);}
.tools-page .range-field .range-val{font-weight:700; color:var(--primary);}
.tools-page .scale-group{display:flex; gap:10px;}
.tools-page .scale-btn{border:1px solid var(--primary-soft);
    background:#fff;
    color:var(--ink);
    padding:10px 18px;
    border-radius:10px;
    font-family:inherit;
    font-weight:600;
    font-size:14px;
    cursor:pointer;
    transition:background .2s,color .2s,border-color .2s;}
.tools-page .scale-btn:hover{background:var(--primary-light);}
.tools-page .scale-btn.active{background:var(--primary);
    border-color:transparent;
    color:#fff;}
.tools-page .img-action-btn{border:none;
    background:var(--primary);
    color:#fff;
    padding:13px 30px;
    border-radius:12px;
    font-size:15px;
    font-weight:700;
    cursor:pointer;
    box-shadow:0 8px 20px rgba(91,90,196,.25);
    transition:transform .2s,opacity .2s;}
.tools-page .img-action-btn:hover{transform:translateY(-2px);}
.tools-page .img-action-btn:disabled{opacity:.6; cursor:not-allowed; transform:none;}
.tools-page .img-panels{display:grid;
    grid-template-columns:1fr 1fr;
    gap:20px;
    margin-bottom:24px;}
.tools-page .img-panel{background:#fff;
    border:1px solid var(--line);
    border-radius:16px;
    padding:18px;
    text-align:center;}
.tools-page .img-panel h4{font-size:14px;
    color:var(--slate-dark);
    margin-bottom:12px;}
.tools-page .img-panel .img-holder{background:
        linear-gradient(45deg,var(--line) 25%,transparent 25%,transparent 75%,var(--line) 75%),
        linear-gradient(45deg,var(--line) 25%,#fff 25%,#fff 75%,var(--line) 75%);
    background-size:20px 20px;
    background-position:0 0,10px 10px;
    border-radius:10px;
    padding:10px;
    min-height:180px;
    display:flex;
    align-items:center;
    justify-content:center;
    overflow:hidden;}
.tools-page .img-panel .img-holder img,.tools-page .img-panel .img-holder canvas,.tools-page .img-panel .img-holder video{max-width:100%;
    max-height:340px;
    width:auto;
    height:auto;
    object-fit:contain;
    border-radius:6px;
    display:block;}
.tools-page .img-meta{margin-top:12px;
    font-size:13px;
    color:var(--slate);}
.tools-page .img-meta strong{color:var(--ink);}
.tools-page .img-actions{display:flex;
    flex-wrap:wrap;
    gap:12px;
    justify-content:center;}
.tools-page .mini-btn.ghost{background:#fff;}
@media(max-width:760px){.tools-page .img-panels{grid-template-columns:1fr;}
}