:root{
  --toolbar-bg:#222;
  --accent:#28a745;
  --danger:#d9534f;
}

*{box-sizing:border-box;}
body{
  font-family: Inter, Arial, sans-serif;
  margin:0;
  background:#f4f5f7;
  color:#222;
}

/* Toolbar */
#toolbar{
  display:flex;
  gap:8px;
  align-items:center;
  padding:10px;
  background:var(--toolbar-bg);
  color:#fff;
}
#toolbar button{
  padding:8px 12px;
  border:none;
  background:var(--accent);
  color:white;
  cursor:pointer;
  border-radius:4px;
}
#toolbar input[type=file]{margin-left:8px}

/* Layout */
#workspace{display:flex; gap:16px; padding:16px; align-items:flex-start;}
#canvas-wrap{flex:0 0 auto;}
#canvas{
  width:794px;   /* approx A4 at 96dpi */
  height:1123px;
  background:white;
  border:1px solid #bbb;
  position:relative;
  overflow:hidden;
  box-shadow:0 8px 18px rgba(0,0,0,0.08);
}

/* slip horizontal guides — 5 equal zones */
#slip-guides{position:absolute; left:0; right:0; top:0; bottom:0; pointer-events:none;}
#slip-guides .guide{
  position:absolute; left:0; right:0; height:20%;
  border-bottom:1px dashed rgba(0,0,0,0.12);
  box-sizing:border-box;
}

/* draggable elements */
.draggable{
  position:absolute;
  left:20px;
  top:20px;
  min-width:30px;
  min-height:20px;
  padding:6px;
  border:1px dashed transparent;
  background:transparent;
  cursor:move;
  user-select:none;
}

/* visible border when selected */
.draggable.selected{
  border-color:#4285f4;
  box-shadow:0 2px 8px rgba(66,133,244,0.12);
}

/* resize handle */
.resize-handle{
  position:absolute;
  width:12px;
  height:12px;
  background:#fff;
  border:2px solid #666;
  right:-8px;
  bottom:-8px;
  cursor:se-resize;
  border-radius:2px;
}

/* table styles inside canvas */
.draggable table{border-collapse:collapse;background:transparent;}
.draggable table td{padding:4px;border:1px solid #999;}

/* properties panel */
#properties{
  width:320px;
  background:white;
  border:1px solid #ccc;
  padding:12px;
  box-shadow:0 6px 18px rgba(0,0,0,0.06);
  height:600px;
  overflow:auto;
}
#properties.hidden{display:none}
#properties h3{margin:0 0 10px 0}
.prop-row{margin-bottom:10px;display:flex;gap:8px;align-items:center}
.prop-row label{min-width:100px;font-size:13px}
.prop-row input[type="text"], .prop-row input[type="number"], .prop-row select{
  flex:1;padding:6px;border:1px solid #ddd;border-radius:4px;
}
.prop-row .color{width:40px;height:28px;padding:0;border:none}

/* props actions */
.props-actions{display:flex;gap:8px; margin-top:8px}
.props-actions button{flex:1;padding:8px;border-radius:4px}
.props-actions .danger{background:var(--danger);color:#fff;border:none}

/* mapper */
#fieldMapper{position:fixed;left:30%;top:18%;width:40%;background:white;border:2px solid #333;padding:12px;box-shadow:0 10px 30px rgba(0,0,0,0.2)}
#fieldMapper.hidden{display:none}

/* small helpers */
.small{font-size:12px;color:#666}

/* field badge */
.field-badge{
  display:inline-block;padding:2px 6px;background:#eef6ff;border:1px solid #cfe6ff;border-radius:4px;color:#0366d6;font-size:12px;
}