/* Window */
.mrb-window{ width: min(var(--mrb-width, 600px), 100%); background:#c0c0c0; border:2px solid #000; box-shadow:10px 10px 0 #000; margin: 16px 0; }
.mrb-titlebar{ background:#004f8c; color:#fff; padding:6px 10px; font-weight:700; display:flex; align-items:center; justify-content:space-between; }
.mrb-actions .mrb-btn{ border:1px solid #000; background:#c0c0c0; padding:0 8px; height:20px; line-height:18px; box-shadow: inset -1px -1px 0 #000, inset 1px 1px 0 #fff; cursor:pointer; }
.mrb-body{ padding:12px; background:#dfdfdf; color:#000; }

/* Folder grid */
.mrb-folder-grid{ --mrb-gap: 12px; }
.mrb-grid-title{ font-weight:700; margin-bottom:8px; }
.mrb-grid-items{ display:grid; grid-template-columns: repeat(var(--mrb-cols,3), minmax(0,1fr)); gap: var(--mrb-gap); }
.mrb-folder{ border:2px solid #000; background:#c0c0c0; }
.mrb-folder-head{ width:100%; text-align:left; display:flex; align-items:center; gap:10px; padding:10px; cursor:pointer; border:0; background:#c0c0c0; box-shadow: inset -1px -1px 0 #000, inset 1px 1px 0 #fff; }
.mrb-folder .mrb-ico{ position:relative; width:28px; height:22px; display:inline-block; }
.mrb-folder .mrb-ico::before{ /* folder body */ content:''; position:absolute; left:0; top:4px; width:100%; height:18px; background:#f3c969; border:1px solid #000; box-shadow: inset -1px -1px 0 #000, inset 1px 1px 0 #fff; }
.mrb-folder .mrb-ico::after{ /* tab */ content:''; position:absolute; left:2px; top:0; width:12px; height:8px; background:#f6d58a; border:1px solid #000; box-shadow: inset -1px -1px 0 #000, inset 1px 1px 0 #fff; }
.mrb-folder-title{ font-weight:700; }

.mrb-folder-content{ display:none; padding:10px; background:#dfdfdf; border-top:1px solid #000; }
.mrb-folder.is-open .mrb-folder-content{ display:block; }

/* Responsive */
@media (max-width: 640px){
  .mrb-grid-items{ grid-template-columns: repeat(1,minmax(0,1fr)); }
}