/* ═══════════════════════════════════════════════════════
   PDF Seguro RH — iOS / TaskFlow-inspired Redesign
   ═══════════════════════════════════════════════════════ */

/* ── Design Tokens ───────────────────────────────────── */
:root {
  --bg: #f4f4f8;
  --surface: #ffffff;
  --surface-hover: #fafafa;
  --surface-alt: #f8f8fb;
  --text: #1a1a1e;
  --text-secondary: #46464f;
  --muted: #8b8b94;
  --line: #e2e2e8;
  --line-light: #eeeff3;
  --green: #2ebb4e;
  --green-hover: #26a844;
  --green-dark: #1d8c38;
  --green-soft: #edf8f0;
  --green-muted: #b0d9be;
  --blue: #3d7ce0;
  --danger: #e5484d;
  --danger-soft: #fef1f1;
  --danger-hover: #cd3d42;
  --warning: #d97b00;
  --warning-soft: #fef8ec;
  --radius: 14px;
  --radius-sm: 10px;
  --radius-xs: 8px;
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.03);
  --shadow: 0 2px 10px rgba(0,0,0,0.05);
  --shadow-lg: 0 6px 24px rgba(0,0,0,0.07);
  --shadow-float: 0 10px 36px rgba(0,0,0,0.10);
  --transition: 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* ── Reset ───────────────────────────────────────────── */
*, *::before, *::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-height: 100vh;
  color: var(--text);
  background: var(--bg);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  line-height: 1.5;
}

button, input, select {
  font: inherit;
  line-height: 1.5;
}

button {
  cursor: pointer;
}

h1, h2, h3, p {
  margin-top: 0;
}

img {
  display: block;
  max-width: 100%;
}

/* ── Topbar / Header ─────────────────────────────────── */
.topbar {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  align-items: center;
  padding: 32px clamp(24px, 5vw, 64px);
  color: #ffffff;
  background: linear-gradient(135deg, #1a6d46 0%, #155a3a 50%, #104830 100%);
  position: relative;
  overflow: hidden;
}

.topbar::before {
  content: '';
  position: absolute;
  top: -50%;
  right: -10%;
  width: 400px;
  height: 400px;
  border-radius: 50%;
  background: rgba(255,255,255,0.04);
  pointer-events: none;
}

.topbar::after {
  content: '';
  position: absolute;
  bottom: -60%;
  left: 20%;
  width: 300px;
  height: 300px;
  border-radius: 50%;
  background: rgba(255,255,255,0.03);
  pointer-events: none;
}

.eyebrow {
  margin: 0 0 8px;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  opacity: 0.7;
  font-weight: 600;
}

h1 {
  margin-bottom: 10px;
  font-size: clamp(1.75rem, 3.5vw, 2.5rem);
  font-weight: 700;
  letter-spacing: -0.02em;
}

.security-note {
  margin-bottom: 0;
  max-width: 520px;
  line-height: 1.6;
  opacity: 0.85;
  font-size: 0.92rem;
}

.hero-logo {
  max-width: 240px;
  max-height: 110px;
  object-fit: contain;
  position: relative;
  z-index: 1;
}

/* ── Shell / Container ───────────────────────────────── */
.shell {
  width: min(1700px, calc(100vw - 48px));
  margin: 32px auto 56px;
}

/* ── Home Screen Dashboard ─────────────────────────── */
.home-screen {
  animation: panelIn 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}

.home-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px;
  margin-bottom: 24px;
}

.home-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  min-height: 180px;
  padding: 32px 24px;
  text-align: center;
  border: 1.5px solid var(--line);
  border-radius: var(--radius);
  color: var(--text);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  transition: all var(--transition);
}

.home-card:hover {
  border-color: var(--green-muted);
  box-shadow: var(--shadow);
  transform: translateY(-2px);
}

.home-card strong {
  display: block;
  margin-bottom: 6px;
  font-size: 1.1rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.home-card small {
  color: var(--muted);
  font-size: 0.9rem;
}

.home-icon {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  border-radius: var(--radius-sm);
  color: #ffffff;
  background: linear-gradient(135deg, #2ebb4e, #22964a);
  font-size: 2rem;
  box-shadow: 0 2px 8px rgba(46, 187, 78, 0.2);
}

/* ── Notice Banner ───────────────────────────────────── */
.notice {
  margin-bottom: 24px;
  padding: 14px 18px;
  border: 1px solid #f0dca0;
  border-radius: var(--radius-sm);
  color: #7a5e00;
  background: var(--warning-soft);
  font-size: 0.88rem;
  line-height: 1.5;
}

/* ── Tool Panel ──────────────────────────────────────── */
.tool-panel {
  display: none;
  padding: 32px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow);
}

.tool-panel.active {
  display: block;
  animation: panelIn 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}

@keyframes panelIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ── Section Head ────────────────────────────────────── */
.section-head {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  align-items: flex-start;
  margin-bottom: 28px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--line-light);
}

.section-head h2 {
  margin-bottom: 6px;
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--text);
}

.section-head p {
  margin-bottom: 0;
  color: var(--muted);
  font-size: 0.9rem;
}

/* ── Dropzone ────────────────────────────────────────── */
.dropzone {
  position: relative;
  display: grid;
  place-items: center;
  gap: 10px;
  min-height: 180px;
  padding: 32px 24px;
  border: 2px dashed var(--green-muted);
  border-radius: var(--radius);
  text-align: center;
  background: var(--surface-alt);
  transition: all var(--transition);
}

.dropzone:hover {
  border-color: var(--green);
  background: var(--green-soft);
}

.dropzone.dragover {
  border-color: var(--green);
  background: var(--green-soft);
  transform: scale(1.01);
}

.dropzone input {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}

.dropzone strong {
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-secondary);
}

.dropzone small {
  color: var(--muted);
  font-size: 0.84rem;
}

.drop-icon {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: var(--radius-sm);
  color: #ffffff;
  background: linear-gradient(135deg, #2ebb4e, #22964a);
  font-size: 1.3rem;
  box-shadow: 0 2px 6px rgba(46, 187, 78, 0.18);
}

/* ── File Summary ────────────────────────────────────── */
.file-summary {
  margin-top: 16px;
  padding: 14px 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
  font-size: 0.9rem;
  color: var(--muted);
}

.loaded-file-card,
.upload-compact {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: center;
}

.loaded-file-card > div,
.upload-compact > div:first-child {
  display: grid;
  gap: 4px;
}

.summary-title {
  color: var(--green-dark);
  font-size: 0.82rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.loaded-file-card strong,
.upload-compact strong {
  overflow-wrap: anywhere;
  font-weight: 600;
}

.loaded-file-card small,
.upload-compact small {
  color: var(--muted);
  font-size: 0.84rem;
}

.summary-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}

/* ── Split Grid (Dividir PDF layout) ─────────────────── */
.split-grid {
  display: grid;
  grid-template-columns: minmax(480px, 0.95fr) minmax(620px, 1.15fr);
  gap: 28px;
  margin-top: 24px;
}

/* ── Thumbnail Panel ─────────────────────────────────── */
.thumb-panel {
  min-height: 320px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-alt);
  overflow: hidden;
}

.thumb-panel-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--line);
  background: var(--surface);
}

.thumb-panel-head h3 {
  margin-bottom: 0;
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--text-secondary);
}

.thumbnail-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(180px, 1fr));
  gap: 14px;
  max-height: 720px;
  overflow: auto;
  scroll-behavior: smooth;
  padding: 16px;
}

.thumb {
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
  padding: 14px;
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  height: max-content;
  transition: all var(--transition);
}

.thumb:hover {
  box-shadow: var(--shadow);
  transform: translateY(-2px);
}

.thumb-preview,
.thumb-placeholder {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  width: 100%;
  background: transparent;
  padding: 0;
}

.thumb canvas,
.thumbnail img,
.preview img,
.page-thumb img {
  display: block;
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}

.thumb-placeholder {
  color: var(--muted);
  font-weight: 700;
  font-size: 0.8rem;
}

.thumb span {
  display: block;
  padding: 0 0 10px 0;
  margin-bottom: 14px;
  text-align: center;
  font-size: 0.9rem;
  color: var(--text);
  font-weight: 600;
  border-bottom: 1px solid var(--line-light);
}

/* ── Group Panel (Dividir PDF config) ────────────────── */
.group-panel {
  min-width: 0;
}

/* ── Workflow Stack (Step layout) ─────────────────────── */
.workflow-stack {
  display: grid;
  gap: 16px;
}

.workflow-step {
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  transition: box-shadow var(--transition);
}

.workflow-step:hover {
  box-shadow: var(--shadow-sm);
}

.merge-config-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 16px;
  align-items: stretch;
}

.merge-config-grid > .workflow-step {
  min-width: 0;
  height: 100%;
}

.compress-config-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: 16px;
  align-items: start;
}

.compress-config-grid > .workflow-step {
  min-width: 0;
  height: 100%;
}

.compress-config-grid .field-row {
  grid-template-columns: 1fr;
  margin-bottom: 0;
}

.compress-grayscale-option {
  margin-top: 0 !important;
}

.step-heading {
  display: block;
  margin-bottom: 18px;
}

.step-heading h3 {
  margin-bottom: 4px;
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.step-heading p {
  margin-bottom: 0;
  color: var(--muted);
  line-height: 1.45;
  font-size: 0.88rem;
}

.final-step {
  background: var(--green-soft);
  border-color: var(--green-muted);
}

/* ── Form Fields ─────────────────────────────────────── */
.field-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin-bottom: 16px;
}

.image-options {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-top: 0;
}

label span {
  display: block;
  margin-bottom: 6px;
  color: var(--text-secondary);
  font-weight: 600;
  font-size: 0.84rem;
  letter-spacing: 0.01em;
  line-height: 1.3;
}

input,
select {
  display: block;
  width: 100%;
  height: 42px;
  padding: 0 14px;
  border: 1.5px solid var(--line);
  border-radius: var(--radius-sm);
  color: var(--text);
  background: var(--surface);
  transition: all var(--transition);
  font-size: 0.9rem;
  line-height: normal;
}

input::placeholder {
  color: var(--muted);
  opacity: 0.7;
}

input:hover,
select:hover {
  border-color: var(--green-muted);
}

input:focus,
select:focus {
  border-color: var(--green);
  outline: none;
  box-shadow: 0 0 0 3px rgba(46, 187, 78, 0.12);
}

button:focus-visible {
  outline: 3px solid rgba(46, 187, 78, 0.2);
  outline-offset: 2px;
}

/* Select arrow (hidden natively, dropdown takes over) */
select {
  appearance: none;
  padding-right: 40px;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--muted) 50%),
    linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position:
    calc(100% - 20px) 50%,
    calc(100% - 15px) 50%;
  background-size:
    5px 5px,
    5px 5px;
  background-repeat: no-repeat;
}

/* ── Quick Docs (Template Chips) ─────────────────────── */
.quick-docs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 16px 0 20px;
}

.quick-docs button,
.template-chip {
  min-height: 36px;
  padding: 7px 14px;
  border: 1.5px solid var(--line);
  border-radius: var(--radius-xs);
  color: var(--text-secondary);
  background: var(--surface);
  font-size: 0.85rem;
  font-weight: 500;
  transition: all var(--transition);
}

.quick-docs button:hover,
.template-chip:hover {
  border-color: var(--green-muted);
  background: var(--green-soft);
  color: var(--green-dark);
}

.custom-template-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px;
}

.custom-template-chip > button:first-child {
  border: 0;
  background: transparent;
}

.model-template-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px;
}

.model-template-chip > button:first-child {
  min-height: 28px !important;
  padding: 4px 10px !important;
  border: 0 !important;
  background: transparent !important;
  color: inherit !important;
}

.manage-template-button {
  border-style: dashed !important;
  color: var(--text-secondary) !important;
  background: var(--surface-alt) !important;
}

.manage-template-button:hover,
.restore-template-button:hover {
  border-color: var(--green-muted) !important;
  color: var(--green-dark) !important;
  background: var(--green-soft) !important;
}

.restore-template-button {
  color: var(--muted) !important;
  background: var(--surface) !important;
}

.mini-chip-button {
  min-height: 28px !important;
  padding: 4px 8px !important;
  font-size: 0.75rem;
  background: var(--surface) !important;
  border-radius: 6px !important;
}

.danger-mini-chip {
  color: var(--danger) !important;
  border-color: #ffc9c6 !important;
}

.new-template-button {
  border-color: var(--green) !important;
  color: #ffffff !important;
  background: var(--green) !important;
}

.new-template-button:hover {
  background: var(--green-hover) !important;
}

/* ── Buttons ─────────────────────────────────────────── */
.group-actions,
.panel-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 20px 0;
}

.primary-button,
.success-button,
.ghost-button,
.icon-button,
.danger-button {
  min-height: 42px;
  border-radius: var(--radius-sm);
  border: 1.5px solid transparent;
  font-weight: 600;
  font-size: 0.88rem;
  transition: all var(--transition);
  letter-spacing: 0.01em;
}

.primary-button,
.success-button {
  padding: 10px 22px;
  color: #ffffff;
}

.primary-button {
  background: var(--blue);
}

.primary-button:hover {
  background: #3570cc;
  box-shadow: 0 3px 10px rgba(61, 124, 224, 0.2);
}

.success-button {
  background: linear-gradient(135deg, #2ebb4e, #22964a);
  box-shadow: 0 1px 4px rgba(46, 187, 78, 0.15);
}

.success-button:hover {
  background: linear-gradient(135deg, #28ad47, #1e8b42);
  box-shadow: 0 3px 12px rgba(46, 187, 78, 0.22);
  transform: translateY(-1px);
}

.success-button:active {
  transform: translateY(0);
  box-shadow: 0 1px 4px rgba(46, 187, 78, 0.15);
}

.ghost-button {
  padding: 10px 18px;
  color: var(--text-secondary);
  border-color: var(--line);
  background: var(--surface);
}

.ghost-button:hover {
  border-color: var(--green-muted);
  background: var(--green-soft);
  color: var(--green-dark);
}

/* ── Lists ───────────────────────────────────────────── */
.group-list,
.sortable-list {
  display: grid;
  gap: 12px;
}

/* ── Image Cards Grid ────────────────────────────────── */
#images-list {
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  align-items: stretch;
}

#merge-list {
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  align-items: stretch;
}

.image-card,
.pdf-card {
  display: grid;
  gap: 12px;
  padding: 14px;
  border: 1.5px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  transition: all var(--transition);
}

.image-card:hover,
.pdf-card:hover {
  box-shadow: var(--shadow);
  transform: translateY(-2px);
  border-color: var(--green-muted);
}

.image-card {
  grid-template-rows: 190px minmax(92px, 1fr) auto;
}

.image-card-preview,
.pdf-card-preview {
  display: grid;
  place-items: center;
  min-height: 160px;
  aspect-ratio: 4 / 3;
  border: 1px solid var(--line-light);
  border-radius: var(--radius-sm);
  background: var(--surface-alt);
  overflow: hidden;
}

.image-card-preview {
  width: 100%;
  height: 190px;
  min-height: 190px;
  aspect-ratio: auto;
  padding: 12px;
}

.image-card-preview img,
.pdf-card-preview img {
  display: block;
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}

/* ── Sheet Preview (Image-to-PDF faithful preview) ───── */
.sheet-preview {
  --preview-margin-x: 7%;
  --preview-margin-y: 7%;
  position: relative;
  display: grid;
  place-items: center;
  margin-inline: auto;
  min-height: auto;
  border-color: var(--line);
  background: #eef1f3;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
  overflow: hidden;
  border-radius: 4px;
}

.sheet-preview img {
  background: #ffffff;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}

.sheet-content {
  display: grid;
  place-items: center;
  position: absolute;
  inset: var(--preview-margin-y) var(--preview-margin-x);
  width: auto;
  height: auto;
  min-width: 0;
  min-height: 0;
}

.image-card-preview .sheet-content img {
  position: absolute;
  inset: 0;
  display: block;
  max-width: none;
  max-height: none;
  width: 100%;
  height: 100%;
  margin: auto;
  object-fit: contain;
}

.sheet-portrait {
  height: 100%;
  max-width: 100%;
  aspect-ratio: 0.707;
}

.sheet-landscape {
  width: 100%;
  max-height: 100%;
  aspect-ratio: 1.414;
}

.sheet-preview.margin-none   { --preview-margin-x: 0%;      --preview-margin-y: 0%; }
.sheet-preview.margin-narrow { --preview-margin-x: 3.024%;  --preview-margin-y: 2.138%; }
.sheet-preview.margin-normal { --preview-margin-x: 7.056%;  --preview-margin-y: 4.989%; }
.sheet-preview.margin-wide   { --preview-margin-x: 12.096%; --preview-margin-y: 8.552%; }

.image-card .item-actions,
.pdf-card .item-actions {
  align-self: end;
  margin-top: auto;
}

/* ── PDF Card Preview ────────────────────────────────── */
.pdf-card-preview {
  min-height: 190px;
  aspect-ratio: 0.78;
  padding: 10px;
}

.pdf-card-placeholder {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  border-radius: var(--radius-xs);
  color: var(--muted);
  background: var(--surface-alt);
  font-weight: 700;
  font-size: 0.88rem;
}

/* ── Image Card Meta ─────────────────────────────────── */
.image-card-meta {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.image-card-meta strong {
  overflow-wrap: anywhere;
  font-weight: 600;
  font-size: 0.9rem;
}

.image-card-meta small {
  color: var(--muted);
  font-size: 0.82rem;
}

.image-page-label {
  color: var(--green-dark);
  font-size: 0.88rem;
  font-weight: 600;
}

/* ── Compress PDF Compact Layout ─────────────────────── */
.compress-files-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.compress-file-card {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 88px;
  padding: 14px 16px;
  border: 1.5px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  transition: all var(--transition);
}

.compress-file-card:hover {
  box-shadow: var(--shadow-sm);
  border-color: var(--green-muted);
}

.compress-file-preview {
  display: grid;
  place-items: center;
  width: 64px;
  height: 80px;
  flex: 0 0 64px;
  border-radius: var(--radius-xs);
  background: var(--surface-alt);
  border: 1px solid var(--line-light);
  color: var(--muted);
  font-weight: 700;
  font-size: 0.8rem;
  overflow: hidden;
}

.compress-file-preview canvas,
.compress-file-preview img {
  display: block;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.compress-file-info {
  flex: 1;
  min-width: 0;
  display: grid;
  gap: 4px;
}

.compress-file-info strong {
  display: block;
  overflow-wrap: anywhere;
  font-weight: 600;
  font-size: 0.95rem;
  line-height: 1.3;
}

.compress-file-info small {
  display: block;
  color: var(--muted);
  font-size: 0.85rem;
  line-height: 1.4;
}

/* ── Group Items (Split PDF doc rows) ────────────────── */
.group-item,
.list-item {
  border: 1.5px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
  transition: all var(--transition);
}

.group-item:hover,
.list-item:hover {
  box-shadow: var(--shadow-sm);
}

.group-item {
  padding: 18px;
}

.group-item.invalid {
  border-color: #ffafab;
  background: var(--danger-soft);
}

.group-item-header,
.list-item {
  display: grid;
  gap: 12px;
  align-items: end;
}

.group-item-header {
  grid-template-columns: minmax(140px, 1fr) minmax(100px, 0.65fr) minmax(140px, 0.8fr) minmax(180px, 1.1fr) auto;
  grid-template-areas: "doc pages kind final remove";
}

.dependent-name-field {
  display: none;
}

.group-item.has-dependent .dependent-name-field {
  display: block;
}

.group-item:not(.has-dependent) .group-item-header {
  grid-template-columns: minmax(140px, 1fr) minmax(100px, 0.65fr) minmax(140px, 0.8fr) minmax(180px, 1.1fr) auto;
  grid-template-areas: "doc pages kind final remove";
}

.group-item.has-dependent .group-item-header {
  grid-template-columns: minmax(160px, 1fr) minmax(120px, 0.65fr) minmax(140px, 0.75fr) auto;
  grid-template-areas:
    "doc pages kind remove"
    "dependent dependent final final";
  align-items: end;
}

.group-field-doc       { grid-area: doc; }
.group-field-pages     { grid-area: pages; }
.group-field-kind      { grid-area: kind; }
.group-field-dependent { grid-area: dependent; }
.group-field-final     { grid-area: final; }

.group-item-header .danger-button {
  grid-area: remove;
  align-self: end;
  height: 42px;
  min-height: 42px;
}

.group-field-kind select {
  min-width: 150px;
}

.group-error {
  margin: 10px 0 0;
  color: var(--danger);
  font-size: 0.85rem;
  font-weight: 500;
}

/* ── List Items ──────────────────────────────────────── */
.list-item {
  grid-template-columns: minmax(0, 1fr) auto;
  min-height: 58px;
  padding: 12px 16px;
}

.list-meta strong {
  display: block;
  overflow-wrap: anywhere;
  font-weight: 600;
}

.list-meta small {
  color: var(--muted);
  font-size: 0.84rem;
}

/* ── Item Action Buttons ─────────────────────────────── */
.item-actions {
  display: flex;
  gap: 6px;
}

.icon-button,
.danger-button {
  display: grid;
  place-items: center;
  min-width: 38px;
  height: 38px;
  min-height: 38px;
  padding: 0 10px;
  border: 1.5px solid var(--line);
  border-radius: var(--radius-xs);
  color: var(--text-secondary);
  background: var(--surface);
  transition: all var(--transition);
  font-size: 0.85rem;
}

.icon-button:hover {
  border-color: var(--green-muted);
  background: var(--green-soft);
  color: var(--green-dark);
}

.danger-button {
  color: #ffffff;
  border-color: var(--danger);
  background: var(--danger);
}

.danger-button:hover {
  background: var(--danger-hover);
  box-shadow: 0 2px 6px rgba(229, 72, 77, 0.18);
}

.text-danger-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: auto;
  padding: 10px 16px;
  font-size: 0.88rem;
}

/* ── Status Messages ─────────────────────────────────── */
.status {
  min-height: 24px;
  margin-top: 14px;
  color: var(--muted);
  font-size: 0.88rem;
}

.status.error {
  color: var(--danger);
  font-weight: 500;
}

.status.success {
  color: var(--green-dark);
  font-weight: 600;
}

.status.warning {
  color: #b06e00;
  font-weight: 500;
}

/* ── Modal ───────────────────────────────────────────── */
.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  animation: modalBgIn 0.2s ease both;
}

.modal-panel {
  width: min(480px, 100%);
  padding: 28px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow-float);
  animation: modalCardIn 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}

.modal-panel h3 {
  margin-bottom: 20px;
  font-size: 1.2rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.modal-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: flex-end;
  margin-top: 24px;
}

.model-confirm-panel {
  width: min(420px, 100%);
}

.model-confirm-message {
  margin: 0;
  color: var(--text-secondary);
  font-size: 0.95rem;
  line-height: 1.55;
}

.model-confirm-remove {
  min-width: 112px;
  height: 42px;
}

body.confirm-modal-open {
  overflow: hidden;
}

.confirm-modal-backdrop {
  z-index: 1000;
  background: rgba(18, 34, 25, 0.42);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}

.confirm-modal-panel {
  width: min(440px, 100%);
  padding: 26px;
  border-color: #dce5df;
  border-radius: 16px;
  background: #ffffff;
  box-shadow: 0 16px 48px rgba(16, 48, 32, 0.16);
}

.confirm-modal-panel:focus {
  outline: none;
}

.confirm-modal-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
}

