* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; font: 14px/1.4 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; color: #1f2937; }
body { display: flex; flex-direction: column; background: #e5e7eb; }

.toolbar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px;
  padding: 8px 12px; background: #1e293b; color: #f1f5f9; z-index: 10;
}
.brand { font-weight: 700; font-size: 16px; margin-right: 4px; }
.group { display: flex; align-items: center; gap: 6px; }
.group.right { margin-left: auto; }
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 6px 12px; border: 1px solid #475569; border-radius: 6px;
  background: #334155; color: inherit; font: inherit; cursor: pointer; white-space: nowrap;
}
.btn:hover { background: #475569; }
.btn.primary { background: #2563eb; border-color: #2563eb; color: #fff; }
.btn.primary:hover { background: #1d4ed8; }
.btn.active { background: #f59e0b; border-color: #f59e0b; color: #111; }
.btn.big { padding: 10px 22px; font-size: 16px; }
.chk { display: inline-flex; align-items: center; gap: 4px; cursor: pointer; white-space: nowrap; }
select, .pageinfo input { font: inherit; padding: 5px; border-radius: 6px; border: 1px solid #475569; background: #0f172a; color: inherit; }
.pageinfo input { width: 56px; }
body:not(.has-doc) [data-needs-doc] { display: none; }

.main { flex: 1; display: flex; min-height: 0; }
.sidebar { width: 230px; flex-shrink: 0; overflow: auto; padding: 12px; background: #f8fafc; border-right: 1px solid #cbd5e1; }
.sidebar h3 { margin: 4px 0 6px; font-size: 13px; text-transform: uppercase; letter-spacing: .04em; color: #475569; }
.hint { font-size: 12px; color: #64748b; margin: 0 0 12px; }
#sigLibrary { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; }
.sig-item { position: relative; border: 2px solid #cbd5e1; border-radius: 6px; background: #fff url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="10" height="10"><rect width="5" height="5" fill="%23eee"/><rect x="5" y="5" width="5" height="5" fill="%23eee"/></svg>'); padding: 6px; cursor: pointer; }
.sig-item img { display: block; max-width: 100%; max-height: 70px; margin: 0 auto; }
.sig-item.selected { border-color: #f59e0b; box-shadow: 0 0 0 2px #fde68a; }
.sig-item .del { position: absolute; top: 2px; right: 2px; border: 0; background: #ef4444; color: #fff; border-radius: 4px; width: 20px; height: 20px; cursor: pointer; line-height: 1; }

#viewerContainer { position: absolute; inset: 0; overflow: auto; }
.main { position: relative; }
.main > .sidebar + #viewerContainer { left: 230px; }
body:not(.has-doc) #viewerContainer { left: 0; }

.empty { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; text-align: center; padding: 24px; }
.empty > div { max-width: 520px; background: #fff; padding: 32px; border-radius: 12px; box-shadow: 0 10px 30px rgba(0,0,0,.08); }
.empty h1 { margin-top: 0; font-size: 22px; }
.empty .small { font-size: 12px; color: #64748b; }
.has-doc .empty { display: none; }
#viewerContainer.dragover { outline: 4px dashed #2563eb; outline-offset: -12px; }

/* Our overlay layer, sits above pdf.js layers */
.ff-layer { position: absolute; inset: 0; z-index: 20; pointer-events: none; }
.ff-layer.placing { pointer-events: auto; cursor: crosshair; }
.ff-item { position: absolute; pointer-events: auto; cursor: move; outline: 1px dashed transparent; touch-action: none; }
.ff-item:hover, .ff-item.selected { outline-color: #2563eb; }
.ff-item img { width: 100%; height: 100%; display: block; pointer-events: none; user-select: none; }
.ff-item .ff-handle { position: absolute; right: -6px; bottom: -6px; width: 12px; height: 12px; background: #2563eb; border: 2px solid #fff; border-radius: 50%; cursor: nwse-resize; display: none; }
.ff-item .ff-del { position: absolute; right: -10px; top: -10px; width: 20px; height: 20px; border: 0; border-radius: 50%; background: #ef4444; color: #fff; cursor: pointer; font-size: 13px; line-height: 20px; padding: 0; display: none; }
.ff-item:hover .ff-handle, .ff-item.selected .ff-handle,
.ff-item:hover .ff-del, .ff-item.selected .ff-del { display: block; }
.ff-text .ff-txt { font-family: Helvetica, Arial, sans-serif; white-space: pre; line-height: 1.2; color: #000; outline: none; min-width: 1ch; cursor: text; padding: 0; }
.ff-sigfield {
  position: absolute; pointer-events: auto; cursor: pointer; border: 2px dashed #f59e0b;
  background: rgba(253, 230, 138, .35); color: #92400e; font-weight: 600; font-size: 12px;
  display: flex; align-items: center; justify-content: center; border-radius: 3px;
}
.ff-sigfield:hover { background: rgba(253, 230, 138, .6); }

.status { position: fixed; bottom: 16px; left: 50%; transform: translateX(-50%); background: #111827; color: #fff; padding: 10px 16px; border-radius: 8px; z-index: 100; max-width: 90vw; box-shadow: 0 6px 20px rgba(0,0,0,.25); }
.status.error { background: #b91c1c; }

@media (max-width: 800px) {
  .sidebar { display: none !important; }
  .main > .sidebar + #viewerContainer { left: 0; }
  .group.right { margin-left: 0; }
}
.ff-sigfield[hidden] { display: none; }

.footer-links { font-size: 12px; color: #64748b; margin-top: 16px; }
.footer-links a { color: inherit; }
body.doc-page { display: block; background: #f8fafc; overflow: auto; }
.doc-page main { max-width: 720px; margin: 0 auto; padding: 32px 20px 64px; line-height: 1.6; }
.doc-page a { color: #2563eb; }
.empty a { color: #2563eb; }
body.booting .btn.primary { opacity: .6; cursor: progress; }
.lbl { white-space: nowrap; }
.seg { display: inline-flex; }
.seg .btn { border-radius: 0; min-width: 34px; font-size: 16px; padding: 4px 8px; }
.seg .btn:first-child { border-radius: 6px 0 0 6px; }
.seg .btn:last-child { border-radius: 0 6px 6px 0; }
.seg .btn + .btn { border-left-width: 0; }
.ff-mark { cursor: pointer; }
.ff-mark svg { display: block; pointer-events: none; }
.ff-mark .ff-del { display: none !important; }
.ff-mark .ff-handle { width: 9px; height: 9px; right: -10px; bottom: -10px; border-width: 1px; }