/* 
   image file size tool css
   dependency on /resources/global.css for all else
 */
.tool-hero {background-image:url('/resources/sizing.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] {display:none;}
.workspace {display:none;}
.workspace.active {display:block;}
.previews {display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:24px 0;}
.preview-box {border:1px solid var(--line);border-radius:2px;overflow:hidden;background:var(--panel);}
.preview-box img {width:100%;height:160px;object-fit:cover;display:block;}
.preview-label {display:flex;justify-content:space-between;align-items:baseline;padding:10px 12px;font-family:'Barlow',monospace;font-size:12px;}
.preview-label .tag {color:var(--slate);text-transform:uppercase;letter-spacing:0.08em;}
.preview-label .size {font-weight:700;}
.size.original {color:var(--ink);}
.size.new {color:var(--spot-dark);}
.meter {height:14px;border-radius:8px;background:var(--panel);overflow:hidden;position:relative;border:1px solid var(--line);}
.meter-fill {height:100%;background:linear-gradient(90deg, var(--spot), var(--spot-dark));width:100%;transition:width .5s cubic-bezier(.4,0,.2,1);}
.savings-row {display:flex;justify-content:space-between;align-items:center;margin-top:10px;}
.savings-num {font-family:'Fraunces',serif;font-weight:500;font-size:26px;}
.savings-num .pct {color:var(--spot-dark);}
.savings-note {color:var(--slate);font-size:13px;font-family:'Barlow',monospace;}
.controls {margin-top:26px;display:flex;flex-direction:column;gap:8px;}
.controls label {display:flex;justify-content:space-between;font-size:13px;font-weight:600;font-family:'Barlow',monospace;}
.controls label span:last-child {color:var(--spot-dark);}
input[type=range] {-webkit-appearance:none;width:100%;height:6px;border-radius:4px;background:var(--panel);outline:none;}
input[type=range]::-webkit-slider-thumb {-webkit-appearance:none;width:20px;height:20px;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;margin-top:24px;flex-wrap:wrap;}
@media (max-width:480px) {.previews {grid-template-columns:1fr;}}
@media (max-width:860px) {.tool-hero {background-image:none;}}