.confirm-modal-title {
  margin: 0;
  color: var(--text);
  font-size: 1.22rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.confirm-modal-close {
  display: grid;
  place-items: center;
  flex: 0 0 34px;
  width: 34px;
  height: 34px;
  min-height: 34px;
  margin: -6px -6px 0 0;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 9px;
  color: var(--muted);
  background: transparent;
  font-size: 1.45rem;
  line-height: 1;
  transition: color var(--transition), border-color var(--transition), background var(--transition);
}

.confirm-modal-close:hover {
  border-color: var(--line);
  color: var(--text-secondary);
  background: var(--surface-alt);
}

.confirm-modal-message {
  margin: 13px 0 0;
  color: var(--text-secondary);
  font-size: 0.94rem;
  line-height: 1.6;
}

.confirm-modal-actions {
  margin-top: 24px;
}

.confirm-modal-actions .success-button {
  min-width: 112px;
}

.confirm-modal-backdrop.is-closing {
  pointer-events: none;
  animation: confirmModalBgOut 0.18s ease both;
}

.confirm-modal-backdrop.is-closing .confirm-modal-panel {
  animation: confirmModalCardOut 0.18s ease both;
}

@keyframes confirmModalBgOut {
  from { opacity: 1; }
  to { opacity: 0; }
}

@keyframes confirmModalCardOut {
  from {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
  to {
    opacity: 0;
    transform: scale(0.98) translateY(8px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .confirm-modal-backdrop,
  .confirm-modal-panel,
  .confirm-modal-backdrop.is-closing,
  .confirm-modal-backdrop.is-closing .confirm-modal-panel {
    animation-duration: 0.01ms;
  }
}

@keyframes modalBgIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes modalCardIn {
  from {
    opacity: 0;
    transform: scale(0.96) translateY(12px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

/* ── Custom Dropdown ─────────────────────────────────── */
.custom-dropdown {
  position: relative;
  width: 100%;
}

.custom-dropdown-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 42px;
  min-height: 42px;
  max-height: 42px;
  padding: 0 14px;
  border: 1.5px solid var(--line);
  border-radius: var(--radius-sm);
  color: var(--text);
  background: var(--surface);
  text-align: left;
  font-size: 0.9rem;
  transition: all var(--transition);
}

.custom-dropdown-toggle:hover {
  border-color: var(--green-muted);
}

.custom-dropdown.open .custom-dropdown-toggle {
  border-color: var(--green);
  box-shadow: 0 0 0 3px rgba(46, 187, 78, 0.12);
}

.custom-dropdown-text {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.custom-dropdown-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  transition: transform var(--transition);
  flex-shrink: 0;
  margin-left: 8px;
}

.custom-dropdown.open .custom-dropdown-arrow {
  transform: rotate(180deg);
}

.custom-dropdown-list {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  width: 100%;
  max-height: 260px;
  overflow-y: auto;
  margin: 0;
  padding: 6px;
  list-style: none;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-lg);
  z-index: 200;
  animation: ddSlideIn 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

.custom-dropdown-list.hidden {
  display: none;
}

.custom-dropdown-option {
  padding: 10px 14px;
  border-radius: var(--radius-xs);
  cursor: pointer;
  font-size: 0.9rem;
  transition: background 0.15s ease, color 0.15s ease;
}

.custom-dropdown-option:hover {
  background: var(--surface-alt);
}

.custom-dropdown-option.selected {
  background: var(--green-soft);
  color: var(--green-dark);
  font-weight: 600;
}

@keyframes ddSlideIn {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ── Compress States ─────────────────────────────────── */
.compress-state-panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 64px 32px;
  text-align: center;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  animation: panelIn 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}

.compress-spinner {
  width: 48px;
  height: 48px;
  border: 4px solid var(--green-soft);
  border-top-color: var(--green);
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin-bottom: 24px;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

.compress-state-title {
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 8px;
  letter-spacing: -0.02em;
}

.compress-state-subtitle {
  font-size: 1rem;
  color: var(--muted);
  margin-bottom: 16px;
}

.compress-progress-text {
  font-size: 0.9rem;
  color: var(--blue);
  font-weight: 500;
  background: #f0f4fc;
  padding: 6px 12px;
  border-radius: 20px;
}

.compress-success-icon {
  color: var(--green);
  background: var(--green-soft);
  width: 80px;
  height: 80px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  margin-bottom: 24px;
}

.success-summary-card {
  display: flex;
  align-items: center;
  gap: 24px;
  background: var(--surface-alt);
  border: 1px solid var(--line);
  padding: 24px 32px;
  border-radius: var(--radius);
  margin: 24px 0 32px;
}

.stat-box {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.stat-label {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.stat-value {
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--text);
}

.highlight-stat .stat-value {
  color: var(--green-dark);
}

.stat-divider {
  color: var(--muted);
}

.savings-stat {
  background: var(--green-soft);
  border: 1px solid var(--green-muted);
  padding: 12px 20px;
  border-radius: var(--radius-sm);
  margin-left: 16px;
}

.savings-stat .stat-label {
  color: var(--green-dark);
}

.savings-stat .stat-value {
  color: var(--green-dark);
  font-size: 1.6rem;
}

.savings-stat small {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--green-dark);
  opacity: 0.8;
}

.compress-actions-main {
  margin-bottom: 20px;
}

.mega-download-button {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  background: linear-gradient(135deg, #2ebb4e, #22964a);
  color: white;
  border: none;
  padding: 16px 36px;
  font-size: 1.15rem;
  font-weight: 600;
  border-radius: 100px;
  box-shadow: 0 4px 14px rgba(46, 187, 78, 0.3);
  transition: all var(--transition);
}

.mega-download-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(46, 187, 78, 0.4);
}

.mega-download-button:active {
  transform: translateY(0);
}

/* ── Hidden Utility ──────────────────────────────────── */
.hidden {
  display: none !important;
}

/* ── Responsive ──────────────────────────────────────── */
@media (max-width: 900px) {
  .topbar,
  .section-head {
    flex-direction: column;
    align-items: stretch;
  }

  .split-grid {
    grid-template-columns: 1fr;
  }

  .merge-config-grid,
  .compress-config-grid {
    grid-template-columns: 1fr;
  }

  .tool-panel {
    padding: 20px;
  }

  .success-summary-card {
    flex-direction: column;
    gap: 16px;
  }
  
  .savings-stat {
    margin-left: 0;
    width: 100%;
  }

  .stat-divider {
    transform: rotate(90deg);
  }

  .loaded-file-card,
  .upload-compact {
    align-items: stretch;
    flex-direction: column;
  }

  .summary-actions {
    justify-content: flex-start;
  }

  .home-grid {
    grid-template-columns: 1fr;
  }

  .home-card {
    min-height: auto;
    padding: 24px;
    flex-direction: row;
    text-align: left;
    align-items: center;
    justify-content: flex-start;
  }
  
  .home-icon {
    flex: 0 0 52px;
    width: 52px;
    height: 52px;
    font-size: 1.5rem;
    margin: 0;
  }

  .home-card strong {
    margin-bottom: 4px;
    font-size: 1.05rem;
  }

  .field-row,
  .image-options {
    grid-template-columns: 1fr;
  }

  .group-item-header,
  .group-item:not(.has-dependent) .group-item-header,
  .group-item.has-dependent .group-item-header {
    grid-template-columns: 1fr;
    grid-template-areas:
      "doc"
      "pages"
      "kind"
      "dependent"
      "final"
      "remove";
  }

  .hero-logo {
    align-self: flex-start;
    margin-top: 8px;
  }

  .workflow-step {
    padding: 18px;
  }

  #images-list,
  #merge-list,
  #compress-list {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 600px) {
  .shell {
    width: calc(100% - 24px);
  }

  .topbar {
    padding: 24px 20px;
  }

  h1 {
    font-size: 1.5rem;
  }

  /* Removed tool-card overrides since we use home-card now */
}
/* ── Premium home ────────────────────────────────────── */
.topbar {
  width: min(1700px, calc(100% - 48px));
  min-height: 218px;
  margin: 24px auto 0;
  padding: clamp(25px, 3vw, 38px) clamp(34px, 5.5vw, 80px);
  gap: clamp(32px, 5vw, 80px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 28px;
  background:
    radial-gradient(circle at 82% 15%, rgba(190, 224, 91, 0.16), transparent 26%),
    linear-gradient(135deg, #195f43 0%, #124d38 48%, #0b392d 100%);
  box-shadow: 0 22px 60px rgba(10, 52, 38, 0.18);
}

.topbar::before {
  top: -225px;
  right: 19%;
  width: 350px;
  height: 350px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.025);
}

.topbar::after {
  bottom: -265px;
  left: -80px;
  width: 340px;
  height: 340px;
  background: rgba(178, 210, 53, 0.045);
  filter: blur(2px);
}

.hero-content,
.hero-brand {
  position: relative;
  z-index: 1;
}

.hero-content {
  flex: 1 1 650px;
  max-width: 760px;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 10px;
  padding: 5px 10px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  font-size: 0.64rem;
  letter-spacing: 0.11em;
  opacity: 1;
  backdrop-filter: blur(8px);
}

.eyebrow > span,
.brand-context > span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #b2d235;
  box-shadow: 0 0 0 4px rgba(178, 210, 53, 0.12);
}

.topbar h1 {
  margin-bottom: 8px;
  font-size: clamp(2rem, 3.5vw, 3.15rem);
  font-weight: 720;
  letter-spacing: -0.055em;
  line-height: 1.02;
}

.security-note {
  max-width: 590px;
  font-size: clamp(0.86rem, 1.1vw, 0.95rem);
  line-height: 1.5;
  opacity: 0.78;
}

.hero-benefits {
  display: flex;
  flex-wrap: wrap;
  gap: 7px 20px;
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
  color: rgba(255, 255, 255, 0.86);
  font-size: 0.72rem;
  font-weight: 600;
}

.hero-benefits li::before {
  content: '✓';
  margin-right: 8px;
  color: #c4de62;
}

.hero-brand {
  display: flex;
  flex: 0 1 310px;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  min-height: 130px;
  padding: 19px 24px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 22px;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.055));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 18px 44px rgba(2, 28, 20, 0.16);
  backdrop-filter: blur(16px);
}

.brand-label {
  margin-bottom: 14px;
  color: rgba(255, 255, 255, 0.56);
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.hero-logo {
  width: min(100%, 200px);
  max-width: none;
  max-height: 50px;
}

.brand-context {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-top: 14px;
  color: rgba(255, 255, 255, 0.64);
  font-size: 0.66rem;
  font-weight: 600;
}

.shell {
  margin-top: 22px;
}

.home-screen {
  width: 100%;
  margin-inline: auto;
}

.home-grid {
  grid-template-columns: repeat(3, minmax(0, 360px));
  grid-auto-rows: 1fr;
  width: 100%;
  justify-content: center;
  gap: 14px;
  margin-bottom: 20px;
}

.home-card {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 230px;
  padding: 30px;
  align-items: flex-start;
  justify-content: space-between;
  text-align: left;
  border: 1px solid #e6ebe8;
  border-radius: 20px;
  background: linear-gradient(145deg, #ffffff 0%, #fbfcfb 100%);
  box-shadow: 0 3px 12px rgba(20, 55, 43, 0.035), 0 1px 2px rgba(20, 55, 43, 0.04);
  overflow: hidden;
}

.home-card::after {
  content: '→';
  position: absolute;
  right: 28px;
  bottom: 30px;
  color: #a8b5ae;
  font-size: 1.25rem;
  transition: transform var(--transition), color var(--transition);
}

.home-card:hover {
  border-color: #cbded3;
  box-shadow: 0 18px 38px rgba(15, 72, 50, 0.10), 0 2px 6px rgba(15, 72, 50, 0.05);
  transform: translateY(-5px);
}

.home-card:hover::after {
  color: var(--green-dark);
  transform: translateX(4px);
}

.home-card:active {
  transform: translateY(-1px);
}

.home-card > span:last-child {
  padding-right: 40px;
}

.home-card strong {
  margin-bottom: 7px;
  font-size: 1.12rem;
  font-weight: 700;
  color: #17241e;
}

.home-card small {
  color: #74827a;
  font-size: 0.86rem;
  line-height: 1.5;
}

.home-icon {
  width: 58px;
  height: 58px;
  border: 1px solid rgba(36, 139, 77, 0.10);
  border-radius: 17px;
  color: #207848;
  background: linear-gradient(145deg, #eff9f2, #e5f4ea);
  box-shadow: inset 0 1px 0 #ffffff, 0 5px 14px rgba(34, 120, 72, 0.08);
}

.home-notice {
  display: flex;
  align-items: center;
  gap: 15px;
  margin-bottom: 0;
  padding: 17px 20px;
  border-color: #dfe9e3;
  border-radius: 15px;
  color: #516159;
  background: #f7faf8;
}

.notice-icon {
  display: grid;
  place-items: center;
  flex: 0 0 38px;
  width: 38px;
  height: 38px;
  border-radius: 11px;
  color: #397a58;
  background: #e9f4ed;
}

.home-notice p,
.home-notice strong,
.home-notice span {
  margin: 0;
}

.home-notice p {
  display: grid;
  gap: 2px;
  font-size: 0.84rem;
}

.home-notice strong {
  color: #31463b;
  font-size: 0.82rem;
}

@media (max-width: 1100px) {
  .topbar { gap: 40px; }
  .home-grid {
    grid-template-columns: repeat(2, minmax(0, 360px));
    justify-content: center;
  }
}

@media (max-width: 900px) {
  .topbar { width: calc(100% - 32px); min-height: 0; padding: 30px 36px; }
  body:not(.tool-view-active) .shell { width: calc(100% - 32px); }
  .hero-content { flex-basis: auto; }
  .hero-brand { width: 100%; min-height: 118px; flex-basis: auto; }
}

@media (max-width: 600px) {
  .topbar { width: calc(100% - 20px); margin-top: 10px; padding: 24px 22px; border-radius: 22px; }
  body:not(.tool-view-active) .shell { width: calc(100% - 20px); }
  .topbar h1 { font-size: 1.95rem; }
  .hero-benefits { gap: 7px 15px; margin-top: 14px; }
  .hero-brand { padding: 18px 20px; border-radius: 18px; }
  .home-grid { grid-template-columns: minmax(0, 360px); justify-content: center; gap: 14px; }
  .home-card { min-height: 132px; padding: 22px; flex-direction: row; align-items: center; justify-content: flex-start; }
  .home-card::after { right: 22px; bottom: auto; }
  .home-icon { flex-basis: 54px; width: 54px; height: 54px; }
  .home-notice { align-items: flex-start; }
}

/* Cabeçalho compacto das ferramentas */
body.tool-view-active .topbar {
  width: min(1700px, calc(100% - 48px));
  min-height: 72px;
  margin-top: 16px;
  padding: 14px clamp(24px, 4vw, 54px);
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  border-radius: 18px;
  background:
    radial-gradient(circle at 84% 0%, rgba(190, 224, 91, 0.10), transparent 24%),
    linear-gradient(135deg, #195f43 0%, #124d38 55%, #0b392d 100%);
  box-shadow: 0 10px 28px rgba(10, 52, 38, 0.14);
}

body.tool-view-active .topbar::before {
  top: -160px;
  right: 12%;
  width: 230px;
  height: 230px;
  opacity: 0.55;
}

body.tool-view-active .topbar::after,
body.tool-view-active .eyebrow,
body.tool-view-active .security-note,
body.tool-view-active .hero-benefits,
body.tool-view-active .brand-label,
body.tool-view-active .brand-context {
  display: none;
}

body.tool-view-active .hero-content {
  flex: 0 1 auto;
  max-width: none;
}

body.tool-view-active .topbar h1 {
  margin: 0;
  font-size: clamp(1.25rem, 2vw, 1.65rem);
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 1.1;
}

body.tool-view-active .hero-brand {
  display: flex;
  flex: 0 0 auto;
  width: auto;
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
}

body.tool-view-active .hero-logo {
  width: clamp(130px, 14vw, 180px);
  max-height: 38px;
}

body.tool-view-active .shell {
  margin-top: 20px;
}

@media (max-width: 600px) {
  body.tool-view-active .topbar {
    width: calc(100% - 20px);
    min-height: 62px;
    margin-top: 10px;
    padding: 12px 18px;
    gap: 18px;
    border-radius: 15px;
  }

  body.tool-view-active .topbar h1 {
    font-size: 1.15rem;
  }

  body.tool-view-active .hero-logo {
    width: 118px;
    max-height: 32px;
  }

  body.tool-view-active .shell {
    margin-top: 12px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .home-card { transition-duration: 0.01ms; }
  .home-card:hover { transform: none; }
}

/* User requested split-tool specific overrides */
#tool-split {
  width: min(96vw, 1720px) !important;
  max-width: 1720px !important;
  position: relative !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  box-sizing: border-box !important;
}

#tool-split .section-head {
  margin-bottom: 12px;
  padding-bottom: 12px;
}

#tool-split .section-head h2 {
  margin-bottom: 3px;
}

#tool-split .status {
  min-height: 0;
  margin-top: 6px;
}

#tool-split .status:empty {
  display: none;
}

#tool-split #split-summary {
  margin-top: 10px;
}

#tool-split #split-workspace {
  margin-top: 16px !important;
}

#tool-split .split-grid {
  display: grid !important;
  grid-template-columns: minmax(620px, 1.1fr) minmax(520px, 0.9fr) !important;
  gap: 28px !important;
}

#tool-split #split-drop {
  width: min(560px, 100%);
  min-height: 118px;
  margin: 0 auto;
  padding: 22px 20px;
  gap: 8px;
}

#tool-split #split-drop .drop-icon {
  width: 40px;
  height: 40px;
  font-size: 1.1rem;
}

#tool-split #split-drop strong {
  font-size: 0.95rem;
}

#tool-split #split-drop small {
  font-size: 0.8rem;
}

#tool-split .thumbnail-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(180px, 1fr)) !important;
  gap: 14px !important;
  align-items: start !important;
}





/* View Single (PDF Reader Mode) */
#tool-split .thumbnail-grid.view-single {
  grid-template-columns: 1fr !important;
  gap: 32px !important;
  background: #eef1f3 !important; /* Reader background */
  padding: 32px 24px !important;
  border-radius: var(--radius-sm);
  align-items: start !important;
}
#tool-split .thumbnail-grid.view-single .thumb {
  margin: 0 auto !important;
  padding: 28px !important;
  background: var(--surface) !important;
  border: 1px solid var(--line) !important;
  box-shadow: var(--shadow-float) !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-start !important;
}

#tool-split .thumbnail-grid.view-single .thumb.page-portrait {
  max-width: 680px !important;
  width: 100% !important;
}

#tool-split .thumbnail-grid.view-single .thumb.page-landscape {
  max-width: 1060px !important;
  width: 100% !important;
}
#tool-split .thumbnail-grid.view-single .thumb:hover {
  transform: none !important;
}
#tool-split .thumbnail-grid.view-single .thumb-preview {
  background: transparent !important;
  display: flex !important;
  justify-content: center !important;
  align-items: flex-start !important;
  width: 100% !important;
  margin-top: 4px !important;
}
#tool-split .thumbnail-grid.view-single .thumb canvas {
  width: auto !important;
  height: auto !important;
  margin: 0 auto !important;
  display: block !important;
  background: #ffffff !important;
  box-shadow: 0 4px 16px rgba(0,0,0,0.1) !important;
  border: 1px solid var(--line-light) !important;
  border-radius: 4px !important;
}
#tool-split .thumbnail-grid.view-single .thumb span {
  font-size: 1.05rem !important;
  padding-bottom: 14px !important;
  margin-bottom: 24px !important;
}

/* Split PDF page previews: keep every card sized by the rendered page. */
#tool-split .thumb-panel {
  min-height: 0;
}

#tool-split .thumbnail-grid {
  grid-template-columns: repeat(2, minmax(220px, 1fr)) !important;
  align-items: start !important;
  align-content: start !important;
  gap: 16px !important;
  max-height: min(78vh, 900px);
  padding: 16px !important;
}

#tool-split .thumb {
  align-self: start !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
  height: auto !important;
  min-height: 0 !important;
  padding: 12px !important;
  overflow: visible !important;
}

#tool-split .thumb-preview,
#tool-split .thumb-placeholder {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: center !important;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  aspect-ratio: auto !important;
  padding: 0 !important;
  background: transparent !important;
  overflow: visible !important;
}

#tool-split .thumb-placeholder {
  min-height: 150px !important;
  align-items: center !important;
  background: var(--surface-alt) !important;
}

#tool-split .thumb canvas {
  display: block !important;
  width: auto !important;
  max-width: 100% !important;
  height: auto !important;
  max-height: none !important;
  object-fit: contain !important;
  background: #ffffff !important;
  border: 1px solid var(--line-light) !important;
  border-radius: 4px !important;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08) !important;
}

#tool-split .thumb span {
  width: 100% !important;
  padding: 0 0 8px !important;
  margin: 0 0 10px !important;
  border-bottom: 1px solid var(--line-light);
}

#tool-split .thumbnail-grid.view-single {
  grid-template-columns: minmax(0, 1fr) !important;
  justify-items: center !important;
  gap: 24px !important;
  padding: 24px !important;
  background: #eef1f3 !important;
}

#tool-split .thumbnail-grid.view-single .thumb {
  box-sizing: border-box !important;
  padding: 20px !important;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
}

#tool-split .thumbnail-grid.view-single .thumb.page-portrait {
  max-width: 760px !important;
}

#tool-split .thumbnail-grid.view-single .thumb.page-landscape {
  max-width: 1120px !important;
}

#tool-split .thumbnail-grid.view-single .thumb-preview {
  margin-top: 0 !important;
  height: auto !important;
  min-height: 0 !important;
  aspect-ratio: auto !important;
}

#tool-split .thumbnail-grid.view-single .thumb canvas {
  width: auto !important;
  height: auto !important;
  max-height: none !important;
  margin: 0 auto !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1) !important;
}

#tool-split .thumbnail-grid.view-single .thumb span {
  font-size: 1.05rem !important;
  margin-bottom: 12px !important;
  padding-bottom: 10px !important;
}

@media (max-width: 900px) {
  #tool-split .split-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  #tool-split .thumbnail-grid {
    grid-template-columns: repeat(2, minmax(140px, 1fr)) !important;
  }
}

@media (max-width: 600px) {
  #tool-split .thumbnail-grid,
  #tool-split .thumbnail-grid.view-single {
    grid-template-columns: minmax(0, 1fr) !important;
    padding: 12px !important;
  }

  #tool-split .thumbnail-grid.view-single .thumb {
    padding: 12px !important;
  }
}

/* ── Dividir PDF: workspace premium ─────────────────── */
#tool-split {
  padding: clamp(22px, 2.5vw, 36px) !important;
  border-color: #e3e9e5;
  border-radius: 22px;
  box-shadow: 0 12px 38px rgba(19, 62, 45, 0.07);
}

#tool-split .section-head {
  align-items: center;
  margin-bottom: 24px;
  padding-bottom: 20px;
}

#tool-split .section-head h2 {
  font-size: clamp(1.35rem, 2vw, 1.7rem);
  letter-spacing: -0.035em;
}

#tool-split .section-head p {
  color: #77837c;
}

#tool-split .section-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  justify-content: flex-end;
}

.split-empty-state {
  display: grid;
  gap: 12px;
  width: min(760px, 100%);
  margin: 34px auto 24px;
  animation: panelIn 0.3s ease both;
}

#tool-split .split-empty-state {
  width: 100%;
  max-width: none;
  margin: 18px 0 24px;
}

#tool-split #split-drop {
  width: 100%;
  min-height: 135px;
  padding: 22px;
  gap: 9px;
  border: 1.5px dashed #a9cdb7;
  border-radius: 15px;
  background: #f8fbf9;
  box-shadow: none;
}

#tool-split #split-drop:hover,
#tool-split #split-drop.dragover {
  border-color: #4a9a69;
  background-color: #f1f8f4;
  box-shadow: 0 6px 18px rgba(24, 102, 64, 0.06);
  transform: none;
}

#tool-split #split-drop .drop-icon {
  width: 48px;
  height: 48px;
  margin-bottom: 0;
  border: 1px solid #cce8d6;
  border-radius: 16px;
  color: #187a45;
  background: #eef8f2;
  box-shadow: 0 6px 16px rgba(24, 122, 69, 0.10);
  transition: background-color .18s ease, transform .18s ease, box-shadow .18s ease;
}

#tool-split #split-drop strong {
  color: #22372c;
  font-size: 1rem;
}

#tool-split #split-drop small {
  color: #7f8b84;
  font-size: 0.84rem;
}

#tool-split #split-file {
  inset: 0;
  width: auto;
  height: auto;
  min-height: 0;
  max-height: none;
  padding: 0;
  border: 0;
}

#tool-split #split-drop:hover .drop-icon,
#tool-split #split-drop.dragover .drop-icon {
  background: #e7f5ec;
  box-shadow: 0 8px 19px rgba(24, 122, 69, .14);
  transform: translateY(-1px);
}

#tool-split #split-drop:focus-within .drop-icon {
  outline: 3px solid rgba(46, 187, 78, .25);
  outline-offset: 3px;
}

#tool-split #split-workspace {
  display: block !important;
  margin-top: 18px !important;
}

#tool-split #split-workspace.hidden {
  display: none !important;
}

#tool-split .split-main-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(360px, 0.85fr);
  align-items: start;
  gap: 20px;
  margin-top: 16px;
}

.split-pages-column,
.split-config-column {
  display: grid;
  min-width: 0;
  gap: 16px;
}

#tool-split #split-summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  margin: 0;
  padding: 11px 14px;
  border: 1px solid #dfe8e2;
  border-radius: 15px;
  background: #f8fbf9;
  box-shadow: none;
}

#tool-split #split-summary > div:first-child {
  display: grid;
  gap: 1px;
  min-width: 0;
}

#tool-split #split-summary .summary-title {
  width: max-content;
  padding: 3px 7px;
  border-radius: 6px;
  color: #267249;
  background: #e8f4ec;
  font-size: 0.62rem;
}

#tool-split #split-summary strong {
  overflow: hidden;
  color: #26372e;
  font-size: 0.92rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#tool-split #split-summary > div:first-child > span:last-child {
  color: #7b8880;
  font-size: 0.78rem;
}

#tool-split #split-summary .ghost-button,
#tool-split #split-summary .text-danger-button {
  min-height: 34px;
  height: 34px;
  padding: 6px 12px;
  font-size: 0.76rem;
  white-space: nowrap;
}

#tool-split #split-summary .text-danger-button {
  min-width: 122px;
}

#tool-split #split-summary .summary-actions {
  display: flex;
  flex: 0 0 auto;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
}

#tool-split .thumb-panel {
  min-height: 0;
  border-color: #e1e8e4;
  border-radius: 17px;
  background: #f3f6f4;
  box-shadow: 0 5px 18px rgba(25, 64, 48, 0.04);
}

#tool-split .thumb-panel-head {
  min-height: 72px;
  padding: 14px 17px;
  border-bottom-color: #e5ebe7;
  background: rgba(255, 255, 255, 0.94);
}

.split-panel-title {
  display: flex;
  align-items: center;
  gap: 13px;
}

.split-panel-title > div {
  display: grid;
  gap: 1px;
}

#tool-split .split-panel-title h3 {
  color: #2b3b32;
  font-size: 0.92rem;
}

#split-page-count {
  color: #849087;
  font-size: 0.72rem;
}

#tool-split .view-toggles {
  display: inline-flex;
  gap: 3px;
  padding: 3px;
  border: 1px solid #e0e7e2;
  border-radius: 10px;
  background: #f3f6f4;
}

#tool-split .thumbnail-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  grid-auto-rows: max-content !important;
  align-items: start !important;
  align-content: start !important;
  gap: 16px !important;
  height: clamp(580px, 74vh, 850px);
  min-height: 580px;
  max-height: 850px;
  overflow-x: hidden;
  overflow-y: auto;
  padding: 14px !important;
  scrollbar-color: #b8c8be transparent;
  scrollbar-width: thin;
}

#tool-split .thumbnail-grid::-webkit-scrollbar {
  width: 8px;
}

#tool-split .thumbnail-grid::-webkit-scrollbar-thumb {
  border: 2px solid #f3f6f4;
  border-radius: 999px;
  background: #b8c8be;
}

#tool-split .thumb {
  position: relative !important;
  align-self: start !important;
  height: auto !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 10px !important;
  border-color: #e0e7e2 !important;
  border-radius: 12px !important;
  background: #fff;
  box-shadow: 0 2px 8px rgba(20, 55, 42, 0.04);
}

