/* ═══════════════════════════════════════════════════════════════════════
   ZayroDocX — tool page UI (shared by Merge PDF, Split PDF and the other
   Organize PDF tools). Design tokens, hero/drop zone, buttons, progress bar,
   3D result card and animations.

   Page-specific styles stay in each template's own <style> block, which is
   loaded AFTER this file. A page can restyle anything here by redefining it.
   A tool sets its accent tile with  .mg { --tool; --tool-tint; --icon-rot }  (see each page).
═══════════════════════════════════════════════════════════════════════ */

/* ── Design tokens (light) — same values as static/css/landing.css ── */
.mg {
  --mg-bg:#FFFFFF;
  --mg-surface:#FFFFFF;
  --mg-raised:#F7F7F7;
  --mg-border:#E8E8E8;
  --mg-border-strong:#D4D4D4;
  --mg-text:#0A0A0A;
  --mg-text-2:#525252;
  --mg-text-3:#6B7280;
  --mg-accent:#E53935;
  --mg-accent-hover:#C62828;
  --mg-accent-tint:#FEF2F2;
  --mg-accent-ink:#B71C1C;      /* accent for small text on the tint (AA contrast) */
  --mg-glow:rgba(229,57,53,.16);
  --mg-grid:rgba(10,10,10,.045);
  --mg-ease:cubic-bezier(.2,.7,.2,1);
  --mg-bounce:cubic-bezier(.34,1.56,.64,1);
  --mg-display:'Space Grotesk','Inter','Segoe UI',sans-serif;
  --mg-mono:'IBM Plex Mono',ui-monospace,'SFMono-Regular',Consolas,monospace;
  color:var(--mg-text);
}

/* ── Design tokens (dark) ── */
[data-theme="dark"] .mg {
  --mg-bg:#0F0F0F;
  --mg-surface:#161616;
  --mg-raised:#1C1C1C;
  --mg-border:#2A2A2A;
  --mg-border-strong:#3A3A3A;
  --mg-text:#EDEDED;
  --mg-text-2:#A3A3A3;
  --mg-text-3:#8A8A8A;
  --mg-accent-tint:rgba(229,57,53,.12);
  --mg-accent-ink:#FF8A80;
  --mg-glow:rgba(229,57,53,.22);
  --mg-grid:rgba(255,255,255,.05);
}

/* ── Hero / drop zone ── */
.drop-zone {
  position:relative; overflow:hidden; isolation:isolate;
  text-align:center; padding:clamp(1.2rem,3.5vh,2.6rem) 2rem clamp(1rem,2.5vh,1.8rem);
  min-height:min(560px, calc(100vh - 150px)); min-height:min(560px, calc(100dvh - 150px));
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  border:1.5px dashed var(--mg-border-strong); border-radius:20px;
  background:var(--mg-surface);
  transition:border-color .25s var(--mg-ease), box-shadow .25s var(--mg-ease), transform .25s var(--mg-ease);
  animation:mg-rise .6s var(--mg-ease) both;
}

/* faint grid like the landing hero, fading toward the edges */
.drop-zone::before {
  content:''; position:absolute; inset:0; z-index:-1;
  background-image:linear-gradient(var(--mg-grid) 1px,transparent 1px),
                   linear-gradient(90deg,var(--mg-grid) 1px,transparent 1px);
  background-size:32px 32px;
  -webkit-mask-image:radial-gradient(ellipse at center,#000 30%,transparent 75%);
          mask-image:radial-gradient(ellipse at center,#000 30%,transparent 75%);
}

/* soft red glow that follows hover / drag */
.drop-zone::after {
  content:''; position:absolute; z-index:-1; width:420px; height:420px;
  left:50%; top:42%; transform:translate(-50%,-50%) scale(.8);
  background:radial-gradient(circle,var(--mg-glow),transparent 65%);
  opacity:.6; transition:opacity .35s, transform .5s var(--mg-ease);
}
.drop-zone:hover { border-color:var(--mg-accent); box-shadow:0 18px 60px -18px var(--mg-glow); }
.drop-zone:hover::after { opacity:1; transform:translate(-50%,-50%) scale(1); }
.drop-zone input[type=file] { display:none; }
.mg-eyebrow {
  font-family:var(--mg-mono); font-size:10.5px; font-weight:600;
  letter-spacing:.14em; text-transform:uppercase; color:var(--mg-accent);
  display:inline-flex; align-items:center; gap:10px; margin-bottom:clamp(.5rem,1.6vh,1rem);
}
.mg-eyebrow::before, .mg-eyebrow::after { content:''; width:20px; height:1.5px; background:var(--mg-accent); }

/* tool icon tile — soft red square, same as the tool cards */
.drop-zone-title span { color:var(--mg-accent); }
.drop-zone-sub { font-size:.98rem; color:var(--mg-text-2); margin:0 auto clamp(1rem,2.6vh,1.6rem); max-width:460px; line-height:1.5; }

/* primary button — red with sheen sweep */
.drop-zone-btn { padding:.95rem 2.4rem; font-size:1.08rem; }
.drop-zone-drop-hint { font-size:.86rem; color:var(--mg-text-3); margin:.8rem 0 0; }

/* moving light reflection */
.pdf-thumb-loading {
  width:100%; height:100%;
  background:linear-gradient(90deg,var(--mg-raised) 25%,var(--mg-border) 50%,var(--mg-raised) 75%);
  background-size:200% 100%; animation:mg-shimmer 1.4s ease infinite;
}

/* ── Progress ── */
.progress-wrap.show { display:block; animation:mg-rise .35s var(--mg-ease) both; }
.progress-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:.5rem; }
.progress-label { font-weight:700; font-size:.9rem; color:var(--mg-text); }
.progress-pct   { font-family:var(--mg-mono); font-size:.82rem; color:var(--mg-accent); font-weight:700; }
.progress-track { height:10px; background:var(--mg-raised); border-radius:999px; overflow:hidden; }
.progress-fill  {
  position:relative; height:100%; border-radius:999px; transition:width .3s;
  background:linear-gradient(90deg,#B71C1C,var(--mg-accent),#FF7961);
}
.progress-fill::after {
  content:''; position:absolute; inset:0;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.45),transparent);
  animation:mg-sweep 1.2s linear infinite;
}

