/* ═══════════════════════════════════════════
   Adi Guru — Shared Image Tool Styles
   All image tool pages import this file
═══════════════════════════════════════════ */

/* ── Sub-nav tabs ── */
.tool-subnav {
  padding: 14px 20px 0;
  display: flex; gap: 4px; flex-wrap: nowrap; overflow-x: auto;
  border-bottom: 1px solid var(--border);
  background: var(--surface); flex-shrink: 0;
}
.subnav-tab {
  display: flex; align-items: center; gap: 6px;
  padding: 7px 13px; border-radius: 8px 8px 0 0;
  font-size: .8rem; font-weight: 600; cursor: pointer;
  text-decoration: none; color: var(--text-dim);
  border: 1px solid transparent; border-bottom: none;
  margin-bottom: -1px; transition: color .18s, background .18s;
  white-space: nowrap; flex-shrink: 0;
}
.subnav-tab:hover { color: var(--text); background: var(--surface2); }
.subnav-tab.active {
  color: var(--accent2); background: var(--bg);
  border-color: var(--border); border-bottom-color: var(--bg);
}

/* ── Two-panel layout ── */
.tool-body { flex: 1; display: flex; overflow: hidden; }
.tool-canvas { flex: 1; overflow-y: auto; padding: 20px; display: flex; flex-direction: column; gap: 16px; }
.tool-settings {
  width: 270px; background: var(--surface);
  border-left: 1px solid var(--border);
  display: flex; flex-direction: column; flex-shrink: 0; overflow-y: auto;
}

/* ── Drop zone ── */
.ip-dropzone {
  border: 2px dashed var(--border2); border-radius: var(--radius);
  padding: 48px 28px; text-align: center; cursor: pointer;
  transition: border-color .22s, background .22s; background: var(--surface);
}
.ip-dropzone.drag-over { border-color: var(--accent); background: var(--accent-glow); }
.ip-dropzone .dz-icon { font-size: 2.8rem; margin-bottom: 12px; line-height: 1; }
.ip-dropzone h3 { font-size: .96rem; font-weight: 600; margin-bottom: 6px; }
.ip-dropzone p  { color: var(--muted); font-size: .84rem; }
.ip-dropzone p span { color: var(--accent); font-weight: 600; }
.formats { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; margin-top: 12px; }
.fmt-tag { background: var(--surface2); border-radius: 5px; padding: 3px 9px; font-size: .7rem; color: var(--muted); }

/* ── Progress ── */
.ip-progress {
  display: none; flex-direction: column; align-items: center;
  gap: 12px; padding: 40px;
}
.prog-bar-track { width: 100%; max-width: 420px; background: var(--surface3); border-radius: 8px; height: 8px; overflow: hidden; }
.prog-bar-fill {
  height: 100%; background: linear-gradient(90deg, var(--accent-dim), var(--accent));
  border-radius: 8px; transition: width .3s; width: 0%;
}
.ip-progress p { color: var(--text-dim); font-size: .9rem; }

/* ── Error banner ── */
.ip-error {
  display: none; background: rgba(248,113,113,.1);
  border: 1px solid rgba(248,113,113,.25);
  border-radius: var(--radius); padding: 11px 15px;
  color: var(--error); font-size: .85rem; text-align: center;
}

