:root{
  --bg:#0b0e14;
  --panel:#0f172a;
  --panel2:#111827;
  --border:#1f2937;
  --fg:#e5e7eb;
  --muted:#9ca3af;
  --blue:#2563eb;
  --blue2:#60a5fa;
  --danger:#dc2626;
}
*{ box-sizing:border-box; }
body{
  margin:0;
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  background:var(--bg);
  color:var(--fg);
}
.topbar{
  position:sticky; top:0; z-index:50;
  display:flex; justify-content:space-between; align-items:center;
  padding:10px 12px;
  background:var(--panel);
  border-bottom:1px solid var(--border);
  gap:10px;
}
.toolbar{ display:flex; flex-wrap:wrap; gap:6px; align-items:center; }
.statusbar{ display:flex; align-items:center; gap:10px; }
.btn{
  background:var(--panel2);
  color:var(--fg);
  border:1px solid var(--border);
  border-radius:12px;
  padding:8px 10px;
  cursor:pointer;
  user-select:none;
}
.btn.small{ padding:6px 10px; font-size:13px; }
.btn.primary{ background:var(--blue); border-color:var(--blue); }
.btn.danger{ background:rgba(220,38,38,.12); border-color:rgba(220,38,38,.45); }
.btn:disabled{ opacity:.45; cursor:not-allowed; }
.sep{ display:inline-block; width:10px; }
.mono{ font-family: ui-monospace, SFMono-Regular, Menlo, monospace; color:var(--muted); }

.workspace{ display:grid; grid-template-columns: 320px 1fr; gap:12px; padding:12px; }
.leftpanel{
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:16px;
  overflow:hidden;
}
.panel-title{ padding:10px 12px; border-bottom:1px solid var(--border); color:var(--muted); }
.panel-body{ padding:12px; display:flex; flex-direction:column; gap:10px; }
.row{ display:flex; align-items:center; gap:10px; }
.row label{ width:70px; color:var(--muted); }
.row input[type="range"]{ flex:1; }
.row input[type="color"]{
  width:44px;
  height:30px;
  border:1px solid var(--border);
  border-radius:8px;
  background:transparent;
  padding:2px;
}
.hint{ margin-top:6px; color:var(--muted); font-size:13px; line-height:1.5; }

.centerpanel{ display:flex; justify-content:center; align-items:flex-start; min-height: calc(100vh - 90px); }
.stage{
  position:relative;
  background:#111;
  border:1px solid var(--border);
  border-radius:16px;
  overflow:hidden;
  box-shadow: 0 18px 60px rgba(0,0,0,.35);
}
.stage.placing{ cursor: crosshair; }
#pdfCanvas{ display:block; }
#overlay, #guides{ position:absolute; left:0; top:0; width:100%; height:100%; }
#overlay{ pointer-events:none; }
#guides{ pointer-events:none; }

.anno{
  position:absolute;
  pointer-events:auto;
  user-select:none;
  touch-action:none;
  transform-origin:center center;
}
.anno.selected{ outline:2px solid var(--blue2); outline-offset:2px; }
.handle{
  position:absolute;
  width:10px; height:10px;
  border-radius:999px;
  background:var(--blue2);
  border:2px solid var(--bg);
  pointer-events:auto;
  touch-action:none;
}
.handle.rotate{ width:12px; height:12px; background:#fbbf24; }

.guide{ position:absolute; background: rgba(96,165,250,.9); pointer-events:none; }
.guide.h{ height:1px; }
.guide.v{ width:1px; }

.dialog{
  border:1px solid var(--border);
  border-radius:16px;
  padding:0;
  background:var(--panel);
  color:var(--fg);
  width:min(960px, 92vw);
}
.dialog::backdrop{ background: rgba(0,0,0,.6); }
.dialog-head{
  display:flex; justify-content:space-between; align-items:center;
  padding:10px 12px;
  border-bottom:1px solid var(--border);
}
.dialog-body{ padding:12px; }
#signCanvas{
  width:100%;
  height:auto;
  background:#fff;
  border-radius:12px;
}
.dialog-actions{
  margin-top:10px;
  display:flex;
  justify-content:flex-end;
  gap:8px;
}