:root {
  --bg: #0f172a;
  --panel: #1e293b;
  --line: #334155;
  --text: #e2e8f0;
  --accent: #2563eb;
  --accent2: #16a34a;
  --danger: #dc2626;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  background: var(--bg);
  color: var(--text);
}
.toolbar {
  position: sticky; top: 0; z-index: 50;
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px;
  padding: 10px 14px; background: var(--panel);
  border-bottom: 1px solid var(--line);
}
.brand { font-size: 16px; }
.group { display: flex; align-items: center; gap: 8px; }
button {
  background: #334155; color: var(--text); border: 1px solid var(--line);
  border-radius: 6px; padding: 7px 10px; cursor: pointer; font-size: 13px;
}
button:hover { background: #3f4d63; }
button.primary { background: var(--accent); border-color: var(--accent); }
button.primary:hover { background: #1d4ed8; }
button.active { outline: 2px solid var(--accent2); }
.status { font-size: 13px; color: #93c5fd; margin-left: auto; }
.pages { display: flex; flex-direction: column; align-items: center; gap: 18px; padding: 18px; }
.page { position: relative; background: #fff; box-shadow: 0 4px 18px rgba(0,0,0,.45); }
.page canvas.bg { display: block; }
.textlayer, .photolayer, .addedlayer { position: absolute; inset: 0; }
.textlayer { pointer-events: none; }
.textlayer span {
  position: absolute; white-space: pre; cursor: text;
  padding: 0 1px; line-height: 1; outline: none; pointer-events: auto;
}
.textlayer span:hover { outline: 1px dashed var(--accent); }
.textlayer span:focus { outline: 1px dashed var(--accent); background: rgba(37,99,235,.08); }
.photolayer, .addedlayer { pointer-events: none; }
.photo, .added {
  position: absolute; cursor: grab; border: 1px dashed transparent;
  pointer-events: auto;
}
body.adding .addedlayer { pointer-events: auto; }
.photo:focus, .added:focus, .photo:hover, .added:hover { border-color: var(--accent); }
.photo img { width: 100%; height: 100%; display: block; object-fit: contain; pointer-events: none; }
.added { padding: 2px 4px; background: rgba(255,255,255,.85); }
.handle {
  position: absolute; right: -8px; bottom: -8px; width: 14px; height: 14px;
  background: var(--accent); border-radius: 3px; cursor: nwse-resize; display: none;
}
.photo:hover .handle, .added:hover .handle { display: block; }
.hint { text-align: center; color: #94a3b8; font-size: 13px; padding: 0 20px 24px; }