/* components.css */

/* BUTTONS */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 10px var(--space-4);
  font-size: var(--text-base);
  font-weight: 500;
  border-radius: var(--radius-sm);
  transition: all var(--transition-normal);
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
}

.btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.btn-primary {
  background-color: var(--color-primary);
  color: #FFFFFF;
  border: 1px solid transparent;
}
.btn-primary:hover:not(:disabled) {
  background-color: var(--color-primary-dark);
}

.btn-outline {
  background-color: transparent;
  color: var(--color-primary);
  border: 1px solid var(--color-primary);
}
.btn-outline:hover:not(:disabled) {
  background-color: var(--color-primary-light);
}

.btn-ghost {
  background-color: transparent;
  color: var(--color-text);
  border: 1px solid transparent;
}
.btn-ghost:hover:not(:disabled) {
  background-color: var(--color-surface);
}

.btn-secondary {
  background-color: var(--color-surface);
  color: var(--color-text);
  border: 1px solid var(--color-border);
}
.btn-secondary:hover:not(:disabled) {
  background-color: var(--color-border);
}

.btn-success {
  background-color: var(--color-success);
  color: #FFFFFF;
  border: 1px solid transparent;
}
.btn-success:hover:not(:disabled) {
  filter: brightness(0.9);
}

.btn-icon {
  padding: 10px;
  border-radius: var(--radius-full);
}

.btn-sm {
  padding: 6px var(--space-3);
  font-size: var(--text-sm);
}

.btn-lg {
  padding: 14px var(--space-6);
  font-size: var(--text-lg);
  border-radius: var(--radius-md);
}

/* CARDS */
.card {
  background-color: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: var(--space-6);
}

.tool-card {
  display: flex;
  flex-direction: column;
  background-color: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  transition: transform var(--transition-normal), box-shadow var(--transition-normal);
  text-decoration: none;
  color: var(--color-text);
  height: 100%;
}

.tool-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-lg);
  border-color: var(--color-primary-light);
}

.tool-card-icon {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--space-4);
  font-size: 24px;
}

.tool-card-title {
  font-size: var(--text-lg);
  font-weight: 600;
  margin-bottom: var(--space-2);
}

.tool-card-desc {
  font-size: var(--text-sm);
  color: var(--color-secondary);
  line-height: 1.5;
  flex-grow: 1;
  margin-bottom: var(--space-4);
}

.tool-card-action {
  font-size: var(--text-sm);
  color: var(--color-primary);
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 4px;
}

/* UPLOAD ZONE */
.upload-zone {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 280px;
  border: 2px dashed var(--color-border);
  border-radius: var(--radius-xl);
  background-color: var(--color-card);
  padding: var(--space-8);
  transition: all var(--transition-normal);
  text-align: center;
  cursor: pointer;
}

/* Placeholder for the upload box while the page's scripts load. #uploadSection is empty
   in the HTML and createUploadZone() in js/upload.js fills it only after the CDN library
   has downloaded, so without this the tool area pops in late and pushes the page down.
   Size and colours match the box upload.js draws: 302px tall at every width and in every
   language, because upload.js keeps its title on one line. Pages whose script puts
   something else there (qr-code, scan-to-pdf, text-to-pdf) set their own heights with
   --upload-placeholder-h and --upload-placeholder-h-sm (720px and narrower) on the
   #uploadSection element. Where the drawn height steps at some other width, because a
   row of buttons wraps there, the value is a clamp() with a steep slope, which acts as a
   step: clamp(621px, 621px + (553px - 100vw) * 100, 667px) is 667px up to 552px wide and
   621px from 553px, and a further "+ clamp(0px, (343px - 100vw) * 100, 24px)" adds 24px
   below 343px. The numbers are the English page's; a translation may wrap sooner. */
#uploadSection:empty {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: var(--upload-placeholder-h, 302px);
  box-sizing: border-box;
  border: 2px dashed #93C5FD;
  border-radius: 14px;
  background: #F8FAFC;
}

#uploadSection:empty::before {
  content: 'Loading tool...';
  font-size: 14px;
  font-weight: 600;
  color: #94A3B8;
}

@media (max-width: 720px) {
  #uploadSection:empty { min-height: var(--upload-placeholder-h-sm, var(--upload-placeholder-h, 302px)); }
}

/* With JavaScript off the box would otherwise say "Loading tool..." forever. */
@media (scripting: none) {
  #uploadSection:empty::before { content: 'This tool runs in your browser and needs JavaScript turned on.'; padding: 0 24px; text-align: center; }
}

/* The privacy line under the upload box. It is static HTML right after #uploadSection in
   each tool page, so it paints with the page and moves nothing when the box is drawn. */
.upload-privacy-note {
  margin: 10px 0 16px;
  padding: 0 8px;
  font-size: 13px;
  line-height: 20px;
  color: var(--color-secondary);
  text-align: center;
}

.upload-privacy-note::before {
  content: '';
  display: inline-block;
  width: 13px;
  height: 13px;
  margin-right: 6px;
  vertical-align: -2px;
  background-color: var(--color-success);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='11' width='16' height='10' rx='2'/%3E%3Cpath d='M8 11V7a4 4 0 0 1 8 0v4'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='11' width='16' height='10' rx='2'/%3E%3Cpath d='M8 11V7a4 4 0 0 1 8 0v4'/%3E%3C/svg%3E") center / contain no-repeat;
}

.upload-privacy-note a {
  color: inherit;
  text-decoration: underline;
}

.upload-zone:hover, .upload-zone.drag-over {
  border-color: var(--color-primary);
  background-color: var(--color-primary-light);
}

.upload-zone-icon {
  width: 64px;
  height: 64px;
  color: var(--color-primary);
  margin-bottom: var(--space-4);
}

.upload-zone-text {
  font-size: var(--text-lg);
  font-weight: 500;
  margin-bottom: var(--space-2);
}

.upload-zone-btn {
  margin-top: var(--space-4);
}

/* FILE LIST */
.file-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-top: var(--space-6);
}

.file-item {
  display: flex;
  align-items: center;
  background-color: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  gap: var(--space-3);
  transition: box-shadow var(--transition-fast);
}

.file-item:hover {
  box-shadow: var(--shadow-sm);
}

.file-item-grip {
  cursor: grab;
  color: var(--color-muted);
}

.file-item-icon {
  color: var(--color-primary);
}

.file-item-name {
  flex-grow: 1;
  font-weight: 500;
  font-size: var(--text-sm);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.file-item-size {
  font-size: var(--text-xs);
  color: var(--color-secondary);
  white-space: nowrap;
}

.file-item-remove {
  color: var(--color-muted);
  cursor: pointer;
  transition: color var(--transition-fast);
}

.file-item-remove:hover {
  color: var(--color-error);
}

/* PROGRESS */
.progress-bar {
  width: 100%;
  height: 8px;
  background-color: var(--color-surface);
  border-radius: var(--radius-full);
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  background-color: var(--color-primary);
  transition: width 0.3s ease;
}

.progress-text {
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-secondary);
  margin-top: var(--space-2);
  display: flex;
  justify-content: space-between;
}