/* ── Result grid ── */
.result-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.img-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.img-card-hdr {
  padding: 9px 13px; border-bottom: 1px solid var(--border);
  display: flex; align-items: center; gap: 8px;
  font-size: .78rem; font-weight: 600; color: var(--muted);
}
.dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.dot-b { background: var(--muted); }
.dot-a { background: var(--accent); }
.img-card img { width: 100%; height: 240px; object-fit: contain; display: block; padding: 8px; }
.checkerboard {
  background-image:
    linear-gradient(45deg,#ddd8cc 25%,transparent 25%),
    linear-gradient(-45deg,#ddd8cc 25%,transparent 25%),
    linear-gradient(45deg,transparent 75%,#ddd8cc 75%),
    linear-gradient(-45deg,transparent 75%,#ddd8cc 75%);
  background-size: 18px 18px;
  background-position: 0 0,0 9px,9px -9px,-9px 0;
}
.action-row { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }

/* ── Settings panel ── */
.rs-hdr { padding: 13px 15px 11px; border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: 8px; }
.rs-hdr h3 { font-size: .85rem; font-weight: 700; }
.rs-body { padding: 13px 15px; display: flex; flex-direction: column; gap: 13px; }
.rs-section { display: flex; flex-direction: column; gap: 8px; }
.rs-section-title {
  font-size: .64rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .9px; color: var(--muted);
  padding-bottom: 4px; border-bottom: 1px solid var(--border);
}
.field { display: flex; flex-direction: column; gap: 5px; }
.field-label { display: flex; justify-content: space-between; align-items: center; font-size: .79rem; font-weight: 600; }
.field-hint { font-size: .71rem; color: var(--muted); }
select {
  width: 100%; background: var(--surface2); border: 1px solid var(--border2);
  border-radius: 7px; padding: 7px 28px 7px 9px; color: var(--text);
  font-size: .81rem; cursor: pointer; appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'%3E%3Cpath fill='%238a8878' d='M5 7L0 2h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 9px center;
}
select:focus { outline: none; border-color: var(--accent); }
.val-badge {
  background: var(--surface3); border: 1px solid var(--border2);
  border-radius: 5px; padding: 1px 7px;
  font-size: .73rem; color: var(--accent); font-weight: 700;
  min-width: 34px; text-align: center;
}
input[type=range] { width: 100%; accent-color: var(--accent); cursor: pointer; }

/* Toggle */
.toggle-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.toggle-info .ti-l { font-size: .79rem; font-weight: 600; }
.toggle-info .ti-h { font-size: .69rem; color: var(--muted); margin-top: 1px; }
.toggle { position: relative; width: 37px; height: 20px; flex-shrink: 0; }
.toggle input { opacity:0; width:0; height:0; }
.tslider { position:absolute; inset:0; background:var(--border2); border-radius:20px; cursor:pointer; transition:.22s; }
.tslider::before { content:""; position:absolute; width:14px; height:14px; border-radius:50%; background:#fff; left:3px; top:3px; transition:.22s; }
.toggle input:checked + .tslider { background: var(--accent); }
.toggle input:checked + .tslider::before { transform: translateX(17px); }
.sub-sec { display:none; flex-direction:column; gap:9px; background:var(--surface2); border:1px solid var(--border); border-radius:8px; padding:10px; }
.sub-sec.open { display:flex; }

/* Color */
.color-row { display:flex; align-items:center; gap:8px; }
.cswatch {
  width:24px; height:24px; border-radius:5px; border:1px solid var(--border2); flex-shrink:0;
  background-image: linear-gradient(45deg,#ddd8cc 25%,transparent 25%), linear-gradient(-45deg,#ddd8cc 25%,transparent 25%), linear-gradient(45deg,transparent 75%,#ddd8cc 75%), linear-gradient(-45deg,transparent 75%,#ddd8cc 75%);
  background-size:8px 8px; background-position:0 0,0 4px,4px -4px,-4px 0;
}
input[type=color] { width:28px; height:28px; border:1px solid var(--border2); border-radius:5px; padding:2px; background:var(--surface2); cursor:pointer; }
.color-clear { font-size:.71rem; color:var(--muted); cursor:pointer; text-decoration:underline; margin-left:auto; }
.color-clear:hover { color:var(--error); }

.rs-footer { margin-top:auto; padding:12px 15px; border-top:1px solid var(--border); }
.rs-footer p { font-size:.69rem; color:var(--muted); text-align:center; margin-top:6px; }
.divider { border:none; border-top:1px solid var(--border); }

/* ── Pipeline bar ── */
.pipeline-bar {
  padding: 7px 20px; background: var(--surface);
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center; gap: 6px;
  font-size: .75rem; overflow-x: auto; flex-shrink: 0;
}
.pipeline-bar-label { color:var(--muted); font-size:.67rem; font-weight:700; text-transform:uppercase; letter-spacing:.7px; white-space:nowrap; flex-shrink:0; margin-right:4px; }
.pipeline-step { display:inline-flex; align-items:center; gap:4px; background:var(--surface2); border:1px solid var(--border); border-radius:6px; padding:3px 9px; white-space:nowrap; color:var(--text-dim); font-size:.72rem; }
.pipeline-step.current { background:var(--accent-glow); border-color:rgba(61,122,82,.3); color:var(--accent2); font-weight:600; }
.pipeline-arrow { color:var(--border2); font-size:1.1rem; flex-shrink:0; line-height:1; }
.pipeline-clear-btn { margin-left:auto; font-size:.69rem; color:var(--muted); background:none; border:none; cursor:pointer; padding:3px 8px; border-radius:5px; white-space:nowrap; flex-shrink:0; font-family:inherit; }
.pipeline-clear-btn:hover { color:var(--error); background:rgba(220,38,38,.07); }

/* ── Pipeline send-to row ── */
.pipeline-action-row { display:flex; align-items:center; gap:8px; padding:8px 12px; background:var(--accent-glow); border:1px solid rgba(61,122,82,.22); border-radius:var(--radius); flex-wrap:wrap; }
.pipeline-action-row > span { font-size:.72rem; color:var(--text-dim); white-space:nowrap; }
.btn-pipeline { display:inline-flex; align-items:center; gap:5px; background:var(--accent-dim); border:1px solid rgba(61,122,82,.4); color:var(--accent2); font-weight:700; font-size:.76rem; padding:5px 11px; border-radius:7px; cursor:pointer; transition:background .18s; font-family:inherit; }
.btn-pipeline:hover { background:#d0e6d8; border-color:rgba(61,122,82,.65); }

/* ── Canvas preview (crop/rotate/watermark tools) ── */
.canvas-wrap { position:relative; display:inline-block; max-width:100%; }
.canvas-wrap canvas { max-width:100%; display:block; border-radius:var(--radius); }

/* ── Pos grid (watermark) ── */
.pos-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:4px; }
.pos-cell { aspect-ratio:1; border:1px solid var(--border2); border-radius:6px; background:var(--surface2); cursor:pointer; display:flex; align-items:center; justify-content:center; font-size:10px; color:var(--muted); transition:background .15s; }
.pos-cell:hover, .pos-cell.selected { background:var(--accent-dim); border-color:rgba(61,122,82,.4); color:var(--accent2); }

/* ── Btn sizes ── */
.btn-sm { padding: 6px 14px; font-size: .8rem; border-radius: 8px; }