#tool-split .thumb:hover {
  border-color: #b9d3c2 !important;
  box-shadow: 0 10px 24px rgba(19, 77, 52, 0.09);
  transform: none !important;
}

#tool-split .thumb-preview,
#tool-split .thumb-placeholder {
  position: relative !important;
  height: auto !important;
  min-height: 0 !important;
  margin: 0 !important;
  overflow: visible !important;
}

#tool-split .thumb-placeholder {
  min-height: 150px !important;
  overflow: hidden !important;
}

#tool-split .thumb canvas {
  position: static !important;
  display: block !important;
  width: auto !important;
  max-width: 100% !important;
  height: auto !important;
  max-height: none !important;
  object-fit: contain !important;
  transform: none !important;
}

#tool-split .thumbnail-grid.view-single {
  grid-template-columns: minmax(0, 1fr) !important;
  grid-auto-rows: max-content !important;
  align-items: start !important;
  align-content: start !important;
}

#tool-split .thumb span {
  color: #516159;
  font-size: 0.76rem !important;
  font-weight: 650;
}

.split-config-card {
  padding: 19px;
  border: 1px solid #e1e8e4;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 4px 16px rgba(25, 64, 48, 0.035);
}

.split-card-heading {
  display: grid;
  gap: 4px;
  margin-bottom: 15px;
}

.split-card-heading h3 {
  margin: 0;
  color: #26372e;
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: -0.015em;
}

.split-card-heading p {
  margin: 0;
  color: #849087;
  font-size: 0.76rem;
}

#tool-split .split-config-card .field-row {
  grid-template-columns: 0.85fr 1.15fr;
  gap: 12px;
  margin: 0;
}

#tool-split .split-config-card label > span {
  color: #536159;
  font-size: 0.76rem;
}

#tool-split .split-config-card input,
#tool-split .split-config-card select,
#tool-split .split-config-card .custom-dropdown-toggle {
  height: 40px;
  min-height: 40px;
  max-height: 40px;
  border-color: #dfe6e1;
  background-color: #fbfcfb;
}

#tool-split .quick-docs {
  gap: 7px;
  margin: 0;
}

#tool-split .template-chip {
  min-height: 33px;
  padding: 5px 10px;
  border-width: 1px;
  border-color: #dce6df;
  border-radius: 9px;
  background: #f9fbfa;
  font-size: 0.75rem;
}

#tool-split .model-template-chip {
  padding: 2px;
}

#tool-split .model-template-chip > button:first-child {
  min-height: 29px;
  padding: 4px 9px;
  border: 0;
  color: #415249;
  background: transparent;
  font-size: 0.75rem;
}

#tool-split .split-action-card {
  border-color: #cfe2d5;
  background: linear-gradient(145deg, #f7fbf8, #f2f8f4);
}

#tool-split .group-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 9px;
  margin: 0;
}

#tool-split .group-actions button {
  width: 100%;
  min-height: 43px;
}

#tool-split #add-group {
  background: #397b57;
}

#tool-split #add-group:hover {
  background: #306d4b;
}

#tool-split .split-documents-card {
  min-height: 124px;
}

#tool-split #group-list > .file-summary {
  display: grid;
  place-items: center;
  min-height: 72px;
  margin: 0;
  padding: 16px;
  border: 1px dashed #d7e2db;
  border-radius: 11px;
  color: #8a958e;
  text-align: center;
  background: #fafcfb;
  font-size: 0.78rem;
}

#tool-split .group-list {
  gap: 10px;
}

#tool-split .group-item {
  padding: 14px;
  border-width: 1px;
  border-color: #dfe7e2;
  border-radius: 12px;
  background: #fbfcfb;
}

#tool-split .group-item-header,
#tool-split .group-item:not(.has-dependent) .group-item-header,
#tool-split .group-item.has-dependent .group-item-header {
  grid-template-columns: minmax(0, 1fr) minmax(120px, 0.72fr);
  grid-template-areas:
    "doc pages"
    "kind final"
    "dependent dependent";
  gap: 10px;
}

#tool-split .group-item-header .danger-button {
  justify-self: end;
  width: 36px;
  height: 34px;
  min-height: 34px;
}

#tool-split .document-form-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 38px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid #e5ebe7;
}

#tool-split .document-form-error {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  line-height: 1.4;
}

#tool-split .document-remove-button {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: auto;
  min-width: 92px;
  height: 36px;
  min-height: 36px;
  padding: 7px 14px;
  border-color: #d8464d;
  color: #fff;
  background: #d8464d;
  white-space: nowrap;
}

#tool-split .document-remove-button:hover {
  border-color: #bd363d;
  color: #fff;
  background: #bd363d;
}

#tool-split .document-remove-button:active {
  background: #a92f35;
}

#tool-split .document-remove-button:focus-visible {
  outline: 3px solid rgba(216, 70, 77, 0.24);
  outline-offset: 2px;
}

@media (max-width: 1180px) {
  #tool-split .split-main-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  #tool-split .split-config-column {
    grid-template-columns: minmax(0, 1fr);
  }

  #tool-split .split-documents-card {
    grid-column: 1 / -1;
  }

  #tool-split .split-action-card {
    grid-column: 1 / -1;
  }

  #tool-split .thumbnail-grid {
    height: min(70vh, 760px);
    min-height: 520px;
  }
}

@media (max-width: 760px) {
  #tool-split {
    width: calc(100vw - 24px) !important;
    padding: 18px !important;
  }

  #tool-split .section-head,
  #tool-split .thumb-panel-head,
  #tool-split .loaded-file-card {
    align-items: stretch;
    flex-direction: column;
  }

  #tool-split .section-actions,
  #tool-split .summary-actions {
    justify-content: flex-start;
  }

  #tool-split #split-drop {
    min-height: 135px;
    padding: 22px 16px;
  }

  #tool-split .thumbnail-grid {
    height: max(420px, 62vh);
    min-height: 420px;
    max-height: 680px;
  }

  #tool-split .split-config-column,
  #tool-split .split-config-card .field-row,
  #tool-split .group-actions {
    grid-template-columns: minmax(0, 1fr);
  }

  #tool-split .split-documents-card,
  #tool-split .split-action-card {
    grid-column: auto;
  }

  #tool-split .group-item-header,
  #tool-split .group-item:not(.has-dependent) .group-item-header,
  #tool-split .group-item.has-dependent .group-item-header {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "doc" "pages" "kind" "dependent" "final";
  }

  #tool-split .document-form-footer {
    align-items: stretch;
    flex-direction: column;
  }

  #tool-split .document-remove-button {
    align-self: flex-end;
  }
}

@media (max-width: 560px) {
  #tool-split #split-summary {
    grid-template-columns: minmax(0, 1fr);
    gap: 9px;
  }

  #tool-split #split-summary .summary-actions {
    justify-content: flex-start;
  }
}

/* ── Dividir PDF geral ───────────────────────────────── */
html,
body {
  max-width: 100%;
  overflow-x: hidden;
}

.split-prepared-card {
  background: linear-gradient(145deg, #f8fcf9, #f3f9f5);
  border-color: #d5e6da;
}

.prepared-document-list {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.prepared-empty {
  display: block;
  width: 100%;
  padding: 10px 12px;
  border: 1px dashed #d6e3da;
  border-radius: 9px;
  color: #87938b;
  background: rgba(255, 255, 255, 0.6);
  font-size: 0.75rem;
  text-align: center;
}

.prepared-document-chip {
  min-height: 32px;
  max-width: 100%;
  padding: 6px 10px;
  border: 1px solid #bcd9c6;
  border-radius: 9px;
  color: #286744;
  background: #e8f5ec;
  box-shadow: 0 2px 7px rgba(31, 105, 65, 0.06);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.73rem;
  font-weight: 700;
  transition: transform var(--transition), border-color var(--transition), background var(--transition), box-shadow var(--transition);
}

.prepared-document-chip:hover {
  border-color: #86bd99;
  background: #dff1e5;
  box-shadow: 0 5px 12px rgba(31, 105, 65, 0.10);
  transform: translateY(-1px);
}

.prepared-document-chip.active {
  position: relative;
  border-color: #39825a;
  color: #fff;
  background: #39825a;
  box-shadow: 0 5px 13px rgba(38, 113, 73, 0.20);
}

.prepared-document-chip.active::after {
  content: ' ↑';
  margin-left: 5px;
  font-size: 0.68rem;
}

#tool-split .split-documents-card {
  animation: splitEditorIn 0.22s ease both;
}

#tool-split .split-editor-actions {
  display: flex;
  justify-content: flex-end;
  gap: 9px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid #e7ece9;
}

#tool-split .split-blank-document-button {
  width: 100%;
  margin-top: 12px;
}

#tool-split .split-editor-actions button {
  min-height: 40px;
}

#tool-split #add-group {
  border: 1px solid #9fc9ad;
  color: #225f3f;
  background: #eaf5ed;
}

#tool-split #add-group:hover {
  border-color: #75ad89;
  color: #174d32;
  background: #deefe3;
}

#tool-split #add-group:active {
  background: #d2e8d9;
}

#tool-split #add-group:focus-visible {
  outline: 3px solid rgba(46, 139, 78, 0.20);
  outline-offset: 2px;
}

#tool-split #split-done {
  min-width: 112px;
  background: #397b57;
}

#tool-split #split-done:hover {
  background: #306d4b;
}

#tool-split #split-done:active {
  background: #285e40;
}

#tool-split #split-done:focus-visible {
  outline: 3px solid rgba(46, 139, 78, 0.22);
  outline-offset: 2px;
}

#tool-split #split-done:disabled {
  opacity: 0.42;
  cursor: not-allowed;
}

#tool-split .split-action-card .group-actions {
  grid-template-columns: minmax(0, 1fr);
}

@keyframes splitEditorIn {
  from { opacity: 0; transform: translateY(5px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  #tool-split .split-documents-card,
  .prepared-document-chip {
    animation: none;
    transition: none;
  }

  .prepared-document-chip:hover {
    transform: none;
  }
}

@media (max-width: 520px) {
  #tool-split .split-editor-actions {
    flex-direction: column;
  }

  #tool-split .split-editor-actions button {
    width: 100%;
  }
}

.home-card:nth-child(7) {
  grid-column: 2;
}

.home-icon-simple-split {
  color: #326f72;
  border-color: rgba(45, 116, 119, 0.12);
  background: linear-gradient(145deg, #eff8f7, #e3f1f0);
}

#tool-split-simple {
  width: 100%;
  max-width: 100%;
  margin: 0;
  position: static;
  left: auto;
  transform: none;
  padding: clamp(22px, 2.5vw, 36px);
  box-sizing: border-box;
  border-color: #e3e9e5;
  border-radius: 22px;
  box-shadow: 0 12px 38px rgba(19, 62, 45, 0.07);
}

#tool-split-simple .section-head {
  align-items: center;
  margin-bottom: 16px;
  padding-bottom: 20px;
}

#tool-split-simple #simple-split-status:empty {
  display: none;
}

#tool-split-simple .section-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 9px;
}

#tool-split-simple #simple-split-clear {
  border: 1px solid var(--line);
}

#tool-split-simple .split-empty-state {
  width: min(760px, 100%);
  margin: 12px auto 24px;
}

#simple-split-drop {
  min-height: 270px;
  padding: 44px 28px;
  gap: 11px;
  border: 1.5px dashed #a9cdb7;
  border-radius: 20px;
  background: radial-gradient(circle at 50% 5%, rgba(46, 150, 88, 0.07), transparent 44%), #f8fbf9;
}

#simple-split-drop .drop-icon {
  width: 58px;
  height: 58px;
  border: 1px solid #cbe4d3;
  border-radius: 17px;
  color: #27784d;
  background: linear-gradient(145deg, #eff9f2, #e3f3e8);
}

#simple-split-workspace {
  width: 100%;
  max-width: 100%;
  margin-top: 0;
  box-sizing: border-box;
}

#simple-split-summary {
  margin: 0;
  padding: 17px 18px;
  border: 1px solid #dfe8e2;
  border-radius: 15px;
  background: #f8fbf9;
}

#simple-split-summary > div:first-child {
  display: grid;
  gap: 2px;
  min-width: 0;
}

#simple-split-summary .summary-title {
  width: max-content;
  padding: 3px 7px;
  border-radius: 6px;
  background: #e8f4ec;
  font-size: 0.62rem;
}

#simple-split-summary strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#simple-split-summary .summary-actions button {
  min-height: 36px;
  height: 36px;
  padding: 7px 12px;
  font-size: 0.76rem;
  white-space: nowrap;
}

.simple-split-main-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(360px, 0.85fr);
  align-items: start;
  gap: 20px;
  margin-top: 16px;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

.simple-split-pages,
.simple-split-config,
#tool-split-simple .split-config-card,
#tool-split-simple .thumb-panel {
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}

.simple-split-config {
  display: grid;
  min-width: 0;
  gap: 16px;
}

#tool-split-simple .thumb-panel {
  min-height: 0;
  border-color: #e1e8e4;
  border-radius: 17px;
  background: #f3f6f4;
}

#tool-split-simple .thumb-panel-head {
  min-height: 72px;
  padding: 14px 17px;
}

#tool-split-simple .view-toggles {
  display: inline-flex;
  gap: 3px;
  padding: 3px;
  border: 1px solid #e0e7e2;
  border-radius: 10px;
  background: #f3f6f4;
}

#simple-split-thumbnails {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-rows: max-content;
  align-items: start;
  align-content: start;
  gap: 16px;
  height: clamp(580px, 74vh, 850px);
  min-height: 580px;
  max-height: 850px;
  overflow-x: hidden;
  overflow-y: auto;
  padding: 14px;
}

#simple-split-thumbnails.view-single {
  grid-template-columns: minmax(0, 1fr);
}

#tool-split-simple .thumb {
  position: relative;
  align-self: start;
  height: auto;
  min-height: 0;
  margin: 0;
  padding: 10px;
  border-color: #e0e7e2;
  border-radius: 12px;
  overflow: visible;
}

#tool-split-simple .thumb-preview,
#tool-split-simple .thumb-placeholder {
  position: relative;
  width: 100%;
  height: auto;
  min-height: 0;
  aspect-ratio: auto;
  overflow: visible;
}

#tool-split-simple .thumb-placeholder {
  min-height: 150px;
  overflow: hidden;
}

#tool-split-simple .thumb canvas {
  position: static;
  display: block;
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: none;
  object-fit: contain;
}

#tool-split-simple .split-config-card {
  padding: 19px;
}

.simple-split-fields {
  display: grid;
  gap: 12px;
  margin-bottom: 14px;
}

.simple-split-fields label > span {
  color: #536159;
  font-size: 0.76rem;
}

#simple-add-document,
#simple-generate-zip {
  width: 100%;
  min-height: 43px;
}

.simple-document-list {
  display: grid;
  gap: 9px;
}

.simple-empty-list {
  display: grid;
  place-items: center;
  min-height: 72px;
  margin: 0;
  border-style: dashed;
  color: #8a958e;
  text-align: center;
  background: #fafcfb;
  font-size: 0.78rem;
}

.simple-document-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border: 1px solid #dfe7e2;
  border-radius: 11px;
  background: #fbfcfb;
}

.simple-document-item > div:first-child {
  display: grid;
  min-width: 0;
  gap: 3px;
}

.simple-document-item strong {
  overflow-wrap: anywhere;
  color: #314139;
  font-size: 0.82rem;
}

.simple-document-item small {
  color: #849087;
  font-size: 0.72rem;
}

.simple-document-item .icon-button,
.simple-document-item .danger-button {
  min-height: 34px;
  height: 34px;
  font-size: 0.72rem;
}

@media (max-width: 1100px) {
  .home-card:nth-child(7) {
    grid-column: 1 / -1;
    justify-self: center;
    max-width: 360px;
  }
}

@media (max-width: 1180px) {
  .simple-split-main-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  #simple-split-thumbnails {
    height: min(70vh, 760px);
    min-height: 520px;
  }
}

@media (max-width: 600px) {
  .home-card:nth-child(7) {
    grid-column: auto;
    max-width: none;
  }

  #tool-split-simple {
    width: 100%;
    max-width: 100%;
    padding: 18px;
  }

  #tool-split-simple .section-head,
  #tool-split-simple .thumb-panel-head,
  #simple-split-summary {
    align-items: stretch;
    flex-direction: column;
  }

  #tool-split-simple .section-actions,
  #simple-split-summary .summary-actions {
    justify-content: flex-start;
  }

  #simple-split-thumbnails {
    grid-template-columns: minmax(0, 1fr);
    height: max(420px, 62vh);
    min-height: 420px;
    max-height: 680px;
  }

  .simple-document-item {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Dividir RH: colunas com bordas inferiores alinhadas */
.editable-combobox {
  position: relative;
  width: 100%;
  min-width: 0;
}

#tool-split .editable-combobox-input {
  padding-right: 44px;
}

.editable-combobox-arrow {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  border-left: 1px solid #e1e7e3;
  border-radius: 0 9px 9px 0;
  color: #738078;
  background: transparent;
}

.editable-combobox-arrow:hover {
  color: #276b47;
  background: #edf6f0;
}

.editable-combobox-arrow:focus-visible {
  outline: 3px solid rgba(46, 139, 78, 0.18);
  outline-offset: -2px;
}

.editable-combobox.open .editable-combobox-input {
  border-color: var(--green);
  box-shadow: 0 0 0 3px rgba(46, 187, 78, 0.12);
}

.editable-combobox.open .editable-combobox-arrow svg {
  transform: rotate(180deg);
}

.editable-combobox-popup {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 260;
  width: 100%;
  min-width: min(330px, 82vw);
  overflow: hidden;
  border: 1px solid #dce5df;
  border-radius: 11px;
  background: #fff;
  box-shadow: 0 14px 32px rgba(19, 57, 42, 0.15);
  animation: ddSlideIn 0.18s ease both;
}

.editable-combobox-options {
  max-height: 230px;
  overflow-y: auto;
  padding: 5px;
  scrollbar-width: thin;
  scrollbar-color: #b8c8be transparent;
}

.editable-combobox-option {
  display: flex;
  align-items: center;
  gap: 4px;
  border-radius: 7px;
}

.editable-combobox-option-main {
  flex: 1 1 auto;
  min-width: 0;
  padding: 8px 9px;
  border: 0;
  border-radius: 7px;
  overflow: hidden;
  color: #394a41;
  background: transparent;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.76rem;
}

.editable-combobox-option-main:hover,
.editable-combobox-option-main.highlighted,
.editable-combobox-option-main.selected {
  color: #235f3e;
  background: #eaf5ed;
}

.editable-combobox-mini-action {
  flex: 0 0 auto;
  min-height: 28px;
  padding: 4px 6px;
  border: 1px solid #dce5df;
  border-radius: 6px;
  color: #617068;
  background: #fff;
  font-size: 0.64rem;
}

.editable-combobox-mini-action.danger {
  color: #bd3d43;
  border-color: #f1c9cb;
}

.editable-combobox-empty {
  padding: 18px 10px;
  color: #87938c;
  text-align: center;
  font-size: 0.74rem;
}

.editable-combobox-footer {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  padding: 7px;
  border-top: 1px solid #e6ece8;
  background: #f8faf9;
}

.editable-combobox-footer button {
  flex: 1 1 auto;
  min-height: 30px;
  padding: 5px 8px;
  border: 1px solid #d9e4dc;
  border-radius: 7px;
  color: #326c4c;
  background: #fff;
  font-size: 0.68rem;
  font-weight: 650;
}

.editable-combobox-footer button:hover {
  border-color: #9ec5ab;
  background: #eaf5ed;
}

@media (max-width: 520px) {
  .editable-combobox-popup {
    min-width: 100%;
  }
}

@media (min-width: 1181px) {
  #tool-split .split-main-grid {
    align-items: stretch;
    gap: 24px;
  }

  #tool-split .split-pages-column {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
  }

  #tool-split .thumb-panel {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    height: 100%;
    min-height: 0;
  }

  #tool-split .thumbnail-grid {
    flex: 1 1 auto;
    height: 0;
    min-height: 720px;
    max-height: none;
    overflow-y: auto;
  }

  #tool-split .split-config-column {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
  }

  #tool-split .split-action-card {
    margin-top: auto;
  }
}

@media (max-width: 1180px) {
  #tool-split .split-main-grid {
    align-items: start;
  }

  #tool-split .split-pages-column,
  #tool-split .thumb-panel,
  #tool-split .split-config-column {
    height: auto;
  }

  #tool-split .split-action-card {
    margin-top: 0;
  }
}

/* Dividir RH: estado vazio do editor */
#tool-split .split-configure-card {
  min-width: 0;
}

#tool-split .split-configure-card > .split-card-heading {
  margin-bottom: 6px;
}

#tool-split .split-editor-empty {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: visible;
  background: transparent;
  animation: splitEmptyEditorIn 0.22s ease both;
}

#tool-split .split-editor-empty.hidden {
  display: none !important;
}

.split-empty-editor-message {
  display: grid;
  place-items: center;
  gap: 5px;
  margin: 4px 0 18px;
  padding: 14px;
  color: #66756d;
  text-align: center;
}

.split-empty-editor-message strong {
  color: #42534a;
  font-size: 0.86rem;
}

.split-empty-editor-message p {
  max-width: 340px;
  margin: 0;
  color: #849087;
  font-size: 0.74rem;
  line-height: 1.5;
}

#tool-split .split-empty-editor-message {
  margin: 4px 0 0;
  padding: 14px 12px 10px;
}

#tool-split .split-editor-context {
  margin: 0 0 12px;
  color: #849087;
  font-size: .76rem;
}

#tool-split .split-rh-finalize-section {
  margin-top: 14px;
  padding-top: 15px;
  border-top: 1px solid #dfe8e2;
}

#tool-split .split-rh-finalize-section .split-card-heading {
  margin-bottom: 10px;
}

#tool-split .split-rh-finalize-section .group-actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  margin: 0;
}

#tool-split .split-rh-finalize-section .group-actions button {
  width: 100%;
}

.split-empty-editor-icon {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  margin-bottom: 3px;
  border: 1px solid #dae6de;
  border-radius: 12px;
  color: #71907c;
  background: #f0f5f2;
}

.split-empty-editor-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 11px;
  opacity: 0.72;
  pointer-events: none;
  user-select: none;
}

.split-empty-editor-fields label > span {
  color: #7e8a83;
  font-size: 0.72rem;
}

.split-disabled-field {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  min-height: 40px;
  padding: 0 12px;
  border: 1px solid #e1e6e3;
  border-radius: 9px;
  color: #9aa39e;
  background: #f2f4f3;
  font-size: 0.75rem;
}

.split-disabled-field b {
  color: #a7afaa;
  font-size: 0.82rem;
}

@keyframes splitEmptyEditorIn {
  from { opacity: 0; transform: translateY(5px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (min-width: 1181px) {
  #tool-split .split-editor-empty {
    flex: 0 0 auto;
  }
}

@media (max-width: 1180px) {
  #tool-split .split-editor-empty {
    min-height: 0;
  }
}

@media (max-width: 600px) {
  #tool-split .split-editor-empty {
    min-height: 0;
  }

  .split-empty-editor-fields {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (prefers-reduced-motion: reduce) {
  #tool-split .split-editor-empty {
    animation: none;
  }
}

/* Dividir PDF geral: documentos preparados e editor único */
#tool-split-simple .simple-document-list {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

#tool-split-simple .simple-blank-document-button {
  width: 100%;
  min-height: 38px;
  margin-top: 12px;
  border-color: #b8d4c1;
  color: #286444;
  background: #eaf5ed;
}

#tool-split-simple .simple-blank-document-button:hover {
  border-color: #84b495;
  color: #1e5136;
  background: #deefe3;
}

#tool-split-simple .simple-editor-empty,
#tool-split-simple .simple-editor-card {
  animation: splitEmptyEditorIn 0.22s ease both;
}

#tool-split-simple .simple-editor-empty {
  min-height: 260px;
  border-color: #dfe7e2;
  background: linear-gradient(155deg, #ffffff 0%, #f8faf9 100%);
}

#tool-split-simple .simple-editor-empty.hidden,
#tool-split-simple .simple-editor-card.hidden {
  display: none !important;
}

.simple-empty-editor-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 11px;
  opacity: 0.72;
  pointer-events: none;
  user-select: none;
}

.simple-empty-editor-fields label > span {
  color: #7e8a83;
  font-size: 0.72rem;
}

#tool-split-simple .simple-editor-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid #e5ebe7;
}

#tool-split-simple .simple-editor-footer button {
  min-width: 104px;
  min-height: 40px;
  white-space: nowrap;
}

#tool-split-simple #simple-remove-document {
  color: #fff;
  border-color: #d8464d;
  background: #d8464d;
}

#tool-split-simple #simple-remove-document:hover {
  border-color: #bd363d;
  background: #bd363d;
}

#tool-split-simple #simple-done-document {
  color: #fff;
  background: #397b57;
}

#tool-split-simple #simple-done-document:hover {
  background: #306d4b;
}

#tool-split-simple .simple-prepared-chip.active::after {
  content: ' ↑';
  margin-left: 5px;
  font-size: 0.68rem;
}

@media (max-width: 600px) {
  .simple-empty-editor-fields {
    grid-template-columns: minmax(0, 1fr);
  }

  #tool-split-simple .simple-editor-footer {
    align-items: stretch;
    flex-direction: column;
  }

  #tool-split-simple .simple-editor-footer button {
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  #tool-split-simple .simple-editor-empty,
  #tool-split-simple .simple-editor-card {
    animation: none;
  }
}

/* Imagem para PDF: workspace compacto */
#tool-images {
  width: 100%;
  max-width: 100%;
  padding: clamp(22px, 2.5vw, 36px);
  border-color: #e3e9e5;
  border-radius: 22px;
  box-shadow: 0 12px 38px rgba(19, 62, 45, 0.07);
}

#tool-images .section-head {
  align-items: center;
  margin-bottom: 20px;
  padding-bottom: 18px;
}