/* ── Result ── */
.result-card { display:none !important; }
.result-card.show { display:block !important; }
.btn-download-big i { transition:transform .3s var(--mg-bounce); }
.btn-download-big:hover i { transform:translateY(3px); }
.result-error-wrap {
  background:var(--mg-accent-tint); border:1.5px solid rgba(229,57,53,.35); border-radius:16px;
  padding:1.3rem 1.5rem; display:flex; align-items:center; gap:1rem; margin-top:1rem;
  animation:mg-shake .45s var(--mg-ease) both;
}
.result-err-title { font-size:.95rem; font-weight:700; color:var(--mg-text); }
.result-err-msg   { font-size:.82rem; color:var(--mg-text-2); margin-top:.2rem; }

/* Result card */

/* moving light reflection on the front page */
@keyframes mg-floor { 0%,100%{ transform:translateX(-50%) scale(1); opacity:1 } 50%{ transform:translateX(-50%) scale(.88); opacity:.7 } }

/* confetti burst */
.mg-confetti { position:absolute; inset:0; pointer-events:none; overflow:hidden; z-index:5; }
.mg-confetti i {
  position:absolute; top:-12px; width:8px; height:12px; border-radius:2px;
  animation:mg-fall var(--d) cubic-bezier(.25,.6,.4,1) var(--delay) forwards;
}
@keyframes mg-deal { from{opacity:0;transform:translateY(30px) rotate(0)} }

/* ── Keyframes ── */
@keyframes mg-rise    { from{opacity:0;transform:translateY(14px)} to{opacity:1;transform:none} }
@keyframes mg-fade    { from{opacity:0} to{opacity:1} }
@keyframes mg-float   { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-7px)} }
@keyframes mg-shimmer { 0%{background-position:200% 0} 100%{background-position:-200% 0} }
@keyframes mg-sweep   { from{transform:translateX(-100%)} to{transform:translateX(100%)} }
@keyframes mg-pop     { from{opacity:0;transform:scale(.4)} to{opacity:1;transform:scale(1)} }
@keyframes mg-ring    { 0%{opacity:.7;transform:scale(.9)} 100%{opacity:0;transform:scale(1.5)} }
@keyframes mg-shake   { 0%,100%{transform:none} 20%{transform:translateX(-6px)} 40%{transform:translateX(6px)} 60%{transform:translateX(-3px)} 80%{transform:translateX(3px)} }
@media (prefers-reduced-motion: reduce) {
  .mg *, .mg *::before, .mg *::after { animation:none !important; transition:none !important; }
}

/* ═══════════════════════════════════════════════════════════════════════
   SHARED COMPONENTS v2 — used by Split, Remove, Extract, Image → PDF
   zt-* = workspace (sidebar, thumbnails, controls)   zr-* = result card
   A tool sets its accent tile with  .mg { --tool:…; --tool-tint:…; --icon-rot:…deg }
═══════════════════════════════════════════════════════════════════════ */

/* ── Hero: tool icon tile, drag state, title, buttons ── */
.drop-zone.dragging { border-color:var(--mg-accent); border-style:solid; transform:scale(1.008);
  box-shadow:0 0 0 6px var(--mg-accent-tint), 0 24px 70px -20px var(--mg-glow); }
.mg-icon {
  width:clamp(72px,11vh,96px); height:clamp(72px,11vh,96px); margin:0 auto clamp(.7rem,2vh,1.2rem);
  border-radius:22px; background:var(--tool-tint, var(--mg-accent-tint));
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 10px 26px -12px var(--tool, var(--mg-accent)); animation:mg-float 4.5s ease-in-out infinite;
}
.mg-icon i { font-size:clamp(2rem,4.6vh,2.7rem); color:var(--tool, var(--mg-accent)); transition:transform .4s var(--mg-bounce); }
.drop-zone:hover .mg-icon i { transform:rotate(var(--icon-rot,-6deg)) scale(1.1); }
.drop-zone.dragging .mg-icon i { transform:translateY(-4px) scale(1.15); }
.drop-zone-title { font-family:var(--mg-display); font-size:clamp(1.7rem,min(4vw,5vh),2.4rem); font-weight:700;
  margin:0 0 .45rem; letter-spacing:-.04em; line-height:1.1; color:var(--mg-text); }

