* { box-sizing: border-box; margin:0; padding:0; }
body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; background:#f4f6f8; }

main { flex:1; display:flex; justify-content:center; align-items:center; background:#e9ecef; padding:10px; }
canvas { max-width:100%; max-height:100%; border:3px solid #333; background:white; cursor:crosshair; }

.sidebar {
  background:white;
  width:260px;
  padding:20px;
  display:flex;
  flex-direction:column;
  overflow-y:auto;
  border-right:1px solid #ddd;
}

.sidebar h1 { text-align:center; margin-bottom:20px; }

.btn { padding:10px; border:none; border-radius:6px; color:white; font-weight:600; cursor:pointer; margin-bottom:6px; }
.screw-btn { background-color:#28a745; }
.bolt-btn { background-color:#dc3545; }
.component-btn { background-color:#007bff; }
.custom-btn { background-color:#ffc107; color:#333; }
.undo-btn { background-color:#17a2b8; }
.export-btn { background-color:#6c757d; }

textarea { width:100%; height:70px; resize:vertical; padding:5px; margin-bottom:6px; }

/* Layout */
body, html { height:100%; display:flex; flex-direction:row; }
main { flex:1; }
.sidebar { flex-shrink:0; }

/* Portrait small screens */
@media(max-width:600px) and (orientation:portrait){
  body, html { flex-direction:column; }
  main { order:1; width:100%; height:60vh; }
  .sidebar { order:2; width:100%; height:40vh; border-right:none; border-top:1px solid #ddd; }
}

/* Landscape small screens */
@media(max-width:600px) and (orientation:landscape){
  body, html { flex-direction:row; }
  main { order:1; flex:2; height:100%; }
  .sidebar { order:2; flex:1; height:100%; }
}