#tool-images .section-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 9px;
}

.images-upload-card,
.images-preview-card {
  padding: 19px;
  border: 1px solid #e1e8e4;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 4px 16px rgba(25, 64, 48, 0.035);
}

#tool-images #images-drop {
  min-height: 150px;
  padding: 26px 22px;
  gap: 8px;
  border: 1.5px dashed #a9cdb7;
  border-radius: 16px;
  background: #f8fbf9;
}

#tool-images #images-drop:hover,
#tool-images #images-drop.dragover {
  border-color: #4a9a69;
  background: #f1f8f4;
  box-shadow: 0 9px 22px rgba(24, 102, 64, 0.07);
}

#tool-images #images-drop .drop-icon {
  width: 46px;
  height: 46px;
  border: 1px solid #cbe4d3;
  border-radius: 14px;
  color: #27784d;
  background: #e8f5ec;
}

#tool-images #images-upload-actions {
  margin: 0;
  padding: 15px 17px;
  border-color: #dce7e0;
  background: #f8fbf9;
}

#tool-images #images-upload-count {
  color: #34483d;
  font-size: 0.86rem;
}

.images-main-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(340px, 0.75fr);
  align-items: stretch;
  gap: 20px;
  margin-top: 18px;
}

.images-preview-card {
  display: flex;
  min-width: 0;
  min-height: 0;
  flex-direction: column;
}

.images-pages-scroll {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  grid-auto-rows: max-content;
  align-content: start;
  gap: 13px;
  height: 690px;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  padding: 4px 7px 4px 4px;
  scrollbar-width: thin;
  scrollbar-color: #b8c8be transparent;
}

.images-empty-preview {
  display: grid;
  grid-column: 1 / -1;
  place-items: center;
  align-content: center;
  min-height: 260px;
  padding: 28px;
  border: 1px dashed #d8e3dc;
  border-radius: 13px;
  color: #87938c;
  text-align: center;
  background: #fafcfb;
}

.images-empty-preview > span {
  display: grid;
  place-items: center;
  width: 46px;
  height: 58px;
  margin-bottom: 10px;
  border: 1px solid #dce5df;
  border-radius: 8px;
  color: #769080;
  background: #f1f5f2;
  font-size: 1.35rem;
}

.images-empty-preview strong {
  color: #4e5f56;
  font-size: 0.86rem;
}

.images-empty-preview p {
  margin: 4px 0 0;
  font-size: 0.75rem;
}

#tool-images #images-list .image-card {
  position: relative;
  grid-template-rows: 210px minmax(78px, auto) auto auto;
  padding: 12px;
  border-width: 1px;
  border-color: #dfe7e2;
  border-radius: 13px;
  cursor: grab;
  background: #fff;
}

#tool-images #images-list .image-card:active {
  cursor: grabbing;
}

#tool-images #images-list .image-card.dragging {
  opacity: 0.48;
}

#tool-images #images-list .image-card.drag-over {
  border-color: #4d9a6c;
  box-shadow: 0 0 0 3px rgba(60, 142, 89, 0.12);
}

#tool-images .image-card-preview {
  height: 210px;
  min-height: 210px;
  padding: 10px;
  background: #f1f4f2;
}

#tool-images .image-card-meta > strong:not(.image-page-label) {
  overflow: hidden;
  color: #536159;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.76rem;
}

#tool-images .image-card .item-actions {
  display: flex;
  gap: 6px;
}

#tool-images .image-card .item-actions button {
  min-height: 34px;
  height: 34px;
  font-size: 0.72rem;
}

.images-config-column {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 16px;
}

#tool-images .images-config-card,
#tool-images .images-generate-card {
  padding: 19px;
}

.images-config-fields {
  display: grid;
  gap: 13px;
}

.images-config-fields label > span {
  color: #536159;
  font-size: 0.76rem;
}

#tool-images .images-generate-card {
  margin-top: auto;
  border-color: #cfe2d5;
  background: linear-gradient(145deg, #f7fbf8, #f1f8f3);
}

#tool-images #generate-images {
  width: 100%;
  min-height: 45px;
}

#tool-images #generate-images:disabled,
#tool-images .custom-dropdown.disabled .custom-dropdown-toggle {
  opacity: 0.48;
  cursor: not-allowed;
}

.custom-dropdown-option.keyboard-focused {
  color: var(--green-dark);
  background: var(--green-soft);
  font-weight: 600;
}

@media (max-width: 1050px) {
  .images-main-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .images-pages-scroll {
    height: min(68vh, 720px);
  }

  #tool-images .images-generate-card {
    margin-top: 0;
  }
}

@media (max-width: 600px) {
  #tool-images {
    padding: 18px;
  }

  #tool-images .section-head,
  #tool-images #images-upload-actions {
    align-items: stretch;
    flex-direction: column;
  }

  #tool-images .section-actions,
  #tool-images #images-upload-actions .summary-actions {
    justify-content: flex-start;
  }

  .images-pages-scroll {
    grid-template-columns: minmax(0, 1fr);
    height: min(66vh, 640px);
  }

  #tool-images .image-card .item-actions {
    flex-wrap: wrap;
  }

  #tool-images .image-card .item-actions button {
    min-width: 44px;
    min-height: 40px;
  }
}

/* Home: frame compartilhado entre hero e ferramentas */
.app-frame {
  width: min(1768px, 100%);
  margin: 0 auto;
  padding: 24px;
  box-sizing: border-box;
}

.app-frame > .topbar,
.app-frame > .shell {
  width: 100%;
  max-width: 100%;
  margin-right: 0;
  margin-left: 0;
  box-sizing: border-box;
}

.app-frame > .topbar {
  margin-top: 0;
}

.app-frame > .shell {
  margin-top: 20px;
  margin-bottom: 32px;
}

.home-screen,
.home-grid {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

.home-grid {
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  grid-auto-rows: 1fr;
  justify-content: stretch;
  gap: clamp(16px, 1.25vw, 22px);
  margin: 0 0 20px;
}

.home-grid > .home-card {
  grid-column: span 2;
  width: 100%;
  max-width: none;
  min-width: 0;
  min-height: 220px;
  height: 100%;
  padding: 28px;
  border-radius: 22px;
  box-sizing: border-box;
}

.home-grid > .home-card:nth-child(5) {
  grid-column: 2 / span 2;
}

.home-grid > .home-card:nth-child(6) {
  grid-column: 4 / span 2;
}

.home-grid > .home-card:nth-child(7) {
  grid-column: 6 / span 2;
  justify-self: stretch;
}

@media (max-width: 1200px) {
  .app-frame {
    padding: 20px;
  }

  .home-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .home-grid > .home-card,
  .home-grid > .home-card:nth-child(5),
  .home-grid > .home-card:nth-child(6) {
    grid-column: auto;
  }

  .home-grid > .home-card:nth-child(7) {
    grid-column: 1 / -1;
    justify-self: center;
    width: calc((100% - clamp(16px, 1.25vw, 22px)) / 2);
    max-width: none;
  }
}

@media (max-width: 640px) {
  .app-frame {
    padding: 16px;
  }

  .app-frame > .shell {
    margin-top: 16px;
  }

  .home-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
  }

  .home-grid > .home-card,
  .home-grid > .home-card:nth-child(5),
  .home-grid > .home-card:nth-child(6),
  .home-grid > .home-card:nth-child(7) {
    grid-column: auto;
    justify-self: stretch;
    width: 100%;
    max-width: none;
    min-height: 132px;
    padding: 22px;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
  }
}

/* Ajustes compartilhados de fluxo e controles */
.images-main-layout:not(.hidden) {
  animation: imagesWorkspaceIn 0.24s ease both;
}

#tool-images #images-status:empty {
  display: none;
}

@keyframes imagesWorkspaceIn {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

#tool-images .images-config-column {
  align-self: start;
  justify-content: flex-start;
}

#tool-images .images-generate-card {
  margin-top: 0;
}

#tool-images .image-card .item-actions button:disabled {
  opacity: 0.34;
  cursor: not-allowed;
  color: #8e9992;
  border-color: #e1e6e3;
  background: #f3f5f4;
  box-shadow: none;
}

#tool-images input:not([type="file"]),
#tool-split input:not([type="file"]),
#tool-split-simple input:not([type="file"]),
#tool-images .custom-dropdown-toggle,
#tool-split .custom-dropdown-toggle,
#tool-split-simple .custom-dropdown-toggle,
#tool-split .editable-combobox-input {
  display: flex;
  align-items: center;
  height: 42px;
  min-height: 42px;
  max-height: 42px;
  padding-top: 0;
  padding-bottom: 0;
  line-height: normal;
  box-sizing: border-box;
}

#tool-images .custom-dropdown-text,
#tool-split .custom-dropdown-text,
#tool-split-simple .custom-dropdown-text {
  display: flex;
  align-items: center;
  min-height: 100%;
  line-height: normal;
}

#tool-images .custom-dropdown-arrow,
#tool-split .custom-dropdown-arrow,
#tool-split-simple .custom-dropdown-arrow {
  align-self: stretch;
  display: flex;
  align-items: center;
  justify-content: center;
}

#tool-split .editable-combobox-arrow {
  height: 42px;
}

body.tool-view-active .topbar {
  cursor: pointer;
  transition: box-shadow var(--transition), filter var(--transition);
}

body.tool-view-active .topbar:hover {
  filter: brightness(1.035);
  box-shadow: 0 13px 32px rgba(10, 52, 38, 0.18);
}

body.tool-view-active .topbar:focus-visible {
  outline: 3px solid rgba(87, 169, 114, 0.34);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  .images-main-layout:not(.hidden) {
    animation: none;
  }
}

/* Imagem para PDF: nomes por modo de saída */
.images-individual-config {
  margin-top: 16px;
  padding-top: 15px;
  border-top: 1px solid #e5ebe7;
}

.images-individual-heading {
  display: grid;
  gap: 2px;
  margin-bottom: 10px;
}

.images-individual-heading strong {
  color: #34483d;
  font-size: 0.82rem;
}

.images-individual-heading span {
  color: #849087;
  font-size: 0.72rem;
}

.images-individual-list {
  display: grid;
  gap: 9px;
  max-height: 390px;
  overflow-y: auto;
  padding-right: 4px;
  scrollbar-width: thin;
  scrollbar-color: #b8c8be transparent;
}

.images-individual-item {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  padding: 9px;
  border: 1px solid #dfe7e2;
  border-radius: 11px;
  background: #fafcfb;
}

.images-individual-item > img,
.images-individual-thumb {
  display: grid;
  place-items: center;
  width: 58px;
  height: 66px;
  overflow: hidden;
  border: 1px solid #e0e6e2;
  border-radius: 7px;
  background: #f0f3f1;
}

.images-individual-content {
  display: grid;
  min-width: 0;
  gap: 8px;
}

.images-individual-check {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  cursor: pointer;
}

#tool-images .images-individual-check > input[type="checkbox"] {
  flex: 0 0 18px;
  width: 18px;
  height: 18px;
  min-height: 18px;
  max-height: 18px;
  margin: 0;
  padding: 0;
  accent-color: #397b57;
}

.images-individual-check > span {
  display: grid;
  min-width: 0;
  gap: 1px;
  margin: 0;
}

.images-individual-check strong {
  color: #3c4e44;
  font-size: 0.75rem;
}

.images-individual-check small {
  overflow: hidden;
  color: #87928c;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.66rem;
}

.images-individual-name > span {
  color: #637169;
  font-size: 0.68rem;
}

#tool-images .images-individual-name > input {
  height: 38px;
  min-height: 38px;
  max-height: 38px;
  font-size: 0.76rem;
}

#tool-images .images-individual-name > input:disabled {
  opacity: 0.48;
  cursor: not-allowed;
  background: #eef1ef;
}

@media (max-width: 420px) {
  .images-individual-item {
    grid-template-columns: 46px minmax(0, 1fr);
  }

  .images-individual-item > img,
  .images-individual-thumb {
    width: 46px;
    height: 58px;
  }
}

/* Juntar PDFs: workspace compacto */
#tool-merge {
  width: 100%;
  max-width: 100%;
  padding: clamp(22px, 2.5vw, 36px);
  border-color: #e3e9e5;
  border-radius: 22px;
  box-shadow: 0 12px 38px rgba(19, 62, 45, 0.07);
}

#tool-merge .section-head {
  align-items: center;
  margin-bottom: 20px;
  padding-bottom: 18px;
}

#tool-merge .section-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 9px;
}

.merge-upload-card,
.merge-organize-card {
  padding: 19px;
  border: 1px solid #e1e8e4;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 4px 16px rgba(25, 64, 48, 0.035);
}

#tool-merge #merge-drop {
  min-height: 150px;
  padding: 26px 22px;
  gap: 8px;
  border: 1.5px dashed #a9cdb7;
  border-radius: 16px;
  background: #f8fbf9;
}

#tool-merge #merge-drop:hover,
#tool-merge #merge-drop.dragover {
  border-color: #4a9a69;
  background: #f1f8f4;
  box-shadow: 0 9px 22px rgba(24, 102, 64, 0.07);
}

#tool-merge #merge-drop .drop-icon {
  width: 46px;
  height: 46px;
  border: 1px solid #cbe4d3;
  border-radius: 14px;
  color: #27784d;
  background: #e8f5ec;
}

#tool-merge #merge-upload-actions {
  margin: 0;
  padding: 15px 17px;
  border-color: #dce7e0;
  background: #f8fbf9;
}

#tool-merge #merge-upload-count {
  color: #34483d;
  font-size: 0.86rem;
}

.merge-workspace {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(340px, 0.75fr);
  align-items: start;
  gap: 24px;
  margin-top: 18px;
  animation: imagesWorkspaceIn 0.24s ease both;
}

.merge-files-list {
  display: grid;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 11px;
  max-height: 680px;
  overflow-x: hidden;
  overflow-y: auto;
  padding: 3px 6px 3px 3px;
  scrollbar-width: thin;
  scrollbar-color: #b8c8be transparent;
}

#tool-merge #merge-list .pdf-card {
  display: grid;
  grid-template-columns: 86px minmax(0, 1fr) auto;
  align-items: center;
  gap: 13px;
  min-height: 124px;
  padding: 11px;
  border-width: 1px;
  border-color: #dfe7e2;
  border-radius: 12px;
  cursor: grab;
  background: #fff;
}

#tool-merge #merge-list .pdf-card:active {
  cursor: grabbing;
}

#tool-merge #merge-list .pdf-card.dragging {
  opacity: 0.48;
}

#tool-merge #merge-list .pdf-card.drag-over {
  border-color: #4d9a6c;
  box-shadow: 0 0 0 3px rgba(60, 142, 89, 0.12);
}

#tool-merge .pdf-card-preview {
  width: 86px;
  min-height: 104px;
  height: 104px;
  padding: 6px;
  aspect-ratio: auto;
  background: #f1f4f2;
}

#tool-merge .pdf-card-preview img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

#tool-merge .pdf-card .image-card-meta {
  min-width: 0;
}

#tool-merge .pdf-card .image-card-meta > strong:not(.image-page-label) {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.82rem;
}

#tool-merge .pdf-card .item-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
}

#tool-merge .pdf-card .item-actions button {
  min-height: 34px;
  height: 34px;
  font-size: 0.72rem;
}

#tool-merge .pdf-card .item-actions button:disabled {
  opacity: 0.34;
  cursor: not-allowed;
  color: #8e9992;
  border-color: #e1e6e3;
  background: #f3f5f4;
}

#tool-merge .pdf-card .text-danger-button {
  min-width: 86px;
  white-space: nowrap;
}

.merge-config-column {
  display: flex;
  min-width: 0;
  flex-direction: column;
  align-self: start;
  gap: 16px;
}

#tool-merge .merge-final-config-card,
#tool-merge .merge-generate-card {
  padding: 19px;
}

#tool-merge .merge-final-config-card > label > span {
  color: #536159;
  font-size: 0.76rem;
}

#tool-merge input:not([type="file"]) {
  display: flex;
  align-items: center;
  height: 42px;
  min-height: 42px;
  max-height: 42px;
  padding-top: 0;
  padding-bottom: 0;
  line-height: normal;
  box-sizing: border-box;
}

.merge-summary-card {
  display: grid;
  gap: 8px;
  margin-top: 15px;
  padding: 12px;
  border: 1px solid #e0e8e3;
  border-radius: 10px;
  background: #f8faf9;
}

.merge-summary-card > strong {
  color: #3b4d43;
  font-size: 0.77rem;
}

.merge-summary-card > div {
  display: flex;
  flex-wrap: wrap;
  gap: 7px 14px;
  color: #78857e;
  font-size: 0.72rem;
}

.merge-summary-card b {
  color: #35684a;
}

#tool-merge .merge-generate-card {
  margin-top: 0;
  border-color: #cfe2d5;
  background: linear-gradient(145deg, #f7fbf8, #f1f8f3);
}

#tool-merge #generate-merge {
  width: 100%;
  min-height: 45px;
}

#tool-merge #generate-merge:disabled {
  opacity: 0.46;
  cursor: not-allowed;
  box-shadow: none;
}

.merge-minimum-note {
  margin: 9px 0 0;
  color: #8a6a29;
  text-align: center;
  font-size: 0.71rem;
}

#tool-merge #merge-status:empty {
  display: none;
}

@media (max-width: 1050px) {
  .merge-workspace {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 680px) {
  #tool-merge {
    padding: 18px;
  }

  #tool-merge .section-head,
  #tool-merge #merge-upload-actions {
    align-items: stretch;
    flex-direction: column;
  }

  #tool-merge .section-actions,
  #tool-merge #merge-upload-actions .summary-actions {
    justify-content: flex-start;
  }

  #tool-merge #merge-list .pdf-card {
    grid-template-columns: 72px minmax(0, 1fr);
  }

  #tool-merge .pdf-card-preview {
    grid-row: 1;
    width: 72px;
    height: 92px;
    min-height: 92px;
  }

  #tool-merge .pdf-card .item-actions {
    grid-column: 1 / -1;
    justify-content: flex-start;
  }

  #tool-merge .pdf-card .item-actions button {
    min-height: 40px;
  }
}

/* Organizar PDF */
#tool-organize #organize-drop{min-height:140px;padding:22px;background:var(--surface-alt)}#tool-organize #organize-drop:hover,#tool-organize #organize-drop.dragover{border-color:var(--green-muted);background:var(--surface-alt)}#tool-organize #organize-drop .drop-icon{color:var(--green-dark);border:1px solid var(--green-muted);border-radius:16px;background:var(--surface);box-shadow:var(--shadow-sm)}
.organize-workspace{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(300px,.65fr);align-items:start;gap:20px;margin-top:18px}.organize-side{display:grid;gap:16px}.organize-pages-scroll{max-height:680px;overflow-y:auto;padding:2px 8px 2px 2px}.organize-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:16px}.organize-item{display:grid;gap:10px;padding:12px;border:1px solid var(--line);border-radius:13px;background:var(--surface);box-shadow:var(--shadow-sm);transition:.18s ease}.organize-item.dragging{opacity:.48;transform:scale(.98)}.organize-item.drag-over{border-color:var(--green);box-shadow:0 0 0 3px var(--green-muted)}.organize-thumb{display:grid;place-items:center;height:230px;padding:9px;border:1px solid var(--line-light);border-radius:8px;background:var(--surface)}.organize-thumb canvas{display:block;max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;background:var(--surface);box-shadow:var(--shadow-sm)}.organize-info{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:8px}.organize-info>strong{font-size:.8rem}.organize-drag{color:var(--muted);cursor:grab}.organize-actions{grid-column:1/-1;display:grid;grid-template-columns:42px 42px minmax(0,1fr);gap:6px}.organize-btn{min-height:36px;border:1px solid var(--line);border-radius:8px;color:var(--text-secondary);background:var(--surface-alt)}.organize-btn:hover:not(:disabled){border-color:var(--green-muted);background:var(--green-soft)}.organize-btn:disabled{opacity:.4;cursor:not-allowed}.organize-btn.delete{color:var(--surface);border-color:var(--danger);background:var(--danger)}.organize-summary{display:grid;gap:9px;margin-top:14px}.organize-summary span{display:flex;justify-content:space-between;color:var(--muted);font-size:.8rem}.organize-summary b{color:var(--green-dark)}.organize-summary-card h3{margin-bottom:0;font-size:1rem}.organize-summary-card>p{margin:14px 0 0;padding:8px;border-radius:8px;color:var(--text-secondary);background:var(--surface-alt);font-size:.74rem;text-align:center}.organize-summary-card>p.is-changed{color:var(--green-dark);border:1px solid var(--green-muted);background:var(--surface)}.organize-toast{position:sticky;bottom:16px;display:flex;justify-content:center;gap:12px;width:max-content;max-width:100%;margin:14px auto 0;padding:10px 16px;border-radius:10px;color:var(--surface);background:var(--text-secondary);box-shadow:var(--shadow-lg);z-index:5}.organize-toast button{padding:0;border:0;color:var(--green-muted);background:transparent;font-weight:700}.organize-result-summary{display:grid;gap:8px;width:min(520px,100%);margin:16px 0 22px;padding:16px;border:1px solid var(--line);border-radius:12px;text-align:left;background:var(--surface-alt)}.organize-result-summary span{display:flex;justify-content:space-between;gap:14px;color:var(--muted);font-size:.82rem}.organize-result-summary b{color:var(--text);overflow-wrap:anywhere}.organize-generate-card #generate-organize{width:100%}#tool-organize #organize-processing,#tool-organize #organize-success{min-height:clamp(430px,60vh,650px)}
@media(max-width:1000px){.organize-workspace{grid-template-columns:1fr}}@media(max-width:600px){.organize-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.organize-thumb{height:180px}.organize-item{padding:9px}.organize-actions{grid-template-columns:36px 36px minmax(0,1fr)}}@media(max-width:410px){.organize-grid{grid-template-columns:1fr}}
.organize-selected-file{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:14px;padding:14px;border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--surface);box-shadow:var(--shadow-sm)}.organize-selected-file .text-danger-button{white-space:nowrap}#organize-generate-card{background:var(--surface);border-color:var(--line)}
.organize-thumbnail-progress{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:7px 14px;margin-top:14px;padding:14px;border:1px solid var(--line);border-radius:var(--radius-sm);color:var(--text-secondary);background:var(--surface);box-shadow:var(--shadow-sm)}.organize-thumbnail-progress strong{grid-column:1/-1;color:var(--text);font-size:.86rem}.organize-thumbnail-progress span,.organize-thumbnail-progress>b{font-size:.75rem}.organize-thumbnail-track{grid-column:1/-1;width:100%;height:9px;overflow:hidden;border-radius:999px;background:var(--line-light)}.organize-thumbnail-track i{display:block;width:0;height:100%;border-radius:inherit;background:var(--green);transition:width .18s ease}
@media(max-width:600px){.organize-selected-file{grid-template-columns:auto minmax(0,1fr)}.organize-selected-file .summary-actions{grid-column:1/-1}.organize-selected-file .summary-actions button{flex:1}}

@media (prefers-reduced-motion: reduce) {
  .merge-workspace {
    animation: none;
  }
}

/* Comprimir PDF: workspace compacto */
#tool-compress {
  width: 100%;
  max-width: 100%;
  padding: clamp(22px, 2.5vw, 36px);
  border-color: #e3e9e5;
  border-radius: 22px;
  box-shadow: 0 12px 38px rgba(19, 62, 45, 0.07);
}

#tool-compress .section-head {
  align-items: center;
  margin-bottom: 16px;
  padding-bottom: 18px;
}

#tool-compress .section-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 9px;
}

.compress-info-card {
  margin-bottom: 16px;
  border: 1px solid #dfe8e2;
  border-radius: 12px;
  color: #536159;
  background: #f7faf8;
}

.compress-info-card summary {
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: 44px;
  padding: 9px 13px;
  cursor: pointer;
  list-style: none;
}

.compress-info-card summary::-webkit-details-marker { display: none; }
.compress-info-card summary > span {
  display: grid;
  place-items: center;
  width: 25px;
  height: 25px;
  border-radius: 8px;
  color: #397557;
  background: #e5f2e9;
  font-weight: 750;
}
.compress-info-card summary strong { font-size: 0.78rem; }
.compress-info-card summary small { margin-left: auto; color: #7f8b84; font-size: 0.69rem; }
.compress-info-card p { margin: 0; padding: 0 13px 12px 47px; color: #758179; font-size: 0.73rem; line-height: 1.55; }

.compress-upload-card,
.compress-files-card {
  padding: 19px;
  border: 1px solid #e1e8e4;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 4px 16px rgba(25, 64, 48, 0.035);
}

#tool-compress #compress-drop {
  min-height: 150px;
  padding: 26px 22px;
  gap: 8px;
  border: 1.5px dashed #a9cdb7;
  border-radius: 16px;
  background: #f8fbf9;
}

#tool-compress #compress-drop:hover,
#tool-compress #compress-drop.dragover {
  border-color: #4a9a69;
  background: #f1f8f4;
}

#tool-compress #compress-drop .drop-icon {
  width: 46px;
  height: 46px;
  border: 1px solid #cbe4d3;
  border-radius: 14px;
  color: #27784d;
  background: #e8f5ec;
}

#tool-compress #compress-upload-actions {
  margin: 0;
  padding: 15px 17px;
  border-color: #dce7e0;
  background: #f8fbf9;
}

#tool-compress #compress-upload-count { color: #34483d; font-size: 0.86rem; }

.compress-workspace {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(340px, 0.75fr);
  align-items: start;
  gap: 24px;
  margin-top: 18px;
  animation: imagesWorkspaceIn 0.24s ease both;
}

.compress-files-list {
  display: grid;
  gap: 10px;
  max-height: 620px;
  overflow-x: hidden;
  overflow-y: auto;
  padding-right: 5px;
  scrollbar-width: thin;
  scrollbar-color: #b8c8be transparent;
}

#tool-compress .compress-file-card {
  display: grid;
  grid-template-columns: 62px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  min-height: 100px;
  padding: 11px;
  border: 1px solid #dfe7e2;
  border-radius: 12px;
  background: #fbfcfb;
}