/* red button with a sheen that sweeps across on hover */
.mg-btn {
  position:relative; overflow:hidden; display:inline-flex; align-items:center; justify-content:center; gap:.6rem;
  background:var(--mg-accent); color:#fff; border:none; border-radius:12px; cursor:pointer;
  font-family:var(--mg-display); font-weight:700; letter-spacing:-.01em;
  box-shadow:0 8px 24px -6px var(--mg-glow), 0 2px 6px rgba(229,57,53,.25);
  transition:background .2s, transform .2s var(--mg-ease), box-shadow .2s;
}
.mg-btn::before { content:''; position:absolute; top:0; left:-120%; width:60%; height:100%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.35),transparent); transform:skewX(-20deg); transition:left .6s var(--mg-ease); }
.mg-btn:hover:not(:disabled) { background:var(--mg-accent-hover); transform:translateY(-2px); }
.mg-btn:hover:not(:disabled)::before { left:140%; }
/* main action button: looks like a physical key that presses down */
.btn-3d { width:100%; padding:1rem; font-size:1.05rem;
  box-shadow:0 6px 0 #A51C1A, 0 14px 26px -8px var(--mg-glow);
  transition:background .2s, transform .12s var(--mg-ease), box-shadow .12s var(--mg-ease); }
.btn-3d:hover:not(:disabled) { box-shadow:0 8px 0 #A51C1A, 0 20px 32px -10px var(--mg-glow); }
.btn-3d:active:not(:disabled) { transform:translateY(5px); box-shadow:0 1px 0 #A51C1A, 0 6px 12px -6px var(--mg-glow); }
.btn-3d:disabled { background:var(--mg-border-strong); color:var(--mg-text-3); box-shadow:none; cursor:not-allowed; }
.btn-3d i { transition:transform .25s var(--mg-ease); }
.btn-3d:hover:not(:disabled) i { transform:translateX(4px); }
.zt-ghost { display:flex; align-items:center; justify-content:center; gap:.45rem; width:100%; padding:.65rem;
  background:transparent; border:1.5px solid var(--mg-border); border-radius:10px; font-size:.86rem; font-weight:600;
  color:var(--mg-text-2); cursor:pointer; transition:all .2s; }
.zt-ghost:hover { border-color:var(--mg-accent); color:var(--mg-accent); }

/* ── Workspace layout ── */
.zt-layout { display:flex; gap:1.5rem; align-items:flex-start; animation:mg-rise .45s var(--mg-ease) both; }
.zt-main { flex:1; min-width:0; }
.zt-head { display:flex; align-items:center; gap:.6rem; flex-wrap:wrap; margin-bottom:1rem; }
.zt-chip { background:var(--mg-raised); border:1px solid var(--mg-border); border-radius:999px; padding:.3rem .8rem; font-size:.84rem; color:var(--mg-text-2); }
.zt-chip strong { color:var(--mg-text); }
.zt-chip.accent { background:var(--mg-accent-tint); border-color:rgba(229,57,53,.3); color:var(--mg-accent-ink); font-weight:600; }
.zt-render { display:flex; align-items:center; gap:.5rem; font-size:.8rem; color:var(--mg-accent); font-weight:600; }
.zt-render-track { width:120px; height:5px; background:var(--mg-raised); border-radius:999px; overflow:hidden; }
.zt-render-bar { height:100%; width:0; background:var(--mg-accent); transition:width .2s; }

/* card that holds a group of pages / files */
.zt-cards { display:flex; flex-direction:column; gap:1rem; perspective:1100px; }
.zt-card {
  background:var(--mg-surface); border:1px solid var(--mg-border); border-radius:16px; padding:1rem 1.1rem 1.1rem;
  box-shadow:0 8px 24px -16px rgba(10,10,10,.18); animation:mg-card-in .45s var(--mg-bounce) backwards;
  transition:box-shadow .3s var(--mg-ease), border-color .2s;
}
.zt-card:hover { border-color:rgba(229,57,53,.35); box-shadow:0 18px 36px -18px var(--mg-glow); }
.zt-card-head { display:flex; align-items:center; gap:.6rem; margin-bottom:.85rem; flex-wrap:wrap; }
.zt-card-badge {
  display:inline-flex; align-items:center; gap:.4rem; background:var(--mg-accent-hover); color:#fff;
  font-family:var(--mg-mono); font-size:.7rem; font-weight:700; padding:.28rem .65rem; border-radius:999px;
  box-shadow:0 4px 10px -3px var(--mg-glow);
}
.zt-card-title { font-size:.84rem; font-weight:600; color:var(--mg-text); }
.zt-card-count { font-size:.76rem; color:var(--mg-text-3); margin-left:auto; font-family:var(--mg-mono); }

/* page thumbnails */
.zt-grid { display:flex; flex-wrap:wrap; gap:.9rem; }
.zt-thumb { width:92px; display:flex; flex-direction:column; align-items:center; gap:.35rem; }
.zt-thumb-card {
  width:92px; height:120px; border-radius:8px; overflow:hidden; position:relative; background:#fff;
  border:1px solid var(--mg-border); box-shadow:0 4px 10px -4px rgba(10,10,10,.15);
  transform-style:preserve-3d; transition:transform .35s var(--mg-bounce), box-shadow .3s, border-color .2s;
}
.zt-thumb-card img { width:100%; height:100%; object-fit:cover; object-position:top; display:block; animation:mg-fade .3s ease; transition:filter .25s, opacity .25s; }
.zt-thumb:hover .zt-thumb-card { transform:translateY(-6px) rotateX(8deg) rotateY(-8deg); box-shadow:0 18px 26px -12px rgba(10,10,10,.3); }
.zt-thumb-label { font-family:var(--mg-mono); font-size:.66rem; color:var(--mg-text-3); font-weight:600; }
.zt-more {
  width:92px; height:120px; border-radius:8px; border:1.5px dashed var(--mg-border-strong);
  display:flex; align-items:center; justify-content:center; font-family:var(--mg-mono); font-size:.78rem; color:var(--mg-text-2); background:none; cursor:pointer; transition:border-color .2s,color .2s;
}
.zt-more:hover, .zt-more:focus-visible { border-color:var(--mg-accent); color:var(--mg-accent-ink); outline:none; }
.zt-thumb.selectable { cursor:pointer; }
.zt-thumb:focus { outline:none; }
.zt-thumb:focus-visible .zt-thumb-card { outline:3px solid var(--mg-accent); outline-offset:3px; }
.zt-thumb.selectable .zt-thumb-card::after {
  content:'\f00c'; font-family:'Font Awesome 6 Free'; font-weight:900; position:absolute; top:6px; right:6px;
  width:22px; height:22px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:.62rem;
  background:rgba(255,255,255,.9); color:transparent; border:1.5px solid var(--mg-border-strong); transition:all .2s var(--mg-bounce);
}
.zt-thumb.selected .zt-thumb-card { border-color:var(--mg-accent); box-shadow:0 0 0 3px var(--mg-accent-tint), 0 10px 20px -10px var(--mg-glow); }
.zt-thumb.selected .zt-thumb-card::after { background:var(--mg-accent); border-color:var(--mg-accent); color:#fff; transform:scale(1.1); }
.zt-thumb.selected .zt-thumb-label { color:var(--mg-accent); font-weight:700; }
.zt-thumb.dimmed .zt-thumb-card { opacity:.45; }
/* remove mode: a selected page looks deleted (greyed out, ✕ badge) */
.zt-grid.is-remove .zt-thumb.selected .zt-thumb-card img { filter:grayscale(1); opacity:.35; }
.zt-grid.is-remove .zt-thumb.selected .zt-thumb-card::after { content:'\f00d'; }

/* ── Sidebar ── */
.zt-side {
  width:320px; flex-shrink:0; position:sticky; top:1.5rem; display:flex; flex-direction:column; gap:.9rem;
  background:var(--mg-surface); border:1px solid var(--mg-border); border-radius:16px; padding:1.25rem;
  box-shadow:0 8px 24px rgba(10,10,10,.05), 0 30px 60px -30px rgba(10,10,10,.18);
}
.zt-side-title { font-family:var(--mg-display); font-size:1.35rem; font-weight:700; letter-spacing:-.03em; }
.zt-file {
  display:flex; align-items:center; gap:.6rem; background:var(--mg-raised); border:1px solid var(--mg-border);
  border-radius:12px; padding:.6rem .75rem; font-size:.8rem;
}
.zt-file > i { color:var(--mg-accent); font-size:1.1rem; }
.zt-file-meta { min-width:0; flex:1; }
.zt-file-name { font-weight:600; color:var(--mg-text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.zt-file-sub { font-family:var(--mg-mono); font-size:.66rem; color:var(--mg-text-3); }
.zt-link { background:none; border:none; color:var(--mg-accent-ink); font-weight:600; font-size:.76rem; cursor:pointer; padding:0; }
.zt-link:hover { text-decoration:underline; }
.zt-label { font-size:.76rem; font-weight:700; color:var(--mg-text-2); }
.zt-seg { display:flex; gap:4px; padding:4px; background:var(--mg-raised); border:1px solid var(--mg-border); border-radius:12px; }
.zt-seg button {
  flex:1; display:flex; align-items:center; justify-content:center; gap:.4rem; padding:.55rem .4rem;
  border:none; border-radius:9px; background:transparent; color:var(--mg-text-3); font-size:.8rem; font-weight:700; cursor:pointer;
  transition:all .25s var(--mg-ease);
}
.zt-seg button.active { background:var(--mg-surface); color:var(--mg-accent-ink); box-shadow:0 2px 8px rgba(10,10,10,.08); }
.zt-panel { display:none; flex-direction:column; gap:.75rem; }
.zt-panel.active { display:flex; animation:mg-fade .25s ease both; }
.zt-input {
  width:100%; min-width:0; padding:.6rem .75rem; border:1.5px solid var(--mg-border); border-radius:9px;
  background:var(--mg-surface); color:var(--mg-text); font-size:.9rem; font-weight:600; outline:none;
  transition:border-color .2s; -moz-appearance:textfield;
}
.zt-input:focus { border-color:var(--mg-accent); }
.zt-add {
  display:flex; align-items:center; justify-content:center; gap:.4rem; width:100%; padding:.55rem;
  border:1.5px dashed var(--mg-border-strong); border-radius:10px; background:transparent;
  font-size:.82rem; font-weight:700; color:var(--mg-text-2); cursor:pointer; transition:all .2s;
}
.zt-add:hover { border-color:var(--mg-accent); color:var(--mg-accent); background:var(--mg-accent-tint); }
.zt-hint { display:flex; gap:.55rem; align-items:flex-start; background:var(--mg-raised); border:1px solid var(--mg-border);
  border-radius:10px; padding:.7rem .85rem; font-size:.78rem; color:var(--mg-text-2); line-height:1.5; }
.zt-hint i { color:var(--mg-accent); margin-top:.15rem; }
.zt-toggle { display:flex; align-items:center; gap:.65rem; font-size:.8rem; color:var(--mg-text); cursor:pointer; user-select:none; }
.zt-toggle input { display:none; }
.zt-toggle .sw { width:38px; height:22px; border-radius:999px; background:var(--mg-border-strong); position:relative; transition:background .25s; flex-shrink:0; }
.zt-toggle .sw::after { content:''; position:absolute; top:3px; left:3px; width:16px; height:16px; border-radius:50%; background:#fff;
  box-shadow:0 1px 3px rgba(0,0,0,.2); transition:transform .3s var(--mg-bounce); }
.zt-toggle input:checked + .sw { background:var(--mg-accent); }
.zt-toggle input:checked + .sw::after { transform:translateX(16px); }
.zt-output { display:flex; align-items:center; justify-content:space-between; font-size:.8rem; color:var(--mg-text-2);
  border-top:1px dashed var(--mg-border); padding-top:.75rem; }
.zt-output strong { font-family:var(--mg-display); font-size:1.05rem; color:var(--mg-text); }
.zt-error { display:none; font-size:.78rem; color:var(--mg-accent); background:var(--mg-accent-tint); border-radius:10px; padding:.55rem .75rem; }
.zt-error.show { display:block; animation:mg-shake .4s var(--mg-ease) both; }
.zt-progress { display:none; background:var(--mg-surface); border:1px solid var(--mg-border); border-radius:12px; padding:.9rem 1rem; }
/* big "N pages selected" counter */
.zt-count { display:flex; align-items:center; gap:.85rem; background:var(--mg-accent-tint); border:1px solid rgba(229,57,53,.25);
  border-radius:12px; padding:.7rem .9rem; }
.zt-count b { font-family:var(--mg-display); font-size:1.9rem; line-height:1; letter-spacing:-.03em; color:var(--mg-accent); min-width:1.5ch; text-align:center; }
.zt-count span { font-size:.8rem; color:var(--mg-text-2); line-height:1.35; }
.zt-count.bump b { animation:zt-bump .35s var(--mg-bounce); }
/* quick-select chips */
.zt-presets { display:flex; flex-wrap:wrap; gap:.4rem; }
.zt-preset { border:1.5px solid var(--mg-border); background:var(--mg-surface); color:var(--mg-text-2); border-radius:999px;
  padding:.28rem .7rem; font-size:.75rem; font-weight:600; cursor:pointer; transition:all .2s var(--mg-ease); }
.zt-preset:hover { border-color:var(--mg-accent); color:var(--mg-accent); background:var(--mg-accent-tint); transform:translateY(-1px); }
/* toast */
.zt-toast {
  position:fixed; left:50%; bottom:28px; transform:translate(-50%,20px); z-index:9999;
  background:#0A0A0A; color:#fff; font-size:.85rem; padding:.75rem 1.1rem; border-radius:12px;
  display:flex; align-items:center; gap:.6rem; box-shadow:0 18px 40px rgba(0,0,0,.25);
  opacity:0; pointer-events:none; transition:opacity .25s, transform .3s var(--mg-ease); max-width:calc(100% - 32px);
}
.zt-toast.show { opacity:1; transform:translate(-50%,0); }
.zt-toast i { color:#FF7961; }

/* ── Result card (3D) ── */
.zr {
  display:grid; grid-template-columns:290px 1fr; gap:2rem; align-items:center; max-width:940px; margin:1.5rem auto;
  padding:2rem; background:var(--mg-surface); border:1px solid var(--mg-border); border-radius:20px;
  box-shadow:0 20px 50px -20px rgba(10,10,10,.12); position:relative; overflow:hidden; animation:mg-rise .5s var(--mg-ease) both;
}
.zr::before { content:''; position:absolute; top:-120px; right:-120px; width:320px; height:320px;
  background:radial-gradient(circle,var(--mg-glow),transparent 65%); pointer-events:none; }
.zr-preview { position:relative; height:300px; display:flex; align-items:center; justify-content:center; perspective:1100px; }
.zr-stage { position:relative; width:180px; height:240px; transform-style:preserve-3d;
  transform:rotateX(8deg) rotateY(-14deg); transition:transform .5s var(--mg-ease); animation:zt-sway 6s ease-in-out infinite; }
.zr-preview.tracking .zr-stage { animation:none; transition:transform .12s linear; }
.zr-sheet { position:absolute; left:0; top:0; width:180px; height:240px; border-radius:10px; overflow:hidden; background:#fff;
  border:1px solid var(--mg-border); display:flex; align-items:center; justify-content:center; backface-visibility:hidden;
  box-shadow:0 14px 34px -10px rgba(10,10,10,.22); transition:transform .55s var(--mg-bounce); }
.zr-sheet img { width:100%; height:100%; object-fit:cover; object-position:top; image-rendering:-webkit-optimize-contrast; }
.zr-sheet.contain img { object-fit:contain; object-position:center; }   /* photos: show the whole picture */
.zr-tag { position:absolute; top:8px; left:8px; background:rgba(10,10,10,.7); color:#fff; font-family:var(--mg-mono);
  font-size:.62rem; font-weight:700; padding:.2rem .5rem; border-radius:999px; backdrop-filter:blur(4px); }
.zr-sheet.s3 { transform:translateZ(-60px) translateX(-48px) rotate(-9deg); filter:brightness(.94); animation:mg-deal .6s var(--mg-bounce) .05s backwards; }
.zr-sheet.s2 { transform:translateZ(-30px) translateX(46px) rotate(8deg); filter:brightness(.97); animation:mg-deal .6s var(--mg-bounce) .15s backwards; }
.zr-sheet.s1 { z-index:2; transform:translateZ(24px); box-shadow:0 30px 50px -18px rgba(10,10,10,.35); animation:mg-pop .55s var(--mg-bounce) .25s backwards; }
.zr-preview:hover .zr-sheet.s3 { transform:translateZ(-60px) translateX(-66px) rotate(-13deg); }
.zr-preview:hover .zr-sheet.s2 { transform:translateZ(-30px) translateX(62px) rotate(12deg); }
.zr-glare { --gx:30%; --gy:20%; position:absolute; inset:0; pointer-events:none; mix-blend-mode:soft-light; opacity:.75;
  background:radial-gradient(circle at var(--gx) var(--gy), rgba(255,255,255,.85), rgba(255,255,255,0) 55%), linear-gradient(115deg, rgba(255,255,255,.35) 0%, transparent 40%); }
.zr-floor { position:absolute; bottom:12px; left:50%; width:230px; height:26px; transform:translateX(-50%);
  background:radial-gradient(ellipse at center, rgba(10,10,10,.22), transparent 70%); filter:blur(4px); animation:mg-floor 6s ease-in-out infinite; }
.zr-pill { position:absolute; bottom:18px; right:0; z-index:3; display:inline-flex; align-items:center; gap:.4rem;
  background:var(--mg-accent); color:#fff; font-family:var(--mg-mono); font-size:.7rem; font-weight:700; padding:.35rem .75rem; border-radius:999px;
  box-shadow:0 6px 16px -4px var(--mg-glow); }
.zr-body { position:relative; min-width:0; }            /* min-width lets long names truncate instead of overflowing */
.zr-head { display:flex; align-items:center; gap:1rem; margin-bottom:1.1rem; }
.zr-badge { width:52px; height:52px; flex-shrink:0; border-radius:50%; background:var(--mg-accent); color:#fff; font-size:1.25rem;
  display:flex; align-items:center; justify-content:center; position:relative; box-shadow:0 14px 34px -8px var(--mg-glow); animation:mg-pop .55s var(--mg-bounce) both; }
.zr-badge::before { content:''; position:absolute; inset:-8px; border-radius:50%; border:2px solid var(--mg-accent); opacity:0; animation:mg-ring 1.6s var(--mg-ease) .3s 2; }
.zr-title { font-family:var(--mg-display); font-size:1.75rem; font-weight:700; letter-spacing:-.04em; margin:0; color:var(--mg-text); }
.zr-sub { margin:.2rem 0 0; font-size:.88rem; color:var(--mg-text-2); }
.zr-file { display:flex; align-items:center; gap:.65rem; max-width:100%; min-width:0; background:var(--mg-raised);
  border:1px solid var(--mg-border); border-radius:12px; padding:.55rem .7rem .55rem .55rem; margin-bottom:.9rem; }
.zr-file .ic { width:32px; height:32px; border-radius:8px; background:var(--mg-accent-tint); color:var(--mg-accent);
  display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.zr-file .nm { flex:1; min-width:0; font-size:.84rem; font-weight:600; color:var(--mg-text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.zr-file .sz { font-family:var(--mg-mono); font-size:.7rem; color:var(--mg-text-3); flex-shrink:0; }
.zr-stats { display:grid; grid-template-columns:repeat(3,1fr); margin-bottom:1rem; border:1px solid var(--mg-border);
  border-radius:12px; overflow:hidden; background:var(--mg-surface); }
.zr-stats > div { padding:.75rem .9rem; min-width:0; }
.zr-stats > div + div { border-left:1px solid var(--mg-border); }
.zr-stats b { display:block; font-family:var(--mg-display); font-size:1.3rem; letter-spacing:-.02em; color:var(--mg-text);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.zr-stats small { font-family:var(--mg-mono); font-size:.6rem; letter-spacing:.1em; text-transform:uppercase; color:var(--mg-text-3); }
.zr-list { list-style:none; margin:0 0 1.1rem; padding:0; display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:.45rem; }
.zr-list li { display:flex; align-items:center; gap:.5rem; padding:.45rem .6rem; border:1px solid var(--mg-border); border-radius:10px;
  font-size:.78rem; background:var(--mg-surface); animation:mg-card-in .4s var(--mg-bounce) backwards; }
.zr-list .n { min-width:20px; height:20px; border-radius:999px; background:var(--mg-accent); color:#fff; font-family:var(--mg-mono);
  font-size:.62rem; font-weight:700; display:flex; align-items:center; justify-content:center; }
.zr-list .r { flex:1; min-width:0; color:var(--mg-text); font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.zr-list .c { font-family:var(--mg-mono); font-size:.66rem; color:var(--mg-text-3); }
.zr-list li.more { justify-content:center; color:var(--mg-text-3); border-style:dashed; }
.zr-actions { display:flex; gap:.75rem; flex-wrap:wrap; margin-top:.2rem; }
.zr-download { padding:1rem 1.8rem; font-size:1.05rem; border-radius:14px; text-decoration:none; }
.zr-download:hover { color:#fff; text-decoration:none; }
.zr-download i { transition:transform .3s var(--mg-bounce); }
.zr-download:hover i { transform:translateY(3px); }
.zr-again { display:inline-flex; align-items:center; gap:.5rem; background:var(--mg-surface); border:1.5px solid var(--mg-border);
  border-radius:12px; padding:.85rem 1.4rem; font-size:.95rem; font-weight:600; cursor:pointer; color:var(--mg-text-2); transition:all .2s; }
.zr-again:hover { border-color:var(--mg-accent); color:var(--mg-accent); }
.result-err-icon { width:44px; height:44px; border-radius:50%; background:var(--mg-accent); color:#fff; display:flex; align-items:center; justify-content:center; flex-shrink:0; }

/* ── Keyframes (zt-* names so they never clash with a page's own) ── */
@keyframes mg-card-in { from{opacity:0;transform:translateY(16px) scale(.96)} to{opacity:1;transform:none} }
@keyframes zt-sway { 0%,100%{transform:rotateX(8deg) rotateY(-14deg) translateY(0)} 50%{transform:rotateX(4deg) rotateY(-6deg) translateY(-8px)} }
@keyframes mg-fall { 0%{transform:translate(0,0) rotate(0);opacity:1} 100%{transform:translate(var(--x),620px) rotate(var(--r));opacity:0} }
@keyframes zt-bump { 0%{transform:scale(1)} 40%{transform:scale(1.35)} 100%{transform:scale(1)} }

/* ── Responsive ── */
@media(max-width:900px){
  .zt-layout { flex-direction:column; }
  .zt-side { width:100%; position:static; order:-1; }
}
@media(max-width:768px){
  .drop-zone { padding:1.6rem 1.1rem 1.3rem; min-height:0; }
  .zt-thumb, .zt-thumb-card, .zt-more { width:76px; }
  .zt-thumb-card, .zt-more { height:100px; }
  .zr { grid-template-columns:1fr; padding:1.4rem; gap:1rem; text-align:center; }
  .zr-preview { height:240px; }
  .zr-head { flex-direction:column; text-align:center; }
  .zr-stats b { font-size:1.1rem; }
  .zr-actions { justify-content:center; }
  .zr-download { width:100%; }
}

/* ── File cards: 3D-tilting file/image tiles + "add more" tile (Merge PDF, Image to PDF) ── */
.file-card-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(160px,1fr)); gap:1.1rem; perspective:1000px; }
.file-card {
  background:var(--mg-surface); border:1.5px solid var(--mg-border); border-radius:14px;
  overflow:visible; cursor:grab; position:relative; user-select:none;
  --rx:0deg; --ry:0deg; --lift:0px; --sc:1;
  transform-style:preserve-3d;
  transform:translateY(var(--lift)) rotateX(var(--rx)) rotateY(var(--ry)) scale(var(--sc));
  transition:box-shadow .3s var(--mg-ease), border-color .2s, transform .35s var(--mg-ease), opacity .2s;
}
.file-card.tilting { transition:box-shadow .3s var(--mg-ease), border-color .2s, transform .08s linear; }
.file-card.multi {
  box-shadow:4px 4px 0 -1px var(--mg-surface), 4px 4px 0 0 var(--mg-border),
             8px 8px 0 -1px var(--mg-surface), 8px 8px 0 0 var(--mg-border);
}
.file-card.is-new { animation:mg-card-in .5s var(--mg-bounce) backwards; }
.file-card:hover { --lift:-8px; border-color:rgba(229,57,53,.45); }
.file-card:hover:not(.multi) { box-shadow:0 26px 40px -18px rgba(10,10,10,.28), 0 10px 24px -14px var(--mg-glow); }
.file-card.multi:hover {
  box-shadow:4px 4px 0 -1px var(--mg-surface), 4px 4px 0 0 var(--mg-border),
             8px 8px 0 -1px var(--mg-surface), 8px 8px 0 0 var(--mg-border),
             0 30px 44px -18px rgba(10,10,10,.3), 0 10px 24px -14px var(--mg-glow);
}
.file-card:active { cursor:grabbing; }
.file-card.drag-over { --sc:1.05; border-color:var(--mg-accent); }
.file-card.drag-over::after {
  content:''; position:absolute; inset:-6px; border-radius:18px; border:2px dashed var(--mg-accent);
  pointer-events:none; animation:mg-fade .2s ease both;
}
.file-card.dragging-row { opacity:.35; --sc:.94; --rx:0deg; --ry:0deg; }
.file-card-thumb, .file-card-info { border-radius:13px; }
.file-card-thumb { border-radius:13px 13px 0 0; }
.file-card-info  { border-radius:0 0 13px 13px; background:var(--mg-surface); }
.fc-glare {
  --gx:50%; --gy:0%;
  position:absolute; inset:0; pointer-events:none; z-index:1; opacity:0;
  background:radial-gradient(circle at var(--gx) var(--gy), rgba(255,255,255,.65), rgba(255,255,255,0) 60%);
  mix-blend-mode:soft-light; transition:opacity .3s;
}
.file-card:hover .fc-glare { opacity:1; }
.file-card-num, .file-card-remove { transform:translateZ(30px); }
.file-card:hover .file-card-num { box-shadow:0 8px 16px -4px rgba(229,57,53,.55); }
.file-card-pages {
  position:absolute; bottom:8px; right:8px; z-index:2; transform:translateZ(20px);
  font-family:var(--mg-mono); font-size:.6rem; font-weight:700; color:var(--mg-text-2);
  background:var(--mg-surface); border:1px solid var(--mg-border); padding:.12rem .45rem; border-radius:999px;
}
.file-card-thumb {
  height:170px; background:var(--mg-raised);
  display:flex; align-items:center; justify-content:center;
  border-bottom:1px solid var(--mg-border); position:relative; overflow:hidden;
}
.pdf-doc-icon {
  width:72px; height:88px; background:var(--mg-surface);
  border:1.5px solid var(--mg-border-strong); border-radius:4px 12px 4px 4px;
  display:flex; align-items:center; justify-content:center; box-shadow:0 4px 12px rgba(10,10,10,.08);
}
.pdf-doc-icon .pdf-label {
  background:var(--mg-accent); color:#fff; font-size:.6rem; font-weight:900;
  letter-spacing:.06em; padding:.18rem .42rem; border-radius:4px; margin-top:.5rem;
}
.file-card-num {
  position:absolute; top:8px; left:8px; z-index:2;
  min-width:24px; height:24px; padding:0 6px; border-radius:999px;
  background:var(--mg-accent); color:#fff; font-family:var(--mg-mono); font-size:.68rem; font-weight:700;
  display:flex; align-items:center; justify-content:center; box-shadow:0 3px 8px rgba(229,57,53,.4);
}
.file-card-grip {
  position:absolute; bottom:8px; left:50%; transform:translate(-50%,6px); z-index:2;
  font-size:.62rem; font-weight:600; color:#fff; background:rgba(10,10,10,.6);
  padding:.2rem .55rem; border-radius:999px; opacity:0; transition:opacity .2s, transform .25s var(--mg-ease);
  white-space:nowrap; backdrop-filter:blur(4px);
}
.file-card:hover .file-card-grip { opacity:1; transform:translate(-50%,0); }
.file-card-remove {
  position:absolute; top:6px; right:6px; z-index:2;
  width:26px; height:26px; border-radius:50%;
  background:rgba(10,10,10,.6); border:none; cursor:pointer; color:#fff;
  font-size:.7rem; display:flex; align-items:center; justify-content:center;
  opacity:0; transform:translateZ(30px) scale(.7); transition:opacity .2s, transform .2s var(--mg-bounce), background .2s;
}
.file-card:hover .file-card-remove { opacity:1; transform:translateZ(30px) scale(1); }
.file-card-remove:hover { background:var(--mg-accent); }
.file-card-info { padding:.6rem .75rem .7rem; }
.file-card-name { font-size:.76rem; font-weight:600; color:var(--mg-text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.file-card-size { font-family:var(--mg-mono); font-size:.66rem; color:var(--mg-text-3); margin-top:.15rem; }
.pdf-thumb-img { width:100%; height:100%; object-fit:cover; object-position:top; display:block; animation:mg-fade .35s ease both; }
.file-add-tile {
  min-height:236px; border:1.5px dashed var(--mg-border-strong); border-radius:14px;
  background:transparent; color:var(--mg-text-3); cursor:pointer;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.6rem;
  font-size:.82rem; font-weight:600; transition:all .25s var(--mg-ease);
}
.file-add-tile .plus {
  width:46px; height:46px; border-radius:50%; background:var(--mg-raised); border:1px solid var(--mg-border);
  display:flex; align-items:center; justify-content:center; font-size:1.1rem;
  transition:transform .35s var(--mg-bounce), background .2s, color .2s;
}
.file-add-tile:hover, .file-add-tile.drag-over {
  border-color:var(--mg-accent); color:var(--mg-accent); background:var(--mg-accent-tint);
}
.file-add-tile:hover { transform:translateY(-6px) rotateX(6deg); }
.file-add-tile:hover .plus { transform:rotate(90deg) scale(1.08); background:var(--mg-accent); color:#fff; border-color:var(--mg-accent); }
@media(max-width:768px) {
  .file-add-tile { min-height:180px; }
}
@media(max-width:768px) {
  .file-card-grid { grid-template-columns:repeat(2,1fr); gap:.6rem; }
  .file-card-remove { opacity:1; transform:scale(1); }
  .file-card-grip { display:none; }
}

/* ── converter preview (Word/PowerPoint/Excel → PDF, PDF → …): bigger, uncropped pages ── */
.zt-grid.is-preview { gap:1.1rem; }
.zt-grid.is-preview .zt-thumb { width:132px; }
.zt-grid.is-preview .zt-thumb-card { width:132px; height:172px; }
.zt-grid.is-preview .zt-thumb-card img { object-fit:contain; object-position:center; background:#fff; }
.zt-preview-wait { display:flex; align-items:center; gap:.7rem; padding:2.2rem 1rem; width:100%; justify-content:center;
  color:var(--mg-text-2); font-size:.88rem; }
.zt-preview-wait i { font-size:1.2rem; color:var(--tool, var(--mg-accent)); }
.zt-file i.fa-file-word, .zt-file i.fa-file-excel, .zt-file i.fa-file-powerpoint, .zt-file i.fa-file-code { color:var(--tool, var(--mg-accent)); }