canvas{border:1px dashed #ced4da;background:#f8f9fa;max-width:100%}
.dz-hover{outline:2px dashed #198754; outline-offset:4px}
.mono-badge{display:inline-block;padding:.25rem .5rem;border-radius:.25rem;background:#eee;margin-left:.5rem}
.header-controls .col-auto{white-space:nowrap}

/* === Mobile friendly === */
.header-controls{overflow-x:auto; -webkit-overflow-scrolling:touch; flex-wrap:nowrap}
.header-controls .col-auto{flex:0 0 auto}
@media (max-width: 576px){
  .header-controls .small.text-muted{display:none} /* “D&D可”などの補足を隠す */
  .card-body .input-group.input-group-sm{width:100% !important}
}

/* キャンバスのレスポンシブ */
.canvas-wrap{width:100%; max-width:100%; margin-inline:auto}
#canvas{width:100%; height:auto; image-rendering:pixelated; touch-action:none; -webkit-user-select:none; user-select:none}

/* モバイルで操作ボタンを見失わないように固定 */
.sticky-actions{
  position:sticky; bottom:.5rem; padding:.5rem;
  background:rgba(255,255,255,.9); backdrop-filter:saturate(180%) blur(8px);
  border-radius:.75rem; max-width:520px; margin:0 auto;
}

/* モーダル内キャンバス */
#modalCanvas{max-width:100%; height:auto}