/* ============================================================
   AmigoPDF — merge / split tool pages
   ============================================================ */

.tool-page { max-width: 860px; margin: 0 auto; padding: clamp(20px, 4vw, 40px) clamp(16px, 4vw, 40px) 80px; }
.tool-head { margin-bottom: 22px; }
.tool-head .eyebrow { font-family: var(--font-mono); font-size: .8rem; letter-spacing: .1em; text-transform: uppercase; color: var(--sig); }
.tool-head h1 { font-family: var(--font-display); font-size: clamp(1.6rem, 3.4vw, 2.3rem); letter-spacing: -.02em; margin: 4px 0 8px; }
.tool-head p { color: var(--ink-2); max-width: 60ch; }

/* dropzone */
.dz {
  border: 2px dashed var(--line); border-radius: 16px;
  background: var(--sheet);
  padding: 40px 24px; text-align: center; color: var(--ink-2);
  cursor: pointer; transition: border-color .15s, background .15s;
}
.dz:hover, .dz.dragging { border-color: var(--sig); background: color-mix(in srgb, var(--sig) 6%, var(--sheet)); }
.dz svg { color: var(--ink-2); margin-bottom: 10px; }
.dz strong { color: var(--ink); display: block; font-size: 1.05rem; margin-bottom: 4px; }
.dz .hint { font-size: .88rem; }

.privacy-note {
  display: inline-flex; align-items: center; gap: 8px;
  margin: 16px 0; font-size: .88rem; color: var(--ink-2);
  border: 1px dashed var(--line); border-radius: 999px; padding: 6px 14px;
}
.privacy-note .dot { width: 8px; height: 8px; border-radius: 50%; background: #2fa34f; }

/* file / page list */
.list { display: flex; flex-direction: column; gap: 10px; margin: 20px 0; }
.list:empty { display: none; }
.row {
  display: flex; align-items: center; gap: 12px;
  background: var(--sheet); border: 1px solid var(--line); border-radius: 10px;
  padding: 12px 14px;
}
.row.dragging { opacity: .4; }
.row.drag-over { outline: 2px dashed var(--sig); outline-offset: 2px; }
.row .grip { color: var(--ink-2); cursor: grab; touch-action: none; }
.row .thumb-mini { width: 40px; height: 52px; object-fit: cover; border: 1px solid var(--line); border-radius: 4px; background: #fff; flex: 0 0 auto; }
.row .meta { flex: 1; min-width: 0; }
.row .meta .name { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.row .meta .sub { font-size: .82rem; color: var(--ink-2); }
.row .idx { font-family: var(--font-mono); font-size: .8rem; color: var(--ink-2); width: 24px; text-align: center; }
.row .rm { border: none; background: none; color: var(--flag); font-size: 1.1rem; width: 30px; height: 30px; border-radius: 6px; }
.row .rm:hover { background: color-mix(in srgb, var(--flag) 12%, transparent); }
.row .up-down { display: flex; flex-direction: column; }
.row .up-down button { border: 1px solid var(--line); background: var(--paper); color: var(--ink-2); width: 26px; height: 20px; font-size: .65rem; line-height: 1; }
.row .up-down button:first-child { border-radius: 6px 6px 0 0; }
.row .up-down button:last-child { border-radius: 0 0 6px 6px; border-top: none; }

.actions-bar { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-top: 8px; }
.actions-bar .grow { flex: 1; }
.field { display: flex; flex-direction: column; gap: 4px; }
.field label { font-size: .85rem; color: var(--ink-2); }
.field input[type="text"], .field select {
  font: inherit; padding: 9px 11px; border: 1px solid var(--line); border-radius: 8px;
  background: var(--sheet); color: var(--ink); min-width: 200px;
}

/* split page grid */
.split-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 12px;
  margin: 20px 0;
}
.split-grid:empty { display: none; }
.pcell {
  position: relative; border: 1px solid var(--line); border-radius: 8px;
  background: var(--sheet); padding: 8px 8px 6px; text-align: center; cursor: pointer;
  transition: border-color .12s, box-shadow .12s;
}
.pcell.on { border-color: var(--sig); box-shadow: 0 0 0 1px var(--sig); }
.pcell img { width: 100%; height: auto; border: 1px solid var(--line); background: #fff; display: block; }
.pcell .pn { font-size: .74rem; color: var(--ink-2); padding-top: 5px; display: block; }
.pcell .tick {
  position: absolute; top: 6px; right: 6px; width: 20px; height: 20px; border-radius: 50%;
  background: var(--sig); color: #fff; display: none; align-items: center; justify-content: center; font-size: .7rem;
}
.pcell.on .tick { display: flex; }

.range-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; margin: 18px 0; }
.seg { display: inline-flex; border: 1px solid var(--line); border-radius: 9px; overflow: hidden; }
.seg button { background: var(--sheet); border: none; padding: 8px 14px; color: var(--ink-2); }
.seg button.active { background: var(--sig); color: var(--sig-ink); font-weight: 600; }
.seg button + button { border-left: 1px solid var(--line); }

.spinner { display: inline-block; width: 14px; height: 14px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: spin .6s linear infinite; vertical-align: -2px; margin-right: 6px; }
@keyframes spin { to { transform: rotate(360deg); } }

@media (max-width: 620px) {
  .field input[type="text"], .field select { min-width: 0; width: 100%; }
  .actions-bar { flex-direction: column; align-items: stretch; }
}