/* PDF pages workspace */
.pp-work { display: grid; gap: 16px; margin-top: 16px; }
.pp-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; }
.pp-files { display: flex; flex-wrap: wrap; gap: 8px; min-width: 0; }
.pp-file { display: inline-flex; align-items: center; gap: 8px; max-width: 260px; padding: 6px 8px 6px 10px; border: 1px solid var(--line); border-radius: var(--pill); font: 500 12.5px/1 var(--sans); background: #fff; }
.pp-file .pp-dot { flex: none; }
.pp-file b { font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pp-file small { color: var(--muted); font-size: 11.5px; white-space: nowrap; }
.pp-file button { border: 0; background: none; padding: 0 2px; font: 500 15px/1 var(--sans); color: var(--muted); cursor: pointer; }
.pp-file button:hover { color: var(--ink); }
.pp-barbtns { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.pp-size { display: inline-flex; align-items: center; gap: 8px; font: 500 12.5px/1 var(--sans); color: var(--muted); }
.pp-size select { padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; background: #fff; font: 500 13px/1 var(--sans); color: var(--ink); }
.pp-opts { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: end; }
.pp-opts:empty, .pp-opts.is-empty { display: none; }
.pp-opts .field { display: grid; gap: 6px; font: 500 12.5px/1 var(--sans); color: var(--muted); }
.pp-opts .field select, .pp-opts .field input { padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; background: #fff; font: 500 13px/1 var(--sans); color: var(--ink); min-width: 150px; }
.pp-opts .pp-wide input { min-width: 260px; }
.pp-opts .check { display: inline-flex; align-items: center; gap: 8px; font: 400 13px/1.3 var(--sans); color: var(--ink); padding-bottom: 8px; }
.pp-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(136px, 1fr)); gap: 12px; touch-action: pan-y; }
.pp-page { position: relative; border: 1px solid var(--line); border-radius: 14px; background: #fff; padding: 8px; cursor: grab; user-select: none; -webkit-user-select: none; touch-action: none; transition: border-color var(--t) var(--ease), box-shadow var(--t) var(--ease), opacity var(--t) var(--ease); }
.pp-page.is-selected { border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink); }
.pp-page.is-dragging { opacity: 0.35; cursor: grabbing; }
.pp-thumb { position: relative; aspect-ratio: 3 / 4; display: grid; place-items: center; border-radius: 8px; background: var(--paper-2); overflow: hidden; }
.pp-thumb img { max-width: 100%; max-height: 100%; object-fit: contain; box-shadow: 0 1px 3px rgba(14, 8, 7, 0.14); transition: transform var(--t) var(--ease); }
.pp-skel { position: absolute; inset: 12px; border-radius: 6px; background: linear-gradient(90deg, rgba(14, 8, 7, 0.05), rgba(14, 8, 7, 0.1), rgba(14, 8, 7, 0.05)); background-size: 200% 100%; animation: pp-shimmer 1.2s linear infinite; }
@keyframes pp-shimmer { to { background-position: -200% 0; } }
.pp-meta { display: flex; align-items: center; justify-content: space-between; margin-top: 8px; font: 500 12px/1 var(--sans); color: var(--muted); }
.pp-dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
.pp-dot.dot-orange { background: var(--orange); } .pp-dot.dot-green { background: var(--green); } .pp-dot.dot-purple { background: var(--purple); } .pp-dot.dot-yellow { background: var(--yellow); } .pp-dot.dot-olive { background: var(--olive); } .pp-dot.dot-blue { background: var(--blue); }
.pp-tools { position: absolute; top: 12px; right: 12px; display: flex; gap: 4px; opacity: 0; transition: opacity var(--t) var(--ease); }
.pp-page:hover .pp-tools, .pp-page:focus-within .pp-tools, .pp-page.is-selected .pp-tools { opacity: 1; }
.pp-btn { width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--line); background: #fff; font: 500 14px/1 var(--sans); color: var(--ink); cursor: pointer; display: grid; place-items: center; box-shadow: 0 1px 2px rgba(14, 8, 7, 0.08); }
.pp-btn:hover { background: var(--ink); color: #fff; border-color: var(--ink); }
.pp-check { position: absolute; top: 12px; left: 12px; width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid rgba(14, 8, 7, 0.3); background: rgba(255, 255, 255, 0.9); }
.pp-page.is-selected .pp-check { background: var(--ink); border-color: var(--ink); }
.pp-page.is-selected .pp-check::after { content: ""; position: absolute; left: 5px; top: 2px; width: 5px; height: 9px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.pp-ghost { position: fixed; z-index: 50; pointer-events: none; width: 120px; border-radius: 12px; background: #fff; box-shadow: 0 18px 40px rgba(14, 8, 7, 0.25); padding: 6px; transform: translate(-50%, -50%) rotate(-2deg); }
.pp-ghost img { display: block; width: 100%; border-radius: 6px; }
.pp-hint { margin: 0; font: 400 12.5px/1.5 var(--sans); color: var(--muted); }
.pp-actions { align-items: center; }
@media (hover: none) { .pp-tools { opacity: 1; } .pp-hint { display: none; } }
@media (max-width: 600px) { .pp-grid { grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 8px; } .pp-page { padding: 6px; border-radius: 10px; } .pp-bar { gap: 8px; } .pp-file { max-width: 100%; } }
/* once pages are in, the drop zone shrinks to a strip for adding more */
#pp-drop.is-compact { padding: 14px 16px; display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 6px 12px; }
#pp-drop.is-compact .drop-icon { width: 30px; height: 30px; margin: 0; }
#pp-drop.is-compact .drop-icon svg { width: 14px; height: 14px; }
#pp-drop.is-compact b { font-size: 14px; }
#pp-drop.is-compact small { margin: 0; }