.editor .dropzone{max-width:900px}
.editor .unlock{max-width:900px;margin:0 auto 16px}
.editor .job-busy{margin:0 auto 16px}
.editor>.error-note{margin:0 0 16px}
.link-button{display:block;border:0;background:none;padding:0;margin-top:10px;font-size:13px;color:var(--muted)}
.link-button:hover{color:var(--text)}

#editor{display:flex;flex-direction:column;gap:16px}
.doc-bar{display:flex;align-items:center;gap:16px;padding:16px 20px;border:1px solid var(--line);border-radius:16px;background:linear-gradient(130deg,var(--surface),var(--surface-2))}
.doc-info{flex:1;min-width:0}
.doc-info strong{display:block;font-size:16px;font-weight:600;overflow-wrap:anywhere}
.doc-info p{font-size:13px;color:var(--muted);margin:4px 0 0}
.doc-files{list-style:none;margin:8px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:6px 16px;font-size:12.5px;color:var(--text-2)}
.doc-files li{display:flex;align-items:center;gap:7px;min-width:0}
.doc-files li span:last-child{overflow-wrap:anywhere}
.doc-actions{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.doc-actions .ghost{padding:8px 13px;font-size:13px}
.ghost:disabled{opacity:.45;cursor:not-allowed}

.tool-button{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--line);background:var(--surface);border-radius:9px;padding:7px 11px;font-size:13px;color:var(--text-2);transition:border-color .2s,color .2s}
.tool-button svg{width:16px;height:16px;flex:none}
.tool-button:hover:not(:disabled){border-color:var(--line-strong);color:var(--text)}
.tool-button:disabled{opacity:.4;cursor:not-allowed}
.tool-button.danger:hover:not(:disabled){border-color:var(--red-line);color:var(--red-text)}

.modes{margin:0 auto}
.layout{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:20px;align-items:start}

.pages-card{min-width:0;border:1px solid var(--line);border-radius:16px;background:var(--surface);overflow:hidden}
.select-bar{display:flex;align-items:center;justify-content:space-between;gap:10px 14px;padding:12px 14px;border-bottom:1px solid var(--line-soft);flex-wrap:wrap}
.page-tools{display:flex;gap:6px;flex-wrap:wrap}
.pages{list-style:none;margin:0;padding:18px;display:grid;grid-template-columns:repeat(auto-fill,minmax(128px,1fr));gap:16px 12px;align-content:start;max-height:min(72vh,860px);min-height:240px;overflow:auto;background:var(--surface-2)}
.page{position:relative;display:flex;flex-direction:column;align-items:center;gap:8px;padding:8px;border:1.5px solid transparent;border-radius:12px;cursor:pointer;user-select:none;transition:background .15s,border-color .15s}
.page:hover{background:var(--surface-3)}
.page:focus-visible{outline:2px solid var(--red);outline-offset:2px}
.page[aria-selected=true]{background:var(--red-soft);border-color:var(--red-line)}
.sheet{position:relative;width:100%;aspect-ratio:1;display:grid;place-items:center}
.sheet canvas{display:block;width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 1px 1.5px var(--line-strong))}
.tick{position:absolute;top:0;right:0;width:22px;height:22px;border-radius:50%;border:1.5px solid var(--line-strong);background:var(--surface);color:transparent;display:grid;place-items:center;opacity:0;transition:opacity .15s}
.tick svg{width:13px;height:13px}
.page:hover .tick,.page:focus-visible .tick{opacity:1}
.page[aria-selected=true] .tick{opacity:1;background:var(--red);border-color:var(--red);color:var(--on-red)}
.caption{display:flex;align-items:center;gap:6px;font-size:12.5px;color:var(--text-2);font-variant-numeric:tabular-nums}
.badge{display:inline-block;min-width:18px;text-align:center;font-size:10.5px;font-weight:650;line-height:1.6;padding:0 5px;border-radius:6px;background:var(--surface-3);color:var(--text-2)}
.page[aria-selected=true] .badge{background:var(--surface)}
.page.dragging{opacity:.4}
.page.drop-before::before,.page.drop-after::after{content:'';position:absolute;top:8px;bottom:8px;width:3px;border-radius:2px;background:var(--red)}
.page.drop-before::before{left:-8px}
.page.drop-after::after{right:-8px}
.empty-pages{grid-column:1/-1;text-align:center;color:var(--muted);padding:48px 0;font-size:14px}
.pages-help{margin:0;padding:10px 16px;font-size:12.5px;line-height:1.5;color:var(--muted);border-top:1px solid var(--line-soft)}

