/* ── SIO Frontend Tools — Shared Styles ────────────────────────────────── */
.sio-tool-wrap {
    --t-primary: #2563eb;
    --t-bg:      #f8fafc;
    --t-card:    #ffffff;
    --t-border:  #e2e8f0;
    --t-text:    #1e293b;
    --t-muted:   #64748b;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    color: var(--t-text);
}
.sio-tool-title { font-size: 20px; font-weight: 700; margin: 0 0 16px; }

/* Drop zone */
.sio-tool-dropzone {
    border: 2px dashed var(--t-border);
    border-radius: 14px;
    background: var(--t-bg);
    min-height: 200px;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; transition: all .2s;
}
.sio-tool-dropzone:hover, .sio-tool-dropzone.drag-over {
    border-color: var(--t-primary); background: #eff6ff;
}
.sio-drop-inner { text-align: center; padding: 30px; }
.sio-drop-icon  { font-size: 40px; margin-bottom: 10px; }
.sio-drop-inner p { margin: 0; font-size: 15px; color: var(--t-muted); }
.sio-link { color: var(--t-primary); cursor: pointer; font-weight: 600; }

/* Buttons */
.sio-btn { display:inline-flex;align-items:center;gap:6px;padding:10px 18px;border:none;border-radius:10px;font-size:14px;font-weight:600;cursor:pointer;text-decoration:none;transition:all .15s; }
.sio-btn-primary { background:var(--t-primary);color:#fff; }
.sio-btn-primary:hover { filter:brightness(1.1);color:#fff; }
.sio-btn-primary:disabled { opacity:.5;cursor:not-allowed; }
.sio-btn-outline { background:transparent;color:var(--t-primary);border:2px solid var(--t-primary); }
.sio-btn-outline:hover { background:#eff6ff; }
.sio-btn-sm { padding:6px 14px;font-size:12px;background:var(--t-primary);color:#fff; }
.sio-btn-reset-all { background:none;border:1px solid var(--t-border);border-radius:6px;padding:5px 12px;font-size:12px;cursor:pointer;color:var(--t-muted);margin-top:8px; }
.sio-tool-actions { display:flex;gap:8px;margin-top:14px;flex-wrap:wrap; }

/* Input */
.sio-input { padding:8px 12px;border:1px solid var(--t-border);border-radius:8px;font-size:14px;background:var(--t-bg);color:var(--t-text);outline:none;transition:border-color .15s; }
.sio-input:focus { border-color:var(--t-primary); }

/* ── Cropper ────────────────────────────────────────────────────────────── */
.sio-ratio-bar { display:flex;gap:6px;margin-bottom:12px;flex-wrap:wrap; }
.sio-ratio-btn { padding:5px 12px;border:1px solid var(--t-border);border-radius:6px;background:var(--t-bg);font-size:12px;font-weight:600;cursor:pointer;color:var(--t-muted);transition:all .15s; }
.sio-ratio-btn:hover,.sio-ratio-btn.active { border-color:var(--t-primary);background:#eff6ff;color:var(--t-primary); }
.sio-crop-canvas-wrap { position:relative;display:inline-block;max-width:100%;cursor:crosshair; }
.sio-crop-canvas-wrap canvas { display:block;max-width:100%; }
.sio-crop-box { position:absolute;border:2px solid #fff;box-shadow:0 0 0 9999px rgba(0,0,0,.4);cursor:move;box-sizing:border-box; }
.sio-crop-overlay { position:absolute;inset:0; }
.sio-crop-handle { position:absolute;width:10px;height:10px;background:#fff;border-radius:2px; }
.sio-crop-handle.nw { top:-5px;left:-5px;cursor:nw-resize; }
.sio-crop-handle.ne { top:-5px;right:-5px;cursor:ne-resize; }
.sio-crop-handle.sw { bottom:-5px;left:-5px;cursor:sw-resize; }
.sio-crop-handle.se { bottom:-5px;right:-5px;cursor:se-resize; }

/* ── Filters ────────────────────────────────────────────────────────────── */
.sio-filters-layout { display:grid;grid-template-columns:1fr 280px;gap:16px;align-items:start; }
@media(max-width:680px){.sio-filters-layout{grid-template-columns:1fr;}}
.sio-filters-preview canvas { display:block;max-width:100%;border-radius:10px; }
.sio-filters-panel { background:var(--t-card);border:1px solid var(--t-border);border-radius:12px;padding:16px; }
.sio-panel-label { font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--t-muted);margin-bottom:8px; }
.sio-presets-grid { display:flex;flex-wrap:wrap;gap:5px;margin-bottom:16px; }
.sio-preset-btn { padding:5px 10px;border:1px solid var(--t-border);border-radius:6px;background:var(--t-bg);font-size:12px;cursor:pointer;transition:all .15s;color:var(--t-muted); }
.sio-preset-btn:hover,.sio-preset-btn.active { border-color:var(--t-primary);background:#eff6ff;color:var(--t-primary); }
.sio-slider-row { display:flex;align-items:center;gap:8px;margin-bottom:8px; }
.sio-slider-row span:first-child { width:80px;font-size:12px;flex-shrink:0;color:var(--t-muted); }
.sio-slider-row input[type=range] { flex:1;accent-color:var(--t-primary); }
.sio-flt-val { width:28px;text-align:right;font-size:12px;font-weight:600;color:var(--t-primary); }

/* ── Resizer ────────────────────────────────────────────────────────────── */
.sio-resizer-layout { display:grid;grid-template-columns:1fr 220px;gap:16px;align-items:start; }
@media(max-width:640px){.sio-resizer-layout{grid-template-columns:1fr;}}
.sio-resizer-preview { position:relative; }
.sio-resizer-preview canvas { display:block;max-width:100%;border-radius:10px; }
.sio-rsz-info { font-size:12px;color:var(--t-muted);margin-top:6px;text-align:center; }
.sio-resizer-controls { background:var(--t-card);border:1px solid var(--t-border);border-radius:12px;padding:16px;display:grid;grid-template-columns:1fr 30px 1fr;gap:8px;align-items:end; }
.sio-rsz-field label { font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--t-muted);display:block;margin-bottom:4px; }
.sio-rsz-lock { display:flex;align-items:flex-end;justify-content:center;padding-bottom:2px; }
.sio-rsz-lock button { background:var(--t-bg);border:1px solid var(--t-border);border-radius:6px;width:28px;height:28px;cursor:pointer;font-size:14px;transition:all .15s; }
.sio-rsz-lock button.active { background:#eff6ff;border-color:var(--t-primary); }
.sio-fmt-row { display:flex;gap:5px; }
.sio-fmt-btn { flex:1;padding:7px 5px;border:1px solid var(--t-border);border-radius:6px;background:var(--t-bg);font-size:12px;font-weight:600;cursor:pointer;color:var(--t-muted);transition:all .15s; }
.sio-fmt-btn.active { border-color:var(--t-primary);background:#eff6ff;color:var(--t-primary); }

/* ── Before/After ───────────────────────────────────────────────────────── */
.sio-ba-upload-row { display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:14px; }
@media(max-width:480px){.sio-ba-upload-row{grid-template-columns:1fr;}}
.sio-ba-upload-zone { border:2px dashed var(--t-border);border-radius:12px;min-height:120px;display:flex;align-items:center;justify-content:center;background:var(--t-bg);transition:all .2s;cursor:pointer; }
.sio-ba-upload-zone.loaded { border-color:#16a34a;background:#f0fdf4; }
.sio-ba-upload-zone .sio-drop-icon { font-size:28px; }
.sio-ba-label { position:absolute;bottom:12px;padding:4px 12px;border-radius:20px;font-size:12px;font-weight:700;color:#fff;background:rgba(0,0,0,.55);pointer-events:none; }
.sio-ba-label-before { left:12px; }
.sio-ba-label-after  { right:12px; }