#tool-compress .compress-file-preview {
  display: grid;
  place-items: center;
  width: 62px;
  height: 78px;
  border: 1px solid #dce4df;
  border-radius: 7px;
  color: #708078;
  background: #f0f3f1;
  font-size: 0.72rem;
  font-weight: 750;
}

#tool-compress .compress-file-info { display: grid; min-width: 0; gap: 3px; }
#tool-compress .compress-file-info > strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.83rem; }
#tool-compress .compress-file-info > small { color: #7f8b84; line-height: 1.5; font-size: 0.72rem; }
.compress-file-waiting { color: #7d8982; }
.compress-file-error { color: #c54248; font-size: 0.72rem; }
#tool-compress .compress-file-card .item-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
#tool-compress .compress-file-card .item-actions button { min-height: 34px; height: 34px; font-size: 0.7rem; }
#tool-compress .compress-file-card .text-danger-button { min-width: 82px; white-space: nowrap; }

.compress-config-column {
  display: flex;
  min-width: 0;
  flex-direction: column;
  align-self: start;
  gap: 16px;
}

#tool-compress .compress-settings-card,
#tool-compress .compress-generate-card { padding: 19px; }

#tool-compress .compress-settings-card > label:first-of-type > span { color: #536159; font-size: 0.76rem; }
.compress-mode-description { margin-top: 8px; color: #7e8a83; font-size: 0.71rem; }

#tool-compress .compress-grayscale-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 16px;
  padding: 11px 12px;
  border: 1px solid #dfe7e2;
  border-radius: 10px;
  cursor: pointer;
  background: #f8faf9;
}

#tool-compress .compress-grayscale-option > span { display: grid; gap: 2px; margin: 0; }
#tool-compress .compress-grayscale-option strong { color: #42534a; font-size: 0.76rem; }
#tool-compress .compress-grayscale-option small { color: #849087; font-size: 0.67rem; font-weight: 400; }
#tool-compress #compress-grayscale {
  flex: 0 0 38px;
  width: 38px;
  height: 22px;
  min-height: 22px;
  max-height: 22px;
  appearance: none;
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  background: #cfd8d2;
  transition: background var(--transition);
}
#tool-compress #compress-grayscale::before {
  content: '';
  display: block;
  width: 16px;
  height: 16px;
  margin: 3px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 4px rgba(0,0,0,.18);
  transition: transform var(--transition);
}
#tool-compress #compress-grayscale:checked { background: #397b57; }
#tool-compress #compress-grayscale:checked::before { transform: translateX(16px); }

.compress-config-summary {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px 12px;
  margin-top: 15px;
  padding: 12px;
  border: 1px solid #e0e8e3;
  border-radius: 10px;
  color: #758179;
  background: #f8faf9;
  font-size: 0.7rem;
}
.compress-config-summary > strong { grid-column: 1 / -1; color: #3d5045; font-size: 0.76rem; }
.compress-config-summary b { color: #35684a; }

#tool-compress .compress-generate-card {
  margin-top: 0;
  border-color: #cfe2d5;
  background: linear-gradient(145deg, #f7fbf8, #f1f8f3);
}
#tool-compress #generate-compress { width: 100%; min-height: 45px; }
#tool-compress #generate-compress:disabled { opacity: .46; cursor: not-allowed; box-shadow: none; }

#tool-compress .compress-state-panel {
  width: 100%;
  max-width: none;
  min-height: 0;
  margin-top: 16px;
  padding: 20px;
  border: 1px solid #dfe8e2;
  border-radius: 15px;
  background: #f8fbf9;
}

#tool-compress #compress-processing .compress-state-title { font-size: 1rem; }
#tool-compress #compress-processing .compress-state-subtitle { margin-bottom: 8px; font-size: .76rem; }
#tool-compress #compress-processing .compress-spinner { width: 30px; height: 30px; }
#tool-compress #compress-status:empty { display: none; }

/* Visualizações exclusivas da ferramenta Comprimir PDF */
#tool-compress .compress-view { width: 100%; max-width: 100%; box-sizing: border-box; }
#tool-compress #compress-processing,
#tool-compress #compress-success {
  min-height: clamp(420px, 62vh, 680px);
  margin: 0;
  padding: clamp(28px, 5vw, 64px);
  align-items: center;
  justify-content: center;
  text-align: center;
}
#tool-compress #compress-processing:not(.hidden),
#tool-compress #compress-success:not(.hidden) { display: flex; flex-direction: column; }
#tool-compress #compress-processing .compress-state-title,
#tool-compress #compress-success .compress-state-title { font-size: clamp(1.35rem, 2vw, 1.8rem); }
#tool-compress #compress-processing .compress-state-subtitle { margin-bottom: 18px; font-size: .9rem; }
#tool-compress #compress-processing-back { margin-top: 24px; white-space: nowrap; }
#tool-compress #compress-processing-back:disabled { cursor: not-allowed; opacity: .55; }

#tool-compress #compress-success {
  min-height: 0;
  justify-content: flex-start;
  gap: 16px;
  padding: clamp(24px, 4vh, 32px) 20px 20px;
}
#tool-compress #compress-success > * {
  flex: 0 0 auto;
}
#tool-compress #compress-success .compression-result-heading {
  display: flex;
  width: 100%;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
#tool-compress #compress-success .compression-result-title-group {
  display: flex;
  width: 100%;
  max-width: 1100px;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
#tool-compress #compress-success .compress-success-icon {
  width: 48px;
  height: 48px;
  margin: 0;
}
#tool-compress #compress-success .compress-success-icon svg {
  width: 29px;
  height: 29px;
}
#tool-compress #compress-success .compress-state-title {
  margin: 0;
  font-size: clamp(1.25rem, 1.65vw, 1.45rem);
  line-height: 1.2;
}
#tool-compress #compress-success .compress-state-subtitle {
  max-width: min(1100px, 100%);
  margin: 0;
  font-size: .8rem;
  line-height: 1.35;
}
#tool-compress #compress-success .success-summary-card {
  width: min(700px, 100%);
  gap: 20px;
  margin: 4px 0 0;
  padding: 20px 24px;
}
#tool-compress #compress-success .stat-box {
  gap: 2px;
}
#tool-compress #compress-success .stat-label {
  font-size: .69rem;
  line-height: 1.2;
}
#tool-compress #compress-success .stat-value {
  font-size: 1.04rem;
  line-height: 1.2;
}
#tool-compress #compress-success .savings-stat {
  margin-left: 4px;
  padding: 6px 12px;
}
#tool-compress #compress-success .savings-stat .stat-value {
  font-size: 1.16rem;
}
#tool-compress #compress-success .savings-stat small {
  line-height: 1.2;
}
#tool-compress .compress-filename-field {
  width: 100%;
  max-width: 400px;
  margin: 0;
}
#tool-compress .compress-filename-field label {
  display: block;
  margin-bottom: 4px;
  color: var(--text-secondary);
  font-size: .78rem;
  font-weight: 600;
  line-height: 1.25;
  text-align: left;
}
#tool-compress .compress-filename-input {
  width: 100%;
  height: 36px;
  min-height: 36px;
  max-height: 36px;
  border-color: var(--green-muted);
  font-size: .86rem;
  font-weight: 500;
}
#tool-compress #compress-success .compress-actions-main {
  margin: 0;
}
#tool-compress #compress-success .mega-download-button {
  min-height: 42px;
  gap: 9px;
  padding: 9px 24px;
  font-size: .92rem;
}
#tool-compress #compress-success .mega-download-button svg {
  width: 20px;
  height: 20px;
}
#tool-compress #compress-success .compress-actions-secondary {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}

body.compress-result-active .shell {
  margin-bottom: 0;
}

body.compress-result-active .app-frame {
  padding-bottom: 0;
}

#tool-compress.tool-panel.compress-result-active {
  padding-top: 20px;
  padding-bottom: 4px;
}

#tool-compress.compress-result-active .section-head {
  align-items: center;
  margin-bottom: 6px;
  padding-bottom: 8px;
}

#tool-compress.compress-result-active .section-head p {
  display: none;
}

#tool-compress .compress-grayscale-native {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  min-height: 1px !important;
  margin: -1px !important;
  padding: 0 !important;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  border: 0 !important;
  opacity: 0;
  pointer-events: none;
}
#tool-compress .toggle-switch {
  position: relative;
  flex: 0 0 52px;
  width: 52px;
  height: 30px;
  min-height: 30px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: #d8e0dc;
  box-shadow: inset 0 0 0 1px rgba(35, 69, 50, .08);
  transition: background-color 180ms ease;
}
#tool-compress .toggle-switch::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .16);
  transition: transform 180ms ease;
}
#tool-compress .toggle-switch[aria-checked="true"] { background: #2f7b50; }
#tool-compress .toggle-switch[aria-checked="true"]::after { transform: translateX(22px); }
#tool-compress .toggle-switch:focus-visible { outline: 3px solid rgba(46, 187, 78, .28); outline-offset: 3px; }

