/* ============================================================
   Pixelpaper — tool widgets (self-contained, portable)

   Everything a tool's own UI needs, scoped under `.dr-tool` so it
   can't collide with a host app's styles. Colors use design tokens
   WITH hard fallbacks (var(--accent, #2563eb)), so this file looks
   correct EVEN WITHOUT the Pixelpaper theme. Drop the tool folder
   into any codebase, link this file, wrap the markup in
   `<div class="dr-tool">…</div>`, and it just works.

   Site chrome (header, rail, hub, footer) is NOT here — it lives in
   /styles/ and stays behind when a tool is ported.
   ============================================================ */

.dr-tool, .dr-tool *, .dr-tool *::before, .dr-tool *::after { box-sizing: border-box; }
.dr-tool [hidden] { display: none !important; }
.dr-tool {
  font-family: var(--sans, "Inter", system-ui, sans-serif);
  color: var(--ink, #0f1115);
  font-size: 14px;
  line-height: 1.55;
}

/* ---------- Dropzone ---------- */
.dr-tool .dropzone {
  display: block;
  border: 1.5px dashed color-mix(in srgb, var(--accent, #2563eb) 40%, #cfd3da);
  border-radius: 18px;
  background: color-mix(in srgb, var(--accent-weak, #eff6ff) 65%, #fff);
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease, transform 0.2s ease;
}
.dr-tool .dropzone:hover, .dr-tool .dropzone:focus-visible {
  border-color: var(--accent, #2563eb);
  background: var(--accent-weak, #eff6ff);
  outline: none;
}
.dr-tool .dropzone.is-drag {
  border-color: var(--accent, #2563eb);
  background: var(--accent-weak, #eff6ff);
  transform: scale(1.004);
}
.dr-tool .dz-inner { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 56px 24px; text-align: center; }
.dr-tool .dz-icon {
  color: #fff; background: linear-gradient(135deg, var(--accent, #2563eb), var(--accent-strong, #1d4ed8));
  width: 54px; height: 54px; padding: 13px; border-radius: 16px;
  box-shadow: 0 8px 20px rgba(37, 99, 235, 0.28);
}
.dr-tool .dz-title { font-size: 17px; font-weight: 600; color: var(--ink, #0f1115); }
.dr-tool .dz-sub { color: var(--ink-faint, #9aa0aa); font-size: 12.5px; }

/* ---------- Workspace ---------- */
.dr-tool .workspace { display: grid; grid-template-columns: 312px 1fr; gap: 26px; margin-top: 8px; }

/* ---------- Controls ---------- */
.dr-tool .controls {
  background: var(--bg, #fff); border: 1px solid var(--line, #e6e8ec);
  border-radius: var(--radius, 14px); padding: 22px;
  box-shadow: 0 1px 2px rgba(16, 18, 21, 0.05);
  position: sticky; top: 84px; align-self: start;
  display: flex; flex-direction: column; gap: 24px;
}
.dr-tool .ctl-group { display: flex; flex-direction: column; gap: 12px; }
.dr-tool .ctl-label {
  font-size: 11px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--ink-faint, #9aa0aa);
  display: flex; align-items: center; justify-content: space-between;
}
.dr-tool .readout { font-size: 13px; font-weight: 600; color: var(--accent-strong, #1d4ed8); font-variant-numeric: tabular-nums; }

.dr-tool .size-row { display: flex; align-items: flex-end; gap: 8px; }
.dr-tool .field { flex: 1; display: flex; flex-direction: column; gap: 5px; }
.dr-tool .field label { font-size: 10px; font-weight: 600; color: var(--ink-faint, #9aa0aa); letter-spacing: 0.04em; text-transform: uppercase; }
.dr-tool .field input {
  width: 100%; background: var(--bg, #fff); border: 1px solid var(--line, #e6e8ec);
  border-radius: 9px; color: var(--ink, #0f1115); font-family: inherit; font-size: 14px;
  padding: 9px 11px; transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.dr-tool .field input:focus { outline: none; border-color: var(--accent, #2563eb); box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.16); }

.dr-tool .lock {
  background: var(--bg, #fff); border: 1px solid var(--line, #e6e8ec); color: var(--ink-faint, #9aa0aa);
  width: 38px; height: 38px; border-radius: 9px; display: grid; place-items: center; cursor: pointer; margin-bottom: 1px;
  transition: all 0.15s ease;
}
.dr-tool .lock[aria-pressed="true"] { color: var(--accent, #2563eb); border-color: var(--accent, #2563eb); background: var(--accent-weak, #eff6ff); }

.dr-tool .presets { display: flex; flex-wrap: wrap; gap: 6px; }
.dr-tool .presets button {
  background: var(--bg, #fff); border: 1px solid var(--line, #e6e8ec); color: var(--ink-dim, #6b7280);
  font-family: inherit; font-size: 11.5px; font-weight: 500; padding: 6px 10px; border-radius: 8px; cursor: pointer; transition: all 0.15s ease;
}
.dr-tool .presets button:hover { border-color: var(--accent, #2563eb); color: var(--accent-strong, #1d4ed8); }
.dr-tool .presets button.is-on { border-color: var(--accent, #2563eb); color: var(--accent-strong, #1d4ed8); background: var(--accent-weak, #eff6ff); }

.dr-tool .note {
  font-size: 11.5px; line-height: 1.55; color: var(--accent-strong, #1d4ed8);
  background: var(--accent-weak, #eff6ff); border: 1px solid color-mix(in srgb, var(--accent, #2563eb) 22%, #fff);
  border-radius: 10px; padding: 11px 13px;
}

.dr-tool .check { display: flex; align-items: center; gap: 9px; font-size: 12.5px; color: var(--ink-dim, #6b7280); cursor: pointer; }
.dr-tool .check input { accent-color: var(--accent, #2563eb); width: 16px; height: 16px; }

.dr-tool input[type="range"] {
  -webkit-appearance: none; appearance: none; width: 100%; height: 5px; border-radius: 999px; background: var(--line, #e6e8ec); cursor: pointer;
}
.dr-tool input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; width: 17px; height: 17px; border-radius: 50%;
  background: var(--accent, #2563eb); box-shadow: 0 1px 3px rgba(16, 18, 21, 0.2), 0 0 0 4px rgba(37, 99, 235, 0.14);
}
.dr-tool input[type="range"]::-moz-range-thumb { width: 17px; height: 17px; border: none; border-radius: 50%; background: var(--accent, #2563eb); }
.dr-tool .range-scale { display: flex; justify-content: space-between; font-size: 10.5px; color: var(--ink-faint, #9aa0aa); }

.dr-tool .maxsize-row { display: flex; gap: 8px; }
.dr-tool .maxsize-row input {
  flex: 1; background: var(--bg, #fff); border: 1px solid var(--line, #e6e8ec); border-radius: 9px;
  color: var(--ink, #0f1115); font-family: inherit; font-size: 14px; padding: 9px 11px;
}
.dr-tool .maxsize-row input:focus { outline: none; border-color: var(--accent, #2563eb); box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.16); }
.dr-tool .maxsize-row input:disabled { opacity: 0.5; }
.dr-tool .maxsize-row select,
.dr-tool .select-full {
  background: var(--bg, #fff); border: 1px solid var(--line, #e6e8ec); border-radius: 9px;
  color: var(--ink, #0f1115); font-family: inherit; font-size: 13.5px; padding: 9px 11px; cursor: pointer;
}
.dr-tool .select-full { width: 100%; font-size: 14px; }
.dr-tool .maxsize-row select:disabled { opacity: 0.5; }
.dr-tool .select-full:focus, .dr-tool .maxsize-row select:focus { outline: none; border-color: var(--accent, #2563eb); box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.16); }
.dr-tool .hint { font-size: 11px; color: var(--ink-faint, #9aa0aa); line-height: 1.5; }

.dr-tool .bg-row { display: flex; gap: 8px; }
.dr-tool .swatch {
  width: 34px; height: 34px; border-radius: 9px; background: var(--c);
  border: 1px solid var(--line, #e6e8ec); cursor: pointer; position: relative; transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.dr-tool .swatch:hover { transform: translateY(-2px); }
.dr-tool .swatch.is-active { box-shadow: 0 0 0 2px #fff, 0 0 0 3.5px var(--accent, #2563eb); }
.dr-tool .swatch.custom { display: grid; place-items: center; overflow: hidden; background: conic-gradient(red, yellow, lime, cyan, blue, magenta, red); }
.dr-tool .swatch.custom input { opacity: 0; width: 100%; height: 100%; cursor: pointer; }

/* ---------- Actions / buttons ---------- */
.dr-tool .actions { display: flex; gap: 10px; }
.dr-tool .btn-primary {
  flex: 1; background: linear-gradient(135deg, var(--accent, #2563eb), var(--accent-strong, #1d4ed8));
  color: #fff; font-family: inherit; font-weight: 600; font-size: 13.5px; letter-spacing: 0.01em;
  border: none; padding: 13px; border-radius: 10px; cursor: pointer;
  box-shadow: 0 4px 14px rgba(37, 99, 235, 0.28); transition: filter 0.15s ease, transform 0.05s ease;
}
.dr-tool .btn-primary:hover { filter: brightness(1.06); }
.dr-tool .btn-primary:active { transform: translateY(1px); }
.dr-tool .btn-primary:disabled { opacity: 0.55; cursor: wait; box-shadow: none; }
.dr-tool .btn-ghost {
  background: var(--bg, #fff); border: 1px solid var(--line, #e6e8ec); color: var(--ink, #0f1115);
  font-family: inherit; font-size: 13.5px; font-weight: 500; padding: 13px 16px; border-radius: 10px; cursor: pointer; transition: border-color 0.15s ease, background 0.15s ease;
}
.dr-tool .btn-ghost:hover { border-color: var(--accent, #2563eb); background: var(--accent-weak, #eff6ff); }
.dr-tool .btn-link {
  background: none; border: none; color: var(--ink-faint, #9aa0aa);
  font-family: inherit; font-size: 11.5px; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; align-self: flex-start;
}
.dr-tool .btn-link:hover { color: var(--accent-strong, #1d4ed8); }

/* ---------- Queue / cards ---------- */
.dr-tool .queue { display: flex; flex-direction: column; gap: 12px; }
.dr-tool .card {
  display: grid; grid-template-columns: 64px 1fr auto; align-items: center; gap: 16px;
  background: var(--bg, #fff); border: 1px solid var(--line, #e6e8ec); border-radius: 14px; padding: 12px 14px;
  box-shadow: 0 1px 2px rgba(16, 18, 21, 0.05); animation: dr-rise 0.35s ease both;
}
@keyframes dr-rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.dr-tool .thumb {
  width: 64px; height: 64px; border-radius: 10px; object-fit: cover;
  background:
    linear-gradient(45deg, #e9ebee 25%, transparent 25%, transparent 75%, #e9ebee 75%),
    linear-gradient(45deg, #e9ebee 25%, #f4f5f7 25%, #f4f5f7 75%, #e9ebee 75%);
  background-size: 14px 14px; background-position: 0 0, 7px 7px; border: 1px solid var(--line, #e6e8ec);
}
.dr-tool .meta { min-width: 0; }
.dr-tool .meta .name { font-size: 13.5px; font-weight: 500; color: var(--ink, #0f1115); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dr-tool .meta .stats { font-size: 11.5px; color: var(--ink-faint, #9aa0aa); margin-top: 4px; }
.dr-tool .meta .stats .arrow { color: var(--accent, #2563eb); }
.dr-tool .meta .stats .save { color: var(--green, #10b981); font-weight: 600; }
.dr-tool .meta .stats .warn { color: var(--red, #ef4444); }
.dr-tool .card-actions { display: flex; align-items: center; gap: 8px; }
.dr-tool .status { font-size: 11px; font-weight: 600; letter-spacing: 0.04em; color: var(--ink-faint, #9aa0aa); text-transform: uppercase; }
.dr-tool .status.done { color: var(--green, #10b981); }
.dr-tool .status.working { color: var(--accent, #2563eb); }
.dr-tool .dl {
  background: var(--bg, #fff); border: 1px solid var(--line, #e6e8ec); color: var(--ink, #0f1115);
  font-family: inherit; font-size: 12px; font-weight: 500; padding: 8px 14px; border-radius: 9px; cursor: pointer; text-decoration: none; transition: all 0.15s ease;
}
.dr-tool .dl:hover { border-color: var(--accent, #2563eb); color: var(--accent-strong, #1d4ed8); background: var(--accent-weak, #eff6ff); }
.dr-tool .dl[aria-disabled="true"] { opacity: 0.4; pointer-events: none; }
.dr-tool .remove { background: none; border: none; color: var(--ink-faint, #9aa0aa); font-size: 18px; line-height: 1; cursor: pointer; padding: 4px 8px; }
.dr-tool .remove:hover { color: var(--red, #ef4444); }

/* ---------- Ordered list (merge / images→pdf) ---------- */
.dr-tool .merge-card { grid-template-columns: 34px 1fr auto; }
.dr-tool .order-badge {
  width: 34px; height: 34px; display: grid; place-items: center; border-radius: 9px;
  background: var(--accent-weak, #eff6ff); border: 1px solid color-mix(in srgb, var(--accent, #2563eb) 30%, #fff); color: var(--accent-strong, #1d4ed8); font-size: 13px; font-weight: 600;
}
.dr-tool .move-btns { display: flex; flex-direction: column; gap: 2px; }
.dr-tool .move {
  background: var(--bg, #fff); border: 1px solid var(--line, #e6e8ec); color: var(--ink-dim, #6b7280);
  width: 26px; height: 18px; border-radius: 5px; cursor: pointer; display: grid; place-items: center; font-size: 10px; line-height: 1; padding: 0; transition: all 0.12s ease;
}
.dr-tool .move:hover:not(:disabled) { border-color: var(--accent, #2563eb); color: var(--accent-strong, #1d4ed8); }
.dr-tool .move:disabled { opacity: 0.4; cursor: not-allowed; }

/* ---------- Responsive ---------- */
@media (max-width: 880px) {
  .dr-tool .workspace { grid-template-columns: 1fr; }
  .dr-tool .controls { position: static; }
}

/* ---------- Protect-specific ---------- */
.dr-tool .pr-field input { width: 100%; background: var(--bg, #fff); border: 1px solid var(--line, #e6e8ec); border-radius: 9px; color: var(--ink, #0f1115); font-family: inherit; font-size: 14px; padding: 9px 11px; }
.dr-tool .pr-field input:focus { outline: none; border-color: var(--accent, #2563eb); box-shadow: 0 0 0 3px rgba(37,99,235,0.16); }
.dr-tool .status.error { color: var(--red, #ef4444); }
.dr-tool .card .err { color: var(--red, #ef4444); font-size: 11.5px; margin-top: 4px; }