.mm { background: #ece9d8; height: 100%; display: flex; flex-direction: column; font: 11px Tahoma, sans-serif; }
.mm-menu { padding: 3px 8px; border-bottom: 1px solid #aca899; background: #f4f2e8; }
.mm-top { flex: 1; display: flex; gap: 8px; padding: 8px; min-height: 0; } .mm-left { width: 250px; overflow: auto; background: #fff; border: 1px solid #7f9db9; padding: 4px; } .mm-left h4, .mm-board h4 { margin: 0 0 4px; color: #0a3a8a; }
.mm-coll { display: flex; flex-wrap: wrap; gap: 4px; } .mm-item { width: 54px; text-align: center; cursor: pointer; font-size: 9px; } .mm-item:hover { background: #cde; } .mm-item canvas, .mm-clip canvas { display: block; }
.mm-right { flex: 1; } .mm-cv { width: 320px; height: 240px; background: #000; border: 2px inset #888; display: block; } .mm-btns { display: flex; gap: 6px; margin: 6px 0; }
.mm-form { display: grid; grid-template-columns: 70px 1fr; gap: 4px; max-width: 320px; align-items: center; } .mm-in { width: 100%; font: 11px Tahoma; }
.mm-board { height: 110px; border-top: 2px solid #aca899; padding: 4px 8px; background: #d4d0c0; } .mm-strip { display: flex; gap: 4px; overflow-x: auto; min-height: 80px; background: #fff; border: 1px solid #7f9db9; padding: 4px; }
.mm-clip { position: relative; width: 66px; flex: none; font-size: 9px; text-align: center; border: 1px solid #aaa; background: #f4f2e8; padding: 2px; } .mm-x { position: absolute; right: 0; top: 0; border: 0; background: #c4161c; color: #fff; cursor: pointer; font-size: 10px; line-height: 12px; }
.mm-empty { color: #888; padding: 22px; }