@media (max-width: 1050px) {
  .compress-workspace { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 680px) {
  #tool-compress { padding: 18px; }
  #tool-compress .section-head,
  #tool-compress #compress-upload-actions { align-items: stretch; flex-direction: column; }
  #tool-compress .section-actions,
  #tool-compress #compress-upload-actions .summary-actions { justify-content: flex-start; }
  #tool-compress .compress-file-card { grid-template-columns: 54px minmax(0, 1fr); }
  #tool-compress .compress-file-preview { width: 54px; height: 70px; }
  #tool-compress .compress-file-card .item-actions { grid-column: 1 / -1; justify-content: flex-start; }
  #tool-compress #compress-processing,
  #tool-compress #compress-success { min-height: 360px; padding: 24px 16px; }
  #tool-compress #compress-success .compress-actions-secondary { width: 100%; }
  #tool-compress #compress-success .compress-actions-secondary .ghost-button { flex: 1 1 210px; }
  .compress-files-list { max-height: 520px; }
}

@media (prefers-reduced-motion: reduce) {
  .compress-workspace { animation: none; }
}

/* Malha externa única para header e todas as ferramentas */
:root {
  --app-max-width: 1720px;
  --app-side-space: 24px;
  --app-section-gap: 20px;
}

.app-frame {
  width: 100%;
  max-width: calc(var(--app-max-width) + (var(--app-side-space) * 2));
  margin: 0 auto;
  padding: var(--app-side-space);
  box-sizing: border-box;
}

.app-frame > .topbar,
.app-frame > .shell {
  width: 100% !important;
  max-width: 100% !important;
  margin-right: 0 !important;
  margin-left: 0 !important;
  box-sizing: border-box;
}

.app-frame > .topbar {
  margin-top: 0 !important;
}

.app-frame > .shell {
  margin-top: var(--app-section-gap) !important;
}

.shell > .tool-panel {
  width: 100% !important;
  max-width: 100% !important;
  margin-right: 0 !important;
  margin-left: 0 !important;
  position: static !important;
  left: auto !important;
  right: auto !important;
  transform: none !important;
  box-sizing: border-box !important;
}

@media (max-width: 1200px) {
  :root {
    --app-side-space: 20px;
  }
}

@media (max-width: 768px) {
  :root {
    --app-side-space: 12px;
    --app-section-gap: 16px;
  }
}

/* PDF para Imagem */
#tool-pdf-to-image { overflow: hidden; }
#tool-pdf-to-image .section-head { margin-bottom: 18px; }
.pdf-image-view { width: 100%; }
.pdf-image-card { min-width: 0; padding: 20px; border: 1px solid #dfe7e2; border-radius: 15px; background: #fff; box-shadow: 0 3px 14px rgba(20, 62, 39, .045); }
.pdf-image-heading { margin-bottom: 16px; }
.pdf-image-heading h3 { margin: 0 0 3px; color: #293b31; font-size: 1rem; }
.pdf-image-heading p { margin: 0; color: #7b8780; font-size: .78rem; }
#tool-pdf-to-image #pdf-to-image-drop { min-height: 135px; padding: 22px; }
#tool-pdf-to-image #pdf-to-image-drop small { color: #7f8b84; }
#tool-pdf-to-image #pdf-to-image-drop .drop-icon {
  color: #187a45;
  border: 1px solid #cce8d6;
  border-radius: 16px;
  background: #eef8f2;
  box-shadow: 0 6px 16px rgba(24, 122, 69, .1);
  transition: background-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
#tool-pdf-to-image #pdf-to-image-drop:hover .drop-icon,
#tool-pdf-to-image #pdf-to-image-drop.dragover .drop-icon { background: #e7f5ec; box-shadow: 0 8px 19px rgba(24, 122, 69, .14); transform: translateY(-1px); }
#tool-pdf-to-image #pdf-to-image-drop:active .drop-icon { background: #e3f2e9; transform: translateY(0) scale(.98); }
#tool-pdf-to-image #pdf-to-image-drop:focus-within .drop-icon { outline: 3px solid rgba(46, 187, 78, .25); outline-offset: 3px; }
.pdf-selected-file { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 14px; padding: 14px; border: 1px solid #dce6df; border-radius: 12px; background: #f8fbf9; }
.pdf-file-badge { display: grid; place-items: center; width: 50px; height: 60px; border-radius: 9px; color: #fff; background: linear-gradient(145deg, #387956, #235e40); font-size: .75rem; font-weight: 800; }
.pdf-selected-meta { display: grid; gap: 3px; min-width: 0; }
.pdf-selected-meta strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #34463c; }
.pdf-selected-meta small { color: #7b8780; }
.pdf-selected-file .text-danger-button { white-space: nowrap; }
.pdf-image-workspace { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(340px, .75fr); align-items: start; gap: 20px; margin-top: 18px; animation: panelIn .28s ease both; }
.pdf-image-options-column { display: grid; gap: 16px; min-width: 0; }
.pdf-image-preview-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 16px; }
.pdf-image-preview-heading .pdf-image-heading { margin-bottom: 0; }
.pdf-preview-density { display: inline-flex; flex: 0 0 auto; gap: 3px; padding: 3px; border: 1px solid #e0e7e2; border-radius: 10px; background: #f3f6f4; }
.pdf-preview-density-button { min-height: 30px !important; padding: 4px 10px !important; border: 0 !important; color: #75827a; background: transparent !important; box-shadow: none; white-space: nowrap; }
.pdf-preview-density-button.active { color: #276b47; background: #fff !important; box-shadow: 0 1px 4px rgba(23, 61, 46, .10); }
.pdf-pages-preview { --pdf-preview-canvas-height: clamp(390px, 50vh, 520px); display: grid; grid-auto-rows: 1fr; align-items: stretch; gap: 14px; max-height: 680px; padding: 4px 8px 4px 2px; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; scroll-behavior: auto; transition: gap .2s ease; }
.pdf-pages-preview.preview-columns-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pdf-pages-preview.preview-columns-4 { --pdf-preview-canvas-height: 210px; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.pdf-preview-loading { margin-bottom: 12px; padding: 9px 12px; border-radius: 9px; color: #456c54; background: #edf7f0; font-size: .78rem; }
.pdf-page-preview-item { display: grid; grid-template-rows: auto var(--pdf-preview-canvas-height) auto; align-self: stretch; gap: 8px; min-width: 0; height: 100%; padding: 10px; border: 1px solid #e1e7e3; border-radius: 11px; background: #f8faf9; transition: padding .2s ease, border-color .2s ease, background-color .2s ease; }
.pdf-page-preview-item > strong { color: #526159; font-size: .76rem; }
.pdf-page-canvas { display: flex; align-items: center; justify-content: center; width: 100%; height: var(--pdf-preview-canvas-height); min-height: 0; max-height: var(--pdf-preview-canvas-height); padding: 8px; overflow: hidden; border-radius: 7px; background: #e9eeeb; }
.pdf-page-canvas canvas { display: block; max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; background: #fff; box-shadow: 0 2px 8px rgba(0,0,0,.08); }
.pdf-page-canvas.is-error { color: #b14c50; font-size: .75rem; text-align: center; }
.pdf-pages-preview.preview-columns-4 .pdf-page-preview-item { gap: 6px; padding: 8px; }
.pdf-pages-preview.preview-columns-4 .pdf-page-canvas { padding: 6px; }
.pdf-pages-preview.preview-columns-4 .transform-controls { grid-template-columns: repeat(4, minmax(26px, 1fr)); gap: 4px; padding: 5px; }
.pdf-pages-preview.preview-columns-4 .transform-button { min-width: 26px; padding-inline: 5px; }
.pdf-pages-preview.preview-columns-4 .transform-reset-button { grid-column: 1 / -1; width: 100%; }
.pdf-page-preview-item .transform-controls-wrap { align-self: end; }
.pdf-pages-preview.preview-columns-2 .transform-controls { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.pdf-image-fields { display: grid; gap: 14px; }
.pdf-quality-help { margin: 9px 0 0; color: #758179; font-size: .7rem; }
.custom-dropdown.is-disabled { opacity: .56; pointer-events: none; cursor: default; }
.custom-dropdown.is-disabled .custom-dropdown-toggle { color: #8b958f; border-color: #dfe4e1; background: #f1f3f2; cursor: not-allowed; box-shadow: none; }
.pdf-image-summary { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 12px; margin-top: 16px; padding: 12px; border: 1px solid #e0e8e3; border-radius: 10px; color: #738078; background: #f7faf8; font-size: .72rem; }
.pdf-image-summary > strong { grid-column: 1 / -1; color: #3d5045; }
.pdf-image-summary span { display: grid; align-content: start; gap: 3px; min-width: 0; padding: 9px 10px; border: 1px solid #e4ebe6; border-radius: 8px; background: #fff; }
.pdf-image-summary small { color: #738078; font-size: .68rem; line-height: 1.25; }
.pdf-image-summary b { color: #326648; font-size: .78rem; line-height: 1.25; overflow-wrap: anywhere; }
.pdf-image-generate-card { background: linear-gradient(145deg, #f7fbf8, #eef7f1); }
#generate-pdf-to-image { width: 100%; min-height: 46px; }
#tool-pdf-to-image #pdf-to-image-processing, #tool-pdf-to-image #pdf-to-image-success { min-height: clamp(430px, 60vh, 650px); padding: clamp(28px, 5vw, 58px); }
#pdf-processing-file { max-width: 680px; margin-bottom: 12px; overflow-wrap: anywhere; color: #405248; }
.pdf-progress-track { width: min(560px, 100%); height: 9px; margin: 14px 0 8px; overflow: hidden; border-radius: 99px; background: #dfe8e2; }
.pdf-progress-track span { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #2ebb4e, #217d48); transition: width .2s ease; }
.pdf-processing-meta { display: flex; justify-content: space-between; width: min(560px, 100%); color: #68776e; font-size: .78rem; }
.pdf-image-results { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 10px; width: 100%; max-height: 340px; margin: 18px 0 10px; overflow-y: auto; overscroll-behavior: contain; text-align: left; }
.pdf-result-item { display: grid; grid-template-columns: 52px minmax(0, 1fr); align-items: center; gap: 8px 10px; min-width: 0; padding: 10px; border: 1px solid #dfe7e2; border-radius: 10px; background: #fff; }
.pdf-result-item > img { align-self: start; width: 52px; height: 66px; object-fit: contain; border-radius: 5px; background: #edf1ef; }
.pdf-result-meta, .pdf-result-name-view, .pdf-result-name-editor { display: grid; gap: 3px; min-width: 0; }
.pdf-result-item strong { overflow: hidden; color: #33463b; text-overflow: ellipsis; white-space: nowrap; font-size: .76rem; }
.pdf-result-name-view > small { color: #7b8780; font-size: .68rem; }
.pdf-result-actions { display: flex; grid-column: 2; flex-wrap: wrap; justify-content: flex-end; gap: 6px; min-width: 0; }
.pdf-result-item .ghost-button { min-height: 32px; padding: 5px 9px; font-size: .68rem; }
.pdf-result-edit-button { color: #386d50; }
.pdf-result-save-button { color: #fff !important; border-color: #2a8b50 !important; background: #2a8b50 !important; }
.pdf-result-editor-label { display: grid; gap: 4px; color: #5f6f66; font-size: .66rem; font-weight: 700; }
.pdf-result-input-row { display: flex; align-items: center; min-width: 0; height: 34px; overflow: hidden; border: 1px solid #b8cfc0; border-radius: 7px; background: #fff; box-shadow: 0 0 0 2px rgba(46, 187, 78, .08); }
.pdf-result-input-row:focus-within { border-color: #469466; box-shadow: 0 0 0 3px rgba(46, 187, 78, .13); }
.pdf-result-input-row input { flex: 1; min-width: 0; width: 100%; height: 32px; min-height: 32px; max-height: 32px; padding: 5px 7px; border: 0; border-radius: 0; outline: 0; background: transparent; font-size: .75rem; line-height: 1.2; box-shadow: none; }
.pdf-result-input-row input[aria-invalid="true"] { color: #9e3438; background: #fff7f7; }
.pdf-result-extension { display: flex; align-items: center; align-self: stretch; flex: 0 0 auto; padding: 0 7px; border-left: 1px solid #dce5df; color: #68776f; background: #f4f7f5; font-size: .7rem; font-weight: 700; }
.pdf-result-name-error { min-height: 1em; color: #a53c41; font-size: .64rem; line-height: 1.25; }
.pdf-image-result-status { width: min(720px, 100%); margin: 0 0 12px; text-align: center; }
.pdf-image-result-status:empty { display: none; }
#tool-pdf-to-image #pdf-to-image-success .compress-actions-secondary { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
@media (max-width: 1000px) { .pdf-image-workspace { grid-template-columns: 1fr; } }
@media (max-width: 760px) {
  .pdf-pages-preview.preview-columns-4 { --pdf-preview-canvas-height: 240px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 680px) {
  .pdf-image-card { padding: 16px; }
  .pdf-selected-file { grid-template-columns: auto minmax(0, 1fr); }
  .pdf-selected-file .summary-actions { grid-column: 1 / -1; }
  .pdf-selected-file .summary-actions button { flex: 1; }
  .pdf-image-preview-heading { align-items: stretch; flex-direction: column; }
  .pdf-preview-density { align-self: flex-start; }
  .pdf-pages-preview { max-height: 590px; }
  .pdf-result-item { grid-template-columns: 48px minmax(0, 1fr); }
  .pdf-result-item > img { width: 48px; height: 62px; }
  .pdf-result-actions { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pdf-result-item .ghost-button { width: 100%; }
  #tool-pdf-to-image #pdf-to-image-success .compress-actions-secondary { width: 100%; }
  #tool-pdf-to-image #pdf-to-image-success .compress-actions-secondary .ghost-button { flex: 1 1 190px; }
}
@media (max-width: 520px) {
  .pdf-pages-preview.preview-columns-2 { --pdf-preview-canvas-height: clamp(310px, 48vh, 410px); grid-template-columns: 1fr; }
  .pdf-pages-preview.preview-columns-4 { --pdf-preview-canvas-height: 220px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pdf-pages-preview.preview-columns-4 .transform-controls { grid-template-columns: repeat(2, minmax(22px, 1fr)); }
  .pdf-pages-preview.preview-columns-4 .transform-reset-button { grid-column: 1 / -1; }
}
@media (max-width: 360px) {
  .pdf-pages-preview.preview-columns-4 { --pdf-preview-canvas-height: 250px; grid-template-columns: 1fr; }
}

/* Alinhamento dos seletores da tela PDF para Imagem */
#tool-pdf-to-image .pdf-image-fields select {
  padding-top: 0;
  padding-bottom: 0;
}
#tool-pdf-to-image .pdf-image-fields .custom-dropdown-toggle {
  display: flex;
  align-items: center;
  height: 39px;
  min-height: 39px;
  max-height: 39px;
  padding-top: 0;
  padding-bottom: 0;
  line-height: 1;
}
#tool-pdf-to-image .pdf-image-fields .custom-dropdown-text,
#tool-pdf-to-image .pdf-image-fields .custom-dropdown-arrow {
  display: flex;
  align-items: center;
  align-self: stretch;
  line-height: 1;
}

/* Controles compartilhados de rotação e inversão */
.transform-controls-wrap { display: grid; gap: 5px; min-width: 0; }
.transform-controls {
  display: grid;
  grid-template-columns: repeat(4, minmax(30px, 1fr)) auto;
  gap: 5px;
  padding: 6px;
  border: 1px solid #dfe7e2;
  border-radius: 9px;
  background: #f7faf8;
}
.transform-button {
  display: grid;
  place-items: center;
  min-width: 30px;
  height: 31px;
  min-height: 31px;
  padding: 0 7px;
  border: 1px solid #d8e2dc;
  border-radius: 7px;
  color: #52645a;
  background: #fff;
  font-size: .9rem;
  font-weight: 700;
  line-height: 1;
  transition: border-color .18s ease, color .18s ease, background-color .18s ease, transform .18s ease;
}
.transform-button:hover { border-color: #9fcbb0; color: #246d45; background: #edf7f0; transform: translateY(-1px); }
.transform-button.is-active { border-color: #70ad87; color: #185f39; background: #e4f3e9; box-shadow: inset 0 0 0 1px rgba(45, 128, 77, .08); }
.transform-button:disabled { opacity: .42; cursor: not-allowed; transform: none; }
.transform-reset-button { min-width: 52px; font-size: .62rem; font-weight: 700; }
.transform-state-label { overflow: hidden; color: #7b8780; text-overflow: ellipsis; white-space: nowrap; font-size: .64rem; }
.transformed-preview-canvas {
  display: block;
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}
.sheet-content > .transformed-preview-canvas { width: 100%; height: 100%; }
.images-individual-thumb > .transformed-preview-canvas { max-width: calc(100% - 4px); max-height: calc(100% - 4px); }
.pdf-page-preview-item .transform-state-label { padding-inline: 2px; }

@media (max-width: 420px) {
  .transform-controls { grid-template-columns: repeat(4, minmax(32px, 1fr)); }
  .transform-reset-button { grid-column: 1 / -1; width: 100%; }
}

/* Editor estrutural de recorte de páginas */
.document-crop-controls { display: grid; gap: 9px; margin-top: 14px; padding: 12px; border: 1px solid #dfe8e2; border-radius: 10px; background: #f8fbf9; }
.document-crop-controls:empty { display: none; }
.crop-control-row, .crop-applied-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.crop-control-row .ghost-button, .crop-applied-actions .ghost-button { min-height: 36px; padding: 7px 12px; font-size: .78rem; }
.crop-control-row .ghost-button:disabled { opacity: .48; cursor: not-allowed; }
.crop-page-picker { display: flex; align-items: center; gap: 8px; color: #66756c; font-size: .76rem; font-weight: 700; }
.crop-page-picker > span { margin-bottom: 0; }
.crop-page-picker select { width: auto; min-width: 78px; height: 36px; min-height: 36px; max-height: 36px; line-height: 36px; }
.crop-help { margin: 0; color: #7b8780; font-size: .72rem; }
.crop-applied-status { display: flex; align-items: center; gap: 7px; margin: 0; color: #217545; font-size: .78rem; font-weight: 700; }
.crop-applied-status::before { content: '✓'; display: grid; place-items: center; width: 19px; height: 19px; border-radius: 50%; color: #fff; background: #2a9a52; font-size: .68rem; }
.prepared-document-chip .crop-chip-label { margin-left: 4px; color: #247647; font-size: .7rem; font-weight: 800; }
body.crop-modal-open { position: fixed; width: 100%; overflow: hidden; }
.crop-modal-backdrop { z-index: 500; padding: 14px; overscroll-behavior: none; background: rgba(16, 30, 22, .66); }
.crop-modal-panel { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; width: min(1180px, 100%); height: min(900px, calc(100vh - 28px)); overflow: hidden; overscroll-behavior: contain; border: 1px solid #d8e2dc; border-radius: 16px; background: #fff; box-shadow: 0 18px 70px rgba(0, 0, 0, .25); animation: modalCardIn .25s ease both; }
.crop-modal-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 18px; padding: 18px 22px; border-bottom: 1px solid #e4e9e6; }
.crop-modal-header h3 { margin: 0 0 3px; color: #24382d; font-size: 1.12rem; }
.crop-modal-header p { margin: 0; color: #718078; font-size: .78rem; }
.crop-close-button { display: grid; place-items: center; flex: 0 0 36px; width: 36px; height: 36px; border: 1px solid #dce4df; border-radius: 9px; color: #53645a; background: #fff; font-size: 1.5rem; line-height: 1; }
.crop-modal-body { display: grid; grid-template-columns: minmax(0, 1fr) 290px; min-height: 0; background: #eef2ef; }
.crop-workspace { min-width: 0; min-height: 0; padding: 18px; overflow: hidden; }
.crop-page-scroll { display: block; width: 100%; height: 100%; min-height: 320px; padding: 20px; overflow: auto; overscroll-behavior: contain; border-radius: 11px; background: #dce3df; }
.crop-page-wrap { position: relative; overflow: hidden; margin: auto; background: #fff; box-shadow: 0 4px 22px rgba(0, 0, 0, .18); touch-action: none; }
.crop-page-canvas { display: block; max-width: none; max-height: none; }
.crop-interaction-layer { position: absolute; inset: 0; cursor: crosshair; touch-action: none; }
.crop-shade { position: absolute; z-index: 1; pointer-events: none; background: rgba(13, 25, 18, .53); }
.crop-selection { position: absolute; z-index: 2; border: 2px solid #29b45c; cursor: move; box-shadow: 0 0 0 1px rgba(255,255,255,.92), 0 0 0 3px rgba(28,112,59,.18); }
.crop-handle { position: absolute; z-index: 3; width: 13px; height: 13px; border: 2px solid #fff; border-radius: 50%; background: #208e4a; box-shadow: 0 1px 4px rgba(0,0,0,.28); }
.crop-handle-nw { left: -7px; top: -7px; cursor: nwse-resize; }.crop-handle-n { left: 50%; top: -7px; transform: translateX(-50%); cursor: ns-resize; }.crop-handle-ne { right: -7px; top: -7px; cursor: nesw-resize; }.crop-handle-e { right: -7px; top: 50%; transform: translateY(-50%); cursor: ew-resize; }.crop-handle-se { right: -7px; bottom: -7px; cursor: nwse-resize; }.crop-handle-s { left: 50%; bottom: -7px; transform: translateX(-50%); cursor: ns-resize; }.crop-handle-sw { left: -7px; bottom: -7px; cursor: nesw-resize; }.crop-handle-w { left: -7px; top: 50%; transform: translateY(-50%); cursor: ew-resize; }
.crop-preview-panel { display: grid; grid-template-rows: auto minmax(190px, 1fr) auto; gap: 10px; min-width: 0; padding: 18px; border-left: 1px solid #dce4df; background: #f9fbfa; }
.crop-preview-panel > strong { color: #405249; font-size: .82rem; }
.crop-preview-box { display: grid; place-items: center; min-height: 190px; padding: 12px; overflow: hidden; border: 1px solid #dde6e0; border-radius: 10px; color: #859087; background: #eef2ef; text-align: center; font-size: .75rem; }
.crop-preview-box canvas { display: block; max-width: 100%; max-height: 100%; background: #fff; box-shadow: 0 2px 10px rgba(0,0,0,.12); }
.crop-dimensions { min-height: 20px; color: #718078; font-size: .7rem; text-align: center; }
.crop-modal-footer { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 14px; padding: 14px 20px; border-top: 1px solid #e0e7e2; background: #fff; }
.crop-zoom-controls, .crop-utility-actions, .crop-main-actions { display: flex; align-items: center; gap: 8px; }
.crop-zoom-controls > span { min-width: 48px; color: #526159; text-align: center; font-size: .78rem; font-weight: 700; }
.crop-zoom-button { width: 38px; min-width: 38px; padding: 5px; font-size: 1rem; }
.crop-utility-actions { justify-self: center; }
.crop-modal-footer button { min-height: 38px; padding: 7px 13px; font-size: .78rem; }
.crop-modal-footer button:disabled { opacity: .46; cursor: not-allowed; transform: none; }
@media (max-width: 820px) { .crop-modal-body { grid-template-columns: 1fr; }.crop-preview-panel { display: none; }.crop-modal-footer { grid-template-columns: 1fr 1fr; }.crop-utility-actions { justify-self: end; }.crop-main-actions { grid-column: 1 / -1; justify-content: flex-end; } }
@media (max-width: 560px) { .crop-modal-backdrop { padding: 0; }.crop-modal-panel { height: 100vh; border: 0; border-radius: 0; }.crop-modal-header { padding: 14px; }.crop-modal-header p { display: none; }.crop-workspace { padding: 8px; }.crop-page-scroll { padding: 12px; }.crop-modal-footer { grid-template-columns: 1fr; padding: 10px; }.crop-zoom-controls, .crop-utility-actions, .crop-main-actions { justify-self: stretch; justify-content: center; }.crop-main-actions { grid-column: auto; }.crop-main-actions button { flex: 1; } }

/* Visualizador compartilhado: Dividir RH e Dividir PDF */
#tool-split .split-pages-view,
#tool-split-simple .split-pages-view {
  min-width: 0;
  min-height: 0;
  max-width: 100%;
  border-color: #e1e8e4;
  border-radius: 17px;
  background: #f3f6f4;
  box-sizing: border-box;
}

#tool-split .split-pages-view .thumb-panel-head,
#tool-split-simple .split-pages-view .thumb-panel-head {
  min-height: 72px;
  padding: 14px 17px;
}

#tool-split .split-pages-view .split-panel-title h3,
#tool-split-simple .split-pages-view .split-panel-title h3 {
  color: #2b3b32;
  font-size: .92rem;
}

#tool-split .split-pages-view .split-panel-title > div > span,
#tool-split-simple .split-pages-view .split-panel-title > div > span {
  color: #849087;
  font-size: .72rem;
}

.split-pages-view .preview-header-actions {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 10px;
  margin-left: auto;
}

#tool-split .split-pages-view .view-toggles,
#tool-split-simple .split-pages-view .view-toggles {
  display: inline-flex;
  gap: 3px;
  padding: 3px;
  border: 1px solid #e0e7e2;
  border-radius: 10px;
  background: #f3f6f4;
}

#tool-split .split-pages-view .page-view-toggle,
#tool-split-simple .split-pages-view .page-view-toggle {
  min-height: 30px !important;
  padding: 4px 10px !important;
  border: 0 !important;
  color: #75827a;
  background: transparent !important;
  box-shadow: none;
}

#tool-split .split-pages-view .page-view-toggle.active,
#tool-split-simple .split-pages-view .page-view-toggle.active {
  color: #276b47;
  background: #fff !important;
  box-shadow: 0 1px 4px rgba(23, 61, 46, .10);
}

.split-pages-view .page-zoom-controls {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px;
  border: 1px solid #e0e7e2;
  border-radius: 10px;
  background: #f7f9f8;
}

.split-pages-view .page-zoom-controls.hidden {
  display: none !important;
}
.split-pages-view .page-zoom-controls button { min-height: 30px; height: 30px; padding: 3px 9px; font-size: .72rem; }
.split-pages-view .page-zoom-button { width: 32px; min-width: 32px; font-size: .9rem !important; }
.split-pages-view .page-zoom-value { min-width: 43px; color: #526159; text-align: center; font-size: .72rem; font-weight: 750; }
.split-pages-view .page-zoom-controls button:disabled { opacity: .4; cursor: not-allowed; }

.model-storage-panel {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin: 0 0 18px;
  padding: 14px 16px;
  border: 1px solid #d8e4dc;
  border-radius: 12px;
  background: #f5f9f6;
}
.model-storage-panel.is-connected { padding: 9px 13px; }
.model-storage-panel > div { min-width: 0; }
.model-storage-panel strong { display: block; color: #315342; font-size: .82rem; }
.model-storage-panel p { margin: 3px 0 0; color: var(--muted); font-size: .75rem; }
.model-storage-panel.is-connected p,
.model-storage-panel.is-connected button { display: none; }
.model-storage-panel.is-connected strong::before { content: '●'; margin-right: 7px; color: var(--green); }

@media (max-width: 600px) {
  .model-storage-panel { align-items: stretch; flex-direction: column; }
}

#tool-split .split-pages-view .thumbnail-grid,
#tool-split-simple .split-pages-view .thumbnail-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  grid-auto-rows: max-content !important;
  align-items: start !important;
  align-content: start !important;
  gap: 16px !important;
  width: 100%;
  height: clamp(580px, 74vh, 850px);
  min-height: 580px;
  max-height: 850px;
  padding: 14px !important;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  overflow-anchor: none;
  scrollbar-color: #b8c8be transparent;
  scrollbar-width: thin;
}

#tool-split .split-pages-view .thumbnail-grid::-webkit-scrollbar,
#tool-split-simple .split-pages-view .thumbnail-grid::-webkit-scrollbar { width: 8px; }

#tool-split .split-pages-view .thumbnail-grid::-webkit-scrollbar-thumb,
#tool-split-simple .split-pages-view .thumbnail-grid::-webkit-scrollbar-thumb {
  border: 2px solid #f3f6f4;
  border-radius: 999px;
  background: #b8c8be;
}

#tool-split .split-pages-view .thumb,
#tool-split-simple .split-pages-view .thumb {
  position: relative !important;
  align-self: start !important;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 10px !important;
  overflow: visible !important;
  border-color: #e0e7e2 !important;
  border-radius: 12px !important;
  background: #fff;
  box-shadow: 0 2px 8px rgba(20, 55, 42, .04);
}

#tool-split .split-pages-view .thumbnail-grid,
#tool-split-simple .split-pages-view .thumbnail-grid {
  transition: none !important;
}

#tool-split .split-pages-view .thumb,
#tool-split-simple .split-pages-view .thumb {
  transition:
    box-shadow 180ms ease,
    border-color 180ms ease,
    background-color 180ms ease !important;
}

#tool-split .split-pages-view .thumb-preview,
#tool-split .split-pages-view .thumb canvas,
#tool-split-simple .split-pages-view .thumb-preview,
#tool-split-simple .split-pages-view .thumb canvas {
  transition: none !important;
}

#tool-split .split-pages-view .thumb:hover,
#tool-split-simple .split-pages-view .thumb:hover {
  border-color: #b9d3c2 !important;
  box-shadow: 0 10px 24px rgba(19, 77, 52, .09);
  transform: none !important;
}

#tool-split .split-pages-view .thumb-preview,
#tool-split .split-pages-view .thumb-placeholder,
#tool-split-simple .split-pages-view .thumb-preview,
#tool-split-simple .split-pages-view .thumb-placeholder {
  position: relative !important;
  display: flex !important;
  align-items: flex-start !important;
  justify-content: center !important;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  margin: 0 !important;
  overflow: visible !important;
  aspect-ratio: auto !important;
}

#tool-split .split-pages-view .thumb-placeholder,
#tool-split-simple .split-pages-view .thumb-placeholder {
  min-height: 150px !important;
  align-items: center !important;
  overflow: hidden !important;
}

#tool-split .split-pages-view .thumb canvas,
#tool-split-simple .split-pages-view .thumb canvas {
  position: static !important;
  display: block !important;
  width: auto !important;
  max-width: 100% !important;
  height: auto !important;
  max-height: none !important;
  margin: 0 auto !important;
  object-fit: contain !important;
  transform: none !important;
}

#tool-split .split-pages-view .thumb > span,
#tool-split-simple .split-pages-view .thumb > span {
  color: #516159;
  font-size: .76rem !important;
  font-weight: 650;
}

#tool-split .split-pages-view .thumbnail-grid.view-single,
#tool-split-simple .split-pages-view .thumbnail-grid.view-single {
  grid-template-columns: minmax(0, 1fr) !important;
  grid-auto-rows: max-content !important;
  align-items: start !important;
  align-content: start !important;
  justify-items: center !important;
  gap: 24px !important;
  padding: 24px !important;
  background: #eef1f3 !important;
}

#tool-split .split-pages-view .thumbnail-grid.view-single .thumb,
#tool-split-simple .split-pages-view .thumbnail-grid.view-single .thumb {
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  padding: 20px !important;
}

#tool-split .split-pages-view .thumbnail-grid.view-single .thumb.page-portrait,
#tool-split-simple .split-pages-view .thumbnail-grid.view-single .thumb.page-portrait { max-width: 680px !important; }

#tool-split .split-pages-view .thumbnail-grid.view-single .thumb.page-landscape,
#tool-split-simple .split-pages-view .thumbnail-grid.view-single .thumb.page-landscape { max-width: 1060px !important; }

#tool-split .split-pages-view .thumbnail-grid.view-single .thumb-preview,
#tool-split-simple .split-pages-view .thumbnail-grid.view-single .thumb-preview {
  height: auto !important;
  min-height: 0 !important;
  margin-top: 0 !important;
  padding: 8px !important;
  overflow: auto !important;
  overscroll-behavior: auto;
  aspect-ratio: auto !important;
}

#tool-split .split-pages-view .thumbnail-grid.view-single.is-page-zoomed .thumb-preview,
#tool-split-simple .split-pages-view .thumbnail-grid.view-single.is-page-zoomed .thumb-preview {
  max-height: min(700px, 66vh) !important;
}

#tool-split .split-pages-view .thumbnail-grid.view-single .thumb canvas,
#tool-split-simple .split-pages-view .thumbnail-grid.view-single .thumb canvas {
  flex: 0 0 auto;
  max-width: none !important;
  max-height: none !important;
}

#tool-split .split-pages-view .thumbnail-grid.view-single .thumb > span,
#tool-split-simple .split-pages-view .thumbnail-grid.view-single .thumb > span {
  margin-bottom: 12px !important;
  padding-bottom: 10px !important;
  font-size: 1.05rem !important;
}

@media (max-width: 1180px) {
  #tool-split .split-pages-view .thumbnail-grid,
  #tool-split-simple .split-pages-view .thumbnail-grid {
    height: min(70vh, 760px);
    min-height: 520px;
  }
}

@media (max-width: 600px) {
  #tool-split .split-pages-view .thumb-panel-head,
  #tool-split-simple .split-pages-view .thumb-panel-head {
    align-items: stretch;
    flex-direction: column;
  }

  .split-pages-view .preview-header-actions {
    align-self: stretch;
    flex-wrap: wrap;
    justify-content: flex-end;
    margin-left: 0;
  }

  .split-pages-view .page-zoom-controls { align-self: flex-start; }
  .split-pages-view .page-zoom-controls.hidden { display: none !important; }

  #tool-split .split-pages-view .thumbnail-grid,
  #tool-split .split-pages-view .thumbnail-grid.view-single,
  #tool-split-simple .split-pages-view .thumbnail-grid,
  #tool-split-simple .split-pages-view .thumbnail-grid.view-single {
    grid-template-columns: minmax(0, 1fr) !important;
    height: max(420px, 62vh);
    min-height: 420px;
    max-height: 680px;
    padding: 12px !important;
  }

  #tool-split .split-pages-view .thumbnail-grid.view-single .thumb,
  #tool-split-simple .split-pages-view .thumbnail-grid.view-single .thumb { padding: 12px !important; }
}

/* Organizador de páginas compartilhado: Juntar PDFs e Organizar PDF */
.merge-source-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 10px;
  margin-top: 12px;
}
.merge-source-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 11px;
  padding: 11px 13px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: var(--surface);
}
.merge-source-card > div { display: grid; min-width: 0; gap: 2px; }
.merge-source-card strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .78rem; }
.merge-source-card small { color: var(--muted); font-size: .69rem; }
.merge-source-card .text-danger-button { min-height: 34px; height: 34px; padding: 6px 10px; font-size: .7rem; white-space: nowrap; }
.merge-pages-scroll,
.organize-pages-scroll {
  max-height: 720px;
  overflow: auto;
  overscroll-behavior: contain;
  padding: 3px 8px 3px 3px;
  scrollbar-width: thin;
  scrollbar-color: #b8c8be transparent;
  overflow-anchor: none;
}
.page-organizer-grid,
.organize-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  align-items: start;
  gap: 14px;
}
.page-organizer-item {
  display: grid;
  grid-template-rows: auto 260px auto auto;
  gap: 9px;
  min-width: 0;
  padding: 11px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  transition: opacity .18s ease, transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.page-organizer-item.dragging { opacity: .45; transform: scale(.98); }
.page-organizer-item.drag-over { border-color: var(--green); box-shadow: 0 0 0 3px var(--green-muted); }
.page-organizer-heading { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.page-organizer-heading strong { color: var(--green-dark); font-size: .8rem; }
.page-organizer-drag { color: var(--muted); cursor: grab; font-size: 1rem; letter-spacing: -3px; }
.page-organizer-preview {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  height: 260px;
  padding: 8px;
  overflow: visible;
  border: 1px solid var(--line-light);
  border-radius: 8px;
  background: #f1f4f2;
}
.page-organizer-preview canvas { display: block; flex: 0 0 auto; max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; background: #fff; box-shadow: var(--shadow-sm); }
.page-organizer-origin { min-height: 30px; overflow-wrap: anywhere; color: var(--muted); line-height: 1.35; font-size: .65rem; }
.page-organizer-moves { display: grid; grid-template-columns: repeat(4, minmax(32px, 1fr)); gap: 5px; }
.page-organizer-button { min-height: 33px; padding: 4px 7px; border: 1px solid var(--line); border-radius: 7px; color: var(--text-secondary); background: var(--surface-alt); font-size: .78rem; font-weight: 700; }
.page-organizer-button:hover:not(:disabled) { border-color: var(--green-muted); color: var(--green-dark); background: var(--green-soft); }
.page-organizer-button:disabled { opacity: .38; cursor: not-allowed; }
.page-organizer-button.danger { color: #fff; border-color: var(--danger); background: var(--danger); }
.page-organizer-button.danger:hover:not(:disabled) { color: #fff; border-color: var(--danger-hover); background: var(--danger-hover); }
.page-organizer-transforms .transform-controls { grid-template-columns: repeat(4, minmax(30px, 1fr)); }
.page-organizer-transforms .transform-reset-button { grid-column: 1 / -1; width: 100%; }
.page-organizer-transforms .transform-state-label { white-space: normal; line-height: 1.3; }
.merge-summary-card > div { display: grid; grid-template-columns: 1fr; }

@media (max-width: 680px) {
  .merge-source-list { grid-template-columns: 1fr; }
  .merge-source-card { grid-template-columns: auto minmax(0, 1fr); }
  .merge-source-card .text-danger-button { grid-column: 1 / -1; width: 100%; }
  .page-organizer-grid,
  .organize-grid { grid-template-columns: 1fr; }
  .page-organizer-item { grid-template-rows: auto 235px auto auto; }
  .page-organizer-preview { height: 235px; }
}

/* Densidade visual global: redução sutil sem zoom ou transform */
html {
  font-size: 15px;
}

.topbar {
  gap: 21px;
  padding: 27px clamp(22px, 4.5vw, 58px);
}

.hero-logo {
  max-width: 220px;
  max-height: 100px;
}

.shell {
  margin-top: 27px;
  margin-bottom: 48px;
}

.home-grid {
  gap: 14px;
  margin-bottom: 21px;
}

.home-card {
  gap: 14px;
  min-height: 164px;
  padding: 27px 21px;
}

.home-grid > .home-card {
  min-height: 204px;
  padding: 25px;
}

.tool-panel {
  padding: 28px;
}

:is(
  #tool-split,
  #tool-split-simple,
  #tool-images,
  #tool-merge,
  #tool-compress,
  #tool-pdf-to-image,
  #tool-organize
).tool-panel {
  padding: clamp(20px, 2.25vw, 32px);
}

.section-head {
  gap: 16px;
  margin-bottom: 24px;
  padding-bottom: 17px;
}

:is(
  #tool-split,
  #tool-split-simple,
  #tool-images,
  #tool-merge,
  #tool-compress,
  #tool-pdf-to-image,
  #tool-organize
) .section-head {
  margin-bottom: 18px;
  padding-bottom: 16px;
}

.dropzone {
  gap: 9px;
  min-height: 164px;
  padding: 27px 22px;
}

.workflow-stack,
.images-config-column,
.simple-split-config {
  gap: 14px;
}

.workflow-step {
  padding: 21px;
}

.field-row {
  gap: 14px;
  margin-bottom: 14px;
}

input,
select,
.custom-dropdown-toggle {
  height: 39px;
  min-height: 39px;
  max-height: 39px;
  padding-left: 12px;
  font-size: .86rem;
  line-height: 39px;
}

:is(
  #tool-split,
  #tool-split-simple,
  #tool-images,
  #tool-merge,
  #tool-compress,
  #tool-pdf-to-image,
  #tool-organize
) input:not([type="file"]):not([type="checkbox"]):not([type="range"]),
:is(
  #tool-split,
  #tool-split-simple,
  #tool-images,
  #tool-merge,
  #tool-compress,
  #tool-pdf-to-image,
  #tool-organize
) select,
:is(
  #tool-split,
  #tool-split-simple,
  #tool-images,
  #tool-merge,
  #tool-compress,
  #tool-pdf-to-image,
  #tool-organize
) .custom-dropdown-toggle {
  height: 39px;
  min-height: 39px;
  max-height: 39px;
}

.crop-modal-panel select {
  height: 34px;
  min-height: 34px;
  max-height: 34px;
  line-height: 34px;
}

.primary-button,
.success-button,
.ghost-button,
.icon-button,
.danger-button {
  min-height: 39px;
  font-size: .84rem;
}

.primary-button,
.success-button {
  padding: 9px 19px;
}

.ghost-button {
  padding: 9px 16px;
}

.modal-panel {
  padding: 25px;
}

.modal-actions {
  gap: 9px;
  margin-top: 21px;
}

.split-config-card,
.images-upload-card,
.images-preview-card {
  padding: 17px;
}

.split-card-heading {
  margin-bottom: 13px;
}

/* Card de página compartilhado por Dividir RH e Dividir PDF */
.split-pages-view .thumbnail-grid {
  gap: 14px !important;
  padding: 12px !important;
}

.split-pages-view .thumb {
  padding: 9px !important;
}

.split-pages-view .thumb > span,
.split-pages-view .thumbnail-grid.view-single .thumb > span {
  margin: 0 0 9px !important;
  padding: 1px 4px 8px !important;
  border-bottom: 1px solid #e5ebe7;
  color: #516159;
  text-align: center;
}

#tool-split-simple .split-pages-view .thumb-preview,
#tool-split-simple .split-pages-view .thumb-placeholder {
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

#tool-split-simple .split-pages-view .thumb-placeholder {
  min-height: 150px !important;
  align-items: center !important;
  background: var(--surface-alt) !important;
}

#tool-split-simple .split-pages-view .thumb canvas {
  background: #fff;
  border: 1px solid var(--line-light) !important;
  border-radius: 4px !important;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .08) !important;
}

#tool-split-simple .split-pages-view .thumb > span {
  width: 100% !important;
  margin: 0 0 10px !important;
  padding: 0 0 8px !important;
  border-bottom: 1px solid var(--line-light);
}

#tool-split-simple .split-pages-view .thumbnail-grid.view-single .thumb-preview {
  padding: 8px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

#tool-split-simple .split-pages-view .thumbnail-grid.view-single .thumb canvas {
  box-shadow: 0 4px 16px rgba(0, 0, 0, .1) !important;
}

/* Dividir RH e Dividir PDF: visualização compacta com quatro páginas por linha */
#tool-split .split-pages-view .thumbnail-grid[data-columns="4"],
#tool-split .split-pages-view .thumbnail-grid.view-four,
#tool-split-simple .split-pages-view .thumbnail-grid[data-columns="4"],
#tool-split-simple .split-pages-view .thumbnail-grid.view-four {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 10px !important;
}

#tool-split .split-pages-view .thumbnail-grid[data-columns="4"] .thumb,
#tool-split .split-pages-view .thumbnail-grid.view-four .thumb,
#tool-split-simple .split-pages-view .thumbnail-grid[data-columns="4"] .thumb,
#tool-split-simple .split-pages-view .thumbnail-grid.view-four .thumb {
  padding: 7px !important;
}

#tool-split .split-pages-view .thumbnail-grid[data-columns="4"] .thumb > span,
#tool-split .split-pages-view .thumbnail-grid.view-four .thumb > span,
#tool-split-simple .split-pages-view .thumbnail-grid[data-columns="4"] .thumb > span,
#tool-split-simple .split-pages-view .thumbnail-grid.view-four .thumb > span {
  margin-bottom: 7px !important;
  padding-bottom: 6px !important;
  font-size: .68rem !important;
}

#tool-split .split-pages-view .thumbnail-grid[data-columns="4"] .thumb-placeholder,
#tool-split .split-pages-view .thumbnail-grid.view-four .thumb-placeholder,
#tool-split-simple .split-pages-view .thumbnail-grid[data-columns="4"] .thumb-placeholder,
#tool-split-simple .split-pages-view .thumbnail-grid.view-four .thumb-placeholder {
  min-height: 90px !important;
}

@media (max-width: 620px) {
  #tool-split .split-pages-view .thumbnail-grid[data-columns="4"],
  #tool-split .split-pages-view .thumbnail-grid.view-four,
  #tool-split-simple .split-pages-view .thumbnail-grid[data-columns="4"],
  #tool-split-simple .split-pages-view .thumbnail-grid.view-four {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 380px) {
  #tool-split .split-pages-view .thumbnail-grid[data-columns="4"],
  #tool-split .split-pages-view .thumbnail-grid.view-four,
  #tool-split-simple .split-pages-view .thumbnail-grid[data-columns="4"],
  #tool-split-simple .split-pages-view .thumbnail-grid.view-four {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

/* Imagem para PDF: configuração de PDFs por grupos */
.images-individual-config {
  margin-top: 14px;
  padding-top: 13px;
}

.images-individual-heading {
  gap: 3px;
  margin-bottom: 10px;
}

.images-individual-list {
  gap: 9px;
  max-height: 430px;
}

.images-pdf-group {
  display: grid;
  gap: 9px;
  padding: 11px;
  border: 1px solid #dfe7e2;
  border-radius: 11px;
  background: #fafcfb;
  transition: border-color var(--transition), background var(--transition), box-shadow var(--transition);
}

.images-pdf-group.invalid {
  border-color: #efb2b5;
  background: #fff8f8;
  box-shadow: 0 0 0 2px rgba(229, 72, 77, .055);
}

.images-pdf-group-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding-bottom: 7px;
  border-bottom: 1px solid #e6ece8;
}

.images-pdf-group-heading strong {
  color: #34483d;
  font-size: .8rem;
}

.images-pdf-group-heading span {
  color: #849087;
  font-size: .68rem;
}

.images-pdf-group-fields {
  display: grid;
  grid-template-columns: minmax(105px, .7fr) minmax(150px, 1.3fr);
  gap: 9px;
}

.images-pdf-group-fields label > span {
  color: #637169;
  font-size: .68rem;
}

#tool-images .images-pdf-group-fields input {
  height: 37px;
  min-height: 37px;
  max-height: 37px;
  font-size: .75rem;
}

.images-remove-group {
  justify-self: end;
  min-height: 33px;
  height: 33px;
  padding: 5px 11px;
  font-size: .7rem;
}

.images-remove-group:disabled {
  opacity: .42;
  cursor: not-allowed;
}

.images-pdf-group-error {
  min-height: 0;
  margin: 0;
  color: var(--danger);
  font-size: .68rem;
  font-weight: 600;
  line-height: 1.4;
}

.images-pdf-group-error:empty {
  display: none;
}

.images-add-group {
  width: 100%;
  margin-top: 10px;
  border-style: dashed;
  color: #2b704a;
  background: #f7fbf8;
}

.images-groups-validation {
  margin-top: 9px;
  padding: 9px 10px;
  border: 1px solid #dce7e0;
  border-radius: 9px;
  color: #64726a;
  background: #f8fbf9;
  font-size: .69rem;
  line-height: 1.45;
}

.images-groups-validation.error {
  border-color: #f1c7c9;
  color: #b43a40;
  background: #fff7f7;
}

.images-groups-validation.success {
  border-color: #cfe3d5;
  color: #2c704a;
  background: #f3faf5;
}

@media (max-width: 600px) {
  html {
    font-size: 15px;
  }

  .topbar {
    padding: 21px 18px;
  }

  .tool-panel {
    padding: 17px;
  }

  .images-pdf-group-fields {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Destaque institucional no final da página inicial */
#ferramentas {
  scroll-margin-top: 24px;
}

.privacy-home-cta {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 20px;
  margin-top: 16px;
  padding: 24px 26px;
  overflow: hidden;
  border: 1px solid #d8e8de;
  border-radius: 20px;
  background:
    radial-gradient(circle at 92% 15%, rgba(46, 187, 78, .10), transparent 28%),
    linear-gradient(135deg, #ffffff 0%, #f3faf5 100%);
  box-shadow: 0 8px 28px rgba(21, 91, 57, .07);
}

.privacy-home-cta::after {
  content: '';
  position: absolute;
  right: -55px;
  bottom: -75px;
  width: 170px;
  height: 170px;
  border: 1px solid rgba(46, 187, 78, .10);
  border-radius: 50%;
  pointer-events: none;
}

.privacy-home-icon {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  border: 1px solid #cce3d4;
  border-radius: 17px;
  color: #25754a;
  background: #ffffff;
  box-shadow: 0 5px 16px rgba(31, 105, 66, .09);
}

.privacy-home-copy {
  position: relative;
  z-index: 1;
  min-width: 0;
}

.privacy-home-eyebrow {
  margin: 0 0 3px;
  color: #347758;
  font-size: .67rem;
  font-weight: 750;
  letter-spacing: .09em;
  text-transform: uppercase;
}

.privacy-home-copy h2 {
  margin: 0 0 4px;
  color: #243a2e;
  font-size: clamp(1.08rem, 1.5vw, 1.3rem);
  letter-spacing: -.02em;
}

.privacy-home-copy > p:last-child {
  max-width: 720px;
  margin: 0;
  color: #68766e;
  font-size: .82rem;
  line-height: 1.55;
}

.privacy-home-button {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 44px;
  padding: 10px 18px;
  border: 1px solid #2a8b54;
  border-radius: 11px;
  color: #ffffff;
  background: linear-gradient(135deg, #2b8b55, #1f7045);
  box-shadow: 0 4px 13px rgba(35, 121, 73, .18);
  font-size: .8rem;
  font-weight: 700;
  line-height: 1.35;
  text-align: center;
  text-decoration: none;
  transition: transform var(--transition), box-shadow var(--transition), background var(--transition);
}

.privacy-home-button:hover {
  background: linear-gradient(135deg, #267e4e, #195f3a);
  box-shadow: 0 7px 18px rgba(35, 121, 73, .24);
  transform: translateY(-1px);
}

.privacy-home-button:focus-visible {
  outline: 3px solid rgba(46, 187, 78, .28);
  outline-offset: 3px;
}

@media (max-width: 850px) {
  .privacy-home-cta {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .privacy-home-button {
    grid-column: 2;
    justify-self: start;
  }
}

@media (max-width: 560px) {
  .privacy-home-cta {
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
    padding: 21px;
  }

  .privacy-home-icon {
    width: 50px;
    height: 50px;
  }

  .privacy-home-button {
    grid-column: auto;
    width: 100%;
  }
}

/* Upload e arquivo selecionado compartilhados entre todas as ferramentas */
#tool-split-simple .split-empty-state,
#images-upload-card,
#merge-upload-card,
#compress-upload-card,
#pdf-to-image-upload-card,
#organize-upload-card {
  width: 100%;
  max-width: none;
  margin-right: 0;
  margin-left: 0;
  box-sizing: border-box;
}

#tool-split-simple .split-empty-state {
  margin-top: 18px;
  margin-bottom: 24px;
}

#simple-split-drop,
#images-drop,
#merge-drop,
#compress-drop,
#pdf-to-image-drop,
#organize-drop {
  width: 100% !important;
  max-width: none !important;
  min-height: 135px !important;
  margin: 0 !important;
  padding: 22px !important;
  gap: 9px !important;
  border: 1.5px dashed #a9cdb7 !important;
  border-radius: 15px !important;
  background: #f8fbf9 !important;
  box-shadow: none !important;
  box-sizing: border-box;
}

#simple-split-drop:hover,
#simple-split-drop.dragover,
#images-drop:hover,
#images-drop.dragover,
#merge-drop:hover,
#merge-drop.dragover,
#compress-drop:hover,
#compress-drop.dragover,
#pdf-to-image-drop:hover,
#pdf-to-image-drop.dragover,
#organize-drop:hover,
#organize-drop.dragover {
  border-color: #4a9a69 !important;
  background: #f1f8f4 !important;
  box-shadow: 0 6px 18px rgba(24, 102, 64, .06) !important;
  transform: none !important;
}

#simple-split-drop .drop-icon,
#images-drop .drop-icon,
#merge-drop .drop-icon,
#compress-drop .drop-icon,
#pdf-to-image-drop .drop-icon,
#organize-drop .drop-icon {
  width: 48px !important;
  height: 48px !important;
  margin: 0 !important;
  border: 1px solid #cce8d6 !important;
  border-radius: 16px !important;
  color: #187a45 !important;
  background: #eef8f2 !important;
  box-shadow: 0 6px 16px rgba(24, 122, 69, .10) !important;
}

#simple-split-drop:focus-within .drop-icon,
#images-drop:focus-within .drop-icon,
#merge-drop:focus-within .drop-icon,
#compress-drop:focus-within .drop-icon,
#pdf-to-image-drop:focus-within .drop-icon,
#organize-drop:focus-within .drop-icon {
  outline: 3px solid rgba(46, 187, 78, .25);
  outline-offset: 3px;
}

#simple-split-drop input[type="file"],
#images-drop input[type="file"],
#merge-drop input[type="file"],
#compress-drop input[type="file"],
#pdf-to-image-drop input[type="file"],
#organize-drop input[type="file"] {
  inset: 0;
  width: auto !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  padding: 0 !important;
  border: 0 !important;
}

.shared-upload-container.has-selected-file {
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.standard-file-card {
  display: grid !important;
  grid-template-columns: 44px minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 12px !important;
  width: 100% !important;
  min-height: 68px;
  margin: 0 !important;
  padding: 11px 14px !important;
  border: 1px solid #dfe8e2 !important;
  border-radius: 15px !important;
  color: #7b8880;
  background: #f8fbf9 !important;
  box-shadow: none !important;
  box-sizing: border-box;
}

.standard-file-card.hidden,
.standard-file-card:empty {
  display: none !important;
}

.file-type-badge {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid #cfe5d7;
  border-radius: 10px;
  color: #267249;
  background: #e8f4ec;
  font-size: .66rem;
  font-weight: 800;
  letter-spacing: .045em;
  line-height: 1;
}

.selected-file-meta {
  display: grid !important;
  gap: 2px !important;
  min-width: 0;
}

.selected-file-meta strong {
  overflow: hidden !important;
  color: #26372e !important;
  font-size: .92rem !important;
  font-weight: 650;
  line-height: 1.35;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.selected-file-meta small {
  overflow: hidden;
  color: #7b8880 !important;
  font-size: .76rem !important;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.standard-file-card .summary-actions {
  display: flex !important;
  flex: 0 0 auto;
  flex-flow: row nowrap !important;
  align-items: center;
  justify-content: flex-end;
  gap: 8px !important;
  min-width: 0;
}

.standard-file-card .summary-actions button {
  flex: 0 1 auto;
  min-width: 0;
  min-height: 34px !important;
  height: 34px !important;
  padding: 6px 11px !important;
  font-size: .74rem !important;
  line-height: 1.2;
  white-space: nowrap;
}

@media (max-width: 560px) {
  .standard-file-card {
    grid-template-columns: 40px minmax(0, 1fr) !important;
    gap: 9px 11px !important;
    padding: 11px !important;
  }

  .file-type-badge {
    width: 40px;
    height: 40px;
  }

  .standard-file-card .summary-actions {
    grid-column: 1 / -1;
    width: 100%;
  }

  .standard-file-card .summary-actions button {
    flex: 1 1 0;
    padding-right: 7px !important;
    padding-left: 7px !important;
    font-size: .7rem !important;
  }
}

/* Juntar PDFs: seleção unificada e densidade da grade */
#tool-merge #merge-upload-actions.merge-selection-panel {
  display: grid;
  gap: 11px;
  width: 100%;
  margin: 0;
  padding: 13px 15px;
  border: 1px solid #dfe8e2;
  border-radius: 15px;
  background: #f8fbf9;
  box-shadow: none;
  box-sizing: border-box;
}

#tool-merge #merge-upload-actions.hidden {
  display: none !important;
}

.merge-selection-header {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  align-items: center;
  gap: 11px;
}

.merge-selection-header > div {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.merge-selection-header strong {
  color: #26372e;
  font-size: .9rem;
}

#tool-merge #merge-upload-count {
  overflow: hidden;
  color: #7b8880;
  font-size: .75rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#tool-merge #merge-upload-actions .merge-source-list {
  gap: 8px;
  max-height: 176px;
  margin: 0;
  padding: 0 3px 0 0;
  overflow-y: auto;
  overscroll-behavior: contain;
}

#tool-merge #merge-upload-actions .merge-source-card {
  gap: 9px;
  min-width: 0;
  padding: 9px 10px;
  border-color: #dfe7e2;
  border-radius: 9px;
  background: #fff;
}

#tool-merge #merge-upload-actions .merge-source-card .pdf-file-badge {
  width: 38px;
  height: 44px;
  border-radius: 8px;
  font-size: .65rem;
}

#tool-merge #merge-upload-actions > .summary-actions {
  flex-flow: row nowrap;
  justify-content: flex-end;
  gap: 8px;
  padding-top: 10px;
  border-top: 1px solid #e2e9e5;
}

#tool-merge #merge-upload-actions > .summary-actions button {
  min-height: 34px;
  height: 34px;
  padding: 6px 11px;
  font-size: .73rem;
  white-space: nowrap;
}

#tool-merge .merge-thumbnail-progress {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 7px 14px;
  width: 100%;
  min-height: 112px;
  margin-top: 12px;
  padding: 14px 15px;
  border: 1px solid #dfe8e2;
  border-radius: 12px;
  color: #68776f;
  background: #f8fbf9;
  box-shadow: var(--shadow-sm);
  box-sizing: border-box;
}

#tool-merge .merge-thumbnail-progress.hidden {
  display: none;
}

#tool-merge .merge-thumbnail-progress strong {
  grid-column: 1 / -1;
  color: #2f4237;
  font-size: .86rem;
}

#tool-merge .merge-thumbnail-progress span,
#tool-merge .merge-thumbnail-progress b {
  font-size: .75rem;
  line-height: 1.35;
}

#tool-merge .merge-thumbnail-progress b {
  color: #28734a;
  text-align: right;
}

#tool-merge .merge-thumbnail-track {
  grid-column: 1 / -1;
  width: 100%;
  height: 9px;
  overflow: hidden;
  border-radius: 999px;
  background: #e5ebe7;
}

#tool-merge .merge-thumbnail-track i {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: var(--green);
  transition: width .16s ease;
}

#tool-merge #merge-workspace.is-loading > * {
  visibility: hidden;
  pointer-events: none;
}

.merge-organize-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 13px;
}

.merge-organize-heading .split-card-heading {
  margin-bottom: 0;
}

#tool-merge .merge-view-toggles {
  display: inline-flex;
  flex: 0 0 auto;
  gap: 3px;
  padding: 3px;
  border: 1px solid #e0e7e2;
  border-radius: 12px;
  overflow: hidden;
  background: #f3f6f4;
}

#tool-merge .merge-view-toggles .page-view-toggle {
  min-height: 30px !important;
  padding: 4px 10px !important;
  border: 0 !important;
  border-radius: 8px !important;
  color: #75827a;
  background: transparent !important;
  box-shadow: none;
  white-space: nowrap;
  transition: color .16s ease, background-color .16s ease, box-shadow .16s ease;
}

#tool-merge .merge-view-toggles .page-view-toggle.active {
  border-radius: 8px !important;
  color: #276b47;
  background: #fff !important;
  box-shadow: 0 1px 4px rgba(23, 61, 46, .10);
}

#merge-list[data-columns="3"] {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

#merge-list[data-columns="4"] {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

#merge-list,
#merge-list .page-organizer-item,
#merge-list .page-organizer-preview,
#merge-list .page-organizer-preview canvas {
  transition-property: none;
}

/* Comprimir PDF: resumo final compacto e centralizado */
#tool-compress #compress-success .success-summary-card {
  display: grid;
  grid-template-columns: auto auto auto auto;
  align-items: center;
  justify-content: center;
  gap: 22px;
  width: fit-content;
  max-width: 100%;
  margin: 4px auto 0;
  padding: 18px 22px;
}

#tool-compress #compress-success .stat-box {
  align-items: center;
  min-width: max-content;
  text-align: center;
}

#tool-compress #compress-success .savings-stat {
  margin-left: 0;
}

/* Organizar PDF: remoção no lugar da ação de reset */
#tool-organize .page-organizer-item {
  grid-template-rows: auto 210px auto auto auto;
  align-content: start;
  height: 100%;
}

#tool-merge .transform-remove-button,
#tool-organize .transform-remove-button {
  grid-column: 1 / -1;
  width: 100%;
  color: #a33f43;
  border-color: #e5b6b8;
  background: #fff7f7;
  font-weight: 750;
}

#tool-merge .transform-remove-button:hover:not(:disabled),
#tool-organize .transform-remove-button:hover:not(:disabled) {
  color: #8f3035;
  border-color: #d98f93;
  background: #fff0f0;
}

#tool-merge .transform-remove-button:disabled,
#tool-organize .transform-remove-button:disabled {
  color: #9e8a8b;
  border-color: #eadcdd;
  background: #faf7f7;
}

@media (max-width: 1000px) {
  #merge-list[data-columns="3"],
  #merge-list[data-columns="4"] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 680px) {
  .merge-organize-heading {
    align-items: stretch;
    flex-direction: column;
  }

  #tool-merge .merge-view-toggles {
    align-self: flex-start;
  }

  #tool-merge #merge-upload-actions > .summary-actions {
    justify-content: stretch;
  }

  #tool-merge #merge-upload-actions > .summary-actions button {
    flex: 1 1 0;
    min-width: 0;
  }

  #tool-compress #compress-success .success-summary-card {
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    gap: 12px;
    width: 100%;
    padding: 16px;
  }

  #tool-compress #compress-success .savings-stat {
    grid-column: 1 / -1;
    justify-self: stretch;
  }

  #tool-organize .page-organizer-item {
    grid-template-rows: auto 210px auto auto auto;
  }
}

@media (max-width: 560px) {
  #merge-list[data-columns="3"],
  #merge-list[data-columns="4"] {
    grid-template-columns: minmax(0, 1fr);
  }

  #tool-merge #merge-upload-actions .merge-source-list {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Miniaturas compartilhadas: sem legendas técnicas e sempre inteiras */
.transform-state-label,
.page-organizer-origin {
  display: none;
}

:is(#organize-grid, #merge-list) .page-organizer-preview {
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  min-height: 0;
  overflow: hidden;
  contain: layout paint;
  isolation: isolate;
}

:is(#organize-grid, #merge-list) .page-organizer-preview canvas {
  display: block;
  flex: 0 0 auto;
  max-width: calc(100% - 2px);
  max-height: calc(100% - 2px);
  width: auto;
  height: auto;
  margin: auto;
  object-fit: contain;
}

:is(#organize-grid, #merge-list) {
  align-items: stretch;
}

#organize-grid .page-organizer-heading,
#organize-grid .page-organizer-moves,
#organize-grid .page-organizer-transforms,
#organize-grid .page-organizer-remove-group {
  position: relative;
  z-index: 1;
  min-width: 0;
  width: 100%;
}