/* RESULT & ERROR PANELS */
.result-panel, .error-panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--space-8);
  border-radius: var(--radius-lg);
  text-align: center;
  background-color: var(--color-card);
  border: 1px solid var(--color-border);
}

.result-panel {
  border-top: 4px solid var(--color-success);
}

.error-panel {
  border-top: 4px solid var(--color-error);
}

.result-icon {
  width: 64px;
  height: 64px;
  color: var(--color-success);
  margin-bottom: var(--space-4);
}

.error-icon {
  width: 64px;
  height: 64px;
  color: var(--color-error);
  margin-bottom: var(--space-4);
}

.result-title, .error-title {
  font-size: var(--text-xl);
  font-weight: 600;
  margin-bottom: var(--space-2);
}

.result-actions {
  display: flex;
  gap: 12px;
  margin-top: var(--space-6);
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}

/* Buttons on the result card: one filled action, one outlined, one quiet */
.result-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  padding: 0 24px;
  font-family: inherit;
  font-size: 15px;
  font-weight: 700;
  line-height: 1;
  border-radius: 999px;
  border: 2px solid transparent;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.result-btn-icon { flex: none; }

.result-btn:focus-visible {
  outline: 3px solid rgba(229, 43, 47, 0.35);
  outline-offset: 2px;
}

.result-btn:active { transform: translateY(1px); }

.result-btn-download {
  background: var(--color-primary, #E52B2F);
  border-color: var(--color-primary, #E52B2F);
  color: #FFFFFF;
  padding: 0 30px;
  box-shadow: 0 6px 16px rgba(229, 43, 47, 0.28);
}

.result-btn-download:hover {
  background: var(--color-primary-dark, #C41E22);
  border-color: var(--color-primary-dark, #C41E22);
  box-shadow: 0 8px 20px rgba(229, 43, 47, 0.34);
}

.result-btn-preview {
  background: #FFFFFF;
  border-color: #0F172A;
  color: #0F172A;
}

.result-btn-preview:hover {
  background: #0F172A;
  color: #FFFFFF;
}

.result-btn-again {
  background: transparent;
  color: #475569;
  padding: 0 16px;
  font-weight: 600;
}

.result-btn-again:hover {
  background: rgba(15, 23, 42, 0.07);
  color: #0F172A;
}

@media (max-width: 520px) {
  .result-btn { width: 100%; }
}

/* BADGES / TAGS */
.badge, .tag {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  font-size: var(--text-xs);
  font-weight: 600;
  border-radius: var(--radius-full);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.badge {
  background-color: var(--color-surface);
  color: var(--color-text);
}

.badge-primary {
  background-color: var(--color-primary-light);
  color: var(--color-primary-dark);
}

.badge-success {
  background-color: #DCFCE7;
  color: var(--color-success);
}

/* DROPDOWN */
.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-menu {
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: var(--space-2);
  background-color: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  min-width: 200px;
  z-index: var(--z-dropdown);
  display: none;
  flex-direction: column;
  padding: var(--space-2) 0;
}

.dropdown:hover .dropdown-menu,
.dropdown:focus-within .dropdown-menu {
  display: flex;
}

.dropdown-item {
  padding: var(--space-2) var(--space-4);
  font-size: var(--text-sm);
  color: var(--color-text);
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.dropdown-item:hover {
  background-color: var(--color-surface);
  color: var(--color-primary);
}

/* MODAL */
.modal-overlay {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: var(--z-modal);
  padding: var(--space-4);
}

.modal {
  background-color: var(--color-card);
  border-radius: var(--radius-lg);
  width: 100%;
  max-width: 500px;
  box-shadow: var(--shadow-xl);
  display: flex;
  flex-direction: column;
  max-height: 90vh;
}

.modal-header {
  padding: var(--space-4) var(--space-6);
  border-bottom: 1px solid var(--color-border);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.modal-body {
  padding: var(--space-6);
  overflow-y: auto;
}

.modal-footer {
  padding: var(--space-4) var(--space-6);
  border-top: 1px solid var(--color-border);
  display: flex;
  justify-content: flex-end;
  gap: var(--space-3);
}

/* SEARCH */
.search-container {
  position: relative;
  width: 100%;
}

.search-input {
  width: 100%;
  padding: 12px 16px 12px 48px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  background-color: var(--color-surface);
  font-size: var(--text-base);
  transition: all var(--transition-normal);
}

.search-input:focus {
  background-color: var(--color-card);
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--color-primary-light);
  outline: none;
}

.search-icon {
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--color-muted);
}

.search-results {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  margin-top: var(--space-2);
  background-color: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  z-index: var(--z-dropdown);
  max-height: 300px;
  overflow-y: auto;
  display: none;
}

/* FAQ */
.faq-item {
  border-bottom: 1px solid var(--color-border);
}

.faq-item:last-child {
  border-bottom: none;
}

.faq-question {
  width: 100%;
  text-align: left;
  padding: var(--space-4) 0;
  font-size: var(--text-lg);
  font-weight: 500;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: var(--color-text);
}

.faq-question:hover {
  color: var(--color-primary);
}

.faq-answer {
  padding-bottom: var(--space-4);
  color: var(--color-secondary);
  line-height: 1.6;
  display: none;
}

.faq-item.active .faq-answer {
  display: block;
}

.faq-item.active .faq-icon {
  transform: rotate(180deg);
}

/* FEATURE CARDS */
.feature-card {
  text-align: center;
  padding: var(--space-6);
}

.feature-icon {
  width: 80px;
  height: 80px;
  background-color: var(--color-primary-light);
  color: var(--color-primary);
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto var(--space-4);
  font-size: 32px;
}

/* STEPS */
.steps {
  display: flex;
  gap: var(--space-6);
  margin: var(--space-8) 0;
}

.step-item {
  flex: 1;
  text-align: center;
  position: relative;
}

.step-circle {
  width: 48px;
  height: 48px;
  background-color: var(--color-primary);
  color: #fff;
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-xl);
  font-weight: bold;
  margin: 0 auto var(--space-4);
  position: relative;
  z-index: 2;
}

.step-connector {
  position: absolute;
  top: 24px;
  left: 50%;
  width: 100%;
  height: 2px;
  background-color: var(--color-border);
  z-index: 1;
}

.step-item:last-child .step-connector {
  display: none;
}

/* AD PLACEHOLDERS */
.ad-container {
  margin: var(--space-6) 0;
  display: flex;
  justify-content: center;
}

.ad-placeholder {
  width: 100%;
  max-width: 728px;
  height: 90px;
  background-color: var(--color-surface);
  border: 1px dashed var(--color-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-muted);
  font-size: var(--text-sm);
  border-radius: var(--radius-sm);
}

/* FORM ELEMENTS */
.form-group {
  margin-bottom: var(--space-4);
}

.form-label {
  display: block;
  font-size: var(--text-sm);
  font-weight: 500;
  margin-bottom: var(--space-2);
  color: var(--color-text);
}

.form-input, .form-select {
  width: 100%;
  padding: 10px var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background-color: var(--color-card);
  color: var(--color-text);
  font-size: var(--text-base);
  transition: border-color var(--transition-fast);
}

.form-input:focus, .form-select:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--color-primary-light);
}

.range-slider {
  width: 100%;
  -webkit-appearance: none;
  height: 6px;
  background: var(--color-surface);
  border-radius: var(--radius-full);
  outline: none;
}

.range-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--color-primary);
  cursor: pointer;
  border: 2px solid #fff;
  box-shadow: var(--shadow-sm);
}

