@charset "UTF-8";
.mm-dropzone { border: 2px dashed var(--border-color); border-radius: var(--tool-radius); padding: 30px; text-align: center; cursor: pointer; transition: var(--tool-transition); }
.mm-dropzone:hover, .mm-dropzone.drag { border-color: var(--tool-accent); background: var(--alt-content-bg-color); }
.mm-dropzone .icon { font-size: 2.4rem; }
.mm-editor { display: grid; grid-template-columns: 1fr 300px; gap: 18px; align-items: start; }
.mm-canvas-wrap { text-align: center; }
#mmCanvas { max-width: 100%; border: 1px solid var(--border-color); border-radius: var(--tool-radius-sm); cursor: move; background: var(--alt-content-bg-color); }
.mm-controls { display: flex; flex-direction: column; gap: 12px; }
.mm-controls .tool-field label { font-size: 0.8rem; }
.mm-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.mm-inline { display: flex; align-items: center; gap: 8px; font-size: 0.85rem; }
.mm-capbox { border: 1px solid var(--border-color); border-radius: var(--tool-radius); padding: 12px; margin-bottom: 12px; background: var(--alt-content-bg-color); }
.mm-capbox h4 { margin: 0 0 10px; font-size: 0.92rem; font-weight: 700; }
.mm-export { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.mm-note { font-size: 0.78rem; opacity: 0.7; margin-top: 4px; }
.mm-about p { margin: 0 0 12px; }
@media (max-width: 780px) { .mm-editor { grid-template-columns: 1fr; } }