#organize-grid .page-organizer-moves {
  padding: 6px;
  border: 1px solid #dfe7e2;
  border-radius: 9px;
  background: #f7faf8;
  box-sizing: border-box;
}

#organize-grid .page-organizer-transforms {
  align-self: start;
}

#organize-grid .page-organizer-transforms .transform-controls {
  width: 100%;
  box-sizing: border-box;
}

#organize-grid .page-organizer-remove-group {
  display: grid;
}

#organize-grid .page-organizer-remove-group .transform-remove-button {
  display: flex;
  align-items: center;
  justify-content: center;
  grid-column: auto;
  min-height: 33px;
  height: 33px;
  box-sizing: border-box;
}

/* Organizar PDF: preferência de quatro páginas por linha */
.organize-pages-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
}

.organize-pages-heading .step-heading {
  margin-bottom: 0;
}

#tool-organize .organizer-view-toggles {
  display: inline-flex;
  flex: 0 0 auto;
  gap: 3px;
  padding: 3px;
  border: 1px solid #e0e7e2;
  border-radius: 12px;
  overflow: hidden;
  background: #f3f6f4;
}

#tool-organize .organizer-view-toggles .page-view-toggle {
  min-height: 30px !important;
  padding: 4px 10px !important;
  border: 0 !important;
  border-radius: 8px !important;
  color: #75827a;
  background: transparent !important;
  box-shadow: none;
  white-space: nowrap;
  transition: color .16s ease, background-color .16s ease, box-shadow .16s ease;
}

#tool-organize .organizer-view-toggles .page-view-toggle.active {
  border-radius: 8px !important;
  color: #276b47;
  background: #fff !important;
  box-shadow: 0 1px 4px rgba(23, 61, 46, .10);
}

#organize-grid[data-columns="2"] {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

#organize-grid[data-columns="4"] {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

#organize-grid,
#organize-grid .page-organizer-item,
#organize-grid .page-organizer-preview,
#organize-grid .page-organizer-preview canvas {
  transition-property: none;
}

@media (max-width: 760px) {
  #organize-grid[data-columns="2"],
  #organize-grid[data-columns="4"] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .organize-pages-heading {
    align-items: stretch;
    flex-direction: column;
  }

  #tool-organize .organizer-view-toggles {
    align-self: flex-start;
  }
}

@media (max-width: 420px) {
  #organize-grid[data-columns="2"],
  #organize-grid[data-columns="4"] {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Card compartilhado de páginas: Organizar PDF e Juntar PDFs */
:is(#organize-grid, #merge-list) .page-organizer-item-compact {
  position: relative;
  z-index: 0;
  grid-template-rows: auto 235px auto;
  align-content: start;
  gap: 8px;
  height: 100%;
  padding: 9px;
  overflow: visible;
}

:is(#organize-grid, #merge-list) .page-organizer-item-compact.menu-open {
  z-index: 20;
}

:is(#organize-grid, #merge-list) .page-organizer-item-compact .page-organizer-preview {
  grid-row: 2;
  height: 235px;
  max-height: 235px;
  cursor: grab;
}

@media (min-width: 421px) {
  #organize-grid[data-columns="2"] .page-organizer-item-compact {
    grid-template-rows: auto clamp(400px, 54vh, 580px) auto;
  }

  #organize-grid[data-columns="2"] .page-organizer-item-compact .page-organizer-preview {
    height: clamp(400px, 54vh, 580px);
    max-height: none;
  }

  #merge-list[data-columns="3"] .page-organizer-item-compact {
    grid-template-rows: auto clamp(300px, 40vh, 390px) auto;
  }

  #merge-list[data-columns="3"] .page-organizer-item-compact .page-organizer-preview {
    height: clamp(300px, 40vh, 390px);
    max-height: none;
  }
}

:is(#organize-grid, #merge-list) .page-organizer-item-compact.dragging .page-organizer-preview {
  cursor: grabbing;
}

:is(#organize-grid, #merge-list) .page-card-actions {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  align-items: center;
  gap: 4px;
  width: 100%;
  min-height: 40px;
  min-width: 0;
}