/* TRUST BADGES */
.trust-badges {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  align-items: center;
  justify-content: center;
  margin-top: var(--space-4);
}

.trust-badge-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: var(--text-sm);
  color: var(--color-secondary);
}

.trust-badge-item svg {
  color: var(--color-success);
}

/* BREADCRUMBS NAVIGATION
   common.js inserts the trail above .tool-header after the page has painted. The tool
   header keeps the trail's space free until it arrives and the trail has at least that
   height, so nothing moves (it was 0.04 CLS on a phone). One line on wide screens; on
   phones most trails wrap, so two lines are kept there. */
.breadcrumbs-nav {
  min-height: 29px;
  box-sizing: border-box;
  margin: 0 0 20px 0;
  padding: 4px 0;
}

.tool-main > .tool-header:first-child {
  margin-top: 49px; /* the trail's min-height plus its 20px margin */
}

@media (max-width: 660px) {
  .breadcrumbs-nav { min-height: 54px; }
  .tool-main > .tool-header:first-child { margin-top: 74px; }
}

.breadcrumbs-list {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 13px;
  color: var(--color-text-secondary, #64748B);
}

.breadcrumbs-list li {
  display: inline-flex;
  align-items: center;
}

.breadcrumbs-list a {
  color: var(--color-text-secondary, #64748B);
  text-decoration: none;
  font-weight: 500;
  transition: color 0.15s ease;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.breadcrumbs-list a:hover {
  color: var(--color-primary, #E52B2F);
  text-decoration: underline;
}

.breadcrumbs-list .bc-sep {
  color: #94A3B8;
  font-size: 14px;
  margin: 0 4px;
  user-select: none;
}

.breadcrumbs-list .bc-current {
  color: var(--color-text, #0F172A);
  font-weight: 700;
}


/* The header is rendered by common.js; reserve its height (68px bar + 1px border) so the
   page does not jump when it appears. */
#header { min-height: 69px; }

/* Ad slots stay hidden until consent.js has loaded AdSense with a real publisher ID
   (it sets data-ads-live on <html>). An empty "Advertisement" box helps nobody. */
.ad-container, .ad-slot-card { display: none !important; }
html[data-ads-live="true"] .ad-container, html[data-ads-live="true"] .ad-slot-card { display: block !important; }

/* Tool option forms on a phone: no control may be wider than the screen (found overflowing
   on Add Page Numbers, Add Image and Add Text), and long button labels wrap. */
#optionsSection input, #optionsSection select, #optionsSection textarea, #optionsSection button {
  max-width: 100%;
  box-sizing: border-box;
}
/* Flex items default to min-width: auto (their content width), so two selects side by
   side could not shrink below their longest option (Add Text). */
#optionsSection select, #optionsSection input:not([type="checkbox"]):not([type="radio"]) { min-width: 0; }
#optionsSection .btn { white-space: normal; }

/* Compress PDF (js/tools/compress.js): levels, then advanced options */
.cmp-card { background: #FFFFFF; border: 1px solid #E2E8F0; border-radius: 14px; padding: 24px; box-shadow: 0 4px 12px rgba(0,0,0,0.03); text-align: left; }
.cmp-title { font-size: 16px; font-weight: 700; color: #0F172A; margin: 0 0 4px 0; word-break: break-word; }
.cmp-sub { font-size: 13px; color: #64748B; margin: 0 0 16px 0; }
.cmp-levels { display: flex; flex-direction: column; gap: 10px; margin-bottom: 14px; }
.cmp-level { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border: 1px solid #E2E8F0; border-radius: 10px; cursor: pointer; background: #F8FAFC; }
.cmp-level input { margin-top: 3px; }
.cmp-level strong { display: block; font-size: 14px; color: #0F172A; }
.cmp-level span span { font-size: 12px; color: #64748B; line-height: 1.5; }
.cmp-level .cmp-target { display: flex; gap: 8px; margin-top: 8px; }
.cmp-target input, .cmp-target select { padding: 6px 8px; border: 1px solid #CBD5E1; border-radius: 6px; font-size: 14px; color: #0F172A; background: #FFFFFF; }
.cmp-target input { width: 110px; }
.cmp-level .cmp-error { display: block; margin-top: 6px; font-weight: 600; color: #B91C1C; }
.cmp-level .cmp-error[hidden] { display: none; }
.cmp-advanced { border: 1px solid #E2E8F0; border-radius: 10px; padding: 10px 14px; margin-bottom: 18px; }
.cmp-advanced summary { cursor: pointer; font-size: 13px; font-weight: 700; color: #1D4ED8; }
.cmp-adv-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px 18px; margin-top: 12px; }
.cmp-field { display: flex; flex-direction: column; gap: 6px; font-size: 12px; font-weight: 600; color: #334155; }
.cmp-field select { padding: 7px 8px; border: 1px solid #CBD5E1; border-radius: 6px; font-size: 13px; }
.cmp-check { display: flex; align-items: flex-start; gap: 8px; font-size: 13px; color: #334155; cursor: pointer; }
.cmp-actions { display: flex; justify-content: center; }
.cmp-go { background: #E52B2F; color: #FFFFFF; border: none; padding: 11px 28px; font-size: 15px; font-weight: 700; border-radius: 8px; cursor: pointer; }
@media (max-width: 560px) { .cmp-adv-grid { grid-template-columns: 1fr; } }
/* The cmp-* card above is shared by Compress PDF, Flatten PDF and Pages per Sheet. */

/* Pages per Sheet (js/tools/pages-per-sheet.js): count chips and the sheet diagram. */
.pps-layout { display: flex; gap: 20px; align-items: flex-start; }
.pps-controls { flex: 1 1 auto; min-width: 0; }
.pps-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.pps-chip input { position: absolute; opacity: 0; pointer-events: none; }
.pps-chip span { display: inline-block; min-width: 44px; padding: 8px 0; text-align: center; border: 1px solid #CBD5E1; border-radius: 8px; font-size: 14px; font-weight: 700; color: #334155; background: #FFFFFF; cursor: pointer; }
.pps-chip input:checked + span { border-color: #E52B2F; background: #FEF2F2; color: #B91C1C; }
.pps-chip input:focus-visible + span { outline: 2px solid #E52B2F; outline-offset: 2px; }
.pps-preview-wrap { flex: none; width: 170px; text-align: center; }
.pps-preview { display: grid; box-sizing: border-box; margin: 0 auto; background: #FFFFFF; border: 1px solid #CBD5E1; box-shadow: 0 2px 6px rgba(0,0,0,0.08); }
.pps-preview span { display: flex; align-items: center; justify-content: center; min-width: 0; min-height: 0; background: #F1F5F9; border: 1px solid #E2E8F0; font-size: 11px; font-weight: 700; color: #64748B; }
.pps-summary { font-size: 12px; color: #64748B; margin: 8px 0 0 0; }
@media (max-width: 560px) { .pps-layout { flex-direction: column-reverse; align-items: stretch; } .pps-preview-wrap { width: 100%; } }

/* WEBP to PDF (js/tools/webp-to-pdf.js): the picture list. */
.webp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(150px, 45%), 1fr)); gap: 12px; }
.webp-item { background: #F8FAFC; border: 1px solid #E2E8F0; border-radius: 10px; overflow: hidden; }
.webp-thumb { position: relative; height: 110px; background: #E2E8F0; }
.webp-thumb img { width: 100%; height: 100%; object-fit: contain; display: block; }
.webp-remove { position: absolute; top: 6px; right: 6px; width: 26px; height: 26px; border: none; border-radius: 50%; background: rgba(15, 23, 42, 0.7); color: #FFFFFF; font-size: 12px; cursor: pointer; }
.webp-name { padding: 8px 10px 0; font-size: 12px; font-weight: 600; color: #1E293B; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.webp-size { padding: 2px 10px 8px; font-size: 11px; color: #64748B; }
.webp-more { padding: 10px 20px; font-size: 14px; font-weight: 600; border-radius: 8px; border: 1px solid #CBD5E1; background: #FFFFFF; color: #334155; cursor: pointer; }

/* Rotate PDF (js/tools/rotate.js): thumbnails that turn as the rotation changes. Each
   thumbnail is fitted to a square, so turning it never changes the grid's layout. */
.rot-card { background: #FFFFFF; border: 1px solid #E2E8F0; border-radius: 14px; padding: 20px; text-align: left; color: #0F172A; }
.rot-head { display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between; align-items: flex-start; }
.rot-title { font-size: 16px; font-weight: 700; margin: 0 0 4px 0; word-break: break-word; }
.rot-sub { font-size: 13px; color: #64748B; margin: 0; }
.rot-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.rot-btn { border: 1px solid #CBD5E1; background: #FFFFFF; color: #0F172A; border-radius: 8px; padding: 7px 12px; font-size: 13px; font-weight: 700; cursor: pointer; }
.rot-btn:hover { border-color: #2563EB; color: #1D4ED8; }
.rot-btn-quiet { font-weight: 600; color: #64748B; }
.rot-select { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; font-size: 13px; color: #64748B; margin: 14px 0 12px 0; }
.rot-link { background: none; border: none; padding: 2px 0; color: #2563EB; font-size: 13px; font-weight: 600; cursor: pointer; }
.rot-link:disabled { color: #94A3B8; cursor: default; }
.rot-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 12px; max-height: 620px; overflow-y: auto; padding: 4px; }
.rot-cell { border: 1px solid #E2E8F0; border-radius: 10px; padding: 8px; background: #F8FAFC; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.rot-cell.selected { border-color: #2563EB; box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.25); }
.rot-cell.turned .rot-angle { color: #1D4ED8; }
.rot-check { align-self: flex-start; display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; color: #334155; cursor: pointer; }
.rot-thumb { width: var(--rot-thumb, 150px); height: var(--rot-thumb, 150px); display: flex; align-items: center; justify-content: center; }
.rot-spin { display: flex; align-items: center; justify-content: center; transition: transform 0.35s ease; }
.rot-spin canvas { display: block; box-shadow: 0 1px 4px rgba(15, 23, 42, 0.2); background: #FFFFFF; }
.rot-placeholder { width: calc(var(--rot-thumb, 150px) * 0.7); height: var(--rot-thumb, 150px); background: #E2E8F0; border-radius: 2px; }
.rot-cell-btns { display: flex; align-items: center; gap: 8px; }
.rot-mini { width: 32px; height: 32px; border: 1px solid #CBD5E1; background: #FFFFFF; border-radius: 50%; font-size: 16px; cursor: pointer; line-height: 1; }
.rot-mini:hover { border-color: #2563EB; color: #1D4ED8; }
.rot-angle { min-width: 36px; text-align: center; font-size: 12px; font-weight: 700; color: #64748B; }
.rot-footer { display: flex; justify-content: center; margin-top: 16px; }
.rot-apply { background: #E52B2F; color: #FFFFFF; border: none; padding: 11px 26px; font-size: 15px; font-weight: 700; border-radius: 8px; cursor: pointer; }
.rot-apply:disabled { opacity: 0.45; cursor: default; }
/* Phones: two columns, with the per-page buttons cut to 28 + 4 + 32 + 4 + 28 = 96 px so they
   fit a cell down to a 340 px viewport; below 360 px, one column. rotate.js sizes the
   thumbnail from the cell's real width. */
@media (max-width: 480px) {
  .rot-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .rot-card { padding: 14px; }
  .rot-cell-btns { gap: 4px; }
  .rot-mini { width: 28px; height: 28px; font-size: 14px; }
  .rot-angle { min-width: 32px; }
}
@media (max-width: 359px) {
  .rot-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) { .rot-spin { transition: none; } }

/* Sign PDF (js/tools/sign.js): signature maker above, page preview with a draggable box below */
.sign-card [hidden] { display: none !important; }   /* the rules below set display on some */
.sign-card { background: #FFFFFF; border: 1px solid #E2E8F0; border-radius: 14px; padding: 22px; text-align: left; color: #0F172A; }
.sign-step-title { font-size: 17px; font-weight: 700; margin: 0 0 12px 0; }
.sign-hint { font-size: 13px; color: #64748B; margin: 0 0 10px 0; }
.sign-hint-inline { font-size: 13px; color: #475569; margin-left: 8px; }
.sign-label { display: block; font-size: 12px; font-weight: 600; margin: 10px 0 4px 0; }
.sign-label-inline { font-size: 12px; font-weight: 600; }
.sign-input, .sign-select { width: 100%; padding: 8px 10px; border: 1px solid #CBD5E1; border-radius: 6px; font-size: 14px; background: #FFFFFF; color: #0F172A; box-sizing: border-box; }
.sign-select-sm { width: auto; }
.sign-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 10px; }
.sign-check { display: flex; align-items: center; gap: 8px; font-size: 13px; margin-top: 10px; cursor: pointer; }
.sign-tabs { display: flex; gap: 4px; border-bottom: 1px solid #E2E8F0; margin-bottom: 14px; }
.sign-tab { background: none; border: none; border-bottom: 2px solid transparent; padding: 8px 14px; font-size: 14px; font-weight: 600; color: #64748B; cursor: pointer; margin-bottom: -1px; }
.sign-tab.active { color: #E52B2F; border-bottom-color: #E52B2F; }
.sign-pad { display: block; width: 100%; max-width: 520px; height: 180px; border: 2px dashed #CBD5E1; border-radius: 8px; background: #FFFFFF; cursor: crosshair; touch-action: none; }
.sign-font-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 10px; }
.sign-font-btn { border: 1px solid #CBD5E1; border-radius: 8px; background: #FFFFFF; padding: 10px; font-size: 28px; line-height: 1.2; color: #111827; cursor: pointer; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.sign-font-btn.active { border-color: #E52B2F; box-shadow: 0 0 0 2px rgba(229, 43, 47, 0.2); }
.sign-upload-preview img { display: block; max-width: 100%; max-height: 140px; margin-top: 10px; background: repeating-conic-gradient(#F1F5F9 0% 25%, #FFFFFF 0% 50%) 50% / 16px 16px; border: 1px solid #E2E8F0; border-radius: 6px; }
.sign-swatch { width: 24px; height: 24px; border-radius: 50%; border: 2px solid #FFFFFF; box-shadow: 0 0 0 1px #CBD5E1; cursor: pointer; padding: 0; }
.sign-swatch.active { box-shadow: 0 0 0 2px #E52B2F; }
.sign-btn-light { background: #F1F5F9; border: 1px solid #CBD5E1; color: #0F172A; padding: 6px 14px; font-size: 13px; font-weight: 600; border-radius: 6px; cursor: pointer; }
.sign-btn-light:disabled { opacity: 0.4; cursor: default; }
.sign-btn-primary { background: #E52B2F; color: #FFFFFF; border: none; padding: 11px 26px; font-size: 15px; font-weight: 700; border-radius: 8px; cursor: pointer; }
.sign-pager { display: flex; align-items: center; justify-content: center; gap: 12px; font-size: 13px; font-weight: 600; margin-bottom: 10px; }
.sign-stage-outer { display: flex; justify-content: center; background: #F1F5F9; border-radius: 8px; padding: 12px; }
.sign-stage { position: relative; box-shadow: 0 2px 10px rgba(15, 23, 42, 0.15); background: #FFFFFF; max-width: 100%; }
.sign-stage canvas { display: block; }
.sign-box { position: absolute; display: flex; flex-direction: column; align-items: center; outline: 1px dashed #2563EB; background: rgba(37, 99, 235, 0.06); cursor: move; touch-action: none; box-sizing: border-box; }
.sign-box:focus-visible { outline: 2px solid #2563EB; }
.sign-box:not(.active) { outline-color: #94A3B8; background: rgba(148, 163, 184, 0.08); }
.sign-box:not(.active) .sign-box-handle { display: none; }
.sign-box-badge { position: absolute; left: -9px; top: -9px; width: 18px; height: 18px; border-radius: 50%; background: #2563EB; color: #FFFFFF; font-size: 11px; font-weight: 700; line-height: 18px; text-align: center; pointer-events: none; }
.sign-box:not(.active) .sign-box-badge { background: #94A3B8; }
.sign-list { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-bottom: 16px; }
.sign-list-item { border: 1px solid #CBD5E1; background: #FFFFFF; color: #0F172A; border-radius: 999px; padding: 5px 14px; font-size: 13px; font-weight: 600; cursor: pointer; }
.sign-list-item.active { background: #2563EB; border-color: #2563EB; color: #FFFFFF; }
.sign-list-add { border: 1px dashed #2563EB; background: #EFF6FF; color: #1D4ED8; border-radius: 999px; padding: 5px 14px; font-size: 13px; font-weight: 600; cursor: pointer; }
.sign-list-remove { margin-left: auto; border: none; background: none; color: #B91C1C; font-size: 13px; font-weight: 600; cursor: pointer; padding: 5px 4px; }
.sign-move-here { display: flex; justify-content: center; margin-bottom: 10px; }
.sign-move-here:has(> [hidden]) { display: none; }
.sign-box img { display: block; width: 100%; pointer-events: none; }
.sign-box.empty::before { content: attr(data-empty); margin: auto; font-size: 12px; color: #2563EB; }
.sign-box.over-field { outline: 2px dashed #D97706; background: rgba(217, 119, 6, 0.10); }
.sign-box.over-field:focus-visible { outline-style: solid; }
.sign-field-warn { background: #FFFBEB; border: 1px solid #FCD34D; color: #92400E; border-radius: 8px; padding: 10px 12px; margin: 10px 0 0 0; font-size: 13px; line-height: 1.5; }
.sign-box-date { font-family: Helvetica, Arial, sans-serif; line-height: 1.2; white-space: nowrap; pointer-events: none; }
.sign-box-handle { position: absolute; right: -6px; bottom: -6px; width: 12px; height: 12px; background: #2563EB; border: 2px solid #FFFFFF; border-radius: 50%; cursor: nwse-resize; }
.sign-options { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 20px; margin-top: 16px; }
.sign-options input[type="range"] { width: 100%; }
.sign-grid9 { display: grid; grid-template-columns: repeat(3, 28px); gap: 4px; margin-top: 4px; }
.sign-grid9 button { width: 28px; height: 28px; border: 1px solid #CBD5E1; border-radius: 4px; background: #F8FAFC; cursor: pointer; }
.sign-grid9 button:hover { background: #DBEAFE; border-color: #2563EB; }
.sign-error { color: #B91C1C; font-size: 13px; font-weight: 600; margin: 14px 0 0 0; }
.sign-actions { display: flex; justify-content: center; margin-top: 18px; }
@media (max-width: 560px) {
  .sign-options { grid-template-columns: 1fr; }
  .sign-font-grid { grid-template-columns: 1fr; }
}

/* Crop PDF (js/tools/crop.js): page preview with a draggable crop box, margins and options below */
.crop-card [hidden] { display: none !important; }
.crop-card { background: #FFFFFF; border: 1px solid #E2E8F0; border-radius: 14px; padding: 22px; text-align: left; color: #0F172A; }
.crop-hint { font-size: 13px; color: #64748B; margin: 0 0 10px 0; text-align: center; }
.crop-pager { display: flex; align-items: center; justify-content: center; gap: 12px; font-size: 13px; font-weight: 600; margin-bottom: 8px; }
.crop-stage-outer { display: flex; justify-content: center; background: #F1F5F9; border-radius: 8px; padding: 12px; }
.crop-stage { position: relative; overflow: hidden; box-shadow: 0 2px 10px rgba(15, 23, 42, 0.15); background: #FFFFFF; max-width: 100%; touch-action: none; }
.crop-stage canvas { display: block; }
.crop-rect { position: absolute; box-sizing: border-box; border: 2px solid #2563EB; box-shadow: 0 0 0 9999px rgba(15, 23, 42, 0.45); cursor: move; touch-action: none; }
.crop-rect:focus-visible { outline: 2px solid #93C5FD; outline-offset: 2px; }
.crop-handle { position: absolute; width: 14px; height: 14px; background: #FFFFFF; border: 2px solid #2563EB; border-radius: 3px; box-sizing: border-box; }
.crop-h-n, .crop-h-s { left: 50%; margin-left: -7px; cursor: ns-resize; }
.crop-h-e, .crop-h-w { top: 50%; margin-top: -7px; cursor: ew-resize; }
.crop-h-n { top: -8px; } .crop-h-s { bottom: -8px; } .crop-h-e { right: -8px; } .crop-h-w { left: -8px; }
.crop-h-ne { top: -8px; right: -8px; cursor: nesw-resize; } .crop-h-sw { bottom: -8px; left: -8px; cursor: nesw-resize; }
.crop-h-nw { top: -8px; left: -8px; cursor: nwse-resize; } .crop-h-se { bottom: -8px; right: -8px; cursor: nwse-resize; }
.crop-size { font-size: 13px; color: #334155; text-align: center; margin: 10px 0 14px 0; }
.crop-presets { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
.crop-preset { border: 1px solid #CBD5E1; background: #FFFFFF; color: #0F172A; border-radius: 999px; padding: 6px 14px; font-size: 13px; font-weight: 600; cursor: pointer; }
.crop-preset.active { background: #2563EB; border-color: #2563EB; color: #FFFFFF; }
.crop-auto { display: flex; flex-wrap: wrap; gap: 8px 18px; justify-content: center; margin-top: 10px; font-size: 13px; }
.crop-inline { display: flex; align-items: center; gap: 6px; }
.crop-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; margin-top: 18px; }
.crop-margins { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 12px; align-content: start; }
.crop-margins-head { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; }
.crop-margins .crop-check { grid-column: 1 / -1; }
.crop-side { display: flex; flex-direction: column; gap: 4px; font-size: 12px; font-weight: 600; }
.crop-label { display: block; font-size: 12px; font-weight: 600; margin-bottom: 4px; }
.crop-num { width: 100%; padding: 7px 8px; border: 1px solid #CBD5E1; border-radius: 6px; font-size: 14px; box-sizing: border-box; }
.crop-inline .crop-num { width: 70px; }
.crop-input, .crop-select { width: 100%; padding: 8px 10px; border: 1px solid #CBD5E1; border-radius: 6px; font-size: 14px; background: #FFFFFF; color: #0F172A; box-sizing: border-box; margin-bottom: 8px; }
.crop-select-sm { width: auto; margin: 0; padding: 4px 8px; }
.crop-check { display: flex; align-items: flex-start; gap: 8px; font-size: 13px; cursor: pointer; margin-top: 4px; }
.crop-btn-light { background: #F1F5F9; border: 1px solid #CBD5E1; color: #0F172A; padding: 6px 14px; font-size: 13px; font-weight: 600; border-radius: 6px; cursor: pointer; }
.crop-btn-light:disabled { opacity: 0.4; cursor: default; }
.crop-btn-primary { background: #E52B2F; color: #FFFFFF; border: none; padding: 11px 26px; font-size: 15px; font-weight: 700; border-radius: 8px; cursor: pointer; }
.crop-error { color: #B91C1C; font-size: 13px; font-weight: 600; margin: 14px 0 0 0; text-align: center; }
.crop-actions { display: flex; justify-content: center; margin-top: 18px; }
@media (max-width: 560px) {
  .crop-grid { grid-template-columns: 1fr; }
}

/* Compare PDF (js/tools/compare.js): two file slots and options, then pages side by side */
.cmpr-card [hidden] { display: none !important; }
.cmpr-card { background: #FFFFFF; border: 1px solid #E2E8F0; border-radius: 14px; padding: 22px; text-align: left; color: #0F172A; }
.cmpr-title { font-size: 16px; font-weight: 700; color: #0F172A; margin: 0 0 14px 0; }
.cmpr-slots { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 10px; align-items: stretch; }
.cmpr-slot { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; padding: 12px 14px; border: 1px solid #E2E8F0; border-radius: 10px; background: #F8FAFC; min-width: 0; }
.cmpr-slot.empty { border-style: dashed; }
.cmpr-slot-name { font-size: 14px; word-break: break-word; }
.cmpr-slot.empty .cmpr-slot-name { color: #94A3B8; font-weight: 600; }
.cmpr-slot-label { display: inline-block; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; padding: 2px 8px; border-radius: 999px; }
.cmpr-slot-label.old { background: #FEE2E2; color: #B91C1C; }
.cmpr-slot-label.new { background: #DCFCE7; color: #15803D; }
.cmpr-link { background: none; border: none; padding: 0; color: #1D4ED8; font-size: 13px; font-weight: 600; cursor: pointer; text-decoration: underline; }
.cmpr-swap { align-self: center; width: 40px; height: 40px; border-radius: 50%; border: 1px solid #CBD5E1; background: #FFFFFF; color: #0F172A; font-size: 18px; cursor: pointer; }
.cmpr-swap:hover { background: #F1F5F9; }
.cmpr-adv { border: 1px solid #E2E8F0; border-radius: 10px; padding: 10px 14px; margin: 16px 0; }
.cmpr-adv summary { cursor: pointer; font-size: 13px; font-weight: 700; color: #1D4ED8; }
.cmpr-adv .cmpr-check { margin-top: 10px; }
.cmpr-check { display: flex; align-items: flex-start; gap: 8px; font-size: 13px; color: #334155; cursor: pointer; }
.cmpr-check input { margin-top: 2px; flex-shrink: 0; }
.cmpr-error { color: #B91C1C; font-size: 13px; font-weight: 600; margin: 0 0 12px 0; text-align: center; }
.cmpr-actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 18px; }
.cmpr-go { background: #E52B2F; color: #FFFFFF; border: none; padding: 11px 26px; font-size: 15px; font-weight: 700; border-radius: 8px; cursor: pointer; }
.cmpr-secondary { background: #FFFFFF; color: #0F172A; border: 1px solid #CBD5E1; padding: 10px 18px; font-size: 14px; font-weight: 600; border-radius: 8px; cursor: pointer; }
.cmpr-files { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; font-size: 13px; color: #334155; margin: 0 0 12px 0; word-break: break-word; }
.cmpr-files .cmpr-slot-label.new { margin-left: 8px; }
.cmpr-summary { background: #F8FAFC; border: 1px solid #E2E8F0; border-radius: 10px; padding: 12px 14px; font-size: 14px; line-height: 1.6; }
.cmpr-summary.same { background: #F0FDF4; border-color: #BBF7D0; color: #166534; font-weight: 600; }
.cmpr-summary.warn { background: #FFFBEB; border-color: #FDE68A; color: #92400E; font-weight: 600; }
.cmpr-summary .add, .cmpr-badge .add { color: #15803D; font-weight: 700; }
.cmpr-summary .del, .cmpr-badge .del { color: #B91C1C; font-weight: 700; }
.cmpr-summary .px-note { color: #7E22CE; font-weight: 600; }
.cmpr-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin: 16px 0 8px 0; }
.cmpr-tabs { display: inline-flex; border: 1px solid #CBD5E1; border-radius: 8px; overflow: hidden; }
.cmpr-tab { background: #FFFFFF; color: #334155; border: none; padding: 7px 14px; font-size: 13px; font-weight: 600; cursor: pointer; }
.cmpr-tab + .cmpr-tab { border-left: 1px solid #CBD5E1; }
.cmpr-tab.active { background: #0F172A; color: #FFFFFF; }
.cmpr-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 12px; color: #64748B; margin-bottom: 12px; }
.cmpr-legend span { padding: 1px 6px; border-radius: 3px; font-weight: 600; }
.cmpr-legend .del-swatch { background: rgba(239, 68, 68, 0.28); color: #991B1B; }
.cmpr-legend .add-swatch { background: rgba(34, 197, 94, 0.28); color: #166534; margin-left: 8px; }
.cmpr-legend .px-swatch { background: rgba(217, 70, 239, 0.45); color: #701A75; margin-left: 8px; }
.cmpr-rows { display: flex; flex-direction: column; gap: 14px; }
.cmpr-row { border: 1px solid #E2E8F0; border-radius: 10px; padding: 12px; background: #FFFFFF; min-width: 0; }
.cmpr-row-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-size: 14px; margin-bottom: 10px; }
.cmpr-badge { font-size: 12px; font-weight: 600; padding: 2px 8px; border-radius: 999px; background: #F1F5F9; color: #334155; }
.cmpr-badge.same { background: #F0FDF4; color: #15803D; }
.cmpr-badge.add { background: #DCFCE7; color: #15803D; }
.cmpr-badge.del { background: #FEE2E2; color: #B91C1C; }
.cmpr-badge.warn { background: #FEF3C7; color: #92400E; }
.cmpr-badge.px { background: #FAE8FF; color: #86198F; }
.cmpr-pair { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }
.cmpr-page { display: flex; flex-direction: column; gap: 6px; background: #F1F5F9; border-radius: 8px; padding: 8px; min-width: 0; }
.cmpr-cap { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: #64748B; }
.cmpr-page.old .cmpr-cap { color: #B91C1C; }
.cmpr-page.new .cmpr-cap { color: #15803D; }
.cmpr-canvas { display: flex; justify-content: center; align-items: flex-start; min-width: 0; min-height: 110px; }
.cmpr-canvas canvas { display: block; max-width: 100%; height: auto; box-shadow: 0 1px 6px rgba(15, 23, 42, 0.18); background: #FFFFFF; }
.cmpr-page.old { border-top: 3px solid #FCA5A5; }
.cmpr-page.new { border-top: 3px solid #86EFAC; }
.cmpr-loading, .cmpr-missing { align-self: center; font-size: 13px; color: #64748B; padding: 30px 8px; text-align: center; }
.cmpr-ph { display: flex; align-items: center; justify-content: center; width: 100%; max-width: 560px; background: #FFFFFF; color: #94A3B8; font-size: 13px; text-align: center; box-shadow: 0 1px 6px rgba(15, 23, 42, 0.12); }
.cmpr-missing { font-style: italic; }
.cmpr-text { font-size: 14px; line-height: 1.7; color: #334155; word-break: break-word; }
.cmpr-text .same { color: #64748B; }
.cmpr-text em { color: #94A3B8; font-size: 12px; }
.cmpr-text del { background: #FEE2E2; color: #991B1B; text-decoration: line-through; padding: 0 2px; border-radius: 2px; }
.cmpr-text ins { background: #DCFCE7; color: #166534; text-decoration: none; padding: 0 2px; border-radius: 2px; }
.cmpr-note { font-size: 12px; color: #64748B; margin: 14px 0 0 0; text-align: center; }
@media (max-width: 560px) {
  .cmpr-slots { grid-template-columns: 1fr; }
  .cmpr-swap { justify-self: center; transform: rotate(90deg); }
  .cmpr-card { padding: 16px; }
  .cmpr-pair { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .cmpr-page { padding: 6px; }
  .cmpr-row { padding: 8px; }
}

/* QR Code Generator: inputs on the left, live preview on the right */
.qr-layout { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: 28px; align-items: start; }
.qr-preview { position: sticky; top: 90px; }
@media (max-width: 720px) {
  .qr-layout { grid-template-columns: 1fr; }
  .qr-preview { position: static; margin-top: 4px; }
}

/* Cookie consent banner and settings modal (js/consent.js) */
.consent-banner {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 2000;
  background: var(--color-card); color: var(--color-text);
  border-top: 1px solid var(--color-border);
  box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.12);
  font-family: var(--font-sans);
}
.consent-banner-inner {
  max-width: 1200px; margin: 0 auto; padding: 16px 20px;
  display: flex; gap: 20px; align-items: center; justify-content: space-between; flex-wrap: wrap;
}
.consent-text { flex: 1 1 420px; min-width: 0; }
.consent-text strong { display: block; font-size: 15px; margin-bottom: 4px; }
.consent-text p { margin: 0; font-size: 13px; line-height: 1.5; color: var(--color-secondary); }
.consent-text a, .consent-modal-links a { color: var(--color-primary-dark); text-decoration: underline; }
/* On the dark card the brand red is 3.3:1; this one is 7.7:1. */
[data-theme='dark'] .consent-text a, [data-theme='dark'] .consent-inline-link, [data-theme='dark'] .consent-modal-links a { color: #FCA5A5; }
.consent-actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.consent-btn {
  border-radius: 8px; padding: 10px 16px; font-size: 14px; font-weight: 600; cursor: pointer;
  border: 1px solid var(--color-border); background: var(--color-card); color: var(--color-text);
  font-family: var(--font-sans);
}
.consent-btn:hover { border-color: var(--color-secondary); }
.consent-btn-primary { background: var(--color-primary); border-color: var(--color-primary); color: #FFFFFF; }
.consent-btn-primary:hover { background: var(--color-primary-dark); border-color: var(--color-primary-dark); }
.consent-btn:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }
.consent-overlay {
  position: fixed; inset: 0; z-index: 2001; background: rgba(15, 23, 42, 0.55);
  display: flex; align-items: center; justify-content: center; padding: 16px;
}
.consent-modal {
  background: var(--color-card); color: var(--color-text); border-radius: 14px;
  width: 100%; max-width: 560px; max-height: 90vh; overflow: auto; padding: 22px 24px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3); font-family: var(--font-sans);
}
.consent-modal-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.consent-modal-header strong { font-size: 18px; }
.consent-close { background: none; border: none; font-size: 18px; cursor: pointer; color: var(--color-secondary); padding: 4px 8px; }
.consent-modal-intro { font-size: 13px; color: var(--color-secondary); line-height: 1.5; margin: 0 0 14px 0; }
.consent-row {
  display: flex; justify-content: space-between; align-items: flex-start; gap: 16px;
  padding: 12px 0; border-top: 1px solid var(--color-border); cursor: pointer;
}
.consent-row span { flex: 1; }
.consent-row strong { display: block; font-size: 14px; margin-bottom: 2px; }
.consent-row small { display: block; font-size: 12px; color: var(--color-secondary); line-height: 1.45; }
.consent-row input { width: 20px; height: 20px; margin-top: 2px; flex: none; accent-color: var(--color-primary); }
.consent-modal .consent-actions { margin-top: 16px; justify-content: flex-end; }
.consent-modal-links { font-size: 12px; color: var(--color-secondary); margin: 14px 0 0 0; text-align: right; }
body.consent-open { overflow: hidden; }
@media (max-width: 640px) {
  .consent-banner-inner { padding: 14px 16px; }
  .consent-actions { width: 100%; }
  .consent-btn { flex: 1 1 auto; text-align: center; }
}
/* Phones (consent.js adds .is-compact up to 640px wide, or up to 480px high for a phone
   held sideways, and redraws the banner when that changes): one sentence, two buttons. */
.consent-banner.is-compact .consent-banner-inner { padding: 10px 14px 12px; gap: 8px; }
.consent-banner.is-compact .consent-text { flex-basis: 100%; }
.consent-banner.is-compact .consent-text p { font-size: 12.5px; line-height: 1.45; }
.consent-banner.is-compact .consent-actions { flex-wrap: nowrap; gap: 8px; }
.consent-banner.is-compact .consent-btn { padding: 9px 10px; }
.consent-banner.is-compact .consent-btn-primary { flex: 1 1 0; min-width: 0; }
.consent-inline-link {
  border: none; background: none; padding: 0; font: inherit; cursor: pointer;
  color: var(--color-primary-dark); text-decoration: underline;
}
/* A phone held sideways is wide but low: the sentence and the two buttons share one row. */
@media (min-width: 641px) {
  .consent-banner.is-compact .consent-banner-inner { flex-wrap: nowrap; gap: 16px; }
  .consent-banner.is-compact .consent-text { flex: 1 1 auto; }
  .consent-banner.is-compact .consent-actions { flex: none; }
  .consent-banner.is-compact .consent-btn-primary { flex: none; padding: 9px 18px; }
}

/* Merge PDF (js/tools/merge.js): the file list, with each file's first page and page count.
   The card sets its own background and text colours, so it stays readable in dark mode
   whatever the panel behind it does. Phones: the buttons move under the file name. */
.merge-card { background: #FFFFFF; border: 1px solid #E2E8F0; border-radius: 14px; padding: 24px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03); color: #0F172A; text-align: left; }
.merge-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 4px 16px; margin-bottom: 16px; }
.merge-head-text { min-width: 0; }
.merge-title { font-size: 16px; font-weight: 700; line-height: 1.4; color: #0F172A; margin: 0; }
.merge-total { font-size: 13px; font-weight: 600; color: #475569; margin: 2px 0 0 0; }
.merge-total:empty { display: none; }
.merge-hint { font-size: 12px; color: #64748B; padding-top: 3px; }
.merge-alert { background: #FEF2F2; border: 1px solid #FECACA; color: #B91C1C; font-size: 13px; line-height: 1.5; padding: 10px 14px; border-radius: 8px; margin-bottom: 14px; overflow-wrap: anywhere; }
.merge-alert[hidden] { display: none; }
.merge-result { overflow-wrap: anywhere; }
.merge-list { list-style: none; margin: 0 0 20px 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.merge-row { display: grid; grid-template-columns: 72px minmax(0, 1fr) auto; grid-template-areas: "thumb info actions"; align-items: center; gap: 14px; padding: 10px 12px; background: #F8FAFC; border: 1px solid #E2E8F0; border-radius: 10px; }
.merge-row-failed { border-color: #EF4444; background: #FEF2F2; }
.merge-thumb { grid-area: thumb; width: 72px; height: 80px; display: flex; align-items: center; justify-content: center; }
.merge-thumb img { display: block; max-width: 100%; max-height: 100%; width: auto; height: auto; background: #FFFFFF; box-shadow: 0 1px 3px rgba(15, 23, 42, 0.28); }
.merge-thumb-ph { width: 56px; height: 72px; display: flex; align-items: center; justify-content: center; border-radius: 4px; background: #E2E8F0; color: #94A3B8; }
.merge-thumb-waiting { animation: merge-wait 1.4s ease-in-out infinite; }
.merge-thumb-locked { background: #FEF3C7; color: #B45309; }
.merge-thumb-broken { background: #FEE2E2; color: #B91C1C; }
@keyframes merge-wait { 50% { opacity: 0.55; } }
.merge-info { grid-area: info; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.merge-name { font-size: 14px; font-weight: 600; color: #1E293B; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.merge-meta { display: flex; flex-wrap: wrap; gap: 2px 12px; font-size: 12px; font-weight: 500; color: #64748B; }
.merge-pages:empty { display: none; }
.merge-note { font-size: 12px; font-weight: 600; line-height: 1.4; }
.merge-note[hidden] { display: none; }
.merge-note-warn { color: #B45309; }
.merge-note-error { color: #B91C1C; }
.merge-actions { grid-area: actions; display: flex; align-items: center; gap: 6px; }
.merge-btn { width: 36px; height: 36px; flex: none; display: inline-flex; align-items: center; justify-content: center; padding: 0; border: 1px solid #CBD5E1; border-radius: 8px; background: #FFFFFF; color: #334155; font-size: 15px; line-height: 1; cursor: pointer; transition: color 0.15s ease, border-color 0.15s ease, background-color 0.15s ease; }
.merge-btn:hover:not(:disabled) { border-color: #94A3B8; color: #0F172A; }
.merge-btn:disabled { opacity: 0.4; cursor: default; }
.merge-btn-remove { border-color: transparent; background: transparent; color: #94A3B8; font-size: 16px; }
.merge-btn-remove:hover:not(:disabled) { border-color: transparent; background: #FEF2F2; color: #EF4444; }
.merge-footer { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; align-items: center; }
.merge-add { padding: 10px 20px; font-weight: 600; border-radius: 8px; border: 1px solid #CBD5E1; background: #FFFFFF; color: #334155; }
.merge-add:hover:not(:disabled) { border-color: #94A3B8; background: #F8FAFC; color: #0F172A; }
.merge-go { padding: 10px 24px; font-weight: 700; border-radius: 8px; border: 1px solid transparent; background: #E52B2F; color: #FFFFFF; }
.merge-go:hover:not(:disabled) { background: #C91F24; }
@media (max-width: 480px) {
  .merge-card { padding: 16px 12px; }
  .merge-row { grid-template-columns: 56px minmax(0, 1fr); grid-template-areas: "thumb info" "thumb actions"; gap: 6px 12px; padding: 10px; }
  .merge-thumb { width: 56px; height: 72px; }
  .merge-thumb-ph { width: 48px; height: 62px; }
  .merge-footer .btn { flex: 1 1 auto; }
}
@media (prefers-reduced-motion: reduce) { .merge-thumb-waiting { animation: none; } }
[data-theme='dark'] .merge-card { background: #1E293B; border-color: #334155; color: #F8FAFC; box-shadow: none; }
[data-theme='dark'] .merge-title { color: #F8FAFC; }
[data-theme='dark'] .merge-total { color: #CBD5E1; }
[data-theme='dark'] .merge-hint { color: #94A3B8; }
[data-theme='dark'] .merge-alert { background: #450A0A; border-color: #991B1B; color: #FECACA; }
[data-theme='dark'] .merge-row { background: #0F172A; border-color: #334155; }
[data-theme='dark'] .merge-row-failed { background: #450A0A; border-color: #F87171; }
[data-theme='dark'] .merge-thumb-ph { background: #334155; color: #94A3B8; }
[data-theme='dark'] .merge-thumb-locked { background: #451A03; color: #FBBF24; }
[data-theme='dark'] .merge-thumb-broken { background: #450A0A; color: #F87171; }
[data-theme='dark'] .merge-name { color: #F1F5F9; }
[data-theme='dark'] .merge-meta { color: #94A3B8; }
[data-theme='dark'] .merge-note-warn { color: #FBBF24; }
[data-theme='dark'] .merge-note-error { color: #F87171; }
[data-theme='dark'] .merge-btn { background: #1E293B; border-color: #475569; color: #E2E8F0; }
[data-theme='dark'] .merge-btn:hover:not(:disabled) { border-color: #94A3B8; color: #FFFFFF; }
[data-theme='dark'] .merge-btn-remove { background: transparent; border-color: transparent; color: #94A3B8; }
[data-theme='dark'] .merge-btn-remove:hover:not(:disabled) { background: #450A0A; border-color: transparent; color: #F87171; }
[data-theme='dark'] .merge-add { background: #1E293B; border-color: #475569; color: #E2E8F0; }
[data-theme='dark'] .merge-add:hover:not(:disabled) { background: #334155; border-color: #94A3B8; color: #FFFFFF; }