body { background:#0d0d0d; color:#eee; font-family:monospace; margin:0; }
header {
  background:#1e1e1e; padding:10px;
  display:grid; grid-template-columns:1fr auto 1fr; align-items:center;
}
#time { justify-self:end; color:#00bcd4; font-size:20px; font-weight:bold; }
#controls { justify-self:center; }
.btn {
  background:#222; color:#ccc; border:1px solid #333;
  border-radius:6px; padding:6px 10px; cursor:pointer; margin-left:6px;
}
.btn:hover { background:#333; color:#fff; }

#file-area {
  display:none; margin:10px; background:#111;
  padding:10px; border:1px solid #333; border-radius:6px;
}
#filter-input {
  width:100%; margin-top:6px; padding:6px;
  background:#0d0d0d; border:1px solid #333; color:#eee;
  border-radius:6px;
}
#file-list {
  background:#111; border:1px solid #333;
  padding:10px; max-height:250px; overflow-y:auto; margin-top:5px;
}
.item { padding:3px; cursor:pointer; border-radius:3px; }
.item:hover { background:#222; }
.dir { color:#00bcd4; }
.file { color:#bbb; }

.grid-stack { margin:10px; }
.grid-stack-item-content {
  background:#1a1a1a; border:1px solid #333;
  border-radius:8px; padding:8px; overflow:auto;
}
pre { white-space:pre-wrap; margin:5px 0 0; font-family: monospace; color:#dfffe8; }
.editing .grid-stack-item-content {
  outline:1px dashed #00bcd4;
  cursor:move;
}

/* Hide buttons in view mode */
.log-header button { display:none; }
.editing .log-header button { display:inline-block; margin-left:4px; }

#toast {
  position:fixed; bottom:10px; right:10px;
  background:#0a1; color:white; padding:8px 12px;
  border-radius:8px; opacity:0; transition:opacity .5s;
  z-index:9999;
}

/* a bit wider pre inside boxes */
.grid-stack-item .grid-stack-item-content pre {
  margin: 6px 0 0;
  max-height: calc(100% - 30px);
  overflow-y: auto;
  display: block;
}