:is(#organize-grid, #merge-list) .page-card-move-button,
:is(#organize-grid, #merge-list) .page-card-remove-button,
:is(#organize-grid, #merge-list) .page-card-menu-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 40px;
  height: auto;
  min-height: 0;
  aspect-ratio: 1 / 1;
  justify-self: center;
  margin: 0;
  padding: 0;
  border-radius: 7px;
  box-sizing: border-box;
  line-height: 1;
}

:is(#organize-grid, #merge-list) .page-card-move-button {
  color: #52645a;
  border-color: #d8e2dc;
  background: #fff;
  font-size: .98rem;
  font-weight: 750;
}

:is(#organize-grid, #merge-list) .page-card-move-button:hover:not(:disabled) {
  color: #246d45;
  border-color: #9fcbb0;
  background: #edf7f0;
}

:is(#organize-grid, #merge-list) .page-card-remove-button {
  color: #fff;
  border-color: var(--danger);
  background: var(--danger);
}

:is(#organize-grid, #merge-list) .page-card-remove-button:hover:not(:disabled) {
  color: #fff;
  border-color: var(--danger-hover);
  background: var(--danger-hover);
  box-shadow: 0 2px 6px rgba(229, 72, 77, .18);
}

:is(#organize-grid, #merge-list) .page-card-menu-toggle {
  color: #52645a;
  border-color: #d8e2dc;
  background: #fff;
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: .08em;
}

:is(#organize-grid, #merge-list) .page-card-menu-toggle:hover,
:is(#organize-grid, #merge-list) .page-card-menu-toggle[aria-expanded="true"] {
  color: #246d45;
  border-color: #9fcbb0;
  background: #edf7f0;
}

:is(#organize-grid, #merge-list) .page-card-menu {
  position: absolute;
  right: 0;
  bottom: calc(100% + 7px);
  z-index: 30;
  display: block;
  width: auto;
  min-width: 0;
  padding: 9px;
  border: 1px solid #d9e3dd;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 10px 28px rgba(26, 54, 38, .18);
  box-sizing: border-box;
}

:is(#organize-grid, #merge-list) .page-card-menu.hidden {
  display: none;
}

:is(#organize-grid, #merge-list) .page-card-menu-transforms {
  display: grid;
  grid-template-columns: repeat(2, 40px);
  gap: 7px;
}

:is(#organize-grid, #merge-list) .page-card-menu-action {
  display: grid;
  place-items: center;
  align-items: center;
  width: 40px;
  min-width: 40px;
  height: 40px;
  min-height: 40px;
  padding: 0;
  border-color: #d8e2dc;
  color: #485a50;
  background: #fff;
  font-size: 1rem;
  font-weight: 750;
  line-height: 1;
}

:is(#organize-grid, #merge-list) .page-card-menu-action:hover,
:is(#organize-grid, #merge-list) .page-card-menu-action.is-active {
  color: #1e6940;
  border-color: #d5e6db;
  background: #edf7f0;
}

.page-organizer-preview.is-loading,
.page-organizer-preview.is-error {
  color: #7a877f;
  font-size: .7rem;
  font-weight: 650;
  text-align: center;
}

.page-organizer-preview.is-error {
  color: #a74449;
  background: #fff7f7;
}

.page-organizer-preview-loading {
  display: block;
  padding: 8px;
}

#tool-organize .organize-toast.is-timed {
  animation: organize-toast-lifetime 4s linear both;
}

@keyframes organize-toast-lifetime {
  0%,
  94% {
    opacity: 1;
    transform: translateY(0);
  }

  100% {
    opacity: 0;
    transform: translateY(6px);
  }
}

@media (prefers-reduced-motion: reduce) {
  #tool-organize .organize-toast.is-timed {
    animation-name: none;
  }
}

/* Recorte multipágina — Dividir RH */
.crop-controls-heading {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-start;
}

.prepared-category-summary {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 5px;
  width: 100%;
  margin-bottom: 4px;
}

.prepared-category-summary span {
  display: flex;
  justify-content: space-between;
  gap: 5px;
  padding: 5px 7px;
  border: 1px solid #dfe8e2;
  border-radius: 7px;
  color: #607067;
  background: #f8fbf9;
  font-size: .64rem;
}

.prepared-category-summary b {
  color: #216b40;
}

.crop-controls-heading > div {
  display: grid;
  gap: 2px;
}

.crop-controls-heading strong {
  color: #33483b;
  font-size: .82rem;
}

.crop-controls-heading small {
  color: #77857d;
  font-size: .72rem;
}

.crop-multi-control-row {
  position: relative;
  align-items: stretch;
}

.crop-multi-picker {
  position: relative;
  flex: 1 1 230px;
  min-width: 0;
}

.crop-multi-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  min-height: 38px;
  padding: 7px 12px;
  border: 1.5px solid #d9e3dd;
  border-radius: 9px;
  color: #42534a;
  background: #fff;
  text-align: left;
  font-size: .78rem;
  font-weight: 650;
}

.crop-multi-toggle:hover {
  border-color: #9fd2af;
}

.crop-multi-picker.open .crop-multi-toggle {
  border-color: var(--green);
  box-shadow: 0 0 0 3px rgba(46, 187, 78, .12);
}

.crop-multi-menu {
  position: absolute;
  z-index: 240;
  top: calc(100% + 6px);
  left: 0;
  width: min(360px, 100%);
  max-height: 290px;
  overflow: hidden;
  border: 1px solid #d9e3dd;
  border-radius: 11px;
  background: #fff;
  box-shadow: 0 14px 34px rgba(23, 53, 35, .18);
}

.crop-multi-menu-actions {
  display: flex;
  gap: 6px;
  padding: 9px;
  border-bottom: 1px solid #e8eee9;
  background: #f8fbf9;
}

.crop-multi-menu-actions button {
  min-height: 30px;
  padding: 4px 9px;
  border: 1px solid #d8e2dc;
  border-radius: 7px;
  color: #376047;
  background: #fff;
  font-size: .7rem;
  font-weight: 700;
}

.crop-multi-options {
  display: grid;
  gap: 3px;
  max-height: 225px;
  padding: 7px;
  overflow: auto;
}

.crop-multi-option {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  min-height: 34px;
  padding: 5px 8px;
  border: 0;
  border-radius: 7px;
  color: #45564c;
  background: #fff;
  text-align: left;
  font-size: .76rem;
}

.crop-multi-option:hover,
.crop-multi-option:focus-visible {
  color: #1d653d;
  background: #edf7f0;
  outline: none;
}

.crop-multi-option[aria-selected="true"] {
  color: #176139;
  background: #e6f5eb;
  font-weight: 700;
}

.crop-option-check {
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border: 1.5px solid #bdcbc2;
  border-radius: 5px;
  color: #fff;
  background: #fff;
  font-size: .7rem;
}

.crop-multi-option[aria-selected="true"] .crop-option-check {
  border-color: #279d52;
  background: #279d52;
}

.crop-open-editor-button {
  flex: 0 0 auto;
}

.crop-review-list {
  display: grid;
  gap: 5px;
}

.crop-review-item {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: center;
  min-height: 34px;
  padding: 6px 9px;
  border: 1px solid #dfe8e2;
  border-radius: 8px;
  color: #53635a;
  background: #fff;
  font-size: .72rem;
}

.crop-review-item.complete {
  border-color: #cce5d4;
  color: #216c41;
  background: #f2faf4;
}

.crop-review-item.pending {
  border-color: #f0d8ad;
  color: #8b641e;
  background: #fffaf1;
}

.crop-review-remove {
  padding: 2px 6px;
  border: 0;
  color: #b83e45;
  background: transparent;
  font-size: .68rem;
  font-weight: 700;
}

.crop-batch-navigation {
  position: relative;
  z-index: 3;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 12px;
  padding: 9px 20px;
  border-bottom: 1px solid #e0e7e2;
  background: #f8fbf9;
}

.crop-modal-panel {
  grid-template-rows: auto auto minmax(0, 1fr) auto;
}

.crop-batch-navigation > button {
  min-height: 34px;
  padding: 5px 10px;
  font-size: .74rem;
}

.crop-batch-navigation > button:last-child {
  justify-self: end;
}

.crop-batch-navigation > strong {
  color: #405249;
  font-size: .78rem;
}

.crop-batch-review {
  display: grid;
  gap: 5px;
  max-height: 150px;
  overflow: auto;
}

.crop-batch-review > strong {
  color: #405249;
  font-size: .75rem;
}

.crop-batch-review-item {
  width: 100%;
  min-height: 31px;
  padding: 5px 7px;
  border: 1px solid #dfe7e1;
  border-radius: 7px;
  color: #5a6860;
  background: #fff;
  text-align: left;
  font-size: .66rem;
}

.crop-batch-review-item.complete {
  color: #216c41;
  border-color: #cae4d2;
  background: #edf8f0;
}

.crop-batch-review-item.pending {
  color: #8b641e;
  border-color: #efd8ae;
  background: #fffaf1;
}

.crop-batch-review-item[aria-current="page"] {
  box-shadow: 0 0 0 2px rgba(46, 187, 78, .18);
}

/* Assinar PDF */
.home-grid > .home-card:nth-child(5),
.home-grid > .home-card:nth-child(6),
.home-grid > .home-card:nth-child(7),
.home-grid > .home-card:nth-child(8) {
  grid-column: span 2;
  justify-self: stretch;
  width: 100%;
}

.sign-tool {
  --sign-panel: #f8faf9;
  --sign-border: #dfe6e1;
}

.home-icon-sign {
  color: #fff !important;
  background: linear-gradient(135deg, #2776d9, #285cb3);
}

.sign-privacy-note {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 18px;
  padding: 13px 16px;
  border: 1px solid #cde5d4;
  border-radius: 11px;
  color: #41604c;
  background: #f0f9f3;
  font-size: .82rem;
}

.sign-privacy-note strong {
  flex: 0 0 auto;
  color: #1f6b3d;
}

.sign-file-strip {
  display: flex;
  align-items: stretch;
  gap: 10px;
  margin-bottom: 16px;
}

.sign-file-list {
  display: flex;
  flex: 1;
  gap: 8px;
  min-width: 0;
  overflow-x: auto;
}

.sign-file-card {
  display: flex;
  align-items: center;
  gap: 9px;
  flex: 0 0 min(310px, 78vw);
  min-width: 0;
  padding: 10px 11px;
  border: 1.5px solid var(--sign-border);
  border-radius: 10px;
  background: #fff;
  cursor: pointer;
}

.sign-file-card.active {
  border-color: #38a15c;
  background: #f0f9f3;
  box-shadow: 0 0 0 2px rgba(46, 187, 78, .1);
}

.sign-file-card > span {
  display: grid;
  min-width: 0;
}

.sign-file-card strong,
.sign-file-card small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sign-file-card strong {
  font-size: .78rem;
}

.sign-file-card small {
  color: #77837c;
  font-size: .68rem;
}

.sign-file-remove {
  display: grid;
  place-items: center;
  flex: 0 0 26px;
  width: 26px;
  height: 26px;
  border: 0;
  border-radius: 7px;
  color: #a33d43;
  background: #fff0f0;
  font-size: 1rem;
}

.sign-add-file-button {
  position: relative;
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  overflow: hidden;
}

.sign-add-file-button input,
.signature-image-upload input {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}

.sign-editor-layout {
  display: grid;
  grid-template-columns: minmax(300px, 360px) minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}

.sign-assets-panel,
.sign-document-panel {
  min-width: 0;
  border: 1px solid var(--sign-border);
  border-radius: 13px;
  background: #fff;
}

.sign-assets-panel {
  position: sticky;
  top: 16px;
  max-height: calc(100vh - 32px);
  overflow: auto;
  padding: 16px;
}

.sign-panel-heading {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: flex-start;
  margin-bottom: 13px;
}

.sign-panel-heading h3,
.sign-review-heading h3 {
  margin: 0 0 3px;
  color: #283b30;
  font-size: .98rem;
}

.sign-panel-heading p,
.sign-review-heading p {
  margin: 0;
  color: #758079;
  font-size: .72rem;
}

.sign-collapse-button {
  display: none;
  width: 34px;
  height: 34px;
  border: 1px solid #dce5df;
  border-radius: 8px;
  color: #526159;
  background: #fff;
}

.sign-mode-tabs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 5px;
  margin-bottom: 12px;
  padding: 4px;
  border-radius: 9px;
  background: #eef2ef;
}

.sign-mode-tabs button {
  min-height: 34px;
  padding: 5px;
  border: 0;
  border-radius: 7px;
  color: #607067;
  background: transparent;
  font-size: .7rem;
  font-weight: 700;
}

.sign-mode-tabs button[aria-selected="true"] {
  color: #1d693d;
  background: #fff;
  box-shadow: 0 1px 4px rgba(26, 54, 38, .1);
}

.sign-create-panel {
  display: grid;
  gap: 10px;
}

#signature-draw-canvas {
  display: block;
  width: 100%;
  height: 145px;
  border: 1px solid #dce4df;
  border-radius: 9px;
  background-color: #fff;
  background-image: linear-gradient(#f0f3f1 1px, transparent 1px);
  background-size: 100% 36px;
  cursor: crosshair;
  touch-action: none;
}

.signature-draw-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  align-items: end;
}

.signature-draw-controls .ghost-button {
  min-height: 32px;
  padding: 5px 8px;
  font-size: .67rem;
}

.signature-draw-controls label {
  display: grid;
  flex: 1;
  min-width: 100px;
}

.signature-draw-controls label span {
  margin-bottom: 0;
  font-size: .65rem;
}

.signature-draw-controls input[type="range"] {
  height: 32px;
  min-height: 32px;
  padding: 0;
}

.signature-style-list {
  display: grid;
  gap: 6px;
}

.signature-style-list button {
  min-height: 48px;
  padding: 6px 12px;
  overflow: hidden;
  border: 1.5px solid #dce4df;
  border-radius: 8px;
  color: #20372a;
  background: #fff;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 1.15rem;
}

.signature-style-list button.selected {
  border-color: #35a25a;
  background: #f0f9f3;
  box-shadow: 0 0 0 2px rgba(46, 187, 78, .1);
}

.signature-image-upload {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 76px;
  padding: 12px;
  border: 1.5px dashed #b9d8c3;
  border-radius: 9px;
  color: #276b42;
  background: #f4faf6;
  font-size: .76rem;
  font-weight: 700;
}

.signature-image-preview {
  display: grid;
  place-items: center;
  min-height: 110px;
  padding: 10px;
  overflow: hidden;
  border: 1px solid #e0e6e2;
  border-radius: 9px;
  color: #879087;
  background: #f7f9f8;
  font-size: .7rem;
}

.signature-image-preview img {
  max-height: 150px;
  object-fit: contain;
}

.signature-create-meta {
  display: grid;
  grid-template-columns: 1fr 120px;
  gap: 8px;
  margin-top: 12px;
}

.signature-create-actions {
  display: flex;
  justify-content: flex-end;
  margin: 10px 0 16px;
}

.signature-create-actions button {
  min-height: 38px;
  padding: 7px 13px;
  font-size: .75rem;
}

.signature-library-heading {
  display: grid;
  gap: 8px;
  padding-top: 12px;
  border-top: 1px solid #e9eeeb;
}

.signature-library-heading > div {
  display: flex;
  justify-content: space-between;
  gap: 8px;
}

.signature-library-heading h4 {
  margin: 0;
  color: #33463a;
  font-size: .82rem;
}

.signature-library-heading span,
.signature-save-consent {
  color: #738077;
  font-size: .68rem;
}

.signature-save-consent {
  display: flex;
  align-items: center;
  gap: 7px;
}

.signature-save-consent input,
.sign-inline-check input {
  flex: 0 0 17px;
  width: 17px;
  height: 17px;
  min-height: 17px;
  padding: 0;
}

.signature-library {
  display: grid;
  gap: 7px;
  margin-top: 9px;
}

.signature-library-empty {
  margin: 0;
  padding: 12px;
  border-radius: 8px;
  color: #7b877f;
  background: #f5f7f6;
  font-size: .7rem;
  text-align: center;
}

.signature-asset-card {
  overflow: hidden;
  border: 1.5px solid #dfe6e1;
  border-radius: 9px;
  background: #fff;
}

.signature-asset-card.selected {
  border-color: #36a15a;
  box-shadow: 0 0 0 2px rgba(46, 187, 78, .1);
}

.signature-asset-select {
  display: grid;
  grid-template-columns: 76px 1fr;
  gap: 9px;
  align-items: center;
  width: 100%;
  min-height: 62px;
  padding: 7px;
  border: 0;
  color: #34453b;
  background: #fff;
  text-align: left;
}

.signature-asset-select img {
  width: 76px;
  height: 44px;
  object-fit: contain;
}

.signature-asset-select span {
  display: grid;
  min-width: 0;
}

.signature-asset-select strong,
.signature-asset-select small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.signature-asset-select strong {
  font-size: .73rem;
}

.signature-asset-select small {
  color: #7b867f;
  font-size: .62rem;
}

.signature-asset-actions {
  display: flex;
  border-top: 1px solid #edf0ee;
}

.signature-asset-actions button {
  flex: 1;
  min-height: 28px;
  padding: 4px;
  border: 0;
  border-right: 1px solid #edf0ee;
  color: #647168;
  background: #fafbfa;
  font-size: .6rem;
}

.signature-asset-actions button:last-child {
  border-right: 0;
  color: #a44146;
}

.signature-delete-saved {
  width: 100%;
  min-height: 34px;
  margin-top: 8px;
  padding: 5px 8px;
  font-size: .68rem;
}

.sign-certificate-future {
  display: grid;
  gap: 3px;
  margin-top: 10px;
  padding: 10px;
  border: 1px solid #eadbb8;
  border-radius: 8px;
  color: #76612f;
  background: #fffaf0;
}

.sign-certificate-future strong {
  font-size: .7rem;
}

.sign-certificate-future span {
  font-size: .63rem;
  line-height: 1.45;
}

.sign-document-panel {
  overflow: hidden;
}

.sign-document-toolbar {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  padding: 10px 12px;
  border-bottom: 1px solid var(--sign-border);
  background: #f9fbfa;
}

.sign-page-navigation,
.sign-zoom-controls {
  display: flex;
  align-items: center;
  gap: 8px;
}

.sign-page-navigation button,
.sign-zoom-controls button {
  min-width: 34px;
  min-height: 34px;
  padding: 4px 8px;
}

.sign-page-navigation strong,
.sign-zoom-controls span {
  color: #526159;
  font-size: .74rem;
}

.sign-document-body {
  display: grid;
  grid-template-columns: 128px minmax(0, 1fr);
  height: min(680px, 72vh);
  min-height: 460px;
}

.sign-thumbnails {
  display: grid;
  align-content: start;
  gap: 8px;
  padding: 10px;
  overflow-y: auto;
  border-right: 1px solid var(--sign-border);
  background: #f6f8f7;
}

.sign-thumbnail {
  display: grid;
  gap: 5px;
  place-items: center;
  min-width: 0;
  padding: 6px;
  border: 1.5px solid #dce4df;
  border-radius: 8px;
  color: #6c7870;
  background: #fff;
  font-size: .62rem;
}

.sign-thumbnail.active {
  border-color: #35a15a;
  background: #eff8f2;
  box-shadow: 0 0 0 2px rgba(46, 187, 78, .1);
}

.sign-thumbnail-preview {
  display: grid;
  place-items: center;
  width: 100%;
  min-height: 100px;
  overflow: hidden;
  color: #8b948e;
  background: #eef1ef;
  font-size: .58rem;
}

.sign-page-scroll {
  display: grid;
  place-items: start center;
  min-width: 0;
  padding: 24px;
  overflow: auto;
  overscroll-behavior: contain;
  background: #dce2de;
}

.sign-page-stage {
  position: relative;
  flex: 0 0 auto;
  overflow: visible;
  background: #fff;
  box-shadow: 0 5px 24px rgba(0, 0, 0, .2);
}

#sign-page-canvas {
  display: block;
  max-width: none;
  max-height: none;
}

.sign-placement-layer {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.signature-placement {
  position: absolute;
  z-index: 2;
  display: grid;
  place-items: center;
  min-width: 38px;
  min-height: 24px;
  border: 1px solid transparent;
  cursor: move;
  touch-action: none;
  user-select: none;
}

.signature-placement img {
  width: 100%;
  height: 100%;
  pointer-events: none;
  object-fit: contain;
}

.signature-placement.selected {
  border: 1.5px solid #2678d7;
  background: rgba(54, 129, 215, .04);
}

.signature-placement-info {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  width: max-content;
  max-width: 260%;
  padding: 2px 3px;
  overflow: hidden;
  color: #17251c;
  background: rgba(255, 255, 255, .86);
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: clamp(5px, .85vw, 9px);
  line-height: 1.2;
  pointer-events: none;
}

.signature-placement-actions {
  position: absolute;
  bottom: calc(100% + 5px);
  right: -1px;
  display: flex;
  gap: 3px;
  width: max-content;
}

.signature-placement-actions button {
  min-height: 25px;
  padding: 3px 6px;
  border: 1px solid #cbd9d0;
  border-radius: 5px;
  color: #405148;
  background: #fff;
  box-shadow: 0 2px 7px rgba(0, 0, 0, .13);
  font-size: .58rem;
}

.signature-placement-actions button:last-child {
  color: #a53e45;
}

.signature-resize-handle {
  position: absolute;
  right: -8px;
  bottom: -8px;
  width: 18px;
  height: 18px;
  border: 2px solid #fff;
  border-radius: 50%;
  background: #2678d7;
  box-shadow: 0 1px 5px rgba(0, 0, 0, .25);
  cursor: nwse-resize;
  touch-action: none;
}

.sign-placement-actions,
.sign-identification,
.sign-review-action {
  border-top: 1px solid var(--sign-border);
}

.sign-placement-actions {
  padding: 14px;
  background: #fff;
}

.sign-placement-primary {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: end;
}

.sign-placement-primary label {
  flex: 1 1 170px;
}

.sign-placement-primary button {
  min-height: 40px;
  padding: 7px 12px;
  font-size: .72rem;
}

.sign-placement-actions > p,
.sign-identification > p {
  margin: 8px 0 0;
  color: #78837c;
  font-size: .68rem;
}

.sign-identification {
  padding: 13px 14px;
  background: #fafbfa;
}

.sign-identification summary {
  color: #415149;
  font-size: .76rem;
  font-weight: 700;
  cursor: pointer;
}

.sign-identification-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  margin-top: 12px;
}

.sign-inline-check {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #516057;
  font-size: .72rem;
}

.sign-review-action {
  display: flex;
  justify-content: flex-end;
  padding: 14px;
}

.sign-review {
  display: grid;
  gap: 14px;
  padding: 22px;
  border: 1px solid var(--sign-border);
  border-radius: 13px;
  background: #fff;
}

.sign-review-heading {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  align-items: flex-start;
  padding-bottom: 14px;
  border-bottom: 1px solid #e8ede9;
}

.sign-review-files {
  display: grid;
  gap: 8px;
}

.sign-review-file-card {
  display: grid;
  gap: 7px;
  padding: 13px;
  border: 1px solid #dfe6e1;
  border-radius: 9px;
  background: #fafcfa;
}

.sign-review-file-card strong {
  overflow-wrap: anywhere;
  font-size: .82rem;
}

.sign-review-file-card small {
  color: #718078;
  font-size: .7rem;
}

.sign-review-page-previews {
  display: flex;
  gap: 8px;
  padding-top: 5px;
  overflow-x: auto;
}

.sign-review-page-preview {
  display: grid;
  flex: 0 0 auto;
  gap: 5px;
  place-items: center;
  padding: 6px;
  border: 1px solid #dde5e0;
  border-radius: 8px;
  color: #647168;
  background: #f3f6f4;
  font-size: .62rem;
}

.sign-review-preview-stage {
  display: grid;
  place-items: center;
  min-width: 92px;
  min-height: 120px;
  color: #829087;
  font-size: .6rem;
}

.sign-review-preview-inner {
  position: relative;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 2px 7px rgba(0, 0, 0, .14);
}

.sign-review-preview-inner canvas {
  display: block;
}

.sign-review-preview-inner img {
  position: absolute;
  object-fit: contain;
}

.sign-review-metrics {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.sign-review-metrics span {
  padding: 4px 7px;
  border-radius: 6px;
  color: #2b6842;
  background: #eaf6ee;
  font-size: .66rem;
  font-weight: 700;
}

.sign-output-name {
  max-width: 620px;
}

.sign-legal-note {
  padding: 12px 14px;
  border: 1px solid #edd9ab;
  border-radius: 9px;
  color: #725c26;
  background: #fffaf0;
}

.sign-legal-note strong {
  font-size: .78rem;
}

.sign-legal-note p {
  margin: 3px 0 0;
  font-size: .7rem;
}

.sign-review > .success-button {
  justify-self: end;
}

.sign-result {
  display: grid;
  place-items: center;
  gap: 14px;
  padding: 28px;
  border: 1px solid #cce5d4;
  border-radius: 13px;
  background: #f3faf5;
  text-align: center;
}

.sign-result h3 {
  margin: 0;
  color: #1d6a3c;
}

.sign-result-summary {
  display: grid;
  gap: 8px;
  width: min(680px, 100%);
  text-align: left;
}

.sign-result-summary article {
  display: grid;
  gap: 3px;
  padding: 12px;
  border: 1px solid #d9e8de;
  border-radius: 9px;
  background: #fff;
}

.sign-result-summary strong {
  overflow-wrap: anywhere;
  font-size: .8rem;
}

.sign-result-summary span {
  color: #66756c;
  font-size: .68rem;
}

@media (max-width: 1020px) {
  .home-grid > .home-card:nth-child(5),
  .home-grid > .home-card:nth-child(6),
  .home-grid > .home-card:nth-child(7),
  .home-grid > .home-card:nth-child(8) {
    grid-column: auto;
  }

  .sign-editor-layout {
    grid-template-columns: 300px minmax(0, 1fr);
  }

  .sign-document-body {
    grid-template-columns: 104px minmax(0, 1fr);
  }
}

@media (max-width: 820px) {
  .crop-batch-navigation {
    grid-template-columns: 1fr 1fr;
  }

  .crop-batch-navigation > strong {
    grid-column: 1 / -1;
    grid-row: 1;
    text-align: center;
  }

  .crop-batch-navigation > button {
    grid-row: 2;
  }

  .sign-privacy-note {
    display: grid;
  }

  .sign-editor-layout {
    grid-template-columns: 1fr;
  }

  .sign-assets-panel {
    position: static;
    max-height: none;
  }

  .sign-collapse-button {
    display: grid;
    place-items: center;
  }

  .sign-document-body {
    height: 62vh;
    min-height: 430px;
  }
}

@media (max-width: 580px) {
  .crop-multi-control-row {
    display: grid;
  }

  .crop-open-editor-button {
    width: 100%;
  }

  .crop-multi-menu {
    position: fixed;
    z-index: 260;
    top: auto;
    right: 12px;
    bottom: 12px;
    left: 12px;
    width: auto;
    max-height: min(420px, 70vh);
  }

  .sign-file-strip {
    display: grid;
  }

  .sign-add-file-button {
    justify-content: center;
  }

  .signature-create-meta,
  .sign-identification-grid {
    grid-template-columns: 1fr;
  }

  .sign-document-toolbar,
  .sign-review-heading {
    display: grid;
  }

  .sign-document-body {
    grid-template-columns: 1fr;
    height: auto;
  }

  .sign-thumbnails {
    display: flex;
    height: 130px;
    overflow-x: auto;
    overflow-y: hidden;
    border-right: 0;
    border-bottom: 1px solid var(--sign-border);
  }

  .sign-thumbnail {
    flex: 0 0 82px;
  }

  .sign-thumbnail-preview {
    min-height: 76px;
  }

  .sign-page-scroll {
    height: 58vh;
    min-height: 390px;
    padding: 16px;
  }

  .sign-placement-primary {
    display: grid;
  }

  .sign-placement-primary label,
  .sign-placement-primary button {
    width: 100%;
  }

  .sign-review > .success-button {
    justify-self: stretch;
  }
}