:root{font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif}
body{margin:0;background:#f6f7f9;color:#111}
.container{max-width:1400px;margin:18px auto;padding:0 16px}
.card{background:#fff;border-radius:16px;box-shadow:0 6px 22px rgba(0,0,0,.06);padding:14px}
.topbar{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:10px;flex-wrap:wrap}
.row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.btn{border:0;background:#0b57d0;color:#fff;padding:10px 14px;border-radius:12px;font-weight:800;cursor:pointer;text-decoration:none;display:inline-block}
.btn.secondary{background:#111827}
.btn.ghost{background:#eef2ff;color:#111}
.btn.danger{background:#b91c1c}
.small{color:#6b7280;font-size:12px}
.flash{padding:10px 12px;border-radius:12px;margin:10px 0}
.flash.ok{background:#dcfce7}
.flash.err{background:#fee2e2}

/* A4 canvas */
.paper-wrap{display:flex;justify-content:center}
.paper{
  position:relative;
  width:210mm;height:297mm;
  background:#fff;
  background-image:url('/static/ciak_bg.png');
  background-size:100% 100%;
  background-repeat:no-repeat;
  border-radius:10px;
  overflow:hidden;
  box-shadow:0 10px 30px rgba(0,0,0,.10);
}

/* form fields overlay */
.f{position:absolute;border:0;outline:none;background:transparent;padding:0;margin:0;font-size:10pt;line-height:1.1}
.f.box{border:1px dashed rgba(0,0,0,.18);border-radius:8px;padding:2px 4px;background:rgba(255,255,255,.40)}
.f.small{font-size:9pt}
.f:focus{border-style:solid;border-color:rgba(11,87,208,.55);background:rgba(255,255,255,.65)}

/* calibration boxes */
.calbox{position:absolute;border:2px solid rgba(255,0,0,.55);background:rgba(255,0,0,.08);border-radius:10px;cursor:move}
.calbox.sel{outline:3px solid rgba(11,87,208,.7)}
.calbox .tag{position:absolute;left:6px;top:-18px;background:rgba(0,0,0,.78);color:#fff;font-size:11px;padding:2px 7px;border-radius:999px;white-space:nowrap}
.calbox .handle{position:absolute;right:-6px;bottom:-6px;width:14px;height:14px;border-radius:5px;background:rgba(0,0,0,.75);cursor:nwse-resize}
.controls{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin:10px 0}
.ctrl{display:flex;gap:6px;align-items:center}
.ctrl input[type="number"]{width:92px;padding:8px 10px;border:1px solid #d7dbe3;border-radius:10px}
.ctrl input[type="range"]{width:220px}

/* zoom container for calibration */
.zoom-wrap{display:flex;justify-content:center;overflow:auto;border:1px solid #eef2f7;border-radius:14px;padding:10px;background:#fafbff}
.zoom-inner{transform-origin:top center}

table{width:100%;border-collapse:collapse}
th,td{padding:10px;border-bottom:1px solid #eef2f7;text-align:left}
thead th{font-size:12px;color:#6b7280}