.side{display:flex;flex-direction:column;gap:16px;position:sticky;top:16px;min-width:0}
.mode-panel,.save-card{display:flex;flex-direction:column;gap:16px;padding:20px;border:1px solid var(--line);border-radius:16px;background:var(--surface)}
.mode-panel[hidden]{display:none}
.mode-panel h2{font-size:13px;text-transform:uppercase;letter-spacing:1.4px;color:var(--muted);font-weight:650;margin:0}
.mode-panel h2:not(:first-child){margin-top:6px;padding-top:20px;border-top:1px solid var(--line-soft)}
.mode-panel form,#lossy-options{display:flex;flex-direction:column;gap:16px}
#lossy-options[hidden]{display:none}
.mode-panel>.hint,.mode-panel form>.hint,#lossy-options>.hint{margin:0}
.side .field legend,.side .field-label{margin-bottom:8px}
.side .run{justify-content:stretch}
.side .run .ghost,.side .run .primary{flex:1}
.text-input,.select{display:block;width:100%;border:1px solid var(--line);border-radius:10px;background:var(--surface);color:var(--text);padding:9px 12px;font:inherit;font-size:14px;outline:0;transition:border-color .2s}
.text-input:focus,.select:focus{border-color:var(--line-strong)}
.text-input::placeholder{color:var(--faint)}
.text-input.narrow{width:120px}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
input[type=range]{display:block;width:100%;margin:0;accent-color:var(--red)}
.toggles{display:grid;gap:9px}
.check-line{display:flex;align-items:center;gap:10px;font-size:14px;color:var(--text);cursor:pointer}
.check-line input{width:16px;height:16px;margin:0;flex:none}
.more-options summary{cursor:pointer;font-size:13px;font-weight:600;color:var(--text-2)}
.more-options summary::marker{color:var(--muted)}
.more-options .field{margin-top:12px}
.side .choices span{padding:7px 12px}

.save-card .check{padding:12px 14px}
.save-note{margin:0;font-size:12.5px;line-height:1.5;color:var(--text-2)}
#sign-note{color:var(--red-text)}
.save-card .result{border-radius:12px}
.save-card .result-head{padding:14px 16px;gap:12px}
.save-card .result-head h3{font-size:15px;font-weight:620;margin:0;overflow-wrap:anywhere}
.save-card .result-head p{font-size:13px;margin:3px 0 0;color:var(--text-2)}
.save-card .result-mark{width:34px;height:34px;border-radius:10px}
.save-card .report>li{padding:10px 16px;font-size:13px}
.report li.warn,.hint.warn{color:var(--red-text)}
#retained-dialog{max-width:520px}
#retained-dialog h2{font-size:22px}
#retained-dialog .report{margin:14px 0 0}
#retained-dialog .report>li{padding:10px 14px;font-size:14px;overflow-wrap:anywhere}
#retained-dialog .dialog-actions{gap:10px}
.organize-report{margin:14px 0 0}
.organize-report>li{padding:10px 14px;font-size:13px;overflow-wrap:anywhere}

#redact-panel{min-height:200px}
.unavailable{border:1.5px dashed var(--line-strong);border-radius:16px;padding:48px 24px;text-align:center;background:var(--surface)}
.unavailable strong{display:block;font-size:17px;font-weight:620}
.unavailable p{margin:8px 0 0;font-size:14px;color:var(--muted)}

@media(max-width:1000px){
  .layout{grid-template-columns:minmax(0,1fr)}
  .side{position:static}
}
@media(max-width:650px){
  .doc-bar{flex-wrap:wrap;padding:14px 16px}
  .doc-actions{width:100%;justify-content:flex-start}
  .doc-actions .ghost{flex:1;white-space:nowrap;padding:8px 10px}
  .tool-button{padding:8px 9px}
  .tool-button .label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .modes{display:grid;grid-template-columns:repeat(4,1fr);width:100%;gap:2px}
  .modes button{padding:8px 6px}
  .select-bar{padding:10px 12px}
  .pages{grid-template-columns:repeat(auto-fill,minmax(96px,1fr));padding:12px;gap:10px 6px;max-height:64vh}
  .page{padding:6px}
  .mode-panel,.save-card{padding:16px}
}
#redact-panel + .save-card{max-width:420px;margin:16px 0 0 auto}
