body { margin:0; font-family: Arial, sans-serif; background:#0b0c10; color:#eaeaea; }
.topbar { display:flex; justify-content:space-between; align-items:center; padding:12px 16px; background:#111; position:sticky; top:0; z-index:10; }
.actions { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.actions button { margin-left:8px; padding:8px 10px; cursor:pointer; border-radius:10px; border:1px solid #2a2a2a; background:#171a22; color:#fff; }
.actions button:hover { filter:brightness(1.1); }
.panel button { padding:8px 10px; cursor:pointer; border-radius:10px; border:1px solid #2a2a2a; background:#171a22; color:#fff; }
.panel button:hover { filter:brightness(1.1); }

.main { display:grid; grid-template-columns: 320px 1fr; gap:12px; padding:12px; }
.main.single { grid-template-columns: 1fr; }

.panel { background:#12151c; border:1px solid #222; border-radius:12px; padding:12px; }
.row { display:flex; flex-direction:column; gap:6px; margin-bottom:10px; }
.row input, .row select { padding:8px; border-radius:10px; border:1px solid #2a2a2a; background:#0f1116; color:#fff; }
.muted { opacity:.75; font-size:13px; }
.hint { opacity:.9; font-size:13px; line-height:1.4; margin-top:12px; }

.stage { position:relative; width:fit-content; margin:0 auto; background:#111; border-radius:14px; padding:10px; box-shadow: 0 10px 30px rgba(0,0,0,.35); }
#pdfCanvas { display:block; border-radius:12px; }
.overlay { position:absolute; left:10px; top:10px; }

.field {
  position:absolute;
  border:2px dashed var(--field-color, rgba(0, 200, 255, .8));
  border-radius:10px;
  box-sizing:border-box;
  cursor:move;
  background: color-mix(in srgb, var(--field-color, rgba(0,200,255,1)) 20%, transparent);
}
.field.selected { border-style:solid; }
.field .tag {
  position:absolute; left:6px; top:6px;
  background:rgba(0,0,0,.6); padding:4px 8px; border-radius:8px;
  font-size:12px;
  cursor:move;
  user-select:none;
}

.pager { display:flex; align-items:center; gap:6px; }
.pager input { width:64px; padding:6px 8px; border-radius:10px; border:1px solid #2a2a2a; background:#0f1116; color:#fff; }
.alignRow { display:flex; flex-wrap:wrap; gap:6px; }
.alignRow button { min-width:44px; }

.guide-line { position:absolute; background:rgba(255, 196, 0, 0.9); pointer-events:none; z-index:3; box-shadow:0 0 8px rgba(255,196,0,0.6); }
.guide-v { width:1px; top:0; height:100%; }
.guide-h { height:1px; left:0; width:100%; }
.marquee { position:absolute; border:1px dashed rgba(255,196,0,0.9); background:rgba(255,196,0,0.15); pointer-events:none; z-index:4; }

.inputBox { position:absolute; box-sizing:border-box; }
.inputBox input[type="text"] {
  width:100%; height:100%;
  border:1px solid rgba(255,255,255,.25);
  border-radius:10px;
  padding:6px 8px;
  background:rgba(0,0,0,.25);
  color:#fff;
  outline:none;
}
.checkboxBox { display:flex; align-items:center; justify-content:center; }
.checkboxBox input { transform:scale(1.25); }
.imageBox { position:absolute; box-sizing:border-box; border:1px dashed rgba(255,255,255,.3); border-radius:8px; background:rgba(0,0,0,0.2); overflow:hidden; display:flex; align-items:center; justify-content:center; }
.imagePreview { max-width:100%; max-height:100%; object-fit:contain; }
.imageLabel { position:absolute; bottom:6px; right:6px; background:rgba(0,0,0,0.6); padding:4px 8px; border-radius:8px; font-size:12px; cursor:pointer; }
.imageLabel input { display:none; }