.mm-overlay{
  position:fixed;inset:0;z-index:100;background:rgba(7,14,22,.45);
  display:none;align-items:stretch;justify-content:center;padding:0;overscroll-behavior:contain;
}
.mm-overlay.open{display:flex}
.mm-panel{background:var(--paper);width:100%;height:100%;overflow:auto;display:flex;flex-direction:column}
.mm-bar{
  position:sticky;top:0;z-index:30;display:flex;align-items:center;gap:10px;
  padding:12px var(--gutter);background:#fff;
  color:var(--ink);flex-shrink:0;border-bottom:2px solid var(--ink);
}
.mm-bar .mm-title{font-family:var(--disp);font-weight:700;font-size:22px;letter-spacing:-.02em;flex-shrink:0;color:var(--ink)}
.mm-bar .mm-count{font-size:13px;color:var(--ink-soft);flex-shrink:0}

.mm-search-wrap{position:relative;flex:1;min-width:0;z-index:40}
.mm-search{
  display:flex;align-items:center;gap:8px;height:42px;border:2px solid var(--ink);
  background:#fff;padding:0 12px;width:100%;border-radius:0;
}
.mm-search:focus-within{background:#fff;border-color:var(--ink);box-shadow:3px 3px 0 0 var(--blue)}
.mm-search svg{width:14px;height:14px;color:var(--ink);flex-shrink:0}
.mm-search input{flex:1;min-width:0;border:none;background:transparent;color:var(--ink);font-size:14px;outline:none}
.mm-search input::placeholder{color:var(--ink-soft)}
.mm-close{
  flex-shrink:0;width:42px;height:42px;border:2px solid var(--ink);background:#fff;color:var(--ink);
  cursor:pointer;display:grid;place-items:center;border-radius:0;
}
.mm-close svg{width:16px;height:16px}
.mm-close:hover{background:var(--blue);color:#fff;border-color:var(--ink)}

.mm-results{
  display:none;position:absolute;left:0;right:0;top:calc(100% + 6px);z-index:50;
  flex-direction:column;max-height:min(52vh,420px);overflow:auto;
  background:#fff;border:2px solid var(--ink);border-radius:0;box-shadow:4px 4px 0 0 var(--ink);
}
.mm-results.on{display:flex}
.mm-results-empty{padding:14px 12px;font-size:13px;color:var(--ink-soft)}
.mm-hit{display:block;padding:10px 12px;border-bottom:1px solid var(--line-soft);color:inherit}
.mm-hit:last-child{border-bottom:none}
.mm-hit:hover{background:var(--paper)}
.mm-hit-path{font-size:14px;line-height:1.4;display:block}
.mm-hit-path .sep{color:var(--ink-soft);margin:0 6px}
.mm-hit mark{background:var(--orange);color:var(--ink);font-weight:800}

.mm-grid{columns:4;column-gap:12px;padding:18px var(--gutter) 40px}
.mm-cat{
  display:grid;grid-template-columns:80px minmax(0,1fr);gap:10px 12px;
  background:#fff;padding:14px;min-width:0;border-radius:0;border:2px solid var(--ink);
  break-inside:avoid;margin-bottom:12px;width:100%;
}
.mm-draw{width:80px;height:80px;object-fit:contain;background:var(--paper);padding:6px;border-radius:0;border:2px solid var(--ink)}
.mm-body{min-width:0;display:flex;flex-direction:column;gap:4px}
.mm-l1{font-weight:800;font-size:14px;line-height:1.2;padding:2px 0}
.mm-l1:hover{color:var(--blue)}
.mm-l2{list-style:none;display:flex;flex-direction:column;gap:1px}
.mm-l2-row{display:flex;align-items:center;gap:6px;width:100%;padding:3px 0}
.mm-l2-link{flex:1;font-size:13px;color:var(--ink-soft)}
.mm-l2-row:hover .mm-l2-link{color:var(--ink)}
.mm-l2>li.has-kids>.mm-l2-row .mm-l2-link{color:var(--ink);cursor:default;font-weight:700}
.mm-toggle{
  flex-shrink:0;width:22px;height:22px;border:2px solid var(--ink);background:#fff;
  cursor:pointer;font-size:14px;line-height:1;display:grid;place-items:center;border-radius:0;
}
.mm-l2>li.open .mm-toggle{background:var(--ink);color:#fff;border-color:var(--ink)}
.mm-l3{list-style:none;display:none;flex-direction:column;padding:2px 0 6px 10px;border-left:2px solid var(--blue);margin:2px 0 4px}
.mm-l2>li.open>.mm-l3{display:flex}
.mm-l3 a{font-size:12.5px;color:var(--ink-soft);padding:4px 0;display:block}
.mm-l3 a:hover{color:var(--blue)}

body.mm-lock{overflow:hidden}

@media(max-width:1180px){
  .mm-grid{columns:3}
}
@media(max-width:860px){
  .mm-bar{flex-wrap:wrap}
  .mm-search-wrap{order:3;flex:1 1 100%}
  .mm-close{margin-left:auto}
  .mm-grid{columns:2}
  .mm-cat{grid-template-columns:64px minmax(0,1fr)}
  .mm-draw{width:64px;height:64px}
}
@media(max-width:560px){
  .mm-grid{columns:1}
}